/*
  قالب «دیجی‌شاپ آبی نفتی» — همان چیدمان «دیجی‌شاپ» با پالت سرمه‌ای/آبی نفتی بر پایهٔ #0b1020.
  تنها تفاوت با digishop همین بلوک پالت، چند قاعدهٔ پایان فایل (رنگ متن برچسب تصویر و
  نام فروشگاه کنار لوگو) و نمایش نام فروشگاه در _Layout است؛ بقیهٔ فایل عیناً کپی digishop است.

  بخش‌ها:
    ۱) پالت (سه بلوک تم طبق TEMPLATE-GUIDE بخش ۲.۱)
    ۲) هدر دسکتاپ + مگامنو
    ۳) نوار افقی مشترک (dk-row / dk-viewport / dk-nav)
    ۴) نوار دسته‌ها، «پرتخفیف‌ترین‌ها»، کارت محصول
    ۵) موبایل: هدر جستجو، نوار پایین، صفحهٔ دسته‌بندی تمام‌صفحه
*/

/* ================= ۱) پالت ================= */
:root {
    --font: IRANSans, Vazirmatn, Tahoma, sans-serif;
    --font-display: IRANSans, Vazirmatn, Tahoma, sans-serif;
    --radius: 16px;
    --radius-sm: 10px;
    --container: 1336px;

    /* در تم روشن خودِ #0b1020 رنگ اصلی است (دکمه‌ها، قیمت، عنوان‌ها) و آبیِ روشن‌ترِ همان
       خانواده برای لینک‌ها، تا صفحه یکسره سیاه‌وسفید به نظر نرسد. */
    --color-primary: #0b1020;
    --color-primary-text: #ffffff;
    --color-accent: #2f4f9e;
    --color-bg: #f2f4f9;
    --color-surface: #ffffff;
    --color-surface-alt: #e6eaf3;
    --color-text: #0b1020;
    --color-muted: #5b6684;
    --color-border: #d8deeb;
    --shadow: 0 4px 14px rgba(11, 16, 32, .08);

    /* رنگ‌های اختصاصی دیجی‌شاپ */
    --dk-search-bg: #eef1f7;
    --dk-mega-side: #f4f6fb;
    --dk-mega-shadow: 0 18px 40px rgba(11, 16, 32, .18);
    --dk-nav-btn-shadow: 0 2px 10px rgba(11, 16, 32, .14);
    --dk-tile-1: #e6ebf6;
    --dk-tile-2: #e3edfb;
    --dk-tile-3: #ebe8f7;
    --dk-tile-4: #e4f0f3;
    --dk-tile-5: #efeef4;
    --dk-tile-border: rgba(11, 16, 32, .10);
    /* بلوک‌های تخفیف: سربرگ روشن، موج و بدنهٔ پررنگ که به رنگ صفحه محو می‌شود */
    --dk-amz-head: #e3e8f4;
    --dk-amz-strong: #0b1020;
    --dk-amz-mid: #2a3961;
    --dk-amz-title: #0b1020;
    --dk-top-head: #e2eaf8;
    --dk-top-strong: #1d3466;
    --dk-top-mid: #4a67a8;
    --dk-top-title: #1d3466;
    --dk-off-card: #ffffff;
    /* قرمزِ نشان تخفیف (مثل دیجی‌کالا)؛ تنها رنگ گرم قالب تا تخفیف از دور دیده شود. */
    --dk-sale: #ef394e;
    --dk-sale-text: #ffffff;
    --dk-timer-bg: #ffffff;
    --dk-timer-text: #0b1020;
    --dk-art-ink: #0b1020;
    --dk-art-box: #ffffff;
    --dk-art-lid: #1d3466;
    --dk-art-1: #fde68a;
    --dk-art-2: #bfd3ff;
    --dk-art-3: #fecaca;
    --dk-toast-bg: #0b1020;
    --dk-toast-text: #ffffff;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --color-primary: #8fa8ff;
        --color-primary-text: #0b1020;
        --color-accent: #a9bcff;
        --color-bg: #0b1020;
        --color-surface: #141b31;
        --color-surface-alt: #0f1528;
        --color-text: #e5e9f4;
        --color-muted: #8b95b4;
        --color-border: #222b47;
        --shadow: 0 6px 22px rgba(0, 0, 0, .55);

        --overlay-veil: rgba(11, 16, 32, .78);
        --overlay-control: rgba(255, 255, 255, .18);

        --alert-success-bg: #0d2a22;
        --alert-success-text: #6ee7b7;
        --alert-error-bg: #2d1420;
        --alert-error-text: #fda4af;
        --alert-warn-bg: #2b2412;
        --alert-warn-text: #fcd34d;

        --dk-search-bg: #0f1528;
        --dk-mega-side: #0f1528;
        --dk-mega-shadow: 0 18px 40px rgba(0, 0, 0, .6);
        --dk-nav-btn-shadow: 0 2px 12px rgba(0, 0, 0, .5);
        --dk-tile-1: #18213d;
        --dk-tile-2: #142846;
        --dk-tile-3: #211d40;
        --dk-tile-4: #13293a;
        --dk-tile-5: #1d2133;
        --dk-tile-border: rgba(143, 168, 255, .14);
        --dk-amz-head: #141b31;
        --dk-amz-strong: #1f2c55;
        --dk-amz-mid: #172140;
        --dk-amz-title: #a9bcff;
        --dk-top-head: #121d36;
        --dk-top-strong: #213a6b;
        --dk-top-mid: #18294c;
        --dk-top-title: #9fc2ff;
        --dk-off-card: #141b31;
        --dk-sale: #f43f5e;
        --dk-sale-text: #ffffff;
        --dk-timer-bg: #0b1020;
        --dk-timer-text: #a9bcff;
        --dk-art-ink: #0b1020;
        --dk-art-box: #e5e9f4;
        --dk-art-lid: #8fa8ff;
        --dk-art-1: #fcd34d;
        --dk-art-2: #8fa8ff;
        --dk-art-3: #fda4af;
        --dk-toast-bg: #e5e9f4;
        --dk-toast-text: #0b1020;
    }
}

