/* ==========================================================================
   پریسان — سیستم طراحی سایت
   ساخته‌شده از روی طرح‌های پوشه‌ی site-design/

   ساختار فایل (برای پیداکردن سریع):
     ۰۱  فونت
     ۰۲  توکن‌های طراحی (رنگ، فاصله، شعاع، سایه)
     ۰۳  ریست و پایه
     ۰۴  تایپوگرافی
     ۰۵  چیدمان
     ۰۶  دکمه‌ها (شامل دکمه‌های سه‌بعدی «کلید»)
     ۰۷  فرم‌ها
     ۰۸  هدر
     ۰۹  فوتر
     ۱۰  هیرو صفحه اصلی
     ۱۱  بخش‌های صفحه اصلی
     ۱۲  کارت محصول و فروشگاه
     ۱۳  صفحه محصول
     ۱۴  سبد، تسویه و پنل کاربر
     ۱۵  وبلاگ و صفحات محتوایی
     ۱۶  اجزای کمکی
     ۱۷  انیمیشن
     ۱۸  ابزارها و ریسپانسیو

   دو قاعده‌ی فارسی که همه‌جا رعایت شده:
     • روی متن فارسی letter-spacing نمی‌گذاریم (حروف چسبان جدا می‌شوند).
     • عدد و متن لاتین داخل .num یا .latin می‌رود تا جهتش درست بماند.
   ========================================================================== */

/* ---------- ۰۱ فونت ---------- */
@font-face {
    font-family: 'Vazirmatn';
    src: url("../fonts/Vazirmatn-300.6458eed8cf92.woff2") format('woff2');
    font-weight: 300;
    font-display: swap;
}

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

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

@font-face {
    font-family: 'Vazirmatn';
    src: url("../fonts/Vazirmatn-700.7958481fe611.woff2") format('woff2');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Vazirmatn';
    src: url("../fonts/Vazirmatn-800.a0f99309cd35.woff2") format('woff2');
    font-weight: 800;
    font-display: swap;
}


/* ---------- ۰۲ توکن‌های طراحی ---------- */
/*
   رنگ‌های پایه از پنل مدیریت روی تگ <html> نوشته می‌شوند
   (SiteSettings → ظاهر سایت). بقیه‌ی متغیرها از روی همین‌ها ساخته
   می‌شوند، پس با عوض‌کردن تم، کل سایت هماهنگ عوض می‌شود.
*/
:root {
    /* --- رنگ‌های پایه (قابل تغییر از پنل) --- */
    --ink: #231F1A;          /* متن اصلی — قهوه‌ای تیره‌ی گرم */
    --paper: #FBF8F3;        /* زمینه صفحه — کرم گرم */
    --amber: #F2A11C;        /* رنگ تأکیدی — کهربایی */
    --amber-deep: #A85F06;   /* کهربایی تیره — لینک، قیمت، hover */
    --beige: #F2EDE5;        /* سطح ملایم */

    /* --- مشتق‌شده --- */
    --ink-86: rgba(35, 31, 26, .86);
    --ink-64: rgba(35, 31, 26, .64);
    --ink-42: rgba(35, 31, 26, .42);
    --ink-16: rgba(35, 31, 26, .16);
    --ink-10: rgba(35, 31, 26, .10);
    --ink-06: rgba(35, 31, 26, .06);

    --muted: #635E57;        /* متن کم‌رنگ */
    --line: #DDD6C8;         /* خط جداکننده */
    --card: #FFFDFA;         /* زمینه کارت */
    /* پوستهٔ خاکستری قاب داشبوردی هیرو (#EDECEA در طرح) — از روی پالت ساخته می‌شود */
    --shell: #EDECEA;
    --shell: color-mix(in srgb, var(--ink) 7%, var(--paper));

    --sand-1: #EFE7DA;       /* جای‌گیر تصویر — روشن */
    --sand-2: #E3D6C3;       /* جای‌گیر تصویر — تیره‌تر */

    /* --- سطوح تیره --- */
    --dark: #1C1C1F;         /* نوار بالا، کارت‌های تیره */
    --dark-2: #15181C;       /* لبه‌ی زیرین دکمه‌های کلید */
    --dark-fg: #EDF2F8;      /* متن روی سطح تیره */

    /* --- تأکیدها --- */
    --amber-band: #EB9811;   /* نوار کهربایی تمام‌عرض */
    --amber-press: #D9860C;  /* کهربایی فشرده */
    --gold-soft: #F6E8BE;
    --led: #4FC3FF;          /* چراغ آبی تب‌های سه‌بعدی */
    /* هم‌رنگ زمینه‌ی عکس فروشگاه در بنر خرید قسطی، تا عکس بدون درز بنشیند */
    --navy: #072994;         /* بنر خرید قسطی */

    /* --- وضعیت‌ها --- */
    --danger: #D93A2B;
    --danger-soft: #FBE9E7;
    --success: #2F6B45;
    --success-soft: #E9F2EC;
    --warning: #96631D;
    --warning-soft: #F8F0E1;
    --info: #2A4A7A;
    --info-soft: #E9EEF6;

    /* --- شعاع گوشه --- */
    --r-xs: 8px;
    --r-sm: 12px;
    --r: 16px;
    --r-md: 20px;
    --r-lg: 26px;
    --r-xl: 34px;
    --r-2xl: 44px;
    --r-pill: 999px;

    /* --- سایه --- */
    --shadow-xs: 0 1px 2px rgba(35, 31, 26, .05);
    --shadow-sm: 0 4px 14px -8px rgba(35, 31, 26, .30);
    --shadow: 0 14px 34px -18px rgba(35, 31, 26, .34);
    --shadow-lg: 0 30px 60px -30px rgba(35, 31, 26, .40);
    --shadow-header: 0 10px 30px -18px rgba(35, 31, 26, .45);

    /* --- فاصله --- */
    --gap-1: 6px;
    --gap-2: 12px;
    --gap-3: 20px;
    --gap-4: 32px;
    --gap-5: 48px;
    --gap-6: 72px;

    /*
       عرض محتوا با اندازه‌ی مانیتور رشد می‌کند، بدون هیچ پله یا نقطه‌ی مرده:

           calc(50vw + 720px)  →  در ۱۴۴۰ دقیقاً ۱۴۴۰ (همان اندازه‌ی طرح)
                                  در ۱۹۲۰ می‌شود ۱۶۸۰
                                  در ۲۵۶۰ می‌شود ۲۰۰۰

       شیب ۰٫۵ یعنی نصف فضای اضافه به محتوا می‌رسد و نصفش حاشیه می‌ماند،
       پس نه صفحه خالی می‌ماند نه خط متن بی‌اندازه بلند می‌شود.
       سقف ۲۱۰۰ فقط برای مانیتورهای فوق‌عریض است.
    */
    --container: min(2100px, max(1440px, calc(50vw + 720px)));
    --container-narrow: 900px;
    --pad-x: clamp(16px, 3vw, 40px);
    --header-h: 96px;

    /* --- منحنی حرکت --- */
    --ease: cubic-bezier(.22, .61, .36, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --t-fast: .18s;
    --t: .28s;
    --t-slow: .6s;
}

/*
   بخش تیره: فقط متغیرهای «سطح» عوض می‌شوند و همه‌ی اجزای داخلش
   خودکار هماهنگ می‌شوند. هیچ‌جا رنگ تیره را دستی ننویسید.
*/
.tone-dark {
    --paper: var(--dark);
    --card: #26262A;
    --ink: #F4F1EC;
    --muted: rgba(244, 241, 236, .62);
    --line: rgba(244, 241, 236, .16);
    --beige: #2A2A2E;
    --shell: #232327;
    --ink-06: rgba(244, 241, 236, .06);
    --ink-10: rgba(244, 241, 236, .10);
    --ink-16: rgba(244, 241, 236, .16);
    --ink-42: rgba(244, 241, 236, .42);
    --ink-64: rgba(244, 241, 236, .64);
    --ink-86: rgba(244, 241, 236, .86);
    color: var(--ink);
    background: var(--paper);
}

/*
   نوار کهربایی تمام‌عرض. همه‌ی رنگ‌های «کم‌رنگ» و «کهربایی تیره» هم عوض می‌شوند،
   وگرنه قیمت (amber-deep) و قیمت قبلی (ink-42) روی زمینه‌ی کهربایی محو می‌شدند.
*/
.tone-amber {
    --paper: var(--amber-band);
    --card: #F5A72B;
    --ink: #231F1A;
    --muted: rgba(35, 31, 26, .70);
    --line: rgba(35, 31, 26, .22);
    --beige: #F0A62E;
    --amber-deep: #4A2A02;
    --ink-06: rgba(35, 31, 26, .08);
    --ink-10: rgba(35, 31, 26, .12);
    --ink-16: rgba(35, 31, 26, .18);
    --ink-42: rgba(35, 31, 26, .55);
    --ink-64: rgba(35, 31, 26, .70);
    --ink-86: rgba(35, 31, 26, .88);
    color: var(--ink);
    background: var(--paper);
}


/* ---------- ۰۳ ریست و پایه ---------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    /*
       اندازه‌ی پایه‌ی rem روی مانیتورهای بزرگ‌تر از ۱۴۴۰ آرام بزرگ می‌شود
       (۱۹۲۰ → ۱۷٫۲، ۲۵۶۰ → ۱۸ پیکسل) تا متن‌ها همراه عرض محتوا رشد کنند و
       روی مانیتور عریض ریز نمانند. تا ۱۴۴۰ دقیقاً همان ۱۶ پیکسل طرح است.
    */
    font-size: clamp(16px, calc(16px + (100vw - 1440px) * .0025), 18px);
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 20px);
}

body {
    margin: 0;
    font-family: 'Vazirmatn', system-ui, 'Segoe UI', Tahoma, sans-serif;
    font-size: .9375rem;
    font-weight: 400;
    line-height: 1.9;
    color: var(--ink);
    background: var(--paper);
    direction: rtl;
    text-align: right;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

img,
video {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--t-fast) var(--ease);
}

button {
    font: inherit;
    color: inherit;
    cursor: pointer;
}

svg {
    flex: none;
}

::selection {
    background: var(--amber);
    color: var(--paper);
}

:focus-visible {
    outline: 2px solid var(--amber-deep);
    outline-offset: 3px;
    border-radius: var(--r-xs);
}

[x-cloak],
.is-hidden {
    display: none !important;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--beige);
}

::-webkit-scrollbar-thumb {
    background: var(--line);
    border-radius: var(--r-pill);
    border: 3px solid var(--beige);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--ink-42);
}


/* ---------- ۰۴ تایپوگرافی ---------- */
h1, h2, h3, h4, h5, h6 {
    margin: 0 0 .5em;
    font-weight: 700;
    line-height: 1.4;
    text-wrap: balance;
}

p {
    margin: 0 0 1em;
}

p:last-child {
    margin-bottom: 0;
}

.h-display {
    font-size: clamp(2rem, 4.6vw, 3.2rem);
    font-weight: 800;
    line-height: 1.25;
}

.h-xl {
    font-size: clamp(1.6rem, 3.4vw, 2.5rem);
    font-weight: 800;
    line-height: 1.3;
}

.h-lg {
    font-size: clamp(1.3rem, 2.4vw, 1.75rem);
    font-weight: 700;
}

.h-md {
    font-size: clamp(1.05rem, 1.8vw, 1.25rem);
    font-weight: 700;
}

.lead {
    font-size: clamp(.95rem, 1.4vw, 1.05rem);
    line-height: 2;
    color: var(--muted);
    max-width: 64ch;
}

/* عدد و متن لاتین — جهت و شکل درست */
.num,
.latin {
    direction: ltr;
    unicode-bidi: isolate;
    display: inline-block;
    font-variant-numeric: tabular-nums;
}

/*
   خانه‌ی جدولی که کلاس .num دارد باید خانه‌ی جدول بماند. inline-block آن را از
   ردیف جدا می‌کرد: مرورگر یک خانه‌ی نامرئی دورش می‌ساخت و در «سفارش‌های من»
   کنار شماره سفارش یک مستطیل سفید با ارتفاع و رنگ هاور متفاوت دیده می‌شد.
*/
td.num, th.num, td.latin, th.latin { display: table-cell; text-align: start; }

.text-muted   { color: var(--muted); }
.text-amber   { color: var(--amber-deep); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-danger  { color: var(--danger); }
.text-sm      { font-size: .86rem; }
.text-xs      { font-size: .76rem; }
.fw-500       { font-weight: 500; }
.fw-700       { font-weight: 700; }
.fw-800       { font-weight: 800; }

/* لینک «همه…» با خط زیر کوتاه — امضای بصری طرح */
.link-all {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: none;
    padding-bottom: 3px;
    font-size: .82rem;
    font-weight: 500;
    color: var(--ink);
    border-bottom: 1px solid rgba(35, 31, 26, .3);
    transition: color var(--t) var(--ease), border-color var(--t) var(--ease);
}

.link-all:hover {
    color: var(--amber-deep);
    border-color: var(--amber);
}

.link-all svg {
    transition: transform var(--t) var(--ease-out);
}

.link-all:hover svg {
    transform: translateX(-4px);
}

/* خط بالای عنوان */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: .78rem;
    font-weight: 500;
    color: var(--amber-deep);
    margin: 0 0 14px;
}

.eyebrow::before {
    content: "";
    width: 26px;
    height: 2px;
    border-radius: 2px;
    background: var(--amber);
}


/* ---------- ۰۵ چیدمان ---------- */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--pad-x);
}

.container--narrow { max-width: var(--container-narrow); }
.container--wide   { max-width: min(2260px, max(1560px, calc(50vw + 840px))); }

.section {
    position: relative;
    padding-block: clamp(32px, 3.2vw, 46px) clamp(36px, 3.6vw, 52px);
    background: var(--paper);
    color: var(--ink);
}

.section--tight { padding-block: clamp(26px, 3vw, 40px); }
.section--flush { padding-block: 0; }

/* سرتیتر بخش: عنوان راست، لینک «همه…» چپ */
.section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--gap-3);
    flex-wrap: wrap;
    margin-bottom: clamp(20px, 3vw, 34px);
}

.section-head h2 {
    margin: 0;
    font-size: clamp(1.25rem, 2.2vw, 1.62rem);
    font-weight: 700;
}

.section-head .subtitle {
    margin: 6px 0 0;
    font-size: .88rem;
    color: var(--muted);
}

.section-head--center {
    flex-direction: column;
    text-align: center;
}

.grid { display: grid; gap: var(--gap-3); }

.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.grid--auto {
    grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
}

.rule {
    height: 1px;
    background: var(--line);
    border: 0;
    margin: 0;
}


/* ---------- ۰۶ دکمه‌ها ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 13px 26px;
    border: 1px solid transparent;
    border-radius: var(--r-pill);
    background: var(--dark);
    color: #fff;
    font-size: .92rem;
    font-weight: 700;
    line-height: 1.5;
    cursor: pointer;
    transition: background-color var(--t) var(--ease), color var(--t) var(--ease),
                border-color var(--t) var(--ease), transform var(--t-fast) var(--ease),
                box-shadow var(--t) var(--ease);
}

.btn:hover {
    background: var(--amber);
    color: var(--ink);
}

.btn:active { transform: scale(.98); }

.btn--amber {
    background: var(--amber);
    color: var(--ink);
}

.btn--amber:hover {
    background: var(--amber-press);
    color: #fff;
}

.btn--light {
    background: var(--card);
    color: var(--ink);
    border-color: var(--line);
}

.btn--light:hover {
    background: var(--beige);
    color: var(--amber-deep);
    border-color: var(--amber);
}

.btn--ghost {
    background: transparent;
    color: var(--ink);
    border-color: transparent;
}

.btn--ghost:hover {
    background: var(--ink-06);
    color: var(--amber-deep);
}

.btn--outline {
    background: transparent;
    color: var(--ink);
    border-color: var(--line);
}

.btn--outline:hover {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink);
}

/* دکمه‌ی تیره با حاشیه کهربایی — روی کارت‌های تبلیغاتی تیره */
.btn--on-dark {
    background: rgba(255, 255, 255, .06);
    color: #fff;
    border-color: var(--amber);
}

.btn--on-dark:hover {
    background: var(--amber);
    color: var(--ink);
}

.btn--lg  { padding: 16px 32px; font-size: 1rem; }
.btn--sm  { padding: 9px 18px; font-size: .82rem; }
.btn--block { display: flex; width: 100%; }

.btn[disabled],
.btn.is-disabled {
    opacity: .45;
    pointer-events: none;
}

/*
   ردیف دکمه‌ها. فاصله‌ی سطرها عمداً بیشتر از فاصله‌ی ستون‌هاست: دکمه‌ی «کلید»
   یک حلقه‌ی کهربایی و سایه‌ی ۱۰پیکسلی بیرون از کادرش دارد، پس وقتی در صفحه‌ی
   باریک زیر هم می‌افتند، فاصله‌ی معمول کاملاً خورده می‌شود و به هم می‌چسبند.
*/
.btn-row {
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--gap-2);
    row-gap: max(var(--gap-2), 18px);
}

/*
   --- دکمه‌ی «کلید» ---
   امضای بصری این طرح: دکمه‌ای که مثل کلید یک دستگاه واقعی برجسته است
   و با hover کهربایی روشن می‌شود. برای اقدام‌های اصلی (افزودن به سبد،
   سفارش، تماس) استفاده می‌شود.
*/
.btn-key {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 15px 28px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 18px;
    background: linear-gradient(180deg, #3B4048 0%, #2C3138 55%, #23272D 100%);
    color: var(--dark-fg);
    font-size: .92rem;
    font-weight: 700;
    line-height: 1.5;
    cursor: pointer;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .5);
    box-shadow:
        inset 0 1.5px 0 rgba(255, 255, 255, .16),
        inset 0 -4px 8px rgba(0, 0, 0, .5),
        0 0 0 1.5px rgba(242, 161, 28, .5),
        0 10px 18px rgba(0, 0, 0, .34),
        0 3px 6px rgba(0, 0, 0, .28);
    transition: transform var(--t-fast) var(--ease),
                box-shadow var(--t) var(--ease),
                background var(--t) var(--ease),
                color var(--t) var(--ease);
}

.btn-key--round {
    border-radius: 50%;
    padding: 0;
    width: 52px;
    height: 52px;
}

.btn-key:hover,
.btn-key:focus-visible {
    transform: translateY(-2px);
    background: linear-gradient(180deg, #FFD37A 0%, #F2A11C 52%, #D9860C 100%);
    color: var(--ink);
    text-shadow: none;
    box-shadow:
        inset 0 1.5px 0 rgba(255, 255, 255, .6),
        inset 0 -4px 9px rgba(150, 86, 0, .36),
        0 0 0 2px rgba(240, 199, 120, .95),
        0 0 24px rgba(242, 161, 28, .8),
        0 16px 26px rgba(0, 0, 0, .3);
}

.btn-key:active {
    transform: translateY(1px);
    background: linear-gradient(180deg, #E8930F 0%, #D9860C 60%, #C07708 100%);
    color: var(--ink);
    box-shadow:
        inset 0 5px 11px rgba(120, 68, 0, .5),
        0 0 0 2px rgba(240, 199, 120, .95),
        0 3px 8px rgba(0, 0, 0, .3);
}

.btn-key--block { display: flex; width: 100%; }

/*
   --- تب «کلید مکانیکی» ---
   تب‌های نوار کهربایی صفحه اصلی. تب فعال پایین می‌نشیند و
   چراغ آبی زیرش روشن می‌شود.
*/
.keytabs {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

.keytab {
    position: relative;
    min-width: 150px;
    min-height: 52px;
    padding: 0 22px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 14px;
    background: linear-gradient(180deg, #33383F 0%, #2A2E35 46%, #22262B 100%);
    color: #E7ECF3;
    font-family: inherit;
    font-size: .92rem;
    font-weight: 700;
    cursor: pointer;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .55);
    box-shadow:
        inset 0 1.5px 0 rgba(255, 255, 255, .13),
        inset 0 -6px 10px rgba(0, 0, 0, .45),
        0 7px 0 var(--dark-2),
        0 12px 18px rgba(0, 0, 0, .42);
    transition: transform .13s var(--ease), box-shadow var(--t) var(--ease),
                background var(--t) var(--ease), color var(--t) var(--ease);
}

/* چراغ زیر تب */
.keytab::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -16px;
    transform: translateX(-50%);
    width: 34px;
    height: 5px;
    border-radius: 4px;
    background: #23272C;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .6);
    transition: background var(--t) var(--ease), box-shadow var(--t-slow) var(--ease);
}

.keytab:hover {
    transform: translateY(3px);
    background: linear-gradient(180deg, #3C424A 0%, #31363D 46%, #272B31 100%);
    color: #fff;
    box-shadow:
        inset 0 1.5px 0 rgba(255, 255, 255, .2),
        inset 0 -6px 12px rgba(0, 0, 0, .45),
        0 4px 0 var(--dark-2),
        0 9px 15px rgba(0, 0, 0, .4);
}

.keytab:hover::after,
.keytab.is-active::after {
    background: var(--led);
    box-shadow: 0 0 8px var(--led), 0 0 20px rgba(79, 195, 255, .85),
                0 0 34px rgba(79, 195, 255, .45);
}

.keytab:active {
    transform: translateY(6px);
    box-shadow: inset 0 5px 12px rgba(0, 0, 0, .7), 0 1px 0 var(--dark-2);
}

.keytab.is-active {
    transform: translateY(4px);
    color: #fff;
    box-shadow:
        inset 0 2px 8px rgba(0, 0, 0, .6),
        inset 0 1px 0 rgba(255, 255, 255, .1),
        0 3px 0 var(--dark-2),
        0 8px 14px rgba(0, 0, 0, .4);
}

/* --- دکمه آیکونی --- */
.icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid transparent;
    border-radius: var(--r-pill);
    background: transparent;
    color: inherit;
    transition: background-color var(--t-fast) var(--ease),
                color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}

.icon-btn:hover {
    background: var(--ink-06);
    color: var(--amber-deep);
}

.icon-btn:active { transform: scale(.94); }

/* دکمه‌ی مربعی با کادر — هدر موبایل (طبق Home-Mobile) */
.icon-btn--box {
    border-radius: 14px;
    border-color: var(--ink-16);
}

.icon-btn__count {
    position: absolute;
    top: -2px;
    inset-inline-start: -2px;
    min-width: 19px;
    height: 19px;
    padding-inline: 5px;
    display: grid;
    place-items: center;
    border-radius: var(--r-pill);
    background: var(--dark);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    line-height: 1;
}

/* --- برچسب‌ها --- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 13px;
    border-radius: var(--r-pill);
    background: var(--dark);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.7;
    white-space: nowrap;
}

.badge--sale   { background: #E64020; color: #fff; }
.badge--new    { background: var(--dark); color: #fff; }
.badge--amber  { background: var(--amber); color: var(--ink); }
.badge--soft   { background: var(--beige); color: var(--ink); }
.badge--ok     { background: var(--success-soft); color: var(--success); }
.badge--warn   { background: var(--warning-soft); color: var(--warning); }
.badge--info   { background: var(--info-soft); color: var(--info); }
.badge--danger { background: var(--danger-soft); color: var(--danger); }
.badge--line   { background: transparent; color: var(--ink); border: 1px solid var(--line); }

/* چیپ — فیلتر فعال، دسته‌بندی، ویژگی */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    background: var(--card);
    color: var(--ink);
    font-size: .82rem;
    font-weight: 500;
    transition: border-color var(--t-fast) var(--ease),
                background-color var(--t-fast) var(--ease),
                color var(--t-fast) var(--ease);
}

.chip:hover {
    border-color: var(--amber);
    color: var(--amber-deep);
}

.chip--active {
    background: var(--dark);
    border-color: var(--dark);
    color: #fff;
}

.chip--active:hover {
    color: var(--amber);
}

/* برچسب وضعیت سفارش — نامِ رنگ از `Order.status_color` می‌آید */
.chip--gray  { background: var(--ink-06); border-color: transparent; color: var(--muted); }
.chip--amber { background: var(--warning-soft); border-color: transparent; color: var(--warning); }
.chip--blue  { background: var(--info-soft); border-color: transparent; color: var(--info); }
.chip--green { background: var(--success-soft); border-color: transparent; color: var(--success); }
.chip--red   { background: var(--danger-soft); border-color: transparent; color: var(--danger); }

.chip--gray:hover,
.chip--amber:hover,
.chip--blue:hover,
.chip--green:hover,
.chip--red:hover { border-color: transparent; color: inherit; }

.chip__close {
    display: grid;
    place-items: center;
    width: 16px;
    height: 16px;
    border: 0;
    border-radius: 50%;
    background: var(--ink-10);
    color: inherit;
    font-size: .8rem;
    line-height: 1;
}

.chip__close:hover {
    background: var(--danger);
    color: #fff;
}

/* نقطه‌ی رنگ — انتخاب رنگ محصول و فیلتر */
.dot {
    display: inline-block;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid transparent;
    box-shadow: inset 0 0 0 1px var(--ink-10);
    cursor: pointer;
    transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

.dot:hover { transform: scale(1.1); }

.dot.is-active {
    border-color: var(--ink);
    box-shadow: inset 0 0 0 2px var(--card);
}


/* ---------- ۰۷ فرم‌ها ---------- */
.field { margin-bottom: var(--gap-3); }

label,
.field__label {
    display: block;
    margin-bottom: 8px;
    font-size: .85rem;
    font-weight: 700;
    color: var(--ink);
}

.field__label .req { color: var(--danger); margin-inline-start: 3px; }

input[type="text"],
input[type="tel"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="date"],
input[type="file"],
select,
textarea {
    width: 100%;
    padding: 13px 18px;
    border: 1px solid var(--ink-16);
    border-radius: var(--r);
    background: var(--card);
    color: var(--ink);
    font-family: inherit;
    font-size: .9rem;
    line-height: 1.8;
    transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

input::placeholder,
textarea::placeholder { color: var(--ink-42); }

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--amber-deep);
    box-shadow: 0 0 0 3px rgba(242, 161, 28, .18);
}

textarea {
    min-height: 130px;
    resize: vertical;
}

/*
   کادر انتخاب فایل. بدون جاوااسکریپت همان کادر بومی است و فقط دکمه‌ی داخلش
   هم‌شکل دکمه‌های سایت می‌شود؛ با جاوااسکریپت (کلاس .filefield) دکمه و نام
   فایل فارسی جایش می‌نشیند.
*/
input[type="file"] {
    padding: 8px 10px;
    font-size: .84rem;
    color: var(--muted);
    cursor: pointer;
}

input[type="file"]::file-selector-button {
    margin-inline-end: 12px;
    padding: 8px 18px;
    border: 1px solid var(--ink-16);
    border-radius: 999px;
    background: var(--paper);
    color: var(--ink);
    font-family: inherit;
    font-size: .84rem;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

input[type="file"]::file-selector-button:hover {
    background: var(--beige);
    border-color: var(--amber);
}

.filefield {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--ink-16);
    border-radius: var(--r);
    background: var(--card);
    cursor: pointer;
    transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

.filefield:hover { border-color: var(--amber); }

.filefield:focus-within {
    border-color: var(--amber-deep);
    box-shadow: 0 0 0 3px rgba(242, 161, 28, .18);
}

/* خود کادر پنهان می‌شود ولی با Tab هنوز فوکوس می‌گیرد */
.filefield input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    opacity: 0;
}

.filefield__btn {
    flex: none;
    padding: 8px 18px;
    border: 1px solid var(--ink-16);
    border-radius: 999px;
    background: var(--paper);
    font-size: .84rem;
    font-weight: 700;
}

.filefield:hover .filefield__btn { background: var(--beige); }

.filefield__name {
    min-width: 0;
    overflow: hidden;
    font-size: .84rem;
    color: var(--muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.filefield.has-file .filefield__name { color: var(--ink); font-weight: 700; }

/* دکمه‌ی کپی کنار شماره کارت و شبا */
.copy-btn {
    margin-inline-start: 10px;
    padding: 4px 12px;
    border: 1px solid var(--ink-16);
    border-radius: 999px;
    background: var(--paper);
    color: var(--muted);
    font-family: inherit;
    font-size: .74rem;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.copy-btn:hover { background: var(--beige); color: var(--ink); }
.copy-btn.is-done { background: var(--amber); border-color: var(--amber); color: #2A1B05; }

/*
   ظاهر بومی select در بعضی سیستم‌ها متن فارسی را درست نمی‌چسباند،
   پس ظاهر خودمان را می‌کشیم.
*/
select {
    appearance: none;
    -webkit-appearance: none;
    padding-inline-end: 42px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23635E57' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 16px center;
}

input[type="checkbox"],
input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: var(--amber-deep);
    cursor: pointer;
    vertical-align: -4px;
}

.check-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 11px;
    font-size: .88rem;
    cursor: pointer;
}

.check-row label {
    margin: 0;
    font-weight: 400;
    cursor: pointer;
}

/* تیک با توضیح زیرش (مثل «ذخیره در آدرس‌های من» در تسویه) */
.check-row--note { align-items: flex-start; margin-top: var(--gap-2, 14px); }
.check-row--note input { margin-top: 3px; }
.check-row--note .help-text { display: block; margin-top: 2px; }

/* «شهر دیگر»: کادر نام شهر فقط وقتی لازم است (place.js)؛ بدون JS همیشه پیداست */
.city-other { display: grid; gap: 4px; margin-top: 8px; }
.city-other[hidden] { display: none; }

.field__help,
.help-text {
    margin-top: 6px;
    font-size: .78rem;
    color: var(--muted);
    line-height: 1.9;
}

.field__error,
.errorlist {
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
    font-size: .8rem;
    color: var(--danger);
}

.form-error {
    padding: 13px 18px;
    margin-bottom: var(--gap-3);
    border-radius: var(--r);
    background: var(--danger-soft);
    color: var(--danger);
    font-size: .86rem;
}

.form-error ul { margin: 0; padding-inline-start: 1.2em; }

.form-grid { display: grid; gap: 0 var(--gap-3); }
.form-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.form-row { margin-bottom: var(--gap-3); }

/* ورودی جست‌وجو با آیکون گرد کهربایی */
.search-field {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 7px 7px 18px;
    border: 1px solid var(--ink-16);
    border-radius: var(--r-pill);
    background: var(--card);
    transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

.search-field:focus-within {
    border-color: var(--amber);
    box-shadow: 0 0 0 3px rgba(242, 161, 28, .16);
}

.search-field input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 6px 0;
}

.search-field input:focus { box-shadow: none; }

.search-field__go {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: none;
    border: 0;
    border-radius: 50%;
    background: var(--amber);
    color: var(--ink);
    transition: background-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}

.search-field__go:hover { background: var(--amber-press); color: #fff; }
.search-field__go:active { transform: scale(.93); }

/* نوار لغزنده قیمت */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    direction: ltr;
    width: 100%;
    height: 30px;
    padding: 0;
    background: transparent;
    cursor: pointer;
}

input[type="range"]::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: var(--r-pill);
    background: linear-gradient(90deg,
        var(--amber) 0%, var(--amber) var(--fill, 50%),
        var(--ink-16) var(--fill, 50%), var(--ink-16) 100%);
}

input[type="range"]::-moz-range-track {
    height: 6px;
    border-radius: var(--r-pill);
    background: var(--ink-16);
}

input[type="range"]::-moz-range-progress {
    height: 6px;
    border-radius: var(--r-pill);
    background: var(--amber);
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    margin-top: -7px;
    border-radius: 50%;
    background: var(--paper);
    border: 2px solid var(--amber);
    transition: transform .16s var(--ease);
}

input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--paper);
    border: 2px solid var(--amber);
}

