/* ============ CSS VARIABLES ============ */
:root {
    /* ─── پالت برند ─── */
    --brand-navy:        #0D1D32;   /* هدر و فوتر */
    --brand-navy-soft:   #16294a;
    --brand-navy-line:   #23385c;
    --brand-sand:        #E9D5C5;   /* بخش‌های مختلف سایت */
    --brand-sand-deep:   #dcc3ae;
    --brand-sand-tint:   #f6ece3;
    --brand-cream:       #FDFBF7;   /* بک‌گراند بادی — شیری، نه خاکستری */
    --brand-cream-alt:   #FAF6F0;

    --color-gold: #c9a227;
    --color-gold-light: #e8c766;
    --color-gold-dark: #8b6914;

    /* ─── پالت رز (تم کودک) ───
       ارغوانی عمیق، نه صورتیِ آب‌نباتی: ویترین مخملی که طلا را قاب می‌گیرد. */
    --brand-plum:        #7B1040;
    --color-rose-light:  #F7B8CE;
    --color-rose-deep:   #BE185D;

    /* ─── تم صفحه (بزرگسال/کودک) ───
       تنها جایی که رنگ پس‌زمینه‌ی تم‌ها تعریف می‌شود. کلاس‌های .theme-adult و
       .theme-child فقط از این متغیرها می‌خوانند، پس تغییر رنگ = تغییر یک خط.
       معادل‌های Python در products/theming.py (فقط برای meta theme-color). */
    /* گرادیان خطی و نرم — سه توقف با اختلاف کم، تا نوارِ (banding) دیده
       نشود و انتقال رنگ ملایم بماند. تیره‌ترین توقف پایین است تا فوترِ
       سرمه‌ای بدون درز به زمینه وصل شود.
       ⚠️ --theme-adult-bg همان توقف بالاست و باید با meta_color در
       products/theming.py یکی بماند (رنگ نوار آدرس موبایل). */
    --theme-adult-bg:    #14263F;
    --theme-adult-mid:   #1B3253;
    --theme-adult-deep:  #0C1B2E;
    --theme-adult-text: #F3F1EC;
    /* ⚠️ ساختار هر دو تم یکسان است: متن روشن روی زمینه، متن تیره داخل کارت سفید.
       رز خاکی و کم‌اشباع — نسخه‌ی قبلی (#8A1A4C) اشباع بالایی داشت و روی
       صفحه‌ی بزرگ سنگین دیده می‌شد. اینجا اشباع پایین آمده و روشنایی کمی
       بالا رفته تا گرادیان خطی نرم‌تر و ملایم‌تر بخوابد.
       متن #FDF2F6 روی توقفِ بالا کنتراست ≈۶ دارد (بالاتر از AA). */
    /* ─── تم کودک: دو صورتیِ درخواستی، گرادیان خطی از روشن به پررنگ ───
       ⚠️ هر دو رنگ روشن‌اند (روشنایی ۰.۵۹ و ۰.۳۵)، پس متنِ روی این تم باید
       **تیره** باشد نه سفید. متن سفید روی #ffb6c1 کنتراست ۱.۶ دارد یعنی
       عملاً نامرئی. به همین دلیل --theme-child-text ارغوانیِ تیره است.
       کنتراست متن روی روشن‌ترین نقطه ۸.۲ و روی پررنگ‌ترین نقطه ۵.۱ است. */
    --theme-child-bg:    #FFF4F7;   /* بالای صفحه — تقریباً سفید */
    --theme-child-mid:   #FFC9DA;   /* میانه — صورتی ملایم */
    --theme-child-deep:  #ff69b4;   /* پایین صفحه — صورتی پررنگ */
    --theme-child-text:  #5A0F2E;

    --radius: 1.25rem;
    --radius-sm: 0.75rem;
    --shadow-card: 0 2px 10px rgba(13, 29, 50, 0.06);
    --shadow-card-hover: 0 18px 40px -12px rgba(13, 29, 50, 0.22);
}


/* ============ GLOBAL ============ */
* {
    -webkit-tap-highlight-color: transparent;
}

html {
    scroll-behavior: smooth;
    /* اسکرول‌بار روی همه صفحات رزرو می‌شود تا هنگام ناوبری صفحه نپرد (کاهش CLS) */
    scrollbar-gutter: stable;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

body {
    font-family: 'Vazirmatn', system-ui, sans-serif;
    background-color: var(--brand-cream);
    color: #1f2937;
    /* جلوگیری از اسکرول افقی روی موبایل وقتی یک المان از عرض بیرون می‌زند */
    overflow-x: hidden;
}

/* بخش‌های محتوایی سایت — رنگ برند */
.section-sand      { background-color: var(--brand-sand); }
.section-sand-tint { background-color: var(--brand-sand-tint); }
.section-cream     { background-color: var(--brand-cream); }
.section-navy      { background-color: var(--brand-navy); color: #f1f5f9; }

/* تصاویر هرگز از کانتینر بیرون نزنند (ریسپانسیو پایه) */
img, video, svg { max-width: 100%; }

/* FONTS */
@font-face {
    font-family: 'Vazirmatn';
    src: url("../fonts/vazirmatn/Vazirmatn-Regular.cdc140628f11.woff2") format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vazirmatn';
    src: url("../fonts/vazirmatn/Vazirmatn-Medium.dd2193b32cbe.woff2") format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vazirmatn';
    src: url("../fonts/vazirmatn/Vazirmatn-Bold.7958481fe611.woff2") format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
/* FONTS */

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--brand-sand-tint); }
::-webkit-scrollbar-thumb { background: var(--brand-sand-deep); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-gold); }

/* ============ ANIMATIONS ============ */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes slideInRight {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes pulse-soft {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
@keyframes priceUpdate {
    0% { transform: scale(1); }
    50% { transform: scale(1.08); color: #22c55e; }
    100% { transform: scale(1); }
}
@keyframes modalFadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

.animate-fadeInUp { animation: fadeInUp 0.6s ease-out forwards; }
.animate-fadeIn { animation: fadeIn 0.4s ease-out forwards; }
.animate-slideInRight { animation: slideInRight 0.5s ease-out forwards; }
.price-updated { animation: priceUpdate 0.4s ease; }

/* Stagger children */
.stagger-children > * { opacity: 0; animation: fadeInUp 0.5s ease-out forwards; }
.stagger-children > *:nth-child(1) { animation-delay: 0.05s; }
.stagger-children > *:nth-child(2) { animation-delay: 0.1s; }
.stagger-children > *:nth-child(3) { animation-delay: 0.15s; }
.stagger-children > *:nth-child(4) { animation-delay: 0.2s; }
.stagger-children > *:nth-child(5) { animation-delay: 0.25s; }
.stagger-children > *:nth-child(6) { animation-delay: 0.3s; }
.stagger-children > *:nth-child(7) { animation-delay: 0.35s; }
.stagger-children > *:nth-child(8) { animation-delay: 0.4s; }

/* ============ FORM ELEMENTS ============ */
.form-input {
    width: 100%;
    padding: 0.875rem 1rem;
    border-radius: var(--radius-sm);
    border: 1.5px solid #e5e7eb;
    background: #fff;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    outline: none;
    font-family: inherit;
    text-align: right;
}
.form-input:focus {
    border-color: var(--color-gold);
    box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.15);
}
.form-input::placeholder { color: #9ca3af; }

.form-select {
    width: 100%;
    padding: 0.875rem 1rem;
    border-radius: var(--radius-sm);
    border: 1.5px solid #e5e7eb;
    background: #fff;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    outline: none;
    font-family: inherit;
    cursor: pointer;
}
.form-select:focus {
    border-color: var(--color-gold);
    box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.15);
}

.form-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.5rem;
}

.form-error {
    color: #ef4444;
    font-size: 0.8rem;
    margin-top: 0.25rem;
}

/* ============ BUTTONS ============ */
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--btn-a), var(--btn-b));
    color: #ffffff;
    font-weight: 600;
    font-size: 0.95rem;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px var(--btn-glow);
    position: relative;
    overflow: hidden;
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px var(--btn-glow);
}
.btn-primary:active { transform: scale(0.98); }
.btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    border-radius: var(--radius-sm);
    background: #f3f4f6;
    color: #374151;
    font-weight: 600;
    font-size: 0.95rem;
    border: 1.5px solid #e5e7eb;
    cursor: pointer;
    transition: all 0.3s ease;
}
.btn-secondary:hover { background: #e5e7eb; }
.btn-secondary:active { transform: scale(0.98); }

.btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-radius: 9999px;
    /* ⚠️ backdrop-filter: blur(10px) برداشته شد و به‌جایش پس‌زمینه کدرتر شد.
       این دکمه روی بنر ویدیویی می‌نشیند؛ بلورِ پس‌زمینه روی یک ویدیوی در
       حال پخش یعنی مرورگر باید برای **هر فریم** دوباره بلور و ترکیب کند.
       با ۲۸٪ سفید، ظاهر عملاً همان است و هزینه صفر. */
    background: rgba(255,255,255,0.28);
    color: white;
    font-weight: 600;
    font-size: 0.85rem;
    border: 1.5px solid rgba(255,255,255,0.35);
    cursor: pointer;
    /* «all» همه‌ی خصوصیت‌ها را زیر نظر می‌گیرد؛ فقط همان‌هایی که عوض می‌شوند */
    transition: background-color 0.3s ease, border-color 0.3s ease;
}
.btn-outline:hover { background: rgba(255,255,255,0.4); border-color: rgba(255,255,255,0.6); }

/* ═══════════════════════════════════════════════════════════
   کارت محصول — طراحی جدید
   ساختار: .product-card > .image-wrapper + .card-body > .card-price-row
   ═══════════════════════════════════════════════════════════ */
.product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #ffffff;
    border: 1px solid rgba(13, 29, 50, 0.07);
    border-radius: 20px;
    overflow: hidden;
    isolation: isolate;
    box-shadow: var(--shadow-card);
    transition: transform .35s cubic-bezier(.4, 0, .2, 1),
                box-shadow .35s cubic-bezier(.4, 0, .2, 1),
                border-color .35s ease;
}

/* قاب طلایی نازک که هنگام هاور روشن می‌شود */
.product-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    background: linear-gradient(140deg,
        var(--color-gold-light) 0%,
        rgba(232, 199, 102, .25) 30%,
        transparent 50%,
        rgba(201, 162, 39, .35) 72%,
        var(--color-gold) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0;
    transition: opacity .45s ease;
    pointer-events: none;
    z-index: 3;
}

/* برق نور که روی تصویر می‌لغزد — حس سطح جواهر */
.product-card .image-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 45%;
    inset-inline-start: -60%;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(100deg,
        transparent 0%,
        rgba(255, 255, 255, .10) 35%,
        rgba(255, 255, 255, .45) 50%,
        rgba(255, 255, 255, .10) 65%,
        transparent 100%);
    transform: skewX(-18deg);
    opacity: 0;
}

@media (hover: hover) {
    .product-card:hover {
        transform: translateY(-8px);
        box-shadow: var(--shadow-card-hover);
        border-color: transparent;
    }

    .product-card:hover::after { opacity: 1; }

    .product-card:hover .image-wrapper img {
        transform: scale(1.08);
    }

    /* سایه‌ی پایین تصویر عمیق‌تر می‌شود تا کارت بُعد بگیرد */
    .product-card:hover .image-wrapper::after {
        background: linear-gradient(to top, rgba(13, 29, 50, .34), transparent);
    }

    .product-card:hover .image-wrapper::before {
        opacity: 1;
        animation: cardSheen .9s cubic-bezier(.25, .6, .3, 1);
    }

    /* نوار قیمت کمی غنی‌تر می‌شود */
    .product-card:hover .card-price-row {
        background: linear-gradient(to top,
            var(--brand-sand-deep) 0%,
            var(--brand-sand) 55%,
            rgba(233, 213, 197, 0) 100%);
    }

    .product-card:hover .card-badge {
        color: var(--brand-navy);
        background: #ffffff;
        border-color: rgba(139, 105, 20, .5);
    }

    .product-card:hover .card-flag {
        background: var(--card-flag-hover);
    }

}