:root[data-theme="dark"] {
    --color-primary: #8fa8ff;
    --color-primary-text: #0b1020;
    --color-accent: #a9bcff;
    --color-bg: #0b1020;
    --color-surface: #141b31;
    --color-surface-alt: #0f1528;
    --color-text: #e5e9f4;
    --color-muted: #8b95b4;
    --color-border: #222b47;
    --shadow: 0 6px 22px rgba(0, 0, 0, .55);

    --overlay-veil: rgba(11, 16, 32, .78);
    --overlay-control: rgba(255, 255, 255, .18);

    --alert-success-bg: #0d2a22;
    --alert-success-text: #6ee7b7;
    --alert-error-bg: #2d1420;
    --alert-error-text: #fda4af;
    --alert-warn-bg: #2b2412;
    --alert-warn-text: #fcd34d;

    --dk-search-bg: #0f1528;
    --dk-mega-side: #0f1528;
    --dk-mega-shadow: 0 18px 40px rgba(0, 0, 0, .6);
    --dk-nav-btn-shadow: 0 2px 12px rgba(0, 0, 0, .5);
    --dk-tile-1: #18213d;
    --dk-tile-2: #142846;
    --dk-tile-3: #211d40;
    --dk-tile-4: #13293a;
    --dk-tile-5: #1d2133;
    --dk-tile-border: rgba(143, 168, 255, .14);
    --dk-amz-head: #141b31;
    --dk-amz-strong: #1f2c55;
    --dk-amz-mid: #172140;
    --dk-amz-title: #a9bcff;
    --dk-top-head: #121d36;
    --dk-top-strong: #213a6b;
    --dk-top-mid: #18294c;
    --dk-top-title: #9fc2ff;
    --dk-off-card: #141b31;
    --dk-sale: #f43f5e;
    --dk-sale-text: #ffffff;
    --dk-timer-bg: #0b1020;
    --dk-timer-text: #a9bcff;
    --dk-art-ink: #0b1020;
    --dk-art-box: #e5e9f4;
    --dk-art-lid: #8fa8ff;
    --dk-art-1: #fcd34d;
    --dk-art-2: #8fa8ff;
    --dk-art-3: #fda4af;
    --dk-toast-bg: #e5e9f4;
    --dk-toast-text: #0b1020;
}

/* ================= آیکون‌ها ================= */
.dk-ico {
    width: 22px; height: 22px; flex: none;
    fill: none; stroke: currentColor; stroke-width: 1.8;
    stroke-linecap: round; stroke-linejoin: round;
}

/* ================= ۲) هدر ================= */
.dk-header {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    position: sticky; top: 0; z-index: 30;
}

.dk-header-top { display: flex; align-items: center; gap: 24px; padding-block: 12px; }

.dk-brand {
    display: flex; align-items: center; gap: 8px; flex: none;
    color: var(--color-primary); font-size: 22px; font-weight: 700; white-space: nowrap;
}
.dk-brand img { height: 38px; display: block; }
.dk-brand-mark {
    width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center;
    background: var(--color-primary); color: var(--color-primary-text); font-size: 19px;
}