input[type="range"]:active::-webkit-slider-thumb { transform: scale(.92); }

/* کد تأیید */
.otp-input {
    text-align: center;
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: .4em;   /* فقط رقم لاتین است، بی‌خطر */
    direction: ltr;
}


/* ---------- ۰۸ هدر ---------- */

/* --- نوار تیره‌ی بالای سایت --- */
.topbar {
    background: var(--dark);
    color: rgba(255, 255, 255, .74);
    font-size: .76rem;
}

.topbar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-3);
    min-height: 40px;
}

.topbar__group {
    display: flex;
    align-items: center;
    gap: 18px;
    white-space: nowrap;
}

.topbar__group:last-child a { color: var(--amber); }
.topbar a:hover { color: var(--gold-soft); }

.topbar__notice {
    color: var(--amber);
    font-weight: 500;
    text-align: center;
    flex: 1;
}

/* --- هدر اصلی: نوار شناور قرصی‌شکل --- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 200;
    padding-block: 14px;
    background: var(--paper);
    transition: box-shadow var(--t) var(--ease), padding var(--t) var(--ease), margin var(--t) var(--ease);
}

/*
   جمع‌شدن هدر نباید جای آن را در صفحه عوض کند. قبلاً فقط padding کم می‌شد،
   پس کل صفحه ۱۲ پیکسل بالا می‌پرید، اسکرول دوباره از آستانه عبور می‌کرد و
   کلاس پشت‌سرهم روشن و خاموش می‌شد — هدر هنگام اسکرول به بالا می‌لرزید.
   margin-bottom همان ۱۲ پیکسل را جبران می‌کند تا ارتفاع کل ثابت بماند.
*/
.site-header.is-stuck {
    padding-block: 8px;
    margin-bottom: 12px;
    box-shadow: 0 1px 0 var(--ink-10);
    background: color-mix(in srgb, var(--paper) 92%, transparent);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
}

.header-bar {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--gap-2);
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    padding: 10px 14px;
    border: 1px solid var(--ink-10);
    border-radius: var(--r-xl);
    background: var(--card);
    box-shadow: var(--shadow-header);
}

.header-logo {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding-inline: 8px;
    flex: none;
}

/*
   لوگوی برند «عمودی» است (نشان مبل بالا، نوشته پایین)، پس اگر خیلی کوتاه
   شود نوشته‌اش خوانده نمی‌شود. ارتفاعش از ۳۸ به ۵۲ رسید تا در نوار هدر
   هم جا شود و هم خوانا بماند. object-fit مانع کشیده‌شدنش می‌شود.
*/
.header-logo img {
    max-height: clamp(42px, 3.4vw, 54px);
    width: auto;
    object-fit: contain;
}

.header-logo__mark {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--amber);
    color: var(--ink);
    font-size: 1.05rem;
    font-weight: 800;
}

.header-logo__text {
    font-size: .95rem;
    font-weight: 800;
    white-space: nowrap;
}

/* دکمه‌ی دسته‌بندی‌ها (بازکننده‌ی مگامنو) */
.cats-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 16px;
    border: 0;
    border-radius: var(--r-md);
    background: transparent;
    color: var(--ink);
    font-size: .9rem;
    font-weight: 700;
    transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.cats-btn:hover,
.cats-wrap:hover .cats-btn,
.cats-wrap:focus-within .cats-btn {
    background: var(--beige);
    color: var(--amber-deep);
}

.cats-btn__lines {
    display: inline-flex;
    flex-direction: column;
    gap: 3px;
    width: 18px;
}

.cats-btn__lines span {
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: background-color var(--t-fast) var(--ease);
}

.cats-btn__lines span:nth-child(2) { width: 72%; }

/*
   عمداً static است: مگامنو به نوار هدر تکیه می‌دهد نه به دکمه. اگر به دکمه
   تکیه می‌داد، پنل پهن از لبه‌ی صفحه بیرون می‌زد و در نمایشگرهای حدود ۱۰۰۰
   پیکسل، صفحه اسکرول افقی می‌گرفت (حتی وقتی پنل بسته بود).
*/
.cats-wrap { position: static; }

/* --- مگامنوی دسته‌بندی‌ها --- */
.mega {
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;
    z-index: 60;
    width: min(1060px, calc(100vw - 40px));
    padding: 24px;
    border: 1px solid var(--ink-10);
    border-radius: var(--r-lg);
    background: var(--card);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 10px);
    transition: opacity var(--t) var(--ease), transform var(--t) var(--ease),
                visibility var(--t);
}

.cats-wrap:hover .mega,
.cats-wrap:focus-within .mega {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

.mega__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
    gap: 20px 26px;
}

.mega__col > strong {
    display: block;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line);
    font-size: .86rem;
    font-weight: 800;
    color: var(--ink);
}

.mega__col a {
    display: block;
    padding: 5px 0;
    font-size: .84rem;
    color: var(--muted);
}

.mega__col a:hover {
    color: var(--amber-deep);
    padding-inline-start: 5px;
}

/* --- منوی اصلی --- */
.main-nav ul {
    display: flex;
    align-items: center;
    gap: 2px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.main-nav a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 11px 15px;
    border-radius: var(--r-md);
    font-size: .9rem;
    font-weight: 500;
    color: var(--ink-86);
    white-space: nowrap;
    transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.main-nav a:hover,
.main-nav a.is-active {
    background: var(--beige);
    color: var(--amber-deep);
}

.main-nav .is-highlighted > a { color: var(--amber-deep); font-weight: 700; }

/* --- آیکون‌های سمت چپ هدر --- */
.header-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    padding-inline-start: 6px;
    margin-inline-start: 6px;
    border-inline-start: 1px solid var(--line);
    flex: none;
}

/* --- جست‌وجوی کشویی هدر --- */
.header-search {
    position: absolute;
    top: calc(100% + 12px);
    inset-inline: 0;
    z-index: 55;
    padding: 14px;
    border: 1px solid var(--ink-10);
    border-radius: var(--r-lg);
    background: var(--card);
    box-shadow: var(--shadow-lg);
}

.search-suggest:not(:empty) {
    margin-top: 10px;
    max-height: 60vh;
    overflow-y: auto;
    border-top: 1px solid var(--line);
}

.suggest-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 6px;
    border-bottom: 1px solid var(--ink-06);
}

.suggest-item:last-child { border-bottom: 0; }
.suggest-item:hover { background: var(--beige); border-radius: var(--r-sm); }

.suggest-item img {
    width: 46px;
    height: 46px;
    object-fit: cover;
    border-radius: var(--r-sm);
    flex: none;
}

.suggest-item__body { min-width: 0; flex: 1; }

.suggest-item strong {
    display: block;
    font-size: .86rem;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.suggest-item small { font-size: .76rem; color: var(--muted); }

.search-suggest__empty {
    padding: 16px;
    text-align: center;
    font-size: .85rem;
    color: var(--muted);
}

/* --- هدر موبایل --- */
.mobile-header {
    display: none;
    position: sticky;
    top: 0;
    z-index: 200;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px var(--pad-x);
    background: var(--paper);
    border-bottom: 1px solid var(--ink-10);
}

.mobile-header__side {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mobile-header .header-logo { padding-inline: 0; }
.mobile-header .header-logo img { max-height: clamp(40px, 12vw, 50px); }

/*
   در طرح Home-Classic صفحه اصلی روی دسکتاپ اصلاً هدر ندارد؛ ناوبری‌اش
   داخل «قاب داشبوردی» هیرو (ریل آیکون‌ها + چیپ‌های دسته‌بندی) و نوار
   تیره‌ی بالای صفحه است. در موبایل هدر سر جایش می‌ماند.
*/
@media (min-width: 981px) {
    body.is-home .site-header { display: none; }
}

/* --- کشوی منوی موبایل (طبق Home-Mobile) --- */
.drawer {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: rgba(20, 20, 23, .5);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    animation: fade-in var(--t) var(--ease) both;
}

.drawer__panel {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    /* طرح: min(300px, 82%) — سیال شده تا روی گوشی بزرگ و تبلت هم متناسب بماند */
    width: min(clamp(280px, 80vw, 380px), 88%);
    padding: clamp(18px, 5vw, 26px) clamp(16px, 4.6vw, 24px);
    background: var(--paper);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    animation: slide-in-end .38s var(--ease-out) both;
}

@keyframes slide-in-end {
    from { transform: translateX(-100%); }
    to   { transform: translateX(0); }
}

@keyframes fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.drawer__head strong { font-size: clamp(.88rem, 3.6vw, 1rem); font-weight: 800; }

.drawer__close {
    display: grid;
    place-items: center;
    width: clamp(36px, 10vw, 42px);
    height: clamp(36px, 10vw, 42px);
    padding: 0;
    border: 1px solid var(--ink-16);
    border-radius: 12px;
    background: none;
    color: var(--ink);
    cursor: pointer;
}

.drawer__close:hover { background: var(--beige); }

/* هر ردیف منو یک قرص بژ با آیکون کهربایی است */
.drawer__row,
.drawer__group > summary {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: none;
    padding: clamp(12px, 3.4vw, 15px) clamp(13px, 3.6vw, 16px);
    border-radius: 14px;
    background: var(--beige);
    font-size: clamp(.84rem, 3.5vw, .95rem);
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.drawer__row svg,
.drawer__group summary svg { flex: none; color: var(--amber); }

.drawer__row:hover { background: var(--amber); color: var(--ink); }
.drawer__row:hover svg { color: var(--ink); }

/* آکاردئون دسته‌بندی‌ها — با <details> کار می‌کند، بدون جاوااسکریپت */
.drawer__group {
    flex: none;
    border-radius: 14px;
    background: var(--beige);
}

.drawer__group > summary {
    justify-content: space-between;
    font-weight: 700;
    list-style: none;
}

.drawer__group > summary::-webkit-details-marker { display: none; }

.drawer__group > summary > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.drawer__group > summary > svg { transition: transform var(--t-fast) var(--ease); }
.drawer__group[open] > summary > svg { transform: rotate(180deg); }

.drawer__group-body {
    display: flex;
    flex-direction: column;
    padding: 0 8px 8px;
}

.drawer__group-body a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: clamp(10px, 3vw, 13px) 12px;
    border-radius: 10px;
    font-size: clamp(.78rem, 3.3vw, .9rem);
    font-weight: 600;
    color: var(--ink-86);
}

.drawer__group-body a svg { color: var(--amber); }
.drawer__group-body a:hover { background: var(--card); color: var(--amber-deep); }

/* دکمه‌ی تماس ته کشو */
.drawer__call {
    display: grid;
    place-items: center;
    flex: none;
    min-height: clamp(46px, 12.5vw, 54px);
    margin-top: 12px;
    border-radius: var(--r-pill);
    background: var(--amber);
    color: var(--ink);
    font-size: .85rem;
    font-weight: 800;
}

.drawer__call:hover { background: var(--dark); color: var(--paper); }

/* --- نوار پایینی موبایل --- */
/*
   --- داک شناور موبایل ---
   نوار تیره با «حفره» و گوی کهربایی روی آیتم فعال، طبق Home-Mobile.
   شکل نوار یک مسیر SVG است که جاوااسکریپت با عرض واقعی می‌سازد؛
   اگر جاوااسکریپت اجرا نشود، مستطیل گرد پیش‌فرض CSS جایش را می‌گیرد.
*/
.dock {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 180;
    display: none;
    justify-content: center;
    padding: 40px clamp(8px, 3vw, 12px) calc(10px + env(safe-area-inset-bottom, 0px));
    pointer-events: none;
    /* طرح Home-Mobile زیر داک حاله‌ی سفید داشت؛ روی بخش‌های رنگی (نوار کهربایی)
       دکمه‌ها را کدر می‌کرد و صاحب فروشگاه خواست حذف شود */
    background: none;
}

.dock__track {
    position: relative;
    display: flex;
    align-items: flex-end;
    width: 100%;
    /* روی تبلت کشیده نشود؛ نسبت‌های طرح موبایل حفظ می‌شود */
    max-width: 520px;
    height: 62px;
    padding: 0 clamp(16px, 7vw, 30px);
    pointer-events: auto;
}

.dock__bg {
    position: absolute;
    left: 0;
    top: -14px;
    width: 100%;
    height: 76px;
    overflow: visible;
    filter: drop-shadow(0 10px 26px rgba(35, 31, 26, .32));
}

.dock__bg path { fill: var(--dark); }

/* تور ایمنی: تا وقتی مسیر SVG ساخته نشده، نوار ساده‌ی گرد دیده می‌شود */
.dock__track::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 26px;
    background: var(--dark);
}

.js .dock__track::before { display: none; }

.dock__glow {
    position: absolute;
    top: -32px;
    left: 0;
    z-index: 1;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 55%,
        rgba(242, 161, 28, .45) 0%,
        rgba(242, 161, 28, .16) 46%,
        rgba(242, 161, 28, 0) 72%);
    filter: blur(7px);
    will-change: transform;
    pointer-events: none;
}

.dock__orb {
    position: absolute;
    top: -26px;
    left: 0;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 28%, #FFD778 0%, #F2A11C 52%, #C97A08 100%);
    color: #fff;
    box-shadow:
        0 12px 26px rgba(201, 122, 8, .42),
        inset 0 2px 4px rgba(255, 255, 255, .55),
        inset 0 -4px 8px rgba(120, 70, 0, .35);
    /*
       عمداً transition ندارد: جاوااسکریپت هر فریم جای گوی را می‌نویسد و
       یک transition روی transform هر بار از نو شروع می‌شد و گوی همیشه
       نیم‌ثانیه عقب‌تر از حفره‌ی نوار می‌آمد — همان «کندی» جابه‌جایی.
    */
    will-change: transform;
    pointer-events: none;
}

/* بدون جاوااسکریپت گوی جایی برای نشستن ندارد، پس دیده نمی‌شود */
.dock__orb,
.dock__glow { display: none; }
.js .dock__orb { display: grid; }
.js .dock__glow { display: block; }
/* صفحه‌ای بیرون از پنج بخش داک (وبلاگ، صفحه‌ی ثابت): نوار صاف، بدون گوی (initDock) */
.js .dock__track.is-flat .dock__orb,
.js .dock__track.is-flat .dock__glow { display: none; }

.dock__item {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    flex: 1;
    min-width: 0;
    height: 62px;
    color: rgba(251, 248, 243, .78);
    transition: opacity .18s var(--ease), color .18s var(--ease);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.dock__item:hover { color: var(--paper); }

.dock__badge {
    position: absolute;
    top: 10px;
    inset-inline-start: 50%;
    transform: translateX(6px);
    min-width: 16px;
    height: 16px;
    padding-inline: 4px;
    display: grid;
    place-items: center;
    border-radius: var(--r-pill);
    background: var(--amber);
    color: var(--ink);
    font-size: .6rem;
    font-weight: 700;
}


/* ---------- ۰۹ فوتر ---------- */
/*
   فوتر دقیقاً طبق طرح site-design/Home-Classic.dc.html:
   ردیف معرفی برند، سپس ستون نقشه/نمادها کنار لینک‌ها و تماس و خبرنامه،
   و در آخر نوار پایین با دکمه‌ی گرد بازگشت به بالا.
*/
.site-footer {
    background: var(--paper);
    border-top: 1px solid var(--ink-10);
    color: var(--ink);
}

/* --- ردیف معرفی برند --- */
.footer-about {
    display: grid;
    grid-template-columns: minmax(0, clamp(240px, 22vw, 380px)) minmax(0, 1fr);
    gap: clamp(24px, 3vw, 56px);
    align-items: start;
    padding: clamp(28px, 3vw, 46px) 0 clamp(24px, 2.6vw, 38px);
    border-bottom: 1px solid rgba(35, 31, 26, .09);
}

.footer-about__brand h2 {
    margin: 0;
    font-size: clamp(1.25rem, 2.2vw, 1.7rem);
    font-weight: 800;
    line-height: 1.3;
}

.footer-about__brand img {
    display: block;
    height: clamp(80px, 7vw, 132px);
    width: auto;
    max-width: 100%;
    margin-top: clamp(16px, 1.8vw, 28px);
    object-fit: scale-down;
    object-position: right;
}

/* نشان جایگزین لوگو، تا وقتی مدیر فایل لوگو را آپلود نکرده */
.footer-about__mark {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 26px;
    font-size: 1.15rem;
    font-weight: 800;
}

.footer-about__mark .header-logo__mark { width: 54px; height: 54px; font-size: 1.5rem; }

.footer-about__text {
    padding-inline-start: 40px;
    border-inline-start: 1px solid rgba(35, 31, 26, .12);
}

.footer-about__text .lead {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 2;
}

.footer-about__text p + p {
    margin: 16px 0 0;
    font-size: .88rem;
    line-height: 2.2;
    color: var(--ink-64);
    max-width: 70ch;
}

.footer-about__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.footer-about__chips .chip {
    padding: 8px 16px;
    border: 0;
    background: var(--beige);
    color: var(--ink-64);
    font-size: .78rem;
}

/* --- ردیف دوم --- */
.footer-grid {
    display: grid;
    grid-template-columns: clamp(190px, 16vw, 280px) minmax(0, 1fr);
    gap: clamp(24px, 3.2vw, 60px);
    padding: clamp(28px, 3vw, 46px) 0 clamp(22px, 2.4vw, 36px);
}

.footer-side {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* کارت نمایشگاه */
.footer-map {
    display: block;
    width: 100%;
    border: 1px solid var(--ink-16);
    border-radius: 14px;
    overflow: hidden;
    background: var(--beige);
    color: var(--ink);
}

.footer-map__img {
    position: relative;
    display: block;
    height: clamp(130px, 10.4vw, 200px);
    overflow: hidden;
}

.footer-map__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.footer-map__pill {
    position: absolute;
    bottom: 10px;
    inset-inline-start: 10px;
    padding: 6px 12px;
    border-radius: var(--r-pill);
    background: rgba(35, 31, 26, .86);
    color: var(--paper);
    font-size: clamp(.72rem, .66rem + .15vw, .78rem);
    font-weight: 600;
}

.footer-map__go {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 15px;
    background: var(--dark);
    color: var(--paper);
    font-size: .78rem;
    font-weight: 600;
    transition: background-color var(--t) var(--ease), color var(--t) var(--ease);
}

.footer-map__go svg { flex: none; color: var(--amber); }

.footer-map:hover .footer-map__go { background: var(--amber); color: var(--ink); }
.footer-map:hover .footer-map__go svg { color: var(--ink); }

/* شبکه‌های اجتماعی */
.social-links {
    display: flex;
    gap: 10px;
    width: 100%;
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid rgba(35, 31, 26, .12);
}

.social-links a {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--ink-16);
    border-radius: 12px;
    color: var(--ink-64);
    transition: background-color var(--t) var(--ease), color var(--t) var(--ease),
                border-color var(--t) var(--ease);
}

.social-links a:hover {
    background: var(--amber);
    border-color: var(--amber);
    color: var(--ink);
}

/* نمادهای اعتماد — دو دایره‌ی شیشه‌ای */
.trust-badges {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 16px;
}

.trust-badge {
    display: grid;
    place-items: center;
    width: clamp(76px, 5.6vw, 96px);
    height: clamp(76px, 5.6vw, 96px);
    padding: 6px;
    text-align: center;
    line-height: 1.5;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, .92) 0%,
        rgba(247, 244, 239, .74) 55%,
        rgba(255, 255, 255, .58) 100%);
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: 50%;
    box-shadow: var(--shadow-sm);
    font-size: clamp(.72rem, .66rem + .12vw, .78rem);
    color: var(--ink-64);
}

.trust-badge svg { display: block; margin: 0 auto 4px; color: var(--amber); }
.trust-badge img { max-width: 100%; max-height: 70px; }

/* --- ستون اصلی فوتر --- */
.footer-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/*
   لینک‌ها یک فهرست تخت‌اند که ستون‌به‌ستون پر می‌شوند؛ تعداد ردیف
   (--rows-3) را سرور از روی تعداد لینک‌ها می‌دهد تا هر ستون به یک
   اندازه لینک داشته باشد.
*/
.footer-links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(var(--rows-3, 4), auto);
    grid-auto-flow: column;
    gap: 12px 26px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--ink-10);
}

.footer-links a {
    font-size: .82rem;
    color: var(--ink-64);
    transition: color var(--t-fast) var(--ease);
}

.footer-links a:hover { color: var(--amber-deep); }

/* ردیف اطلاعات تماس */
.footer-contact {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    padding: 24px 0;
    border-bottom: 1px solid var(--ink-10);
}

.footer-contact__item {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    text-align: right;
}

.footer-contact__icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: none;
    border-radius: 50%;
    background: rgba(242, 161, 28, .09);
    color: var(--amber);
}

.footer-contact__item small {
    display: block;
    font-size: .7rem;
    color: var(--ink-42);
}

.footer-contact__item strong,
.footer-contact__item a {
    font-size: .92rem;
    font-weight: 700;
}

.footer-contact__item a:hover { color: var(--amber-deep); }

/* خبرنامه */
.footer-news {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(min(240px, 100%), 1.6fr) auto;
    align-items: center;
    gap: 16px;
    padding-top: 26px;
}

.footer-news__text {
    margin: 0;
    font-size: .82rem;
    color: var(--ink-64);
}

.footer-news__text strong {
    color: var(--amber);
    font-size: .88rem;
    font-weight: 800;
}

/* --- نوار پایین --- */
.footer-bottom {
    padding-bottom: 12px;
    font-size: .78rem;
    color: var(--ink-64);
}

.footer-bottom .container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-3);
}

.footer-bottom strong { color: var(--ink); }
.footer-bottom__credit { margin-inline-end: 70px; }

/* دکمه‌ی گرد بازگشت به بالا، نشسته روی لبه‌ی نوار پایین */
.footer-top {
    position: absolute;
    inset-inline-end: var(--pad-x);
    top: -18px;
    width: 46px;
    height: 46px;
    padding: 0;
}