@keyframes cardSheen {
    from { inset-inline-start: -60%; }
    to   { inset-inline-start: 130%; }
}

/* لمسی: بازخورد فشردن به‌جای هاور */
@media (hover: none) {
    .product-card:active {
        transform: scale(.985);
        box-shadow: var(--shadow-card);
    }
}

.product-card:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 3px;
}

/* ─── ناحیه تصویر ─── */
.product-card .image-wrapper {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    flex-shrink: 0;
    background: linear-gradient(160deg, var(--brand-sand-tint), #ffffff 70%);
}

.product-card .image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s cubic-bezier(.4, 0, .2, 1);
}

/* سایه‌ی ملایم پایین تصویر تا بج‌ها و قیمت خوانا بمانند */
.product-card .image-wrapper::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 38%;
    background: linear-gradient(to top, rgba(13, 29, 50, .20), transparent);
    pointer-events: none;
}

.product-card--out .image-wrapper img { filter: grayscale(.55) brightness(.95); }

/* ─── بج‌ها ─── */
.product-card .card-flag {
    position: absolute;
    top: 10px;
    inset-inline-start: 10px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: calc(100% - 20px);
    padding: 5px 10px;
    border-radius: 999px;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #fff;
    background: var(--card-flag-bg);
    /* ⚠️ backdrop-filter: blur(8px) اینجا بود و برداشته شد.
       این بج روی **هر** کارت محصول است — یعنی در صفحه‌ی لیست با ۱۲ کارت و
       دو بج، تا ۲۴ لایه‌ی جداگانه‌ی ترکیب‌بندی که مرورگر باید حین اسکرول
       نگه دارد و به‌روز کند. سودِ بصری‌اش هم تقریباً هیچ بود: پس‌زمینه‌ی بج
       (--card-flag-bg) ۸۲٪ کدر است، پس چیزی از پشتش دیده نمی‌شد که بلور
       شدنش به چشم بیاید. */
    box-shadow: 0 2px 10px rgba(13, 29, 50, .25);
}

/* بج دسته روی کارت کودکان — حالت عادی و هاور کنار هم تعریف می‌شوند
   تا تغییر پالت فقط یک‌جا لازم باشد. */


.product-card .card-flag--discount {
    inset-inline-start: auto;
    inset-inline-end: 10px;
    color: #fff;
    background: linear-gradient(135deg, #f43f5e, #e11d48);
    box-shadow: 0 2px 12px rgba(225, 29, 72, .4);
}

/* بج وضعیت (ناموجود / پیش‌فروش) */
.product-card .card-status {
    position: absolute;
    top: 44px;
    inset-inline-start: 10px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: .62rem;
    font-weight: 800;
    color: #fff;
    white-space: nowrap;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
}
.product-card .card-status--out      { background: linear-gradient(135deg, #ef4444, #b91c1c); }
.product-card .card-status--preorder { background: linear-gradient(135deg, #a855f7, #7e22ce); }

/* ─── بدنه ─── */
.product-card .card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 6px;
    padding: 12px 12px 0;
}

.product-card .card-category {
    font-size: .66rem;
    font-weight: 600;
    color: var(--on-surface-subtle);
    letter-spacing: .01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 1.1em;          /* جای ثابت، حتی وقتی متن کوتاه است */
}

.product-card .card-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
    font-size: clamp(.82rem, 2.4vw, .95rem);
    font-weight: 700;
    line-height: 1.55;
    color: var(--on-surface);
    transition: color .25s ease;
}

@media (hover: hover) {
    .product-card:hover .card-name { color: var(--card-badge); }
}

.product-card--out .card-name { color: #64748b; }

/* ─── نوار قیمت (رنگ برند) ─── */
.product-card .card-price-row {
    margin-top: auto;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px 12px;
    background: linear-gradient(to top, var(--card-foot-a) 0%, var(--card-foot-b) 60%, transparent 100%);
    border-top: 1px solid var(--surface-line);
}

.product-card .price-stack {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.price-tag { font-weight: 700; letter-spacing: -.02em; }

.price-old {
    text-decoration: line-through;
    color: #9ca3af;
    font-size: .85em;
}

.product-card .price-old {
    font-size: .68rem;
    font-weight: 600;
    color: var(--on-surface-subtle);
    white-space: nowrap;
}

.product-card .price-new {
    display: flex;
    align-items: baseline;
    gap: 3px;
    font-size: clamp(.88rem, 3vw, 1.05rem);
    font-weight: 800;
    color: var(--card-price);
    white-space: nowrap;
    min-width: 0;
}

.product-card .price-new .price-unit {
    font-size: .68rem;
    font-weight: 600;
    color: var(--on-surface-muted);
}

.product-card--out .price-new { color: #dc2626; }

/* بج وزن / تازه */
.product-card .card-badge {
    flex-shrink: 0;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
    white-space: nowrap;
    color: var(--card-badge);
    background: rgba(255, 255, 255, .85);
    border: 1px solid color-mix(in srgb, var(--card-badge) 30%, transparent);
}

.product-card .card-badge--alert {
    color: #b91c1c;
    background: rgba(255, 255, 255, .9);
    border-color: rgba(185, 28, 28, .3);
}

/* موبایل کوچک — دو ستونه بدون سرریز */
@media (max-width: 400px) {
    .product-card { border-radius: 16px; }
    .product-card .card-body { padding: 10px 10px 0; }
    .product-card .card-price-row { padding: 8px 10px 10px; gap: 5px; }
    .product-card .card-badge { padding: 3px 7px; font-size: .62rem; }
    .product-card .price-new { font-size: .84rem; }
    .product-card .price-new .price-unit { font-size: .6rem; }
}


/* ═══════════════════════════════════════════════════════════
   پنل اعلان‌ها (ادمین)
   کلاس‌های notif-item / unread / removing قبلاً هیچ استایلی نداشتند.
   ═══════════════════════════════════════════════════════════ */
/* ⚠️ بدون انیمیشن باز/بسته شدن — عمدی.
   پنل قبلاً با notifPanelIn باز می‌شد و هم‌زمان هر آیتم با notifItemIn
   جداگانه فید می‌شد؛ با ۲۰ اعلان یعنی ۲۰ انیمیشن هم‌زمان روی یک لیست
   اسکرول‌شونده که روی موبایل کاملاً به‌صورت لگ دیده می‌شد.
   حالا پنل بلافاصله ظاهر و ناپدید می‌شود. */
#notificationDropdown {
    box-shadow: 0 24px 60px -12px rgba(0, 0, 0, .55);
}

#notificationList {
    scrollbar-width: thin;
    scrollbar-color: rgba(232, 199, 102, .35) transparent;
}
#notificationList::-webkit-scrollbar-track { background: transparent; }
#notificationList::-webkit-scrollbar-thumb { background: rgba(232, 199, 102, .3); }

.notif-item {
    position: relative;
    border-bottom: 1px solid rgba(52, 61, 92, .55);
}

.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: rgba(255, 255, 255, .04); }

/* نوار طلایی سمت راست + پس‌زمینه‌ی ملایم برای اعلان خوانده‌نشده */
.notif-item.unread {
    background: linear-gradient(to left, rgba(232, 199, 102, .09), transparent 65%);
}

.notif-item.unread::before {
    content: '';
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 3px;
    background: linear-gradient(to bottom, var(--color-gold-light), var(--color-gold-dark));
}

/* نقطه‌ی «جدید» */
.notif-item .notif-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--color-gold-light);
    box-shadow: 0 0 0 3px rgba(232, 199, 102, .18);
    flex-shrink: 0;
}
.notif-item:not(.unread) .notif-dot { display: none; }

/* حذف: فقط غیرفعال‌سازی کلیک تا پاسخ سرور برسد — بدون انیمیشن */
.notif-item.removing {
    opacity: .45;
    pointer-events: none;
}

.notif-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    padding: 2.75rem 1rem;
    text-align: center;
    color: #b9ae95;
}

/* بج شمارنده روی زنگ — بدون انیمیشن pop */

/* ═══════════════════════════════════════════════════════════
   فوتر سراسری (#0D1D32)
   ═══════════════════════════════════════════════════════════ */
.site-footer {
    position: relative;
    background: linear-gradient(180deg, #0D1D32 0%, #0a1728 100%);
    color: #cbd5e1;
    padding-bottom: 5rem;                 /* جا برای منوی پایین موبایل */
}

@media (min-width: 768px) {
    .site-footer { padding-bottom: 0; }
}

/* خط طلایی نازک بالای فوتر */
.site-footer::before {
    content: '';
    position: absolute;
    top: 0;
    inset-inline: 0;
    height: 2px;
    background: linear-gradient(to left, transparent, var(--color-gold), var(--color-gold-light), var(--color-gold), transparent);
}

.site-footer .footer-heading {
    position: relative;
    margin-bottom: 1rem;
    padding-bottom: .55rem;
    font-size: .875rem;
    font-weight: 800;
    color: #ffffff;
}

.site-footer .footer-heading::after {
    content: '';
    position: absolute;
    bottom: 0;
    inset-inline-start: 0;
    width: 32px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(to left, var(--color-gold-light), var(--color-gold-dark));
}

/* ─── شبکه‌های اجتماعی روی موبایل ───
   زیر lg ستون‌های فوتر زیر هم می‌آیند و این بلوک تمام‌عرض می‌شود؛ چون
   شبکه‌ها max-w-sm دارند، بدون این قاعده چسبیده به لبه‌ی راست می‌ماندند.
   خطِ طلاییِ زیر عنوان هم با inset-inline-start:0 به راست چسبیده بود، پس
   جداگانه وسط‌چین می‌شود. */
@media (max-width: 1023px) {
    .site-footer .footer-social { text-align: center; }

    .site-footer .footer-social > .grid {
        margin-inline: auto;
    }

    .site-footer .footer-social .footer-heading::after {
        inset-inline-start: 50%;
        transform: translateX(50%);   /* RTL: جبران جهت */
    }

    /* متن داخل هر کانال راست‌چین می‌ماند تا کنار آیکونش بنشیند */
    .site-footer .footer-social .footer-channel { text-align: start; }
}

.site-footer .footer-link {
    display: inline-block;
    font-size: .83rem;
    color: #9fb0c9;
    transition: color .25s ease, transform .25s ease;
}

.site-footer .footer-link:hover {
    color: var(--color-gold-light);
    transform: translateX(-3px);          /* RTL: حرکت به سمت داخل */
}

/* ─── کارت راه ارتباطی (اینستاگرام / تلگرام / واتساپ / بله / تماس) ─── */
.site-footer .footer-channel {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-width: 0;
    padding: .6rem .7rem;
    border-radius: 14px;
    background: #343D5C;                       /* رنگ برند */
    border: 1px solid rgba(255, 255, 255, .07);
    transition: background-color .25s ease, border-color .25s ease, transform .25s ease;
}

.site-footer .footer-channel:hover {
    background: #3d476b;
    border-color: rgba(232, 199, 102, .38);
    transform: translateY(-2px);
}

.site-footer .footer-channel__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 10px;
    color: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .28);
}

.site-footer .footer-channel__icon svg {
    width: 17px;
    height: 17px;
}

.site-footer .footer-channel__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.35;
}

/* ─── ردیف‌های تماس (تلفن فروشگاه / مشاوره و خرید) ───
   برچسب و شماره در یک خط، با فاصله‌ی کامل بین‌شان — نه زیر هم.
   flex:1 روی ظرف لازم است وگرنه space-between فضایی برای توزیع ندارد. */
.site-footer .footer-channel--contact .footer-channel__text {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex: 1;
}

