/* ===================== Reset & Base ===================== */
* { box-sizing: border-box; }
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    font-family: Tahoma, 'Segoe UI', Arial, sans-serif;
    background: #f4f6f5;
    color: #1f2a24;
    direction: rtl;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }

:root {
    --primary: #1976d2;
    --primary-dark: #0d47a1;
    --danger: #c0392b;
    --border: #dfe5e2;
    --card-bg: #ffffff;
}

/* ===================== Buttons / Alerts / Forms (shared) ===================== */
.btn {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: #fff;
    color: #1f2a24;
    font-size: 14px;
}
.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); }
.btn-outline { background: transparent; }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-sm { padding: 4px 10px; font-size: 13px; }
.btn-block { width: 100%; text-align: center; }
.btn-icon { background: transparent; border: none; font-size: 20px; padding: 4px 8px; }

.alert { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; }
.alert-error { background: #fdecea; color: #a1281c; border: 1px solid #f3c6c1; }
.alert-success { background: #e8f6ef; color: #146c48; border: 1px solid #bfe8d4; }
.alert ul { margin: 0; padding-inline-start: 20px; }

.form-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
    max-width: 640px;
    margin-bottom: 20px;
}
.form-card label {
    display: block;
    margin-bottom: 14px;
    font-size: 14px;
    color: #3c4a43;
}
.form-card input[type=text], .form-card input[type=password], .form-card input[type=number],
.form-card input[type=search], .form-card input[type=file], .form-card input[type=email], .form-card input[type=tel], .form-card select, .form-card textarea {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    background: #fff;
}
.form-card .checkbox-label { display: flex; align-items: center; gap: 8px; }
.form-card .checkbox-label input { width: auto; margin: 0; }
.form-actions { display: flex; gap: 10px; margin-top: 10px; }
.thumb-preview { max-width: 120px; border-radius: 8px; margin-bottom: 14px; border: 1px solid var(--border); }
.thumb-preview.thumb-round { border-radius: 50%; }

/* ===================== Install page ===================== */
.install-page { display: flex; justify-content: center; padding: 40px 16px; }
.install-wrap {
    background: #fff; border: 1px solid var(--border); border-radius: 14px;
    padding: 28px; max-width: 560px; width: 100%;
}
.install-wrap h1 { font-size: 20px; margin-top: 0; }
.install-wrap form label { display: block; margin-bottom: 14px; font-size: 14px; }
.install-wrap input { display: block; width: 100%; margin-top: 6px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px; }
.req-list { list-style: none; padding: 0; }
.req-list li { padding: 6px 0; }
.req-list li.ok { color: #146c48; }
.req-list li.fail { color: #a1281c; }
.req-detail { color: #7a8a83; font-size: 12px; margin-inline-start: 8px; }

/* ===================== Login page ===================== */
.login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 16px; }
.login-card {
    background: #fff; border: 1px solid var(--border); border-radius: 16px;
    padding: 32px; max-width: 380px; width: 100%; text-align: center;
}
.login-logo img { width: 72px; height: 72px; margin: 0 auto 12px; border-radius: 50%; }
.login-card h1 { font-size: 20px; margin: 0 0 4px; }
.login-subtitle { color: #7a8a83; margin-bottom: 20px; font-size: 14px; }
.login-card form { text-align: right; }
.login-card label { display: block; margin-bottom: 14px; font-size: 14px; }
.login-card input {
    display: block; width: 100%; margin-top: 6px; padding: 10px 12px;
    border: 1px solid var(--border); border-radius: 8px; font-size: 15px;
}

/* ===================== Catalog: top bar ===================== */
.topbar {
    display: flex; align-items: center; justify-content: space-between;
    background: #fff; border-bottom: 1px solid var(--border);
    padding: 10px 16px; position: sticky; top: 0; z-index: 20;
}
.topbar-title { display: flex; align-items: center; gap: 10px; font-weight: bold; font-size: 16px; }
.topbar-user {
    display: flex; align-items: center; gap: 10px;
    position: fixed; top: 10px; left: 16px;
    background: #fff; padding: 6px 10px; border-radius: 10px;
    border: 1px solid var(--border);
}
.user-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.user-meta { font-size: 12px; text-align: right; line-height: 1.5; }
.user-name { font-weight: bold; font-size: 13px; }
.user-last-update { color: #7a8a83; }

@media (max-width: 640px) {
    .topbar-user { position: static; margin-top: 8px; flex-wrap: wrap; }
    .topbar { flex-wrap: wrap; }
}

/* ===================== Search / sort / brand filter ===================== */
.search-bar-wrap { display: flex; flex-wrap: wrap; gap: 10px; padding: 14px 16px 6px; }
.search-input {
    flex: 1; min-width: 160px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px; font-size: 14px; background: #fff;
}
.sort-select { padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: #fff; font-size: 14px; }
.view-toggle { display: flex; gap: 4px; }
.view-toggle .btn { padding: 8px 10px; }
.view-toggle .btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.catalog-alert { margin: 8px 16px; }

.order-summary {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin: 8px 16px 14px; padding: 12px 14px; background: #e8f1fb;
    border: 1px solid #bfd6ef; border-radius: 10px; color: #173b64;
}
.order-summary > div { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.order-summary span { font-size: 13px; }

.image-lightbox {
    position: fixed; inset: 0; background: rgba(0,0,0,.85); z-index: 100;
    display: flex; align-items: center; justify-content: center; padding: 24px;
}
.image-lightbox[hidden] { display: none; }
.image-lightbox img { max-width: 92vw; max-height: 92vh; border-radius: 8px; object-fit: contain; }
.image-lightbox-close {
    position: absolute; top: 16px; left: 16px; width: 38px; height: 38px;
    border-radius: 50%; border: none; background: rgba(255,255,255,.9); color: #1f2a24;
    font-size: 18px;
}

.brand-filter-wrap {
    display: flex; gap: 10px; padding: 6px 16px 14px; overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.brand-btn {
    display: flex; align-items: center; gap: 6px; white-space: nowrap;
    padding: 6px 14px; border-radius: 999px; border: 1px solid var(--border);
    background: #fff; font-size: 13px;
}
.brand-btn img { height: 22px; width: auto; max-width: 64px; }
.brand-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }

/* ===================== Layout: sidebar + grid ===================== */
.catalog-layout { display: flex; gap: 16px; padding: 0 16px 24px; align-items: flex-start; }

.sidebar {
    width: 240px; flex-shrink: 0;
    background: #fff; border: 1px solid var(--border); border-radius: 12px;
    padding: 14px; position: sticky; top: 72px;
    max-height: calc(100vh - 90px); overflow-y: auto;
}
.sidebar h3 { margin: 0 0 10px; font-size: 15px; }

.cat-tree, .cat-children { list-style: none; margin: 0; padding: 0; }
.cat-children { display: block; }
.cat-node.collapsed > .cat-children { display: none; }
.cat-row { display: flex; align-items: center; gap: 4px; }
.cat-toggle { background: none; border: none; font-size: 12px; width: 18px; color: #7a8a83; }
.cat-toggle-spacer { display: inline-block; width: 18px; }
.cat-label {
    flex: 1; text-align: right; background: none; border: none; padding: 6px 4px;
    border-radius: 6px; font-size: 14px; color: #1f2a24;
}
.cat-label:hover { background: #f0f4f2; }
.cat-label.active { background: var(--primary); color: #fff; }

.product-area { flex: 1; min-width: 0; }
.empty-state { text-align: center; padding: 60px 20px; color: #7a8a83; font-size: 15px; }

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 16px;
}

/* ===================== Product card ===================== */
.product-card {
    background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px;
    overflow: hidden; position: relative; display: flex; flex-direction: column;
}
.card-image-wrap {
    position: relative; width: 100%; height: 150px; background: #fff;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.card-image { width: auto; height: 100%; max-width: 100%; object-fit: contain; }
.card-brand-badge {
    position: absolute; top: 8px; right: 8px; height: 28px; width: auto; max-width: 40%;
    border-radius: 4px; padding: 3px 5px;
    background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.card-sku {
    position: absolute; bottom: 8px; right: 8px;
    background: rgba(0,0,0,.65); color: #fff; font-size: 11px;
    padding: 2px 8px; border-radius: 6px;
}
.card-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card-title { font-size: 14px; margin: 0; font-weight: bold; line-height: 1.4; }
.card-desc {
    font-size: 12px; color: #6b7a73; margin: 0; line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.card-desc.truncatable { cursor: pointer; }
.card-desc.expanded { -webkit-line-clamp: unset; display: block; overflow: visible; }

.card-attributes { display: flex; flex-direction: column; gap: 4px; }
.attr-line { font-size: 12px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.attr-line-title { color: #3c4a43; font-weight: bold; }
.attr-line-values { color: #6b7a73; }

.card-stock { font-size: 12px; color: #6b7a73; }

.card-variants { display: flex; flex-direction: column; gap: 4px; }
.variant-row {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    font-size: 12px; padding: 3px 0; border-top: 1px dashed var(--border);
}
.variant-row:first-child { border-top: none; }
.variant-label { color: #3c4a43; }
.variant-sku { color: #7a8a83; font-size: 11px; }
.variant-stock { color: #6b7a73; white-space: nowrap; }
.variant-row-extra { display: none; }
.card-variants.expanded .variant-row-extra { display: flex; }
.variant-toggle-btn {
    align-self: flex-start; background: none; border: none; padding: 4px 0 0;
    color: var(--primary); font-size: 11px; font-weight: bold; cursor: pointer;
}
.variant-toggle-btn:hover { text-decoration: underline; }

.card-units { display: flex; flex-direction: column; gap: 4px; margin-top: auto; padding-top: 6px; }
.unit-price-row {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    font-size: 13px; padding: 3px 0; border-top: 1px dashed var(--border);
}
.unit-price-row:first-child { border-top: none; }
.unit-price-label { color: #3c4a43; }
.unit-price-wrap { display: flex; flex-direction: column; align-items: flex-end; }
.unit-price-value { font-weight: bold; color: var(--primary-dark); white-space: nowrap; }
.unit-price-per-item { font-size: 10px; color: #9aa6a0; white-space: nowrap; }

.card-order-controls { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.card-order-title { font-size: 12px; font-weight: bold; color: #3c4a43; margin-bottom: 4px; }
.card-order-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0; font-size: 11px; color: #526057; }
.card-order-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-order-row input { width: 82px; flex: 0 0 auto; padding: 5px 7px; border: 1px solid var(--border); border-radius: 6px; direction: ltr; text-align: center; }

.product-grid.list-view { display: flex; flex-direction: column; gap: 10px; }
.product-grid.list-view .product-card { min-height: 156px; display: grid; grid-template-columns: 170px minmax(0, 1fr); overflow: visible; }
.product-grid.list-view .card-image-wrap { height: 100%; min-height: 156px; border-radius: 13px 0 0 13px; }
.product-grid.list-view .card-body { justify-content: center; }
.product-grid.list-view .card-share-btn { left: 8px; }

.color-swatches { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.color-swatch {
    position: relative; width: 18px; height: 18px; border-radius: 50%;
    border: 1px solid rgba(0,0,0,.15); box-shadow: 0 0 0 1px rgba(255,255,255,.6) inset;
    flex-shrink: 0;
}
.color-tooltip {
    position: absolute; bottom: calc(100% + 6px); right: 50%; transform: translateX(50%);
    background: rgba(20,20,20,.9); color: #fff; font-size: 11px; white-space: nowrap;
    padding: 3px 8px; border-radius: 6px; opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .15s ease; z-index: 5;
}
.color-swatch:hover .color-tooltip,
.color-swatch.tooltip-active .color-tooltip { opacity: 1; visibility: visible; }

.card-share-btn {
    position: absolute; top: 8px; left: 8px; width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; border: none; background: rgba(255,255,255,.9); color: #1f2a24;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}

/* ===================== PDF export (off-screen, captured via html2canvas) ===================== */
.pdf-export-container {
    display: none; position: fixed; top: 0; left: -9999px;
    background: #fff; direction: rtl; width: 1150px;
}
.pdf-table { width: 1150px; border-collapse: collapse; font-family: Tahoma, Arial, sans-serif; background: #fff; }
.pdf-table th, .pdf-table td {
    height: 75px; max-height: 75px; padding: 0 10px; text-align: right;
    border-bottom: 1px solid #ddd; font-size: 13px; color: #1f2a24;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.pdf-table th { background: #f4f6f5; font-weight: bold; font-size: 13px; }
.pdf-table td:first-child, .pdf-table th:first-child { width: 78px; padding: 0 8px; }
.pdf-table td img { width: 66px; height: 66px; object-fit: contain; border-radius: 4px; vertical-align: middle; }

.pdf-header-html { width: 1150px; background: #fff; direction: rtl; }

.pdf-footer-text { position: relative; width: 1150px; min-height: 34px; padding: 8px 10px 20px; background: #fff; }
.pdf-footer-vat { font-size: 12px; color: #555; text-align: center; }
.pdf-footer-date { position: absolute; left: 10px; bottom: 4px; font-size: 10px; color: #888; white-space: nowrap; }

/*
 * Breakpoints: mobile <=600px (1 card/row, off-canvas sidebar),
 * tablet 601-1023px (2 cards/row, static sidebar), desktop >=1024px (auto-fill, static sidebar).
 */

/* Tablet: 2 cards per row */
@media (max-width: 1023px) {
    .product-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile: sidebar becomes off-canvas, 1 card per row */
@media (max-width: 600px) {
    .catalog-layout { flex-direction: column; }
    .sidebar {
        position: fixed; top: 0; bottom: 0; right: 0; z-index: 50;
        width: 85%; max-width: 300px; max-height: none; border-radius: 0;
        transform: translateX(100%); transition: transform .2s ease;
        box-shadow: -4px 0 12px rgba(0,0,0,.15);
    }
    .sidebar.open { transform: translateX(0); }
    .product-grid { grid-template-columns: 1fr; gap: 10px; }
    .product-card { width: 100%; }
    .catalog-layout { padding: 0 10px 20px; }
    .search-bar-wrap, .brand-filter-wrap { padding-left: 10px; padding-right: 10px; }
    .order-summary { margin-left: 10px; margin-right: 10px; align-items: stretch; flex-direction: column; }
    .order-summary .btn { width: 100%; }
    .product-grid.list-view .product-card { grid-template-columns: 110px minmax(0, 1fr); min-height: 130px; }
    .product-grid.list-view .card-image-wrap { min-height: 130px; }
}

.order-modal[hidden] { display: none; }
.order-modal { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; padding: 16px; }
.order-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.48); }
.order-modal-dialog { position: relative; width: min(100%, 820px); max-height: calc(100vh - 32px); overflow-y: auto; background: #fff; border-radius: 14px; padding: 22px; box-shadow: 0 12px 34px rgba(0,0,0,.26); }
.order-modal-dialog h2 { margin: 0 0 8px; font-size: 18px; }
.order-modal-hint { margin: 0 0 16px; color: #6b7a73; font-size: 13px; line-height: 1.7; }
.order-modal-close { position: absolute; top: 8px; left: 10px; background: transparent; border: none; font-size: 26px; color: #66736c; }
.order-form label { display: block; margin-bottom: 12px; font-size: 13px; color: #3c4a43; }
.order-form input, .order-form textarea, .order-form select { display: block; width: 100%; margin-top: 5px; padding: 9px 10px; border: 1px solid var(--border); border-radius: 8px; background: #fff; font: inherit; }
.order-form-field { margin-bottom: 12px; }
.order-submit-status { margin:12px 0; padding:11px 13px; border:1px solid #c7dcee; border-radius:9px; background:#edf6ff; color:#16476f; font-size:13px; line-height:1.8; white-space:pre-wrap; }
.order-submit-status[hidden] { display:none; }
.order-submit-status.is-error { border-color:#e8b9b9; background:#fff1f1; color:#a32828; }
.order-form-label { display: block; margin-bottom: 5px; font-size: 13px; color: #3c4a43; }
.customer-picker { position: relative; }
.customer-picker-trigger { display: flex; width: 100%; min-height: 42px; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 10px; border: 1px solid var(--border); border-radius: 8px; background: #fff; color: #26342d; font: inherit; text-align: right; cursor: pointer; }
.customer-picker-trigger:hover, .customer-picker-trigger:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px rgba(25,118,210,.12); }
.customer-picker-trigger[aria-expanded="true"] { border-color: var(--primary); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.customer-picker-chevron { color: #607069; font-size: 20px; line-height: 1; transition: transform .15s ease; }
.customer-picker-trigger[aria-expanded="true"] .customer-picker-chevron { transform: rotate(180deg); }
.customer-picker-options { position: absolute; z-index: 3; top: calc(100% - 1px); inset-inline: 0; max-height: 260px; overflow-y: auto; border: 1px solid var(--primary); border-radius: 0 0 9px 9px; background: #fff; box-shadow: 0 12px 26px rgba(0,0,0,.14); }
.customer-picker-search-row { position: sticky; top: 0; z-index: 1; padding: 9px; border-bottom: 1px solid #e7ece9; background: #f7faf8; }
.customer-picker-search { margin: 0 !important; padding-inline-start: 36px !important; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236b7a73' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E") no-repeat 10px center !important; }
.customer-picker-option { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 0; border-bottom: 1px solid #eef1ef; background: #fff; color: #1f2a24; text-align: right; font: inherit; }
.customer-picker-option:hover, .customer-picker-option:focus { background: #eaf3fd; outline: none; }
.customer-picker-option span { direction: ltr; color: #607069; font-size: 12px; }
.customer-picker-empty { padding: 14px; color: #7a8a83; text-align: center; font-size: 13px; }

/* ===================== Ordering catalog redesign ===================== */
.catalog-page { --catalog-navy:#102c57; --catalog-teal:#009d98; --catalog-teal-dark:#007d79; background:#f5f8fc; color:var(--catalog-navy); }
.catalog-page .topbar { min-height:70px; padding:10px 28px; background:#fff; border:0; box-shadow:0 1px 0 #e8edf5; }
.catalog-page .topbar-title { font-size:25px; color:#102c57; gap:14px; }
.catalog-icon-btn,.catalog-cart-trigger { width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; border:1px solid #dde6f2; border-radius:12px; background:#fff; color:#102c57; font-size:21px; }
.catalog-cart-trigger { position:relative; color:#008d88; }
.catalog-cart-trigger b { position:absolute; top:-6px; left:-6px; min-width:19px; padding:2px 5px; border-radius:20px; background:#009d98; color:#fff; font:11px Tahoma, sans-serif; }
.catalog-page .topbar-user { position:static; border:0; padding:0; margin-inline-start:auto; background:transparent; }
.catalog-page .user-meta { display:block; max-width:190px; }
.catalog-page .user-avatar { display:block; flex:none; width:38px; height:38px; border:2px solid #e4edf5; }
.catalog-page .topbar-user > a { display:none; }
.catalog-page .search-bar-wrap { max-width:1060px; margin:20px auto 0; padding:0 20px; align-items:center; }
.catalog-page .search-input { min-height:48px; border-color:#dbe5f0; border-radius:12px; background:#fff; box-shadow:0 4px 16px rgba(27,52,83,.04); }
.catalog-page .sort-select,.catalog-page .view-toggle .btn,.catalog-page #pdfExportBtn { min-height:44px; border-radius:10px; border-color:#dbe5f0; }
.catalog-page .view-toggle .btn.active,.catalog-page .btn-primary { background:var(--catalog-teal); border-color:var(--catalog-teal); }
.catalog-page .brand-filter-wrap { max-width:1060px; margin:12px auto 12px; padding:0 20px; }
.catalog-page .brand-btn { border-color:#dbe5f0; border-radius:10px; background:#fff; }
.catalog-page .brand-btn.active { background:#e4f7f5; border-color:#aee5e1; color:#007d79; }
.catalog-page .catalog-layout { display:block; max-width:1440px; margin:auto; padding:0 24px 32px; }
.catalog-page .product-grid { grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:18px; }
.catalog-page .product-card { min-height:0; border:1px solid #e5ebf3; border-radius:16px; box-shadow:0 7px 22px rgba(26,54,91,.055); transition:transform .18s ease,box-shadow .18s ease; }
.catalog-page .product-card:hover { transform:translateY(-3px); box-shadow:0 12px 30px rgba(26,54,91,.12); }
.catalog-page .card-image-wrap { height:190px; padding:15px; background:linear-gradient(135deg,#fff,#f8fbfe); }
.catalog-page .card-image { max-height:160px; }
.catalog-page .card-body { padding:14px; gap:9px; }
.catalog-page .card-title { color:#102c57; font-size:15px; min-height:42px; }
.catalog-page .card-desc { display:none; }
.catalog-page .card-attributes { padding:7px 0; border-top:1px solid #edf1f6; }
.catalog-page .card-variants { max-height:96px; overflow:auto; padding-inline-end:3px; }
.catalog-page .variant-row { padding:5px 0; border-color:#edf1f6; }
.catalog-page .variant-stock { color:#008d88; font-weight:bold; }
.catalog-page .card-units { background:#f8fbfe; border-radius:10px; padding:6px 9px; }
.catalog-page .unit-price-value { color:#007d79; }
.catalog-page .card-order-controls { border:0; padding:0; }
.catalog-page .card-order-title { display:none; }
.catalog-page .card-order-row { padding:6px 0; }
.catalog-page .card-order-row input { border-color:#d9e5ed; border-radius:8px; }
.catalog-page .card-share-btn { border:1px solid #e4ebf3; color:#64748b; box-shadow:none; }
.catalog-page .sidebar { position:fixed; z-index:130; top:0; right:0; bottom:0; width:min(390px,90vw); max-height:none; padding:24px 20px; border:0; border-radius:0; transform:translateX(105%); transition:transform .24s ease; box-shadow:-18px 0 50px rgba(15,39,75,.18); }
.catalog-page .sidebar.open { transform:translateX(0); }
.catalog-page .sidebar h3 { padding-bottom:14px; border-bottom:1px solid #e7edf4; color:#102c57; }
.catalog-sidebar-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.catalog-sidebar-head h3 { margin:0; flex:1; }
.catalog-sidebar-head button { width:32px; height:32px; border:0; border-radius:8px; background:#f1f6fa; color:#214366; font-size:22px; }
.catalog-page .cat-label { padding:10px 8px; border-radius:9px; }
.catalog-page .cat-label.active { background:#e4f7f5; color:#007d79; }
.catalog-drawer-backdrop { position:fixed; inset:0; z-index:125; background:rgba(9,28,55,.35); backdrop-filter:blur(2px); }
.catalog-drawer-backdrop[hidden] { display:none; }
body.catalog-drawer-open { overflow:hidden; }
.catalog-page .order-summary { position:fixed; z-index:115; left:24px; bottom:24px; width:min(360px,calc(100vw - 48px)); margin:0; border:0; border-radius:16px; background:#fff; box-shadow:0 18px 45px rgba(16,44,87,.2); }
.catalog-page .order-summary .btn { background:#009d98; border-color:#009d98; }
@media (max-width:760px) {
 .catalog-page .topbar { min-height:58px; padding:8px 14px; } .catalog-page .topbar-title { font-size:19px; }
 .catalog-page .search-bar-wrap { margin-top:12px; padding:0 12px; gap:7px; } .catalog-page .search-input { order:-1; flex-basis:100%; min-height:44px; }
 .catalog-page #pdfExportBtn,.catalog-page .view-toggle { display:none; } .catalog-page .sort-select { flex:1; min-width:0; }
 .catalog-page .brand-filter-wrap { margin:10px 0; padding:0 12px; } .catalog-page .catalog-layout { padding:0 12px 24px; }
 .catalog-page .product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
 .catalog-page .card-image-wrap { height:132px; padding:8px; } .catalog-page .card-image { max-height:115px; }
 .catalog-page .card-body { padding:10px; gap:6px; } .catalog-page .card-title { font-size:12px; min-height:34px; }
 .catalog-page .card-brand-badge { height:20px; } .catalog-page .card-attributes,.catalog-page .card-variants,.catalog-page .card-units { font-size:10px; }
 .catalog-page .card-variants { max-height:64px; } .catalog-page .variant-row { font-size:10px; } .catalog-page .card-order-row span { display:none; }
 .catalog-page .card-order-row { justify-content:flex-end; } .catalog-page .card-order-row input { width:100%; } .catalog-page .card-share-btn { width:26px; height:26px; top:5px; left:5px; }
 .catalog-page .order-summary { left:12px; bottom:12px; width:calc(100vw - 24px); } .catalog-page .sidebar { width:min(360px,92vw); }
}
.order-modal-items { margin: 14px 0; border: 1px solid var(--border); border-radius: 8px; max-height: 320px; overflow: auto; }
.order-preview-table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 12px; }
.order-preview-table th, .order-preview-table td { padding: 9px 10px; border-bottom: 1px solid var(--border); text-align: right; vertical-align: middle; }
.order-preview-table th { position: sticky; top: 0; z-index: 1; background: #f4f7f5; color: #35443c; font-weight: bold; }
.order-preview-number { white-space: nowrap; font-variant-numeric: tabular-nums; }
.order-preview-gross { color: #146c48; font-weight: bold; }
.order-preview-total { position: sticky; bottom: 0; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 11px 12px; background: #eaf4ee; color: #174b33; border-top: 1px solid #c5dfcf; }
.order-preview-total strong { white-space: nowrap; font-size: 14px; }

/* Sidebar toggle button is only meaningful when the sidebar is off-canvas (mobile). */
/* Catalog mockup: compact cards and panels that start closed. */
.catalog-page #sidebarToggle { display:inline-flex; }
.catalog-page .topbar-user > a { display:inline-flex; }
.catalog-account-menu { position:relative; }
.catalog-account-menu summary { display:flex; align-items:center; justify-content:center; width:44px; height:44px; border:1px solid #dde6f2; border-radius:12px; background:#fff; color:#102c57; font-size:25px; line-height:1; cursor:pointer; list-style:none; }
.catalog-account-menu summary::-webkit-details-marker { display:none; }
.catalog-account-menu > div { position:absolute; top:52px; left:0; z-index:35; display:flex; flex-direction:column; gap:2px; min-width:165px; padding:8px; border:1px solid #e2e9f1; border-radius:10px; background:#fff; box-shadow:0 12px 25px rgba(10,35,70,.14); }
.catalog-account-menu strong,.catalog-account-menu a { display:block; padding:8px 9px; font-size:12px; white-space:nowrap; }.catalog-account-menu a:hover { background:#eaf8f6; border-radius:7px; }
.catalog-account-pdf { display:none; width:100%; padding:8px 9px; border:0; background:transparent; color:inherit; font-size:12px; text-align:right; white-space:nowrap; }
.catalog-account-pdf:hover { background:#eaf8f6; border-radius:7px; }
.catalog-page .search-bar-wrap,.catalog-page .brand-filter-wrap { max-width:1440px; }
.catalog-page .search-bar-wrap { justify-content:center; padding:0 24px; }
.catalog-page .search-input { max-width:620px; }
.catalog-page .catalog-layout { max-width:1440px; }
.catalog-results-bar { display:flex; gap:12px; align-items:center; justify-content:space-between; margin:8px 0 16px; color:#102c57; }
.catalog-breadcrumb { display:flex; align-items:center; flex-wrap:wrap; gap:5px; width:min(100%,1440px); min-height:35px; margin:12px auto 4px; padding:0 24px; color:#7788a0; font-size:12px; }
.catalog-breadcrumb button { border:0; background:none; color:#547291; padding:5px 2px; font-size:inherit; }
.catalog-breadcrumb button.current { color:#102c57; font-weight:700; cursor:default; }
.catalog-breadcrumb-separator { padding:0 3px; color:#9cacc0; font-size:17px; }
.catalog-category-shortcuts { display:flex; gap:8px; width:min(100%,1440px); margin:16px auto 10px; padding:0 24px; overflow-x:auto; scrollbar-width:thin; }
.catalog-category-chip { flex:none; padding:9px 14px; border:1px solid #dce5ef; border-radius:9px; background:#fff; color:#365375; font-size:12px; }
.catalog-category-chip.active { border-color:#007fbb; background:#087ed0; color:#fff; }
.catalog-results-bar span { color:#70819c; font-size:12px; }
.catalog-page .product-grid { grid-template-columns:repeat(auto-fill,minmax(245px,1fr)); gap:16px; }
.catalog-page .catalog-modern-card { border:1px solid #e7edf5; border-radius:13px; box-shadow:0 5px 20px rgba(12,37,74,.065); background:#fff; min-height:420px; }
.catalog-page .catalog-modern-card .card-image-wrap { height:220px; background:#fff; padding:20px; }
.catalog-page .catalog-modern-card .card-image { width:100%; max-height:185px; object-fit:contain; cursor:pointer; }
.catalog-page .catalog-modern-card .card-body { display:flex; flex-direction:column; gap:10px; padding:14px 16px 16px; }
.catalog-page .catalog-modern-card .card-title { margin:0; min-height:38px; font-size:15px; line-height:1.6; font-weight:700; text-align:right; }
.catalog-card-sku { color:#7b8aa5; font-size:11px; direction:rtl; }
.catalog-card-swatches { display:flex; align-items:center; gap:7px; min-height:25px; font-size:12px; color:#566b8a; }
.catalog-card-swatch { display:inline-block; width:19px; height:19px; padding:0; border:2px solid #fff; border-radius:50%; box-shadow:0 0 0 1px #cbd6e3; }
.catalog-card-swatch.selected { box-shadow:0 0 0 2px #0986c7; }
.catalog-card-swatch:disabled { opacity:.32; cursor:not-allowed; }
.catalog-card-options { display:flex; align-items:center; gap:5px; overflow-x:auto; padding:2px 0; font-size:11px; color:#566b8a; }
.catalog-card-options > span { flex:none; }
.catalog-card-chip { flex:none; min-height:26px; padding:3px 8px; border:1px solid #dce7f2; border-radius:7px; background:#fff; color:#17365c; font-size:10px; }
.catalog-card-chip.selected { border-color:#008f8c; background:#eaf8f6; color:#007a78; }
.catalog-card-chip:disabled { opacity:.4; text-decoration:line-through; cursor:not-allowed; }
.catalog-card-package { display:flex; align-items:center; justify-content:space-between; gap:8px; color:#5b6e8b; font-size:12px; }
.catalog-card-package-select { width:66%; min-width:0; padding:7px 10px; border:1px solid #dce7f2; border-radius:8px; background:#fff; color:#17365c; font-size:11px; }
.catalog-card-package-value { color:#17365c; font-size:11px; font-weight:600; }
.catalog-card-bottom { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px; margin-top:auto; min-height:32px; }
.catalog-card-price { color:#142f5a; font-size:14px; white-space:nowrap; }
.catalog-card-price-group { display:flex; flex-direction:column; align-items:flex-start; gap:3px; }
.catalog-card-unit-price { color:#72839d; font-size:10px; white-space:nowrap; }
.share-host { position:fixed; top:0; left:-10000px; width:720px; pointer-events:none; z-index:-1; }
.catalog-share-card { width:720px; padding:30px; border:1px solid #e2eaf3; border-radius:20px; background:#fff; color:#102c57; direction:rtl; font-family:Tahoma,Arial,sans-serif; box-sizing:border-box; }
.catalog-share-image-frame { display:flex; align-items:center; justify-content:center; width:100%; height:500px; padding:20px; border-radius:15px; background:#f8fbff; }
.catalog-share-image { display:block; width:100%; height:100%; object-fit:contain; object-position:center; }
.catalog-share-content { padding:24px 6px 4px; }
.catalog-share-brand { color:#008f8c; font-size:17px; font-weight:700; }
.catalog-share-title { margin:10px 0 12px; font-size:27px; line-height:1.55; }
.catalog-share-sku { color:#73839a; font-size:15px; }
.catalog-share-description { margin:18px 0; color:#526985; font-size:16px; line-height:1.85; white-space:pre-line; overflow-wrap:anywhere; }
.catalog-share-attribute { display:flex; align-items:flex-start; flex-wrap:wrap; gap:10px; margin:14px 0; font-size:15px; }
.catalog-share-attribute-title { flex:none; min-width:100px; padding-top:7px; }
.catalog-share-values { display:flex; flex-wrap:wrap; gap:8px; flex:1; }
.catalog-share-value { display:inline-flex; align-items:center; gap:7px; padding:7px 12px; border:1px solid #dfe8f1; border-radius:9px; background:#f9fbfd; color:#24415f; white-space:nowrap; }
.catalog-share-color { display:inline-block; width:18px; height:18px; border:1px solid #c3d0dd; border-radius:50%; }
.catalog-stock-status { padding:5px 8px; border-radius:8px; font-size:11px; white-space:nowrap; }
.catalog-stock-status.available { color:#08845e; background:#e7f8f0; }
.catalog-stock-status.low { color:#b96e14; background:#fff3e5; }
.catalog-stock-status.unavailable { color:#b93946; background:#fff0f1; }
.catalog-card-action,.catalog-action-btn { display:block; width:100%; border:0; border-radius:9px; padding:11px 12px; background:#008f8c; color:#fff; font-size:13px; font-weight:700; text-align:center; cursor:pointer; }
.catalog-card-action:hover,.catalog-action-btn:hover { background:#007a78; }
.catalog-card-action:disabled { background:#d9e0e9; color:#8897ac; cursor:not-allowed; }
.catalog-action-btn:disabled { background:#becbd5; cursor:not-allowed; }
.catalog-overlay { position:fixed; inset:0; z-index:135; background:rgba(13,34,66,.35); backdrop-filter:blur(2px); }
.catalog-overlay[hidden] { display:none; }
.catalog-side-panel { position:fixed; top:0; bottom:0; z-index:140; display:flex; flex-direction:column; width:min(440px,100vw); overflow:auto; background:#fff; box-shadow:0 18px 60px rgba(9,29,56,.2); }
.catalog-side-panel[hidden] { display:none; }
.catalog-detail-panel { right:0; border-radius:18px 0 0 18px; }
.catalog-cart-panel { left:0; border-radius:0 18px 18px 0; }
.catalog-panel-close { position:sticky; top:14px; z-index:2; align-self:flex-start; width:36px; height:36px; margin:14px 14px -50px 0; border:0; border-radius:10px; background:#f3f7fb; color:#27446a; font-size:26px; line-height:1; }
body.catalog-panel-open { overflow:hidden; }
#productDetailContent { padding:58px 20px 24px; }
.catalog-detail-gallery { display:flex; align-items:center; justify-content:center; height:250px; border-radius:14px; background:#f9fbfd; }
.catalog-detail-image { max-width:90%; max-height:225px; object-fit:contain; }
.catalog-detail-title { margin:15px 0 5px; font-size:21px; color:#112d56; }
.catalog-detail-description { margin:0 0 14px; color:#70819a; font-size:12px; line-height:1.8; }
.catalog-detail-choice { padding:14px 0; border-top:1px solid #edf1f6; }
.catalog-detail-choice h3 { margin:0 0 12px; font-size:14px; }
.catalog-detail-colors,.catalog-detail-options { display:flex; flex-wrap:wrap; gap:9px; }
.catalog-color-choice { min-width:48px; border:0; background:transparent; color:#5b6e88; font-size:11px; }
.catalog-color-circle { display:block; width:34px; height:34px; margin:0 auto 5px; border:3px solid #fff; border-radius:50%; box-shadow:0 0 0 1px #b7c6d6; }
.catalog-color-choice.selected .catalog-color-circle { box-shadow:0 0 0 3px #087fc1; }
.catalog-option-choice { padding:8px 12px; border:1px solid #dce5ee; border-radius:8px; background:#fff; color:#183961; }
.catalog-option-choice.selected { border-color:#008f8c; background:#eaf8f6; color:#007a78; }
.catalog-color-choice:disabled,.catalog-option-choice:disabled { opacity:.35; text-decoration:line-through; cursor:not-allowed; }
.catalog-package-select { width:100%; min-height:43px; padding:8px 12px; border:1px solid #dce5ee; border-radius:8px; background:#fff; color:#17365c; }
.catalog-detail-info { display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; margin:12px 0; }
.catalog-detail-sku,.catalog-detail-stock { padding:10px; border-radius:9px; background:#eef5ff; color:#214b7a; font-size:12px; }
.catalog-detail-stock { background:#e7f8f0; color:#08845e; }
.catalog-detail-stock.unavailable { background:#fff0f1; color:#b93946; }
.catalog-detail-footer { display:flex; align-items:center; flex-wrap:wrap; justify-content:space-between; gap:14px; border-top:1px solid #edf1f6; padding-top:16px; }
.catalog-detail-price { color:#102d58; font-size:17px; }
.catalog-detail-stepper,.catalog-cart-quantity { display:inline-flex; align-items:center; border:1px solid #dbe5f0; border-radius:9px; overflow:hidden; }
.catalog-detail-stepper button,.catalog-cart-quantity button { width:34px; height:34px; border:0; background:#f3f7fb; color:#15355f; font-size:19px; }
.catalog-detail-stepper span,.catalog-cart-quantity span { min-width:38px; text-align:center; }
.catalog-panel-head { min-height:72px; border-bottom:1px solid #edf1f6; }
.catalog-panel-head h2 { margin:24px 70px 0 20px; font-size:18px; }
.catalog-cart-items { flex:1; padding:14px 20px; overflow:auto; }
.catalog-cart-empty { color:#78889f; text-align:center; padding:40px 10px; }
.catalog-cart-item { display:flex; flex-direction:column; gap:8px; padding:16px 0; border-bottom:1px solid #edf1f6; }
.catalog-cart-item strong { font-size:13px; line-height:1.6; }.catalog-cart-item small { color:#7b8aa5; }
.catalog-cart-item.is-over-stock,#orderModalItems > .is-over-stock { border:1px solid #d94b4b; border-radius:10px; background:#fff1f1; color:#a1281c; padding:10px; }
.catalog-cart-quantity { align-self:flex-end; }.catalog-cart-line-price { align-self:flex-end; color:#17365c; }
.catalog-cart-quantity-input { width:58px; min-width:0; height:34px; padding:2px 4px; border:0; border-inline:1px solid #dbe5f0; border-radius:0; background:#fff; color:#15355f; font-size:14px; text-align:center; direction:ltr; }
.catalog-cart-quantity-input:focus { outline:2px solid #008f8c; outline-offset:-2px; }
.catalog-cart-remove { align-self:flex-start; padding:4px 0; border:0; background:transparent; color:#b93946; font-size:11px; text-decoration:underline; }
.catalog-cart-footer { padding:18px 20px 24px; border-top:1px solid #edf1f6; font-weight:700; }.catalog-cart-footer .catalog-action-btn { margin-top:14px; }
.catalog-page .order-summary { display:none; }
@media (max-width:760px) {
 .catalog-category-shortcuts { margin:10px auto; padding:0 12px; }
 .catalog-page .product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
 .catalog-page .catalog-modern-card { min-height:310px; }
 .catalog-page .catalog-modern-card .card-image-wrap { height:145px; padding:10px; }
 .catalog-page .catalog-modern-card .card-image { max-height:124px; }
 .catalog-page .catalog-modern-card .card-body { padding:9px; gap:6px; }
 .catalog-page .catalog-modern-card .card-title { min-height:33px; font-size:11px; }
 .catalog-card-sku,.catalog-card-package,.catalog-card-swatches { font-size:10px; }
 .catalog-card-package { flex-wrap:wrap; }.catalog-card-package-select { width:100%; padding:5px 7px; }
 .catalog-card-price { font-size:11px; }.catalog-stock-status { font-size:9px; padding:4px 5px; }
 .catalog-card-action { padding:9px 5px; font-size:10px; }
 .catalog-side-panel { inset:0; width:100vw; border-radius:0; }
 .catalog-detail-gallery { height:220px; }.catalog-detail-image { max-height:195px; }
 .catalog-page .search-bar-wrap { padding:0 12px; }.catalog-results-bar span { display:none; }
}
@media (max-width:520px) {
 .catalog-page .product-grid { grid-template-columns:1fr; }
 .catalog-page .catalog-modern-card { min-height:0; }
 .catalog-page .catalog-modern-card .card-image-wrap { height:205px; }
 .catalog-page .catalog-modern-card .card-image { max-height:182px; }
 .catalog-page .catalog-modern-card .card-body { padding:14px 16px 16px; gap:9px; }
 .catalog-page .catalog-modern-card .card-title { min-height:0; font-size:15px; }
 .catalog-card-sku,.catalog-card-package,.catalog-card-swatches { font-size:12px; }
 .catalog-card-price { font-size:14px; }.catalog-stock-status { font-size:11px; }
 .catalog-card-action { padding:11px; font-size:13px; }
}
html:has(body.catalog-page) { overflow-x:clip; }
body.catalog-page { overflow-x:clip; }
.catalog-page .topbar { position:sticky; top:0; z-index:120; }
.pwa-install-button[hidden],.pwa-install-hint[hidden] { display:none !important; }
.pwa-install-button { margin-top:12px; }
.pwa-install-hint { margin:8px 0 0; color:#526780; font-size:12px; line-height:1.7; }
@media (max-width:760px) {
 .catalog-breadcrumb { padding:0 12px; margin-top:8px; }
 .catalog-page .topbar-user { gap:5px; flex-wrap:nowrap; }
 .catalog-page .user-meta { max-width:98px; line-height:1.25; }
 .catalog-page .user-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; }
 .catalog-page .user-last-update { display:none; }
 .catalog-page .user-avatar { width:32px; height:32px; }
 .catalog-account-menu summary,.catalog-cart-trigger { width:34px; height:34px; border-radius:9px; font-size:17px; }
 .catalog-account-pdf { display:block; }
}