/* --- ریسپانسیو فوتر --- */
@media (max-width: 980px) {
    .footer-about,
    .footer-grid {
        grid-template-columns: 1fr;
        gap: clamp(18px, 5vw, 26px);
    }

    .footer-about__text {
        padding-inline-start: 0;
        border-inline-start: 0;
        padding-top: 20px;
        border-top: 1px solid var(--ink-10);
    }

    .footer-about__brand img { height: clamp(56px, 18vw, 80px); }

    /*
       در موبایل فوتر نباید یک ستون بلند شود. نقشه یک ردیف کامل می‌گیرد و
       شبکه‌های اجتماعی و نمادها کنار هم در ردیف بعد می‌نشینند؛ ستون‌های
       لینک و تماس هم با auto-fit خودشان دو یا سه‌تایی می‌شوند.
    */
    .footer-side {
        display: flex;
        /* پایه‌ی دسکتاپ column است؛ اینجا حتماً باید row شود وگرنه
           flex-wrap ستون جدید می‌سازد و از لبه‌ی صفحه بیرون می‌زند. */
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: clamp(12px, 4vw, 20px);
        width: 100%;
    }

    .footer-map { flex: 1 1 min(280px, 100%); }
    .footer-map__img { height: clamp(110px, 34vw, 150px); }

    .social-links {
        flex: 1 1 auto;
        width: auto;
        margin-top: 0;
        padding-top: 0;
        border-top: 0;
    }

    .trust-badges { flex: 0 1 auto; margin-top: 0; }
    .trust-badge { width: clamp(66px, 20vw, 82px); height: clamp(66px, 20vw, 82px); }

    .footer-links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(var(--rows-2, 6), auto);
        gap: clamp(10px, 3vw, 14px) clamp(10px, 3vw, 26px);
        padding-bottom: clamp(18px, 5vw, 28px);
    }

    .footer-contact {
        grid-template-columns: repeat(auto-fit, minmax(min(165px, 100%), 1fr));
        gap: clamp(14px, 4vw, 24px);
        padding-block: clamp(16px, 5vw, 24px);
    }

    .footer-contact__item { justify-content: flex-start; }

    .footer-news { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
    .footer-bottom .container { flex-direction: column; text-align: center; }
    .footer-bottom__credit { margin-inline-end: 0; }
    .footer-top { position: static; margin-top: 8px; }
}

/* دکمه بازگشت به بالا */
.to-top {
    position: fixed;
    inset-inline-start: 22px;
    bottom: 22px;
    z-index: 150;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--card);
    color: var(--ink);
    box-shadow: var(--shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity var(--t) var(--ease), transform var(--t) var(--ease),
                visibility var(--t), background-color var(--t) var(--ease);
}

.to-top.is-on {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.to-top:hover { background: var(--amber); }


/* ---------- ۱۰ هیرو صفحه اصلی ---------- */
/*
   «قاب داشبوردی» صفحه اصلی — دقیقاً طبق site-design/Home-Classic.dc.html
   و site-design/Home-Mobile.dc.html.

   دسکتاپ: سه ستون در یک قاب گرد بزرگ.
       ستون چپ   (۲۵۰px) — جست‌وجو، کارت پیشنهاد ویژه، بنر تبلیغاتی تیره
       ستون میانی (۱fr)  — اسلایدشوی اصلی + متن + پنل کهربایی دسته‌بندی
       ستون راست  (۵۸px) — ریل آیکون‌ها و دکمه‌های گرد

   قاب عمداً `direction: ltr` است (مثل طرح) تا ترتیب ستون‌ها همان بماند؛
   متن هر جزء داخل خودش دوباره rtl می‌شود.

   موبایل: ستون چپ و ریل حذف می‌شوند و فقط جست‌وجو + اسلایدشو + دسته‌بندی
   می‌ماند؛ ناوبری به داک شناور پایین صفحه منتقل می‌شود.
*/

.hero {
    padding: 8px 0 30px;
}

.hero .container {
    max-width: min(2100px, max(1440px, calc(50vw + 720px)));
    padding-inline: clamp(12px, 1.8vw, 24px);
}

.hero__frame {
    direction: ltr;
    display: grid;
    grid-template-columns:
        minmax(0, clamp(250px, 15vw, 340px))
        minmax(0, 1fr)
        clamp(58px, 3.4vw, 76px);
    column-gap: clamp(44px, 3vw, 68px);
    row-gap: 16px;
    padding: 14px;
    border-radius: 40px;
    background: #EDECEA;
    background: var(--shell);
}

/* ============ ستون چپ ============ */
.hero__side {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    /* طبق طرح، ستون کمی به سمت قاب اسلایدشو کشیده می‌شود */
    margin-right: -28px;
}

/* --- کادر جست‌وجو --- */
/* نسخهٔ موبایلی جست‌وجو در دسکتاپ دیده نمی‌شود */
.hero__search.hero__search--mobile { display: none; }

.hero__search {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 9px;
    border-radius: 22px;
    background: var(--card);
}

.hero__search input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: none;
    color: var(--ink);
    font-family: inherit;
    font-size: .74rem;
    outline: none;
}

.hero__search input::placeholder { color: var(--ink-42); }

.hero__search-go {
    flex: none;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--amber);
    color: var(--ink);
    cursor: pointer;
    transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.hero__search-go:hover { background: var(--amber-deep); color: #fff; }

.hero__search-hint {
    flex: none;
    display: grid;
    place-items: center;
    color: var(--ink-42);
}

/* --- کارت سفید پیشنهاد ویژه --- */
.hero__card {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border-radius: 26px;
    background: var(--card);
}

.hero__card-head {
    display: flex;
    align-items: center;
    gap: 7px;
    direction: rtl;
    font-size: .76rem;
    font-weight: 700;
}

.hero__card-head svg { color: var(--amber); }

.mini-product {
    position: relative;
    display: block;
    height: clamp(118px, 9vw, 168px);
    border-radius: 20px;
    overflow: hidden;
    background: var(--sand-1);
}

.mini-product img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .9s var(--ease-out);
}

.mini-product:hover img { transform: scale(1.05); }

.mini-product::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10, 10, 12, .66) 0%, rgba(10, 10, 12, 0) 56%);
    pointer-events: none;
}

.mini-product__cap {
    position: absolute;
    left: 13px;
    bottom: 11px;
    z-index: 1;
    display: grid;
    gap: 1px;
    direction: rtl;
    color: #fff;
    pointer-events: none;
}

.mini-product__cap strong {
    font-size: .73rem;
    font-weight: 700;
    line-height: 1.5;
}

.mini-product__cap span {
    font-size: .72rem;
    font-weight: 700;
    opacity: .9;
}

/* نقطه‌های اسلایدر */
.dots {
    display: flex;
    gap: 4px;
}

.dots--center { justify-content: center; }

.dots span {
    width: 12px;
    height: 3px;
    border-radius: 9px;
    background: var(--ink-16);
    transition: width var(--t) var(--ease), background-color var(--t) var(--ease);
}

.dots span.is-active { width: 20px; background: var(--amber); }
.dots--ink span { background: rgba(28, 28, 31, .28); }
.dots--ink span.is-active { background: var(--dark); }

/* --- بنر تبلیغاتی تیره --- */
.hero__promo {
    position: relative;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 9px;
    min-height: clamp(196px, 14vw, 268px);
    padding: clamp(16px, 1.2vw, 24px);
    border-radius: 26px;
    background: var(--dark);
    overflow: hidden;
    direction: rtl;
    color: var(--paper);
}

.hero__promo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s var(--ease-out);
}

.hero__promo:hover img { transform: scale(1.05); }

.hero__promo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        rgba(14, 14, 16, .9) 0%,
        rgba(14, 14, 16, .34) 62%,
        rgba(14, 14, 16, .06) 100%);
    pointer-events: none;
}

.hero__promo > * { position: relative; z-index: 1; }

.hero__promo strong {
    font-size: .88rem;
    font-weight: 800;
    line-height: 1.6;
}

.hero__promo p {
    margin: 0;
    font-size: .72rem;
    line-height: 1.8;
    color: rgba(251, 248, 243, .66);
}

.hero__promo .btn-key {
    align-self: flex-start;
    min-height: 34px;
    margin-top: 2px;
    padding: 0 16px;
    font-size: .67rem;
}

/* ============ ستون میانی: اسلایدشو ============ */
.hero__stage {
    position: relative;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 54%) minmax(0, 1fr);
    grid-template-rows: minmax(clamp(250px, 17vw, 340px), 1fr) auto;
    min-height: clamp(566px, 39vw, 780px);
}

.hero__media {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    position: relative;
    min-width: 0;
    border-radius: var(--r-xl);
    background: var(--dark);
    overflow: hidden;
}

.hero__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .9s var(--ease);
    pointer-events: none;
}

.hero__slide.is-active { opacity: 1; pointer-events: auto; }

.hero__slide img,
.hero__slide video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        rgba(16, 16, 18, .72) 0%,
        rgba(16, 16, 18, .12) 44%,
        rgba(16, 16, 18, 0) 70%);
    pointer-events: none;
}

/* نقطه‌های اسلاید — بالا سمت چپِ قاب، مثل طرح */
.hero__dots {
    position: absolute;
    left: 34px;
    top: 28px;
    z-index: 3;
    display: flex;
    gap: 7px;
}

.hero__dots button {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 9px;
    background: rgba(251, 248, 243, .45);
    cursor: pointer;
    transition: width var(--t) var(--ease), background-color var(--t) var(--ease);
}

.hero__dots button.is-active { width: 26px; background: var(--amber); }

/*
   --- هدف انگشت ---

   نقطه‌های اسلایدشو عمداً ریزند (طبق طرح) ولی زدنشان روی گوشی سخت بود.
   یک لایه‌ی نامرئی دور هرکدام ناحیه‌ی لمس را بزرگ می‌کند بدون اینکه ظاهر
   یا چیدمان عوض شود. همین کار برای لینک‌های متنی و شماره‌ی تلفن با
   padding عمودی و margin منفیِ هم‌اندازه انجام می‌شود.
*/
.hero__dots button,
.pin-view__dots button { position: relative; }

.hero__dots button::after,
.pin-view__dots button::after {
    content: "";
    position: absolute;
    inset: -12px;
}

@media (pointer: coarse) {
    /* فقط لینک متنی؛ شماره‌ای که خودش دکمه است اندازه‌ی کافی دارد و
       margin منفی این قاعده آن را به دکمه‌ی بالایی می‌چسباند. دکمه‌ی آیکونی (تلفن ردیف شبکه‌های
       اجتماعی فوتر) هم نه: ۷ پیکسل از بقیه‌ی آیکون‌ها بالاتر می‌نشست (گزارش صاحب فروشگاه از گوشی). */
    a[href^="tel:"]:not([class*="btn"]):not(:has(svg)),
    .link-all,
    .link-line,
    .link-more,
    .breadcrumbs a,
    .doc-hero__crumbs a {
        padding-block: 7px;
        margin-block: -7px;
    }
}

/* --- صحنه‌ی گرافیکی، تا وقتی ویدیو یا عکسی آپلود نشده --- */
.hero__scene {
    position: absolute;
    inset: 0;
    overflow: hidden;
    color: rgba(255, 236, 205, .5);
    background:
        radial-gradient(120% 96% at 76% 6%, #4A3728 0%, transparent 58%),
        radial-gradient(96% 80% at 14% 100%, #2A211B 0%, transparent 62%),
        linear-gradient(200deg, #241C15 0%, #17120F 58%, #1B1512 100%);
}

.hero__scene-glow {
    position: absolute;
    top: -35%;
    inset-inline-end: -8%;
    width: 74%;
    height: 165%;
    background: linear-gradient(105deg,
        transparent 34%,
        rgba(242, 161, 28, .12) 44%,
        rgba(255, 236, 205, .26) 50%,
        rgba(242, 161, 28, .10) 57%,
        transparent 68%);
    filter: blur(24px);
    transform-origin: top center;
    animation: hero-light 18s var(--ease) infinite alternate;
}

@keyframes hero-light {
    from { transform: rotate(-7deg); opacity: .7; }
    to   { transform: rotate(6deg); opacity: 1; }
}

.hero__scene-art {
    position: absolute;
    inset-inline: 0;
    bottom: 6%;
    width: min(880px, 92%);
    margin-inline: auto;
}

.hero__scene-art > * {
    stroke-dasharray: 1400;
    stroke-dashoffset: 1400;
    animation: hero-draw 3s var(--ease-out) forwards;
}

.hero__scene-art [data-delay="1"] { animation-delay: .3s; }
.hero__scene-art [data-delay="2"] { animation-delay: .6s; }
.hero__scene-art [data-delay="3"] { animation-delay: .9s; }

@keyframes hero-draw { to { stroke-dashoffset: 0; } }

.no-motion .hero__scene-art > * { animation: none; stroke-dashoffset: 0; }
.no-motion .hero__scene-glow { animation: none; }

/* --- متن روی اسلاید (ستون ۵۴٪، پایینِ ردیف اول) --- */
.hero__copy {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 11px;
    padding: clamp(24px, 2.4vw, 44px) clamp(24px, 2.6vw, 48px) clamp(20px, 1.8vw, 32px);
    direction: rtl;
    color: var(--paper);
}

.hero__copy-item { display: none; }

.hero__copy-item.is-active {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.hero__copy .hero__heading {
    margin: 0;
    font-size: clamp(1.72rem, 1.85vw, 2.5rem);
    font-weight: 800;
    line-height: 1.5;
    color: #fff;
}

.hero__copy p {
    margin: 0;
    max-width: 34ch;
    font-size: clamp(.73rem, .85vw, 1.02rem);
    line-height: 1.95;
    color: rgba(251, 248, 243, .62);
    text-wrap: pretty;
}

.hero__copy .btn-key {
    align-self: flex-start;
    min-height: clamp(38px, 2.8vw, 54px);
    padding: 0 clamp(20px, 1.5vw, 30px);
    font-size: clamp(.73rem, .85vw, .98rem);
}

/* --- پنل کهربایی دسته‌بندی، گوشه‌ی پایینِ اسلاید --- */
/*
   پنل کهربایی دسته‌بندی داخل گوشه‌ی قاب تیره می‌نشیند، ولی از هر چهار طرف
   با یک حاشیه‌ی هم‌رنگِ پس‌زمینه از آن فاصله می‌گیرد تا «چسبیده» دیده نشود.
   اندازه‌ی حاشیه سیال است و در هر عرض صفحه متناسب می‌ماند.
*/
.hero__cats {
    grid-column: 1;
    grid-row: 2;
    min-width: 0;
    position: relative;
    z-index: 2;
    padding: clamp(12px, 1.3vw, 18px);
    background: var(--shell);
    border-radius: 0 var(--r-xl) var(--r-xl) var(--r-xl);
}

.hero__cats-inner {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px 20px;
    border-radius: 26px;
    background: var(--amber);
    color: var(--dark);
    direction: rtl;
}

.hero__cats-inner > strong {
    font-size: clamp(.83rem, .95vw, 1.08rem);
    font-weight: 800;
}

.hero__cats-list {
    display: flex;
    gap: 7px;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
}

.hero__cats-list::-webkit-scrollbar { display: none; }

.hero__cats-list a {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 13px;
    border: 1px solid rgba(28, 28, 31, .34);
    border-radius: var(--r-pill);
    background: transparent;
    color: var(--dark);
    font-size: clamp(.74rem, .78vw, .88rem);
    font-weight: 600;
    white-space: nowrap;
    transition: background-color var(--t-fast) var(--ease),
                border-color var(--t-fast) var(--ease),
                color var(--t-fast) var(--ease);
}

/*
   نقطه‌ی تزئینی کنار نام دسته عمداً توپر است؛ دایره‌ی توخالی کنار متن
   فارسی شبیه رقم «۰» دیده می‌شد.
*/
.hero__cats-list a::before {
    content: "";
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: .55;
}

.hero__cats-list a:hover,
.hero__cats-list a.is-active {
    background: var(--dark);
    border-color: var(--dark);
    color: var(--paper);
}

/* --- دکمه‌ی گرد «اسلاید بعدی» روی لبه‌ی قاب --- */
.hero__next {
    position: absolute;
    right: 0;
    top: 44%;
    transform: translate(50%, -50%);
    z-index: 3;
    padding: 8px;
    border-radius: 50%;
    background: var(--shell);
}

.hero__next button {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--amber);
    color: var(--ink);
    cursor: pointer;
}

/* ============ ستون راست: ریل آیکون‌ها ============ */
.hero__rail {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.hero__rail-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 11px;
    padding: 11px 9px;
    border-radius: 28px;
    background: var(--card);
}

.hero__rail-group a {
    position: relative;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 12px;
    color: rgba(28, 28, 31, .5);
    transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}

.hero__rail-group a:hover { color: var(--amber-deep); background: var(--beige); }

.hero__rail-group a.is-active {
    width: 36px;
    height: 36px;
    border-radius: 13px;
    background: var(--dark);
    color: var(--paper);
}

.hero__rail-group a.is-active:hover { background: var(--dark); color: var(--paper); }

.hero__rail-dot {
    position: absolute;
    top: 3px;
    right: 4px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--amber);
    border: 1.5px solid var(--card);
}

.hero__rail-count {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 16px;
    height: 16px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: var(--dark);
    color: var(--paper);
    font-size: .58rem;
}

.hero__rail-keys {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 11px;
}

.hero__rail-pill {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    padding: 4px;
    border-radius: 50%;
    background: var(--dark);
    color: var(--paper);
    font-size: .63rem;
    font-weight: 800;
    line-height: 1.25;
    text-align: center;
    direction: rtl;
}

.hero__rail-pill--amber { background: var(--amber); color: var(--ink); }

.hero__rail-sep {
    flex: 1;
    min-height: 44px;
    width: 1px;
    background: rgba(28, 28, 31, .14);
}

.hero__rail-avatar {
    display: block;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--sand-1);
}

.hero__rail-avatar img { width: 100%; height: 100%; object-fit: cover; }


/* ============ موبایل ============ */
/*
   همه‌ی اندازه‌ها با clamp نوشته شده‌اند تا از ۳۲۰ تا ۹۸۰ پیکسل به‌صورت
   پیوسته کوچک و بزرگ شوند؛ نه اینکه سر هر بریک‌پوینت دستی تنظیم شوند.
*/
@media (max-width: 980px) {
    .hero { padding: clamp(6px, 2vw, 10px) 0 clamp(16px, 4vw, 22px); }

    .hero__frame {
        direction: rtl;
        display: flex;
        flex-direction: column;
        gap: clamp(8px, 2.6vw, 12px);
        padding: clamp(8px, 2.8vw, 12px);
        border-radius: clamp(20px, 6vw, 28px);
    }

    .hero__side,
    .hero__rail { display: none; }

    /* جست‌وجو از ستون کنار بیرون می‌آید و بالای اسلایدشو می‌نشیند */
    .hero__search.hero__search--mobile { display: flex; border-radius: var(--r-pill); }
    .hero__search--mobile input { font-size: clamp(.72rem, 3.2vw, .84rem); }

    /*
       ستون ۲۶٪ سمت چپ عمداً خالی می‌ماند (مثل طرح موبایل): هم متن و پنل
       دسته‌بندی از لبه فاصله می‌گیرند، هم دکمه‌ی گرد اسلاید جا باز می‌کند.
    */
    .hero__stage {
        grid-template-columns: minmax(0, 1fr) 26%;
        grid-template-rows: minmax(clamp(150px, 46vw, 200px), 1fr) auto;
        min-height: 0;
    }

    .hero__media { border-radius: clamp(18px, 5.4vw, 24px); }

    .hero__dots {
        left: auto;
        inset-inline-start: clamp(12px, 4vw, 16px);
        top: clamp(12px, 4vw, 16px);
    }

    .hero__copy {
        padding: clamp(13px, 4.6vw, 18px);
        gap: clamp(6px, 2vw, 8px);
    }

    .hero__copy .hero__heading { font-size: clamp(1.05rem, 5.4vw, 1.4rem); }

    .hero__copy p {
        font-size: clamp(.72rem, 2.9vw, .78rem);
        line-height: 1.9;
        max-width: none;
    }

    .hero__copy .btn-key {
        min-height: clamp(34px, 10vw, 40px);
        padding: 0 clamp(13px, 4.6vw, 18px);
        font-size: clamp(.72rem, 3vw, .8rem);
    }

    .hero__copy-item.is-active { gap: clamp(6px, 2vw, 8px); }

    .hero__cats {
        padding: clamp(9px, 3.2vw, 14px);
        border-radius: clamp(18px, 5.4vw, 24px);
    }

    .hero__cats-inner {
        gap: clamp(6px, 2vw, 8px);
        padding: clamp(10px, 3.6vw, 14px) clamp(11px, 4.2vw, 16px);
        border-radius: clamp(13px, 4.4vw, 18px);
    }

    .hero__cats-inner > strong { font-size: clamp(.72rem, 3.2vw, .8rem); }

    /* در طرح موبایل زیر چیپ‌ها نقطه‌ی اسلایدر نیست */
    .hero__cats .dots { display: none; }

    .hero__cats-list {
        gap: clamp(5px, 1.8vw, 7px);
    }

    .hero__cats-list a {
        gap: 5px;
        padding: clamp(5px, 1.8vw, 7px) clamp(9px, 3.4vw, 13px);
        font-size: clamp(.72rem, 2.7vw, .78rem);
    }

    .hero__cats-list a::before { width: 5px; height: 5px; }

    .hero__next {
        right: auto;
        inset-inline-end: clamp(-18px, -4vw, -12px);
        top: 50%;
        transform: translateY(-50%);
        padding: clamp(6px, 2.4vw, 9px);
    }

    .hero__next button {
        width: clamp(30px, 9vw, 36px);
        height: clamp(30px, 9vw, 36px);
    }
}


/* ---------- ۱۱ بخش‌های صفحه اصلی ---------- */

/* --- دایره‌های دسته‌بندی --- */
.cat-circle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}

.cat-circle__img {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    border: 1px solid var(--ink-06);
    border-radius: 50%;
    overflow: hidden;
    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, .14) 0%,
            rgba(255, 255, 255, .05) 48%,
            rgba(255, 255, 255, .09) 100%),
        linear-gradient(135deg, var(--sand-1), var(--sand-2));
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    transition: transform var(--t) var(--ease-out), box-shadow var(--t) var(--ease);
}

.cat-circle__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cat-circle:hover .cat-circle__img {
    transform: translateY(-6px);
    box-shadow: var(--shadow);
}

.cat-circle strong {
    font-size: .95rem;
    font-weight: 700;
}

.cat-circle small {
    font-size: .78rem;
    color: var(--muted);
}

.cat-circle:hover strong { color: var(--amber-deep); }

/* --- کارت‌های تبلیغاتی تیره --- */
.promo-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap-3);
}

.promo-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: clamp(360px, 26vw, 500px);
    padding: clamp(24px, 2.4vw, 48px);
    border-radius: 28px;
    overflow: hidden;
    background: linear-gradient(160deg, #6C6257, #201D19);
    color: #fff;
    isolation: isolate;
}

.promo-card img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s var(--ease-out);
}

.promo-card:hover img { transform: scale(1.05); }

.promo-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to top, rgba(18, 16, 13, .88), rgba(18, 16, 13, .28));
}

/* لوک‌بوک: «قاب بلند» دو ردیف شبکه را می‌گیرد */
.showcase-card { min-height: clamp(200px, 18vw, 260px); }
.showcase-card--tall { grid-row: span 2; min-height: clamp(420px, 38vw, 540px); }

/* عکس مشتری در کارت نظرات */
.testimonial__avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; }

/* --- بنرهای بخش «بنرها» (میانی صفحه اصلی و کنار فروشگاه) --- */
.banner-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: clamp(12px, 2vw, 24px);
}

.banner-card {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: clamp(16px, 2vw, 28px);
    background: var(--beige);
    isolation: isolate;
}

.banner-card img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 1s var(--ease-out);
}

.banner-card[href]:hover img { transform: scale(1.03); }

.banner-card--text img {
    aspect-ratio: 16 / 7;
    height: 100%;
    object-fit: cover;
}

.banner-card--text::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(18, 16, 13, .82), rgba(18, 16, 13, .1) 70%);
}

.banner-card__body {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: clamp(16px, 2.4vw, 32px);
    color: #fff;
}

.banner-card__body strong { font-size: clamp(1.05rem, 2vw, 1.5rem); font-weight: 800; line-height: 1.4; }
.banner-card__body > span:not(.btn-key) { font-size: .88rem; color: rgba(255, 255, 255, .8); }

.promo-card .eyebrow { color: var(--amber); }
.promo-card .eyebrow::before { background: var(--amber); }

.promo-card h3 {
    margin: 0 0 10px;
    max-width: 22ch;
    font-size: clamp(1.2rem, 2.2vw, 1.6rem);
    font-weight: 800;
    line-height: 1.4;
    color: #fff;
    text-shadow: 0 2px 14px rgba(0, 0, 0, .35);
}

.promo-card p {
    margin-bottom: 20px;
    font-size: .87rem;
    line-height: 2;
    color: rgba(251, 248, 243, .82);
    max-width: 36ch;
}

.promo-card .btn-key { align-self: flex-start; }

/* --- نوار مزایا --- */
/*
   نوار مزایا هم یک ریل افقی است (مثل بقیه‌ی ردیف‌ها): پنج مزیت در دید و
   بقیه با اسکرول. کلاس .benefits فقط فاصله و خط پایین را می‌دهد.
*/
.benefits {
    padding-block: clamp(24px, 3vw, 34px);
    border-bottom: 1px solid var(--ink-10);
}

.benefit {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.benefit__icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: none;
    border: 1px solid var(--ink-16);
    border-radius: 50%;
    background: transparent;
    color: var(--amber);
    transition: background-color var(--t) var(--ease), color var(--t) var(--ease),
                border-color var(--t) var(--ease);
}

.benefit:hover .benefit__icon {
    background: var(--amber);
    border-color: var(--amber);
    color: var(--ink);
}

.benefit strong {
    font-size: .87rem;
    font-weight: 600;
    white-space: nowrap;
}

.benefit small {
    display: block;
    font-size: .74rem;
    color: var(--muted);
}

/* --- بنر خرید قسطی --- */
.installment {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 34px;
    align-items: center;
    padding: clamp(26px, 3.4vw, 46px);
    border-radius: 22px;
    background: var(--navy);
    color: var(--paper);
    overflow: hidden;
}

.installment__copy { position: relative; }

.installment__pill {
    display: inline-flex;
    padding: 7px 18px;
    margin-bottom: 18px;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .24);
    font-size: .78rem;
    font-weight: 700;
}

.installment h3 {
    margin: 18px 0 0;
    font-size: clamp(1.7rem, 3.4vw, 2.6rem);
    font-weight: 800;
    line-height: 1.24;
    color: #fff;
}

.installment p {
    margin: 16px 0 0;
    font-size: .92rem;
    line-height: 2.05;
    color: rgba(242, 248, 252, .8);
    max-width: 44ch;
}

.installment .btn-row { margin-top: 30px; }

.installment__aside {
    position: relative;
    min-height: 300px;
    display: grid;
    place-items: center;
}

.installment__aside > img,
.installment__art {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 340px;
    object-fit: contain;
}

.installment__check {
    position: absolute;
    bottom: 18px;
    inset-inline-start: 18px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 18px;
    border-radius: var(--r-pill);
    background: rgba(35, 31, 26, .86);
    color: var(--paper);
    font-size: .78rem;
    font-weight: 600;
}