/* شماره روی موبایل نباید شکسته شود؛ برچسب در صورت کمبود جا کوتاه می‌شود */
.site-footer .footer-channel--contact .footer-channel__label {
    white-space: nowrap;
}
.site-footer .footer-channel--contact .footer-channel__value {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.site-footer .footer-channel__label {
    font-size: .78rem;
    font-weight: 700;
    color: #ffffff;
}

.site-footer .footer-channel__value {
    font-size: .68rem;
    color: #9fb0c9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ─── نقشه ─── */
.site-footer .footer-map {
    position: relative;
    height: 200px;
    border-radius: 16px;
    overflow: hidden;
    background: #343D5C;                       /* رنگ برند */
    border: 1px solid rgba(232, 199, 102, .18);
}

.site-footer .footer-map__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.site-footer .footer-map__pin {
    position: absolute;
    top: 38%;
    inset-inline-start: 50%;
    transform: translate(50%, -50%);      /* RTL-safe */
    display: flex;
    align-items: center;
    justify-content: center;
}

.site-footer .footer-map__ping {
    position: absolute;
    width: 48px;
    height: 48px;
    border-radius: 999px;
    background: rgba(232, 199, 102, .18);
    animation: footerPing 2s cubic-bezier(0, 0, .2, 1) infinite;
}

@keyframes footerPing {
    0%   { transform: scale(.5); opacity: .9; }
    100% { transform: scale(1.6); opacity: 0; }
}

.site-footer .footer-map__dot {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    color: var(--brand-navy);
    background: linear-gradient(135deg, #ffd34d, #ffb800);
    box-shadow: 0 6px 18px rgba(255, 184, 0, .45);
}

.site-footer .footer-map__dot svg { width: 16px; height: 16px; }

.site-footer .footer-map__overlay {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .75rem .85rem;
    background: linear-gradient(to top, rgba(30, 36, 58, .96), rgba(52, 61, 92, .72) 60%, transparent);
}

.site-footer .footer-map__address {
    font-size: .72rem;
    line-height: 1.6;
    color: #cbd5e1;
    min-width: 0;
}

.site-footer .footer-map__btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    flex-shrink: 0;
    padding: .5rem .85rem;
    border-radius: 10px;
    font-size: .75rem;
    font-weight: 700;
    color: var(--brand-navy);
    background: linear-gradient(135deg, #ffd34d, #ffb800);
    box-shadow: 0 4px 14px rgba(255, 184, 0, .35);
    transition: transform .25s ease, box-shadow .25s ease;
}

.site-footer .footer-map__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 184, 0, .5);
}

@media (max-width: 420px) {
    .site-footer .footer-map { height: 180px; }
    .site-footer .footer-map__overlay { flex-direction: column; align-items: stretch; }
    .site-footer .footer-map__btn { justify-content: center; }
}

/* ============ SWIPER CUSTOM ============ */
.swiper-pagination-bullet {
    background: #fff;
    opacity: .5;
    width: 6px;
    height: 6px;
    transition: all .3s ease;
}

.swiper-pagination-bullet-active {
    background:#facc15!important;
    opacity: 1;
    width: 20px;
    height: 6px;
    border-radius: 5px;
}

.swiper-button-next,
.swiper-button-prev {
    width: 34px !important;
    height: 34px !important;
    color: white;
    background: rgba(0,0,0,.35);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 9999px;
    top: 50% !important;
    margin-top: 0 !important;
}

.swiper-button-next:after,
.swiper-button-prev:after {
    font-size: 14px !important;
    font-weight: bold;
}

@media (max-width:640px) {
    .swiper-button-next,
    .swiper-button-prev {
        width: 26px !important;
        height: 26px !important;
    }
    .swiper-button-next:after,
    .swiper-button-prev:after {
        font-size: 11px !important;
    }

}

/* ============ CATEGORIES ============ */
/*
  کارت دسته‌بندی.

  ⚠️ نسبت ثابت ۴:۵ به‌جای min-height.
  قبلاً کارت روی دسکتاپ حدود ۶۲۸×۴۲۰ (افقی) و روی موبایل ۱۸۰×۲۸۰ (عمودی)
  می‌شد. هیچ فایلی نمی‌توانست همزمان به هر دو بخورد، پس `cover` در یکی از
  دو حالت حتماً سوژه را می‌بُرید — همان «عکس را بد نشان می‌دهد».
  حالا کادر در همه‌ی اندازه‌ها ۴:۵ است و سرور هم تصویر را دقیقاً ۴:۵ ذخیره
  می‌کند (CATEGORY_IMAGE_RATIO در core/media.py)، پس برشی باقی نمی‌ماند.
  ⚠️ اگر این نسبت عوض شد، آن ثابت هم باید عوض شود.
*/
.cat-card {
    aspect-ratio: 4 / 5;
    border-radius: clamp(18px, 3.4vw, 26px);
    isolation: isolate;
    transition: transform 260ms cubic-bezier(.2,.7,.2,1), box-shadow 260ms ease;
}

.cat-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 30%;
    display: block;
    z-index: 0;
}

/* گرادیانت خوانایی — از پایین تیره، بالا شفاف */
.cat-card__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

/* لایه‌ی رنگیِ تم — ملایم و فقط برای هویت بصری */
.cat-card__tint {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    mix-blend-mode: soft-light;
}

.cat-card__body {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 2.4vw, 18px);
    padding: clamp(16px, 3.4vw, 26px) clamp(14px, 3vw, 24px) clamp(14px, 2.8vw, 22px);
}

.cat-card__badge {
    align-self: flex-start;
    font-size: clamp(10.5px, 2.4vw, 12px);
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 5px 11px;
    border-radius: 999px;
    /* ⚠️ بدون backdrop-filter: این بج روی هر کارت است و کاربر حین اسکرول
       از رویش رد می‌شود؛ بلورِ پس‌زمینه هر فریم بازمحاسبه می‌شد. */
}

.cat-card__title {
    margin: 0;
    font-size: clamp(21px, 5vw, 31px);
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.01em;
}

.cat-card__desc {
    margin: 0;
    font-size: clamp(12.5px, 2.9vw, 15px);
    line-height: 1.55;
    text-wrap: pretty;
    max-width: 34ch;
}

.cat-card__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(6px, 1.6vw, 10px);
    height: clamp(44px, 9vw, 52px);
    border-radius: clamp(12px, 2.4vw, 16px);
    font-size: clamp(13.5px, 3.1vw, 16px);
    font-weight: 700;
    background: #fff;
    transition: background 200ms ease;
}

