/* ==========================================================================
   Radin Printer — Pages
   ========================================================================== */

/* ---------------------------------------------------------------- Shop */
.shop-layout {
    display: grid;
    grid-template-columns: 272px minmax(0, 1fr);
    gap: 22px;
    align-items: start;
    padding-block: 24px 50px;
}
/* Sticky column — NO internal scrollbar by design: the filter stack is compact
   enough to fit inside the first screen, nothing is clipped and nothing removed. */
.sidebar {
    display: flex; flex-direction: column; gap: 10px;
    position: sticky; top: 86px;
    align-self: start;
}
/* cards must keep their natural height inside the flex column — with
   overflow:hidden they would squash to fit instead of overflowing */
.sidebar > * { flex-shrink: 0; }
.filter-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.filter-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 12px;
    font-size: 12.5px; font-weight: 800;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, #fbfdff, #f7fbff);
}
.filter-head button { border: 0; background: none; font-size: 11px; color: var(--blue-600); font-weight: 600; }
/* Mobile filter-sheet header (title + close). Desktop: hidden. */
.filter-sheet-head { display: none; }
.filter-body { padding: 9px 12px; }
.filter-group + .filter-group { border-top: 1px dashed var(--line); margin-top: 8px; padding-top: 8px; }
.filter-group h4 {
    font-size: 12px; margin-bottom: 5px; color: var(--ink-soft);
    display: flex; align-items: center; justify-content: space-between;
}
.filter-group h4 svg { width: 14px; height: 14px; color: var(--muted-2); }
/* Brand options in a 2-col grid: even long brand lists stay short — no inner
   scrolling anywhere in the filter column. */
.filter-list { display: grid; grid-template-columns: 1fr 1fr; gap: 1px 6px; }
.filter-opt {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; color: var(--ink-soft);
    padding: 2.5px 6px; border-radius: 7px; cursor: pointer;
    transition: .15s; min-width: 0;
}
/* =========================================
   استایل درخت دسته‌بندی با قابلیت کشویی
   ========================================= */

.cat-tree { 
    display: flex; 
    flex-direction: column; 
    gap: 3px; 
}

.cat-row-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 10px;
    transition: all 0.2s ease;
}

.cat-row-wrap:hover {
    background: var(--blue-25);
}

.cat-row-wrap.active {
    background: linear-gradient(135deg, var(--blue-500), var(--blue-700));
    color: #fff;
    box-shadow: 0 4px 12px -4px rgba(37, 99, 235, 0.5);
}

.cat-row {
    flex: 1;
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    gap: 8px;
    padding: 10px 12px; 
    font-size: 13px; 
    font-weight: 500;
    color: inherit;
}

/* دکمه کشویی (فلش) */
.cat-toggle {
    background: transparent;
    border: 0;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    cursor: pointer;
    transition: 0.2s;
    border-radius: 50%;
    margin-inline-end: 4px;
}

.cat-toggle:hover {
    background: rgba(37, 99, 235, 0.1);
    color: var(--blue-600);
}

.cat-row-wrap.active .cat-toggle {
    color: #fff;
}

/* چرخش فلش هنگام باز شدن */
.cat-toggle svg {
    transition: transform 0.3s ease;
}

.cat-toggle.open svg {
    transform: rotate(180deg);
}

/* زیرمنوها (پیش‌فرض مخفی) */
.cat-tree .sub { 
    display: none; 
    margin-top: 3px;
    margin-bottom: 6px;
    padding-inline-start: 12px; 
    border-inline-start: 2px solid var(--line); 
    margin-inline-start: 14px;
}

/* نمایش زیرمنو با انیمیشن */
.cat-tree .sub.open { 
    display: block; 
    animation: slideDown 0.25s ease;
}

.cat-tree .sub a { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    gap: 8px;
    padding: 8px 12px; 
    font-size: 12.5px; 
    border-radius: 8px;
    color: var(--muted); 
    transition: all 0.2s;
}

.cat-tree .sub a:hover { 
    color: var(--blue-600); 
    background: var(--blue-25);
}

.cat-tree .sub a.active { 
    background: var(--blue-600);
    color: #fff;
    font-weight: 700;
}

/* استایل دایره‌ی شمارنده */
.cat-tree .cnt { 
    font-size: 11px; 
    background: #f2f7fe; 
    padding: 3px 9px; 
    border-radius: 99px; 
    color: var(--muted-2); 
    font-weight: 600;
    transition: all 0.2s ease;
}

.cat-row-wrap.active .cnt { 
    background: rgba(255, 255, 255, 0.25); 
    color: #fff; 
}

/* حالت شب */
html[data-theme="dark"] .cat-tree .cnt {
    background: rgba(255, 255, 255, 0.08);
}
html[data-theme="dark"] .cat-tree .sub {
    border-inline-start-color: #223457;
}
html[data-theme="dark"] .cat-toggle:hover {
    background: rgba(255, 255, 255, 0.08);
}
.filter-opt:hover { background: var(--blue-25); }
.filter-opt input { accent-color: var(--blue-600); width: 14px; height: 14px; flex: 0 0 auto; }
.filter-opt > span:first-of-type { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* برندها: نام کامل برند باید دیده شود — برندهای طولانی مثل «Konica Minolta»
   به‌جای بریده‌شدن با «…» به خط بعد می‌شکنند. (فیلتر برند فروشگاه) */
#brandFilters .filter-opt > span:first-of-type {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    word-break: break-word;
    line-height: 1.7;
}
.filter-opt .cnt { margin-inline-start: auto; font-size: 10px; color: var(--muted-2); background: #f6f9fe; padding: 1px 5px; border-radius: 6px; flex: 0 0 auto; }
.filter-opt.checked { background: var(--blue-25); color: var(--blue-700); font-weight: 600; }
.price-range { display: flex; flex-direction: column; gap: 7px; }
.price-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.price-inputs label { font-size: 10px; color: var(--muted-2); display: block; margin-bottom: 3px; }
.price-inputs input {
    width: 100%; padding: 5px 8px; font-size: 11.5px;
    border: 1px solid var(--line-strong); border-radius: 7px; background: #fbfdff;
    direction: ltr; text-align: left;
}
/* Slider geometry: the input box (16px tall) and the track line share one
   center line, so the knobs sit exactly ON the line instead of floating above it. */
.range-slider { position: relative; height: 24px; }
.range-slider input[type=range] {
    position: absolute; inset-inline: 0; top: 4px; width: 100%; height: 16px; margin: 0;
    -webkit-appearance: none; appearance: none; background: none; pointer-events: none;
}
.range-slider input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none; pointer-events: auto; width: 16px; height: 16px;
    border-radius: 50%; background: #fff; border: 3px solid var(--blue-600);
    box-shadow: 0 2px 6px rgba(16, 42, 76, .25); cursor: pointer;
}
.range-slider input[type=range]::-moz-range-thumb {
    pointer-events: auto; width: 12px; height: 12px; border-radius: 50%;
    background: #fff; border: 3px solid var(--blue-600); cursor: pointer;
}
.range-slider .track { position: absolute; inset-inline: 0; top: 10px; height: 4px; background: var(--line); border-radius: 3px; }
.range-slider .fill { position: absolute; top: 10px; height: 4px; background: var(--blue-500); border-radius: 3px; }