/* --- کارت مقاله --- */
.post-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.post-card__media {
    display: block;
    aspect-ratio: 16 / 10;
    border-radius: var(--r-md);
    overflow: hidden;
    background: linear-gradient(135deg, var(--sand-1), var(--sand-2));
}

.post-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .9s var(--ease-out);
}

.post-card:hover .post-card__media img { transform: scale(1.06); }

.post-card__body { padding-top: 14px; }

.post-card__meta {
    font-size: .74rem;
    color: var(--amber-deep);
    font-weight: 500;
}

.post-card h3 {
    margin: 7px 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.7;
}

.post-card h3 a:hover { color: var(--amber-deep); }

.post-card p {
    margin: 0;
    font-size: .84rem;
    color: var(--muted);
    line-height: 1.9;
}


/* ---------- ۱۲ کارت محصول و فروشگاه ---------- */
.product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.product-card__media {
    position: relative;
    display: block;
    aspect-ratio: 1;
    border: 1px solid var(--ink-06);
    border-radius: 18px;
    overflow: hidden;
    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, .14) 0%,
            rgba(255, 255, 255, .05) 48%,
            rgba(255, 255, 255, .09) 100%),
        linear-gradient(135deg, var(--sand-1), var(--sand-2));
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
}

.product-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .9s var(--ease-out);
}

.product-card:hover .product-card__media img { transform: scale(1.05); }

.product-card__noimg {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    color: var(--ink-42);
}

.product-card__badges {
    position: absolute;
    top: 12px;
    inset-inline-end: 12px;
    z-index: 2;
}

/* دکمه‌های شناور روی تصویر */
.product-card__tools {
    position: absolute;
    top: 12px;
    inset-inline-start: 12px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 6px;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity var(--t) var(--ease), transform var(--t) var(--ease-out);
}

.product-card:hover .product-card__tools,
.product-card:focus-within .product-card__tools {
    opacity: 1;
    transform: translateY(0);
}

.product-card__tools .icon-btn,
.product-card__tools button {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 253, 250, .94);
    border: 1px solid var(--ink-10);
    color: var(--ink);
    box-shadow: var(--shadow-xs);
}

.product-card__tools .icon-btn:hover,
.product-card__tools button:hover {
    background: var(--dark);
    color: #fff;
}

.product-card__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 14px;
}

.product-card__eyebrow {
    font-size: .74rem;
    color: var(--muted);
}

.product-card__title {
    margin: 0;
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.7;
}

.product-card__title a:hover { color: var(--amber-deep); }

.product-card__price {
    display: flex;
    align-items: baseline;
    gap: 9px;
    flex-wrap: wrap;
    margin-top: 5px;
}

.price-now {
    font-size: 1rem;
    font-weight: 800;
    color: var(--amber-deep);
}

.price-old {
    font-size: .8rem;
    color: var(--ink-42);
    text-decoration: line-through;
}

.price-call {
    font-size: .88rem;
    font-weight: 700;
    color: var(--amber-deep);
}

.price-unit { font-size: .74rem; color: var(--muted); font-weight: 400; }

.product-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(20px, 2.2vw, 26px);
}

/*
   --- نوار افقی محصولات ---
   در صفحه اصلی محصول‌ها به‌جای شبکه‌ی چندردیفه، در یک ریل افقی کشیده
   می‌شوند. عرض هر کارت در دسکتاپ طوری است که دقیقاً چهار تا در دید باشد
   و بقیه با اسکرول بیایند؛ پس چه چهار محصول باشد چه بیست، چیدمان یکی است.
   در موبایل عرض کارت‌ها با clamp تعیین می‌شود تا روی هر گوشی حدود دو کارت
   و نیم دیده شود و کاربر بفهمد ادامه دارد.
*/
.rail {
    position: relative;
    /*
       --rail-cols تعداد آیتم‌هایی است که در دید جا می‌شود. در موبایل عمداً
       اعشاری است (مثلاً ۲٫۲) تا لبه‌ی آیتم بعدی پیدا باشد و کاربر بفهمد
       ریل ادامه دارد.
    */
    --rail-gap: clamp(10px, 1.8vw, 26px);
    --rail-cols: 4;
}

.rail--cats     { --rail-cols: 5; }
.rail--posts    { --rail-cols: 3; }
.rail--benefits { --rail-cols: 5; --rail-gap: clamp(10px, 1.6vw, 18px); }

.rail__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc(
        (100% - (var(--rail-cols) - 1) * var(--rail-gap)) / var(--rail-cols)
    );
    gap: var(--rail-gap);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
}

.rail__track::-webkit-scrollbar { display: none; }

/*
   کشیدن با ماوس در دسکتاپ. روی دستگاه لمسی معنا ندارد، پس نشانگر فقط
   جایی عوض می‌شود که ماوس هست.
*/
@media (hover: hover) {
    [data-dragscroll].is-scrollable { cursor: grab; }
    [data-dragscroll].is-dragging { cursor: grabbing; }
}

[data-dragscroll].is-dragging,
[data-dragscroll].is-hinting,
[data-dragscroll].is-autoscrolling {
    scroll-snap-type: none;
    scroll-behavior: auto;
}

[data-dragscroll].is-dragging { user-select: none; }

[data-dragscroll].is-dragging a,
[data-dragscroll].is-dragging img { pointer-events: none; }

.rail__track > * {
    min-width: 0;
    scroll-snap-align: start;
}

/* دکمه‌های گرد کنار ریل — فقط روی دستگاه‌های اشاره‌گردار */
.rail__nav {
    position: absolute;
    top: 38%;
    transform: translateY(-50%);
    z-index: 3;
    display: none;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--ink-10);
    border-radius: 50%;
    background: var(--card);
    color: var(--ink);
    cursor: pointer;
    box-shadow: var(--shadow);
    transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
                opacity var(--t) var(--ease);
}

.rail__nav:hover { background: var(--amber); color: var(--ink); }
.rail__nav[hidden] { display: none; }

.rail__nav--prev { inset-inline-start: -18px; }
.rail__nav--next { inset-inline-end: -18px; }

/* در ریل‌هایی که کارت تصویر ندارند، دکمه وسط ارتفاع می‌نشیند */
.rail--benefits .rail__nav,
.rail--cats .rail__nav { top: 50%; }
.rail--cats .rail__nav { top: 42%; }

@media (hover: hover) and (min-width: 981px) {
    .rail__nav:not([hidden]) { display: grid; }
}

/*
   --- فروشگاه پینترستی ---
   خواسته‌ی صاحب فروشگاه؛ عمداً از Shop-Classic (ستون فیلتر کناری و شبکه‌ی
   سه‌تایی) فاصله گرفته. فیلترها در همه‌ی اندازه‌ها پنل جمع‌شونده‌ی بالای
   شبکه‌اند تا masonry تمام‌عرض بماند.
*/

/* دسته‌ها مثل «موضوع»های پینترست: نوار افقی چیپ‌ها */
.pin-topics {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-block: 2px 14px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.pin-topics::-webkit-scrollbar { display: none; }

.pin-topic {
    flex: none;
    padding: 9px clamp(14px, 3.4vw, 18px);
    border-radius: var(--r-pill);
    background: var(--beige);
    color: var(--ink);
    font-size: clamp(.8rem, 3.2vw, .86rem);
    font-weight: 500;
    white-space: nowrap;
    transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.pin-topic:hover { background: var(--amber); color: var(--ink); }
.pin-topic.is-active { background: var(--ink); color: var(--paper); }
/* «موجود و آماده‌ی تحویل»: میان‌بر فیلتر کالای موجود (پست‌های CRM)، کنار دسته‌ها ولی متمایز */
.pin-topic--stock { background: var(--success-soft); color: var(--success); font-weight: 700; }
.pin-topic--stock:hover { background: var(--success); color: #fff; }

/* کارت پین؛ جایش را شبکه‌ی پین (.pin-board، بخش ۱۳) تعیین می‌کند */
.pin {
    display: inline-block;
    width: 100%;
    margin-bottom: clamp(14px, 3vw, 24px);
    vertical-align: top;
    break-inside: avoid;
}

.pin__media {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: clamp(14px, 1.8vw, 22px);
    /* رنگ غالب عکس (هوش مصنوعی) تا خود عکس لود شود */
    background: var(--pin-tone, var(--sand-1));
    isolation: isolate;
}

.pin__media img {
    display: block;
    width: 100%;
    height: auto;
    transition: opacity .26s ease;
}

.pin__noimg {
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 5;
    color: var(--ink-42);
}

.pin__badges {
    position: absolute;
    top: 10px;
    inset-inline-end: 10px;
    z-index: 2;
}

/*
   چند تگ روی عکس (تخفیف، پرفروش، سفارشی) در یک گوشه (بالا چپ) روی هم می‌نشینند و
   یکی‌یکی با محو شدن نرم نشان داده می‌شوند تا فقط یک گوشه‌ی عکس پوشیده شود
   (site.js ← initBadgeStacks). بدون جاوااسکریپت یا با «کاهش حرکت» زیر هم می‌مانند.
*/
.badge-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.badge-stack.is-cycling { display: grid; justify-items: end; }

.badge-stack.is-cycling > * {
    grid-area: 1 / 1;
    opacity: 0;
    transform: translateY(-5px) scale(.94);
    transition: opacity .5s ease, transform .5s var(--ease-out);
}

.badge-stack.is-cycling > .is-current { opacity: 1; transform: none; }

/* لایه‌ی «مشاهده» فقط با ماوس؛ در موبایل کارت مستقیم لمس می‌شود */
.pin__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 14px;
    background: linear-gradient(180deg, rgba(17, 17, 17, .12), rgba(17, 17, 17, .42));
    opacity: 0;
    transition: opacity .12s ease-out;
}

.pin__view {
    padding: 9px 22px;
    border-radius: var(--r-pill);
    background: var(--paper);
    color: var(--ink);
    font-size: .82rem;
    font-weight: 700;
    box-shadow: var(--shadow-sm);
    transform: translateY(6px);
    transition: transform .16s var(--ease-out);
}

@media (hover: hover) {
    .pin:hover .pin__overlay,
    .pin__media:focus-visible .pin__overlay { opacity: 1; }
    .pin:hover .pin__view { transform: none; }
}

.pin__body { padding: 8px 4px 0; }

.pin__title {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    font-size: clamp(.8rem, 3vw, .92rem);
    font-weight: 500;
    line-height: 1.65;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.pin__title a { color: inherit; }

.pin__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 8px;
}

.pin__price .price-now { font-size: clamp(.84rem, 3.1vw, .96rem); }
.pin__price .price-old { font-size: .74rem; }

.pin--banner .banner-card { border-radius: clamp(14px, 1.8vw, 22px); }

/* ادامه‌ی فید: چرخنده هنگام بارگذاری، دکمه اگر خودکار نشد */
.pin-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 64px;
    padding-block: 10px;
}

.pin-more[hidden],
.pin-more [hidden] { display: none; }

.pin-more__spinner {
    display: none;
    width: 28px;
    height: 28px;
    border: 3px solid var(--ink-10);
    border-top-color: var(--amber);
    border-radius: 50%;
    animation: pin-spin .8s linear infinite;
}

.pin-more.is-loading .pin-more__spinner { display: block; }
.pin-more.is-loading [data-pin-more-button] { display: none; }

@keyframes pin-spin { to { transform: rotate(360deg); } }

/* وقتی اسکرول بی‌پایان فعال است، صفحه‌بندی معمولی لازم نیست */
.js [data-pin-pagination].is-replaced { display: none; }


/* پنل فیلترها بالای شبکه، گروه‌ها چندستونه */
.filters-panel {
    margin-bottom: clamp(14px, 2vw, 20px);
    padding: clamp(14px, 2.4vw, 26px);
    border: 1px solid var(--ink-10);
    border-radius: clamp(16px, 2vw, 24px);
    background: var(--card);
}

.js .filters-wrap.is-collapsed { display: none; }

.filters-panel form {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
    column-gap: clamp(16px, 2.6vw, 34px);
}

.filters-panel .filters-head,
.filters-panel .search-field,
.filters-panel form > .btn-key { grid-column: 1 / -1; }

.filters-panel .filter-group { padding-block: 14px; border-bottom: 0; }

.filters-panel form > .btn-key {
    justify-self: start;
    width: auto;
    min-width: min(240px, 100%);
}

.filters-panel__consult { margin-top: 12px; }

.filters-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 16px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--ink-16);
}

.filters-head h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
}

.filters-head a {
    font-size: .8rem;
    color: var(--amber);
    font-weight: 500;
}

.filters-head a:hover { color: var(--amber-deep); }

.filter-group {
    padding-block: 20px;
    border-bottom: 1px solid var(--ink-10);
}

.filter-group > strong {
    display: block;
    margin-bottom: 14px;
    font-size: .88rem;
    font-weight: 700;
}

.filter-group ul {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 230px;
    overflow-y: auto;
}

.filter-group li { margin-bottom: 11px; }

.filter-group label {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    font-size: .82rem;
    font-weight: 400;
    color: var(--muted);
    cursor: pointer;
}

.filter-group label:hover { color: var(--ink); }

.filter-dots { display: flex; gap: 9px; flex-wrap: wrap; }

.shop-toolbar {
    display: flex;
    align-items: center;
    gap: 10px clamp(12px, 2vw, 20px);
    flex-wrap: wrap;
    padding-block: 4px 16px;
    margin-bottom: clamp(14px, 2vw, 20px);
    border-bottom: 1px solid var(--line);
}

.shop-toolbar form { margin-inline-start: auto; }

.shop-toolbar__count { font-size: .86rem; color: var(--muted); }

.shop-toolbar form {
    display: flex;
    align-items: center;
    gap: 9px;
}

.shop-toolbar select {
    width: auto;
    padding: 9px 18px;
    padding-inline-end: 40px;
    border-radius: var(--r-pill);
    font-size: .84rem;
    font-weight: 500;
}

.active-filters {
    display: flex;
    gap: 9px;
    flex-wrap: wrap;
    margin: 18px 0 0;
}

.active-filters__chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: var(--r-pill);
    background: var(--beige);
    color: var(--ink);
    font-size: .78rem;
    transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.active-filters__chip span[aria-hidden] {
    font-size: .95rem;
    line-height: 1;
    color: var(--ink-42);
}

.active-filters__chip:hover { background: var(--amber); color: var(--ink); }
.active-filters__chip:hover span[aria-hidden] { color: var(--ink); }

/* دکمه‌ی باز و بسته‌کردن پنل فیلترها (در همه‌ی اندازه‌ها) */
.filters-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 16px;
    border: 1px solid var(--ink-16);
    border-radius: var(--r-pill);
    background: var(--beige);
    color: var(--ink);
    font-family: inherit;
    font-size: .9rem;
    font-weight: 700;
    cursor: pointer;
}

.filters-toggle > span {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.filters-toggle > span svg { color: var(--amber); }
.filters-toggle > svg { transition: transform var(--t-fast) var(--ease); }
.filters-toggle[aria-expanded="true"] > svg { transform: rotate(180deg); }

.filters-toggle__count {
    display: grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding-inline: 5px;
    border-radius: var(--r-pill);
    background: var(--amber);
    color: var(--ink);
    font-size: .7rem;
}

/* --- صفحه‌بندی --- */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    flex-wrap: wrap;
    margin-top: clamp(30px, 4vw, 50px);
}

/* قرص‌های شیشه‌ای، طبق طرح */
.pagination a,
.pagination span {
    display: grid;
    place-items: center;
    min-width: 46px;
    height: 46px;
    padding-inline: 14px;
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: var(--r-pill);
    background: linear-gradient(180deg,
        rgba(255, 255, 255, .92) 0%,
        rgba(247, 244, 239, .74) 55%,
        rgba(255, 255, 255, .58) 100%);
    box-shadow: var(--shadow-xs);
    font-size: .84rem;
    font-weight: 500;
    transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
                border-color var(--t-fast) var(--ease);
}

.pagination a:hover {
    border-color: rgba(255, 255, 255, 1);
    color: var(--amber-deep);
    transform: translateY(-1px);
    box-shadow: inset 0 1.5px 1px rgba(255, 255, 255, .75), var(--shadow-sm);
}

.pagination .is-current {
    font-weight: 700;
    color: var(--ink);
    box-shadow: inset 0 0 0 1px var(--amber), var(--shadow-xs);
}

.pagination .is-disabled { opacity: .4; pointer-events: none; }

/* --- حالت خالی --- */
.empty-state {
    padding: clamp(36px, 6vw, 70px) 20px;
    text-align: center;
    border: 1px dashed var(--line);
    border-radius: var(--r-lg);
    background: var(--card);
}

.empty-state__icon {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: var(--beige);
    color: var(--amber-deep);
}

.empty-state h3 { font-weight: 700; }

/* ستاره‌ی فیلد اجباری فرم‌ها (partials/field.html) */
.field__req { margin-inline-start: 3px; color: var(--amber-deep); font-weight: 700; }
.empty-state h1 { margin: 0 0 8px; font-size: clamp(1.25rem, 3.2vw, 1.75rem); font-weight: 700; }


/* ---------- ۱۳ صفحه محصول ---------- */
/*
   مثل باز کردن یک پین در پینترست (خواسته‌ی صاحب فروشگاه، با اسکرین‌شات اپ و سایت):
   همه‌چیز یک شبکه‌ی پین است. کارت محصول اولین پینِ پهن است و پین‌های مشابه
   بی‌تیتر، کنار و زیرش می‌نشینند؛ جزئیات خرید در برگه‌ای که از پایین بالا می‌آید.

   چیدمان را site.js (initBoards) با قاعده‌ی «کوتاه‌ترین ستون» پینترست می‌سازد و
   اندازه‌ها را از همین متغیرها می‌خواند (@property تا clamp به پیکسل تبدیل شود):
   --board-col کمینه‌ی عرض ستون، --board-gap فاصله‌ی ستون‌ها، --board-row فاصله‌ی
   عمودی پین‌ها و --board-hero کمینه‌ی عرض کارت محصول (در موبایل تمام‌عرض).
   بدون جاوااسکریپت: masonry ستونی CSS با کارت محصول بالای همه.
*/
@property --board-col  { syntax: "<length>"; inherits: true; initial-value: 200px; }
@property --board-gap  { syntax: "<length>"; inherits: true; initial-value: 12px; }
@property --board-row  { syntax: "<length>"; inherits: true; initial-value: 16px; }
@property --board-hero { syntax: "<length>"; inherits: true; initial-value: 420px; }

.pin-page { padding-block: clamp(4px, 1.2vw, 18px) clamp(40px, 6vw, 80px); }

.pin-board {
    --board-col: clamp(140px, 22vw, 200px);
    --board-gap: clamp(8px, 1.3vw, 16px);
    --board-row: clamp(14px, 1.9vw, 24px);
    --board-hero: clamp(420px, 36vw, 640px);
    columns: var(--board-col) 6;
    column-gap: var(--board-gap);
}

.pin-board > .pin { margin-bottom: var(--board-row); }
.pin-board > .pin-view { margin-bottom: var(--board-row); column-span: all; }

.pin-board.is-laid { position: relative; columns: auto; }
.pin-board.is-laid > * { position: absolute; top: 0; margin: 0; }

/* تا چیدمان ساخته شود پین‌ها نمی‌پرند؛ اگر اسکریپت نرسید بعد از ۲ ثانیه دیده می‌شوند */
.js .pin-board:not(.is-laid) > .pin { animation: board-wait 0s 2s both; }

@keyframes board-wait {
    from { visibility: hidden; }
    to   { visibility: visible; }
}

.pin-view {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: clamp(8px, 1vw, 12px);
    min-width: 0;
}

.pin-view__media {
    position: relative;
    overflow: hidden;
    border-radius: clamp(20px, 2vw, 28px);
    background: var(--pin-tone, var(--sand-1));
}

/* چند عکس: ورق زدن با انگشت (scroll-snap، بدون جاوااسکریپت) */
.pin-view__slides {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
}

.pin-view__slides::-webkit-scrollbar { display: none; }

.pin-view__slide {
    display: grid;
    flex: 0 0 100%;
    place-items: center;
    margin: 0;
    scroll-snap-align: center;
}

.pin-view__slide img {
    display: block;
    width: 100%;
    height: auto;
    max-height: min(78vh, 900px);
    object-fit: contain;
}

.pin-view__noimg {
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 5;
    color: var(--ink-42);
}

.pin-view__badge { position: absolute; z-index: 3; top: 14px; inset-inline-end: 14px; }

/* نقطه‌ها قابل کلیک‌اند؛ خودِ دکمه بزرگ‌تر از نقطه است تا با انگشت و ماوس راحت زده شود */
.pin-view__dots {
    position: absolute;
    z-index: 3;
    bottom: 10px;
    left: 50%;
    display: flex;
    justify-content: center;
    max-width: calc(100% - 24px);
    padding: 2px 4px;
    border-radius: var(--r-pill);
    background: rgba(24, 20, 16, .22);
    transform: translateX(-50%);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.pin-view__dots button {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.pin-view__dots button::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .6);
    transition: width .22s var(--ease-out), background-color .18s ease;
}

.pin-view__dots button:hover::before { background: rgba(255, 255, 255, .9); }
.pin-view__dots button.is-active { width: 28px; }
.pin-view__dots button.is-active::before { width: 18px; border-radius: 4px; background: #fff; }

/* فلش‌های ورق زدن: فقط روی دستگاه ماوس‌دار، با رفتن ماوس روی عکس */
.pin-view__arrow {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: none;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: var(--ink);
    box-shadow: var(--shadow);
    cursor: pointer;
    opacity: 0;
    transform: translateY(-50%) scale(.9);
    transition: opacity .18s ease, transform .18s var(--ease-out), background-color .18s ease;
}

.pin-view__arrow--prev { inset-inline-start: 12px; }
.pin-view__arrow--next { inset-inline-end: 12px; }
.pin-view__arrow:hover { background: #fff; }
.pin-view__arrow:active { transform: translateY(-50%) scale(.9); transition-duration: 85ms; }

@media (hover: hover) {
    .pin-view__arrow:not([hidden]) { display: grid; }
    .pin-view__media:hover .pin-view__arrow,
    .pin-view__arrow:focus-visible { opacity: 1; transform: translateY(-50%); }
}

.pin-view__bar {
    display: flex;
    align-items: center;
    gap: 2px;
}

.pin-view__tools { display: flex; align-items: center; gap: 2px; margin-inline-end: auto; }

.pin-icon-btn {
    display: grid;
    flex: none;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
                transform 85ms ease-out;
}

.pin-icon-btn:hover { background: var(--beige); color: var(--ink); }
.pin-icon-btn.is-active { color: var(--amber-deep); }

/* فلش به سمت راست یعنی «برگرد» در فارسی */
.pin-view__back svg { transform: scaleX(-1); }

.pin-view__buy { min-width: clamp(96px, 26vw, 124px); justify-content: center; }

.pin-view__source {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 8px;
    padding-inline: 2px;
    color: var(--muted);
    font-size: .82rem;
}

.pin-view__source-mark {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--beige);
    color: var(--amber-deep);
}

.pin-view__source:hover { color: var(--ink); }

/* نام یک‌خطی با فلش باز شدن برگه، مثل عنوان پین */
.pin-view__head { display: flex; align-items: center; gap: 8px; padding-inline: 2px; }

.pin-view__title {
    flex: 1;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    font-size: clamp(1.05rem, 1.9vw, 1.4rem);
    font-weight: 800;
    line-height: 1.6;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pin-view__title .latin { font-weight: 500; color: var(--muted); font-size: .8em; }

.pin-view__expand { width: 36px; height: 36px; border-radius: 12px; background: var(--beige); }

.pin-view__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    padding-inline: 2px;
}

.pin-view__price .price-now { font-size: clamp(1.2rem, 2.2vw, 1.6rem); font-weight: 800; }

.pin-view__info { justify-content: center; width: 100%; }

/* موبایل: مثل اپ پینترست — عکس تمام‌عرض، برگشت روی عکس، دکمه‌ها زیرش */
@media (max-width: 760px) {
    .pin-page { --pad-x: clamp(8px, 2.4vw, 12px); }
    .pin-view__crumbs { display: none; }
    .pin-board { --board-hero: 100vw; }
    .pin-view { padding-bottom: 4px; }
    .pin-view__slide img { max-height: 78vh; }

    .pin-view__back {
        position: absolute;
        z-index: 3;
        top: 10px;
        inset-inline-start: 10px;
        border-radius: 14px;
        background: rgba(24, 20, 16, .7);
        color: #fff;
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
    }

    .pin-view__back:hover { background: rgba(24, 20, 16, .88); color: #fff; }
}

/* دسکتاپ: مثل pinterest.com — کارت با قاب، نوار اقدام‌ها بالای عکس */
@media (min-width: 761px) {
    .js .pin-board:not(.is-laid) > .pin-view { animation: board-wait 0s 2s both; }

    .pin-view {
        padding: clamp(10px, 1vw, 16px);
        border: 1px solid var(--line);
        border-radius: clamp(24px, 2.2vw, 34px);
        background: var(--card);
        box-shadow: 0 2px 22px -10px rgba(35, 31, 26, .22);
    }

    .pin-view__bar { order: -1; }
    .pin-view__info { margin-top: 2px; }
    /* کارت از ارتفاع صفحه بلندتر نشود تا پین‌ها زودتر زیرش هم بیایند */
    .pin-view__slide img { max-height: min(62vh, 720px); }
}

/*
   --- ناوبری صفحه‌های پینترستی (catalog/pin_base.html) ---
   خواسته‌ی صاحب فروشگاه: فروشگاه، دسته، جست‌وجو و صفحه‌ی محصول هدر، فوتر و داک
   ندارند؛ فقط محصولات بی‌پایان.
   دسکتاپ: نوار آیکون ثابت کنار صفحه + کادر جست‌وجوی بالا، مثل pinterest.com.
   موبایل: فقط یک دکمه‌ی شناور که کشوی منوی کامل سایت را باز می‌کند.
*/
body.is-pin-layout {
    --rail-w: clamp(64px, 4.4vw, 78px);
    --searchbar-h: clamp(66px, 4.6vw, 80px);
}

.pin-rail,
.pin-searchbar,
.pin-fab { display: none; }

.pin-rail__logo {
    display: grid;
    flex: none;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
}

.pin-rail__logo img { width: 32px; height: 32px; }
.pin-rail__logo:hover { background: var(--beige); }

.pin-rail__group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
}

.pin-rail__item {
    position: relative;
    display: grid;
    flex: none;
    place-items: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.pin-rail__item:hover { background: var(--beige); color: var(--ink); }
.pin-rail__item.is-active { background: var(--ink); color: var(--paper); }
.pin-rail__menu { margin-top: auto; }

.pin-rail__count {
    position: absolute;
    top: 5px;
    inset-inline-end: 3px;
    min-width: 18px;
    height: 18px;
    padding-inline: 4px;
    border-radius: 9px;
    background: var(--amber);
    color: var(--ink);
    font-size: .66rem;
    font-weight: 800;
    line-height: 18px;
    text-align: center;
}

.pin-searchbar__box { position: relative; flex: 1; }

.pin-searchbar__form {
    display: flex;
    align-items: center;
    gap: 10px;
    height: clamp(46px, 3.2vw, 56px);
    padding-inline: 18px;
    border-radius: var(--r-pill);
    background: var(--beige);
    color: var(--muted);
    transition: background-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

.pin-searchbar__form:focus-within {
    background: var(--card);
    box-shadow: 0 0 0 3px rgba(242, 161, 28, .38);
}

.pin-searchbar__form input {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--ink);
    font-size: .95rem;
}

.pin-searchbar__form input:focus { outline: none; box-shadow: none; }

.pin-searchbar__suggest:not(:empty) {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline: 0;
    margin: 0;
    padding: 8px 12px;
    border: 1px solid var(--ink-10);
    border-radius: var(--r-lg);
    background: var(--card);
    box-shadow: var(--shadow-lg);
}

/* بالای فروشگاه جمع‌وجور تا محصولات زود دیده شوند (عنوان و متن برای گوگل می‌مانند) */
body.is-pin-layout .page-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 14px;
    margin-bottom: 6px;
    padding-block: clamp(12px, 1.6vw, 20px) 4px;
    border-bottom: 0;
}

body.is-pin-layout .page-hero h1 { font-size: clamp(1.2rem, 2.2vw, 1.8rem); }
body.is-pin-layout .page-hero .lead { margin: 0; font-size: clamp(.78rem, 1.1vw, .9rem); line-height: 1.8; }
body.is-pin-layout .pin-topics { padding-block: 4px 8px; }

body.is-pin-layout .shop-toolbar {
    flex-wrap: wrap;
    padding-block: 0;
    margin-bottom: clamp(10px, 1.4vw, 16px);
    border-bottom: 0;
}

/* روی صفحه‌های باریک سه بخش نوار ابزار در یک خط جا نمی‌شدند و صفحه اسکرول افقی می‌گرفت */
body.is-pin-layout .shop-toolbar > *,
body.is-pin-layout .shop-toolbar form { min-width: 0; }

body.is-pin-layout .shop-toolbar select { max-width: 100%; }

@media (min-width: 481px) {
    body.is-pin-layout .shop-toolbar { flex-wrap: nowrap; }
}

body.is-pin-layout .shop-toolbar label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

body.is-pin-layout .shop-toolbar__count { white-space: nowrap; }

/* جست‌وجو و میان‌برهای کشو، فقط در صفحه‌های پینترستی */
.drawer__search { flex: none; margin-bottom: 4px; }

.drawer__quick {
    display: grid;
    flex: none;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-block: 4px 8px;
}

.drawer__quick a {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 6px;
    border-radius: 14px;
    background: var(--beige);
    font-size: clamp(.76rem, 3.2vw, .84rem);
    font-weight: 600;
}

.drawer__quick svg { color: var(--amber-deep); }

.drawer__quick-count {
    position: absolute;
    top: 6px;
    inset-inline-end: 8px;
    min-width: 18px;
    height: 18px;
    padding-inline: 4px;
    border-radius: 9px;
    background: var(--amber);
    color: var(--ink);
    font-size: .66rem;
    font-weight: 800;
    line-height: 18px;
    text-align: center;
}

@media (min-width: 981px) {
    body.is-pin-layout main {
        padding-inline-start: var(--rail-w);
        padding-top: var(--searchbar-h);
    }

    .pin-rail {
        position: fixed;
        inset-block: 0;
        inset-inline-start: 0;
        z-index: 190;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: var(--rail-w);
        padding-block: 12px 16px;
        border-inline-end: 1px solid var(--line);
        background: var(--paper);
    }

    .pin-searchbar {
        position: fixed;
        top: 0;
        inset-inline: var(--rail-w) 0;
        z-index: 185;
        display: flex;
        align-items: center;
        height: var(--searchbar-h);
        padding-inline: clamp(16px, 2vw, 32px);
        background: var(--paper);
    }
}

@media (max-width: 980px) {
    body.is-pin-layout { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }

    .pin-fab {
        position: fixed;
        z-index: 190;
        bottom: calc(clamp(14px, 4vw, 22px) + env(safe-area-inset-bottom, 0px));
        inset-inline-start: clamp(12px, 4vw, 20px);
        display: grid;
        place-items: center;
        width: 56px;
        height: 56px;
        padding: 0;
        border: 2px solid var(--amber);
        border-radius: 50%;
        background: var(--ink);
        color: var(--paper);
        box-shadow: 0 10px 26px -8px rgba(0, 0, 0, .5);
        cursor: pointer;
    }
}

/*
   برگه‌ی اطلاعات و خرید (#product-info).
   بدون جاوااسکریپت یک بخش معمولی زیر کارت است؛ با کلاس .js لایه‌ی ثابتی می‌شود
   که با دکمه‌ها از پایین بالا می‌آید (در دسکتاپ وسط صفحه باز می‌شود).
*/
.pin-sheet { margin-top: clamp(10px, 2vw, 24px); }

.pin-sheet__lead { margin: 4px 0 14px; color: var(--muted); line-height: 1.9; }

.pin-sheet__backdrop,
.pin-sheet__handle,
.pin-sheet__close,
.pin-sheet__thumb { display: none; }

.pin-sheet__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
}