/* ─── تم بزرگسال ─── */
.cat-card--adult {
    background: linear-gradient(160deg, #1D2748, #0E1428);
    box-shadow: 0 1px 2px rgba(10,16,40,0.18), 0 18px 40px -18px rgba(10,16,40,0.55);
}
.cat-card--adult .cat-card__scrim {
    background: linear-gradient(to top,
        rgba(11,17,40,0.95) 0%, rgba(17,26,58,0.72) 30%,
        rgba(27,40,82,0.28) 55%, rgba(27,40,82,0) 75%);
}
.cat-card--adult .cat-card__tint {
    background: linear-gradient(to top, rgba(60,90,170,0.22), rgba(255,255,255,0) 50%);
}
.cat-card--adult .cat-card__badge {
    color: #E6ECFA;
    background: rgba(255,255,255,0.16);
    border: 1px solid rgba(255,255,255,0.28);
}
.cat-card--adult .cat-card__title { text-shadow: 0 2px 14px rgba(5,10,30,0.45); }
.cat-card--adult .cat-card__desc  { color: #D5DEF2; }
.cat-card--adult .cat-card__cta {
    color: #0E1428;
    box-shadow: 0 6px 18px -6px rgba(5,10,30,0.6);
}

/* ─── تم کودک ─── */
.cat-card--child {
    background: linear-gradient(160deg, #F7DCE6, #EFC3D5);
    box-shadow: 0 1px 2px rgba(120,40,70,0.10), 0 18px 40px -18px rgba(150,50,90,0.35);
}
.cat-card--child .cat-card__scrim {
    background: linear-gradient(to top,
        rgba(124,24,63,0.92) 0%, rgba(168,50,97,0.62) 28%,
        rgba(196,86,130,0.18) 52%, rgba(255,255,255,0) 72%);
}
.cat-card--child .cat-card__tint {
    background: linear-gradient(to top, rgba(255,214,231,0.28), rgba(255,255,255,0) 45%);
}
.cat-card--child .cat-card__badge {
    color: #FFF0F6;
    background: rgba(255,255,255,0.20);
    border: 1px solid rgba(255,255,255,0.34);
}
.cat-card--child .cat-card__title { text-shadow: 0 2px 14px rgba(90,10,40,0.35); }
.cat-card--child .cat-card__desc  { color: #FFE8F1; }
.cat-card--child .cat-card__cta {
    color: #7C183F;
    box-shadow: 0 6px 18px -6px rgba(80,10,40,0.5);
}

/* ─── هاور ───
   ⚠️ فقط روی دستگاهی که واقعاً hover دارد. روی لمسی، :hover بعد از tap
   می‌چسبد و کارت تا tap بعدی بالا می‌ماند. */
@media (hover: hover) {
    .cat-card:hover { transform: translateY(-4px); }
    .cat-card--adult:hover {
        box-shadow: 0 2px 4px rgba(10,16,40,0.2), 0 30px 60px -20px rgba(10,16,40,0.65);
    }
    .cat-card--child:hover {
        box-shadow: 0 2px 4px rgba(120,40,70,0.12), 0 30px 60px -20px rgba(150,50,90,0.45);
    }
    .cat-card--adult:hover .cat-card__cta { background: #E6ECFA; }
    .cat-card--child:hover .cat-card__cta { background: #FFF0F6; }
}

@media (prefers-reduced-motion: reduce) {
    .cat-card, .cat-card:hover { transform: none; transition: none; }
}

/* ═══════════════════════════════════════════════════════════
   THEME SYSTEM — قرارداد توکن
   ═══════════════════════════════════════════════════════════
   هر تم فقط **مقدار** توکن‌ها را می‌دهد؛ قواعد زیر مشترک‌اند و هیچ رنگی
   داخلشان هاردکد نیست. افزودن تم جدید =
       ۱) یک بلوک .theme-<name> با همین نام توکن‌ها،
       ۲) یک ورودی در products/theming.py.
   هیچ قاعده‌ی CSS جدید و هیچ تغییری در تمپلیت‌ها لازم نیست.

   نقش توکن‌ها:
     --page-*        زمینه‌ی صفحه (سطحِ تم)
     --ink*          متنی که **مستقیماً** روی سطح تم می‌نشیند
     --accent*       رنگ تاکیدی تم (طلا برای بزرگسال، رز برای کودک)
     --on-surface*   متن داخل «سطح روشن» (کارت/باکس سفید) — همیشه تیره
     --card-*        نوار قیمت و بج دسته روی کارت محصول

   ⚠️ قاعده‌ی بنیادی — تنها چیزی که باید رعایت شود:
   هر دو تم زمینه‌ی **تیره** دارند، پس متنِ روی زمینه روشن است و متنِ داخل
   کارتِ سفید تیره. به‌جای لیست شکننده‌ی :not()، خودِ «سطح روشن» توکن ink را
   دوباره تعریف می‌کند و ارث‌بری CSS بقیه را انجام می‌دهد.
   ⇒ یک قاعده‌ی واحد مثل color: var(--ink) هم روی زمینه و هم داخل کارت درست است.

   نسبت کنتراست همه‌ی جفت‌های زیر ≥ ۴.۵ (WCAG AA) سنجیده شده است. */

/* ─── پیش‌فرض: صفحاتی که تم ندارند (زمینه‌ی کرم، متن سرمه‌ای) ─── */
:root {
    --ink:            var(--brand-navy);
    --ink-muted:      rgba(13, 29, 50, .66);
    --ink-subtle:     rgba(13, 29, 50, .48);
    --accent:         var(--color-gold-dark);
    --accent-ink:     #ffffff;
    --line:           rgba(13, 29, 50, .12);

    --on-surface:        var(--brand-navy);
    --on-surface-muted:  rgba(13, 29, 50, .62);
    --on-surface-subtle: rgba(13, 29, 50, .45);
    --surface-line:      rgba(13, 29, 50, .10);

    --btn-a:    #8b6914;
    --btn-b:    #6d520f;
    --btn-glow: rgba(139, 105, 20, .35);
}

/* ─── تم بزرگسال — ویترین سرمه‌ای، تاکید طلا ─── */
.theme-adult {
    --page-bg:      var(--theme-adult-bg);
    --page-mid:     var(--theme-adult-mid);
    --page-deep:    var(--theme-adult-deep);
    --page-glow-a:  rgba(201, 162, 39, .07);

    --ink:          var(--theme-adult-text);
    --ink-muted:    rgba(243, 241, 236, .72);
    --ink-subtle:   rgba(243, 241, 236, .58);
    --accent:       var(--color-gold-light);
    --accent-ink:   var(--brand-navy);
    --line:         rgba(255, 255, 255, .14);

    --on-surface:        var(--brand-navy);
    --on-surface-muted:  rgba(13, 29, 50, .62);
    --on-surface-subtle: rgba(13, 29, 50, .45);
    --surface-line:      rgba(13, 29, 50, .10);

    --btn-a:    #8b6914;
    --btn-b:    #6d520f;
    --btn-glow: rgba(139, 105, 20, .40);
}

/* ─── تم کودک — همان ویترین، مخملِ ارغوانی، تاکید رز ─── */
.theme-child {
    --page-bg:      var(--theme-child-bg);
    --page-mid:     var(--theme-child-mid);
    --page-deep:    var(--theme-child-deep);
    --page-glow-a:  rgba(247, 184, 206, .09);

    /* ⚠️ برخلاف تم بزرگسال، اینجا متن **تیره** است چون زمینه صورتیِ روشن
       است. تاکید هم ارغوانیِ برند است نه رز روشن (رز روشن روی صورتی
       کنتراست کافی ندارد). */
    --ink:          var(--theme-child-text);
    --ink-muted:    rgba(90, 15, 46, .78);
    --ink-subtle:   rgba(90, 15, 46, .60);
    --accent:       var(--brand-plum);
    --accent-ink:   #ffffff;
    --line:         rgba(90, 15, 46, .18);

    --on-surface:        var(--brand-plum);
    --on-surface-muted:  rgba(123, 16, 64, .66);
    --on-surface-subtle: rgba(123, 16, 64, .50);
    --surface-line:      rgba(123, 16, 64, .12);

    --btn-a:    #c9376c;
    --btn-b:    #9d1049;
    --btn-glow: rgba(190, 24, 93, .40);
}

/* ─── زمینه‌ی صفحه ───
   حوضچه‌ی نور از بالا (محصول در روشن‌ترین ناحیه می‌نشیند) و ته‌رنگ تاکیدی در
   گوشه‌ی پایین، تا صفحه تخت نباشد. fixed تا با اسکرول کشیده نشود. */
.theme-adult,
.theme-child {
    background-color: var(--page-bg);
    /* گرادیان خطیِ ملایم به‌جای دو حوضچه‌ی رادیال.
       رادیال‌ها لکه‌ی روشن مشخصی وسط صفحه می‌ساختند که با اسکرول ثابت
       می‌ماند و روی صفحه‌های بلند تکه‌تکه دیده می‌شد. حالا یک انتقال آرام
       از بالا به پایین است، به‌علاوه‌ی یک ته‌رنگ طلایی/رز بسیار کم‌رنگ که
       فقط عمق می‌دهد و خودش دیده نمی‌شود. */
    background-image:
        linear-gradient(180deg,
            var(--page-glow-a) 0%,
            transparent 55%),
        linear-gradient(168deg,
            var(--page-bg)   0%,
            var(--page-mid)  46%,
            var(--page-deep) 100%);
    background-attachment: fixed;
    background-repeat: no-repeat;
    color: var(--ink);
    transition: background-color .3s ease;
}

/* تم کودک گرادیان اختصاصی ندارد: همان قاعده‌ی خطیِ مشترک بالا از
   --page-bg → --page-mid → --page-deep استفاده می‌کند، یعنی
   #FFF4F7 → #FFC9DA → #ff69b4 (سفید در بالا، صورتی پررنگ در پایین). */

/* ─── «سطح روشن» ───
   هر عنصری که پس‌زمینه‌ی روشنِ خودش را دارد. با تعریف مجدد ink، تمام قواعدی
   که از var(--ink) می‌خوانند داخل این عناصر خودبه‌خود تیره می‌شوند.
   ⚠️ [class~="bg-white"] عمداً ~= است نه *= : با *= کلاس‌های نیمه‌شفافِ
   bg-white/10 (که روی هدر تیره می‌نشینند) هم «سطح روشن» حساب می‌شدند و
   متنشان تیره روی تیره می‌شد. */
.light-surface,
.product-card,
.box,
.card,
.auth-card,
.qty-stepper,
.spec-chip,
[class~="bg-white"] {
    --ink:        var(--on-surface);
    --ink-muted:  var(--on-surface-muted);
    --ink-subtle: var(--on-surface-subtle);
    --line:       var(--surface-line);
}

/* ─── «سطح تیره» — قرینه‌ی قاعده‌ی بالا ───
   منوی پایین موبایل زمینه‌ی سرمه‌ای خودش را دارد و مستقل از تم صفحه است،
   درست مثل هدر و فوتر.
   ⚠️ بدون این قاعده، در تم کودک که --ink تیره است (چون زمینه‌ی صفحه صورتیِ
   روشن است)، کلاس‌های text-gray-* داخل این منو به همان ارغوانیِ تیره نگاشته
   می‌شدند و آیکون‌ها روی سرمه‌ای تقریباً ناخوانا دیده می‌شدند.
   حالا مثل تم بزرگسال روشن‌اند، در هر تمی. */
.dark-surface,
.dark-nav {
    --ink:        #F3F1EC;
    --ink-muted:  rgba(243, 241, 236, .74);
    --ink-subtle: rgba(243, 241, 236, .62);
    --line:       rgba(255, 255, 255, .12);
}

/* ─── متن روی سطح تم ───
   تمپلیت‌ها ده‌ها کلاس خاکستریِ Tailwind دارند که روی زمینه‌ی تیره نامرئی
   می‌شوند. اینجا به توکن وصل می‌شوند: داخل کارت سفید تیره می‌مانند (چون ink
   آنجا دوباره تعریف شده) و روی زمینه‌ی تم روشن می‌شوند. */
.theme-adult :is(h1, h2, h3, h4, h5),
.theme-child :is(h1, h2, h3, h4, h5) { color: var(--ink); }

.theme-adult :is(.text-gray-900, .text-gray-800, .text-gray-700),
.theme-child :is(.text-gray-900, .text-gray-800, .text-gray-700) { color: var(--ink); }

.theme-adult :is(.text-gray-600, .text-gray-500),
.theme-child :is(.text-gray-600, .text-gray-500) { color: var(--ink-muted); }

.theme-adult .text-gray-400,
.theme-child .text-gray-400 { color: var(--ink-subtle); }

.theme-adult :is(.border-gray-200, .border-gray-100),
.theme-child :is(.border-gray-200, .border-gray-100) { border-color: var(--line); }

/* ─── هدر صفحه‌ی دسته‌بندی ─── */
.category-hero {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, .07), transparent);
}
.category-hero__title { color: var(--ink); }
.category-hero__desc  { color: var(--ink-muted); }

/* هاله‌های پس‌زمینه و آیکون هدر — رنگ از تاکیدِ تم می‌آید، نه از کلاس تمپلیت */
.category-hero__orb      { background-color: var(--accent); }
.category-hero__icon     { background-color: color-mix(in srgb, var(--accent) 14%, transparent); }
.category-hero__icon svg { color: var(--accent); }

/* شمارنده‌ی تعداد محصول */
.category-count {
    color: var(--accent);
    background-color: color-mix(in srgb, var(--accent) 12%, transparent);
    border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}

/* ─── مسیر راهنما (breadcrumb) ─── */
.breadcrumb-text    { color: var(--ink-muted); }
.breadcrumb-link    { color: var(--ink-muted); transition: color .2s ease; }
.breadcrumb-link:hover { color: var(--accent); }
.breadcrumb-current { color: var(--accent); }

/* ─── حالت خالی (محصولی یافت نشد) ─── */
.empty-state { color: var(--ink-muted); }

/* ─── چیپ‌های مشخصات فنی (وزن، اجرت، سود، مالیات، وضعیت) ───
   روی زمینه‌ی تیره شیشه‌ای می‌شوند تا از زمینه جدا دیده شوند. */
.spec-chip {
    background: rgba(13, 29, 50, .04);
    border-color: rgba(13, 29, 50, .10);
}
.spec-chip__label { color: var(--ink-muted); }
.spec-chip__value { color: var(--ink); }

.theme-adult .spec-chip,
.theme-child .spec-chip {
    background: rgba(255, 255, 255, .09);
    border-color: rgba(255, 255, 255, .20);
    --ink:       #ffffff;
    --ink-muted: rgba(255, 255, 255, .78);
}

/* ─── کارت محصول ───
   کارت روی هر دو تم سفید می‌ماند (جواهر در حوضچه‌ی نور)؛ فقط ته‌رنگ نوار
   قیمت و بجِ دسته از تم می‌آید. کلاس .product-card--<theme> را تمپلیت کارت
   از روی دسته‌ی خودِ محصول می‌گذارد، پس در لیست‌های ترکیبی هم درست است. */
.product-card {
    --card-foot-a:  var(--brand-sand);
    --card-foot-b:  var(--brand-sand-tint);
    --card-flag-bg:    rgba(13, 29, 50, .82);
    --card-flag-hover: var(--brand-navy);
    --card-price:      var(--brand-navy);
    --card-badge:      var(--color-gold-dark);
}

.product-card--child {
    --card-foot-a:  #fbe2ea;
    --card-foot-b:  #fdf1f5;
    --card-flag-bg:    rgba(123, 16, 64, .85);
    --card-flag-hover: var(--color-rose-deep);
    --card-price:      var(--color-rose-deep);
    --card-badge:      var(--color-rose-deep);

    --on-surface:        var(--brand-plum);
    --on-surface-muted:  rgba(123, 16, 64, .66);
    --on-surface-subtle: rgba(123, 16, 64, .50);
    --surface-line:      rgba(123, 16, 64, .12);
    --ink:        var(--on-surface);
    --ink-muted:  var(--on-surface-muted);
    --ink-subtle: var(--on-surface-subtle);
}

.theme-child .product-card { border-color: rgba(123, 16, 64, .12); }

/* ─── جعبه‌ی قیمت صفحه‌ی محصول ─── */
#product-price-box .price-meta { color: var(--ink-muted); }
#product-price-box .price-note { color: var(--ink-subtle); }

/* ─── استپر تعداد ─── */
.qty-stepper {
    background: #ffffff;
    border-color: var(--surface-line);
}
.qty-stepper:hover  { border-color: var(--accent); }
.qty-stepper input  { color: var(--on-surface); }
.qty-stepper button { color: var(--on-surface-muted); }
.qty-stepper button:hover {
    background: color-mix(in srgb, var(--on-surface) 6%, transparent);
    color: var(--on-surface);
}

/* ─── تامب‌نیل رسانه ─── */
.media-thumb {
    background: #ffffff;
    border-color: var(--surface-line);
}
.media-thumb:hover        { border-color: var(--accent); }
.media-thumb.active-thumb { border-color: var(--accent); }

/* ─── صفحه‌ی جزئیات محصول ───
   همه‌ی رنگ‌ها از توکن تم می‌آیند؛ تمپلیت فقط کلاس معنایی می‌گذارد.
   قبلاً هر کدام از این‌ها یک شاخه‌ی {% if is_child_theme %} با رنگ هاردکد بود. */

/* قاب تصویر اصلی و تامب‌نیل‌ها — «سطح روشن» روی زمینه‌ی تیره */
.media-frame {
    background: #ffffff;
    border-color: var(--surface-line);
}
.media-frame__placeholder    { color: var(--on-surface-subtle); }
.media-frame__placeholder-bg { background: color-mix(in srgb, var(--on-surface) 8%, #ffffff); }
.media-thumb__more-icon      { color: var(--on-surface); }

/* بالانویس دسته‌بندی */
.eyebrow      { color: var(--accent); }
.eyebrow__dot { background-color: var(--accent); }

/* توضیح کوتاه زیر عنوان */
.lede { color: var(--ink-muted); }

/* باکس توضیح محصولات نگین‌دار — سطح شیشه‌ای روی زمینه‌ی تم */
.note-box {
    background: rgba(255, 255, 255, .07);
    border-color: var(--line);
}
.note-box__icon  { color: var(--accent); }
.note-box__title { color: var(--ink); }
.note-box__text  { color: var(--ink-muted); }
.note-box__em    { color: var(--accent); }

/* قیمت اصلی — روی زمینه‌ی تیره با رنگ تاکیدی تم می‌درخشد
   (قبلاً سرمه‌ای روی سرمه‌ای بود، یعنی عملاً نامرئی) */
.price-hero        { color: var(--accent); }
.price-hero__unit  { color: var(--ink-muted); }
.price-was         { color: var(--ink-subtle); }

/* ─── صفحه‌بندی ─── */
.page-link {
    background: #ffffff;
    color: var(--on-surface);
    border: 1px solid var(--surface-line);
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.page-link:hover {
    border-color: var(--accent);
    color: var(--accent-ink);
    background: var(--accent);
}
.page-current {
    background: var(--accent);
    color: var(--accent-ink);
}

/* ============ TOAST ============ */

/* ===== BANNER GLASS ===== */
/* ─── عنوان روی بنر ویدیویی ───
   بدون هیچ لایه‌ی تیره‌کننده روی ویدیو: خوانایی فقط از سایه‌ی متن می‌آید.
   سایه‌ی متن در لایه‌ی رنگ‌آمیزیِ خودِ متن کشیده می‌شود و برخلاف
   backdrop-filter هیچ لایه‌ی ترکیب‌بندیِ جدایی نمی‌سازد — یعنی روی ویدیوی
   در حال پخش هم هزینه‌اش صفر است. */
.banner-caption {
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.85),
        0 2px 10px rgba(0, 0, 0, 0.65);
}

/* دکمه پس‌زمینه‌ی خودش را دارد؛ سایه‌ی متن رویش اضافی است */
.banner-caption .btn-outline {
    text-shadow: none;
}

.banner-glass {
    position: relative;
    min-height: 160px;
    padding: 2rem 1.75rem 1.5rem;
    overflow: hidden;
    isolation: isolate;
}

.banner-glass::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    mask-image: linear-gradient(
        to top,
        black 0%,
        black 40%,
        rgba(0,0,0,0.85) 60%,
        rgba(0,0,0,0.3) 80%,
        transparent 100%
    );
    -webkit-mask-image: linear-gradient(
        to top,
        black 0%,
        black 40%,
        rgba(0,0,0,0.85) 60%,
        rgba(0,0,0,0.3) 80%,
        transparent 100%
    );
}

.banner-glass::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.72) 0%,
        rgba(10, 8, 5, 0.55) 45%,
        rgba(20, 15, 5, 0.15) 80%,
        transparent 100%
    );
}

@media (max-width: 640px) {
    .banner-glass {
        min-height: 100px;
        padding: 1.25rem 1rem 1rem;
    }
    .banner-glass::before {
        backdrop-filter: blur(22px) saturate(180%);
        -webkit-backdrop-filter: blur(22px) saturate(180%);
        mask-image: linear-gradient(
            to top,
            black 0%,
            black 50%,
            rgba(0,0,0,0.7) 70%,
            transparent 100%
        );
        -webkit-mask-image: linear-gradient(
            to top,
            black 0%,
            black 50%,
            rgba(0,0,0,0.7) 70%,
            transparent 100%
        );
    }
}

/* ===== PAGINATION DOTS ===== */
.swiper-pagination-bullet {
    width: 6px;
    height: 6px;
    background: rgba(255, 215, 0, 0.35);
    opacity: 1;
    border: 1px solid rgba(212, 175, 55, 0.4);
    transition: all 0.3s ease;
}

.swiper-pagination-bullet-active {
    width: 22px;
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(90deg, #D4AF37, #FFD700);
    border-color: transparent;
    box-shadow: 0 0 8px rgba(212, 175, 55, 0.6);
}

/* ============ اسلایدرهای محصول ============ */
/* ⚠️ قبلاً اسلایدها opacity:0.45 و scale(0.93) داشتند و فقط اسلاید فعال کامل
   دیده می‌شد → کارت‌ها بی‌قواره به نظر می‌رسیدند. ضمناً overflow:hidden
   بالا رفتن کارت و سایه‌اش را هنگام هاور می‌بُرید. */
.featured-products-swiper,
.new-products-swiper {
    /* فضای عمودی برای lift و سایه‌ی هاور؛ بدون این، افکت بریده می‌شود.
       ⚠️ padding افقی عمداً صفر است: با overflow:hidden، ناحیه‌ی padding
       افقی باعث می‌شد لبه‌ی کارت بعدی چند پیکسل «سرک بکشد» و شبیه باگ
       رندر دیده شود. */
    padding: 14px 0 22px;
    margin: -14px 0 -22px;
    overflow: hidden;
}

/* همه‌ی اسلایدرهای محصول: کارت‌ها هم‌قد و یک‌شکل.
   ⚠️ swiper به اسلایدها ارتفاع inline می‌دهد؛ height:auto روی اسلاید لازم است
   تا کشیده شود، ولی خودِ کارت باید height:100% بگیرد وگرنه کارت‌ها
   قدهای مختلف پیدا می‌کنند و هنگام هاور اندازه‌شان می‌پرد. */
.featured-products-swiper .swiper-slide,
.new-products-swiper .swiper-slide {
    height: auto;
    display: flex;
    align-items: stretch;
}

.featured-products-swiper .swiper-slide > .product-card,
.new-products-swiper .swiper-slide > .product-card {
    width: 100%;
    height: 100%;
    background: #ffffff;      /* پس‌زمینه‌ی کارت داخل اسلایدر هم صریح سفید */
}

/* ─── نوار بخش محصولات ───
   کارت‌های سفید روی بدنه‌ی شیری کم‌کنتراست بودند؛ زمینه‌ی سندی ملایم
   باعث می‌شود کارت‌ها «بیرون بزنند». */
.product-band {
    position: relative;
    background:
        radial-gradient(120% 80% at 50% 0%, rgba(233, 213, 197, .55) 0%, transparent 70%),
        var(--brand-cream);
    border-block: 1px solid rgba(13, 29, 50, .05);
}

/* ─── سرتیتر بخش‌ها ─── */
.section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.section-title {
    position: relative;
    padding-inline-start: .85rem;
    font-size: clamp(1.15rem, 3.4vw, 1.5rem);
    font-weight: 900;
    color: var(--brand-navy);
    line-height: 1.4;
}

/* خط طلایی عمودی کنار عنوان */
.section-title::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: .18em;
    bottom: .18em;
    width: 3px;
    border-radius: 3px;
    background: linear-gradient(to bottom, var(--color-gold-light), var(--color-gold-dark));
}

.section-sub {
    margin-top: .3rem;
    padding-inline-start: .85rem;
    font-size: .8rem;
    color: rgba(13, 29, 50, .55);
}

.section-link {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    flex-shrink: 0;
    padding: .45rem .9rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
    color: var(--color-gold-dark);
    background: rgba(255, 255, 255, .7);
    border: 1px solid rgba(139, 105, 20, .22);
    transition: all .28s ease;
}

.section-link svg { width: 14px; height: 14px; }

.section-link:hover {
    color: #fff;
    background: linear-gradient(135deg, var(--color-gold), var(--color-gold-dark));
    border-color: transparent;
    box-shadow: 0 6px 18px rgba(201, 162, 39, .3);
}

.section-link:hover svg { transform: translateX(-3px); }
.section-link svg { transition: transform .28s ease; }

.featured-products-swiper .swiper-button-next,
.featured-products-swiper .swiper-button-prev {
    width: 40px;
    height: 40px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 12px rgba(0,0,0,0.12);
    color: #ca8a04;
    top: 40%;
    transition: box-shadow 0.2s ease;
}

.featured-products-swiper .swiper-button-next:hover,
.featured-products-swiper .swiper-button-prev:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,0.18);
}