.dk-search {
    position: relative; flex: 0 1 620px; min-width: 0;
    display: flex; align-items: center; gap: 8px;
    height: 46px; padding-inline: 14px;
    background: var(--dk-search-bg); color: var(--color-muted);
    border: 1px solid transparent; border-radius: 12px;
    transition: border-color .15s ease, background .15s ease;
}
.dk-search:focus-within { border-color: var(--color-primary); background: var(--color-surface); }
/* انتخابگرِ [type] لازم است تا بر input:not([type="checkbox"])… در site.css غلبه کند. */
.dk-search input[type="search"] {
    flex: 1; min-width: 0; height: 100%; padding: 0; border: none; border-radius: 0;
    outline: none; background: transparent; box-shadow: none;
    font: inherit; font-size: 14px; color: var(--color-text);
}
.dk-search-ph {
    position: absolute; inset-inline-start: 46px; inset-inline-end: 14px; top: 50%; transform: translateY(-50%);
    pointer-events: none; white-space: nowrap; color: var(--color-muted); font-size: 14px;
    /* نام بلند فروشگاه در عرض موبایل با «…» تمام شود، نه این‌که از جعبه بیرون بزند. */
    overflow: hidden; text-overflow: ellipsis;
}
.dk-search-ph b { color: var(--color-primary); font-weight: 700; }
.dk-search input:not(:placeholder-shown) + .dk-search-ph,
.dk-search input:focus + .dk-search-ph { display: none; }
.dk-ph-long { display: none; }

.dk-actions { margin-inline-start: auto; display: flex; align-items: center; gap: 10px; flex: none; }

.dk-icon-btn {
    position: relative; width: 42px; height: 42px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    border: none; border-radius: 12px; background: none; color: var(--color-text);
    cursor: pointer; font: inherit;
}
.dk-icon-btn:hover { background: var(--color-surface-alt); }
.dk-actions .theme-toggle { border: none; background: none; width: 42px; height: 42px; border-radius: 12px; }
.dk-actions .theme-toggle:hover { background: var(--color-surface-alt); }
.dk-actions .theme-toggle .icon-light, .dk-actions .theme-toggle .icon-dark { line-height: 0; }