.pin-sheet__heading { flex: 1; min-width: 0; }

.pin-sheet__heading h2 {
    margin: 0;
    overflow: hidden;
    font-size: clamp(.98rem, 2.2vw, 1.15rem);
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pin-sheet__heading span { color: var(--muted); font-size: .78rem; }

.pin-sheet__tabs { margin-top: clamp(20px, 3vw, 32px); }

.js .pin-sheet {
    position: fixed;
    inset: 0;
    z-index: 260;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    max-width: none;
    margin: 0;
    visibility: hidden;
    pointer-events: none;
    transition: visibility 0s linear .28s;
}

.js .pin-sheet.is-open {
    visibility: visible;
    pointer-events: auto;
    transition: visibility 0s;
}

.js .pin-sheet__backdrop {
    position: absolute;
    inset: 0;
    display: block;
    background: rgba(20, 17, 14, .5);
    opacity: 0;
    transition: opacity .24s ease-in;
}

.js .pin-sheet.is-open .pin-sheet__backdrop { opacity: 1; transition: opacity .32s ease-out; }

.js .pin-sheet__panel {
    position: relative;
    width: min(100%, 780px);
    max-height: 92vh;
    max-height: 92dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 28px 28px 0 0;
    background: var(--paper);
    box-shadow: 0 -10px 40px -12px rgba(0, 0, 0, .35);
    transform: translateY(100%);
    /* بسته شدن سریع و شتاب‌دار؛ باز شدن نرم و فنری (پایین‌تر) */
    transition: transform .26s cubic-bezier(.4, 0, 1, 1);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.js .pin-sheet.is-open .pin-sheet__panel {
    transform: none;
    transition: transform .44s cubic-bezier(.32, .72, 0, 1);
}

.js .pin-sheet__head {
    position: sticky;
    top: 0;
    z-index: 5;
    padding: 22px clamp(14px, 3vw, 26px) 12px;
    background: var(--paper);
    touch-action: none;
}

/* دستگیره‌ی کشیدن، وسط لبه‌ی بالای برگه */
.js .pin-sheet__handle {
    position: absolute;
    top: 8px;
    left: 50%;
    display: block;
    width: 44px;
    height: 5px;
    border-radius: 3px;
    background: var(--ink-16);
    transform: translateX(-50%);
}

.js .pin-sheet__thumb {
    display: block;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    object-fit: cover;
}

.js .pin-sheet__close { display: grid; background: var(--beige); }

.js .pin-sheet__body { padding: 0 clamp(14px, 3vw, 26px) clamp(20px, 3vw, 30px); }

.js .pin-sheet__body .price-box { margin-top: 6px; }

@media (min-width: 761px) {
    .js .pin-sheet { align-items: center; padding: 24px; }
    .js .pin-sheet__panel { max-height: 88vh; border-radius: 28px; transform: translateY(18px) scale(.98); opacity: 0;
        transition: transform .2s cubic-bezier(.4, 0, 1, 1), opacity .18s ease-in; }
    .js .pin-sheet.is-open .pin-sheet__panel { opacity: 1;
        transition: transform .36s cubic-bezier(.2, .8, .2, 1), opacity .24s ease-out; }
    .js .pin-sheet__handle { display: none; }
    .js .pin-sheet__head { padding-top: 16px; }
}

body.sheet-open { overflow: hidden; }

/*
   --- سه‌بعدی و واقعیت افزوده (initModel3d) ---
   دکمه‌ی قرصی پایین عکس محصول. کامپیوتر: «نمایش سه‌بعدی» در پنجره‌ی تمام‌صفحه با
   <model-viewer>. گوشی: «دیدن در خانه» که مستقیم دوربین (AR) را باز می‌کند.
*/
.model3d {
    position: absolute;
    z-index: 4;
    inset-inline-start: 50%;
    bottom: clamp(38px, 5vw, 46px);
    transform: translateX(50%);
    pointer-events: none;
}

.model3d__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px 10px 16px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .94);
    color: var(--ink);
    box-shadow: 0 6px 22px rgba(0, 0, 0, .18);
    font: inherit;
    font-size: .92rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    pointer-events: auto;
    transition: transform .085s ease-out, background .12s ease;
}

.model3d__btn:hover { background: #fff; }
.model3d__btn:active { transform: scale(.96); }
.model3d__btn[hidden] { display: none; }
.model3d__btn.is-busy { opacity: .75; cursor: progress; }

.model3d-dialog {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    place-items: center;
    padding: clamp(0px, 3vw, 32px);
    background: rgba(20, 16, 12, .72);
    animation: model3d-in .22s ease-out;
}

.model3d-dialog__panel {
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr auto;
    width: min(1100px, 100%);
    height: min(820px, 100%);
    overflow: hidden;
    border-radius: clamp(0px, 2vw, 26px);
    background: radial-gradient(circle at 50% 40%, #fff, #efe8dc);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
}

.model3d-dialog__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px clamp(14px, 2vw, 22px);
}

.model3d-dialog__head h2 { margin: 0; font-size: clamp(1rem, .9rem + .4vw, 1.2rem); font-weight: 700; }

.model3d-dialog__stage { position: relative; min-height: 0; }

.model3d-dialog model-viewer {
    width: 100%;
    height: 100%;
    background: transparent;
    --poster-color: transparent;
    --progress-bar-color: var(--amber);
}

.model3d-dialog__hint {
    margin: 0;
    padding: 10px clamp(14px, 2vw, 22px) 16px;
    color: var(--muted, #6b6259);
    font-size: .85rem;
    text-align: center;
}

.model3d-dialog__status {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 14px;
    padding: 24px;
    text-align: center;
    pointer-events: none;
}

.model3d-dialog__status[hidden] { display: none; }
.model3d-dialog__status .btn-key { pointer-events: auto; }

.model3d-dialog__bar {
    width: min(260px, 70%);
    height: 6px;
    overflow: hidden;
    border-radius: 99px;
    background: rgba(0, 0, 0, .08);
}

.model3d-dialog__bar span {
    display: block;
    width: 0;
    height: 100%;
    background: var(--amber);
    transition: width .2s ease;
}

@keyframes model3d-in { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
    .model3d-dialog { animation: none; }
}

/*
   --- حرکت پینترستی ---
   اندازه‌گیری‌شده روی pinterest.com (کروم صاحب فروشگاه) و اپ موبایلش:
   - فشار روی کارت و دکمه: کوچک شدن با transform در ۸۵ میلی‌ثانیه ease-out.
   - هاور کارت: لایه‌ی تیره سریع (۱۲۰ms)، بدون بزرگ‌نمایی عکس.
   - جابه‌جایی پین‌ها وقتی چیدمان عوض می‌شود: ۲۰۰ms ease.
   - پین در حال بارگذاری: رنگ غالب با تپش آرام opacity در ۲ ثانیه، بعد محو شدن عکس.
   - باز شدن پین در اپ: عکس کارت بزرگ می‌شود و جای عکس صفحه‌ی جزئیات می‌نشیند؛
     «برگشت» عکس را به کارت برمی‌گرداند. این‌جا با View Transitions بین دو صفحه
     (بدون کتابخانه و بدون افت سرعت؛ مرورگری که پشتیبانی نکند همان باز شدن عادی را دارد).
   همه با «کاهش حرکت» دستگاه و کلید انیمیشن پنل (.no-motion) خاموش می‌شوند.
*/
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
}

/*
   صفحه‌ی قبل سریع محو می‌شود و صفحه‌ی تازه کمی آرام‌تر ظاهر می‌شود تا وسط کار دو
   صفحه روی هم دیده نشوند (مثل ظاهر شدن جزئیات پین در pinterest.com، حدود ۳۰۰ms).
*/
::view-transition-old(root) { animation: 100ms ease-in both vt-out; }
::view-transition-new(root) { animation: 240ms ease-out 30ms both vt-in; }

@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }

/* عکس پین ← عکس بزرگ صفحه‌ی محصول (و برعکس با برگشت) */
.pin-view__slide:first-child img { view-transition-name: pin-media; }

::view-transition-group(pin-media) {
    animation-duration: .38s;
    animation-timing-function: cubic-bezier(.2, .8, .2, 1);
    border-radius: 22px;
    overflow: clip;
}

::view-transition-old(pin-media),
::view-transition-new(pin-media) {
    height: 100%;
    animation-duration: .38s;
    object-fit: cover;
}

/* ناوبری ثابت صفحه‌های پینترستی حین جابه‌جایی صفحه سر جایش می‌ماند */
.pin-rail { view-transition-name: pin-rail; }
.pin-searchbar { view-transition-name: pin-searchbar; }
.pin-fab { view-transition-name: pin-fab; }

/* فشار روی کارت‌ها و دکمه‌ها */
.pin__media,
.product-card__media { transition: transform 85ms ease-out; }

.pin__media:active,
.product-card__media:active { transform: scale(.975); }

.pin-rail__item,
.pin-fab,
.pin-topic,
.filters-toggle { transition-property: background-color, color, transform; transition-duration: .18s, .18s, 85ms; }

.pin-icon-btn:active,
.pin-rail__item:active,
.pin-fab:active,
.pin-topic:active,
.filters-toggle:active { transform: scale(.92); }

.btn-key:active { transition-duration: 85ms; }

/* پین در حال بارگذاری: تپش رنگ غالب، بعد محو شدن عکس (کلاس را site.js می‌گذارد) */
.pin__media.is-loading { animation: pin-pulse 2s linear infinite; }
.pin__media.is-loading img { opacity: 0; }

@keyframes pin-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .62; }
}

/* جابه‌جایی پین‌ها وقتی چیدمان عوض می‌شود (تغییر عرض، فیلتر، عکسی با ابعاد دیگر) */
.pin-board.is-reflowing > * { transition: top .2s ease, left .2s ease, right .2s ease; }

/* پین‌های تازه‌ی اسکرول بی‌پایان */
.pin-board > .pin.is-new { animation: pin-in .3s cubic-bezier(.2, .8, .2, 1) both; }

@keyframes pin-in {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

/*
   جزئیات کارت محصول بعد از رسیدن عکس کمی بالا می‌آیند. نوار دکمه‌ها فقط محو می‌شود:
   transform روی آن، دکمه‌ی برگشتِ شناور روی عکس (موبایل) را جابه‌جا می‌کرد.
*/
.js .pin-view__source,
.js .pin-view__head,
.js .pin-view__price,
.js .pin-view__info { animation: pin-rise .34s cubic-bezier(.2, .8, .2, 1) .06s both; }

.js .pin-view__bar { animation: fade-in .3s ease-out .04s both; }

@keyframes pin-rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

/* دکمه‌هایی که با HTMX عوض می‌شوند (علاقه‌مندی، مقایسه) */
#wishlist-btn > *,
#compare-btn > * { transition: opacity .22s ease, transform .26s var(--ease-out); }

#wishlist-btn > .htmx-added,
#compare-btn > .htmx-added { opacity: 0; transform: scale(.9); }

[hx-post].htmx-request,
[hx-get].htmx-request { opacity: .6; transition: opacity .15s ease; }

#wishlist-btn .btn--outline svg { animation: heart-pop .42s var(--ease-out); }

@keyframes heart-pop {
    0% { transform: scale(.6); }
    55% { transform: scale(1.25); }
    100% { transform: scale(1); }
}

/* باز و بسته شدن کشوی منو */
.drawer.is-closing { animation: fade-out .22s ease-in both; }
.drawer.is-closing .drawer__panel { animation: slide-out-end .22s cubic-bezier(.4, 0, 1, 1) both; }

@keyframes fade-out { to { opacity: 0; } }

@keyframes slide-out-end {
    from { transform: none; }
    to   { transform: translateX(-100%); }
}

.no-motion .pin__media.is-loading,
.no-motion .pin-board > .pin.is-new,
.no-motion .pin-view > *,
.no-motion .pin-view__bar,
.no-motion #wishlist-btn .btn--outline svg { animation: none; }

.no-motion .pin__media.is-loading img { opacity: 1; }

/* ستاره‌های امتیاز (نظرات مشتریان صفحه اصلی) */
.product-rating__stars {
    color: var(--amber);
    direction: ltr;
    letter-spacing: 1px;
}

.price-box {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 12px;
    padding-block: 22px;
    margin-block: 20px;
    border-block: 1px solid var(--line);
}

.price-box .price-now {
    font-size: clamp(1.7rem, 3.4vw, 2.2rem);
    font-weight: 800;
}

/* پارچه و رنگ همین پست — فقط نوشته، نه انتخاب (قیمت ثابت است؛ سفارشی‌سازی تلفنی با فروشنده) */
.post-facts { display: flex; flex-wrap: wrap; gap: 9px; padding-block: 4px 18px; }

.post-fact {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    background: var(--card);
    font-size: .85rem;
    font-weight: 600;
}

.post-fact small { color: var(--muted); font-size: .78rem; font-weight: 400; }

.post-fact__dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px var(--ink-10);
}

.swatch {
    position: relative;
    display: inline-grid;
    place-items: center;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.swatch input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.swatch__dot {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid transparent;
    box-shadow: inset 0 0 0 1px var(--ink-10);
    transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

.swatch:hover .swatch__dot { transform: scale(1.1); }

.swatch:has(input:checked) .swatch__dot {
    border-color: var(--ink);
    box-shadow: inset 0 0 0 2px var(--card);
}


/* --- جعبه خرید --- */
.buy-box {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    padding-block: 20px;
}

.buy-box .btn-key { flex: 1; min-width: 210px; }

.qty {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--card);
    overflow: hidden;
}

.qty button {
    width: 44px;
    height: 50px;
    border: 0;
    background: transparent;
    font-size: 1.15rem;
    color: var(--ink);
    transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.qty button:hover { background: var(--beige); color: var(--amber-deep); }
/* روی تعداد ۱ دکمه‌ی − غیرفعال است؛ حذف فقط با ضربدر */
.qty button:disabled { opacity: .35; cursor: not-allowed; background: none; color: inherit; }

/* دکمه‌ی مخفیِ «به‌روزرسانی» در سبد نباید جای دکمه‌های ± را بگیرد */
.qty > .sr-only { width: 1px; height: 1px; }

.qty input {
    width: 52px;
    border: 0;
    padding: 0;
    text-align: center;
    background: transparent;
    font-weight: 700;
}

.qty input:focus { box-shadow: none; }

.stock-line {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .84rem;
    font-weight: 500;
    color: var(--amber-deep);
}

.stock-line::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

.stock-line--out { color: var(--danger); }
/* موجودی واقعی انبار از CRM («۲ عدد موجود در انبار») */
.stock-line--in { color: var(--success); font-weight: 700; }
.pin-view__stock { margin: 0; padding-inline: 2px; }

.product-notes {
    display: grid;
    gap: 9px;
    padding-top: 20px;
    margin-top: 4px;
    border-top: 1px solid var(--line);
}

.note-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: .85rem;
    color: var(--muted);
    line-height: 1.95;
}

.note-row svg { margin-top: 6px; color: var(--amber-deep); flex: none; }

/* --- تب‌های صفحه محصول --- */
.tabs {
    display: flex;
    gap: 6px;
    /* در RTL یعنی راست صفحه */
    justify-content: flex-start;
    border-bottom: 1px solid var(--line);
    margin-bottom: 26px;
    overflow-x: auto;
    scrollbar-width: none;
}

.tabs::-webkit-scrollbar { display: none; }

.tabs button {
    padding: 14px 20px;
    border: 0;
    background: none;
    font-size: .9rem;
    font-weight: 700;
    color: var(--muted);
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.tabs button:hover { color: var(--ink); }

.tabs button.is-active {
    color: var(--ink);
    border-bottom-color: var(--ink);
}

/* ویدیوی محصول: زبانه‌ی جدای خودش (نه زیر همه‌ی زبانه‌ها) */
.product-video {
    display: block;
    width: 100%;
    max-height: 70vh;
    border-radius: var(--r-md);
    background: var(--ink);
}

/* پنجره‌ی آپارات: ۱۶ به ۹، تا بار شدن زمینه‌ی تیره */
.product-video--frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.product-video--frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* نظرات مشتریان (catalog/partials/reviews.html) */
.reviews__summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

.reviews__summary strong { font-size: 1.6rem; font-weight: 800; }

.reviews__stars {
    font-size: 1.1rem;
    letter-spacing: 2px;
    background: linear-gradient(to left, var(--amber) var(--fill, 100%), var(--ink-16) var(--fill, 100%));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.reviews__list { margin: 0 0 24px; padding: 0; list-style: none; border-top: 1px solid var(--line); }

.review { padding: 18px 0; border-bottom: 1px solid var(--line); }

.review__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    font-size: .86rem;
}

.review__stars { color: var(--amber); letter-spacing: 1px; }
.review__stars-off { color: var(--ink-16); }
.review__head time { margin-inline-start: auto; font-size: .78rem; }

.review__text { margin: 8px 0 0; font-size: .88rem; line-height: 2; }
.review__about { margin: 4px 0 0; font-size: .76rem; }

.review__reply {
    margin-top: 12px;
    padding: 12px 16px;
    border-inline-start: 3px solid var(--amber);
    border-radius: var(--r-sm);
    background: var(--beige);
    font-size: .84rem;
}

.review__reply p { margin: 4px 0 0; line-height: 2; }

.review-form { display: grid; gap: 14px; max-width: 640px; }
.review-form h3 { margin: 0; font-size: 1rem; }
.review-form__rating { margin: 0; padding: 0; border: 0; }
.review-form__rating legend { margin-bottom: 6px; font-size: .84rem; font-weight: 600; }
.review-form__field { display: grid; gap: 6px; font-size: .84rem; font-weight: 600; }
.review-form__field input,
.review-form__field textarea { font-weight: 400; }
.review-form .btn-key { justify-self: start; }

/* ستاره‌ها: ورودی‌ها ۵ تا ۱ در HTML و row-reverse تا ۱ سمت راست باشد؛ انتخاب N، ستاره‌های ۱ تا N را روشن می‌کند */
.star-input { display: inline-flex; flex-direction: row-reverse; gap: 4px; }
.star-input input { position: absolute; opacity: 0; pointer-events: none; }
.star-input label { font-size: 1.9rem; line-height: 1; color: var(--ink-16); cursor: pointer; transition: color .12s ease; }
.star-input input:checked ~ label,
.star-input label:hover,
.star-input label:hover ~ label { color: var(--amber); }
.star-input input:focus-visible + label { outline: 2px solid var(--amber); outline-offset: 2px; border-radius: 4px; }

.review-done {
    margin: 0 0 14px;
    padding: 12px 16px;
    border-radius: var(--r-sm);
    background: var(--success-soft);
    color: var(--success);
    font-size: .86rem;
}

.review-error { margin: 0; color: var(--danger); font-size: .84rem; }

/* جدول مشخصات — دو ستونه روی دسکتاپ */
.spec-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 clamp(24px, 4vw, 60px);
}

.spec-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding-block: 15px;
    border-bottom: 1px solid var(--line);
    font-size: .88rem;
}

.spec-row dt { color: var(--muted); }
.spec-row dd { margin: 0; font-weight: 700; text-align: end; }

.prose {
    font-size: .92rem;
    line-height: 2.1;
    color: var(--muted);
    max-width: 74ch;
}

.prose h2,
.prose h3,
.prose h4 {
    color: var(--ink);
    font-weight: 800;
    margin-top: 1.7em;
}

.prose ul,
.prose ol { padding-inline-start: 1.4em; }
.prose li { margin-bottom: .5em; }
.prose img { border-radius: var(--r-md); margin-block: 1.5em; }

.prose a {
    color: var(--amber-deep);
    text-decoration: underline;
    text-underline-offset: 4px;
}


/* ---------- ۱۴ سبد، تسویه و پنل کاربر ---------- */
.card {
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--card);
}

.card--pad { padding: clamp(20px, 3vw, 30px); }
.card--flat { background: transparent; }

.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-2);
    padding-bottom: 16px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--line);
}

.panel-head h2,
.panel-head h3 { margin: 0; font-size: 1.05rem; font-weight: 800; }

.cart-layout,
.checkout-layout {
    display: grid;
    /* ستون خلاصه با صفحه بزرگ و کوچک می‌شود، نه ۳۴۰ پیکسل ثابت */
    grid-template-columns: minmax(0, 1fr) clamp(290px, 26vw, 420px);
    gap: clamp(20px, 3vw, 44px);
    align-items: start;
}

/* --- نوار مرحله‌های خرید --- */
.steps {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(14px, 2.4vw, 30px);
    margin-bottom: clamp(24px, 4vw, 40px);
    padding-bottom: clamp(20px, 3vw, 32px);
    border-bottom: 1px solid var(--line);
    list-style: none;
}

.steps li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .87rem;
    color: var(--muted);
}

.steps li b {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 50%;
    background: var(--beige);
    color: var(--muted);
    font-size: .82rem;
    font-weight: 700;
}

.steps li.is-current { color: var(--ink); font-weight: 700; }

.steps li.is-current b {
    background: var(--dark);
    color: #fff;
}

.steps li.is-done b {
    background: var(--amber);
    color: var(--ink);
}

/* --- ردیف‌های سبد --- */
.cart-list { border-top: 1px solid var(--line); }

.cart-item {
    --cart-thumb: clamp(76px, 7vw, 124px);
    display: grid;
    grid-template-columns: var(--cart-thumb) minmax(0, 1fr) auto auto;
    gap: clamp(14px, 2vw, 24px);
    align-items: center;
    padding-block: clamp(18px, 2.4vw, 24px);
    border-bottom: 1px solid var(--line);
}

.cart-item__img {
    width: var(--cart-thumb);
    height: var(--cart-thumb);
    object-fit: cover;
    border-radius: var(--r);
    background: linear-gradient(135deg, var(--sand-1), var(--sand-2));
}

.cart-item__title {
    display: block;
    font-size: .98rem;
    font-weight: 700;
    line-height: 1.8;
}

.cart-item__title:hover { color: var(--amber-deep); }