.featured-products-swiper .swiper-button-next:after,
.featured-products-swiper .swiper-button-prev:after {
    font-size: 0.85rem;
    font-weight: 900;
}

.featured-products-swiper .swiper-button-prev {
    left: 0;
}
.featured-products-swiper .swiper-button-next {
    right: 0;
}

/* روی موبایل کاربر سوایپ می‌کند؛ دکمه‌ها فقط روی کارت‌ها می‌افتادند و
   ناحیه‌ی لمسی را می‌گرفتند. از md به بالا نمایش داده می‌شوند. */
@media (max-width: 767px) {
    .featured-products-swiper .swiper-button-next,
    .featured-products-swiper .swiper-button-prev {
        display: none;
    }
}

/* وقتی همه‌ی کارت‌ها جا شده‌اند، swiper کلاس lock می‌دهد و دکمه/pagination
   مخفی می‌شود (watchOverflow). این قاعده فقط تضمین می‌کند سفارشی‌سازی‌های
   بالا آن را بازنگردانند. */
.swiper-button-lock,
.swiper-pagination-lock {
    display: none !important;
}

/* ============ NEW PRODUCTS ============ */
.new-products-swiper {
    overflow: hidden;
    width: 100%;
}
/* شتاب خطی فقط برای حالت مارکی (کلاس از sliders.js اضافه می‌شود).
   بدون این محدودسازی، اسلایدر با تعداد کم محصول هم بی‌شتاب حرکت می‌کرد. */
.new-products-swiper.is-marquee .swiper-wrapper {
    transition-timing-function: linear !important;
}

/* گرید محصولات: همه‌ی کارت‌ها هم‌ارتفاع */
.product-grid {
    align-items: stretch;
}
.product-grid > .product-card {
    height: 100%;
}