.dk-login {
    display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
    padding: 9px 14px; border: 1px solid var(--color-border); border-radius: 12px;
    background: var(--color-surface); color: var(--color-text);
    font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.dk-login:hover { border-color: var(--color-primary); }
.dk-login .dk-caret { width: 16px; height: 16px; }
.dk-login-label { max-width: 140px; overflow: hidden; text-overflow: ellipsis; }

.dk-sep { width: 1px; height: 26px; background: var(--color-border); }

.dk-cart .cart-badge {
    position: absolute; bottom: 4px; inset-inline-end: 2px;
    font-size: 10px; line-height: 17px; min-width: 17px; padding: 0 4px;
    border: 2px solid var(--color-surface); box-sizing: content-box;
}

/* ---------- ردیف دوم: مگامنو و میان‌بُرها ---------- */
.dk-nav-row {
    position: relative; display: flex; align-items: center; gap: 20px;
    height: 46px; font-size: 13px;
}
.dk-nav-link { display: inline-flex; align-items: center; gap: 6px; color: var(--color-muted); white-space: nowrap; }
.dk-nav-link:hover { color: var(--color-text); }
.dk-nav-link .dk-ico { width: 18px; height: 18px; }
.dk-nav-muted { font-size: 12px; }
.dk-nav-sep { width: 1px; height: 18px; background: var(--color-border); }

.dk-mega-wrap { height: 100%; display: flex; }
.dk-mega-trigger {
    display: inline-flex; align-items: center; gap: 8px; height: 100%;
    padding: 0; border: none; border-bottom: 2px solid transparent; background: none;
    color: var(--color-text); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
.dk-mega-wrap:hover .dk-mega-trigger,
.dk-mega-wrap:focus-within .dk-mega-trigger { border-bottom-color: var(--color-primary); }

.dk-mega {
    display: none; position: absolute; top: 100%; inset-inline: 16px; z-index: 40;
    grid-template-columns: 230px 1fr;
    height: min(72vh, 580px);
    background: var(--color-surface);
    border: 1px solid var(--color-border); border-top: none;
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: var(--dk-mega-shadow); overflow: hidden;
}
.dk-mega-wrap:hover .dk-mega,
.dk-mega-wrap:focus-within .dk-mega { display: grid; }
.dk-mega-wrap.is-closing .dk-mega { display: none; }

.dk-mega-roots { list-style: none; margin: 0; padding: 0; overflow-y: auto; background: var(--dk-mega-side); }
.dk-mega-roots a {
    display: flex; align-items: center; gap: 10px;
    padding: 13px 16px; color: var(--color-text); font-size: 13px;
    border-bottom: 1px solid var(--color-border);
}
.dk-mega-roots li.is-active a { background: var(--color-surface); color: var(--color-primary); font-weight: 700; }
.dk-mega-ico { width: 24px; display: inline-grid; place-items: center; font-size: 18px; line-height: 1; }
.dk-mega-ico img { width: 22px; height: 22px; object-fit: contain; }

.dk-mega-panels { overflow-y: auto; padding: 20px 26px; }
.dk-mega-panel { display: none; }
.dk-mega-panel.is-active { display: block; }

.dk-all-link {
    display: inline-flex; align-items: center; gap: 4px; margin-bottom: 18px;
    color: var(--color-accent); font-size: 13px; font-weight: 700;
}
.dk-all-link .dk-ico { width: 16px; height: 16px; }

.dk-mega-cols { columns: 4 170px; column-gap: 30px; }
.dk-mega-group { break-inside: avoid; margin-bottom: 16px; }
.dk-mega-head {
    display: flex; align-items: center; gap: 4px; margin-bottom: 6px;
    padding-inline-start: 10px; border-inline-start: 2px solid var(--color-primary);
    color: var(--color-text); font-size: 14px; font-weight: 700; line-height: 1.4;
}
.dk-mega-head .dk-ico { width: 15px; height: 15px; }
.dk-mega-head:hover { color: var(--color-primary); }
.dk-mega-leaf { display: block; padding: 5px 12px; color: var(--color-muted); font-size: 13px; line-height: 1.7; }
.dk-mega-leaf:hover { color: var(--color-primary); }
.dk-mega-empty { color: var(--color-muted); font-size: 13px; }

/* ================= ۳) نوار افقی مشترک ================= */
.dk-stage { position: relative; }

.dk-viewport {
    display: flex; overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x proximity; overscroll-behavior-x: contain;
    scrollbar-width: none; padding: 4px 2px 8px;
}
.dk-viewport::-webkit-scrollbar { display: none; }
.dk-viewport:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: var(--radius-sm); }
.dk-viewport.is-dragging { cursor: grabbing; user-select: none; scroll-snap-type: none; scroll-behavior: auto; }
.dk-viewport.is-dragging a { pointer-events: none; }
.dk-viewport img { -webkit-user-drag: none; user-select: none; }

.dk-nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
    width: 42px; height: 42px; border-radius: 50%;
    display: grid; place-items: center; cursor: pointer;
    background: var(--color-surface); color: var(--color-text);
    border: 1px solid var(--color-border); box-shadow: var(--dk-nav-btn-shadow);
    transition: opacity .2s ease, background .15s ease, color .15s ease;
}
.dk-nav:hover:not(:disabled) { background: var(--color-primary); color: var(--color-primary-text); border-color: var(--color-primary); }
.dk-nav:disabled { opacity: 0; pointer-events: none; }
.dk-nav-prev { inset-inline-start: 10px; }
.dk-nav-next { inset-inline-end: 10px; }
.dk-static .dk-nav { display: none; }

/* ---------- ردیف محصول ---------- */
.dk-row {
    margin: 24px 0; padding: 16px 0 6px;
    background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius);
}
.dk-row-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 18px 10px; }
.dk-row-head h2 { margin: 0; font-size: 17px; display: flex; align-items: center; gap: 8px; }
.dk-row-head h2::before {
    content: ""; width: 4px; height: 18px; border-radius: 4px; background: var(--color-primary);
}
.dk-more { display: inline-flex; align-items: center; gap: 2px; color: var(--color-accent); font-size: 13px; white-space: nowrap; }
.dk-more .dk-ico { width: 16px; height: 16px; }

.dk-row .dk-viewport { padding: 0 0 6px; }
.dk-item { flex: 0 0 210px; display: flex; scroll-snap-align: start; }
.dk-item + .dk-item { border-inline-start: 1px solid var(--color-border); }

.dk-row .product-card {
    flex: 1; background: transparent; border: none; border-radius: 0; box-shadow: none;
    transition: box-shadow .18s ease;
}
.dk-row .product-card:hover { box-shadow: inset 0 0 0 1px var(--color-primary); }
.dk-row .product-thumb { padding: 10px 14px 0; }
.dk-row .product-thumb img { object-fit: contain; border-radius: var(--radius-sm); }

/* ================= ۴) بخش‌های صفحهٔ اصلی ================= */
/* pan-y: اسکرول عمودی صفحه با مرورگر، کشیدن افقی با digishop.js (ورق‌زدن اسلاید). */
.dk-slider { margin-top: 16px; border-radius: 20px; touch-action: pan-y; user-select: none; }
.dk-slider .slide img { height: 340px; }