/* Compact consult card at the bottom of the filter column */
.consult-card {
    background: linear-gradient(135deg, #0f2c52, #1d4ed8);
    border: 0; color: #fff; padding: 10px 12px;
}
.consult-card b { font-size: 12.5px; display: block; margin-bottom: 3px; }
.consult-card p { font-size: 11px; color: #c6d9f0; line-height: 1.65; margin: 0 0 7px; }
.consult-card .btn { background: #fff; color: #0f2c52; box-shadow: none; width: 100%; }

.shop-main { min-width: 0; }
.shop-toolbar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    background: #fff; border: 1px solid var(--line); border-radius: 14px;
    padding: 10px 14px; margin-bottom: 16px; flex-wrap: wrap;
}
.shop-count { font-size: 12.5px; color: var(--muted); }
.shop-count b { color: var(--ink); }
.toolbar-actions { display: flex; align-items: center; gap: 8px; }
.sort-select {
    border: 1px solid var(--line-strong); background: #fbfdff; border-radius: 9px;
    padding: 7px 30px 7px 10px; font-size: 12px; color: var(--ink-soft); cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%2361799a' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: left 9px center;
}
.view-toggle { display: flex; gap: 2px; background: #f4f8ff; border: 1px solid var(--line); border-radius: 9px; padding: 2px; }
.view-toggle button {
    width: 30px; height: 28px; border: 0; border-radius: 7px; background: none;
    display: inline-flex; align-items: center; justify-content: center; color: var(--muted);
}
.view-toggle button.active { background: #fff; color: var(--blue-600); box-shadow: var(--shadow-xs); }
.view-toggle svg { width: 16px; height: 16px; }
/* موبایل (فقط گوشی): کلید تغییر چیدمان شبکه‌ای/لیستی حذف می‌شود؛
   در تبلت و دسکتاپ مثل قبل نمایش داده می‌شود. */
@media (max-width: 720px) {
    .view-toggle { display: none; }
}
.mobile-filter-btn { display: none; }

.active-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: #fff; border: 1px solid var(--line-strong); border-radius: 999px;
    padding: 4px 10px; font-size: 11.5px; color: var(--ink-soft);
}
.chip button { border: 0; background: none; color: var(--muted-2); padding: 0; display: flex; }
.chip button:hover { color: var(--red); }
.chip svg { width: 13px; height: 13px; }

.pagination { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 30px; }
.pagination button, .pagination a {
    min-width: 38px; height: 38px; padding: 0 10px;
    border: 1px solid var(--line); background: #fff; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 600; color: var(--ink-soft); transition: .18s;
}
.pagination button:hover { border-color: var(--blue-300); color: var(--blue-600); }
.pagination .active { background: var(--blue-600); border-color: var(--blue-600); color: #fff; box-shadow: var(--shadow-blue); }
.pagination .dots { border: 0; background: none; color: var(--muted-2); }
.pagination svg { width: 16px; height: 16px; }

/* ---------------------------------------------------------------- Product page */
.product-page { padding-block: 24px 46px; }
.product-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 26px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    padding: 22px;
    box-shadow: var(--shadow-xs);
}
.gallery { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.gallery-main {
    position: relative;
    border-radius: 18px;
    background: linear-gradient(180deg, #fbfdff, #f2f8ff);
    border: 1px solid var(--line);
    aspect-ratio: 1 / .86;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    cursor: zoom-in;
}
.gallery-main img { width: 100%; height: 100%; object-fit: contain; padding: 24px; transition: transform .35s var(--ease); }
.gallery-main:hover img { transform: scale(1.08); }
.gallery-badges { position: absolute; top: 12px; inset-inline-start: 12px; display: flex; gap: 5px; flex-direction: column; z-index: 2; }
.gallery-thumbs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 3px; scrollbar-width: thin; }
.gallery-thumbs button {
    width: 70px; height: 70px; flex-shrink: 0; border-radius: 11px;
    border: 1px solid var(--line); background: #fff; padding: 4px;
    display: flex; align-items: center; justify-content: center; transition: .18s;
}
.gallery-thumbs button img { width: 100%; height: 100%; object-fit: contain; }
.gallery-thumbs button.active { border-color: var(--blue-500); box-shadow: 0 0 0 3px rgba(37, 99, 235, .1); }
.gallery-note { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted-2); }
.gallery-note svg { width: 14px; height: 14px; }

.product-info { min-width: 0; display: flex; flex-direction: column; }
.pi-topline { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.pi-brand { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--blue-600); font-weight: 700; }
.pi-brand .b-logo { background: #f2f7ff; border: 1px solid var(--line); border-radius: 6px; padding: 1px 7px; color: var(--ink-soft); }
.pi-sku { font-size: 11px; color: var(--muted-2); }
.product-info h1 { font-size: 22px; line-height: 1.7; color: var(--navy-800); margin-bottom: 8px; }
.pi-short { font-size: 12.5px; color: var(--muted); line-height: 1.9; }
.pi-short ul { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 4px 0 10px; }
.pi-short ul li { position: relative; padding-inline-start: 13px; font-size: 12px; }
.pi-short ul li::before {
    content: ''; position: absolute; inset-inline-start: 0; top: 11px;
    width: 5px; height: 5px; border-radius: 50%; background: var(--blue-300);
}
.pi-short p { margin: 0 0 4px; }

.pi-price-box {
    background: linear-gradient(135deg, #f7fbff, #eef6ff);
    border: 1px solid #dfeafa;
    border-radius: 16px;
    padding: 14px 16px;
    margin: 12px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.pi-price { display: flex; flex-direction: column; }
.pi-price .lbl { font-size: 11px; color: var(--muted); }
.pi-price .old { font-size: 12px; color: var(--muted-2); text-decoration: line-through; }
.pi-price .val { font-size: 25px; font-weight: 800; color: var(--navy-800); letter-spacing: -.5px; line-height: 1.4; }
.pi-price .val span { font-size: 12px; font-weight: 500; color: var(--muted); }
.pi-save { text-align: center; }
.pi-save .pct {
    display: inline-block; background: var(--red); color: #fff;
    font-size: 12px; font-weight: 800; border-radius: 8px; padding: 3px 9px;
}
.pi-save small { display: block; font-size: 10px; color: var(--muted); margin-top: 3px; }
.pi-stock { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--green); font-weight: 600; }
.pi-stock .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px rgba(18, 161, 92, .12); }
.pi-stock.out { color: var(--red); }
.pi-actions { display: flex; align-items: center; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.pi-actions .btn.lg { flex: 1; min-width: 170px; }
.pi-buy { background: linear-gradient(135deg, #0e2a52, #123566); box-shadow: 0 18px 34px -20px rgba(7, 22, 46, .8); }
.pi-meta { display: flex; align-items: center; gap: 16px; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); font-size: 11.5px; color: var(--muted); flex-wrap: wrap; }
.pi-meta .mi { display: inline-flex; align-items: center; gap: 6px; }
.pi-meta svg { width: 15px; height: 15px; color: var(--blue-400); }

.product-tabs { margin-top: 22px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-xl); padding: 20px 22px; }
.spec-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.spec-table tr:nth-child(odd) { background: #fafcff; }
.spec-table td { padding: 10px 12px; border: 1px solid #edf3fb; }
.spec-table td:first-child { width: 34%; color: var(--muted); font-weight: 600; }
.spec-table td:last-child { color: var(--ink); font-weight: 600; }
.desc-content { font-size: 13.5px; line-height: 2.1; color: var(--ink-soft); }
.desc-content h2, .desc-content h3, .desc-content h4 { font-size: 15px; margin: 18px 0 8px; color: var(--navy-800); }
.desc-content ul, .desc-content ol { padding-inline-start: 20px; margin: 8px 0 14px; list-style: disc; }
.desc-content li { margin-bottom: 4px; }
.desc-content strong { color: var(--ink); }
.desc-content table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 12.5px; }
.desc-content td, .desc-content th { border: 1px solid var(--line); padding: 8px 10px; }
.desc-content a { color: var(--blue-600); text-decoration: underline; }

.sticky-buy {
    display: none;
    position: fixed; bottom: 0; inset-inline: 0;
    background: #fff; border-top: 1px solid var(--line);
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    z-index: 70; gap: 10px; align-items: center;
    box-shadow: 0 -10px 30px -20px rgba(16, 42, 76, .4);
}
.sticky-buy .sb-price { flex: 1; }
.sticky-buy .sb-price b { display: block; font-size: 15px; color: var(--navy-800); }
.sticky-buy .sb-price small { font-size: 10px; color: var(--muted); }

/* ---------------------------------------------------------------- Cart page */
.cart-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, .9fr); gap: 22px; align-items: start; padding-block: 24px 50px; }
.cart-panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-xl); padding: 18px; }
.cart-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.cart-panel-head b { font-size: 15px; }
.cart-panel-head span { font-size: 12px; color: var(--muted); }
.cart-table { display: flex; flex-direction: column; }
.cart-row {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr) 130px 110px 40px;
    gap: 12px;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
}
.cart-row:last-child { border-bottom: 0; }
.cart-row .cr-img { width: 92px; height: 82px; border: 1px solid var(--line); border-radius: 12px; background: #fbfdff; padding: 5px; display: flex; align-items: center; justify-content: center; }
.cart-row .cr-img img { max-height: 100%; object-fit: contain; }
.cart-row .cr-name { font-size: 13px; font-weight: 700; line-height: 1.8; }
.cart-row .cr-name:hover { color: var(--blue-600); }
.cart-row .cr-meta { font-size: 11px; color: var(--muted-2); margin-top: 2px; }
.cart-row .cr-price { font-size: 13px; font-weight: 800; color: var(--navy-800); text-align: center; }
.cart-row .cr-price small { display: block; font-size: 10px; color: var(--muted-2); font-weight: 500; }
.cart-row .cr-total { font-size: 13.5px; font-weight: 800; color: var(--navy-800); text-align: center; }
.cart-row .cr-del { border: 0; background: #fff5f7; color: var(--red); width: 34px; height: 34px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; }
.cart-row .cr-del:hover { background: #ffe4e9; }
.cart-row .cr-del svg { width: 16px; height: 16px; }

.summary-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-xl); padding: 18px; position: sticky; top: 150px; }
.summary-card h3 { font-size: 15px; margin-bottom: 14px; display: flex; align-items: center; gap: 7px; }
.summary-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12.5px; padding: 7px 0; color: var(--ink-soft); }
.summary-row .val { font-weight: 700; color: var(--ink); }
.summary-row.discount .val { color: var(--green); }
.summary-row.total { border-top: 1px dashed var(--line-strong); margin-top: 8px; padding-top: 12px; font-size: 14px; }
.summary-row.total .val { font-size: 19px; font-weight: 800; color: var(--navy-800); }
.coupon-box { display: flex; gap: 6px; margin: 12px 0; }
.coupon-box input {
    flex: 1; min-width: 0; border: 1px solid var(--line-strong); border-radius: 9px;
    padding: 8px 10px; font-size: 12px; background: #fbfdff; text-transform: uppercase;
}
.coupon-box button { border: 0; background: var(--navy-800); color: #fff; border-radius: 9px; padding: 0 13px; font-size: 12px; font-weight: 700; }
.coupon-hint { font-size: 11px; color: var(--muted-2); margin-top: -6px; margin-bottom: 8px; }
.coupon-applied { display: flex; align-items: center; justify-content: space-between; background: var(--green-50); border: 1px dashed #a7e3c4; border-radius: 9px; padding: 7px 10px; font-size: 11.5px; color: #0f7a46; margin: 10px 0; }
.coupon-applied button { border: 0; background: none; color: #0f7a46; }
.free-shipping-bar { margin: 10px 0 4px; }
.free-shipping-bar .bar { height: 6px; border-radius: 4px; background: #eaf1fa; overflow: hidden; }
.free-shipping-bar .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--sky-400), var(--blue-600)); border-radius: 4px; }
.free-shipping-bar p { font-size: 10.5px; color: var(--muted); margin: 6px 0 0; }

/* Upsell */
.upsell {
    margin-top: 18px;
    background: linear-gradient(135deg, #f7fbff, #eef6ff);
    border: 1px dashed #bcd6f5;
    border-radius: var(--radius-lg);
    padding: 14px;
}
.upsell-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.upsell-head .ic { width: 30px; height: 30px; border-radius: 9px; background: #fff; color: var(--blue-600); display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); }
.upsell-head b { font-size: 12.5px; }
.upsell-head small { display: block; font-size: 10.5px; color: var(--muted); font-weight: 500; }
.upsell-list { display: flex; flex-direction: column; gap: 7px; }
.upsell-item {
    display: flex; align-items: center; gap: 9px;
    background: #fff; border: 1px solid var(--line); border-radius: 11px; padding: 7px 9px;
}
.upsell-item img { width: 40px; height: 40px; object-fit: contain; border-radius: 7px; background: #f8fbff; border: 1px solid var(--line); padding: 2px; }
.upsell-item .u-name { flex: 1; font-size: 11.5px; font-weight: 600; line-height: 1.6; }
.upsell-item .u-price { font-size: 11.5px; font-weight: 800; color: var(--navy-800); white-space: nowrap; }
.upsell-item .u-add {
    width: 30px; height: 30px; border-radius: 8px; border: 1px solid #d5e5f8;
    background: var(--blue-50); color: var(--blue-600);
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.upsell-item .u-add:hover { background: var(--blue-600); color: #fff; }
.upsell-item .u-add svg { width: 15px; height: 15px; }

/* ---------------------------------------------------------------- Checkout */
.checkout-page { padding-block: 24px 60px; }
.steps {
    display: flex; align-items: center; justify-content: center; gap: 0;
    margin-bottom: 24px;
}
.step { display: flex; align-items: center; gap: 8px; color: var(--muted-2); font-size: 12px; font-weight: 600; }
.step .n {
    width: 30px; height: 30px; border-radius: 50%;
    background: #fff; border: 1px solid var(--line-strong);
    display: inline-flex; align-items: center; justify-content: center; font-size: 12px;
}
.step.active { color: var(--blue-600); }
.step.active .n { background: var(--blue-600); border-color: var(--blue-600); color: #fff; box-shadow: 0 6px 14px -6px rgba(37, 99, 235, .6); }
.step.done { color: var(--green); }
.step.done .n { background: var(--green-50); border-color: #a7e3c4; color: var(--green); }
.step-line { width: 70px; height: 1px; background: var(--line-strong); margin-inline: 10px; }
.checkout-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .85fr); gap: 22px; align-items: start; }
.checkout-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-xl); padding: 20px 22px; margin-bottom: 14px; }
.checkout-card h3 { font-size: 15px; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.checkout-card h3 .n { width: 26px; height: 26px; border-radius: 8px; background: var(--blue-50); color: var(--blue-600); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-grid .full { grid-column: 1 / -1; }
.pay-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pay-option {
    border: 1px solid var(--line-strong); border-radius: 12px; padding: 12px;
    display: flex; align-items: flex-start; gap: 9px; cursor: pointer; transition: .18s; background: #fbfdff;
}
.pay-option:hover { border-color: var(--blue-300); }
.pay-option input { margin-top: 4px; accent-color: var(--blue-600); }
.pay-option b { font-size: 12.5px; display: block; }
.pay-option small { font-size: 10.5px; color: var(--muted); display: block; margin-top: 2px; line-height: 1.7; }
.pay-option.selected { border-color: var(--blue-500); background: var(--blue-25); box-shadow: 0 0 0 3px rgba(37, 99, 235, .08); }
.review-list { display: flex; flex-direction: column; gap: 8px; }
.review-line { display: flex; align-items: center; gap: 10px; font-size: 12px; padding: 8px 0; border-bottom: 1px dashed var(--line); }
.review-line img { width: 44px; height: 44px; object-fit: contain; border: 1px solid var(--line); border-radius: 8px; padding: 2px; }
.review-line .rn { flex: 1; font-weight: 600; }
.review-line .rq { color: var(--muted); }
.review-line .rp { font-weight: 800; }

/* ---------------------------------------------------------------- Payment page (bank-like) */
.pay-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 30px 16px; background: radial-gradient(700px 400px at 50% 0%, #e8f2ff, transparent 70%), var(--bg); }
.pay-shell { width: min(470px, 100%); }
.pay-brand { text-align: center; margin-bottom: 16px; }
.pay-brand img { height: 44px; margin-inline: auto; }
.pay-bank-card { background: #fff; border-radius: 20px; box-shadow: var(--shadow-lg); overflow: hidden; border: 1px solid var(--line); }
.pay-bank-head { background: linear-gradient(135deg, #0d2f5c, #1a4fa8); color: #fff; padding: 18px 22px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pay-bank-head b { font-size: 15px; }
.pay-bank-head small { display: block; font-size: 10.5px; color: #b9d1ee; }
.pay-bank-head .lock { background: rgba(255, 255, 255, .12); border-radius: 9px; padding: 6px 10px; font-size: 10.5px; display: inline-flex; align-items: center; gap: 5px; }
.pay-bank-body { padding: 22px; }
.pay-amount { text-align: center; padding: 16px; background: #f7fbff; border: 1px dashed #cfe0f6; border-radius: 14px; margin-bottom: 18px; }
.pay-amount small { font-size: 11px; color: var(--muted); }
.pay-amount b { display: block; font-size: 26px; color: var(--navy-800); letter-spacing: -.5px; }
.pay-amount span { font-size: 12px; color: var(--muted); }
.pay-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.pay-rows div { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); }
.pay-rows div b { color: var(--ink); }
.pay-note { font-size: 10.5px; color: var(--muted-2); text-align: center; margin-top: 14px; line-height: 1.9; }
.pay-secure { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 14px; font-size: 10.5px; color: var(--muted); }
.pay-secure svg { width: 13px; height: 13px; color: var(--green); }

/* Result page */
.result-page { min-height: 66vh; display: flex; align-items: center; justify-content: center; padding: 40px 16px; }
.result-card { background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: 34px 28px; text-align: center; width: min(560px, 100%); box-shadow: var(--shadow); }
.result-ico { width: 76px; height: 76px; border-radius: 50%; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; }
.result-ico.ok { background: var(--green-50); color: var(--green); }
.result-ico.bad { background: var(--red-50); color: var(--red); }
.result-ico svg { width: 38px; height: 38px; }
.result-card h1 { font-size: 22px; margin-bottom: 6px; }
.result-card p { font-size: 13px; color: var(--muted); }
.result-info { background: #f8fbff; border: 1px dashed #cfe0f6; border-radius: 14px; padding: 12px 16px; margin: 18px 0; text-align: right; }
.result-info div { display: flex; justify-content: space-between; font-size: 12.5px; padding: 5px 0; }
.result-info span { color: var(--muted); }
.result-info b { color: var(--ink); }
.result-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ---------------------------------------------------------------- Invoice */
.invoice-page { padding-block: 26px 60px; }
.invoice-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.invoice-sheet {
    background: #fff; border: 1px solid var(--line); border-radius: 18px;
    padding: 34px; max-width: 900px; margin-inline: auto;
    box-shadow: var(--shadow-xs);
}
.inv-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding-bottom: 20px; border-bottom: 2px solid var(--navy-800); flex-wrap: wrap; }
.inv-head .brand img { height: 52px; }
.inv-head .brand p { font-size: 11px; color: var(--muted); line-height: 1.9; margin: 6px 0 0; max-width: 330px; }
.inv-title { text-align: left; }
.inv-title h1 { font-size: 21px; color: var(--navy-800); margin-bottom: 4px; }
.inv-title .code { font-size: 12px; color: var(--blue-600); font-weight: 700; direction: ltr; }
.inv-title .date { font-size: 11px; color: var(--muted); margin-top: 3px; }
.inv-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 18px 0; }
.inv-box { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.inv-box h4 { font-size: 11.5px; color: var(--blue-600); margin-bottom: 8px; }
.inv-box div { font-size: 11.5px; color: var(--ink-soft); line-height: 2; }
.inv-box div b { color: var(--ink); font-weight: 600; }
.inv-table { width: 100%; border-collapse: collapse; font-size: 11.5px; margin-top: 6px; }
.inv-table th { background: #f4f8ff; color: var(--ink-soft); font-weight: 700; padding: 9px 8px; border: 1px solid #e2ecf9; text-align: right; font-size: 11px; }
.inv-table td { padding: 9px 8px; border: 1px solid #e9f1fb; color: var(--ink-soft); }
.inv-table td.num { text-align: center; font-variant-numeric: tabular-nums; }
.inv-table tbody tr:nth-child(even) { background: #fbfdff; }
.inv-totals { display: flex; justify-content: flex-end; margin-top: 14px; }
.inv-totals table { width: 290px; font-size: 12px; border-collapse: collapse; }
.inv-totals td { padding: 7px 10px; }
.inv-totals tr td:first-child { color: var(--muted); }
.inv-totals tr td:last-child { text-align: left; font-weight: 700; }
.inv-totals tr.grand td { border-top: 1.5px solid var(--navy-800); font-size: 14px; color: var(--navy-800); font-weight: 800; padding-top: 9px; }
.inv-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-top: 26px; padding-top: 16px; border-top: 1px dashed var(--line-strong); }
.inv-note { font-size: 10.5px; color: var(--muted); line-height: 2; max-width: 520px; }
.inv-sign { text-align: center; font-size: 10.5px; color: var(--muted); }
.inv-sign .stamp {
    width: 110px; height: 66px; border: 1px dashed #c3d5ea; border-radius: 8px;
    display: flex; align-items: center; justify-content: center; font-size: 10px; color: #a9bdd6; margin-bottom: 5px;
}
.inv-pay-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; padding: 3px 9px; border-radius: 999px; background: var(--green-50); color: var(--green); font-weight: 700; }
.inv-pay-badge.unpaid { background: var(--red-50); color: var(--red); }

/* ---------------------------------------------------------------- Auth / account */
.auth-wrap { padding-block: 40px 60px; display: flex; justify-content: center; }
.auth-card { width: min(440px, 100%); background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 26px; box-shadow: var(--shadow); }
.auth-card h1 { font-size: 21px; text-align: center; margin-bottom: 4px; }
.auth-card > p { text-align: center; font-size: 12.5px; color: var(--muted); margin-bottom: 18px; }
.auth-tabs { display: flex; background: #f3f8ff; border-radius: 11px; padding: 3px; margin-bottom: 18px; }
.auth-tabs a { flex: 1; text-align: center; font-size: 12.5px; font-weight: 700; padding: 8px; border-radius: 9px; color: var(--muted); }
.auth-tabs a.active { background: #fff; color: var(--blue-600); box-shadow: var(--shadow-xs); }
.auth-alt { text-align: center; font-size: 12px; color: var(--muted); margin-top: 16px; }
.auth-alt a { color: var(--blue-600); font-weight: 700; }

.account-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 20px; padding-block: 24px 50px; align-items: start; }
.account-side { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; position: sticky; top: 150px; }
.account-user { padding: 16px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; background: linear-gradient(135deg, #f7fbff, #eef6ff); }
.account-avatar { width: 42px; height: 42px; border-radius: 12px; background: var(--blue-600); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px; }
.account-user b { display: block; font-size: 13px; }
.account-user small { font-size: 11px; color: var(--muted); direction: ltr; }
.account-menu { padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.account-menu a, .account-menu button {
    display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-radius: 9px;
    font-size: 12.5px; font-weight: 600; color: var(--ink-soft); background: none; border: 0; text-align: right;
}
.account-menu a:hover, .account-menu button:hover { background: var(--blue-25); color: var(--blue-600); }
.account-menu a.active { background: var(--blue-50); color: var(--blue-700); }
.account-menu svg { width: 16px; height: 16px; }
.account-content { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.account-panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-xl); padding: 18px 20px; }
.account-panel h2 { font-size: 16px; margin-bottom: 12px; }
.order-card { border: 1px solid var(--line); border-radius: 14px; margin-bottom: 12px; overflow: hidden; }
.order-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; background: #f8fbff; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.order-code { font-size: 12.5px; font-weight: 800; direction: ltr; }
.order-date { font-size: 11px; color: var(--muted); }
.order-card-body { padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.order-thumbs { display: flex; gap: 5px; }
.order-thumbs img { width: 46px; height: 46px; object-fit: contain; border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 2px; }
.order-total { text-align: left; }
.order-total small { display: block; font-size: 10px; color: var(--muted); }
.order-total b { font-size: 14px; color: var(--navy-800); }
.status-pill { font-size: 10.5px; padding: 3px 9px; border-radius: 999px; font-weight: 700; }
.status-pill.pending { background: #fffbeb; color: #b45309; }
.status-pill.processing { background: var(--blue-50); color: var(--blue-600); }
.status-pill.shipped { background: #eef2ff; color: #4338ca; }
.status-pill.delivered { background: var(--green-50); color: var(--green); }
.status-pill.canceled { background: #f1f5f9; color: #64748b; }

/* ---------------------------------------------------------------- Static pages / blog / drivers / contact */
.content-page { padding-block: 28px 50px; }
.content-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-xl); padding: 26px 30px; }
.content-card h2 { font-size: 18px; margin: 22px 0 8px; }
.content-card h2:first-child { margin-top: 0; }
.content-card h3 { font-size: 15px; margin: 18px 0 6px; }
.content-card p, .content-card li { font-size: 13.5px; color: var(--ink-soft); line-height: 2.1; }
.content-card ul { padding-inline-start: 20px; list-style: disc; margin-bottom: 14px; }
.content-card b { color: var(--ink); }
.about-hero {
    background: linear-gradient(135deg, #0e2b52, #1a4fa8);
    color: #fff; border-radius: var(--radius-xl); padding: 34px;
    position: relative; overflow: hidden; margin-bottom: 20px;
}
.about-hero::after { content: ''; position: absolute; width: 320px; height: 320px; border-radius: 50%; background: rgba(56, 189, 248, .25); filter: blur(50px); top: -120px; left: -70px; }
.about-hero h1 { color: #fff; font-size: 27px; margin-bottom: 8px; position: relative; }
.about-hero p { color: #c9dcf3; font-size: 13.5px; max-width: 640px; position: relative; margin: 0; }
.about-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 20px; }
.about-stat { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 16px; text-align: center; }
.about-stat b { display: block; font-size: 24px; color: var(--blue-600); font-weight: 800; }
.about-stat span { font-size: 11.5px; color: var(--muted); }

.drivers-hero { display: flex; align-items: center; gap: 24px; background: linear-gradient(120deg, #f3f9ff, #eaf3ff); border: 1px solid #dbe9fb; border-radius: var(--radius-xl); padding: 26px; margin-bottom: 20px; }
.drivers-hero img { width: 120px; flex-shrink: 0; }
.drivers-hero h1 { font-size: 23px; margin-bottom: 6px; }
.drivers-hero p { font-size: 13px; color: var(--muted); margin: 0; }
.driver-tools { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.driver-tools .input { flex: 1; min-width: 200px; }
.driver-brand-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.driver-brand-tabs button {
    border: 1px solid var(--line-strong); background: #fff; border-radius: 999px;
    padding: 6px 14px; font-size: 12px; font-weight: 600; color: var(--ink-soft);
}
.driver-brand-tabs button.active { background: var(--blue-600); border-color: var(--blue-600); color: #fff; }
.driver-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.driver-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px; display: flex; align-items: center; gap: 12px; transition: .2s; }
.driver-card:hover { border-color: #c9dcf5; box-shadow: var(--shadow-sm); }
.driver-logo { width: 46px; height: 46px; border-radius: 11px; background: #f5f9ff; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-weight: 800; color: var(--blue-600); font-size: 13px; }
.driver-main { flex: 1; min-width: 0; }
.driver-main b { display: block; font-size: 12.5px; line-height: 1.7; }
.driver-main small { font-size: 10.5px; color: var(--muted); display: block; }
.driver-main .tags { display: flex; gap: 5px; margin-top: 4px; flex-wrap: wrap; }
.driver-main .tags span { font-size: 9.5px; background: #f4f8ff; color: #5b7ba6; border-radius: 5px; padding: 1px 6px; }
.driver-dl { flex-shrink: 0; }

.contact-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 18px; align-items: start; }
.contact-info { display: flex; flex-direction: column; gap: 10px; }
.contact-item { display: flex; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
.contact-item .ic { width: 40px; height: 40px; border-radius: 11px; background: var(--blue-50); color: var(--blue-600); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.contact-item b { display: block; font-size: 12.5px; }
.contact-item span, .contact-item a { font-size: 12px; color: var(--muted); line-height: 1.9; display: block; }
.contact-form { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-xl); padding: 20px; }
.contact-form h3 { font-size: 16px; margin-bottom: 12px; }
.map-box { margin-top: 18px; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); }
.map-box iframe { width: 100%; height: 280px; border: 0; display: block; }

.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.article-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-xl); padding: 24px 28px; }
.article-card h1 { font-size: 23px; margin-bottom: 8px; }
.article-meta { display: flex; gap: 14px; font-size: 11.5px; color: var(--muted); margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.article-body { font-size: 13.5px; line-height: 2.2; color: var(--ink-soft); }
.article-body h2 { font-size: 17px; margin: 20px 0 8px; }
.article-body h3 { font-size: 15px; margin: 16px 0 6px; }
.article-body p { margin-bottom: 12px; }
.article-body ul, .article-body ol { padding-inline-start: 22px; margin-bottom: 14px; list-style: disc; }
.article-body img { border-radius: 12px; margin: 12px 0; }

/* ---------------------------------------------------------------- Admin note / misc */
.info-banner {
    display: flex; align-items: flex-start; gap: 10px;
    background: var(--blue-25); border: 1px solid #dceafd; border-radius: 13px;
    padding: 12px 14px; font-size: 12px; color: #3c5f8f; line-height: 1.9;
}
.info-banner svg { width: 17px; height: 17px; color: var(--blue-500); flex-shrink: 0; margin-top: 2px; }
.page-loading { padding: 80px 0; display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; }
.page-loading .spinner { width: 30px; height: 30px; border-width: 3px; }

/* ---------------------------------------------------------------- Responsive */
@media (max-width: 1180px) {
    .hero-grid { grid-template-columns: minmax(0, 1.72fr) minmax(0, 1fr); }
    .slide-inner { padding: 28px 32px 44px; }
    .slide h1, .slide h2 { font-size: 27px; }
    .hero-stats .stat { padding-inline: 16px; }
    .hero-stats b { font-size: 19px; }
    .pedestal { width: min(290px, 96%); }
    .cat-grid { grid-template-columns: repeat(4, 1fr); }
    .footer-top { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 24px; }
    .mega-in { grid-template-columns: 1fr 1fr 1fr; }
    .mega-promo { display: none; }
    .header-search { max-width: none; }
}

@media (max-width: 1024px) {
    .topbar .tb-links { display: none; }
    .header-actions .account-link .a-txt { display: none; }
    .grid-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sk-grid { grid-template-columns: repeat(3, 1fr); }
    .shop-layout { grid-template-columns: 240px minmax(0, 1fr); gap: 16px; }
    .product-top { grid-template-columns: 1fr 1fr; gap: 18px; }
    .cart-layout, .checkout-layout { grid-template-columns: minmax(0, 1.3fr) minmax(0, .9fr); }
    .footer-top { grid-template-columns: 1fr 1fr; }
    .about-stats { grid-template-columns: repeat(2, 1fr); }
    .contact-grid { grid-template-columns: 1fr; }
    .blog-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
    .nav-links { display: none; }
    .mobile-toggle { display: inline-flex; }
    .hero-grid { grid-template-columns: 1fr; }
    .hero-side { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
    .hero-main { min-height: 400px; }
    .slides { min-height: 400px; }
    .slide-inner { padding: 26px 26px 44px; gap: 8px; }
    .slide h1, .slide h2 { font-size: 23px; }
    .slide p { font-size: 12px; }
    .pedestal { width: min(250px, 100%); }
    .features { grid-template-columns: 1fr 1fr; }
    .cat-grid { grid-template-columns: repeat(3, 1fr); }
    .shop-layout { grid-template-columns: 1fr; }
    .sidebar {
        position: fixed; top: 0; right: 0; bottom: 0; width: min(330px, 90vw);
        /* Explicit height — see .drawer note in base.css: without it the sheet
           can grow to its content height and its bottom becomes unreachable. */
        height: 100vh;
        height: 100dvh;
        background: #fff; z-index: 120; padding: 14px; overflow: auto;
        transform: translateX(100%);
        visibility: hidden; will-change: transform; /* closed sheet = never painted */
        transition: transform .3s var(--ease), visibility 0s linear .3s;
        box-shadow: var(--shadow-lg); display: flex; flex-direction: column;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
    .sidebar.open {
        transform: translateX(0);
        visibility: visible;
        transition: transform .3s var(--ease), visibility 0s;
    }
    .filter-sheet-head {
        display: flex; align-items: center; justify-content: space-between; gap: 10px;
        position: sticky; top: -14px; z-index: 2;
        margin: -14px -14px 12px; padding: 12px 14px;
        background: #fff; border-bottom: 1px solid var(--line);
    }
    .filter-sheet-head b { font-size: 13.5px; display: inline-flex; align-items: center; gap: 7px; }
    .filter-sheet-head b svg { width: 15px; height: 15px; color: var(--blue-500); }
    .filter-sheet-head .sheet-close {
        width: 34px; height: 34px; border-radius: 10px; flex: 0 0 auto;
        border: 1px solid var(--line-strong); background: #f4f8ff; color: var(--ink-soft);
        display: inline-flex; align-items: center; justify-content: center;
        cursor: pointer; transition: .18s;
    }
    .filter-sheet-head .sheet-close svg { width: 16px; height: 16px; }
    .filter-sheet-head .sheet-close:hover { background: var(--blue-600); border-color: var(--blue-600); color: #fff; }
    .mobile-filter-btn { display: inline-flex; }
    .shop-toolbar { position: sticky; top: 74px; z-index: 20; }
    .product-top { grid-template-columns: 1fr; }
    .gallery-main { aspect-ratio: 1 / .8; }
    .cart-layout, .checkout-layout { grid-template-columns: 1fr; }
    .summary-card { position: static; }
    .account-layout { grid-template-columns: 1fr; }
    .account-side { position: static; }
    .account-menu { flex-direction: row; overflow-x: auto; }
    .account-menu a, .account-menu button { white-space: nowrap; }
    .driver-grid { grid-template-columns: 1fr; }
    .sticky-buy { display: flex; }
    .site-footer { margin-bottom: 58px; }
    .mobile-bottom { display: block; }
    .page-title { font-size: 20px; }
    .section-title { font-size: 17px; }
    .promo-body { max-width: 100%; padding: 26px 24px; }
    .promo-img { display: none; }
    .inv-parties { grid-template-columns: 1fr; }
    .invoice-sheet { padding: 20px 16px; }
    .inv-table { font-size: 10px; }
    .inv-table th, .inv-table td { padding: 6px 5px; }
    .brands { grid-template-columns: repeat(3, 1fr); }
    .brand-item:nth-child(3) { border-inline-end: 0; }
}

@media (max-width: 720px) {
        .theme-btn .tb-ico { width: 34px; height: 34px; border-radius: 10px; }
    .theme-btn .tb-ico svg { width: 17px; height: 17px; }
    body { font-size: 14px; }
    .container { padding-inline: 14px; }
    .topbar-in { justify-content: center; }
    .topbar .topbar-side:last-child { display: none; }
    .topbar-side { gap: 14px; font-size: 11px; }
    .header-in { gap: 10px; min-height: 64px; padding-block: 8px; }
    .logo img { height: 38px; }
    .header-search { display: none; }
    .header-actions { margin-inline-start: auto; gap: 2px; }
    .cart-btn { padding: 7px 9px; font-size: 11px; gap: 5px; }
    .cart-btn .c-count { font-size: 10.5px; margin-inline-start: 0; min-width: 20px; padding: 1px 5px; }
    .cart-btn svg { width: 17px; height: 17px; }
    .wish-btn .wb-ico { width: 34px; height: 34px; border-radius: 10px; }
    .wish-btn .wb-ico svg { width: 17px; height: 17px; }
    .header-actions .account-link { display: none; }
    .hero { padding-block: 12px 4px; }
    .hero-main { border-radius: 18px; }
    .slides { min-height: 540px; }
    .hero-main { min-height: 540px; }
    .slide-inner { grid-template-columns: 1fr; padding: 20px 18px 44px; gap: 4px; }
    .slide h1, .slide h2 { font-size: 20px; }
    .slide p { font-size: 11.5px; line-height: 1.9; }
    .slide-cta .btn { padding: 9px 14px; font-size: 12px; }
    .hero-stats { margin-top: 2px; }
    .hero-stats b { font-size: 16px; }
    .hero-stats .stat { padding-inline: 13px; }
    .hero-stats span { font-size: 9.5px; }
    .slide-visual { min-height: 200px; }
    .pedestal { width: 192px; }
    .pedestal::before { inset: -20px; }
    .pedestal::after { inset: -8px; border-width: 1.2px; }
    .pedestal-disc { box-shadow: 0 22px 40px -22px rgba(16, 42, 76, .4), 0 0 0 6px rgba(255, 255, 255, .5); }
    .float-badge, .float-chip { padding: 6px 9px; border-radius: 11px; gap: 6px; }
    .float-badge svg, .float-chip svg { width: 16px; height: 16px; }
    .float-badge b, .float-chip b { font-size: 10px; }
    .float-badge small, .float-chip small { font-size: 8.5px; }
    .float-badge { top: 3%; inset-inline-start: 0; }
    .float-chip { bottom: 3%; inset-inline-end: 0; }
    .slider-dots { bottom: 12px; }
    .slider-arrows { display: none; }
    .hero-side { gap: 10px; }
    .hero-tile { min-height: 112px; border-radius: 14px; }
    .hero-tile-body { padding: 12px 14px; max-width: 80%; }
    .hero-tile-body b { font-size: 13px; }
    .hero-tile-body small { font-size: 10px; }
    .hero-tile-body span { font-size: 10px; padding: 3px 8px; margin-top: 6px; }
    .countdown-card { padding: 14px; border-radius: 16px; }
    .cd-title { font-size: 13px; }
    .cd-cell { min-width: 42px; padding: 5px 2px; }
    .cd-cell b { font-size: 16px; }
    .cd-cell span { font-size: 8px; }
    .features { grid-template-columns: 1fr 1fr; gap: 1px; }
    .feature { padding: 11px 10px; gap: 8px; }
    .feature .f-ico { width: 36px; height: 36px; border-radius: 10px; }
    .feature .f-ico svg { width: 18px; height: 18px; }
    .feature b { font-size: 11px; }
    .feature small { display: none; }
    .section { padding-block: 24px 4px; }
    .section-head { margin-bottom: 14px; }
    .section-title { font-size: 15.5px; gap: 8px; }
    .section-title::before { height: 19px; width: 3px; }
    .section-title small { display: none; }
    .section-link { font-size: 11px; }
    .cat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .cat-card { padding: 10px; border-radius: 14px; }
    .cat-card .c-img { height: 68px; }
    .cat-card .c-img img { max-height: 56px; }
    .cat-card b { font-size: 11.5px; }
    .grid-4, .grid-3, .grid-2, .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid-4 { gap: 10px; }
    .sk-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .product-card { padding: 8px; border-radius: 14px; }
    .pc-media { border-radius: 11px; margin-bottom: 8px; aspect-ratio: 1 / 1; }
    .pc-media img { padding: 7px; }
    .pc-title { font-size: 11.5px; min-height: 40px; line-height: 1.8; }
    .pc-brand { font-size: 9.5px; }
    .pc-price .val { font-size: 13.5px; }
    .pc-price .old { font-size: 10px; }
    .pc-add { width: 32px; height: 32px; border-radius: 9px; }
    .pc-add svg { width: 15px; height: 15px; }
    .pc-badge { font-size: 9px; padding: 1px 5px; }
    .pc-fav { width: 26px; height: 26px; }
    .pc-fav svg { width: 13px; height: 13px; }
    .brands { grid-template-columns: repeat(2, 1fr); }
    .brand-item { min-height: 66px; padding: 12px 8px; }
    .brand-item:nth-child(3) { border-inline-end: 1px solid var(--line); }
    .brand-item:nth-child(even) { border-inline-end: 0; }
    .promo { min-height: 0; margin-block: 22px 4px; }
    .promo-body { padding: 22px 18px; }
    .promo-body h3 { font-size: 18px; }
    .promo-body p { font-size: 12px; }
    .footer-top { grid-template-columns: 1fr; gap: 22px; padding-block: 30px 20px; }
    .footer-brand { text-align: center; }
    .footer-brand img { margin-inline: auto; }
    .footer-socials { justify-content: center; }
    .footer-pay { justify-content: center; text-align: center; }
    .footer-links { flex-direction: row; flex-wrap: wrap; gap: 8px 16px; }
    .footer-col h5 { justify-content: center; }
    .footer-contact .fc-item { justify-content: center; text-align: center; }
    .pagination button, .pagination a { min-width: 34px; height: 34px; font-size: 12px; }
    .product-page { padding-block: 14px 40px; }
    .product-top { padding: 12px; border-radius: 18px; gap: 14px; }
    .product-info h1 { font-size: 17px; }
    .pi-price .val { font-size: 20px; }
    .pi-actions .btn.lg { min-width: 0; padding: 11px 14px; font-size: 13px; }
    .pi-actions .btn.ghost { display: none; }
    .gallery-thumbs button { width: 56px; height: 56px; }
    .product-tabs { padding: 14px; border-radius: 18px; }
    .spec-table td { padding: 7px 8px; font-size: 11.5px; }
    .cart-row { grid-template-columns: 70px minmax(0, 1fr) 44px; grid-template-areas: 'img name del' 'img qty total'; gap: 8px; }
    .cart-row .cr-img { grid-area: img; width: 70px; height: 70px; }
    .cart-row .cr-name { grid-area: name; font-size: 12px; }
    .cart-row .cr-qty { grid-area: qty; }
    .cart-row .cr-price { display: none; }
    .cart-row .cr-total { grid-area: total; text-align: left; font-size: 12.5px; }
    .cart-row .cr-del { grid-area: del; width: 30px; height: 30px; }
    .cart-panel { padding: 12px; border-radius: 18px; }
    .summary-card { padding: 14px; border-radius: 18px; }
    .checkout-card { padding: 14px; border-radius: 18px; }
    .form-grid, .pay-options { grid-template-columns: 1fr; }
    .steps { gap: 0; }
    .step { font-size: 10px; gap: 5px; }
    .step .n { width: 24px; height: 24px; font-size: 10px; }
    .step-line { width: 22px; margin-inline: 6px; }
    .auth-card { padding: 20px 16px; }
    .invoice-sheet { padding: 16px 12px; border-radius: 14px; }
    .inv-head .brand img { height: 40px; }
    .inv-title h1 { font-size: 16px; }
    .inv-totals table { width: 100%; }
    .inv-foot { flex-direction: column; align-items: flex-start; gap: 12px; }
    .drivers-hero { flex-direction: column; text-align: center; padding: 20px; }
    .drivers-hero img { width: 84px; }
    .result-card { padding: 24px 18px; }
    .mobile-bottom a { font-size: 9.5px; }
    .content-card { padding: 18px 16px; }
    .about-hero { padding: 24px 18px; }
    .about-hero h1 { font-size: 21px; }
    .about-stats { grid-template-columns: 1fr 1fr; gap: 10px; }
    .blog-grid { grid-template-columns: 1fr; }
    .page-head { padding-block: 12px; }
    .toast-wrap { left: 12px; right: 12px; bottom: 80px; }
    .toast { min-width: 0; }
}

@media (max-width: 400px) {
        .theme-btn .tb-ico { width: 32px; height: 32px; border-radius: 9px; }
    .theme-btn .tb-ico svg { width: 16px; height: 16px; }
    .hero-side { grid-template-columns: 1fr; }
    .hero-side .hero-tile { display: flex; }
    .hero-side > *:nth-child(3) { grid-column: auto; }
}

/* ---------------------------------------------------------------- Print (invoice) */
@media print {
    body { background: #fff; }
    .topbar, .site-header, .site-footer, .mobile-bottom, .invoice-toolbar, .breadcrumb, .sticky-buy, .toast-wrap { display: none !important; }
    .invoice-page { padding: 0; }
    .invoice-sheet { border: 0; box-shadow: none; padding: 0; max-width: 100%; }
    .container { max-width: 100%; padding: 0; }
    .inv-table th, .inv-table td { border-color: #ccc; }
    @page { size: A4; margin: 14mm; }
}

/* Tab panels (shared) */
.tab-panel { display: none; }
.tab-panel.active { display: block; animation: fadeUp .3s var(--ease); }
@media (max-width: 1024px) {
    .card[style*="grid-template-columns:1.35fr"] { grid-template-columns: 1fr !important; }
}

/* Product wishlist button */
.pi-fav {
    width: 34px; height: 34px; border-radius: 10px;
    border: 1px solid var(--line-strong); background: #fff; color: var(--muted);
    display: inline-flex; align-items: center; justify-content: center;
    transition: .2s; flex-shrink: 0;
}
.pi-fav:hover { color: var(--red); border-color: #fecdd3; background: #fff7f8; }
.pi-fav.active { color: var(--red); background: #fff1f4; border-color: #fecdd3; }
.pi-fav svg { width: 17px; height: 17px; }

@media (max-width: 400px) {
    .header-in { gap: 6px; }
    .logo img { height: 32px; }
    .header-actions { gap: 0; }
    .wish-btn { padding: 4px; }
    .wish-btn .wb-ico { width: 32px; height: 32px; border-radius: 9px; }
    .wish-btn .wb-ico svg { width: 16px; height: 16px; }
    .cart-btn { padding: 6px 7px; font-size: 10px; gap: 4px; }
    .cart-btn svg { width: 15px; height: 15px; }
    .cart-btn .c-count { min-width: 18px; font-size: 9.5px; padding: 0 4px; }
    .mobile-toggle { width: 36px; }
}

@media (max-width: 340px) {
    .theme-btn .tb-ico { width: 30px; height: 30px; }
    .header-in { gap: 4px; }
    .logo img { height: 26px; }
    .wish-btn { padding: 3px; }
    .wish-btn .wb-ico { width: 30px; height: 30px; }
    .cart-btn { padding: 5px 6px; font-size: 9px; gap: 3px; }
    .cart-btn svg { width: 14px; height: 14px; }
    .cart-btn .c-count { min-width: 16px; font-size: 9px; padding: 0 3px; }
    .mobile-toggle { width: 32px; }
}

/* Account page admin link */
.account-menu .admin-account-link {
    background: linear-gradient(135deg, #eff6ff, #e4efff);
    color: var(--blue-700);
    font-weight: 800;
    border: 1px dashed #bcd4f5;
    margin-bottom: 4px;
}
.account-menu .admin-account-link:hover { background: var(--blue-600); color: #fff; }

/* Floating header width on small screens */
@media (max-width: 900px) {
    .site-header { width: calc(100% - 20px); margin-top: 0; border-radius: 0 0 14px 14px; }
}
@media (max-width: 400px) {
    .site-header { width: calc(100% - 12px); }
}

/* Product page mobile polish */
@media (max-width: 900px) {
    body.has-sticky-buy .mobile-bottom { display: none; }
    body.has-sticky-buy .site-footer { margin-bottom: 0; }
    body.has-sticky-buy .product-page { padding-bottom: 96px; }
}
@media (max-width: 900px) {
    .gallery-main { max-height: 430px; }
}
@media (max-width: 720px) {
        .cart-btn {
        height: 36px;
        padding: 0 10px;
        border-radius: 10px;
        gap: 6px;
    }
.gallery-main { aspect-ratio: 1 / 0.72; max-height: none; }
    .gallery-main img { padding: 14px; }
}
.sticky-buy { z-index: 80; }

/* Tablet / small desktop header fixes */
@media (max-width: 900px) {
        .hero-side { 
        grid-template-columns: 1fr 1fr; 
        grid-template-rows: auto; 
    }
    /* کارت سوم (چه تایمر باشه چه بنر) در موبایل تمام عرض رو بگیره و وسط بیاد */
    .hero-side > *:nth-child(3) { 
        grid-column: 1 / -1; 
        margin-top: 4px;
    }
    .header-search { display: none; }
    .hero-side .countdown-card { grid-column: 1 / -1; }
}

@media (max-width: 1024px) {
    .header-actions .account-link > .icon { display: none; }
}

/* =================================================================
   دسته‌بندی‌های صفحه اول — چیدمان «بنتو + ستون بنر»
   ================================================================= */
.bento-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 252px; gap: 16px; align-items: stretch; }
.bento { display: grid; grid-template-columns: repeat(5, 1fr); grid-auto-rows: 150px; gap: 14px; }
.catb-card {
    background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 14px 10px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    text-align: center; text-decoration: none; color: var(--ink); transition: .28s var(--ease);
}
.catb-card:hover { transform: translateY(-4px); border-color: #c9dcf5; box-shadow: var(--shadow); }
.catb-card .media { height: 74px; display: flex; align-items: center; justify-content: center; }
.catb-card .media img { max-width: 84px; max-height: 64px; object-fit: contain; }
.catb-card b { font-size: 12px; font-weight: 700; line-height: 1.6; color: var(--ink); }
.catb-card .cnt { font-size: 10.5px; color: var(--muted-2); }
.catb-card .cnt em { font-style: normal; color: var(--blue-700); background: var(--blue-25); border-radius: 999px; padding: 2px 9px; }

/* کارت ویژه (پرتعدادترین دسته) — دو ردیف در ستون اول */
.catb-featured {
    grid-column: 1; grid-row: 1 / 3;
    background: linear-gradient(200deg, #f0f7ff, #d9ebff);
    border: 1px solid #d5e6fb; border-radius: 24px; padding: 20px 16px;
    position: relative; overflow: hidden;
    justify-content: flex-start; gap: 10px;
}
.catb-featured::before {
    content: ''; position: absolute; width: 210px; height: 210px; border-radius: 50%;
    background: radial-gradient(circle, #cfe4fb, transparent 68%);
    bottom: -80px; left: -60px;
}
.catb-featured .ribbon {
    position: absolute; top: 14px; inset-inline-start: 14px;
    background: linear-gradient(135deg, #f5b301, #f59e0b); color: #fff;
    font-size: 10.5px; font-weight: 800; border-radius: 999px; padding: 5px 12px;
    box-shadow: 0 8px 16px -8px rgba(245, 158, 11, .8);
}
.catb-featured .media { height: 128px; }
.catb-featured .media img { max-width: 128px; max-height: 118px; }
.catb-featured b { font-size: 16px; font-weight: 800; color: var(--heading); position: relative; }
.catb-featured .cnt { position: relative; }
.catb-featured .cnt em { font-size: 11.5px; background: #fff; border: 1px solid #d5e6fb; padding: 4px 13px; }
.catb-featured .go {
    position: relative; margin-top: 2px; display: inline-flex; align-items: center; gap: 6px;
    background: var(--blue-600); color: #fff; font-size: 12px; font-weight: 700;
    border-radius: 12px; padding: 9px 16px; box-shadow: var(--shadow-blue);
}
.catb-featured .go svg { width: 14px; height: 14px; }

/* کاشی پهن «مشاهده همه محصولات» — پهنای آن با کلاس s2..s5 تنظیم می‌شود */
.catb-cta {
    border-radius: 22px; background: linear-gradient(135deg, var(--blue-500), var(--blue-700)); color: #fff;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 0 26px; overflow: hidden; position: relative; text-decoration: none;
}
.catb-cta::before {
    content: ''; position: absolute; width: 220px; height: 220px; border-radius: 50%;
    background: rgba(255, 255, 255, .08); bottom: -130px; left: 70px;
}
.catb-cta b { display: block; font-size: 16px; font-weight: 800; color: #fff; }
.catb-cta small { font-size: 11.5px; color: rgba(255, 255, 255, .78); }
.catb-cta .arr {
    width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .16);
    display: flex; align-items: center; justify-content: center; flex: 0 0 auto; color: #fff;
}
.catb-cta .arr svg { width: 18px; height: 18px; }
.catb-cta.s2 { grid-column: span 2; }
.catb-cta.s3 { grid-column: span 3; }
.catb-cta.s4 { grid-column: span 4; }
.catb-cta.s5 { grid-column: span 5; }

/* ستون سمت چپ: بنر عمودی + کارت تخفیف‌ها */
.bento-side { display: flex; flex-direction: column; gap: 14px; }
.bento-banner {
    position: relative; flex: 1; min-height: 230px; border-radius: 24px; overflow: hidden;
    display: flex; align-items: flex-end; text-decoration: none;
}
.bento-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.bento-banner:hover img { transform: scale(1.05); }
.bento-banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10, 30, 80, .72), transparent 62%); }
.bento-banner .cap { position: relative; z-index: 2; color: #fff; padding: 16px 18px; }
.bento-banner .cap b { display: block; font-size: 15px; font-weight: 800; color: #fff; }
.bento-banner .cap small { font-size: 11px; color: #d7e4ff; }
.bento-banner .cap .go { display: inline-flex; margin-top: 9px; background: #fff; color: var(--blue-700); font-size: 11px; font-weight: 800; border-radius: 999px; padding: 6px 13px; }
.bento-promo {
    background: linear-gradient(135deg, #f7c948, #f59e0b); border-radius: 22px; padding: 15px 18px;
    color: #3d2c00; display: flex; align-items: center; justify-content: space-between; gap: 10px;
    box-shadow: 0 18px 30px -18px rgba(245, 158, 11, .75); flex: 0 0 auto; text-decoration: none;
}
.bento-promo b { display: block; font-size: 13.5px; font-weight: 800; color: #3d2c00; }
.bento-promo small { font-size: 10.5px; font-weight: 700; opacity: .75; }
.bento-promo .arr {
    width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, .55);
    display: flex; align-items: center; justify-content: center; flex: 0 0 auto; color: #3d2c00;
}
.bento-promo .arr svg { width: 16px; height: 16px; }

/* واکنش‌گرایی بنتو */
@media (max-width: 1180px) {
    .bento-wrap { grid-template-columns: minmax(0, 1fr) 232px; }
}
@media (max-width: 1100px) {
    .bento-wrap { grid-template-columns: 1fr; }
    .bento-side { flex-direction: row; }
    .bento-banner { min-height: 190px; }
    .bento-promo { flex: 1; }
}
@media (max-width: 720px) {
    .bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 132px; gap: 10px; }
    .bento .catb-cta { grid-column: span 2; }
    .catb-card { border-radius: 15px; padding: 10px 8px; }
    .catb-card .media { height: 58px; }
    .catb-card .media img { max-width: 66px; max-height: 50px; }
    .catb-card b { font-size: 11px; }
    .catb-featured { border-radius: 18px; padding: 14px 10px; }
    .catb-featured .media { height: 84px; }
    .catb-featured .media img { max-width: 92px; max-height: 80px; }
    .catb-featured b { font-size: 13px; }
    .catb-featured .go { font-size: 11px; padding: 7px 12px; }
    .bento-side { flex-direction: column; }
    .bento-banner { min-height: 170px; border-radius: 18px; }
    .bento-promo { border-radius: 16px; }
}
html[data-theme="dark"] .cat-tree .cnt {
    background: rgba(255, 255, 255, 0.08); /* شمارنده در حالت شب */
}
html[data-theme="dark"] .cat-tree .sub {
    border-inline-start-color: #223457; /* رنگ خط عمودی زیردسته‌ها در شب */
}
/* استایل شمارنده در حالت انتخاب شده زیردسته */
.cat-tree .sub a.active .cnt {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}
/* ==========================================================================
   افزودنی‌های آبان ۱۴۰۵ — انتخاب گزینه، بنر تعمیرات، درایور ۳ ویندوز
   ========================================================================== */

/* --- انتخاب گزینه محصول (سرویس / رنگ) --- */
.opt-picker {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px 14px;
    background: var(--blue-25, #f6faff);
    border: 1px solid var(--line, #e4edf9);
    border-radius: 12px;
    margin: 4px 0 14px;
}
.opt-picker .op-label {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ink-soft, #33506f);
    padding-top: 7px;
    white-space: nowrap;
}
.opt-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.opt-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border-radius: 10px;
    border: 1.5px solid var(--line-strong, #d3e2f4);
    background: var(--white, #fff);
    color: var(--ink, #102a4c);
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.opt-chip small { font-weight: 600; color: var(--muted, #61799a); font-size: 10.5px; display: block; }
.opt-chip .oc-dot {
    width: 14px; height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(0,0,0,.12);
    flex: 0 0 auto;
}
.opt-chip:hover { border-color: var(--blue-400, #3b82f6); }
.opt-chip.active {
    border-color: var(--blue-600, #1d4ed8);
    background: var(--blue-50, #eff6ff);
    box-shadow: 0 0 0 3px rgba(29, 78, 216, .12);
}
.opt-chip.active small { color: var(--blue-600, #1d4ed8); }

/* --- برچسب گزینه در سبد خرید --- */
.cl-opt {
    display: inline-block;
    margin-top: 3px;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--blue-600, #1d4ed8);
    background: var(--blue-50, #eff6ff);
    border-radius: 6px;
    padding: 2px 8px;
}

/* --- منوی هدر: زیردسته‌های سطح ۳ (بدون خط تیره) --- */
.nav-drop a.nd-sub {
    padding-inline-start: 14px;
    font-size: 12px;
    color: var(--muted, #61799a);
}

/* --- منوی موبایل: سطح ۳ --- */
.mobile-nav .m-sub2 { padding-inline-start: 26px; font-size: 12.5px; opacity: .85; }

/* --- فیلتر فروشگاه: سطح ۳ --- */
.cat-tree .sub.sub2 { padding-inline-start: 12px; margin: 2px 0 4px; }
.cat-tree .sub.sub2 a { font-size: 12px; padding: 6px 8px; }

/* --- کارت درایور: سه دکمه ویندوز --- */
.driver-card .driver-dl-group { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
@media (max-width: 640px) {
    .driver-card { flex-wrap: wrap; }
    .driver-card .driver-dl-group { flex-direction: row; width: 100%; }
    .driver-card .driver-dl-group .driver-dl { flex: 1; justify-content: center; }
}

/* --- کادر تعمیرات صفحه اول --- */
.repair-box {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    background: var(--white, #fff);
    border: 1px solid var(--line, #e4edf9);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 14px 40px rgba(15, 30, 60, .07);
}
.repair-box .rb-media { position: relative; min-height: 240px; }
.repair-box .rb-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.repair-box .rb-overlay {
    position: absolute;
    inset: auto 0 0 0;
    padding: 40px 20px 16px;
    background: linear-gradient(to top, rgba(7, 22, 46, .92), rgba(7, 22, 46, 0));
    color: #fff;
}
.repair-box .rb-overlay b { display: block; font-size: 17px; }
.repair-box .rb-overlay small { opacity: .85; font-size: 12px; }
.repair-box .rb-body { padding: 24px 26px; }
.repair-box .rb-body > p {
    font-size: 13px;
    line-height: 2;
    color: var(--ink-soft, #33506f);
    margin: 0 0 14px;
}
.repair-box .rb-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 10px;
}
.repair-box .rb-form .input,
.repair-box .rb-form .textarea {
    width: 100%;
    background: var(--bg, #f5f9ff);
    border: 1px solid var(--line-strong, #d3e2f4);
    border-radius: 10px;
    padding: 10px 13px;
    font: inherit;
    font-size: 13px;
    color: var(--ink, #102a4c);
    outline: none;
}
.repair-box .rb-form .input:focus,
.repair-box .rb-form .textarea:focus {
    border-color: var(--blue-500, #2563eb);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}
.repair-box .rb-form .textarea { margin-bottom: 12px; resize: vertical; }
.repair-box .rb-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.repair-box .rb-hint { font-size: 11.5px; color: var(--muted, #61799a); }
@media (max-width: 900px) {
    .repair-box { grid-template-columns: 1fr; }
    .repair-box .rb-media { min-height: 170px; }
    .repair-box .rb-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   ست کارتریج تونر — نقطه‌های رنگ و مشخصات کلیدی روی کارت محصول
   ========================================================================== */
.p-colors { display: inline-flex; align-items: center; gap: 5px; }
.p-colors .oc-dot {
    width: 13px; height: 13px; border-radius: 50%;
    border: 2px solid rgba(0, 0, 0, .14);
    display: inline-block; flex: 0 0 auto;
}
.pc-specs {
    list-style: none;
    margin: 2px 0 8px;
    padding: 8px 11px;
    background: #f7fafd;
    border: 1px solid #e8eef7;
    border-radius: 9px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.pc-specs li { font-size: 11px; line-height: 1.8; display: flex; justify-content: space-between; gap: 10px; }
.pc-specs li span { color: var(--muted-2, #61799a); flex-shrink: 0; }
.pc-specs li b { color: var(--ink, #102a4c); font-weight: 700; text-align: left; unicode-bidi: plaintext; }
.product-card.list .pc-specs { max-width: 520px; }

/* --- صفحهٔ محصول: رنگ‌های ست --- */
.pi-colors { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin: 4px 0 10px; }
.pi-colors-label { font-size: 12.5px; font-weight: 700; color: var(--muted, #61799a); }
.pi-colors .p-colors { gap: 7px; }
.pi-colors .oc-dot {
    width: 17px; height: 17px;
    border: 2px solid rgba(0, 0, 0, .14);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .65);
}

/* ==========================================================================
   بروزرسانی نسخه ۳ — آبان ۱۴۰۵
   ۱) منوی کشویی تعمیرات تخصصی  ۲) بج پرفروش  ۳) ملزومات جانبی پرینتر
   ۴) قلم ضمانت یکساله در سبد  ۵) صفحه تعمیرات تخصصی
   ========================================================================== */

/* --- منوی کشویی تعمیرات تخصصی (هدر) --- */
.nav-drop .nd-sep {
    height: 1px;
    background: var(--line, #e4edf9);
    margin: 8px 0;
}
.nav-drop .nd-empty {
    display: block;
    padding: 6px 7px 10px;
    font-size: 11.5px;
    color: var(--muted, #61799a);
}
.nav-drop .nd-repair-cta {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    margin: 2px 4px 6px;
    border-radius: 10px;
    background: linear-gradient(135deg, #0f2c52, #1d4ed8);
    color: #fff !important;
    font-size: 12.5px;
    font-weight: 700;
}
/* آیکون دکمه در هر دو تم (روشن/شب) کاملاً واضح: آیکون سفید روی قرص شیشه‌ای */
.nav-drop .nd-repair-cta .ndi {
    display: inline-flex;
    width: 30px; height: 30px;
    border-radius: 9px;
    margin-inline-end: 0;
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .28);
    color: #fff;
}
.nav-drop .nd-repair-cta .ndi svg { width: 17px; height: 17px; opacity: 1; }
.nav-drop .nd-repair-cta:hover { filter: brightness(1.12); }

/* --- بج «پرفروش» روی کارت محصول --- */
.pc-badge.hot { background: #f59e0b; color: #fff; }

/* --- باکس «ملزومات جانبی این پرینتر» در صفحه محصول --- */
.acc-box {
    margin: 26px 0 8px;
    background: var(--white, #fff);
    border: 1px solid var(--line, #e4edf9);
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(15, 30, 60, .05);
    overflow: hidden;
}
.acc-box .acc-head {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 16px 20px;
    background: linear-gradient(135deg, #f5f9ff, #eef5ff);
    border: 0;
    border-bottom: 1px solid var(--line, #e4edf9);
    cursor: pointer;
    font: inherit;
    text-align: start;
}
.acc-box .acc-ic {
    flex: 0 0 auto;
    width: 42px; height: 42px;
    border-radius: 12px;
    background: var(--navy-800, #0f2c52);
    color: #fbbf24;
    display: inline-flex; align-items: center; justify-content: center;
}
.acc-box .acc-ic svg { width: 21px; height: 21px; }
.acc-box .acc-title { flex: 1; min-width: 0; }
.acc-box .acc-title b { display: block; font-size: 14.5px; color: var(--navy-800, #0f2c52); }
.acc-box .acc-title small { display: block; font-size: 11.5px; color: var(--muted, #61799a); margin-top: 2px; }
.acc-box .acc-caret { color: var(--muted, #61799a); display: inline-flex; transition: transform .25s; }
.acc-box .acc-caret svg { width: 18px; height: 18px; }
.acc-box.collapsed .acc-caret { transform: rotate(180deg); }
.acc-box.collapsed .acc-body { display: none; }

.acc-box .acc-body { padding: 12px 14px 14px; }
.acc-box .acc-group { margin-bottom: 14px; }
.acc-box .acc-group:last-of-type { margin-bottom: 0; }
.acc-box .acc-group-title {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 800;
    color: var(--navy-800, #0f2c52);
    margin: 0 0 8px;
    padding-bottom: 7px;
    border-bottom: 1px dashed var(--line, #dbe4f0);
    line-height: 1.7;
}
.acc-box .acc-group-title svg { width: 16px; height: 16px; color: var(--blue-600, #1d4ed8); flex: 0 0 auto; }
.acc-box .acc-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.acc-box .acc-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--line, #e4edf9);
    border-radius: 13px;
    background: #fbfdff;
    transition: border-color .2s, box-shadow .2s, background .2s;
}
.acc-box .acc-item.checked {
    border-color: var(--blue-500, #2563eb);
    background: #f2f7ff;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .08);
}
.acc-box .acc-main {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    cursor: pointer;
}
.acc-box .acc-item input[type="checkbox"] {
    flex: 0 0 auto;
    width: 17px; height: 17px;
    accent-color: var(--blue-600, #1d4ed8);
    cursor: pointer;
}
.acc-box .acc-media {
    flex: 0 0 auto;
    width: 52px; height: 52px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid var(--line, #e4edf9);
    display: inline-flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.acc-box .acc-media img { max-width: 100%; max-height: 100%; object-fit: contain; }
.acc-box .acc-media.w-ic { color: var(--blue-600, #1d4ed8); }
.acc-box .acc-media.w-ic svg { width: 26px; height: 26px; }
.acc-box .acc-info { flex: 1; min-width: 0; }
.acc-box .acc-name {
    display: block;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.7;
    color: var(--ink, #102a4c);
}
.acc-box .acc-name small {
    display: block;
    font-size: 10.5px;
    font-weight: 500;
    color: var(--muted, #61799a);
    margin-top: 2px;
}
.acc-box .acc-price { display: block; font-size: 12px; font-weight: 800; color: var(--navy-800, #0f2c52); margin-top: 3px; }
.acc-box .acc-price small { font-size: 10px; font-weight: 500; color: var(--muted, #61799a); }
.acc-box .acc-qty {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1px solid var(--line-strong, #d3e2f4);
    border-radius: 9px;
    padding: 3px;
}
.acc-box .acc-qty button {
    width: 24px; height: 24px;
    border: 0;
    border-radius: 7px;
    background: #f1f6fd;
    color: var(--navy-800, #0f2c52);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    line-height: 1;
}
.acc-box .acc-qty button:hover:not(:disabled) { background: var(--blue-600, #1d4ed8); color: #fff; }
.acc-box .acc-qty button:disabled { opacity: .35; cursor: default; }
.acc-box .acc-qty .acc-num { min-width: 18px; text-align: center; font-size: 12.5px; font-weight: 800; }
.acc-box .acc-qty.w-pct {
    background: transparent;
    border: 0;
    font-size: 11.5px;
    font-weight: 800;
    color: var(--blue-600, #1d4ed8);
    white-space: nowrap;
    padding: 0 6px;
}
.acc-box .acc-warranty {
    margin-top: 8px;
    background: linear-gradient(135deg, #fffbeb, #fef3c7);
    border-color: #fcd34d;
}
.acc-box .acc-warranty.checked { border-color: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, .14); }
.acc-box .acc-warranty .acc-media { background: #fff; border-color: #fcd34d; }
.acc-box .acc-note {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    font-size: 11px;
    color: var(--muted, #61799a);
}
.acc-box .acc-note svg { width: 14px; height: 14px; flex: 0 0 auto; }

@media (max-width: 860px) {
    .acc-box .acc-list { grid-template-columns: 1fr; }
    .acc-box .acc-item { flex-wrap: wrap; }
}

/* --- قلم ضمانت یکساله در سبد خرید و کشوی سبد --- */
.cart-row.warranty-line,
.cart-line.warranty-line {
    background: linear-gradient(135deg, #fffbeb, #fef8e7);
    border: 1px solid #fde68a;
    border-radius: 12px;
}
.cart-row.warranty-line { padding-inline: 10px; }
.w-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border-radius: 999px;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    color: #92400e;
    font-size: 10.5px;
    font-weight: 700;
}
.w-chip svg { width: 13px; height: 13px; }

/* --- صفحه تعمیرات تخصصی --- */
.page-repair { margin-bottom: 4px; }
.repair-contact { margin-top: 16px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (max-width: 760px) {
    .repair-contact { grid-template-columns: 1fr; }
}

/* --- باکس «ملزومات جانبی این پرینتر» در تکمیل خرید (زیر فاکتور شما) --- */
.checkout-page .summary-card { position: static; }
.checkout-page .acc-box { margin: 14px 0 0; }
.checkout-page .acc-box .acc-list { grid-template-columns: 1fr; }