/* ============ TOAST ============ */
.toast {
    background: white;
    border-radius: var(--radius-sm);
    padding: 1rem 1.25rem;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 280px;
    animation: slideInToast 0.4s ease-out forwards;
    pointer-events: auto;
    border-right: 4px solid #22c55e;
}
.toast.error { border-right-color: #ef4444; }
.toast.warning { border-right-color: #f59e0b; }
@keyframes slideInToast {
    from { opacity: 0; transform: translateY(-20px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.toast-exit { animation: toastOut 0.3s ease-in forwards !important; }
@keyframes toastOut {
    to { opacity: 0; transform: translateY(-10px) scale(0.95); }
}

/* ============ SEARCH DROPDOWN ============ */
.search-result-item {
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    transition: background 0.2s;
    border-bottom: 1px solid #f3f4f6;
}
.search-result-item:hover { background: #f9fafb; }
.search-result-item:last-child { border-bottom: none; }
.search-result-item img { border-radius: 0.5rem; object-fit: cover; }

/* ============ LOADER ============ */
.loader {
    width: 24px;
    height: 24px;
    border: 3px solid #e5e7eb;
    border-top-color: var(--color-gold);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============ MISC ============ */
.text-shadow { text-shadow: 0 2px 10px rgba(0,0,0,0.3); }
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pb-safe { padding-bottom: env(safe-area-inset-bottom, 0px); }

/* Discount badge */
.badge-discount {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.25rem 0.5rem;
    border-radius: 0.5rem;
    z-index: 10;
    box-shadow: 0 4px 10px rgba(239, 68, 68, 0.3);
}

/* =========================================
   Auth shell — صفحات ورود/ثبت‌نام/تغییر رمز
   =========================================
   قبلاً این صفحات از `min-h-screen` (یعنی 100vh) استفاده می‌کردند، در حالی که
   داخل <main> قرار دارند که خودش زیر هدر sticky (h-16) و بالای فوتر است و
   روی موبایل pb-20 برای منوی پایین دارد. پس ارتفاع کل همیشه از ویوپورت
   بیشتر می‌شد و صفحه اسکرول می‌خورد — حتی وقتی فرم کوچک بود.

   راه‌حل: ارتفاع دقیقاً «ویوپورت منهای هدر» و در موبایل منهای منوی پایین.
   از 100dvh استفاده می‌کنیم چون در موبایل با باز/بسته شدن نوار آدرس مرورگر،
   بر خلاف 100vh، پرش ایجاد نمی‌کند.
*/
:root {
    --header-h: 4rem;   /* h-16 در base.html */
    --mobilenav-h: 4rem;/* h-16 منوی پایین موبایل */
}

.auth-shell {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    /* موبایل: منوی پایین ثابت هم جا می‌خواهد + safe-area آیفون */
    min-height: calc(100dvh - var(--header-h) - var(--mobilenav-h) - env(safe-area-inset-bottom, 0px));
}

/* <main> در base.html روی موبایل pb-20 دارد (برای منوی پایین). چون .auth-shell
   خودش جای آن منو را در محاسبه‌ی ارتفاع لحاظ کرده، آن padding اینجا دوباره
   اضافه می‌شد و صفحه را دقیقاً به اندازه‌ی همان ۵rem اسکرول‌دار می‌کرد.
   کلاس روی خود <main> گذاشته می‌شود (بلوک main_class در base.html) تا به
   پشتیبانی مرورگر از :has() وابسته نباشیم. */
main.is-auth-page {
    padding-bottom: 0 !important;
}

/* ⚠️ `min-h-screen` تیلویند یعنی min-height:100vh. روی موبایل ۱۰۰vh ارتفاعِ
   صفحه **بدون** نوار آدرس مرورگر است، یعنی از ناحیه‌ی قابل‌مشاهده بیشتر —
   و همین چند ده پیکسل، صفحه را اسکرول‌دار می‌کرد حتی وقتی محتوا جا می‌شد.
   dvh ارتفاع واقعیِ لحظه‌ای را می‌دهد. */
body.is-auth-page {
    min-height: 100dvh;
}

@supports not (height: 100dvh) {
    body.is-auth-page { min-height: 100vh; }
}

/* از md به بالا منوی پایین وجود ندارد (md:hidden) */
@media (min-width: 768px) {
    .auth-shell {
        min-height: calc(100dvh - var(--header-h));
        padding: 1.5rem 1rem;
    }
}

/* مرورگرهای قدیمی که dvh ندارند */
@supports not (height: 100dvh) {
    .auth-shell { min-height: calc(100vh - var(--header-h) - var(--mobilenav-h)); }
    @media (min-width: 768px) {
        .auth-shell { min-height: calc(100vh - var(--header-h)); }
    }
}

/* اگر فرم از ارتفاع موجود بلندتر بود (مثلاً کیبورد باز است یا صفحه کوتاه)،
   کارت نباید بریده شود — اسکرول طبیعی برمی‌گردد. */
.auth-shell > * {
    width: 100%;
    max-width: 28rem;
}

/* پس‌زمینه‌ی ثابت این صفحات: قبلاً `min-h-screen fixed inset-0` بود که با
   هدر همپوشانی می‌کرد؛ inset-0 به‌تنهایی همان کار را درست انجام می‌دهد. */
.auth-bg {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

/* Auth card */
.auth-card {
    background: white;
    border-radius: 2rem;
    box-shadow: 0 20px 60px rgba(0,0,0,0.1);
    overflow: hidden;
    position: relative;
}
.auth-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(90deg, #c9a227, #8b6914, #c9a227);
}
.auth-step-indicator {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin-bottom: 1.5rem;
}
.auth-step-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e5e7eb;
    transition: all 0.3s ease;
}
.auth-step-dot.active { background: #c9a227; width: 24px; border-radius: 4px; }

/* OTP Inputs */
.otp-input-group {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    direction: ltr;
}
.otp-input-group input {
    width: 3rem;
    height: 3.5rem;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    border-radius: 0.75rem;
    border: 2px solid #e5e7eb;
    transition: all 0.3s ease;
    outline: none;
}
.otp-input-group input:focus {
    border-color: #c9a227;
    box-shadow: 0 0 0 4px rgba(201, 162, 39, 0.15);
    transform: scale(1.05);
}

/* ============================================================
   ============ PRODUCT DETAIL SPECIFIC ============
   ============================================================ */

/* Quantity stepper - product detail override */
.qty-stepper {
    display: inline-flex;
    align-items: center;
    border: 1.5px solid #e5e7eb;
    border-radius: 0.75rem;
    overflow: hidden;
    background: white;
    transition: border-color 0.3s ease;
}

.qty-stepper:hover {
    border-color: #f59e0b;
}

.qty-stepper button {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    cursor: pointer;
    color: #6b7280;
    transition: all 0.2s;
    font-size: 1.25rem;
    font-weight: 700;
    user-select: none;
}

.qty-stepper button:hover {
    background: #f3f4f6;
    color: #f59e0b;
}

.qty-stepper button:active {
    transform: scale(0.9);
}

.qty-stepper input {
    width: 2.5rem;
    text-align: center;
    border: none;
    font-weight: 600;
    font-size: 0.9rem;
    outline: none;
    background: transparent;
    -moz-appearance: textfield;
}

.qty-stepper input::-webkit-outer-spin-button,
.qty-stepper input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Media Thumbnails */
.media-thumb {
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.media-thumb img {
    transition: transform 0.3s ease;
}

.media-thumb:hover img {
    transform: scale(1.05);
}

.media-thumb.active-thumb {
    border-color: #f59e0b !important;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
}

/* Product Price Box */
#product-price-box {
    transition: all 0.3s ease;
}

#product-price-box [data-live-price] {
    transition: color 0.3s ease, transform 0.3s ease;
}

/* Gallery Modal */
#gallery-modal {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background: rgba(0, 0, 0, 0.92);
}

#gallery-modal:not(.hidden) {
    animation: modalFadeIn 0.25s ease-out;
}

#gallery-modal .modal-thumb {
    transition: all 0.3s ease;
    cursor: pointer;
    opacity: 0.55;
}

#gallery-modal .modal-thumb:hover {
    opacity: 0.85;
    transform: scale(1.05);
}

#gallery-modal .modal-thumb.border-yellow-500 {
    opacity: 1;
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.3);
}

/* Modal thumbs scrollbar */
#modal-thumbs::-webkit-scrollbar {
    height: 4px;
}
#modal-thumbs::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 2px;
}
#modal-thumbs::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
}
#modal-thumbs::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Modal images */
#modal-img {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

#modal-swipe-area {
    transform: translateZ(0);
}

/* Product grid */
.product-grid {
    display: grid;
    gap: 1rem;
}

@media (min-width: 640px) {
    .product-grid {
        gap: 1.25rem;
    }
}

/* ============ RESPONSIVE ============ */
@media (max-width: 640px) {
    .product-card { border-radius: 1rem; }
    .auth-card { border-radius: 1.5rem; }
    .btn-primary { padding: 0.75rem 1.25rem; font-size: 0.9rem; }
    .paddingbottom_0 {
        padding-bottom: 0!important;
    }
    .qty-stepper button {
        width: 2rem;
        height: 2rem;
        font-size: 1rem;
    }
    .qty-stepper input {
        width: 2rem;
        font-size: 0.8rem;
    }
    #gallery-modal .modal-thumb {
        width: 3rem;
        height: 3rem;
    }
}

@media (min-width: 768px) {
    #gallery-modal .modal-thumb {
        width: 4rem;
        height: 4rem;
    }
}

@media (min-width: 1024px) {
    .product-grid { grid-template-columns: repeat(4, 1fr); }
    .category-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .product-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 767px) {
    .product-grid { grid-template-columns: repeat(2, 1fr); }
    .category-grid { grid-template-columns: 1fr; }
}

/* .min-height {
    min-height: 130.4px !important;
} */

/* Toast Animation */
@keyframes slideInRight {
    from { transform: translateX(-120%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
#searchResults {
    transition: opacity 0.3s ease;
}

/* ============ ADMIN FORMS ============ */
/* فرم‌های داشبورد - استایل عمومی */
form input[type="text"],
form input[type="number"],
form input[type="url"],
form input[type="email"],
form input[type="tel"],
form input[type="password"],
form select,
form textarea {
    width: 100%;
    padding: 10px 14px;
    font-size: 0.875rem;
    color: #334155;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    direction: rtl;
    transition: all 0.15s ease;
    font-family: inherit;
}

form input[type="text"]:focus,
form input[type="number"]:focus,
form input[type="url"]:focus,
form input[type="email"]:focus,
form input[type="tel"]:focus,
form input[type="password"]:focus,
form select:focus,
form textarea:focus {
    outline: none;
    background-color: #ffffff;
    border-color: #f59e0b !important;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15) !important;
}

form input::placeholder,
form textarea::placeholder {
    color: #cbd5e1;
}

form textarea {
    min-height: 110px;
    resize: vertical;
}

form select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: none !important;
    cursor: pointer;
    padding-left: 40px;
}

form select option {
    background-color: white;
    color: #334155;
    padding: 8px;
}

form input[type="checkbox"] {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    accent-color: #f59e0b;
    cursor: pointer;
}

form input[type="file"] {
    display: none;
}

/* فرم دسته‌بندی */
#categoryForm input[type="text"],
#categoryForm input[type="number"],
#categoryForm select,
#categoryForm textarea {
    width: 100%;
    padding: 10px 14px;
    font-size: 0.875rem;
    color: #334155;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    direction: rtl;
    transition: all 0.15s ease;
}

#categoryForm input[type="text"]:focus,
#categoryForm input[type="number"]:focus,
#categoryForm select:focus,
#categoryForm textarea:focus {
    outline: none;
    background-color: #ffffff;
    border-color: #f59e0b !important;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15) !important;
}

#categoryForm textarea {
    min-height: 110px;
    resize: vertical;
}

#categoryForm select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: none !important;
    cursor: pointer;
    padding-left: 40px;
}

#categoryForm select option {
    background-color: white;
    color: #334155;
    padding: 8px;
}

#categoryForm input[type="checkbox"] {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    accent-color: #f59e0b;
    cursor: pointer;
}

/* فرم بنر */
#bannerForm input[type="text"],
#bannerForm input[type="number"],
#bannerForm input[type="url"],
#bannerForm select,
#bannerForm textarea {
    width: 100%;
    padding: 10px 14px;
    font-size: 0.875rem;
    color: #334155;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    direction: rtl;
    transition: all 0.15s ease;
}

#bannerForm input[type="text"]:focus,
#bannerForm input[type="number"]:focus,
#bannerForm input[type="url"]:focus,
#bannerForm select:focus,
#bannerForm textarea:focus {
    outline: none;
    background-color: #ffffff;
    border-color: #f59e0b !important;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15) !important;
}

#bannerForm select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: none !important;
    cursor: pointer;
    padding-left: 40px;
}

#bannerForm select option {
    background-color: white;
    color: #334155;
    padding: 8px;
}

#bannerForm input[type="checkbox"] {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    accent-color: #f59e0b;
    cursor: pointer;
}

/* فرم محصول */
#productForm input[type="text"],
#productForm input[type="number"],
#productForm select,
#productForm textarea {
    width: 100%;
    padding: 10px 14px;
    font-size: 0.875rem;
    color: #334155;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    direction: rtl;
    transition: all 0.15s ease;
}