.cart-item__opts,
.cart-item__options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.cart-item__opts span,
.cart-item__options span {
    padding: 5px 12px;
    border-radius: var(--r-pill);
    background: var(--beige);
    font-size: .77rem;
    color: var(--muted);
}

.cart-item__price {
    font-size: .95rem;
    font-weight: 800;
    white-space: nowrap;
}

.cart-item__price small {
    display: block;
    margin-top: 5px;
    font-size: .74rem;
    font-weight: 400;
    color: var(--muted);
}

.cart-item__foot,
.cart-item__actions {
    display: flex;
    align-items: center;
    gap: var(--gap-2);
}

/*
   دکمه‌ی گرد حذف (ردیف سبد خرید و کارت علاقه‌مندی).
   نامش عمداً .icon-btn نیست: هم‌نامی با دکمه‌های هدر باعث می‌شد این قواعد —
   که بعدتر در فایل‌اند — دکمه‌های ۴۲پیکسلی هدر را ۳۴پیکسلی و گرد کنند،
   برخلاف طرح (Home-Mobile: مربع ۴۲ با گوشه‌ی ۱۴).
*/
.cart-remove {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex: none;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--card);
    color: var(--muted);
    cursor: pointer;
    transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.cart-remove:hover { color: var(--danger); border-color: var(--danger); }

/* در حال به‌روزرسانی تعداد (بدون بارگذاری صفحه): مبلغ ردیف و خلاصه کمی کم‌رنگ */
.cart-item:has(.qty.is-busy) .cart-item__price { opacity: .55; transition: opacity .15s ease; }

/* --- کد تخفیف و ادامه خرید --- */
.cart-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: clamp(20px, 3vw, 30px);
}

.coupon {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 300px;
}

.coupon input {
    flex: 1;
    min-width: 0;
    border-radius: var(--r-pill);
    padding-inline: 22px;
}

.coupon__applied {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    flex: 1;
    min-width: 0;
    padding: 13px 22px;
    border: 1px solid var(--success);
    border-radius: var(--r-pill);
    background: var(--success-soft);
    color: var(--success);
    font-size: .87rem;
}

.coupon__applied svg { flex: none; }
.coupon__applied b { font-weight: 800; }


/* --- خلاصه سفارش --- */
.summary {
    position: sticky;
    top: calc(var(--header-h) + 16px);
    padding: clamp(20px, 3vw, 28px);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--beige);
}

.summary h2,
.summary h3 {
    margin: 0 0 14px;
    font-size: 1.02rem;
    font-weight: 800;
}

.summary-row,
.summary__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-block: 10px;
    font-size: .88rem;
    color: var(--muted);
}

.summary-row strong { color: var(--ink); font-weight: 500; }

/* ردیف تخفیف — مبلغ کم‌شده با رنگ سبز، بدون علامت منفی که در RTL جابه‌جا می‌شود */
.summary-row--off strong { color: var(--success); font-weight: 700; }

/* ردیف قلم سفارش در صفحه تسویه (نام محصول + مشخصات زیر آن) */
.summary-row--item { align-items: flex-start; }

.summary-row--item > span { flex: 1; color: var(--ink); font-size: .87rem; }

.summary-row--item small {
    display: block;
    margin-top: 4px;
    font-size: .76rem;
    color: var(--muted);
}

.summary-row--total,
.summary__row--total {
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    font-size: 1.02rem;
    font-weight: 800;
    color: var(--ink);
}

.summary-row .val { font-weight: 800; color: var(--amber-deep); }

/* معادل ریالی مبلغ نهایی (کارهای مالی رسمی ریالی‌اند) */
.summary-row--rial { margin-top: -6px; padding-top: 0; border: 0; color: var(--muted); font-size: .8rem; }
.summary-row--rial strong, .summary-row--rial span { font-weight: 400; }

/* صفحه‌ی پرداخت کارت‌به‌کارت */
.pay-manual__amount { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin: 0; }
.pay-manual__amount b { font-size: clamp(1.2rem, 1rem + 1vw, 1.7rem); color: var(--amber-deep); }
.pay-manual__rial { color: var(--muted); font-size: .9rem; }
.pay-manual__hint, .pay-manual__note { margin: 10px 0 0; color: var(--muted); font-size: .85rem; line-height: 1.9; }
.pay-manual__back { margin-top: 18px; text-align: center; }
.pay-manual .spec-table td .num { letter-spacing: .04em; }

.summary .btn-key,
.summary .btn { margin-top: 16px; }

.summary__notes {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
    display: grid;
    gap: 9px;
    font-size: .81rem;
    color: var(--muted);
    line-height: 1.9;
}

.notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 17px;
    border-radius: var(--r);
    background: var(--warning-soft);
    color: var(--warning);
    font-size: .84rem;
    line-height: 1.9;
}

.notice svg { margin-top: 5px; flex: none; }
.notice--info { background: var(--info-soft); color: var(--info); }
.notice--ok   { background: var(--success-soft); color: var(--success); }
.notice--warn { background: var(--warning-soft); color: var(--warning); }
.notice--danger { background: var(--danger-soft); color: var(--danger); }

/* گزینه‌های پرداخت */
.pay-options { display: grid; gap: 12px; }

.pay-option,
.radio-card {
    position: relative;
    display: flex;
    gap: 13px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--card);
    cursor: pointer;
    font-weight: 400;
    transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}

.pay-option:hover,
.radio-card:hover { border-color: var(--amber); }

.pay-option:has(input:checked),
.radio-card:has(input:checked) {
    border-color: var(--amber);
    background: rgba(242, 161, 28, .09);
}

.pay-option strong,
.radio-card strong { display: block; font-size: .95rem; margin-bottom: 4px; }

.pay-option p,
.radio-card small {
    margin: 0;
    font-size: .81rem;
    color: var(--muted);
    line-height: 1.9;
}

.radio-card small.radio-card__note { display: block; margin-top: 4px; color: var(--amber-deep); }

/* جنسیت: دو گزینه‌ی کنار هم (partials/gender_field.html) */
.gender-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.gender-options .radio-card { align-items: center; justify-content: center; padding: 13px 16px; font-weight: 600; }
.auth-card .gender-options .radio-card { min-height: 56px; border-radius: 999px; }

/*
   انتخاب درگاه، درست زیر «پرداخت آنلاین». فقط وقتی همان گزینه تیک خورده
   دیده می‌شود؛ مرورگری که :has ندارد همیشه نشانش می‌دهد (فرم باز هم کار می‌کند).
*/
.gateway-choice {
    display: grid;
    gap: 10px;
    margin-inline-start: clamp(14px, 3vw, 28px);
    padding-inline-start: clamp(12px, 2.4vw, 18px);
    border-inline-start: 2px solid var(--amber);
    animation: gateway-in .22s var(--ease-out, ease-out);
}

.gateway-choice__title {
    margin: 2px 0 0;
    font-size: .82rem;
    font-weight: 700;
    color: var(--muted);
}

.radio-card--sub { padding: 14px 16px; }

.pay-options:has(input[name="payment_type"][value="full"]:not(:checked)) .gateway-choice { display: none; }

@keyframes gateway-in {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) { .gateway-choice { animation: none; } }

/* خلاصه‌ی خطاهای تسویه، با لینک به هر فیلد */
.checkout-errors { margin: 6px 0 0; padding-inline-start: 18px; font-size: .85rem; line-height: 2; }
.checkout-errors a { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
#checkout-errors:focus { outline: none; }

/* «امکان خرید اقساطی با دیجی‌پی» در خلاصه‌ی سبد خرید (متن از پنل) */
.summary__installment {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 16px 0 0;
    padding: 12px 14px;
    border-radius: var(--r);
    background: rgba(242, 161, 28, .1);
    color: var(--ink);
    font-size: .84rem;
    line-height: 1.9;
}

.summary__installment svg { flex: none; margin-top: 4px; color: var(--amber-deep); }

/* --- پنل کاربر --- */
.account-layout {
    display: grid;
    grid-template-columns: clamp(240px, 18vw, 290px) minmax(0, 1fr);
    gap: clamp(18px, 2vw, 26px);
    align-items: start;
}

.account-layout > * { min-width: 0; }

.account-side {
    position: sticky;
    top: clamp(14px, 2vw, 24px);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* کارت کاربر بالای منو */
.account-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    border-radius: 22px;
    background: var(--beige);
}

.account-card__avatar {
    flex: none;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--dark);
    color: var(--amber);
    font-size: 1.15rem;
    font-weight: 800;
}

.account-card__id { min-width: 0; }

.account-card__id strong {
    display: block;
    font-size: .93rem;
    font-weight: 800;
}

.account-card__id .num {
    display: block;
    font-size: .76rem;
    color: var(--ink-64);
}

.account-nav {
    display: grid;
    gap: 3px;
    padding: 10px;
    border: 1px solid var(--ink-16);
    border-radius: 22px;
}

.account-nav a {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 48px;
    padding: 0 16px;
    border-radius: 14px;
    font-size: .85rem;
    font-weight: 600;
    transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.account-nav a:hover { background: var(--beige); color: var(--amber-deep); }

.account-nav a.is-active {
    background: var(--dark);
    color: var(--paper);
}

.account-nav svg { flex: none; color: var(--amber); }
.account-nav a.is-active svg { color: var(--amber); }
/* شمارنده‌ی «سبد خرید» منوی حساب؛ با افزودن به سبد (initCartAdd) خودش به‌روز می‌شود */
.account-nav__count {
    margin-inline-start: auto;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    background: var(--amber);
    color: var(--ink);
    font-size: .74rem;
    font-weight: 700;
}

.stat-tiles,
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr));
    gap: 14px;
    margin-bottom: 26px;
}

.stat-tile,
.stat-card {
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--card);
}

.stat-tile__value,
.stat-card__value {
    font-size: 1.55rem;
    font-weight: 800;
    line-height: 1.5;
    color: var(--amber-deep);
}

.stat-tile__label,
.stat-card__label { font-size: .79rem; color: var(--muted); }

/* --- جدول مشخصات دو ستونی (جزئیات سفارش، مشخصات محصول) --- */
.spec-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .88rem;
}

.spec-table th,
.spec-table td {
    padding: 12px 0;
    text-align: start;
    vertical-align: top;
    border-bottom: 1px solid var(--line);
}

.spec-table th {
    width: 38%;
    font-weight: 500;
    color: var(--muted);
}

.spec-table tr:last-child th,
.spec-table tr:last-child td { border-bottom: 0; }

/*
   شماره‌ی کارت و شبا در صفحه‌ی پرداخت دستی: ستون عنوان باریک می‌شود تا
   دکمه‌ی «کپی» کنار خودِ شماره جا شود، نه در خط بعد.
*/
.pay-manual .spec-table th { width: 1%; white-space: nowrap; padding-inline-end: 18px; }

.pay-manual .spec-table td {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.pay-manual .copy-btn { margin-inline-start: 0; }

/* --- صفحه تأیید سفارش --- */
.order-done {
    padding: clamp(28px, 5vw, 52px) clamp(20px, 4vw, 44px);
    margin-bottom: var(--gap-4);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--beige);
    text-align: center;
}

.order-done__icon {
    display: grid;
    place-items: center;
    width: 66px;
    height: 66px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: var(--card);
    color: var(--amber-deep);
}

.order-done__icon--ok   { color: var(--success); }
.order-done__icon--warn { color: var(--warning); }

.order-done h1 {
    font-size: clamp(1.3rem, 3vw, 1.7rem);
    font-weight: 700;
    margin-bottom: 10px;
}

.order-done p {
    max-width: 46ch;
    margin-inline: auto;
    color: var(--muted);
    font-size: .92rem;
}

.order-done__number {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 22px;
    padding: 12px 24px;
    border: 1px dashed var(--amber);
    border-radius: var(--r-pill);
    background: var(--card);
    font-size: .87rem;
    color: var(--muted);
}

.order-done__number b {
    font-size: 1.02rem;
    font-weight: 800;
    color: var(--ink);
}

.order-done__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 24px;
}

.order-done__phone { margin-top: 18px; font-size: .85rem; }
.order-done__phone a { font-weight: 800; color: var(--amber-deep); }

/* --- جدول --- */
.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--card);
}

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: .87rem;
    min-width: 560px;
}

.table th,
.table td {
    padding: 14px 16px;
    text-align: start;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}

.table th {
    background: var(--beige);
    font-weight: 700;
    font-size: .81rem;
}

.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: var(--ink-06); }

.wrap { white-space: normal !important; min-width: 190px; }

/*
   جدول مقایسه: متن خانه‌ها می‌شکند (پیش‌فرض جدول‌ها nowrap است و «زمان تحویل»
   را وسط جمله می‌برید) و ستون «ویژگی» موقع کشیدن افقی سر جایش می‌ماند،
   وگرنه کاربر نمی‌داند عددی که می‌بیند مال کدام ویژگی است.
*/
.table--compare td,
.table--compare tbody th { white-space: normal; }

.table--compare tbody th {
    position: sticky;
    inset-inline-start: 0;
    z-index: 1;
}

.table--compare thead th:first-child {
    position: sticky;
    inset-inline-start: 0;
    z-index: 2;
}

/*
   صفحه‌ی مقایسه (تا ۸ محصول، ردیف‌های ۴تایی؛ accounts.views.compare). در گوشی ستون‌ها
   عرض ثابت دارند و جدول کشیدنی است (ستون «ویژگی» چسبان)؛ از ۷۶۱ به بالا هر جدول تمام
   عرض را می‌گیرد و ۴ ستون هم‌عرض دارد (ستون‌های خالی .compare-filler جای محصول‌های نیامده).
*/
.table--compare {
    min-width: 0;
    width: max-content;
    table-layout: fixed;
}

.table--compare th,
.table--compare td {
    width: clamp(150px, 42vw, 205px);
    vertical-align: top;
    padding: 12px 14px;
    white-space: normal;
}

.table--compare .compare-corner,
.table--compare tbody th {
    width: clamp(92px, 24vw, 140px);
    background: var(--beige);
    color: var(--ink-64);
    font-size: .8rem;
}

.compare-corner { vertical-align: bottom !important; }

.table--compare tbody tr.is-same td { color: var(--ink-64); }

.compare-head {
    position: relative;
    background: var(--card) !important;
    font-weight: 400;
    text-align: start;
}

.compare-head__remove {
    position: absolute;
    top: 8px;
    inset-inline-end: 8px;
    z-index: 1;
}

.compare-head__remove .cart-remove {
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 2px 8px rgba(35, 31, 26, .14);
}

.compare-head__media {
    position: relative;
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 10px;
    background: var(--beige);
}

.compare-head__media img { width: 100%; height: 100%; object-fit: cover; }

/*
   نام و قیمت ارتفاع ثابت دارند (دو خط) تا دکمه‌ی «مشاهده و خرید» در همه‌ی ستون‌ها
   یک ارتفاع بنشیند؛ قبلاً نام دوخطی، قیمت قبل از تخفیف و نشان «ارزان‌ترین» آن را پایین می‌بردند.
*/
.compare-head__name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    height: calc(2 * 1.7em);
    margin-top: 10px;
    font-size: .88rem;
    font-weight: 700;
    line-height: 1.7;
}

.compare-head__price {
    height: calc(2 * 1.8em);
    margin: 6px 0 10px;
    font-size: .86rem;
    line-height: 1.8;
}
.compare-head__price strong { display: block; color: var(--amber-deep); }
.compare-head__price del { color: var(--ink-42); font-size: .76rem; margin-inline-end: 6px; }

.compare-badge {
    position: absolute;
    top: 8px;
    inset-inline-start: 8px;
    box-shadow: 0 2px 8px rgba(35, 31, 26, .14);
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--r-pill);
    background: var(--success-soft);
    color: var(--success);
    font-size: .74rem;
    font-weight: 700;
}

/* کالای موجود در انبار (پست کالای موجود CRM): پایین عکس تا با «ارزان‌ترین» و دکمه‌ی حذف روی هم نیفتد */
.compare-badge--stock { top: auto; bottom: 8px; }
.cart-item__stock { display: inline-block; margin-top: 6px; }

.compare-head--empty { vertical-align: middle !important; }

.compare-add {
    display: grid;
    place-items: center;
    gap: 6px;
    min-height: 220px;
    padding: 16px;
    border: 2px dashed var(--ink-16);
    border-radius: 12px;
    color: var(--ink-64);
    font-size: .86rem;
    font-weight: 700;
    text-align: center;
    transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.compare-add:hover { border-color: var(--amber); color: var(--amber-deep); }
.compare-add small { font-weight: 400; color: var(--ink-42); font-size: .76rem; }
.compare-add__plus { font-size: 1.8rem; line-height: 1; }
.compare-empty-cell { background: transparent; }

/* نوار بالای جدول: شمارش، «فقط تفاوت‌ها» و کارها */
.compare-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
    margin-bottom: 12px;
}

.compare-bar__count { margin: 0; color: var(--muted); font-size: .88rem; }
.compare-bar__count b { color: var(--ink); }

.compare-bar__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-inline-start: auto;
}

.compare-toggle {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 36px;
    font-size: .86rem;
    font-weight: 700;
    color: var(--ink);
}

.compare-toggle__track {
    position: relative;
    width: 38px;
    height: 22px;
    border-radius: 999px;
    background: var(--ink-16);
    transition: background-color var(--t-fast) var(--ease);
}

.compare-toggle__track::after {
    content: "";
    position: absolute;
    top: 3px;
    inset-inline-start: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
    transition: inset-inline-start var(--t-fast) var(--ease);
}

.compare-toggle.is-on .compare-toggle__track { background: var(--success); }
.compare-toggle.is-on .compare-toggle__track::after { inset-inline-start: 19px; }

.compare-note { margin: 0 0 10px; font-size: .8rem; color: var(--muted); }

.compare-group__title {
    margin: 0 0 8px;
    font-size: .82rem;
    font-weight: 700;
    color: var(--ink-64);
}

.compare-wrap + .compare-group__title,
.compare-wrap + .compare-add--row { margin-top: clamp(18px, 2.4vw, 28px); }

.compare-filler { background: transparent !important; border-bottom-color: transparent !important; }

.compare-add--row {
    display: flex;
    flex-wrap: wrap;
    min-height: 96px;
    gap: 4px 10px;
}

@media (min-width: 761px) {
    /* ۴ ستون هم‌عرض در تمام عرض؛ دیگر اسکرول افقی لازم نیست */
    .table--compare { width: 100%; }
    .table--compare th,
    .table--compare td { width: auto; }
    .compare-col-label { width: clamp(104px, 12vw, 150px); }
    .compare-wrap ~ .table-hint,
    .table-hint { display: none; }
}

/*
   دکمه‌ی «در مقایسه» (صفحه‌ی محصول) و «در سبد خرید»: سبز تا مشتری ببیند اضافه شده
   (خواست صاحب فروشگاه). سبز همان --success سایت است.
*/
.btn.is-added,
.btn-key.is-added {
    background: var(--success);
    border-color: var(--success);
    color: #fff;
    text-shadow: none;
}

.btn.is-added:hover,
.btn-key.is-added:hover { background: #255737; border-color: #255737; color: #fff; }

.btn-key.is-added {
    background: linear-gradient(180deg, #3F8A5B 0%, #2F6B45 60%, #255737 100%);
    box-shadow:
        inset 0 1.5px 0 rgba(255, 255, 255, .22),
        inset 0 -4px 8px rgba(0, 0, 0, .3),
        0 0 0 1.5px rgba(63, 138, 91, .55),
        0 10px 18px rgba(0, 0, 0, .25);
}

.cart-added-note {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    margin-top: 10px;
    font-size: .84rem;
    color: var(--success);
    font-weight: 700;
}

.cart-added-note a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.cart-added-note.is-error { color: var(--danger); }
.cart-added-note[hidden] { display: none; }

/* شمارنده‌ی سبد که صفر است پنهان می‌ماند ولی جایش هست تا بدون بارگذاری صفحه عدد بگیرد */
[data-cart-count][hidden] { display: none !important; }

#compare-btn { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.compare-link { font-size: .84rem; font-weight: 700; color: var(--success); text-decoration: underline; text-underline-offset: 3px; }

/* راهنمای کشیدن جدولی که ناچار اسکرول افقی دارد (فقط در صفحه‌ی باریک) */
.table-hint {
    display: none;
    margin: 0 0 10px;
    font-size: .78rem;
    color: var(--muted);
}

@media (max-width: 760px) {
    .table-hint { display: block; }
}

/*
   جدول‌های داده در گوشی کارتی می‌شوند. با نوار افقی، ستون‌های آخر (وضعیت و
   دکمه‌ی «جزئیات») اصلاً دیده نمی‌شدند و کاربر هم نشانه‌ای از اسکرول نداشت.
   عنوان هر خانه از data-label خوانده می‌شود، پس بدون جاوااسکریپت کار می‌کند.
*/
@media (max-width: 700px) {
    .table--stack { min-width: 0; }

    .table--stack thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
    }

    .table--stack tr {
        display: block;
        padding: 12px 14px;
        border-bottom: 1px solid var(--line);
    }

    .table--stack tr:last-child { border-bottom: 0; }

    .table--stack td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 5px 0;
        border: 0;
        white-space: normal;
        text-align: end;
    }

    .table--stack td::before {
        content: attr(data-label);
        flex: none;
        font-size: .78rem;
        font-weight: 700;
        color: var(--muted);
        text-align: start;
    }

    /* نام محصول: عنوان ردیف، نه یک خانه‌ی معمولی */
    .table--stack td.num { display: flex; }

    .table--stack td.td-title {
        display: block;
        min-width: 0;
        padding-bottom: 8px;
        font-weight: 700;
        text-align: start;
    }

    .table--stack td.td-title::before { display: none; }

    .table--stack td.td-action { padding-top: 10px; }
    .table--stack td.td-action::before { display: none; }
    .table--stack td.td-action .btn { width: 100%; }

    .table--stack tbody tr:hover td { background: transparent; }
}

/* --- خط زمانی سفارش --- */
.timeline {
    position: relative;
    padding-inline-start: 26px;
    list-style: none;
    margin: 0;
}

.timeline::before {
    content: "";
    position: absolute;
    inset-inline-start: 6px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: var(--line);
}

.timeline li,
.timeline-item { position: relative; padding-bottom: 22px; }

.timeline li::before {
    content: "";
    position: absolute;
    inset-inline-start: -25px;
    top: 9px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--paper);
    border: 2px solid var(--line);
}

.timeline li.is-done::before {
    background: var(--amber);
    border-color: var(--amber);
}

.timeline strong { display: block; font-size: .91rem; font-weight: 700; }
.timeline small { font-size: .77rem; color: var(--muted); }

/* --- صفحات ورود --- */
/*
   صفحه‌های ورود و ثبت‌نام دوستونه‌اند (طبق Account-Classic): فرم در یک
   طرف و پنل تیره‌ی معرفی برند در طرف دیگر. زیر ۸۸۰ پیکسل پنل حذف می‌شود.
*/
.auth-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: stretch;
    min-height: calc(100vh - var(--header-h) - 140px);
}

.auth-brand {
    /*
       در طرح، فرم سمت راست است و پنل برند سمت چپ. چون include برند در
       تمپلیت اول می‌آید، ترتیب را اینجا جابه‌جا می‌کنیم تا هر چهار
       صفحه‌ی ورود/ثبت‌نام با یک قاعده درست شوند.
    */
    order: 2;
    position: relative;
    display: grid;
    align-content: center;
    padding: clamp(34px, 5vw, 64px);
    overflow: hidden;
    color: var(--paper);
    background: linear-gradient(160deg, #2A241E 0%, #231F1A 100%);
    background: linear-gradient(160deg,
        color-mix(in srgb, var(--ink) 92%, var(--amber)) 0%,
        var(--ink) 100%);
}

.auth-brand__glow {
    position: absolute;
    inset-inline-end: -120px;
    top: -140px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 40%,
        rgba(233, 183, 96, .26), rgba(233, 183, 96, 0) 68%);
    pointer-events: none;
}

.auth-brand__inner { position: relative; max-width: 38ch; }

.auth-brand h2 {
    margin: 14px 0 0;
    font-size: clamp(1.3rem, 2.4vw, 1.85rem);
    font-weight: 800;
    line-height: 1.5;
    color: #fff;
}

.auth-brand p {
    margin: 14px 0 0;
    font-size: .9rem;
    line-height: 2.1;
    color: rgba(251, 248, 243, .7);
}

.auth-brand__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 26px 0 0;
    padding: 0;
    list-style: none;
    font-size: .86rem;
    color: rgba(251, 248, 243, .86);
}

.auth-brand__list li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.auth-brand__list svg { flex: none; color: var(--amber); }

.auth-card {
    order: 1;
    width: min(430px, 100%);
    justify-self: center;
    align-self: center;
    padding: clamp(26px, 4vw, 40px);
    padding-block: clamp(40px, 6vw, 64px);
}

.auth-card h1 { font-size: clamp(1.4rem, 2.6vw, 1.95rem); font-weight: 800; margin-bottom: 6px; }

@media (max-width: 880px) {
    .auth-wrap {
        grid-template-columns: 1fr;
        place-items: center;
        align-content: center;   /* وگرنه کارت بالا می‌چسبد و زیرش خالی می‌ماند */
        padding-block: clamp(28px, 5vw, 60px);
    }

    .auth-brand { display: none; }

    .auth-card {
        padding: clamp(26px, 4vw, 40px);
        border: 1px solid var(--line);
        border-radius: var(--r-lg);
        background: var(--card);
        box-shadow: var(--shadow);
    }
}

.auth-card__sub {
    font-size: .87rem;
    color: var(--muted);
    margin-bottom: var(--gap-3);
}

.auth-footer {
    margin-top: var(--gap-3);
    padding-top: var(--gap-3);
    border-top: 1px solid var(--line);
    font-size: .85rem;
    color: var(--muted);
    text-align: center;
}

.auth-footer a { color: var(--amber-deep); font-weight: 700; }

/*
   --- فرم‌های ورود، کد تأیید، تکمیل حساب و بازیابی رمز ---
   اندازه‌ها و سطح «شیشه‌ای» کادرها از site-design/Account-Classic.
*/
.auth-card h1 { letter-spacing: 0; }
.auth-card .auth-card__sub { margin: 10px 0 0; font-size: .875rem; color: var(--ink-64, rgba(35, 31, 26, .62)); }
.auth-card .notice { font-size: .8rem; }

.auth-tabs {
    display: flex;
    gap: 8px;
    margin-top: 26px;
    padding: 5px;
    border-radius: 999px;
    background: var(--beige);
}

.auth-tab {
    flex: 1;
    display: grid;
    place-items: center;
    min-height: 44px;
    border-radius: 999px;
    font-size: .84rem;
    font-weight: 600;
    color: rgba(35, 31, 26, .6);
    transition: background-color .22s ease, box-shadow .25s ease, color .22s ease;
}

.auth-tab.is-active {
    background: #fff;
    color: var(--ink);
    font-weight: 700;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .13);
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 22px;
}

.auth-field { display: block; margin: 0; }