/* ---------- نوار دسته‌ها ---------- */
.dk-catstrip { margin: 22px 0 8px; }
.dk-catstrip .dk-viewport { gap: 14px; padding: 6px 4px 10px; }
.dk-catstrip .dk-nav { top: 56px; }

.dk-cat {
    flex: 0 0 auto; width: 108px; scroll-snap-align: start;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    text-align: center; color: var(--color-text); font-size: 13px; font-weight: 500; line-height: 1.6;
}
.dk-cat-img {
    width: 104px; height: 104px; border-radius: 24px;
    display: grid; place-items: center; overflow: hidden;
    background: var(--dk-tile-1); border: 1px solid var(--dk-tile-border);
    transition: transform .18s ease, box-shadow .18s ease;
}
.dk-cat:nth-child(5n+2) .dk-cat-img { background: var(--dk-tile-2); }
.dk-cat:nth-child(5n+3) .dk-cat-img { background: var(--dk-tile-3); }
.dk-cat:nth-child(5n+4) .dk-cat-img { background: var(--dk-tile-4); }
.dk-cat:nth-child(5n+5) .dk-cat-img { background: var(--dk-tile-5); }
.dk-cat img { width: 84%; height: 84%; object-fit: contain; }
.dk-cat-emoji { font-size: 42px; line-height: 1; }
.dk-cat:hover .dk-cat-img { transform: translateY(-3px); box-shadow: var(--shadow); }
.dk-cat-name {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---------- بلوک‌های تخفیف (شگفت‌انگیز / پرتخفیف‌ترین‌ها) ----------
   هر رنگ از متغیرهای تم می‌آید و کلاس نوع فقط نگاشتشان را عوض می‌کند، پس هر سه بلوکِ
   تم (روشن، تیرهٔ سیستم، تیرهٔ انتخابی) خودبه‌خود درست می‌مانند. */
.dk-deals--amazing {
    --deal-head: var(--dk-amz-head); --deal-strong: var(--dk-amz-strong);
    --deal-mid: var(--dk-amz-mid); --deal-title: var(--dk-amz-title);
}
.dk-deals--top {
    --deal-head: var(--dk-top-head); --deal-strong: var(--dk-top-strong);
    --deal-mid: var(--dk-top-mid); --deal-title: var(--dk-top-title);
}

.dk-deals { margin: 26px 0; border-radius: 22px; overflow: hidden; background: var(--deal-head); }

.dk-deals-head {
    position: relative; display: flex; align-items: center; justify-content: center;
    gap: 24px; min-height: 118px; padding: 12px 22px 0;
}
.dk-deals-art { position: absolute; inset-inline-start: 22px; bottom: -6px; width: 150px; height: auto; }
.dk-deals-title { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.dk-deals-title h2 { margin: 0; font-size: 22px; font-weight: 700; color: var(--deal-title); }

/* موج: همان رنگ پررنگ بدنه، تا مرز سربرگ و بدنه منحنی دیده شود. */
.dk-deals-wave { display: block; width: 100%; height: 30px; margin-top: 6px; color: var(--deal-strong); }
.dk-deals-wave path { fill: currentColor; }

.dk-deals-body {
    padding: 4px 0 18px;
    background: linear-gradient(180deg, var(--deal-strong) 0, var(--deal-mid) 55%, var(--color-bg) 100%);
}

.dk-timer { display: flex; align-items: center; gap: 6px; direction: ltr; }
.dk-timer span {
    min-width: 40px; height: 40px; padding: 0 4px; border-radius: 10px;
    display: grid; place-items: center;
    background: var(--dk-timer-bg); color: var(--dk-timer-text);
    font-size: 16px; font-weight: 700; box-shadow: 0 2px 10px rgba(0, 0, 0, .10);
}
.dk-timer i { font-style: normal; font-weight: 700; color: var(--deal-title); }

/* تصویر تزئینی */
.dk-deals-art .a-ray { stroke: var(--deal-strong); stroke-width: 3; stroke-linecap: round; fill: none; opacity: .7; }
.dk-deals-art .a-item1 { fill: var(--dk-art-2); stroke: var(--dk-art-ink); stroke-width: 2; }
.dk-deals-art .a-item2 { fill: var(--dk-art-1); stroke: var(--dk-art-ink); stroke-width: 2; }
.dk-deals-art .a-item3 { fill: var(--dk-art-3); stroke: var(--dk-art-ink); stroke-width: 2; }
.dk-deals-art .a-box { fill: var(--deal-strong); stroke: var(--dk-art-ink); stroke-width: 2.5; stroke-linejoin: round; }
.dk-deals-art .a-lid { fill: var(--deal-strong); stroke: var(--dk-art-ink); stroke-width: 2.5; stroke-linejoin: round; filter: brightness(.85); }
.dk-deals-art .a-tag { fill: #ffffff; stroke: var(--dk-art-ink); stroke-width: 2; }
.dk-deals-art .a-tag-text { fill: #0b3b37; font: 700 11px IRANSans, Vazirmatn, sans-serif; }
.dk-deals-art .a-dot { fill: var(--deal-strong); }
.dk-deals-art .a-spark { fill: var(--deal-strong); }

.dk-offgrid {
    display: grid; grid-auto-flow: column; grid-template-rows: auto;
    grid-auto-columns: 168px; gap: 12px; padding: 4px 18px 8px;
}
.dk-offgrid.is-two-rows { grid-template-rows: auto auto; }

.dk-off {
    --off-pad: 10px;
    position: relative; scroll-snap-align: start;
    background: var(--dk-off-card); border-radius: 18px; padding: var(--off-pad);
    display: flex; flex-direction: column;
    transition: transform .18s ease, box-shadow .18s ease;
}
.dk-off:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, .14); }
.dk-off.is-out { opacity: .6; }
.dk-off-link { display: flex; flex-direction: column; gap: 6px; height: 100%; color: var(--color-text); }
.dk-off-thumb { aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; border-radius: 12px; }
.dk-off-thumb img { width: 100%; height: 100%; object-fit: contain; }
.dk-off-badge {
    position: absolute; top: 8px; inset-inline-end: 8px;
    padding: 0 10px; border-radius: 999px; line-height: 24px;
    background: var(--dk-sale); color: var(--dk-sale-text);
    font-size: 13px; font-weight: 700;
}
.dk-off-price { margin-top: auto; display: flex; flex-direction: column; line-height: 1.6; }
.dk-off-price del { color: var(--color-muted); font-size: 12px; }
.dk-off-price b { font-size: 16px; }
.dk-off-price small { font-size: 12px; font-weight: 400; }

.dk-off-add-form { margin: 0; }
/* + روی گوشهٔ پایینِ تصویر؛ ارتفاع تصویر = عرض ستون منهای padding. */
.dk-off-add {
    position: absolute; z-index: 2;
    top: calc(var(--off-pad) + 168px - 2 * var(--off-pad) - 40px);
    inset-inline-start: 6px;
    width: 40px; height: 40px; border-radius: 12px;
    display: grid; place-items: center; cursor: pointer;
    background: var(--dk-off-card); color: var(--deal-strong, var(--color-primary));
    border: 1.5px solid currentColor;
    transition: background .15s ease, color .15s ease;
}
.dk-off-add:hover, .dk-off-add-form.is-added .dk-off-add {
    background: var(--deal-strong, var(--color-primary)); color: #ffffff; border-color: var(--deal-strong, var(--color-primary));
}
.dk-off-add:disabled { opacity: .6; cursor: progress; }

/* کارت پایانی «مشاهده همه» که هر دو طبقه را می‌گیرد. */
.dk-off-more {
    grid-row: 1 / -1; scroll-snap-align: start;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    border-radius: 18px; background: var(--dk-off-card); color: var(--color-text);
    font-size: 14px; font-weight: 700;
}
.dk-off-more-ico {
    width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
    border: 1.5px solid var(--deal-strong); color: var(--deal-strong);
}

/* ---------- کارت محصول در همهٔ فهرست‌ها ---------- */
.product-card { border: 1px solid var(--color-border); transition: box-shadow .18s ease, border-color .18s ease; }
.product-card:hover { border-color: var(--color-primary); }
.product-price b { color: var(--color-text); }
/* تخفیف در همه‌جا (کارت، صفحهٔ محصول، جدول فروشنده‌ها) قرمز است. */
.badge-discount { background: var(--dk-sale); color: var(--dk-sale-text); font-weight: 700; }
/* روی کارت، تخفیف گوشهٔ چپ بالا می‌نشیند (site.css آن را سمت راست می‌گذارد)… */
.product-thumb .badge-discount { inset-inline-start: auto; inset-inline-end: 8px; }
/* …و نشان «اختلاف قیمت هر عدد» که تخفیف نیست، فیروزه‌ای و در گوشهٔ مقابل. */
.product-thumb .badge-unit {
    inset-inline-end: auto; inset-inline-start: 8px;
    background: var(--color-primary); color: var(--color-primary-text);
}
.product-thumb img { object-fit: contain; background: var(--color-surface); }

/* ---------- اعلان افزودن به سبد ---------- */
.dk-toast {
    position: fixed; z-index: 90; inset-inline: 0; margin-inline: auto;
    bottom: calc(var(--fixed-bottom-offset) + 18px);
    width: fit-content; max-width: calc(100vw - 32px);
    padding: 10px 18px; border-radius: 12px;
    background: var(--dk-toast-bg); color: var(--dk-toast-text);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .25); font-size: 13px;
}
.dk-toast.is-error { background: var(--color-error); color: #fff; }
.dk-toast[hidden] { display: none; }

.dk-footer { margin-top: 32px; }

/* صفحهٔ دسته‌بندی موبایل روی دسکتاپ هرگز دیده نمی‌شود. */
.dk-catpage { display: none; }

/* ================= تبلت: فقط نوار دوم جمع‌تر ================= */
@media (max-width: 1100px) {
    .dk-nav-row { gap: 14px; }
    .dk-nav-muted, .dk-nav-row > .dk-nav-sep:last-of-type { display: none; }
    .dk-mega-cols { columns: 3 160px; }
}

/* ================= ۵) موبایل ================= */
@media (max-width: 768px) {
    .dk-header-top { gap: 8px; padding: 10px 12px; }
    .dk-header-nav { display: none; }
    /* لوگو در همان ردیف جستجو می‌ماند تا هدر بلندتر نشود. عرضش سقف دارد تا لوگوی افقیِ پهن
       جعبهٔ جستجو را له نکند؛ بدون لوگو فقط حرف اول نام می‌آید (نام کامل در متن جستجو هست). */
    .dk-brand { font-size: 0; gap: 0; }
    .dk-brand img { height: 40px; width: auto; max-width: 96px; object-fit: contain; border-radius: 10px; }
    .dk-brand-mark { width: 40px; height: 40px; font-size: 18px; }
    .dk-brand b { display: none; }
    body.has-bottom-nav .dk-login,
    body.has-bottom-nav .dk-sep,
    body.has-bottom-nav .dk-cart { display: none; }

    .dk-search {
        flex: 1; height: 48px; border-radius: 999px;
        background: var(--color-surface); border-color: var(--color-border);
    }
    .dk-ph-short { display: none; }
    .dk-ph-long { display: inline; }
    .dk-actions { gap: 4px; }

    .dk-slider { margin-top: 10px; border-radius: 16px; }
    .dk-slider .slide img { height: 170px; }
    /* روی لمسی فلش‌های اسلایدر روی تیتر می‌افتند؛ خودِ اسلایدر هر ۶ ثانیه می‌چرخد. */
    .dk-slider .slider-nav { display: none; }
    .dk-slider .slide-caption { inset-inline-start: 18px; bottom: 16px; }
    .dk-slider .slide-caption b { font-size: 19px; }

    .dk-nav { display: none; }
    .dk-item { flex-basis: 162px; }
    .dk-row { border-radius: 14px; margin: 18px 0; }
    .dk-row-head { padding: 0 12px 8px; }
    .dk-row-head h2 { font-size: 15px; }

    .dk-cat { width: 86px; font-size: 12px; }
    .dk-cat-img { width: 80px; height: 80px; border-radius: 20px; }
    .dk-cat-emoji { font-size: 34px; }

    .dk-deals { border-radius: 18px; margin-inline: -4px; }
    /* در موبایل تصویر کنار عنوان می‌نشیند، نه زیر آن. */
    .dk-deals-head { justify-content: flex-start; gap: 12px; min-height: 96px; padding: 10px 14px 0; }
    .dk-deals-art { position: static; width: 96px; flex: none; margin-bottom: -10px; }
    .dk-deals-title { flex: 1; }
    .dk-deals-title h2 { font-size: 18px; }
    .dk-deals-wave { height: 20px; }
    .dk-timer span { min-width: 34px; height: 34px; font-size: 14px; }
    .dk-offgrid { grid-auto-columns: 150px; padding: 4px 12px 8px; gap: 8px; }
    .dk-off-add { top: calc(var(--off-pad) + 150px - 2 * var(--off-pad) - 40px); }

    /* ---- نوار پایین ---- */
    .dk-bottom-nav { box-shadow: 0 -2px 12px rgba(0, 0, 0, .08); }
    .dk-bottom-nav > a, .dk-bottom-nav > button { color: var(--color-muted); font-size: 11px; gap: 3px; }
    .dk-bottom-nav .bn-icon { line-height: 0; }
    .dk-bottom-nav .dk-ico { width: 24px; height: 24px; }
    .dk-bottom-nav > .is-current,
    .dk-bottom-nav > button[aria-expanded="true"] { color: var(--color-text); font-weight: 700; }
    .dk-bottom-nav > .is-current .dk-ico,
    .dk-bottom-nav > button[aria-expanded="true"] .dk-ico { color: var(--color-primary); stroke-width: 2.2; }

    /* ---- صفحهٔ دسته‌بندی تمام‌صفحه ----
       نوار پایین زیرش دیده می‌ماند (مثل اپ دیجی‌کالا)، پس پس‌زمینهٔ تیرهٔ کشو لازم نیست. */
    body.dk .drawer-backdrop { display: none !important; }
    .dk-catpage {
        position: fixed; inset: 0; bottom: var(--fixed-bottom-offset); z-index: 56;
        display: flex; flex-direction: column; background: var(--color-surface);
    }
    .dk-catpage[hidden] { display: none; }
    .dk-catpage-head {
        display: flex; align-items: center; gap: 6px;
        padding: 10px 10px 10px 12px; border-bottom: 1px solid var(--color-border);
    }
    .dk-catpage-head .dk-search { height: 44px; }

    .dk-catpage-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 100px 1fr; }

    .dk-catpage-side { overflow-y: auto; background: var(--dk-mega-side); border-inline-end: 1px solid var(--color-border); }
    .dk-catpage-side button {
        width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px;
        padding: 14px 6px; border: none; border-bottom: 1px solid var(--color-border);
        background: transparent; color: var(--color-muted);
        font: inherit; font-size: 12px; line-height: 1.7; text-align: center; cursor: pointer;
    }
    .dk-catpage-side button.is-active {
        background: var(--color-surface); color: var(--color-primary); font-weight: 700;
        box-shadow: inset -3px 0 0 var(--color-primary);
    }
    .dk-side-ico { font-size: 22px; line-height: 1; }
    .dk-side-ico img { width: 28px; height: 28px; object-fit: contain; }

    .dk-catpage-main { overflow-y: auto; padding: 14px 12px 24px; }
    .dk-catpanel .dk-all-link { margin-bottom: 6px; }

    .dk-circles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 6px; padding: 10px 0 16px; }
    .dk-circle {
        display: flex; flex-direction: column; align-items: center; gap: 8px;
        text-align: center; font-size: 12px; line-height: 1.6; color: var(--color-text);
    }
    .dk-circle-img {
        width: 76px; height: 76px; border-radius: 50%; overflow: hidden;
        display: grid; place-items: center; background: var(--color-surface-alt); font-size: 30px; line-height: 1;
    }
    .dk-circle-img img { width: 74%; height: 74%; object-fit: contain; }
    .dk-circle-all .dk-ico { width: 30px; height: 30px; color: var(--color-muted); }

    .dk-acc { border-top: 1px solid var(--color-border); }
    .dk-acc summary {
        list-style: none; cursor: pointer;
        display: flex; align-items: center; justify-content: space-between;
        padding: 14px 0; font-weight: 700; font-size: 14px;
    }
    .dk-acc summary::-webkit-details-marker { display: none; }
    .dk-acc summary .dk-ico { width: 20px; height: 20px; transition: transform .2s ease; }
    .dk-acc[open] summary .dk-ico { transform: rotate(180deg); }
}