#productForm input[type="text"]:focus,
#productForm input[type="number"]:focus,
#productForm select:focus,
#productForm textarea:focus {
    outline: none;
    background-color: #ffffff;
    border-color: #f59e0b !important;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15) !important;
}

#productForm textarea {
    min-height: 110px;
    resize: vertical;
}

#productForm select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: none !important;
    cursor: pointer;
    padding-left: 40px;
}

#productForm select option {
    background-color: white;
    color: #334155;
    padding: 8px;
}

#productForm input[type="checkbox"] {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    accent-color: #f59e0b;
    cursor: pointer;
}

/* ============ CONTACT US ROWS ============ */
.row-base {
    border: 1px solid;
    transition: background-color .3s ease, border-color .3s ease;
}
.row-pink {
    background: rgba(236,72,153,.045);
    border-color: rgba(236,72,153,.16);
}
.row-pink:hover {
    background: rgba(236,72,153,.10);
    border-color: rgba(236,72,153,.38);
}
.row-blue {
    background: rgba(59,130,246,.045);
    border-color: rgba(59,130,246,.16);
}
.row-blue:hover {
    background: rgba(59,130,246,.10);
    border-color: rgba(59,130,246,.38);
}
.row-green {
    background: rgba(34,197,94,.045);
    border-color: rgba(34,197,94,.16);
}
.row-green:hover {
    background: rgba(34,197,94,.10);
    border-color: rgba(34,197,94,.38);
}
.row-red {
    background: rgba(239,68,68,.045);
    border-color: rgba(239,68,68,.16);
}
.row-red:hover {
    background: rgba(239,68,68,.10);
    border-color: rgba(239,68,68,.38);
}
.row-emerald {
    background: rgba(16,185,129,.045);
    border-color: rgba(16,185,129,.16);
}
.row-emerald:hover {
    background: rgba(16,185,129,.10);
    border-color: rgba(16,185,129,.38);
}

/* login section */


.box{
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    /* background: transparent; */
}

.box::before{
    content: '';
    position: absolute;
    inset: -120%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        transparent 220deg,
        rgba(208,135,0,.15) 260deg,
        /* #ffd230 300deg, */
        #ffd230 280deg,
        rgba(208,135,0,.15) 350deg,
        rgba(208,135,0,.15) 330deg,
        transparent 360deg
    );
    animation: rotate 5s linear infinite;
    z-index: 0;
}
/* fffcf6 */
.box::after{
    content: '';
    position: absolute;
    inset: 4px;
    background: #fffcf6;
    border-radius: 14px;
    z-index: 1;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

@keyframes rotate{
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}

.box > *{
    position: relative;
    z-index: 2;
}

.eye-icon {
    transition: transform .3s ease;
    transform-origin: center;
}

.Btn-submit {
    background: linear-gradient(to right, #f5b237, #ffd737, #ffc037, #eec831, #c09027);
    border: none;
    color: #3d2e0e;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.2);
    box-shadow: 
        0 4px 15px rgba(245, 178, 55, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transition: all 0.3s ease;
    background-size: 300% 300%;
}

.Btn-submit:hover {
    transform: scale(0.98);
    box-shadow: 
        0 6px 25px rgba(245, 178, 55, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    background-position: 100% 100%;
    animation: goldShine 3s ease infinite;
}

@keyframes goldShine {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.bg-gold-gradient {
    background: 
        radial-gradient(ellipse 90% 60% at 50% -9%, rgba(255,218,103,.75) 0%, rgba(255,240,202,.35) 35%, transparent 75%),
        radial-gradient(ellipse 90% 70% at 15% 110%, rgba(255,217,106,.75) 0%, rgba(255,245,224,.35) 35%, transparent 75%),
        radial-gradient(circle at 50% 50%, #ffffff 0%, #fffdf8 70%, #fffaf0 100%);
}

#password-input, #phone-input{
    text-align: left;
}

/* =========================================
   Global Form Loading Spinner Styles
   ========================================= */
.Btn-submit button, 
button[type="submit"].is-loading,
input[type="submit"].is-loading {
    --spinner-color: #ffffff; /* پیش‌فرض سفید */
}

.is-loading {
    position: relative;
    pointer-events: none;
    color: transparent !important;
}

.is-loading::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 20px;
    height: 20px;
    border: 2.5px solid rgba(255, 255, 255, 0.3);
    border-top-color: var(--spinner-color, #ffffff);
    border-radius: 50%;
    animation: spin-loading 0.8s linear infinite;
    z-index: 10;
}

@keyframes spin-loading {
    to { transform: rotate(360deg); }
}
/* for social icons */
.social-icon-btn {
  width: clamp(2rem, 8vw, 2.5rem);
  aspect-ratio: 1 / 1;
  min-width: 0;
  flex-shrink: 1;
}

.social-icon-btn svg {
  width: 50%;
  height: 50%;
}

.btnTransition {
    transition: all 5s ease-in-out !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   حالت تیره (فروشگاه)
   ═══════════════════════════════════════════════════════════════════════
   دامنه: فقط بخش عمومی سایت. پنل ادمین (dashboard.css) عمداً بیرون است.

   ⚠️ قرارداد رنگ این پروژه — نقض این قرارداد باعث «متن سفید روی زمینه‌ی
   سفید» می‌شود (باگ واقعی نسخه‌ی قبل):

     --ink*        متن روی زمینه‌ی صفحه           → در حالت تیره روشن است
     --on-surface* متن داخل «سطح روشن» (کارت سفید) → **همیشه تیره**، در هر حالتی

   قاعده‌ی [class~="bg-white"] در بالای همین فایل، داخل هر کارت سفید
   --ink را برابر --on-surface می‌گذارد. یعنی اگر on-surface تیره بماند،
   همه‌ی متن‌های داخل کارت خودبه‌خود خوانا می‌شوند. نسخه‌ی قبل on-surface را
   سفید کرد و دقیقاً همین مکانیزم را خراب کرد.

   طراحی: پوسته‌ی تیره + محتوای روشن.
   زمینه‌ی صفحه، هدر و فوتر سرمه‌ای–مشکی می‌شوند و تاکید طلایی می‌گیرند؛
   کارت محصول و باکس‌ها دقیقاً مثل حالت روشن سفید می‌مانند تا عکس طلا با
   رنگ درست دیده شود و متن‌ها بدون هیچ ابهامی خوانا باشند.

   انتخاب کاربر روی <html data-theme="dark"> می‌نشیند و پیش از رنگ‌آمیزی
   صفحه اعمال می‌شود (اسکریپت inline در base.html) تا پرش رنگ رخ ندهد.
   ═══════════════════════════════════════════════════════════════════════ */

:root[data-theme="dark"] {
    --dark-bg-top:   #0F1520;
    --dark-bg-mid:   #141C2B;
    --dark-bg-deep:  #0B0F18;

    --dark-line:     rgba(255, 255, 255, .12);

    /* طلایی روشن‌تر: #c9a227 روی زمینه‌ی تیره کنتراست کافی ندارد */
    --color-gold:       #E8C766;
    --color-gold-light: #F2DB98;
    --color-gold-dark:  #C9A227;

    /* متن روی زمینه‌ی تیره‌ی صفحه */
    --ink:        #FFFFFF;
    --ink-muted:  rgba(255, 255, 255, .74);
    --ink-subtle: rgba(255, 255, 255, .54);
    --line:       var(--dark-line);

    /* ⚠️ عمداً دست‌نخورده و تیره — متن داخل کارت‌های سفید از اینجا می‌آید */
    --on-surface:        var(--brand-navy);
    --on-surface-muted:  rgba(13, 29, 50, .62);
    --on-surface-subtle: rgba(13, 29, 50, .45);
    --surface-line:      rgba(13, 29, 50, .10);

    --accent:     var(--color-gold);
    --accent-ink: #0F1520;

    /* ⚠️ color-scheme: dark عمداً ست نمی‌شود.
       سطوح این طراحی روشن‌اند (کارت سفید)، و color-scheme: dark باعث می‌شد
       مرورگر input و select را با زمینه‌ی تیره‌ی پیش‌فرض خودش رندر کند —
       یعنی یک فیلد تیره وسط کارت سفید. */
}

/* ─── زمینه‌ی صفحه ───
   گرادیان خطی ملایم با یک ته‌رنگ طلایی بسیار کم‌رنگ در بالا. */
:root[data-theme="dark"] body {
    background-color: var(--dark-bg-top);
    background-image:
        linear-gradient(180deg, rgba(201, 162, 39, .07) 0%, transparent 48%),
        linear-gradient(168deg,
            var(--dark-bg-top)  0%,
            var(--dark-bg-mid)  52%,
            var(--dark-bg-deep) 100%);
    background-attachment: fixed;
    background-repeat: no-repeat;
    color: var(--ink);
}



/* ─── متنِ روی زمینه‌ی صفحه ───
   ⚠️ این قواعد داخل کارت سفید هم اجرا می‌شوند، ولی آنجا --ink توسط قاعده‌ی
   [class~="bg-white"] برابر --on-surface (تیره) شده، پس متن تیره می‌ماند.
   همان الگوی .theme-adult/.theme-child بالای فایل. */
:root[data-theme="dark"] :is(h1, h2, h3, h4, h5) { color: var(--ink); }

:root[data-theme="dark"] :is(.text-gray-900, .text-gray-800, .text-gray-700,
                             .text-slate-900, .text-slate-800, .text-slate-700) { color: var(--ink); }

:root[data-theme="dark"] :is(.text-gray-600, .text-gray-500,
                             .text-slate-600, .text-slate-500) { color: var(--ink-muted); }

:root[data-theme="dark"] :is(.text-gray-400, .text-gray-300,
                             .text-slate-400, .text-slate-300) { color: var(--ink-subtle); }

/* ─── رنگ‌های سرمه‌ایِ هاردکد در تمپلیت‌ها ───
   کلاس‌های arbitrary مثل text-[#0D1D32] و text-[#0D1D32]/80 روی <body> و
   عنوان صفحات نوشته شده‌اند. در حالت تیره اینها متنِ سرمه‌ای روی زمینه‌ی
   سرمه‌ای می‌ساختند — یعنی نامرئی.
   انتخابگر زیر همه‌ی واریانت‌ها (با و بدون شفافیت) را می‌گیرد و به توکن وصل
   می‌کند: روی زمینه‌ی صفحه روشن می‌شود و داخل کارت سفید تیره می‌ماند، چون
   قاعده‌ی [class~="bg-white"] آنجا --ink را به --on-surface تغییر می‌دهد. */
:root[data-theme="dark"] [class*="text-[#0D1D32]"],
:root[data-theme="dark"] [class*="text-[#0d1d32]"] { color: var(--ink); }

/* پس‌زمینه‌ی کرمِ هاردکد نباید روی زمینه‌ی تیره بنشیند.
   ⚠️ :not(body) لازم است: خودِ <body> هم کلاس bg-[#FDFBF7] دارد و بدون این
   استثنا، این قاعده (که وزن بیشتری دارد) رنگ زمینه‌ی تیره‌ی body را هم
   شفاف می‌کرد. */
:root[data-theme="dark"] :is([class*="bg-[#FDFBF7]"], [class*="bg-[#fdfbf7]"]):not(body) {
    background-color: transparent;
}

/* ─── سطوح روشنِ بدون پس‌زمینه‌ی صریح ───
   .box (کارت ورود/ثبت‌نام) در فهرست «سطح روشن» است، یعنی متنش تیره می‌شود،
   ولی خودش هیچ background ندارد و در حالت روشن زمینه‌ی کرمِ صفحه را قرض
   می‌گیرد. روی زمینه‌ی تیره این یعنی متن تیره روی پس‌زمینه‌ی تیره — نامرئی.
   پس در حالت تیره یک کارت سفید واقعی می‌شود، دقیقاً مثل بقیه‌ی کارت‌ها. */
:root[data-theme="dark"] .box {
    background-color: #ffffff;
    box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .55);
}

/* ─── نوارها و بخش‌های کرم/ماسه‌ای ───
   اینها بخشی از «پوسته»ی صفحه‌اند، نه کارت. پس در حالت تیره تیره می‌شوند و
   متنشان (که به --ink وصل است) روشن می‌ماند. */
:root[data-theme="dark"] :is(.section-cream, .section-sand, .section-sand-tint),
:root[data-theme="dark"] [class*="bg-[#E9D5C5]"],
:root[data-theme="dark"] [class*="bg-[#e9d5c5]"],
:root[data-theme="dark"] [class*="bg-[#f6ece3]"] {
    background-color: #161E2D;
}

/* عنوان بخش‌ها رنگ سرمه‌ای هاردکد دارد → روی زمینه‌ی تیره نامرئی می‌شد */
:root[data-theme="dark"] .section-title { color: var(--ink); }

/* ─── پس‌زمینه‌ی صفحات ورود/ثبت‌نام ───
   .bg-gold-gradient یک لایه‌ی fixed تمام‌صفحه با گرادیان طلاییِ روشن است.
   در حالت تیره کل صفحه را روشن می‌کرد. نسخه‌ی تیره همان حسِ هاله‌ی طلایی را
   نگه می‌دارد ولی روی زمینه‌ی سرمه‌ای–مشکی. */
:root[data-theme="dark"] .bg-gold-gradient {
    background:
        radial-gradient(ellipse 90% 60% at 50% -9%, rgba(201, 162, 39, .18) 0%, rgba(201, 162, 39, .06) 35%, transparent 75%),
        radial-gradient(ellipse 90% 70% at 15% 110%, rgba(35, 56, 92, .35) 0%, rgba(35, 56, 92, .12) 35%, transparent 75%),
        linear-gradient(168deg, #0F1520 0%, #141C2B 52%, #0B0F18 100%);
}

/* ─── فیلدهای فرم ───
   ⚠️ preflight تیلویند قاعده‌ی `button, input, select, textarea { color: inherit }`
   دارد. در حالت تیره یعنی input رنگ سفیدِ body را ارث می‌برد، در حالی که
   زمینه‌ی پیش‌فرض خودِ فیلد سفید است → متن سفید روی زمینه‌ی سفید.
   فیلدها روی سطوح روشن می‌نشینند، پس رنگشان از توکنِ «متن روی سطح روشن»
   می‌آید که همیشه تیره است. */
:root[data-theme="dark"] :is(input, select, textarea) {
    color: var(--on-surface);
}
:root[data-theme="dark"] :is(input, textarea)::placeholder {
    color: var(--on-surface-subtle);
}

/* ─── کارت‌ها و سطوح روشن ───
   عمداً هیچ تغییری نمی‌کنند: سفید می‌مانند، دقیقاً مثل حالت روشن.
   فقط سایه عمیق‌تر می‌شود تا روی زمینه‌ی تیره «شناور» دیده شوند. */
:root[data-theme="dark"] .product-card {
    box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .65);
    border-color: rgba(13, 29, 50, .10);
}

:root[data-theme="dark"] :is(.box, .card, .auth-card) {
    box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .55);
}

/* ─── هدر و فوتر ───
   در حالت روشن سرمه‌ای‌اند؛ در تیره کمی عمیق‌تر تا از زمینه جدا شوند. */
:root[data-theme="dark"] header#main-header {
    background-color: #0B111C;
}

:root[data-theme="dark"] footer {
    background-color: #090E17;
}

/* ─── سایدبار فیلترها ───
   کارت‌های فیلتر سفیدند (bg-white) و خودشان خوانا می‌مانند؛ فقط عنوان‌های
   بیرون از کارت که مستقیم روی زمینه‌اند باید روشن شوند. */
:root[data-theme="dark"] #filter-sidebar { background-color: transparent; }

@media (max-width: 1023px) {
    /* کشوی موبایل روی صفحه می‌آید و باید زمینه‌ی مات داشته باشد */
    :root[data-theme="dark"] #filter-sidebar {
        background-color: var(--dark-bg-mid);
    }
}

/* ═══════════════════════════════════════════════════════════
   پوششِ صفحاتی که کلاس‌های روشن را مستقیم در تمپلیت دارند
   ═══════════════════════════════════════════════════════════
   ⚠️ همه‌ی قواعد این بخش به `main` محدود شده‌اند.
   هدر و فوتر بیرون از <main> هستند و کلاس‌هایی مثل bg-white/10 دارند که
   عمداً روی زمینه‌ی تیره می‌نشینند؛ اگر این قواعد سراسری بودند، آن‌ها را
   هم «سطح روشن» حساب می‌کردند و متنشان تیره‌روی‌تیره می‌شد. */

/* ─── نوار محصولات صفحه‌ی اصلی ───
   .product-band رنگ کرمِ برند را مستقیم صدا می‌زند و کل بخش‌های محصولات
   صفحه‌ی خانه داخل آن است؛ بدون این قاعده، صفحه‌ی اصلی اصلاً تیره نمی‌شد. */
:root[data-theme="dark"] .product-band {
    background: linear-gradient(180deg, rgba(201, 162, 39, .05) 0%, transparent 55%),
                var(--dark-bg-mid);
    border-block-color: rgba(255, 255, 255, .07);
}

:root[data-theme="dark"] .section-sub { color: var(--ink-muted); }

:root[data-theme="dark"] .section-link {
    color: var(--ink-muted);
    border-color: rgba(255, 255, 255, .16);
}

/* ─── ظرف‌های سطح‌صفحه ───
   فقط فرزندِ **مستقیم** main: یعنی wrapper کل صفحه (مثل bg-gray-50 در
   پروفایل). چیپ‌ها و دکمه‌های bg-gray-50 که داخل کارت سفیدند دست‌نخورده
   می‌مانند، چون فرزند مستقیم main نیستند. */
:root[data-theme="dark"] main > [class*="bg-gray-50"],
:root[data-theme="dark"] main > [class*="bg-gray-100"],
:root[data-theme="dark"] main > [class*="bg-slate-50"],
:root[data-theme="dark"] main > [class*="bg-slate-100"] {
    background-color: transparent;
}

/* ─── کارت‌های سفیدِ نیمه‌شفاف ───
   قاعده‌ی [class~="bg-white"] بالای فایل فقط توکنِ دقیقِ «bg-white» را
   می‌گیرد (عمدی، تا bg-white/10 هدر را نگیرد). ولی صفحه‌ی پروفایل از
   bg-white/85 و bg-white/70 استفاده می‌کند؛ در نتیجه --ink داخلشان روشن
   می‌ماند و متن سفید روی کارت روشن می‌افتاد — یعنی نامرئی.
   اینجا (فقط داخل main) هم کارت مات می‌شود و هم توکن متن اصلاح. */
:root[data-theme="dark"] main [class*="bg-white/"] {
    background-color: #ffffff;
    --ink:        var(--on-surface);
    --ink-muted:  var(--on-surface-muted);
    --ink-subtle: var(--on-surface-subtle);
    --line:       var(--surface-line);
    border-color: var(--surface-line);
}

/* ─── تم دسته‌بندی در حالت تیره ───
   بزرگسال سرمه‌ای، کودک صورتی — همان تفکیک حالت روشن، فقط عمیق‌تر.

   ⚠️ این قاعده لازم است: `:root[data-theme="dark"] body` وزن بیشتری از
   `.theme-adult, .theme-child` دارد، پس زمینه‌ی سراسریِ تیره روی زمینه‌ی
   تم می‌نشست و هر دو صفحه‌ی دسته‌بندی یک‌شکل و بی‌تم دیده می‌شدند.
   با افزودن body به انتخابگر، تم دوباره برنده می‌شود. */
:root[data-theme="dark"] body.theme-adult,
:root[data-theme="dark"] body.theme-child {
    background-color: var(--page-bg);
    background-image:
        linear-gradient(180deg, var(--page-glow-a) 0%, transparent 55%),
        linear-gradient(168deg,
            var(--page-bg)   0%,
            var(--page-mid)  46%,
            var(--page-deep) 100%);
}

:root[data-theme="dark"] .theme-adult {
    --page-bg:   #101D30;
    --page-mid:  #16263D;
    --page-deep: #0A121E;
    --page-glow-a: rgba(201, 162, 39, .07);
}

:root[data-theme="dark"] .theme-child {
    --page-bg:   #37122A;
    --page-mid:  #4A1938;
    --page-deep: #260C1D;
    --page-glow-a: rgba(247, 184, 206, .08);
    --accent:     #F7B8CE;
    --accent-ink: #37122A;

    /* ⚠️ ضروری: در حالت روشن، .theme-child متن را **تیره** می‌کند (چون زمینه
       صورتیِ روشن است). آن مقدار به حالت تیره هم ارث می‌رسید و نتیجه‌اش متن
       تیره روی زمینه‌ی تیره بود — یعنی نامرئی. اینجا صریحاً برمی‌گردد به روشن. */
    --ink:        #FFFFFF;
    --ink-muted:  rgba(255, 255, 255, .74);
    --ink-subtle: rgba(255, 255, 255, .54);
    --line:       rgba(255, 255, 255, .12);
}

/* ─── دکمه‌ی تعویض تم ─── */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    color: #b9ae95;
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    flex-shrink: 0;
}
.theme-toggle:hover { color: var(--color-gold-light); background: rgba(255, 255, 255, .06); }
.theme-toggle:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 2px; }

