/* ============================================================
   RC SPORT — design system (rc.css)
   جایگزین baran.css | سایت فقط RTL است، بنابراین در چند جا از
   left/right فیزیکی استفاده شده (کشوها) که رفتارشان قطعی باشد.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
  /* طیف نارنجی — نه یک نارنجی، یک خانواده */
  --o-50:  #fff8f1;
  --o-100: #ffeedd;
  --o-200: #fed7aa;
  --o-300: #fdba74;
  --o-400: #fb923c;
  --o-500: #f97316;
  --o-600: #ea580c;
  --o-700: #c2410c;
  --o-800: #9a3412;
  --o-900: #7c2d12;
  --amber: #ffb020;
  --gold:  #e8b23c;
  --ember: #d64000;

  /* گرادیان‌های برند */
  --grad-brand: linear-gradient(135deg, var(--o-400) 0%, var(--o-500) 45%, var(--o-600) 100%);
  --grad-ember: linear-gradient(180deg, #ffbc3b 0%, #f5871f 55%, #d64000 100%);
  --grad-sun:   linear-gradient(135deg, var(--amber) 0%, var(--o-500) 60%, var(--o-700) 100%);
  --grad-dark:  linear-gradient(140deg, #262c36 0%, #171c24 55%, #0f1319 100%);
  --grad-cream: linear-gradient(180deg, var(--paper) 0%, var(--o-50) 100%);

  /* مرکب و خاکستری گرم */
  --ink:      #1b212b;
  --ink-800:  #262d39;
  --ink-700:  #3a4453;
  --ink-500:  #5d6675;
  --ink-400:  #7c8593;
  --ink-300:  #a3abb7;

  /* سطح‌ها */
  --paper:     #ffffff;
  --cream:     #fff8f1;
  --sand:      #fdf0e3;
  --line:      #eee3d8;
  --line-soft: #f5ece2;
  --line-cool: #e7e9ee;

  /* وضعیت */
  --green: #2f9e5f;
  --red:   #e23b32;
  --blue:  #2f7fd1;
  --blue-soft: #eaf5ff;

  /* شکل */
  --r-xs: 8px;
  --r-sm: 10px;
  --r:    14px;
  --r-lg: 20px;
  --r-xl: 26px;
  --r-pill: 999px;

  /* سایه — عمق داریم، فلتِ بی‌روح نه */
  --sh-xs: 0 1px 2px rgba(24, 18, 12, .06);
  --sh-sm: 0 4px 12px rgba(24, 18, 12, .07);
  --sh:    0 10px 26px rgba(24, 18, 12, .07);
  --sh-lg: 0 18px 42px rgba(24, 18, 12, .11);
  --sh-o:  0 10px 24px rgba(234, 88, 12, .28);
  --sh-o-sm: 0 4px 12px rgba(234, 88, 12, .22);

  /* تایپوگرافی — پایه ۱۶px، هیچ‌جا زیر ۱۲px */
  --font: "Vazirmatn", Tahoma, system-ui, sans-serif;
  --fs-xs:  12.5px;
  --fs-sm:  14px;
  --fs-md:  16px;
  --fs-lg:  18px;
  --fs-xl:  21px;
  --fs-2xl: 26px;
  --fs-3xl: 32px;

  /* فاصله — نسخه‌ی «فضای بازتر» */
  --gap: 18px;
  --pad-sec: 76px;
  --card-pad: 20px;

  /* چیدمان */
  --shell: 1220px;
  --header-h: 62px;
  --dock-h: 68px;
  --z-header: 60;
  --z-dock: 70;
  --z-scrim: 80;
  --z-drawer: 90;
  --z-modal: 100;
  --z-toast: 110;

  /* حرکت — سریع و قاطع؛ هیچ انیمیشنی کندتر از ۲۶۰ms نیست */
  --ease: cubic-bezier(.2, .8, .3, 1);
  --t-fast: .12s;
  --t: .17s;
  --t-slow: .26s;

  /* بوم صفحه — در دارک‌مود عوض می‌شود */
  --canvas: #fdfcfb;
  --page-wash: linear-gradient(180deg,
    #ffeed8 0%, #fff7ec 11%, #ffffff 24%, #fdf5ec 36%, #f2f5fa 50%,
    #faf6f2 62%, #ffefdc 76%, #fdf7f1 89%, #f4eee8 100%);
  --wash-1: rgba(249, 115, 22, .22);
  --wash-2: rgba(255, 176, 32, .20);
  --wash-3: rgba(255, 176, 32, .16);
  --wash-4: rgba(249, 115, 22, .14);
  --wash-5: rgba(255, 176, 32, .18);
  /* هدر/نوار خرید/داک مات‌اند نه شیشه‌ای: بدون بلور، نیمه‌شفاف بدقواره
     می‌شود و بلور روی موبایل گران است. در دسکتاپ بلور برمی‌گردد. */
  --glass: #ffffff;                    /* هدر و نوار خرید */
  --dock-bg: #2e2a28;                  /* داک شناور پایین */
  --float: rgba(255, 255, 255, .94);   /* دکمه‌های شناور روی عکس */
  --menu-bar-bg: rgba(255, 248, 241, .8);
  --wave: #f6f0ea;                     /* هم‌رنگ انتهای گرادیان صفحه */
}

/* ---------- 1b. دارک‌مود ----------
   فقط توکن‌ها عوض می‌شوند؛ چون همه‌ی سطح‌ها و متن‌ها از همین توکن‌ها
   رنگ می‌گیرند، کل سایت با یک سوییچ برمی‌گردد. نارنجی برند در هر دو
   حالت یکی است، فقط یک پله روشن‌تر می‌شود تا روی زمینه‌ی تیره بدرخشد. */
[data-theme="dark"] {
  --o-50:  #241a13;
  --o-100: #33221a;
  --o-200: #4a2f20;
  --o-300: #f6b57a;
  --o-400: #fb9a4b;
  --o-500: #fb8a2e;
  --o-600: #fb923c;
  --o-700: #fdba74;
  --o-800: #fed7aa;
  --o-900: #ffeedd;

  --grad-cream: linear-gradient(180deg, #1a2029 0%, #151a22 100%);
  --grad-dark:  linear-gradient(140deg, #1c232e 0%, #141a22 55%, #0e131a 100%);

  --ink:      #eef1f6;
  --ink-800:  #dfe4ec;
  --ink-700:  #c6cdd8;
  --ink-500:  #9aa4b2;
  --ink-400:  #838d9b;
  --ink-300:  #6b7482;

  --paper:     #171d26;
  --cream:     #1b222c;
  --sand:      #202834;
  --line:      #2c3542;
  --line-soft: #232b36;
  --line-cool: #2c3542;

  --green: #3ddc97;
  --red:   #ff6b76;
  --blue:  #6aa9ff;
  --blue-soft: #16222f;

  --sh-xs: 0 1px 2px rgba(0, 0, 0, .4);
  --sh-sm: 0 4px 14px rgba(0, 0, 0, .42);
  --sh:    0 10px 28px rgba(0, 0, 0, .46);
  --sh-lg: 0 18px 46px rgba(0, 0, 0, .58);
  --sh-o:  0 10px 24px rgba(234, 88, 12, .34);
  --sh-o-sm: 0 4px 12px rgba(234, 88, 12, .26);

  --canvas: #0f141b;
  --page-wash: linear-gradient(180deg,
    #171e28 0%, #141a23 12%, #10161e 26%, #141b24 38%, #121a25 50%,
    #151c26 62%, #1a2029 76%, #141a23 89%, #10151c 100%);
  --wash-1: rgba(249, 115, 22, .16);
  --wash-2: rgba(255, 176, 32, .11);
  --wash-3: rgba(255, 176, 32, .09);
  --wash-4: rgba(249, 115, 22, .10);
  --wash-5: rgba(255, 176, 32, .10);
  --glass: #131922;
  --dock-bg: #1c232e;
  --float: rgba(28, 35, 45, .92);
  --menu-bar-bg: rgba(21, 27, 35, .8);
  --wave: #10151c;
  color-scheme: dark;
}

/* ---------- 2. Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 70px);
  -webkit-text-size-adjust: 100%;
}

/* پس‌زمینه‌ی پیوسته‌ی کل صفحه.
   قبلاً دو لایه‌ی جدا (body::before ثابت + body::after به اندازه‌ی کل سند) بود؛
   هر دو حذف شدند و همان طرح مستقیم روی body نشست. پس‌زمینه‌ی body به بومِ
   صفحه تکثیر می‌شود، پس هنوز کل ارتفاع سایت را می‌پوشاند و با اسکرول
   آرام‌آرام عوض می‌شود — ولی مرورگر به‌جای سه لایه فقط یکی را رنگ می‌کند.
   تعداد هاله‌ها هم از ۵ به ۳ رسید؛ هر هاله یک محاسبه‌ی گرادیان روی هر
   پیکسلِ تازه‌ظاهرشده است و روی موبایل مستقیم به اسکرول ضربه می‌زد. */
body {
  min-width: 320px;
  min-height: 100vh;
  padding-bottom: env(safe-area-inset-bottom);
  overflow-x: hidden;
  color: var(--ink);
  font: 400 var(--fs-md)/1.75 var(--font);
  /* هاله‌ها با درصد اندازه گرفته می‌شوند تا هر قدر صفحه بلند شود کشیده شوند */
  background-color: var(--canvas);
  background-image:
    radial-gradient(66% 15% at 92% 4%, var(--wash-1), transparent 72%),
    radial-gradient(70% 15% at -4% 46%, var(--wash-4), transparent 70%),
    radial-gradient(72% 16% at 96% 92%, var(--wash-5), transparent 72%),
    var(--page-wash);
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button, input, select, textarea { color: inherit; font: inherit; }
button { border: 0; background: none; cursor: pointer; }
img, svg, video { display: block; max-width: 100%; }
ul, ol { list-style: none; }
h1, h2, h3, h4 { line-height: 1.5; font-weight: 800; }
b, strong { font-weight: 800; }
small { font-size: var(--fs-xs); }
del { color: var(--ink-300); text-decoration-thickness: 1.5px; }
::selection { color: #fff; background: var(--o-600); }
:focus-visible { outline: 2.5px solid var(--o-600); outline-offset: 2px; border-radius: 4px; }

/* اسکرول‌بار */
* { scrollbar-width: thin; scrollbar-color: var(--o-300) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: var(--r-pill); background: var(--o-300); background-clip: content-box; }

body.is-locked { overflow: hidden; }

.shell { width: min(var(--shell), calc(100% - clamp(20px, 5vw, 36px))); margin-inline: auto; }
.skip-link { position: fixed; z-index: 999; top: 10px; right: 10px; padding: 12px 18px; border-radius: var(--r-sm); color: #fff; background: var(--o-600); font-weight: 800; transform: translateY(-200%); }
.skip-link:focus { transform: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- 3. Header ---------- */
.top-strip { position: relative; z-index: 2; color: #ffe9d2; background: var(--grad-dark); font-size: var(--fs-xs); }
.top-strip__inner { min-height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.top-strip b { color: #fff; }
.top-strip__note { display: inline-flex; align-items: center; gap: 7px; }
.top-strip__note svg { width: 16px; height: 16px; stroke: var(--o-400); fill: none; stroke-width: 1.9; }

/* هدر عمداً backdrop-filter ندارد: هدرِ چسبان + بلورِ پس‌زمینه یعنی مرورگر
   باید در هر فریمِ اسکرول کل نوار را دوباره بلور کند و روی موبایل همین
   تک‌قلم بیشترین لگ را می‌ساخت. فقط در دسکتاپ برمی‌گردد. */
.rc-header { position: sticky; top: 0; z-index: var(--z-header); background: var(--glass); box-shadow: 0 1px 0 var(--line), var(--sh-xs); transition: box-shadow 0.17s; }
.rc-header.is-stuck { box-shadow: 0 1px 0 var(--line), 0 8px 24px rgba(24, 18, 12, .1); }

/* گرید سه‌ستونه: راست = برگر، وسط = برند، چپ = اکانت + سبد */
.rc-header__bar { min-height: var(--header-h); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; }
.rc-header__side { display: flex; align-items: center; gap: 6px; }

.hdr-btn { position: relative; width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r-sm); color: var(--ink-700); transition: background 0.12s, color 0.12s, transform 0.12s; }
.hdr-btn:hover { color: var(--o-700); background: var(--o-50); }
.hdr-btn:active { transform: scale(.94); }
.hdr-btn svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hdr-btn__label { display: none; }

/* برگر: سه خط جمع‌وجور با فاصله‌ی ۵px.
   grid-auto-flow را صریح row می‌گذاریم چون .hdr-btn در دسکتاپ column می‌شود
   و باعث می‌شد خط‌ها کنار هم و پخش بیفتند. */
.hdr-btn.burger { display: grid; grid-auto-flow: row; place-content: center; gap: 5px; width: 44px; min-width: 44px; padding-inline: 0; }
.burger span { display: block; width: 20px; height: 2px; border-radius: 2px; background: currentColor; transition: transform var(--t) var(--ease), opacity var(--t-fast); }
.burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(-45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(45deg); }

/* ---------- 3b. Brand lockup — لوگوی رسمی RC SPORT ---------- */
/* لوگو شفاف است و روی سفید، کرم و سطح تیره یکسان می‌نشیند؛ هیچ نسخه‌ی دومی لازم نیست. */
.rc-brand { display: inline-flex; align-items: center; gap: 10px; justify-self: center; }
.rc-brand__logo { display: block; flex: none; }
.rc-brand__logo img { width: auto; height: 40px; object-fit: contain; }
.rc-brand > small { color: var(--ink-400); font-size: 11.5px; font-weight: 700; line-height: 1.5; }

.on-dark .rc-brand > small, .drawer__head .rc-brand > small, .footer .rc-brand > small { color: #ffd0a5; }

/* نسخه‌ی بزرگ برای هیرو و صفحه‌های داخلی */
.rc-brand--lg { gap: 14px; }
.rc-brand--lg .rc-brand__logo img { height: clamp(46px, 8vw, 72px); }
.rc-brand--lg > small { font-size: var(--fs-sm); }

.badge-dot { position: absolute; top: 4px; left: 4px; min-width: 19px; height: 19px; display: grid; place-items: center; padding: 0 5px; border: 2px solid #fff; border-radius: var(--r-pill); color: #fff; background: var(--grad-ember); box-shadow: var(--sh-o-sm); font-size: 11px; font-weight: 800; line-height: 1; }
.auth-dot { position: absolute; right: 6px; bottom: 6px; width: 10px; height: 10px; border: 2px solid #fff; border-radius: 50%; background: var(--green); }

/* نوار جستجو — مثل باران کاور، چسبیده زیر هدر */
.rc-search { padding: 0 0 10px; }
.rc-search__form { display: flex; align-items: center; overflow: hidden; border: 1.5px solid var(--line); border-radius: var(--r-sm); background: var(--paper); box-shadow: var(--sh-xs); transition: border-color 0.14s, box-shadow 0.14s; }
.rc-search__form:focus-within { border-color: var(--o-400); box-shadow: var(--sh-o-sm); }
.rc-search__form input { min-width: 0; flex: 1; height: 46px; padding-inline: 14px; border: 0; outline: 0; background: transparent; font-size: var(--fs-sm); }
.rc-search__form input::placeholder { color: var(--ink-300); }
.rc-search__form button { width: 58px; height: 46px; display: grid; place-items: center; color: #fff; background: var(--grad-brand); }
.rc-search__form button svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.rc-search__form button:hover { filter: brightness(1.06); }

/* نتایج پیشنهادی جستجو */
.search-pop { position: absolute; z-index: 5; inset-inline: 0; top: calc(100% + 6px); max-height: 62vh; overflow: auto; padding: 6px; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); box-shadow: var(--sh-lg); }
.rc-search__box { position: relative; }
.search-pop a { display: flex; align-items: center; gap: 11px; padding: 8px; border-radius: var(--r-xs); }
.search-pop a:hover { background: var(--o-50); }
.search-pop img { width: 46px; height: 46px; flex: none; border-radius: var(--r-xs); background: var(--o-50); object-fit: contain; }
.search-pop span { flex: 1; font-size: var(--fs-sm); font-weight: 700; }
.search-pop b { color: var(--o-700); font-size: var(--fs-xs); white-space: nowrap; }
.search-pop__empty { padding: 16px; color: var(--ink-400); font-size: var(--fs-sm); text-align: center; }

/* نوار لینک‌های دسکتاپ */
.menu-bar { display: none; border-top: 1px solid var(--line-soft); background: var(--menu-bar-bg); }
.menu-bar__inner { min-height: 48px; display: flex; align-items: center; gap: 4px; }
.menu-bar a { padding: 9px 14px; border-radius: var(--r-xs); color: var(--ink-700); font-size: var(--fs-sm); font-weight: 700; transition: color 0.12s, background 0.12s; }
.menu-bar a:hover, .menu-bar a.is-active { color: var(--o-700); background: var(--o-100); }
.menu-bar__spacer { margin-inline-start: auto; }
.menu-bar__phone { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-500); font-size: var(--fs-sm); }
.menu-bar__phone b { color: var(--ink); }

/* ---------- 4. Drawer (منوی کشویی از بغل) ---------- */
.scrim { position: fixed; inset: 0; z-index: var(--z-scrim); background: rgba(12, 10, 8, .58); opacity: 0; transition: opacity 0.19s; }
.scrim.is-open { opacity: 1; }

.drawer { position: fixed; z-index: var(--z-drawer); top: 0; bottom: 0; right: 0; width: min(340px, 88vw); display: flex; flex-direction: column; background: var(--paper); box-shadow: var(--sh-lg); transform: translateX(102%); transition: transform 0.23s var(--ease); visibility: hidden; }
.drawer.is-open { transform: none; visibility: visible; }
.drawer--cart { right: auto; left: 0; width: min(390px, 92vw); transform: translateX(-102%); }

.drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; color: #fff; background: var(--grad-dark); }
.drawer__head h2 { font-size: var(--fs-lg); }
.icon-close { width: 38px; height: 38px; display: grid; place-items: center; border-radius: var(--r-xs); color: inherit; background: rgba(255, 255, 255, .12); font-size: 20px; line-height: 1; transition: background 0.12s; }
.icon-close:hover { background: rgba(255, 255, 255, .24); }
.drawer--cart .icon-close { color: var(--ink); background: var(--o-50); }
.drawer--cart .drawer__head { color: var(--ink); background: var(--cream); border-bottom: 1px solid var(--line); }

.drawer__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 12px; }
/* سوییچ حالت روز/شب — اولین چیزِ داخل منوی سه‌خط */
.theme-switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: linear-gradient(135deg, var(--o-50), var(--paper)); }
.theme-switch__label b { display: block; font-size: var(--fs-sm); }
.theme-switch__label small { color: var(--ink-400); font-size: var(--fs-xs); font-weight: 700; }
.theme-switch__track { position: relative; width: 74px; height: 36px; flex: none; border-radius: var(--r-pill); background: var(--grad-sun); box-shadow: inset 0 1px 3px rgba(24, 18, 12, .28); transition: background var(--t-slow); }
.theme-switch.is-dark .theme-switch__track { background: linear-gradient(135deg, #2b3543, #131922); }
.theme-switch__knob { position: absolute; top: 3px; right: 3px; width: 30px; height: 30px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .3); transition: transform var(--t-slow) var(--ease); }
.theme-switch.is-dark .theme-switch__knob { transform: translateX(-38px); background: #f2f5fa; }
.theme-switch__ico { position: absolute; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); transition: opacity var(--t); }
.theme-switch__ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.theme-switch__ico--sun { right: 9px; color: #fff; }
.theme-switch__ico--moon { left: 9px; color: #cfd6e2; }
/* آیکنِ سمتِ فعال زیر دستگیره پنهان می‌شود تا شلوغ نباشد */
.theme-switch:not(.is-dark) .theme-switch__ico--sun { opacity: 0; }
.theme-switch.is-dark .theme-switch__ico--moon { opacity: 0; }

.drawer__nav { display: grid; gap: 3px; }
.drawer__nav a { display: flex; align-items: center; gap: 12px; padding: 13px 12px; border-radius: var(--r-sm); color: var(--ink-700); font-size: var(--fs-md); font-weight: 700; transition: background 0.12s, color 0.12s, padding-inline-start 0.12s; }
.drawer__nav a svg { width: 21px; height: 21px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.drawer__nav a:hover, .drawer__nav a.is-active { color: var(--o-700); background: var(--o-50); padding-inline-start: 16px; }
.drawer__nav a.is-active { box-shadow: inset 3px 0 0 var(--o-500); }
.drawer__nav a .chev { margin-inline-start: auto; color: var(--ink-300); }
.drawer__sep { margin: 12px 4px; color: var(--ink-300); font-size: var(--fs-xs); font-weight: 800; letter-spacing: .4px; }
.drawer__cats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.drawer__cats a { display: grid; gap: 6px; justify-items: center; padding: 14px 8px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--cream); color: var(--ink-700); font-size: var(--fs-xs); font-weight: 700; text-align: center; }
.drawer__cats a:hover { border-color: var(--o-300); background: var(--o-100); }
.drawer__cats svg { width: 26px; height: 26px; fill: none; stroke: var(--o-600); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.drawer__foot { padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--cream); }
.drawer__social { display: flex; gap: 8px; margin-top: 10px; }
/* رنگ برند هر شبکه؛ قبلاً var(--ink-800) بود که در دارک‌مود روشن می‌شد
   و متن سفید رویش خوانده نمی‌شد. */
.drawer__social a { flex: 1; display: grid; place-items: center; padding: 10px; border-radius: var(--r-xs); color: #fff; background: var(--ink-800); font-size: var(--fs-xs); font-weight: 700; transition: filter 0.12s; }
.drawer__social .is-wa { background: linear-gradient(135deg, #37c05a, #1f9d4d); }
.drawer__social .is-ig { background: linear-gradient(135deg, #f9ce34, #ee2a7b 52%, #6228d7); }
.drawer__social .is-tg { background: linear-gradient(135deg, #37bdf2, #1d8fd1); }
.drawer__social a:hover { filter: brightness(1.08); }

/* ---------- 5. Buttons ---------- */
.btn { position: relative; min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 0 22px; border-radius: var(--r-sm); font-size: var(--fs-md); font-weight: 800; line-height: 1; text-align: center; transition: transform 0.11s var(--ease), box-shadow 0.14s, filter 0.14s, background 0.14s, color 0.14s; }
.btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.btn:active { transform: translateY(1px) scale(.995); }
.btn[disabled] { opacity: .55; pointer-events: none; }
.btn--block { width: 100%; }
.btn--sm { min-height: 42px; padding: 0 15px; font-size: var(--fs-sm); }
.btn--lg { min-height: 56px; font-size: var(--fs-lg); }

.btn--primary { color: #fff; background: var(--grad-brand); box-shadow: var(--sh-o-sm); }
.btn--primary:hover { box-shadow: var(--sh-o); filter: brightness(1.05); }
.btn--ember { color: #fff; background: var(--grad-ember); box-shadow: var(--sh-o-sm); }
.btn--ember:hover { box-shadow: var(--sh-o); }
.btn--dark { color: #fff; background: var(--grad-dark); box-shadow: var(--sh-sm); }
.btn--dark:hover { filter: brightness(1.15); }
.btn--outline { color: var(--o-700); background: var(--paper); box-shadow: inset 0 0 0 1.6px var(--o-300); }
.btn--outline:hover { color: #fff; background: var(--o-600); box-shadow: inset 0 0 0 1.6px var(--o-600); }
.btn--soft { color: var(--o-800); background: var(--o-100); }
.btn--soft:hover { background: var(--o-200); }
.btn--wa { color: #fff; background: linear-gradient(135deg, #37c05a, #1f9d4d); box-shadow: 0 4px 12px rgba(31, 157, 77, .25); }
.btn--wa:hover { filter: brightness(1.06); }
.btn--ig { color: #fff; background: linear-gradient(135deg, #f9ce34, #ee2a7b 52%, #6228d7); box-shadow: 0 4px 12px rgba(221, 42, 123, .24); }
.btn--ig:hover { filter: brightness(1.06); }
.btn--tg { color: #fff; background: linear-gradient(135deg, #37bdf2, #1d8fd1); box-shadow: 0 4px 12px rgba(29, 143, 209, .24); }
.btn--tg:hover { filter: brightness(1.06); }
.btn--ghost { color: var(--ink-500); background: transparent; }
.btn--ghost:hover { color: var(--o-700); background: var(--o-50); }

/* ---------- 6. Sections & headings ---------- */
.section { padding-block: var(--pad-sec); }
.section--tight { padding-block: calc(var(--pad-sec) * .6); }
.section--cream { position: relative; background: linear-gradient(180deg, var(--o-50), var(--sand)); }

/* ---------- 6b. Bands ----------
   پس‌زمینه‌ی صفحه یکپارچه است، پس بخش‌ها هیچ بافت یا رنگ جداگانه‌ای ندارند
   و گرادیان ممتد بدنه از پشتشان دیده می‌شود. تنها استثنا باند کربنی است
   که عمداً یک وقفه‌ی تیره در وسط صفحه می‌سازد. */
.band { position: relative; isolation: isolate; }
.band > * { position: relative; z-index: 1; }
.band::before, .band::after { z-index: 0; pointer-events: none; }

/* باند تیره — تضاد کامل با بقیه‌ی صفحه.
   لبه‌هایش مورب است تا مرز بخش‌ها همیشه یک خط افقی صاف نباشد. */
.band--carbon { color: #eef1f5; background: transparent; padding-top: 26px; }
.band--carbon::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(60% 80% at 88% 0%, rgba(249, 115, 22, .28), transparent 62%),
    repeating-linear-gradient(-38deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 20px),
    var(--grad-dark);
  clip-path: polygon(0 26px, 100% 0, 100% 100%, 0 100%);
}
/* لایه‌ی اخگری ۳ پیکسل بالاتر کلیپ می‌شود و به‌شکل یک خط باریک روی لبه‌ی مورب دیده می‌شود */
.band--carbon::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -3px 0 0;
  background: var(--grad-ember);
  clip-path: polygon(0 26px, 100% 0, 100% 100%, 0 100%);
}
.band--carbon .sec-head h2 { color: #fff; }
.band--carbon .sec-head p { color: #a9b3c1; }
.band--carbon .sec-head__title::after { background: linear-gradient(to left, var(--o-500) 0 38%, rgba(255, 255, 255, .16) 38% 100%); }
.band--carbon .sec-head__more { color: #ffd9b3; background: rgba(249, 115, 22, .18); }
.band--carbon .sec-head__more:hover { color: #fff; background: rgba(249, 115, 22, .32); }

.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 28px; }
.sec-head__title { position: relative; padding-bottom: 12px; }
.sec-head h2 { font-size: var(--fs-2xl); font-weight: 900; }
.sec-head p { margin-top: 4px; color: var(--ink-400); font-size: var(--fs-sm); }
/* خط زیر عنوان: خاکستری با تکه‌ی نارنجی — دقیقاً الگوی مرجع */
.sec-head__title::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 3px; border-radius: 3px; background: linear-gradient(to left, var(--o-500) 0 38%, var(--line) 38% 100%); }
.sec-head__more { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 9px 14px; border-radius: var(--r-pill); color: var(--o-700); background: var(--o-100); font-size: var(--fs-sm); font-weight: 800; transition: background 0.12s, transform 0.12s; }
.sec-head__more:hover { background: var(--o-200); transform: translateX(-3px); }

/* جداکننده‌ی موجی — فقط بالای فوتر */
/* موج با ماسک رنگ می‌گیرد نه با تصویر سفید ثابت، وگرنه در دارک‌مود
   یک هلال سفید وسط صفحه می‌افتاد. */
.wave-top { display: block; width: 100%; height: 48px; margin-bottom: -1px; background-color: var(--wave); -webkit-mask: url("../assets/wave-top.svg") center/100% 100% no-repeat; mask: url("../assets/wave-top.svg") center/100% 100% no-repeat; }

/* ---------- 7. بنرهای فروشگاه ----------
   اسلایدشوی خودکار (هر ۵ ثانیه). متن داخل خود تصویر است، پس هیچ لایه‌ی
   متنی رویشان نمی‌نشیند. نسبت تصویر قفل است تا موقع لود، صفحه نپرد. */
.banners { margin-block: 22px 4px; }
.banners__frame { position: relative; overflow: hidden; border-radius: var(--r-lg); background: #12161d; box-shadow: var(--sh); }
.banners__track { display: flex; transition: transform 0.4s var(--ease); }
.banner { min-width: 100%; display: block; }
.banner img { width: 100%; height: auto; aspect-ratio: 1280 / 423; object-fit: cover; background: #12161d; }

.banners__arrow { position: absolute; z-index: 3; top: 50%; width: 42px; height: 42px; display: none; place-items: center; border-radius: 50%; color: var(--ink); background: var(--float); box-shadow: var(--sh-sm); transform: translateY(-50%); transition: color var(--t-fast), background var(--t-fast); }
.banners__arrow:hover { color: #fff; background: var(--o-600); }
.banners__arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.banners__arrow--prev { right: 12px; }
.banners__arrow--next { left: 12px; }
.banners__frame:hover .banners__arrow { display: grid; }

.banners__dots { display: flex; justify-content: center; gap: 7px; margin-top: 14px; }
.banners__dots button { width: 9px; height: 9px; border-radius: var(--r-pill); background: var(--o-200); transition: width 0.17s, background 0.17s; }
.banners__dots button.is-active { width: 26px; background: var(--o-600); }

/* ---------- 8. Vehicle finder ---------- */
.finder { position: relative; overflow: hidden; padding: 22px; border: 1px solid var(--line); border-radius: var(--r-lg); background: linear-gradient(150deg, var(--paper), var(--o-50) 70%, var(--o-100)); box-shadow: var(--sh-sm); }
.finder::after { content: ""; position: absolute; left: -60px; bottom: -70px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(249, 115, 22, .16), transparent 68%); }
.finder__head { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px; }
.finder__head h2 { font-size: var(--fs-xl); font-weight: 900; }
.finder__head p { margin-top: 5px; color: var(--ink-500); font-size: var(--fs-sm); }
.finder__tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--r-pill); background: var(--paper); box-shadow: var(--sh-xs); }
.finder__tabs button { min-height: 38px; padding: 0 16px; border-radius: var(--r-pill); color: var(--ink-500); font-size: var(--fs-sm); font-weight: 700; transition: color 0.12s, background 0.12s; }
.finder__tabs button.is-active { color: #fff; background: var(--grad-brand); box-shadow: var(--sh-o-sm); }
.finder__form { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 18px; }
.finder__form label { display: grid; gap: 7px; }
.finder__form label span { color: var(--ink-500); font-size: var(--fs-xs); font-weight: 700; }
.field { min-height: 48px; padding: 0 13px; border: 1.5px solid var(--line); border-radius: var(--r-sm); outline: 0; background: var(--paper); font-size: var(--fs-sm); transition: border-color 0.12s, box-shadow 0.12s; }
.field:focus { border-color: var(--o-400); box-shadow: var(--sh-o-sm); }
select.field { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-400) 50%), linear-gradient(135deg, var(--ink-400) 50%, transparent 50%); background-position: left 16px top 22px, left 11px top 22px; background-size: 5px 5px; background-repeat: no-repeat; }
.finder__chips { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 14px; color: var(--ink-400); font-size: var(--fs-xs); }
.chip { padding: 8px 13px; border: 1px solid var(--line); border-radius: var(--r-pill); color: var(--ink-700); background: var(--paper); font-size: var(--fs-xs); font-weight: 700; transition: color 0.12s, background 0.12s, border-color 0.12s; }
.chip:hover, .chip.is-active { border-color: transparent; color: #fff; background: var(--grad-brand); box-shadow: var(--sh-o-sm); }

/* ---------- 10. Category cards ---------- */
.cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); }
.cat-card { position: relative; contain: layout paint; display: grid; gap: 10px; overflow: hidden; padding: 22px 20px; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); transition: transform 0.15s var(--ease), box-shadow 0.15s, border-color 0.15s; }
.cat-card:hover { transform: translateY(-4px); border-color: var(--o-200); box-shadow: var(--sh); }
.cat-card__icon { position: relative; z-index: 2; width: 54px; height: 54px; display: grid; place-items: center; border-radius: var(--r); color: var(--o-700); background: linear-gradient(140deg, var(--o-100), var(--o-200)); }
.cat-card__icon svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cat-card h3 { position: relative; z-index: 2; font-size: var(--fs-md); }
.cat-card p { position: relative; z-index: 2; color: var(--ink-400); font-size: var(--fs-xs); line-height: 1.9; }
.cat-card__count { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 5px; color: var(--o-700); font-size: var(--fs-xs); font-weight: 800; }

/* ---------- 11. Product card ---------- */
.p-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); }
.p-card { position: relative; contain: layout paint; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); box-shadow: var(--sh-xs); transition: transform 0.15s var(--ease), box-shadow 0.15s, border-color 0.15s; }
.p-card:hover { transform: translateY(-4px); border-color: var(--o-200); box-shadow: var(--sh); }
.p-card__media { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: linear-gradient(160deg, var(--paper), var(--o-50)); }
/* عکس‌های محصول در پنل ادمین روی بوم مربع سفید نشسته‌اند، پس contain اینجا
   دقیقاً کل قاب را پر می‌کند بدون آنکه چیزی از عکس بریده شود. padding نگذار،
   وگرنه دور عکس نوار خالی می‌افتد. */
.p-card__media img { width: 100%; height: 100%; object-fit: contain; transition: transform 0.24s var(--ease); }
.p-card:hover .p-card__media img { transform: scale(1.05); }
.p-card__media .ph { width: 100%; height: 100%; display: grid; place-items: center; color: var(--o-200); }
.p-card__media .ph svg { width: 44%; height: 44%; fill: none; stroke: currentColor; stroke-width: 1.4; }
/* نوار برند زیر عکس — خواسته‌ی کاربر */
.p-card__band { position: absolute; inset-inline: 0; bottom: 0; height: 22px; background: url("../assets/rc-brand-band.svg") center/cover no-repeat; opacity: .55; pointer-events: none; }
.p-badge { position: absolute; top: 9px; right: 9px; padding: 5px 10px; border-radius: var(--r-pill); color: #fff; background: var(--grad-ember); box-shadow: var(--sh-o-sm); font-size: var(--fs-xs); font-weight: 800; }
.p-badge--best { background: var(--grad-dark); }
.p-badge--out { background: var(--ink-400); }
.fav-btn { position: absolute; z-index: 3; top: 9px; left: 9px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; color: var(--ink-400); background: var(--float); box-shadow: var(--sh-xs); transition: color 0.14s, transform 0.14s, background 0.14s; }
.fav-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linejoin: round; transition: fill 0.14s; }
.fav-btn:hover { color: var(--o-600); transform: scale(1.1); }
.fav-btn[aria-pressed="true"] { color: var(--ember); }
.fav-btn[aria-pressed="true"] svg { fill: currentColor; }
.fav-btn.is-pop { animation: favPop 0.27s var(--ease); }
@keyframes favPop { 40% { transform: scale(1.28); } 100% { transform: scale(1); } }

.p-card__body { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 16px 15px 15px; }
.p-card__cat { color: var(--o-700); font-size: var(--fs-xs); font-weight: 800; }
.p-card__title { font-size: var(--fs-sm); font-weight: 800; line-height: 1.75; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.p-card__title a:hover { color: var(--o-700); }
.p-card__meta { display: flex; flex-wrap: wrap; gap: 5px; }
.tag-mini { padding: 3px 8px; border-radius: var(--r-pill); color: var(--ink-500); background: var(--o-50); font-size: 11.5px; font-weight: 700; }
.p-card__price { margin-top: auto; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding-top: 6px; }
.p-card__price del { font-size: var(--fs-xs); }
.p-card__price b { color: var(--ink); font-size: clamp(14px, 3.6vw, var(--fs-md)); font-weight: 900; white-space: nowrap; }
.p-card__price b.is-call { color: var(--o-700); font-size: var(--fs-sm); }
.p-card__foot { display: flex; gap: 7px; }
.p-card__foot .btn { flex: 1; }
.icon-btn { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border: 1.5px solid var(--line); border-radius: var(--r-sm); color: var(--ink-500); background: var(--paper); transition: color 0.12s, background 0.12s, border-color 0.12s; }
.icon-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn:hover { border-color: var(--o-300); color: var(--o-700); background: var(--o-50); }

/* اسکرول افقی برای ردیف‌های محصول */
.p-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(172px, 46%); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; margin-inline: -14px; padding-inline: 14px; }
.p-rail > * { scroll-snap-align: start; }

/* ---------- 12. Offers / countdown ---------- */
.offers { position: relative; overflow: hidden; padding: 26px 20px; border-radius: var(--r-lg); background: linear-gradient(140deg, var(--o-600), var(--o-700) 55%, #8a2f0c); box-shadow: var(--sh); }
.offers::before { content: ""; position: absolute; inset: 0; opacity: .5; background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .07) 0 3px, transparent 3px 18px); }
.offers__head { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 18px; color: #fff; }
.offers__badge { display: grid; gap: 2px; place-items: center; flex: none; padding: 11px 15px; border-radius: var(--r); color: var(--o-800); background: linear-gradient(160deg, var(--paper), var(--o-100)); box-shadow: var(--sh-sm); text-align: center; }
.offers__badge b { font-size: var(--fs-lg); font-weight: 900; }
.offers__badge span { font-size: var(--fs-xs); font-weight: 700; }
.offers__head h2 { font-size: var(--fs-xl); font-weight: 900; }
.offers__head p { color: #ffe1c6; font-size: var(--fs-sm); }
/* direction: ltr باعث می‌شود خواص منطقی برعکس حل شوند، پس margin فیزیکی می‌گذاریم */
.countdown { display: inline-flex; align-items: center; gap: 5px; margin-right: auto; direction: ltr; }
.countdown span { min-width: 44px; display: grid; gap: 1px; place-items: center; padding: 7px 6px; border-radius: var(--r-xs); color: #fff; background: rgba(0, 0, 0, .28); font-variant-numeric: tabular-nums; }
.countdown span b { font-size: var(--fs-md); font-weight: 900; }
.countdown span small { font-size: 10.5px; opacity: .75; }
.offers .p-grid { position: relative; z-index: 2; }
.offers .p-card { border-color: transparent; }

/* شمارش معکوس کوچک روی کارت */
.p-card__timer { display: flex; align-items: center; justify-content: center; gap: 5px; padding: 6px; border-radius: var(--r-xs); color: var(--o-800); background: var(--o-100); font-size: clamp(11.5px, 3vw, var(--fs-xs)); font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- 13. Toolbar / filters (shop) ---------- */
.toolbar { display: grid; gap: 14px; padding: 18px; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); box-shadow: var(--sh-xs); }
.toolbar__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.toolbar__label { color: var(--ink-400); font-size: var(--fs-xs); font-weight: 800; }
.toolbar select.field { min-height: 44px; }
.result-count { color: var(--ink-400); font-size: var(--fs-sm); }
.result-count b { color: var(--ink); }
.filter-panel { display: grid; gap: 22px; align-content: start; padding: 20px; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); box-shadow: var(--sh-xs); }
/* آیتم‌های گرید به‌طور پیش‌فرض min-width:auto دارند و ردیف قیمت را از پنل بیرون می‌زدند */
.filter-panel > *, .filter-group { min-width: 0; }
.filter-group h3 { margin-bottom: 10px; font-size: var(--fs-sm); }
.filter-group label { display: flex; align-items: center; gap: 9px; padding: 7px 0; color: var(--ink-700); font-size: var(--fs-sm); cursor: pointer; }
.filter-group input[type="checkbox"], .filter-group input[type="radio"] { width: 19px; height: 19px; accent-color: var(--o-600); }
.range-row { display: flex; align-items: center; gap: 8px; }
.range-row .field { flex: 1; min-width: 0; text-align: center; }
.filter-panel input[type="number"]::-webkit-outer-spin-button, .filter-panel input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.filter-panel input[type="number"] { -moz-appearance: textfield; }

/* چیدمان فروشگاه: موبایل = فیلتر تاشو، دسکتاپ = ستون کناری */
.shop-layout { display: grid; gap: 22px; }
.shop-main { min-width: 0; }
.filter-panel { display: none; }
.filter-panel.is-open { display: grid; }
.chip-clear { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: var(--r-pill); color: var(--o-800); background: var(--o-100); font-size: var(--fs-xs); font-weight: 700; }
.chip-clear b { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; color: #fff; background: var(--o-600); font-size: 12px; }
.chip-clear:hover b { background: var(--ember); }

/* ---------- 14. Product page (PDP) ---------- */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-block: 14px; color: var(--ink-400); font-size: var(--fs-xs); }
.crumbs a:hover { color: var(--o-700); }
.crumbs span { color: var(--ink-300); }

.pdp { display: grid; gap: 22px; }
.pdp__card { padding: var(--card-pad); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--sh-sm); }

/* گالری */
.gallery__stage { position: relative; overflow: hidden; border-radius: var(--r); background: linear-gradient(160deg, var(--paper), var(--o-50)); touch-action: pan-y; }
.gallery__track { display: flex; transition: transform 0.27s var(--ease); }
.gallery__slide { position: relative; min-width: 100%; aspect-ratio: 1 / 1; display: grid; place-items: center; }
.gallery__slide img { width: 100%; height: 100%; object-fit: contain; cursor: zoom-in; }
.gallery__slide .ph { display: grid; place-items: center; color: var(--o-200); }
.gallery__slide .ph svg { width: 120px; height: 120px; fill: none; stroke: currentColor; stroke-width: 1.2; }
/* نوار برند دیزاین‌شده پایین عکس محصول */
.gallery__band { position: absolute; inset-inline: 0; bottom: 0; height: 46px; background: url("../assets/rc-brand-band.svg") center/cover no-repeat; pointer-events: none; }
.gallery__nav { position: absolute; z-index: 3; top: 50%; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; color: var(--ink-700); background: var(--float); box-shadow: var(--sh-sm); transform: translateY(-50%); transition: color 0.12s, background 0.12s; }
.gallery__nav:hover { color: #fff; background: var(--o-600); }
.gallery__nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.gallery__nav--prev { right: 10px; }
.gallery__nav--next { left: 10px; }
.gallery__zoom { position: absolute; z-index: 3; left: 10px; bottom: 54px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: var(--ink-700); background: var(--float); box-shadow: var(--sh); }
.gallery__zoom:hover { color: #fff; background: var(--o-600); }
.gallery__zoom svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gallery__dots { display: flex; justify-content: center; gap: 6px; margin-top: 10px; }
.gallery__dots button { width: 8px; height: 8px; border-radius: 50%; background: var(--o-200); transition: width 0.15s, background 0.15s, border-radius 0.15s; }
.gallery__dots button.is-active { width: 22px; border-radius: var(--r-pill); background: var(--o-600); }
.gallery__thumbs { display: grid; grid-auto-flow: column; grid-auto-columns: 78px; gap: 8px; overflow-x: auto; margin-top: 12px; padding-bottom: 4px; }
.gallery__thumbs button { aspect-ratio: 1 / 1; overflow: hidden; border: 2px solid var(--line); border-radius: var(--r-xs); background: var(--paper); transition: border-color 0.12s, transform 0.12s; }
.gallery__thumbs button img { width: 100%; height: 100%; object-fit: contain; }
.gallery__thumbs button.is-active { border-color: var(--o-500); transform: translateY(-2px); }

/* لایت‌باکس زوم */
.lightbox { position: fixed; inset: 0; z-index: var(--z-modal); display: none; place-items: center; padding: 16px; background: rgba(10, 8, 6, .93); }
.lightbox.is-open { display: grid; animation: fadeIn 0.14s; }
@keyframes fadeIn { from { opacity: 0; } }
.lightbox__figure { position: relative; max-width: min(960px, 100%); max-height: 100%; overflow: hidden; touch-action: none; }
.lightbox__img { max-width: 100%; max-height: 82vh; object-fit: contain; cursor: grab; transition: transform 0.15s var(--ease); }
.lightbox__img.is-zoomed { cursor: grabbing; transition: none; }
.lightbox__close { position: absolute; top: 14px; left: 14px; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: rgba(255, 255, 255, .16); font-size: 24px; line-height: 1; }
.lightbox__close:hover { background: var(--o-600); }
.lightbox__nav { position: absolute; top: 50%; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: rgba(255, 255, 255, .16); transform: translateY(-50%); }
.lightbox__nav:hover { background: var(--o-600); }
.lightbox__nav svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.lightbox__nav--prev { right: 14px; }
.lightbox__nav--next { left: 14px; }
.lightbox__hint { position: absolute; inset-inline: 0; bottom: 16px; color: #ffd9b3; font-size: var(--fs-xs); text-align: center; }

/* اطلاعات محصول */
.pdp__title { font-size: clamp(20px, 4.6vw, 27px); font-weight: 900; line-height: 1.6; }
.pdp__sub { margin-top: 6px; color: var(--ink-400); font-size: var(--fs-sm); }
.pdp__rowline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 800; }
.pill--stock { color: #17663b; background: #e4f6ec; }
.pill--out { color: #8a2f2f; background: #fdeaea; }
.pill--cat { color: var(--o-800); background: var(--o-100); }
.pill--best { color: #fff; background: var(--grad-dark); }

/* جعبه قیمت */
.price-box { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin-top: 16px; padding: 16px; border: 1.5px solid var(--line); border-radius: var(--r); background: var(--paper); box-shadow: var(--sh-xs); text-align: center; }
.price-box__old { color: var(--ink-300); font-size: var(--fs-md); }
.price-box__now { color: var(--ember); font-size: clamp(22px, 5vw, 30px); font-weight: 900; letter-spacing: .3px; }
.price-box__off { padding: 6px 12px; border-radius: var(--r-pill); color: #fff; background: var(--grad-ember); font-size: var(--fs-xs); font-weight: 800; }
.price-box--call .price-box__now { color: var(--o-700); font-size: var(--fs-xl); }

/* لینک نارنجی هایلایت‌شده (مثل «جهت مشاهده همه مدل‌ها کلیک کنید») */
.hl-link { display: block; margin-top: 16px; color: var(--o-600); font-size: var(--fs-lg); font-weight: 800; line-height: 2; text-align: center; }
.hl-link b { background: linear-gradient(transparent 62%, var(--o-200) 62%); }

/* لیست ویژگی‌ها با لوزی نارنجی */
.feature-list { display: grid; gap: 9px; margin-top: 18px; }
.feature-list li { position: relative; padding-inline-start: 26px; color: var(--ink-700); font-size: var(--fs-sm); line-height: 1.95; }
.feature-list li::before { content: ""; position: absolute; top: 11px; inset-inline-start: 4px; width: 11px; height: 11px; background: var(--grad-ember); box-shadow: 0 1px 3px rgba(214, 64, 0, .4); transform: rotate(45deg); border-radius: 2px; }

/* جعبه‌ی خط‌چین گارانتی / ارسال / پرداخت */
.info-box { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 20px; padding: 18px 14px; border: 2px dashed var(--o-400); border-radius: var(--r); background: linear-gradient(160deg, var(--o-50), #fff); }
.info-box__item { display: grid; gap: 5px; text-align: center; }
.info-box__item svg { width: 30px; height: 30px; margin-inline: auto; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.info-box__item b { font-size: var(--fs-sm); font-weight: 800; }
.info-box__item span { color: var(--ink-500); font-size: var(--fs-xs); line-height: 1.9; }

/* اطلاعیه‌ی خط‌چین آبی */
.notice { margin-top: 18px; padding: 12px 14px; border: 1.5px dashed var(--blue); border-radius: var(--r-xs); color: var(--blue); background: var(--blue-soft); font-size: var(--fs-sm); font-weight: 700; text-align: center; }

/* تعدادشمار + دکمه‌های خرید */
.buy-row { display: flex; gap: 10px; margin-top: 18px; }
.buy-row .btn { flex: 1; }
.qty { display: flex; align-items: center; flex: none; overflow: hidden; border: 1.5px solid var(--line); border-radius: var(--r-sm); background: var(--paper); }
.qty button { width: 44px; height: 50px; display: grid; place-items: center; color: var(--ink-700); font-size: 20px; font-weight: 800; transition: color 0.12s, background 0.12s; }
.qty button:hover { color: #fff; background: var(--o-500); }
.qty input { width: 48px; height: 50px; border: 0; border-inline: 1.5px solid var(--line); outline: 0; background: transparent; font-size: var(--fs-md); font-weight: 800; text-align: center; -moz-appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.buy-stack { display: grid; gap: 10px; margin-top: 10px; }
.buy-stack .row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.buy-stack .row .btn { padding-inline: 10px; font-size: var(--fs-sm); }

/* گزینه‌های رنگ/مدل */
.opt-group { margin-top: 18px; }
.opt-group > span { display: block; margin-bottom: 8px; color: var(--ink-500); font-size: var(--fs-xs); font-weight: 800; }
.opt-list { display: flex; flex-wrap: wrap; gap: 7px; }
.opt { padding: 9px 14px; border: 1.5px solid var(--line); border-radius: var(--r-sm); color: var(--ink-700); background: var(--paper); font-size: var(--fs-sm); font-weight: 700; transition: color 0.12s, background 0.12s, border-color 0.12s, box-shadow 0.12s; }
.opt:hover { border-color: var(--o-300); }
.opt.is-active { border-color: var(--o-600); color: var(--o-800); background: var(--o-50); box-shadow: var(--sh-o-sm); }

/* متادیتا (دسته / برچسب‌ها) */
.meta-list { display: grid; gap: 8px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.meta-list div { display: flex; flex-wrap: wrap; gap: 7px; color: var(--ink-500); font-size: var(--fs-sm); }
.meta-list b { color: var(--ink); }
.meta-list a { color: var(--o-700); }
.meta-list a:hover { text-decoration: underline; }

/* تب‌های توضیحات */
.pdp-tabs { margin-top: 18px; }
.pdp-tabs__nav { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 2px; border-bottom: 2px solid var(--line); }
.pdp-tabs__nav button { padding: 12px 16px; color: var(--ink-500); font-size: var(--fs-sm); font-weight: 800; white-space: nowrap; border-bottom: 3px solid transparent; margin-bottom: -2px; transition: color 0.12s, border-color 0.12s; }
.pdp-tabs__nav button.is-active { color: var(--o-700); border-color: var(--o-600); }
.pdp-tabs__panel { padding: 18px 4px; color: var(--ink-700); font-size: var(--fs-sm); line-height: 2.1; }
.pdp-tabs__panel p + p { margin-top: 12px; }
.spec-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.spec-table th, .spec-table td { padding: 11px 12px; border: 1px solid var(--line-soft); text-align: start; }
.spec-table th { width: 40%; color: var(--ink-500); background: var(--o-50); font-weight: 700; }

/* ---------- 15. Favorites ---------- */
.fav-empty { display: grid; gap: 12px; justify-items: center; padding: 46px 20px; border: 2px dashed var(--o-200); border-radius: var(--r-lg); background: var(--paper); text-align: center; }
.fav-empty svg { width: 74px; height: 74px; fill: none; stroke: var(--o-300); stroke-width: 1.4; stroke-linejoin: round; }
.fav-empty strong { font-size: var(--fs-lg); }
.fav-empty p { max-width: 40ch; color: var(--ink-400); font-size: var(--fs-sm); }
.fav-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }

/* ---------- 16. Cart drawer ---------- */
.cart-item { display: grid; grid-template-columns: 68px 1fr auto; gap: 11px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line-soft); }
.cart-item__media { width: 68px; height: 68px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--line-soft); border-radius: var(--r-xs); background: var(--o-50); }
.cart-item__media img { width: 100%; height: 100%; object-fit: contain; }
.cart-item__media svg { width: 28px; height: 28px; fill: none; stroke: var(--o-300); stroke-width: 1.5; }
.cart-item__info { display: grid; gap: 4px; min-width: 0; }
.cart-item__info b { font-size: var(--fs-sm); font-weight: 800; }
.cart-item__info small { color: var(--ink-400); font-size: var(--fs-xs); }
.cart-item__price { color: var(--o-800); font-size: var(--fs-sm); font-weight: 800; }
.cart-item__qty { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; }
.cart-item__qty button { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 7px; color: var(--ink-700); background: var(--paper); font-weight: 800; }
.cart-item__qty button:hover { color: #fff; background: var(--o-500); border-color: var(--o-500); }
.cart-item__qty span { min-width: 26px; font-size: var(--fs-sm); font-weight: 800; text-align: center; }
.cart-item__remove { width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--r-xs); color: var(--ink-300); }
.cart-item__remove:hover { color: var(--red); background: #fdeaea; }
.cart-item__remove svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
.cart-total { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; font-size: var(--fs-md); }
.cart-total strong { color: var(--o-800); font-size: var(--fs-lg); font-weight: 900; }
.cart-hint { margin-bottom: 10px; color: var(--ink-400); font-size: var(--fs-xs); }

/* ---------- 21b. Checkout (انتخاب ارسال و پرداخت داخل سبد) ---------- */
.cart-lines { display: grid; gap: 6px; margin-bottom: 10px; }
.cart-lines__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--ink-500); font-size: var(--fs-sm); }
.cart-lines__row b { color: var(--ink); font-weight: 800; white-space: nowrap; }

.checkout { display: grid; gap: 20px; }
.checkout__group h3 { margin-bottom: 10px; font-size: var(--fs-md); font-weight: 800; }
.opt-list { display: grid; gap: 9px; }
.opt { display: flex; align-items: flex-start; gap: 11px; padding: 13px 13px; border: 1.5px solid var(--line); border-radius: var(--r); background: var(--paper); cursor: pointer; transition: border-color 0.14s, background 0.14s; }
.opt:hover { border-color: var(--o-300); }
.opt.is-on { border-color: var(--o-500); background: var(--o-50); }
.opt input { width: 19px; height: 19px; flex: none; margin-top: 2px; accent-color: var(--o-600); }
.opt__text { display: grid; gap: 3px; min-width: 0; }
.opt__text b { font-size: var(--fs-sm); font-weight: 800; }
.opt__text small { color: var(--ink-400); font-size: var(--fs-xs); line-height: 1.7; }
.opt__tag { justify-self: start; padding: 2px 8px; border-radius: var(--r-pill); color: var(--o-800); background: var(--o-100); font-size: 10.5px; font-style: normal; font-weight: 800; }
.opt__price { margin-inline-start: auto; color: var(--o-800); font-size: var(--fs-sm); font-weight: 900; white-space: nowrap; }
.opt-note { margin-top: 4px; color: var(--ink-400); font-size: var(--fs-xs); line-height: 1.8; }
.opt-empty { padding: 14px; border: 1px dashed var(--line); border-radius: var(--r); color: var(--ink-400); font-size: var(--fs-sm); }

.order-done { display: grid; gap: 14px; }
.order-done__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px; border: 1px solid var(--line); border-radius: var(--r); background: var(--cream); }
.order-done__head span { font-weight: 800; }
.order-done__sum { color: var(--ink-500); font-size: var(--fs-sm); }
.pay-card { display: grid; gap: 10px; padding: 15px 14px; border: 1.5px solid var(--o-200); border-radius: var(--r); background: var(--o-50); }
.pay-card h4 { font-size: var(--fs-md); font-weight: 800; }
.pay-card p { color: var(--ink-500); font-size: var(--fs-sm); line-height: 1.9; }
.pay-card__num { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 12px; border: 1px dashed var(--o-300); border-radius: var(--r-xs); background: var(--paper); }
.pay-card__num b { font-size: var(--fs-md); font-weight: 900; letter-spacing: 1.2px; }
.pay-card__tip { color: var(--ink-400) !important; font-size: var(--fs-xs) !important; }

/* ---------- 17. Empty / loading ---------- */
.empty { display: grid; gap: 8px; justify-items: center; padding: 40px 18px; border: 1px dashed var(--line); border-radius: var(--r); background: var(--paper); text-align: center; }
.empty strong { font-size: var(--fs-md); }
.empty span { color: var(--ink-400); font-size: var(--fs-sm); }
.skeleton { position: relative; overflow: hidden; border-radius: var(--r); background: var(--o-50); }
.skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .75), transparent); animation: shimmer 0.85s infinite; }
@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.skeleton--card { aspect-ratio: 3 / 4; }

/* ---------- 18. Service bar / FAQ / contact ---------- */
.service-bar { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); }
.service-bar article { display: grid; gap: 10px; justify-items: center; padding: 24px 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); box-shadow: var(--sh-xs); text-align: center; transition: transform 0.14s var(--ease), box-shadow 0.14s; }
.service-bar article:hover { transform: translateY(-3px); box-shadow: var(--sh-sm); }
.service-bar span { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; color: var(--o-700); background: linear-gradient(150deg, var(--o-100), var(--o-200)); }
.service-bar svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* کارت‌ها سفیدند ولی داخل باند کربنی نشسته‌اند و رنگ روشنِ باند را ارث می‌بردند */
.service-bar h3 { color: var(--ink); font-size: var(--fs-sm); }
.service-bar p { color: var(--ink-400); font-size: var(--fs-xs); line-height: 1.9; }

.faq details { margin-bottom: 9px; padding: 4px 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); box-shadow: var(--sh-xs); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 0; font-size: var(--fs-sm); font-weight: 800; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 50%; color: var(--o-700); background: var(--o-50); font-size: 18px; font-weight: 800; transition: transform 0.15s; }
.faq details[open] summary::after { content: "−"; transform: rotate(180deg); }
.faq details p { padding-bottom: 14px; color: var(--ink-500); font-size: var(--fs-sm); line-height: 2.1; }

.contact-card { position: relative; overflow: hidden; display: grid; gap: 10px; padding: 24px 20px; border-radius: var(--r-lg); color: #fff; background: var(--grad-dark); box-shadow: var(--sh); }
.contact-card::after { content: ""; position: absolute; left: -50px; top: -50px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(249, 115, 22, .35), transparent 70%); }
.contact-card > * { position: relative; z-index: 2; }
.contact-card span { color: var(--o-300); font-size: var(--fs-xs); font-weight: 800; }
.contact-card h2 { font-size: var(--fs-xl); font-weight: 900; }
.contact-card p { color: #d8dde5; font-size: var(--fs-sm); }
.contact-card__tel { display: grid; gap: 3px; margin-top: 6px; padding: 14px; border-radius: var(--r); background: rgba(255, 255, 255, .1); }
.contact-card__tel b { font-size: var(--fs-xl); font-weight: 900; letter-spacing: 1px; }
.contact-card__tel small { color: #c6ccd6; }
/* واتساپ و اینستاگرام کنار هم، تلگرام تمام‌عرض زیرشان */
.contact-card__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
.contact-card__btns [data-telegram-link] { grid-column: 1 / -1; }
/* اگر ادمین فقط یکی را پر کرده باشد، همان یکی تمام‌عرض می‌شود */
.contact-card__btns > a:only-child { grid-column: 1 / -1; }

/* ---------- 19. Footer ---------- */
.footer { position: relative; margin-top: 56px; padding-bottom: calc(var(--dock-h) + 22px); color: #d5dae2; background: var(--grad-dark); }
.footer__wave { display: block; width: 100%; height: 42px; background-color: var(--wave); -webkit-mask: url("../assets/wave-top.svg") center/100% 100% no-repeat; mask: url("../assets/wave-top.svg") center/100% 100% no-repeat; transform: rotate(180deg); }
.footer__top { display: grid; gap: 26px; padding-block: 30px; }
.footer h3 { margin-bottom: 12px; color: #fff; font-size: var(--fs-md); }
.footer a { display: block; padding: 5px 0; color: #c3cad4; font-size: var(--fs-sm); transition: color 0.12s, padding-inline-start 0.12s; }
/* «دسترسی سریع» دقیقاً همان آیتم‌های منوی سه‌خط است، پس آیکن هم دارد */
.footer-quick a { display: flex; align-items: center; gap: 9px; }
.footer-quick__ico { display: grid; place-items: center; width: 18px; height: 18px; flex: none; color: var(--o-400); }
.footer-quick__ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.footer a:hover { color: var(--o-400); padding-inline-start: 5px; }
.footer p { color: #aeb6c1; font-size: var(--fs-sm); line-height: 2.1; }
.footer-about .rc-brand { justify-self: start; margin-bottom: 14px; }
.footer-contact p { display: grid; gap: 2px; margin-bottom: 12px; }
.footer-contact small { color: #8b94a1; font-size: var(--fs-xs); }
.footer-contact span { color: #d5dae2; font-size: var(--fs-sm); }
.footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding-block: 16px; border-top: 1px solid rgba(255, 255, 255, .1); color: #98a1ad; font-size: var(--fs-xs); }
.footer__bottom div { display: flex; gap: 6px; }
.footer__bottom a { padding: 6px 12px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .08); }
.footer__bottom a:hover { padding-inline-start: 12px; color: #fff; background: var(--o-600); }

/* ---------- 20. Floating dock + back to top ---------- */
.dock { position: fixed; z-index: var(--z-dock); inset-inline: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); height: var(--dock-h); display: flex; align-items: stretch; justify-content: space-around; gap: 2px; padding: 6px; border-radius: var(--r-xl); background: var(--dock-bg); box-shadow: 0 12px 34px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .08); transition: transform 0.2s var(--ease); }
.dock.is-hidden { transform: translateY(140%); }
.dock__item { position: relative; flex: 1; display: grid; gap: 3px; place-items: center; align-content: center; border-radius: var(--r-lg); color: #e6e2df; font-size: 11.5px; font-weight: 700; transition: color 0.12s, background 0.12s, transform 0.12s; }
.dock__item svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.dock__item:active { transform: scale(.93); }
.dock__item.is-active { color: #fff; background: rgba(249, 115, 22, .22); }
.dock__item.is-active svg { stroke: var(--o-400); }
.dock__badge { position: absolute; top: 4px; right: calc(50% + 6px); min-width: 18px; height: 18px; display: grid; place-items: center; padding: 0 5px; border-radius: var(--r-pill); color: #fff; background: var(--grad-ember); font-size: 10.5px; font-weight: 800; line-height: 1; }

.to-top { position: fixed; z-index: calc(var(--z-dock) + 1); left: 16px; bottom: calc(var(--dock-h) + 20px + env(safe-area-inset-bottom)); width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; color: var(--ink-700); background: var(--paper); box-shadow: var(--sh); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity 0.17s, transform 0.17s, visibility 0.17s, background 0.14s, color 0.14s; }
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
/* در صفحه‌ی محصول، نوار خرید همان‌جا می‌نشیند و قبلاً روی هم می‌افتادند */
body[data-page="product"] .to-top { bottom: calc(var(--dock-h) + 100px + env(safe-area-inset-bottom)); }
body[data-page="product"].is-dock-hidden .to-top { bottom: calc(98px + env(safe-area-inset-bottom)); }
.to-top:hover { color: #fff; background: var(--o-600); }
.to-top svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- 21. Sticky buy bar (موبایل، صفحه محصول) ---------- */
/* کارت شناور، نه یک نوار تمام‌عرض بریده: قبلاً وسط فوتر معلق می‌ماند و
   انگار جدا افتاده بود. حالا هم‌شکل داک است، درست بالای آن می‌نشیند و
   وقتی داک پنهان شود پایین می‌آید (کلاس is-dock-hidden از product.js). */
.buy-bar {
  position: fixed; z-index: calc(var(--z-dock) - 1);
  inset-inline: 12px; bottom: calc(var(--dock-h) + 14px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px 9px 14px;
  border: 1px solid var(--line); border-radius: var(--r-xl);
  background: var(--glass);
  box-shadow: 0 10px 28px rgba(24, 18, 12, .16);
  opacity: 0; visibility: hidden;
  transform: translateY(calc(100% + 26px));
  transition: transform 0.22s var(--ease), opacity 0.16s, visibility 0.22s, bottom 0.2s var(--ease);
}
.buy-bar.is-visible { opacity: 1; visibility: visible; transform: none; }
body.is-dock-hidden .buy-bar { bottom: calc(12px + env(safe-area-inset-bottom)); }
.buy-bar__price { display: grid; gap: 1px; }
.buy-bar__price b { color: var(--ember); font-size: var(--fs-md); font-weight: 900; }
.buy-bar__price small { color: var(--ink-400); }
.buy-bar .btn { flex: 1; }

/* ---------- 22. Toast ---------- */
.toast { position: fixed; z-index: var(--z-toast); inset-inline: 16px; bottom: calc(var(--dock-h) + 26px + env(safe-area-inset-bottom)); margin-inline: auto; width: fit-content; max-width: calc(100% - 32px); display: flex; align-items: center; gap: 10px; padding: 13px 18px; border-radius: var(--r-pill); color: #fff; background: var(--grad-dark); box-shadow: var(--sh-lg); font-size: var(--fs-sm); font-weight: 700; opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity 0.17s, transform 0.17s; }
.toast.is-visible { opacity: 1; transform: none; }
.toast::before { content: ""; width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--o-400); }
.toast.is-success::before { background: var(--green); }
.toast.is-error::before { background: var(--red); }

/* ---------- 22b. Account panel (کلاس‌ها با account.js مشترک است) ---------- */
.account-main { padding-bottom: 30px; }
.section__tag { display: inline-block; margin-bottom: 8px; color: var(--o-700); font-size: var(--fs-xs); font-weight: 800; letter-spacing: .4px; }
.auth-wrap { display: grid; place-items: center; padding-block: 20px; }
.auth-card { width: min(460px, 100%); padding: 24px 20px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--sh); }
.auth-card__title { font-size: var(--fs-2xl); font-weight: 900; }
.auth-card__text { margin-top: 6px; color: var(--ink-400); font-size: var(--fs-sm); }
.account-form { display: grid; gap: 13px; min-width: 0; margin-top: 18px; }
.account-form label { display: grid; gap: 7px; min-width: 0; color: var(--ink-500); font-size: var(--fs-xs); font-weight: 700; }
.account-form textarea.field { min-height: 92px; padding: 12px 13px; line-height: 1.9; resize: vertical; }
.account-form input.field { height: 48px; }
/* input عرض ذاتی حدود ۲۰ کاراکتر دارد؛ بدون min-width:0 ستون گرید را باز
   می‌کند و فرم از کارت بیرون می‌زند (باگ به‌هم‌ریختن صفحه‌ی حساب). */
.account-form .field { min-width: 0; max-width: 100%; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; min-width: 0; }
.form-row > * { min-width: 0; }
.form-msg { min-height: 20px; color: var(--red); font-size: var(--fs-xs); font-weight: 700; }
.form-msg.is-ok { color: var(--green); }
.otp-sent { color: var(--ink-500); font-size: var(--fs-sm); }
.otp-sent b { color: var(--ink); }
.otp-actions { display: flex; justify-content: space-between; gap: 10px; }
.otp-link { color: var(--o-700); font-size: var(--fs-xs); font-weight: 800; }
.otp-link:disabled { color: var(--ink-300); cursor: default; }
.otp-link:not(:disabled):hover { text-decoration: underline; }

.panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.panel-title { font-size: var(--fs-2xl); font-weight: 900; }
.panel-sub { color: var(--ink-400); font-size: var(--fs-sm); }
.panel-grid { display: grid; gap: 16px; }
/* آیتم گرید به‌طور پیش‌فرض min-width:auto دارد، یعنی هرگز کوچک‌تر از عریض‌ترین
   محتوایش نمی‌شود. نام بلند یک محصول در فهرست سفارش‌ها ستون را تا ۵۰۰ پیکسل
   باز می‌کرد و کل صفحه‌ی موبایل افقی می‌لغزید. این خط جلوی آن را می‌گیرد. */
.panel-grid > * { min-width: 0; }
.panel-card { min-width: 0; padding: 22px 20px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--sh-sm); }
.panel-card__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 12px; margin-bottom: 6px; border-bottom: 1px solid var(--line-soft); }
.panel-card__head h2 { font-size: var(--fs-lg); }
.panel-chip { padding: 6px 11px; border-radius: var(--r-pill); color: var(--o-800); background: var(--o-100); font-size: var(--fs-xs); font-weight: 700; }
.orders-list { display: grid; gap: 12px; margin-top: 12px; min-width: 0; }
.order-card { display: grid; gap: 9px; min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--cream); }
.order-card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.order-card__head b { min-width: 0; overflow-wrap: anywhere; font-size: var(--fs-sm); font-weight: 800; }
.order-status { flex: none; padding: 5px 11px; border-radius: var(--r-pill); color: #fff; background: var(--grad-brand); font-size: var(--fs-xs); font-weight: 700; }
.order-date { color: var(--ink-400); font-size: var(--fs-xs); }
.order-items { display: grid; gap: 7px; min-width: 0; padding: 10px 0; border-block: 1px dashed var(--line); }
/* نام محصول باید بشکند و قیمت باید کنارش سرجایش بماند؛ وگرنه ردیف
   کشیده می‌شود و کارت را از عرض صفحه بیرون می‌برد. */
.order-items li { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-width: 0; font-size: var(--fs-sm); }
.order-items li > span { min-width: 0; overflow-wrap: anywhere; }
.order-items b { flex: none; color: var(--o-800); font-weight: 800; white-space: nowrap; }
.order-card__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.order-card__foot small { min-width: 0; overflow-wrap: anywhere; color: var(--ink-400); font-size: var(--fs-xs); }
.order-card__foot strong { flex: none; font-size: var(--fs-sm); font-weight: 900; white-space: nowrap; }
.order-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.order-meta span { padding: 4px 9px; border: 1px solid var(--line); border-radius: var(--r-pill); color: var(--ink-500); background: var(--paper); font-size: var(--fs-xs); font-weight: 700; }

/* ---------- 23. Utilities ---------- */
.grid-2 { display: grid; gap: 16px; }
.stack { display: grid; gap: 12px; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.push-end { margin-inline-start: auto; }
.text-muted { color: var(--ink-400); }
.num { font-variant-numeric: tabular-nums; }

/* ---------- 24. Responsive ---------- */
@media (min-width: 560px) {
  .cat-grid { grid-template-columns: repeat(3, 1fr); }
  .info-box { grid-template-columns: repeat(4, 1fr); }
  .service-bar { grid-template-columns: repeat(4, 1fr); }
  .finder__form { grid-template-columns: repeat(2, 1fr); }
  .p-rail { grid-auto-columns: minmax(200px, 32%); }
}

@media (min-width: 700px) {
  .p-grid { grid-template-columns: repeat(3, 1fr); }
}

/* روی لمسی، :hover با یک ضربه می‌چسبد و کارت تا اسکرول بعدی بالا می‌ماند؛
   جابه‌جایی و زوم عکس هم هر بار یک رنگ‌آمیزی اضافه است. */
@media (hover: none) {
  .p-card:hover, .cat-card:hover, .service-bar article:hover { transform: none; }
  .p-card:hover .p-card__media img { transform: none; }
  .sec-head__more:hover { transform: none; }
}

@media (min-width: 900px) {
  :root { --header-h: 80px; --pad-sec: 88px; }
  body { padding-bottom: 0; }
  .rc-header__bar { gap: 18px; }
  .rc-brand__logo img { height: 48px; }
  .hdr-btn { width: auto; min-width: 44px; height: 46px; padding-inline: 12px; gap: 9px; grid-auto-flow: column; }
  .hdr-btn__label { display: grid; gap: 1px; text-align: start; }
  .hdr-btn__label small { color: var(--ink-400); font-size: 11.5px; }
  .hdr-btn__label b { font-size: var(--fs-xs); font-weight: 800; white-space: nowrap; }
  .rc-search { padding-bottom: 12px; }
  .rc-search__form input { height: 50px; font-size: var(--fs-md); }
  .rc-search__form button { height: 50px; }
  .menu-bar { display: block; }
  .dock, .buy-bar, .to-top { display: none; }
  .to-top.to-top--desktop { display: grid; bottom: 24px; }
  .footer { padding-bottom: 0; }
  .toast { inset-inline: auto 24px; bottom: 24px; margin-inline: 0; }
  /* شش دسته‌ی پیش‌فرض در سه ستون دو ردیف کامل می‌شوند؛ با چهار ستون
     ردیف دوم نصفه و بدقواره می‌ماند. */
  .cat-grid { grid-template-columns: repeat(3, 1fr); }
  .p-grid { grid-template-columns: repeat(4, 1fr); }
  .p-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .p-rail { grid-auto-columns: minmax(230px, 24%); margin-inline: 0; padding-inline: 0; }
  .finder__form { grid-template-columns: repeat(3, 1fr) 170px; align-items: end; }
  .pdp { grid-template-columns: 1.05fr .95fr; align-items: start; }
  .pdp__gallery { position: sticky; top: calc(var(--header-h) + 76px); }
  .info-box { padding: 22px; }
  .grid-2 { grid-template-columns: 1fr 1fr; gap: 28px; }
  .footer__top { grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 34px; padding-block: 46px; }
  .contact-card { padding: 34px 30px; }
  .buy-row .btn { flex: 0 1 auto; min-width: 220px; }
  .drawer { width: 380px; }
  .panel-grid { grid-template-columns: 1fr 1.15fr; align-items: start; }
  .panel-card { padding: 24px 22px; }
  .auth-card { padding: 34px 30px; }
  .shop-layout { grid-template-columns: 268px 1fr; gap: 22px; align-items: start; }
  .filter-panel { display: grid !important; position: sticky; top: calc(var(--header-h) + 80px); }
  #filterToggle { display: none; }
}

@media (min-width: 1100px) {
  .pdp-tabs__panel { font-size: var(--fs-md); }
  .sec-head h2 { font-size: var(--fs-3xl); }
}

/* شیشه‌ی مات فقط در دسکتاپ: آنجا هزینه‌ی بلور ناچیز است و پشت هدر
   دیده‌شدنِ محتوا قشنگ در می‌آید. */
@media (min-width: 900px) and (hover: hover) {
  .rc-header { background: rgba(255, 255, 255, .88); backdrop-filter: blur(12px); }
  [data-theme="dark"] .rc-header { background: rgba(19, 25, 34, .86); }
  .scrim { backdrop-filter: blur(2px); }
}

/* موبایل: هیچ متنی زیر ۱۲.۵px نباشد */
@media (max-width: 899px) {
  :root { --fs-xs: 13px; --fs-sm: 14.5px; --pad-sec: 52px; --gap: 14px; --card-pad: 16px; }
  .sec-head { margin-bottom: 20px; }
  .sec-head h2 { font-size: var(--fs-xl); }
  /* هدر موبایل جمع‌وجور بماند: زیرنویس برند فقط از تبلت به بالا */
  .rc-header .rc-brand > small { display: none; }
  .rc-brand__logo img { height: 32px; }
  .rc-brand { gap: 9px; }
}

/* ---------- 25. Motion / print ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

@media print {
  .rc-header, .dock, .to-top, .drawer, .scrim, .buy-bar, .toast, .footer { display: none !important; }
  body { background: none; }
}