.auth-field__label {
    display: block;
    margin-bottom: 8px;
    font-size: .78rem;
    font-weight: 600;
    color: rgba(35, 31, 26, .7);
}

.auth-field__label small { font-weight: 400; font-size: inherit; color: rgba(35, 31, 26, .45); }

.auth-card input[type="text"],
.auth-card input[type="tel"],
.auth-card input[type="email"],
.auth-card input[type="password"] {
    min-height: 56px;
    padding: 0 18px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .92) 0%, rgba(247, 244, 239, .74) 55%, rgba(255, 255, 255, .58) 100%);
    border: 1px solid rgba(35, 31, 26, .1);
    box-shadow: inset 0 1.5px 1px rgba(255, 255, 255, 1), inset 0 -3px 8px rgba(160, 150, 135, .2);
    font-size: .94rem;
}

.auth-card input:focus {
    border-color: #fff;
    box-shadow: inset 0 1.5px 1px rgba(214, 232, 255, .5), 0 0 0 3px rgba(242, 161, 28, .28), 0 0 18px rgba(242, 161, 28, .45);
}

.auth-card input[dir="ltr"] { text-align: left; }

.auth-error {
    padding: 11px 16px;
    border-radius: 16px;
    background: rgba(242, 161, 28, .09);
    color: #C2410C;
    font-size: .78rem;
    font-weight: 600;
}

.auth-forgot { display: flex; justify-content: flex-end; margin-top: 10px; }
.auth-forgot a { font-size: .78rem; font-weight: 600; color: var(--amber-deep); }

.auth-terms {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    font-size: .78rem;
    font-weight: 400;
    color: rgba(35, 31, 26, .66);
    cursor: pointer;
}

.auth-terms input { margin-top: 7px; width: 16px; height: 16px; accent-color: var(--amber-deep); flex: none; }
.auth-terms a { font-weight: 600; color: var(--amber-deep); }

.auth-submit { min-height: 58px; font-size: .9rem; }

.auth-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 4px 0;
    font-size: .75rem;
    color: rgba(35, 31, 26, .35);
}

.auth-divider span { flex: 1; height: 1px; background: rgba(35, 31, 26, .12); }

.auth-alt {
    display: grid;
    place-items: center;
    min-height: 52px;
    border-radius: 999px;
    border: 1px solid rgba(35, 31, 26, .1);
    background: linear-gradient(180deg, rgba(255, 255, 255, .92) 0%, rgba(247, 244, 239, .74) 55%, rgba(255, 255, 255, .58) 100%);
    font-size: .81rem;
    font-weight: 600;
    color: var(--ink);
    transition: transform .16s ease;
}

.auth-alt:hover { transform: translateY(-1px); }

.auth-back {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 14px;
    font-size: .81rem;
    color: rgba(35, 31, 26, .6);
}

.auth-back:hover { color: var(--ink); }

/* تکمیل حساب: نام و نام خانوادگی کنار هم، بقیه تمام‌عرض */
.auth-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
    gap: 14px;
}

.auth-grid__wide { grid-column: 1 / -1; }

/* کپچا */
.auth-captcha__row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.auth-captcha__row input { flex: 1; min-width: 0; letter-spacing: 3px; }

.auth-captcha__img {
    flex: none;
    width: clamp(120px, 34vw, 150px);
    height: auto;
    border-radius: 14px;
    border: 1px solid rgba(35, 31, 26, .1);
    background: #F6F1E9;
}

.auth-captcha__refresh {
    display: grid;
    place-items: center;
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--beige);
    font-size: 1.2rem;
    color: var(--amber-deep);
}

/* خانه‌های کد تأیید (طبق طرح) — فقط با جاوااسکریپت؛ بدون آن کادر ساده می‌ماند */
.otp-boxes {
    display: none;
    direction: ltr;
    justify-content: center;
    gap: 12px;
    margin-top: 6px;
}

.js .otp-boxes { display: flex; }
.js .otp-real,
.js .otp-real-error:empty { display: none; }

.otp-box {
    width: clamp(52px, 15vw, 62px) !important;
    height: clamp(60px, 17vw, 70px);
    min-height: 0 !important;
    padding: 0 !important;
    border-radius: 20px !important;
    font-size: 1.6rem !important;
    font-weight: 700;
    text-align: center !important;
}

.otp-resend {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: .81rem;
    color: rgba(35, 31, 26, .6);
}

.otp-resend__timer { font-weight: 700; color: var(--ink); }

.otp-resend__btn {
    padding: 0;
    border: 0;
    background: none;
    font-family: inherit;
    font-size: .81rem;
    font-weight: 700;
    color: var(--amber-deep);
    cursor: pointer;
}

.otp-resend__btn:disabled { color: rgba(35, 31, 26, .35); cursor: not-allowed; }

/* قدرت رمز */
.pw-strength { display: flex; align-items: center; gap: 10px; }
.pw-strength__track { flex: 1; height: 6px; border-radius: 99px; background: rgba(35, 31, 26, .1); overflow: hidden; }
.pw-strength__bar { display: block; width: 0; height: 100%; border-radius: 99px; background: var(--amber); transition: width .25s ease, background-color .25s ease; }
.pw-strength__label { font-size: .75rem; font-weight: 600; color: rgba(35, 31, 26, .5); }


/* ---------- ۱۵ وبلاگ و صفحات محتوایی ---------- */

/* سربرگ صفحات داخلی */
.page-hero {
    padding-block: clamp(24px, 3.5vw, 44px) clamp(18px, 2.5vw, 30px);
    border-bottom: 1px solid var(--line);
    margin-bottom: clamp(22px, 3vw, 38px);
}

.page-hero--shop h1 { font-size: clamp(1.6rem, 3.2vw, 2.35rem); }

.page-hero h1 {
    margin: 0;
    font-size: clamp(1.7rem, 4vw, 2.8rem);
    font-weight: 800;
    line-height: 1.35;
}

.page-hero .lead { margin-top: 14px; }

.breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding-block: 16px;
    font-size: .8rem;
    color: var(--muted);
}

.breadcrumbs a:hover { color: var(--amber-deep); }
.breadcrumbs .sep { opacity: .5; }

/* --- مقاله --- */
.article-hero { margin-bottom: clamp(24px, 3vw, 42px); }

.article-hero img {
    width: 100%;
    aspect-ratio: 21 / 9;
    object-fit: cover;
    border-radius: var(--r-lg);
}

.article-body { max-width: 780px; margin-inline: auto; }

/* --- صفحه‌ی مقاله (طبق بخش article در Blog-Classic) --- */
.article {
    max-width: 820px;
    margin-inline: auto;
    padding-block: clamp(20px, 3vw, 34px) clamp(26px, 3.4vw, 40px);
}

.article h1 {
    margin: 14px 0 0;
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    font-weight: 800;
    line-height: 1.55;
}

.article__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 14px;
    font-size: .8rem;
    color: var(--ink-42);
}

/* جداکننده‌ی «—» چون نقطه‌ی وسط کنار عدد فارسی شبیه صفر دیده می‌شود */
.article__meta > span + span::before {
    content: "—";
    margin-inline-end: 14px;
    color: var(--ink-16);
}

.article__cover {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    margin-block: 26px;
    border-radius: var(--r-md);
    background: linear-gradient(135deg, var(--sand-1), var(--sand-2));
}

.article__lead {
    margin: 0 0 20px;
    font-size: 1rem;
    font-weight: 500;
    line-height: 2.2;
    color: var(--ink);
}

.article__share {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 34px;
    padding-top: 24px;
    border-top: 1px solid var(--ink-10);
    font-size: .82rem;
    color: var(--ink-64);
}

.article__share a[aria-label] {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--ink-16);
    border-radius: 12px;
    color: var(--ink-64);
    transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.article__share a[aria-label]:hover {
    background: var(--amber);
    border-color: var(--amber);
    color: var(--ink);
}

.article__back { margin-inline-start: auto; }

.article__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--gap-3);
    margin-top: 30px;
    padding: clamp(20px, 2.4vw, 28px);
    border-radius: var(--r-lg);
    background: var(--beige);
}

.article__cta strong {
    display: block;
    font-size: 1.05rem;
    font-weight: 700;
}

.article__cta p {
    margin: 8px 0 0;
    font-size: .84rem;
    line-height: 2;
    color: var(--ink-64);
}

/* صفحه‌ی مقاله: متن + ستون چسبان «مقالات مرتبط» کنارش (خواست صاحب فروشگاه؛ در گوشی بعد از متن) */
.article-layout { display: grid; gap: clamp(20px, 3vw, 44px); align-items: start; }
.article-layout .article { width: 100%; }
@media (min-width: 1100px) {
    .article-layout { grid-template-columns: minmax(0, 820px) clamp(260px, 24vw, 340px); justify-content: center; }
    .article-side__inner { position: sticky; top: 96px; }
}
.article-side { padding-block: clamp(4px, 3vw, 34px) 0; }
.article-side__inner { padding: clamp(16px, 1.8vw, 22px); border-radius: var(--r-lg); background: var(--beige); }
.article-side h2 { margin: 0 0 12px; font-size: 1rem; font-weight: 800; }
.side-posts { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 4px; }
.side-post { display: grid; grid-template-columns: 76px 1fr; gap: 12px; align-items: center; padding: 8px; border-radius: 14px; color: inherit; text-decoration: none; transition: background-color var(--t-fast) var(--ease); }
.side-post:hover { background: rgba(255, 255, 255, .6); }
.side-post__media { width: 76px; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; display: grid; place-items: center; background: var(--sand-1); color: var(--ink-42); }
.side-post__media img { width: 100%; height: 100%; object-fit: cover; }
.side-post__body b { display: block; font-size: .84rem; font-weight: 700; line-height: 1.8; }
.side-post__body small { font-size: .74rem; color: var(--ink-42); }
.article-products { padding-top: 0; }

/* اجزای متن مقاله (blog_tags.render_article) */
.article-toc { margin: 0 0 24px; padding: 16px 20px; border: 1px solid var(--ink-10); border-radius: var(--r-md); font-size: .86rem; }
.article-toc strong { display: block; margin-bottom: 6px; }
.article-toc ol { margin: 0; padding-inline-start: 1.3em; display: grid; gap: 2px; }
.article-toc a { color: var(--ink-64); }
.article-toc a:hover { color: var(--amber-deep); }
.prose h2[id], .prose h3[id] { scroll-margin-top: 96px; }
.article-figure { margin: 1.6em 0; }
.article-figure img { display: block; width: 100%; height: auto; margin: 0; border-radius: var(--r-md); background: var(--sand-1); }
.article-figure figcaption { margin-top: 8px; font-size: .8rem; text-align: center; color: var(--ink-42); }
.article-note { margin: 1.4em 0; padding: 14px 18px; border-inline-start: 4px solid var(--amber); border-radius: 12px; background: var(--beige); color: var(--ink); }
.prose strong { color: var(--ink); }
.article-product { display: grid; grid-template-columns: clamp(96px, 22vw, 160px) 1fr; gap: clamp(12px, 2vw, 20px); align-items: center; margin: 1.6em 0; padding: 12px; border: 1px solid var(--ink-10); border-radius: var(--r-md); background: var(--surface, #fff); }
.article-product__media { display: block; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: var(--sand-1); }
.article-product__media img { width: 100%; height: 100%; object-fit: cover; margin: 0; border-radius: 0; }
.article-product__body { display: grid; gap: 6px; justify-items: start; }
.article-product__name { font-weight: 800; color: var(--ink); text-decoration: none !important; line-height: 1.8; }
.article-product .price-box { margin: 0; }
.article-product .btn-key { padding: 8px 18px; font-size: .82rem; text-decoration: none; color: var(--ink); }
.article .prose, .product-desc { overflow-wrap: break-word; }
.article .prose ol, .product-desc ol { list-style-type: persian; }
.article .prose hr, .product-desc hr { margin: 2.2em 0; border: 0; border-top: 1px solid var(--ink-10); }
/* توضیحات کامل محصول (catalog.posting.description_html): تیترها هم‌اندازه‌ی برگه‌ی اطلاعات، نه تیتر مقاله */
.product-desc h2 { margin: 1.4em 0 .4em; font-size: 1.05rem; line-height: 1.8; }
.product-desc h3 { margin: 1.2em 0 .3em; font-size: .95rem; line-height: 1.8; }
.product-desc > :first-child { margin-top: 0; }
/* جدول مقایسه: در گوشی خودِ جدول اسکرول افقی دارد، صفحه نه */
.article-table { margin: 1.6em 0; overflow-x: auto; border: 1px solid var(--ink-10); border-radius: var(--r-md); }
.article-table table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.article-table th, .article-table td { padding: 10px 14px; border-bottom: 1px solid var(--ink-10); text-align: start; vertical-align: top; }
.article-table th + th, .article-table td + td { border-inline-start: 1px solid var(--ink-10); }
.article-table tr:last-child td { border-bottom: 0; }
.article-table th { background: var(--beige); color: var(--ink); font-weight: 800; white-space: nowrap; }


/*
   --- وبلاگ (طبق Blog-Classic) ---
   مقاله‌ی شاخص در بالا، شبکه‌ی دوتایی زیرش و ستون کناری چسبان.
*/
.blog-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(240px, 22vw, 300px);
    gap: clamp(24px, 3vw, 40px);
    align-items: start;
}

/* --- مقاله‌ی شاخص --- */
.post-lead {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: clamp(18px, 2.4vw, 28px);
    align-items: center;
    padding-bottom: 30px;
    margin-bottom: 32px;
    border-bottom: 1px solid var(--ink-16);
}

.post-lead__media {
    display: block;
    aspect-ratio: 4 / 3;
    border: 1px solid var(--ink-06);
    border-radius: 18px;
    overflow: hidden;
    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, .14) 0%,
            rgba(255, 255, 255, .05) 48%,
            rgba(255, 255, 255, .09) 100%),
        linear-gradient(135deg, var(--sand-1), var(--sand-2));
}

.post-lead__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .9s var(--ease-out);
}

.post-lead:hover .post-lead__media img { transform: scale(1.04); }

.post-lead__body > strong {
    display: block;
    margin-top: 14px;
    font-size: clamp(1.15rem, 2.2vw, 1.7rem);
    font-weight: 800;
    line-height: 1.5;
}

.post-lead:hover .post-lead__body > strong { color: var(--amber-deep); }

.post-lead__sum {
    display: block;
    margin-top: 12px;
    font-size: .9rem;
    line-height: 2.1;
    color: var(--ink-64);
}

.post-lead__meta {
    display: block;
    margin-top: 14px;
    font-size: .76rem;
    color: var(--ink-42);
}

.post-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
    gap: clamp(20px, 2.6vw, 30px);
}

/* --- ستون کناری --- */
.blog-aside {
    position: sticky;
    top: clamp(14px, 2vw, 24px);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.blog-aside__card {
    padding: 22px;
    border: 1px solid var(--ink-16);
    border-radius: 18px;
}

.blog-aside__card--beige {
    border-color: transparent;
    background: var(--beige);
}

.blog-aside__card > strong {
    display: block;
    margin-bottom: 14px;
    font-size: .95rem;
    font-weight: 700;
}

.blog-aside__card p {
    margin: 0 0 16px;
    font-size: .79rem;
    line-height: 2;
    color: var(--ink-64);
}

.blog-aside__card ul {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: .84rem;
}

.blog-aside__card li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.blog-aside__card a { color: var(--ink-64); }
.blog-aside__card a:hover,
.blog-aside__card a.is-active { color: var(--amber-deep); }
.blog-aside__card li > .num { color: var(--ink-42); }

.blog-aside__posts li { display: block; line-height: 1.9; }

@media (max-width: 980px) {
    .blog-layout { grid-template-columns: 1fr; }
    .blog-aside { position: static; }
    .post-lead { grid-template-columns: 1fr; }
}


/*
   --- صفحه تماس و نمایشگاه‌ها (طبق Contact-Classic) ---
   چهار کارت اطلاعات، بعد فرم کنار کادر بژ، بعد نمایشگاه‌ها و سؤالات.
*/
.contact-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: var(--gap-3);
    margin-bottom: clamp(28px, 4vw, 44px);
}

.contact-card {
    padding: 24px;
    border: 1px solid var(--ink-16);
    border-radius: 18px;
}

.contact-card__icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin-bottom: 16px;
    border-radius: 50%;
    background: rgba(242, 161, 28, .09);
    color: var(--amber);
}

.contact-card strong {
    display: block;
    margin-bottom: 8px;
    font-size: .92rem;
    font-weight: 700;
}

.contact-card p {
    margin: 0;
    font-size: .82rem;
    line-height: 2;
    color: var(--ink-64);
}

.contact-card__big {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: var(--amber);
    line-height: 2;
}

.contact-card__big:hover { color: var(--amber-deep); }

.contact-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(280px, 26vw, 380px);
    gap: clamp(24px, 3vw, 44px);
    align-items: start;
}

.contact-aside {
    padding: 26px;
    border-radius: 18px;
    background: var(--beige);
    color: var(--ink);
}

.contact-aside > strong {
    display: block;
    margin-bottom: 16px;
    font-size: 1rem;
    font-weight: 700;
}

.contact-aside ul {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: .85rem;
    line-height: 2;
    color: var(--ink-64);
}

.contact-aside__foot {
    display: grid;
    gap: 10px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--ink-16);
}

.contact-aside__foot p {
    margin: 0;
    font-size: .82rem;
    color: var(--ink-64);
}

/*
   قرص روشن — دقیقاً مثل دکمه‌های پیام‌رسان در Contact-Classic.
   قبلاً اینجا چهار دکمه‌ی «کلید» تیره بود و در کنار دکمه‌ی اصلی فرم،
   هیچ‌کدام دیگر عمل اصلی صفحه به نظر نمی‌رسید.
*/
.btn-soft {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 0 20px;
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: var(--r-pill);
    background: linear-gradient(180deg,
        rgba(255, 255, 255, .92) 0%,
        rgba(247, 244, 239, .74) 55%,
        rgba(255, 255, 255, .58) 100%);
    color: var(--ink);
    font-size: .82rem;
    font-weight: 600;
    transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}

.btn-soft:hover { border-color: #fff; transform: translateY(-1px); }
.btn-soft:active { transform: translateY(1px); }

.branch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: clamp(18px, 2.4vw, 26px);
}

@media (max-width: 980px) {
    .contact-layout { grid-template-columns: 1fr; }
}


/*
   --- صفحه‌های سند (شرایط ارسال، گارانتی، قوانین، بازگشت کالا، سؤالات متداول) ---

   هر پنج طرح دقیقاً یک ساختار دارند، پس یک قالب مشترک دارند:
   هیروی تیره، فهرست چسبان در راست و هر بخش یک کارت.

   رنگ سطح این صفحه‌ها در طرح #635E57 است. اینجا از روی پالت پنل ساخته
   می‌شود (۷۰٪ جوهر + ۳۰٪ کاغذ ≈ همان رنگ) تا با عوض‌شدن تم هماهنگ بماند.
*/
.doc-hero,
.doc-toc,
.doc-section,
.doc-cta {
    --doc-surface: #635E57;
    --doc-surface: color-mix(in srgb, var(--ink) 70%, var(--paper));
    --doc-fg: var(--paper);
    --doc-fg-soft: color-mix(in srgb, var(--paper) 72%, transparent);
}

/* --- هیروی تیره --- */
.doc-hero {
    position: relative;
    padding-block: clamp(34px, 4.4vw, 58px) clamp(28px, 3.4vw, 44px);
    overflow: hidden;
    color: var(--paper);
    background: linear-gradient(160deg,
        color-mix(in srgb, var(--ink) 65%, var(--paper)) 0%,
        color-mix(in srgb, var(--ink) 72%, var(--paper)) 100%);
}

.doc-hero__glow {
    position: absolute;
    inset-inline-end: -120px;
    top: -140px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 40%,
        rgba(233, 183, 96, .26), rgba(233, 183, 96, 0) 68%);
    pointer-events: none;
}

.doc-hero__inner {
    position: relative;
    max-width: 760px;
}

.doc-hero__crumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .78rem;
    color: var(--paper);
}

.doc-hero__crumbs a:hover { color: var(--gold-soft); }
.doc-hero__here { color: #FFE0A3; }

.doc-hero h1 {
    margin: 16px 0 0;
    font-size: clamp(1.6rem, 3.2vw, 2.35rem);
    font-weight: 800;
    color: #fff;
}

.doc-hero p {
    margin: 14px 0 0;
    font-size: .94rem;
    line-height: 2;
    color: rgba(251, 248, 243, .7);
    text-wrap: pretty;
}

/* --- چیدمان --- */
.doc-layout {
    display: grid;
    grid-template-columns: clamp(230px, 18vw, 280px) minmax(0, 1fr);
    gap: clamp(22px, 3vw, 44px);
    align-items: start;
    padding-block: clamp(30px, 4vw, 52px) clamp(40px, 5vw, 70px);
}

/* --- فهرست چسبان --- */
.doc-toc {
    position: sticky;
    top: clamp(14px, 2vw, 24px);
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 20px;
    border-radius: 26px;
    background: var(--doc-surface);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .09);
    color: var(--doc-fg);
}

.doc-toc strong {
    margin-bottom: 8px;
    font-size: .7rem;
    font-weight: 500;
    /* فقط فاصله‌ی حروف لاتین‌نما ندارد؛ روی فارسی letter-spacing نمی‌گذاریم */
    color: var(--doc-fg);
}

.doc-toc a {
    padding: 9px 14px;
    border-radius: var(--r-pill);
    font-size: .84rem;
    color: var(--doc-fg);
    transition: background-color var(--t-fast) var(--ease);
}

.doc-toc a:hover,
.doc-toc a:focus-visible { background: rgba(255, 255, 255, .12); }

/* --- بخش‌ها --- */
.doc-main {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 900px;
}

.doc-section {
    padding: clamp(22px, 2.4vw, 30px) clamp(20px, 2.6vw, 32px);
    border-radius: 26px;
    background: var(--doc-surface);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .07);
    color: var(--doc-fg);
    scroll-margin-top: clamp(70px, 8vw, 90px);
}

.doc-section h2 {
    margin: 0 0 14px;
    font-size: clamp(1.05rem, 1.9vw, 1.32rem);
    font-weight: 800;
    color: #fff;
}

.doc-section--intro h2 { display: none; }

/* متن داخل کارت روی زمینه‌ی تیره خوانده می‌شود */
.doc-section .prose,
.doc-section .prose p,
.doc-section .prose li { color: var(--doc-fg); font-size: .92rem; }

.doc-section .prose h3,
.doc-section .prose strong { color: #fff; }

.doc-section .prose a { color: var(--gold-soft); text-decoration: underline; }
.doc-section .prose ul,
.doc-section .prose ol { padding-inline-start: 20px; }
.doc-section .prose li { margin-bottom: 8px; }
.doc-section .prose > *:first-child { margin-top: 0; }
.doc-section .prose > *:last-child { margin-bottom: 0; }

/* --- کارت پایانی --- */
.doc-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--gap-3);
    margin-top: 8px;
    padding: clamp(22px, 2.4vw, 30px) clamp(20px, 2.6vw, 32px);
    border-radius: 26px;
    color: var(--paper);
    background: linear-gradient(160deg,
        color-mix(in srgb, var(--ink) 65%, var(--paper)) 0%,
        color-mix(in srgb, var(--ink) 72%, var(--paper)) 100%);
}

.doc-cta h2 {
    margin: 0;
    font-size: clamp(1rem, 1.8vw, 1.25rem);
    font-weight: 800;
    color: #fff;
}

.doc-cta p {
    margin: 8px 0 0;
    font-size: .86rem;
    color: rgba(251, 248, 243, .72);
}

@media (max-width: 980px) {
    .doc-layout { grid-template-columns: 1fr; }

    /* فهرست در موبایل چسبان نیست و افقی می‌شود تا فضا نگیرد */
    .doc-toc {
        position: static;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: 8px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .doc-toc::-webkit-scrollbar { display: none; }
    .doc-toc strong { margin: 0 4px 0 0; flex: none; }
    .doc-toc a { flex: none; white-space: nowrap; background: rgba(255, 255, 255, .1); }
}

/*
   --- آکاردئون سؤالات متداول ---
   داخل کارت‌های تیره‌ی صفحه‌های سند هم استفاده می‌شود، پس رنگ‌هایش
   آنجا با یک بلوک جداگانه روشن می‌شوند (پایین همین بخش).
*/
.accordion { border-top: 1px solid var(--line); }

.accordion__item { border-bottom: 1px solid var(--line); }

.accordion__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 20px 0;
    background: none;
    border: 0;
    text-align: start;
    font-size: .97rem;
    font-weight: 700;
    color: var(--ink);
}

.accordion__head:hover { color: var(--amber-deep); }

.accordion__icon {
    position: relative;
    width: 20px;
    height: 20px;
    flex: none;
}

.accordion__icon::before,
.accordion__icon::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 50%;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform var(--t) var(--ease);
}

/* آکاردئون روی کارت تیره‌ی صفحه‌ی سند */
.doc-section .accordion { border-top-color: rgba(255, 255, 255, .16); }
.doc-section .accordion__item { border-bottom-color: rgba(255, 255, 255, .16); }
.doc-section .accordion__head { color: #fff; }
.doc-section .accordion__head:hover { color: var(--gold-soft); }
.doc-section .accordion__body,
.doc-section .accordion__body p { color: var(--doc-fg); }

.accordion__icon::after { transform: rotate(90deg); }
.accordion__item.is-open .accordion__icon::after { transform: rotate(0); }

.accordion__body {
    padding-bottom: 22px;
    font-size: .89rem;
    line-height: 2.05;
    color: var(--muted);
    max-width: 76ch;
}

/* --- کارت شعبه --- */
.branch-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--card);
}

.branch-card img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.branch-card__body {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 22px;
    flex: 1;
}

.branch-card h3 { margin: 0; font-size: 1.02rem; font-weight: 700; }

.branch-card .row {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: .85rem;
    color: var(--muted);
    line-height: 1.9;
}

.branch-card .row svg { margin-top: 6px; color: var(--amber-deep); flex: none; }


/*
   --- صفحه‌ی شرایط خرید قسطی (Installment-Classic و Installment-Mobile) ---
   اندازه‌ها عیناً از طرح؛ روی متن فارسی letter-spacing طرح عمداً نیامده.
   شبکه‌ها سیال‌اند و فقط ستون عکس‌های اپلیکیشن زیر ۸۲۰ پیکسل زیر مرحله‌ها می‌رود (مثل طرح موبایل).
*/
.inst { padding-bottom: 54px; }

.inst-hero { padding-bottom: 30px; }

.inst-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 12px;
    font-size: .72rem;
    color: var(--amber);
}

.inst-eyebrow::before {
    content: "";
    width: 30px;
    height: 1px;
    background: var(--amber);
}

.inst-hero h1 {
    margin: 0;
    font-size: clamp(22px, 7vw, 38px);
    font-weight: 800;
    line-height: 1.9;
}

.inst-lead {
    max-width: 70ch;
    margin: 12px 0 0;
    font-size: .9rem;
    line-height: 2.15;
    color: rgba(35, 35, 26, .66);
}