/* آیکون فعال با CSS انتخاب می‌شود، نه جاوااسکریپت — در فریم اول درست است */
.theme-toggle__moon { display: none; }
:root[data-theme="dark"] .theme-toggle__sun  { display: none; }
:root[data-theme="dark"] .theme-toggle__moon { display: block; }


/* ═══════════════════════════════════════════════════════════════════════
   موبایل: iOS و اندروید
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── ناحیه‌ی امن iPhone (نوار home indicator) ───
   ⚠️ کلاس pb-safe در تمپلیت استفاده شده بود ولی هیچ‌جا تعریف نشده بود
   (جزو ابزارهای پیش‌فرض تیلویند نیست)، پس مقدارش صفر می‌ماند و منوی پایین
   روی آیفون‌های بدون دکمه، زیر نوار home indicator می‌رفت.
   viewport-fit=cover از قبل در meta هست، پس env() مقدار واقعی می‌گیرد. */
.pb-safe {
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.pt-safe { padding-top: env(safe-area-inset-top, 0px); }

/* فاصله‌ی انتهای صفحه هم باید ناحیه‌ی امن را در نظر بگیرد تا محتوای آخر
   زیر منوی پایین پنهان نشود */
@media (max-width: 767px) {
    body { padding-bottom: env(safe-area-inset-bottom, 0px); }
}

/* ─── جلوگیری از زوم خودکار iOS روی فوکوس فیلد ───
   ⚠️ سافاری iOS اگر اندازه‌ی فونت فیلد کمتر از ۱۶px باشد، هنگام تپ روی آن
   کل صفحه را زوم می‌کند و بعد از بستن کیبورد هم زوم‌شده می‌ماند. تنها راه
   استاندارد جلوگیری، ۱۶px کردن فونت خودِ فیلد است.
   فقط روی دستگاه‌های لمسیِ کوچک اعمال می‌شود تا تایپوگرافی دسکتاپ عوض نشود. */
@media (pointer: coarse) and (max-width: 767px) {
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea {
        font-size: 16px;
    }
}

/* ─── هدف لمسی حداقل ۴۴px (راهنمای اپل و گوگل) ───
   فقط برای دکمه‌های آیکونیِ کوچک که ممکن است زیر این حد بمانند. */
@media (pointer: coarse) {
    .theme-toggle,
    .icon-btn,
    .icon-btn-edit,
    .icon-btn-delete {
        min-width: 44px;
        min-height: 44px;
    }
}