/* ================= تفاوت‌های «آبی نفتی» با digishop ================= */

/* متن برچسب جعبهٔ تصویرِ بلوک تخفیف (در digishop فیروزه‌ای تیره بود). */
.dk-deals-art .a-tag-text { fill: #0b1020; }

/* دکمهٔ + و «مشاهده همه» در digishop رنگ نوار تخفیف را می‌گیرند؛ این‌جا آن رنگ سرمه‌ایِ
   خیلی تیره است و در تم تیره روی کارت تیره دیده نمی‌شد، پس رنگ اصلیِ هر تم را می‌گیرند. */
.dk-off-add, .dk-off-more-ico { color: var(--color-primary); border-color: var(--color-primary); }
.dk-off-add:hover, .dk-off-add-form.is-added .dk-off-add {
    background: var(--color-primary); color: var(--color-primary-text); border-color: var(--color-primary);
}

/* نام فروشگاه همیشه کنار لوگو؛ نام بلند با «…» تمام می‌شود تا جستجو را تنگ نکند. */
.dk-brand--named { color: var(--color-text); }
.dk-brand--named b { max-width: 220px; overflow: hidden; text-overflow: ellipsis; font-size: 20px; }

@media (max-width: 768px) {
    /* digishop در موبایل نام را پنهان می‌کند؛ این‌جا می‌ماند، کوچک‌تر و با سقف عرض. */
    .dk-brand--named { font-size: 15px; gap: 6px; min-width: 0; flex: 0 1 auto; }
    .dk-brand--named b { display: block; max-width: 92px; font-size: 15px; white-space: nowrap; }
    .dk-brand--named img, .dk-brand--named .dk-brand-mark { flex: none; }
    /* نام کنار لوگو هست، پس متن جستجو کوتاه می‌شود تا در جعبهٔ باریک‌تر جا شود. */
    .dk-ph-short { display: inline; }
    .dk-ph-long { display: none; }
}