.inst-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 22px;
}

.inst-chips span {
    padding: 9px 18px;
    border-radius: var(--r-pill);
    background: var(--beige);
    font-size: .78rem;
    line-height: 1.6;
}

.inst-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
    gap: clamp(14px, 1.6vw, 20px);
    padding-bottom: 40px;
}

.inst-fact {
    padding: 22px;
    border: 1px solid rgba(35, 31, 26, .12);
    border-radius: var(--r);
}

.inst-fact p {
    margin: 0 0 6px;
    font-size: .75rem;
    color: rgba(35, 31, 26, .55);
}

.inst-fact strong {
    display: block;
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.9;
}

.inst-tabs { padding-bottom: 20px; }

.inst-tabs__row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(35, 31, 26, .12);
}

.inst-tab {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 26px;
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: var(--r-pill);
    background: linear-gradient(180deg, rgba(255, 255, 255, .92) 0%, rgba(247, 244, 239, .74) 55%, rgba(255, 255, 255, .58) 100%);
    box-shadow: inset 0 1.5px 1px #fff, inset 0 -3px 8px rgba(160, 150, 135, .26), 0 6px 16px rgba(0, 0, 0, .13);
    color: var(--ink);
    font-size: .875rem;
    font-weight: 700;
    transition: box-shadow .25s ease, transform .16s ease, border-color .22s ease;
}

.inst-tab:hover { color: var(--ink); border-color: #fff; transform: translateY(-1px); }
.inst-tab:active { transform: translateY(1px); }

.inst-tab.is-active {
    box-shadow: inset 0 1.5px 1px rgba(214, 232, 255, .5), inset 0 0 0 2px rgba(35, 31, 26, .9), 0 8px 20px rgba(35, 31, 26, .16);
}

.inst-tab img { display: block; width: auto; height: 22px; }

.inst-tabs__note {
    display: flex;
    align-items: center;
    font-size: .78rem;
    color: rgba(35, 31, 26, .55);
}

/* بدون JS همه‌ی زبانه‌ها دیده می‌شوند؛ پنهان کردن فقط با کلاس .js */
.js .inst-panel[data-inst-hidden] { display: none; }

.inst-panel h2,
.inst-faq h2 {
    margin: 0;
    font-size: clamp(19px, 5.6vw, 27px);
    font-weight: 800;
    line-height: 1.9;
}

.inst-panel__head { padding: 26px 0 10px; }

.inst-panel__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

.inst-panel__title img { display: block; width: auto; height: 28px; }

.inst-panel__head > p {
    max-width: 70ch;
    margin: 10px 0 0;
    font-size: .875rem;
    line-height: 2.15;
    color: rgba(35, 31, 26, .68);
}

.inst-credit {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 40px;
    align-items: start;
    padding: 14px 0 40px;
}

.inst-credit--solo { grid-template-columns: minmax(0, 1fr); }

.inst-steps { margin: 0; padding: 0; list-style: none; }

.inst-step {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 16px;
    padding: 22px 0;
    border-bottom: 1px solid rgba(35, 31, 26, .1);
}

.inst-step__num {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--beige);
    color: var(--amber);
    font-size: .94rem;
    font-weight: 800;
}

.inst-step__title { margin: 0 0 7px; font-size: 1rem; font-weight: 700; }

.inst-step__text {
    margin: 0;
    font-size: .84rem;
    line-height: 2.15;
    color: rgba(35, 31, 26, .7);
}

.inst-step__note {
    margin: 9px 0 0;
    font-size: .78rem;
    line-height: 2;
    color: var(--amber);
}

.inst-shots { display: grid; gap: 16px; }

.inst-shot {
    margin: 0;
    overflow: hidden;
    border: 1px solid rgba(35, 31, 26, .12);
    border-radius: var(--r);
    background: var(--beige);
}

.inst-shot img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.inst-shot figcaption {
    padding: 12px 14px;
    font-size: .75rem;
    color: rgba(35, 31, 26, .62);
}

.inst-buy { padding-bottom: 44px; }

.inst-buy h2 { margin-bottom: 6px; }

.inst-buy__intro {
    margin: 0 0 24px;
    font-size: .875rem;
    line-height: 2.1;
    color: rgba(35, 31, 26, .66);
}

.inst-methods {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
    gap: clamp(14px, 1.8vw, 26px);
}

.inst-method {
    padding: clamp(18px, 2vw, 26px);
    border: 1px solid rgba(35, 31, 26, .12);
    border-radius: 18px;
}

.inst-method__label { margin: 0 0 4px; font-size: .72rem; color: var(--amber); }

.inst-method__title { margin: 0 0 18px; font-size: 1.19rem; font-weight: 800; }

.inst-method__steps { border-top: 1px solid rgba(35, 31, 26, .1); }

.inst-faq { padding-bottom: 46px; }

.inst-faq h2 { margin-bottom: 8px; }

.inst-faq__intro { margin: 0 0 18px; font-size: .84rem; color: rgba(35, 31, 26, .6); }

.inst-faq__list { border-top: 1px solid rgba(35, 31, 26, .12); }

.inst-faq__item { border-bottom: 1px solid rgba(35, 31, 26, .1); }

.inst-faq__item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 0;
    font-size: .94rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.inst-faq__item summary::-webkit-details-marker { display: none; }

.inst-faq__icon {
    flex: none;
    color: var(--amber);
    font-size: 21px;
    line-height: 1;
    transition: transform .3s ease;
}

.inst-faq__item[open] .inst-faq__icon { transform: rotate(45deg); }

.inst-faq__body {
    max-width: 86ch;
    padding: 0 0 22px;
    font-size: .875rem;
    line-height: 2.2;
    color: rgba(35, 31, 26, .7);
}

.inst-cta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 26px;
    padding: clamp(22px, 2.4vw, 30px) clamp(20px, 2.6vw, 34px);
    border-radius: 18px;
    background: var(--beige);
}

.inst-cta__title { margin: 0 0 8px; font-size: 1.31rem; font-weight: 800; }

.inst-cta__text { margin: 0; font-size: .84rem; line-height: 2.1; color: rgba(35, 31, 26, .66); }

.inst-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }

.inst-cta__actions .btn-key,
.inst-cta__actions .btn-soft { min-height: 54px; padding-inline: 28px; font-size: .84rem; }

@media (max-width: 820px) {
    .inst-credit,
    .inst-cta { grid-template-columns: minmax(0, 1fr); }
}


/* همکاری با ما (templates/parisanmodern/partnership.html)؛ سرصفحه و مراحل همان کلاس‌های inst- خرید قسطی */
.partner-section { padding-bottom: clamp(30px, 4vw, 48px); }
.partner-section h2 {
    margin: 0 0 18px;
    font-size: clamp(18px, 4.6vw, 24px);
    font-weight: 800;
    line-height: 1.8;
}
.partner-benefits {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: clamp(14px, 1.6vw, 20px);
}
.partner-benefit {
    padding: 22px;
    border: 1px solid rgba(35, 31, 26, .12);
    border-radius: var(--r);
    background: var(--paper);
}
.partner-benefit__icon {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--beige);
    color: var(--amber-deep);
}
.partner-benefit h3 { margin: 12px 0 6px; font-size: .95rem; font-weight: 700; line-height: 1.8; }
.partner-benefit p { margin: 0; font-size: .82rem; line-height: 2.05; color: rgba(35, 31, 26, .68); }

.partner-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(240px, 26vw, 340px);
    gap: clamp(16px, 2.4vw, 32px);
    align-items: start;
    scroll-margin-top: 90px;
}
.partner-form__card {
    padding: clamp(18px, 3vw, 32px);
    border: 1px solid rgba(35, 31, 26, .12);
    border-radius: var(--r);
    background: var(--paper);
}
.partner-form__intro { margin: -8px 0 18px; font-size: .84rem; line-height: 2; color: rgba(35, 31, 26, .66); }
.partner-form__aside {
    display: grid;
    gap: 10px;
    padding: 22px;
    border-radius: var(--r);
    background: var(--beige);
}
.partner-form__aside p { margin: 0; font-size: .82rem; line-height: 2; }
.partner-form__aside .btn-key { justify-self: start; }
/* بدون شماره‌ی تماس ستون کنار فرم نیست؛ فرم تمام‌عرض */
.partner-form--solo { grid-template-columns: minmax(0, 1fr); }
/* دام ربات: آدم نمی‌بیند، ربات پرش می‌کند (views.partnership) */
.partner-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (max-width: 820px) {
    .partner-form { grid-template-columns: minmax(0, 1fr); }
}

/* نوار «همکاری با ما» صفحه اصلی (HomeSection.KEY_PARTNERSHIP) */
.partner-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px 28px;
    padding: clamp(20px, 3vw, 34px) clamp(18px, 3.4vw, 44px);
    border: 1px solid rgba(35, 31, 26, .12);
    border-radius: var(--r);
    background: var(--beige);
}
.partner-strip__copy { flex: 1 1 320px; min-width: 0; }
.partner-strip h2 { margin: 0; font-size: clamp(17px, 4.2vw, 24px); font-weight: 800; line-height: 1.8; }
.partner-strip p { margin: 6px 0 0; font-size: .86rem; line-height: 2; color: rgba(35, 31, 26, .7); }
.tone-dark .partner-strip { background: var(--card); border-color: var(--line); }
.tone-dark .partner-strip p { color: inherit; opacity: .75; }

/* ---------- ۱۶ اجزای کمکی ---------- */
.messages { display: grid; gap: 10px; padding-block: 16px; }

.message {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 18px;
    border-radius: var(--r);
    border-inline-start: 3px solid currentColor;
    font-size: .88rem;
    animation: msg-in .4s var(--ease-out) both;
}

@keyframes msg-in {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.message button {
    border: 0;
    background: none;
    font-size: 1.3rem;
    line-height: 1;
    color: inherit;
    opacity: .6;
}

.message button:hover { opacity: 1; }

.message.success { background: var(--success-soft); color: var(--success); }
.message.info    { background: var(--info-soft);    color: var(--info); }
.message.warning { background: var(--warning-soft); color: var(--warning); }
.message.error   { background: var(--danger-soft);  color: var(--danger); }
.message.debug   { background: var(--beige);        color: var(--muted); }

/* اسکلت بارگذاری */
.skeleton {
    background: linear-gradient(90deg, var(--beige) 25%, var(--ink-06) 37%, var(--beige) 63%);
    background-size: 400% 100%;
    animation: shimmer 1.4s ease infinite;
    border-radius: var(--r-sm);
}

@keyframes shimmer {
    from { background-position: 100% 0; }
    to   { background-position: 0 0; }
}

.htmx-indicator { opacity: 0; transition: opacity var(--t-fast) var(--ease); }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { opacity: 1; }

/* ردیف قابل اسکرول افقی (دسته‌ها و کارت‌ها در موبایل) */
.scroll-row {
    display: flex;
    gap: var(--gap-2);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 4px;
}

.scroll-row::-webkit-scrollbar { display: none; }
.scroll-row > * { flex: 0 0 auto; scroll-snap-align: start; }


/*
   --- کلاس‌های کوچکی که تمپلیت‌ها استفاده می‌کنند ---
   این‌ها قبلاً در تمپلیت بودند ولی در CSS تعریف نشده بودند، پس چند صفحه
   (علاقه‌مندی‌ها، آدرس‌ها، مقایسه) استایل ناقص داشتند.
*/
.btn--danger {
    background: var(--danger);
    color: #fff;
}

.btn--danger:hover {
    background: var(--ink);
    color: #fff;
}

.chip--ok {
    background: var(--success-soft);
    border-color: transparent;
    color: var(--success);
}

.chip--danger {
    background: var(--danger-soft);
    border-color: transparent;
    color: var(--danger);
}

/* ردیف چک‌باکس در فرم‌ها (مثلاً «این آدرس پیش‌فرض باشد») */
.filter-check {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-block: 4px 14px;
    font-size: .86rem;
    color: var(--ink-64);
    cursor: pointer;
}

.filter-check input {
    width: 16px;
    height: 16px;
    accent-color: var(--amber-deep);
}

/* هم‌معنی .product-grid — در علاقه‌مندی‌ها و مقایسه استفاده می‌شود */
.grid--products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
    gap: clamp(20px, 2.2vw, 26px);
}

/* در گوشی مثل فروشگاه دو ستون؛ یک‌ستونه، سه محصول صفحه را بی‌جهت بلند می‌کرد */
@media (max-width: 760px) {
    .grid--products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: clamp(10px, 3vw, 18px);
    }
}

/* کارت علاقه‌مندی با دکمه‌ی حذف در گوشه */
.wish-item { position: relative; }

.wish-item__remove {
    position: absolute;
    top: 10px;
    inset-inline-start: 10px;
    z-index: 2;
}

.wish-item__remove .cart-remove {
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 2px 10px rgba(35, 31, 26, .16);
    backdrop-filter: blur(4px);
}

.wish-item__remove .cart-remove:hover { background: #fff; color: var(--danger); }

.lead--sm { font-size: .88rem; line-height: 2.1; }

/* لینک متنی با خط زیر نازک */
.link-line {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding-bottom: 3px;
    border-bottom: 1px solid rgba(35, 31, 26, .3);
    font-size: .84rem;
    color: var(--ink);
    transition: color var(--t) var(--ease), border-color var(--t) var(--ease);
}

.link-line:hover { color: var(--amber-deep); border-color: var(--amber); }

.link-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .8rem;
    font-weight: 600;
    color: var(--amber-deep);
}

.link-more:hover { color: var(--ink); }

.text-brand { color: var(--amber-deep); }


/* ---------- ۱۷ انیمیشن ---------- */
/*
   عناصر با data-reveal اول پنهان‌اند و وقتی وارد کادر دید شدند
   کلاس is-in می‌گیرند. اگر جاوااسکریپت اجرا نشود کلاس js روی <html>
   نمی‌نشیند و هیچ‌چیز پنهان نمی‌ماند.
*/
.js [data-reveal] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .7s var(--ease-out), transform .8s var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
}

.js [data-reveal="fade"]  { transform: none; }
.js [data-reveal="scale"] { transform: scale(.96); }

.js [data-reveal].is-in {
    opacity: 1;
    transform: none;
}

.js [data-stagger] > * {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s var(--ease-out), transform .7s var(--ease-out);
}

.js [data-stagger].is-in > * { opacity: 1; transform: none; }

.js [data-stagger].is-in > *:nth-child(1) { transition-delay: .00s; }
.js [data-stagger].is-in > *:nth-child(2) { transition-delay: .06s; }
.js [data-stagger].is-in > *:nth-child(3) { transition-delay: .12s; }
.js [data-stagger].is-in > *:nth-child(4) { transition-delay: .18s; }
.js [data-stagger].is-in > *:nth-child(5) { transition-delay: .24s; }
.js [data-stagger].is-in > *:nth-child(6) { transition-delay: .30s; }
.js [data-stagger].is-in > *:nth-child(n+7) { transition-delay: .34s; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

.no-motion [data-reveal],
.no-motion [data-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

/* با خاموش‌بودن انیمیشن‌ها، خط‌های صحنه باید کامل کشیده باشند نه نامرئی */
.no-motion .hero__scene-glow,
.no-motion .hero__scene-art > * { animation: none !important; }
.no-motion .hero__scene-art > * { stroke-dashoffset: 0; }


/* ---------- ۱۸ ابزارها ---------- */
.flex            { display: flex; }
.items-center    { align-items: center; }
.items-start     { align-items: flex-start; }
.items-end       { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.flex-wrap       { flex-wrap: wrap; }
.flex-col        { flex-direction: column; }
.flex-1          { flex: 1; }

.gap-1 { gap: var(--gap-1); }
.gap-2 { gap: var(--gap-2); }
.gap-3 { gap: var(--gap-3); }
.gap-4 { gap: var(--gap-4); }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--gap-1); }
.mb-2 { margin-bottom: var(--gap-2); }
.mb-3 { margin-bottom: var(--gap-3); }
.mb-4 { margin-bottom: var(--gap-4); }
.mt-1 { margin-top: var(--gap-1); }
/* توضیح زیر وضعیت سفارش در «سفارش‌های من» (مثلاً «کارشناس فروش … تماس می‌گیرد») */
.order-status-note { display: block; margin-top: 6px; max-width: 30ch; color: var(--muted); font-size: .76rem; line-height: 1.6; }
.mt-2 { margin-top: var(--gap-2); }
.mt-3 { margin-top: var(--gap-3); }
.mt-4 { margin-top: var(--gap-4); }

.text-center { text-align: center; }
.text-start  { text-align: start; }
.text-end    { text-align: end; }
.w-full      { width: 100%; }
.relative    { position: relative; }
.ltr         { direction: ltr; text-align: left; }

.divider { height: 1px; background: var(--line); margin-block: var(--gap-3); }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* ---------- ریسپانسیو ---------- */
/*
   قاعده‌ی کلی: بالای ۹۸۰ پیکسل شبکه‌ها دقیقاً همان تعداد ستونی‌اند که در
   طرح دسکتاپ هست؛ زیر ۹۸۰ پیکسل با `auto-fill` + `clamp` پیوسته تطبیق
   می‌دهند تا روی هر عرض گوشی‌ای (۳۲۰ تا ۹۸۰) خودش را جا کند و لازم نباشد
   برای هر دستگاه بریک‌پوینت دستی بنویسیم.
*/

/*
   لپ‌تاپ کوچک.
   عمداً بازه‌ای است (۹۸۱ تا ۱۱۸۰) نه «تا ۱۱۸۰»؛ وگرنه چون این بلوک بعد از
   قواعد موبایلِ بخش هیرو در فایل می‌آید، روی موبایل هم اثر می‌گذاشت و
   قاب سه‌ستونه را برمی‌گرداند.
*/
@media (min-width: 981px) and (max-width: 1180px) {
    .hero__frame { grid-template-columns: minmax(0, 210px) minmax(0, 1fr) 54px; column-gap: 34px; }
    .hero__stage { min-height: clamp(440px, 44vw, 520px); }
    .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    /* در لپ‌تاپ آیتم کمتری جا می‌شود؛ اعشاری تا لبه‌ی بعدی پیدا بماند */
    .rail            { --rail-cols: 3.3; }
    .rail--cats      { --rail-cols: 4.4; }
    .rail--posts     { --rail-cols: 2.3; }
    .rail--benefits  { --rail-cols: 4.3; }
}

/* تبلت و موبایل */
@media (max-width: 980px) {
    :root {
        --header-h: 62px;
        --pad-x: clamp(12px, 4vw, 24px);
    }

    body {
        font-size: clamp(14px, 3.9vw, 15px);
        /* ارتفاع داک شناور + فاصله‌ی امن دستگاه */
        padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    }

    .topbar,
    .site-header { display: none; }

    .mobile-header { display: flex; }
    .dock { display: flex; }

    /* --- شبکه‌های سیال --- */
    .product-grid {
        grid-template-columns: repeat(auto-fill, minmax(clamp(148px, 43vw, 230px), 1fr));
        gap: clamp(16px, 4.5vw, 26px) clamp(10px, 3.2vw, 20px);
    }

    .rail            { --rail-cols: 2.2; --rail-gap: clamp(10px, 3vw, 16px); }
    .rail--cats      { --rail-cols: 3.2; }
    .rail--posts     { --rail-cols: 1.15; }
    .rail--benefits  { --rail-cols: 2.4; }

    .grid--3,
    .grid--4,
    .grid--auto {
        grid-template-columns: repeat(auto-fill, minmax(clamp(220px, 74vw, 320px), 1fr));
    }

    .benefit strong { white-space: normal; }

    .keytabs { gap: clamp(8px, 2.6vw, 14px); }

    .keytab {
        min-width: 0;
        flex: 1 1 auto;
        padding: 0 clamp(10px, 3.4vw, 18px);
        font-size: clamp(.74rem, 3.2vw, .88rem);
    }

    .promo-cards,
    .cart-layout,
    .checkout-layout,
    .account-layout,
    .doc-layout,
    /* minmax(0,1fr) نه 1fr: وگرنه جدول‌های عریض (min-width) ستون را پهن می‌کنند و صفحه اسکرول افقی می‌گیرد */
    .grid--2 { grid-template-columns: minmax(0, 1fr); }

    .promo-card { min-height: clamp(240px, 62vw, 320px); }

    /*
       بنر قسطی در موبایل هم دوستونه می‌ماند (متن راست، عکس چپ) تا ارتفاع
       بی‌جهت بلند نشود؛ فقط سهم عکس کوچک‌تر می‌شود.
    */
    .installment {
        grid-template-columns: minmax(0, 1fr) clamp(96px, 33%, 210px);
        gap: clamp(10px, 3vw, 22px);
        padding: clamp(16px, 4.6vw, 30px);
        border-radius: clamp(16px, 4.6vw, 22px);
    }

    .installment h3 { font-size: clamp(1.1rem, 5.6vw, 1.8rem); margin-top: clamp(10px, 3vw, 18px); }
    .installment p { font-size: clamp(.72rem, 3.2vw, .88rem); margin-top: clamp(8px, 2.6vw, 16px); }
    .installment .btn-row {
        margin-top: clamp(14px, 4vw, 26px);
        column-gap: clamp(8px, 2.4vw, 12px);
        row-gap: clamp(18px, 5vw, 24px);
    }
    .installment .btn-key { padding: 12px clamp(14px, 4.4vw, 24px); font-size: clamp(.75rem, 3.2vw, .9rem); }
    .installment__pill { margin-bottom: 0; padding: 6px 13px; font-size: clamp(.7rem, 2.9vw, .78rem); }
    .installment__aside { min-height: 0; }

    /*
       ستون عکس در موبایل باریک است و این نشان داخلش به پنج خط می‌شکند؛
       پیام‌اش هم در متن بالای بنر هست، پس در عرض‌های کم پنهان می‌شود.
    */
    .installment__check { display: none; }
}

@media (min-width: 761px) and (max-width: 980px) {
    .installment__check { display: inline-flex; }
}

/*
   بقیه‌ی قواعد موبایل و تبلت. قبلاً داخل بازه‌ی ۷۶۱ تا ۹۸۰ بودند و
   روی گوشی (زیر ۷۶۰) اصلاً اعمال نمی‌شدند؛ نتیجه‌اش فروشگاهی بود که
   ستون فیلترش کنار محصولات می‌ماند و صفحه از عرض بیرون می‌زد.
*/
@media (max-width: 980px) {
    .doc-toc { position: static; }

    /*
       ستون کناری پنل کاربری در دسکتاپ چسبان است؛ در موبایل بالای محتوا می‌آید و
       باید با صفحه اسکرول شود. قبلاً فقط .account-nav آزاد می‌شد و خودِ
       .account-side چسبان می‌ماند: منو بالای صفحه ثابت می‌ماند و محتوا زیرش می‌رفت.
    */
    .account-side,
    .account-nav,
    .summary { position: static; max-height: none; }

    .spec-grid { grid-template-columns: 1fr; }

    .buy-box { position: sticky; bottom: 0; background: var(--paper); z-index: 20; }

    /*
       دکمه‌ی شناور «بالا» در موبایل حذف می‌شود: هم داک پایین صفحه جایش را
       گرفته، هم فوتر خودش دکمه‌ی گرد بازگشت به بالا دارد (مثل طرح).
    */
    .to-top { display: none; }
}

/* اجزایی که فقط در موبایل کوچک بازچینش می‌شوند */
@media (max-width: 620px) {
    .product-card__title { font-size: .87rem; }
    .price-now { font-size: .92rem; }
    .product-card__tools { opacity: 1; transform: none; }

    .cat-circle strong { font-size: clamp(.74rem, 3.2vw, .86rem); }
    .cat-circle small { font-size: clamp(.72rem, 2.8vw, .78rem); }


    .cart-item {
        --cart-thumb: clamp(72px, 22vw, 104px);
        grid-template-columns: var(--cart-thumb) minmax(0, 1fr) 34px;
        column-gap: 14px;
        row-gap: 16px;
        align-items: start;
    }


    .cart-item__foot,
    .cart-item__actions {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-content: space-between;
    }

    .cart-item__remove { grid-column: 3; grid-row: 1; }

    .coupon { flex: 1 1 100%; }
    .cart-actions .btn-key { margin-inline-start: auto; }

    .form-grid--2,
    .form-grid--3 { grid-template-columns: 1fr; }

    .tabs { justify-content: flex-start; }
    .tabs button { padding: 12px 14px; font-size: .85rem; }
}

/* دستگاه لمسی: hover معنا ندارد */
@media (hover: none) {
    .product-card__tools { opacity: 1; transform: none; }
}

/* چاپ */
@media print {
    .topbar, .site-header, .mobile-header, .dock,
    .site-footer, .to-top, .hero__rail { display: none !important; }

    body { background: #fff; color: #000; padding: 0; }
}

/* کادر جست‌وجوپذیر استان و شهر (static/js/place.js)؛ <select> اصلی پنهان در فرم می‌ماند و همان ارسال می‌شود */
.place-search { position: relative; }
.place-search > input { width: 100%; }
.place-search__native { position: absolute !important; inset: auto 0 0 auto; width: 1px !important; height: 1px !important; opacity: 0; pointer-events: none; }
.place-search__list {
    position: absolute; z-index: 40; inset-inline: 0; top: calc(100% + 4px);
    max-height: min(280px, 50vh); overflow-y: auto; overscroll-behavior: contain;
    background: #fff; border: 1px solid rgba(0, 0, 0, .12); border-radius: 12px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .12); padding: 4px;
}
.place-search__opt {
    display: block; width: 100%; text-align: start; padding: 10px 12px; border: 0; border-radius: 8px;
    background: none; font: inherit; color: inherit; cursor: pointer;
}
.place-search__opt:hover, .place-search__opt.is-active { background: rgba(0, 0, 0, .06); }
.place-search__empty { padding: 10px 12px; opacity: .6; }


/* کادر با فهرست بلند (پرداخت‌ها و مراحل سفارش در پنل مشتری): ارتفاع سقف دارد و داخل خودش اسکرول می‌خورد؛
   با چرخ ماوس، لمس گوشی و تبلت و کلیدهای جهت (tabindex). سایه‌ی بالا/پایین فقط وقتی ادامه دارد دیده می‌شود. */
.scroll-box {
    max-height: clamp(260px, 50vh, 460px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--line) transparent;
    padding-inline-end: 6px;
    background:
        linear-gradient(var(--card, #fff) 30%, transparent) top / 100% 24px no-repeat local,
        linear-gradient(transparent, var(--card, #fff) 70%) bottom / 100% 24px no-repeat local,
        radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, .12), transparent) top / 100% 10px no-repeat scroll,
        radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, .12), transparent) bottom / 100% 10px no-repeat scroll;
}
.scroll-box:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; border-radius: 8px; }
.scroll-box::-webkit-scrollbar { width: 6px; }
.scroll-box::-webkit-scrollbar-thumb { background: var(--line); border-radius: 6px; }
.spec-table--pay th { width: 34%; white-space: nowrap; }
.spec-table--pay td { overflow-wrap: anywhere; }