/* ==========================================================================
   قارقارک — لایه‌ی پایه: ریست، ابزارها، دکمه‌ها، ریتم بخش‌ها
   چهار پکیج ورودی هرکدام ریست و ابزار خودشان را داشتند (.sr / .sr-only،
   .n / .num، سه بلوک prefers-reduced-motion، سه ریست body). اینجا یک‌بار.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* کشوی بسته‌ی موبایل با translate بیرون از ویوپورت می‌ایستد و به ناحیه‌ی
     اسکرول افقی اضافه می‌شود. clip (نه hidden) آن را می‌بُرد و برخلاف hidden
     هیچ بلوکِ اسکرولی نمی‌سازد، پس position:sticky هدر سالم می‌ماند. */
  overflow-x: clip;
  /* جای اسکرول‌بار همیشه رزرو می‌شود. هنگام قفل شدن اسکرول (کشو، لایت‌باکس)
     اسکرولر سند پنهان می‌شود؛ بدون این رزرو، کل صفحه به اندازه‌ی عرض
     اسکرول‌بار می‌پرد. روی اسکرول‌بارهای شناور (موبایل، مک) بی‌اثر است. */
  scrollbar-gutter: stable;
  /* WCAG 2.4.11 — هدر چسبان نباید عنصر فوکوس‌شده یا هدف پرش را بپوشاند */
  scroll-padding-block-start: calc(var(--header-total) + 1rem);
}

body {
  margin: 0;
  min-block-size: 100svh;
  font-family: var(--font-ui);
  font-size: var(--fs-md);
  font-weight: 400;
  line-height: var(--lh-body);
  letter-spacing: 0;              /* فارسی هرگز تراکینگ نمی‌گیرد */
  /* ss01 در وزیرمتن ارقام لاتین را به ۰۱۲۳ فارسی تبدیل می‌کند —
     پیش‌فرض درست برای یک سایت فارسی؛ استثناها پایین‌تر خنثی می‌شوند. */
  font-feature-settings: "ss01", "kern";
  font-variant-numeric: tabular-nums;
  color: var(--text);
  background-color: var(--bg);
  background-image: var(--bg-tint);
  /* پس‌زمینه‌ی ثابت هنگام اسکرول، به‌خصوص در Chrome موبایل، باعث repaint
     کامل هر فریم می‌شد. ظاهر ثابت حفظ شده اما لایه همراه سند حرکت می‌کند. */
  background-attachment: scroll;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* clip و نه hidden: overflow:hidden روی body، position:sticky هدر را
     در بعضی موتورها می‌شکند. */
  overflow-x: clip;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img, svg { display: block; max-width: 100%; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:where(h1, h2, h3, h4, p, figure, dl, dd, table) { margin: 0; }
input, textarea, select { font: inherit; color: inherit; }

/* فوکوس قابل مشاهده — فقط برای ناوبری با کیبورد */
:where(a, button, input, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

::selection { background: var(--accent); color: var(--text-onbrass); }

/* ---------- ابزارها ---------- */
.container {
  inline-size: min(var(--container), 100% - (var(--gutter) * 2));
  margin-inline: auto;
}
.icon { inline-size: 20px; block-size: 20px; flex: 0 0 auto; stroke-width: 1.7; }
.icon-sm { inline-size: 16px; block-size: 16px; }

.sr-only {
  position: absolute; inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* اعداد فارسی همیشه ایزوله تا در جریان RTL نشکنند */
.num { unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
/* هرجا رشته‌ی لاتین است (کد فنی، شماره، واحد): جهت و ارقام لاتین بمانند.
   بدون خنثی‌کردن ss01، «QK-BD-2140» به «QK-BD-۲۱۴۰» تبدیل می‌شد. */
.ltr, .mono, code, kbd, [dir="ltr"] {
  direction: ltr; unicode-bidi: isolate;
  font-feature-settings: "kern";
  /* کدهای فنی و نام مدل نباید وسطشان بشکنند: «N2 230N» یک واحد است */
  white-space: nowrap;
}
.mono, code, kbd { font-family: var(--font-mono); font-size: var(--fs-mono); }
/* بدون این، <text> جهت RTL سند را ارث می‌برد و text-anchor="end" لنگر را
   به سمت مخالف می‌برد: برچسب نقشه یا وارونه می‌شود یا از viewBox بیرون می‌افتد. */
svg text { direction: ltr; unicode-bidi: isolate; font-feature-settings: "kern"; }

.skip-link {
  position: absolute; inset-block-start: -100%; inset-inline-start: var(--sp-4);
  z-index: 200; padding: var(--sp-3) var(--sp-5);
  background: var(--accent); color: var(--text-onbrass);
  font-weight: 700; border-radius: 0 0 var(--r-md) var(--r-md);
  transition: inset-block-start var(--d-base) var(--e-out);
}
.skip-link:focus { inset-block-start: 0; }

/* بافت دانه‌ای — یک لایه برای کل صفحه، نه یکی به ازای هر بخش
   (هر سه پکیج ورودی نویز مخصوص خودشان را روی هم می‌گذاشتند). */
body::after { content: none; }

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

/* ==========================================================================
   دکمه‌ها — یک سیستم برای هدر، هیرو، کارت‌ها، فوتر و کشو
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2);
  min-block-size: 46px;               /* WCAG 2.5.8 */
  padding-inline: var(--sp-5);
  border-radius: var(--r-md);
  font-size: var(--fs-sm); font-weight: 700;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: transform var(--d-fast) var(--e-out),
              background var(--d-fast) var(--e-out),
              color var(--d-fast) var(--e-out),
              box-shadow var(--d-base) var(--e-out),
              border-color var(--d-fast) var(--e-out);
}
.btn:active { transform: translateY(1px) scale(.985); }
.btn .icon, .btn svg { inline-size: 18px; block-size: 18px; flex: 0 0 auto; }
.btn--lg { min-block-size: 52px; padding-inline: var(--sp-6); font-size: var(--fs-md); }
.btn--block { inline-size: 100%; }

/* ==========================================================================
   ردیف کنش‌ها — دکمه‌ها در موبایل و دسکتاپ همیشه در یک خطِ عرضی می‌مانند
   و هرگز زیر هم نمی‌روند. زیر ۴۸rem عرض را نصف‌به‌نصف تقسیم می‌کنند،
   بالاتر از آن به اندازه‌ی محتوای خودشان‌اند.
   ========================================================================== */
.actions { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--sp-3); }
.actions > .btn { flex: 1 1 0; min-inline-size: 0; }
@media (min-width: 48rem) {
  .actions > .btn { flex: 0 0 auto; }
}
/* دو پله، نه یکی. پله‌ی اول فقط پدینگ و قلم را کوچک می‌کند.
   پله‌ی دوم — و فقط آن — کلمه‌های اضافی را کنار می‌گذارد.
   باگ نسخه‌ی قبل: هر دو با هم زیر ۳۰rem (۴۸۰px) اجرا می‌شدند، پس روی هر
   گوشی متعارف (۳۶۰ تا ۴۲۰px) عبارت «قطعات زونتس 230» به «قطعات زونتس»
   کوتاه می‌شد و عددِ مدل — کلیدواژه‌ی اصلی صفحه — از دکمه‌ی اول حذف
   می‌شد، در حالی که اندازه‌گیری نشان می‌دهد برچسب کامل ۱۴۵px می‌خواهد و
   در ۳۶۰px هر دکمه ۱۶۰px عرض دارد. پله‌ی دوم به ۲۱٫۵rem (۳۴۴px) رفت. */
@media (max-width: 26rem) {
  .actions > .btn { padding-inline: var(--sp-2); font-size: var(--fs-xs); gap: var(--sp-1); }
  .actions > .btn.btn--lg { min-block-size: 48px; }
}
@media (max-width: 21.5rem) {
  .btn__x { display: none; }
}

/* CTA برنجی — متن جوهری روی برنجی، نه سفید (سفید روی برنجی ۲٫۶۹:۱ و مردود).
   انتهای تیره‌ی گرادیان عمداً از brass-500 جلوتر نمی‌رود تا کمترین
   کنتراست در طول گرادیان ۶٫۵۸:۱ بماند. */
.btn--brass {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--qq-brass-300), var(--qq-brass-400) 45%, var(--qq-brass-500));
  color: var(--qq-ink-800);
  box-shadow: var(--shadow-brass);
  border-color: rgba(122,84,18,.30);
}
.btn--brass::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.42) 48%, transparent 62%);
  translate: -120% 0;
  transition: translate var(--d-slow) var(--e-out);
}
.btn--brass:hover::before { translate: 120% 0; }
.btn--brass:hover { box-shadow: 0 8px 24px rgba(160,118,31,.36); }
.btn--brass > * { position: relative; }

.btn--ghost {
  background: var(--surface-2);
  border-color: var(--line-strong);
  color: var(--text);
}
.btn--ghost:hover { background: var(--surface-3); border-color: var(--line-accent); }

.btn--out {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--text);
}
.btn--out:hover { border-color: var(--accent); color: var(--accent-text); }

/* ==========================================================================
   ریتم بخش‌ها و سرتیترها — یک الگو برای کل بدنه
   ========================================================================== */
.section { padding-block: var(--sp-12); position: relative; }
.section--tight { padding-block: var(--sp-10); }
.section--alt { background: var(--bg-2); border-block: 1px solid var(--line); }
/* وقتی نوارِ رنگی تمام می‌شود، خودِ تغییرِ زمینه مرز را می‌سازد؛ جمعِ دو
   پدینگ کامل یک فاصله‌ی خالیِ اضافی می‌ساخت. */
.section--alt + .section { padding-block-start: var(--sp-10); }
.section + .section--alt { padding-block-start: var(--sp-10); }

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-xs); font-weight: 700; color: var(--accent-text);
  margin-block-end: var(--sp-2);
}
.eyebrow::before {
  content: ''; inline-size: 1.75rem; block-size: 2px; border-radius: 2px;
  background: linear-gradient(to left, var(--accent), transparent);
}

.sec-head { max-inline-size: 62ch; margin-block-end: var(--sp-8); }
.sec-head h2 {
  font-size: var(--fs-3xl); font-weight: 800; line-height: 1.3;
  letter-spacing: var(--tracking-brand);
  color: var(--text-strong);
  text-wrap: balance;
}
.sec-head h2 em { font-style: normal; color: var(--accent-text); }
.sec-head > p {
  margin-block-start: var(--sp-3);
  font-size: var(--fs-md); color: var(--text-muted);
  max-inline-size: 58ch;
}

/* نوار پیشرفت خواندن — جایگزین «خط‌کش» تمام‌قدِ هیرو v2 که با هدر چسبان
   تمام‌عرض و فوتر تمام‌بلید تداخل داشت. همان نقش را دارد، بدون تداخل. */
.readbar {
  position: fixed; inset-block-start: 0; inset-inline: 0;
  z-index: calc(var(--z-header) + 1);
  block-size: 2px; pointer-events: none;
  background: linear-gradient(to left, var(--accent), var(--qq-brass-600));
  transform-origin: right center;              /* RTL: از راست پر می‌شود */
  scale: var(--p, 0) 1;
  transition: scale 80ms linear;
}
[dir="ltr"] .readbar { transform-origin: left center; }

/* بازگشت به بالا — یکی برای کل صفحه (فوتر ورودی نسخه‌ی دوم داشت) */
.totop {
  position: fixed; inset-block-end: var(--sp-5); inset-inline-start: var(--sp-5);
  z-index: var(--z-totop);
  inline-size: 46px; block-size: 46px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  color: var(--text-onbrass); background: var(--accent);
  box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; translate: 0 12px;
  transition: opacity var(--d-base) var(--e-out), translate var(--d-base) var(--e-out),
              visibility 0s linear var(--d-base), background var(--d-fast) var(--e-out);
}
.totop[data-show="1"] { opacity: 1; visibility: visible; translate: 0 0; transition-delay: 0s; }
.totop:hover { background: var(--accent-hover); }
.totop svg { inline-size: 18px; block-size: 18px; }

/* توست مشترک (سبد خرید، علاقه‌مندی، خبرنامه) */
.qq-toast {
  position: fixed; inset-block-end: var(--sp-5); inset-inline-end: var(--sp-5);
  z-index: var(--z-toast);
  display: flex; align-items: center; gap: var(--sp-2);
  padding-inline: var(--sp-4); padding-block: var(--sp-2);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: 600;
  background: var(--surface); color: var(--ok);
  border: 1px solid var(--ok);
  box-shadow: var(--shadow-md);
  opacity: 0; translate: 0 10px; pointer-events: none;
  transition: opacity var(--d-base) var(--e-out), translate var(--d-base) var(--e-out);
}
.qq-toast[data-show="1"] { opacity: 1; translate: 0 0; }
.qq-toast svg { inline-size: 16px; block-size: 16px; }

/* ظهور نرم هنگام ورود به ویوپورت — با IntersectionObserver کلاس می‌گیرد.
   بدون JS یا با reduced-motion، محتوا از ابتدا کامل دیده می‌شود. */
@media (prefers-reduced-motion: no-preference) {
  .js .rv { opacity: 0; translate: 0 14px; }
  .js .rv.is-in {
    opacity: 1; translate: 0 0;
    transition: opacity var(--d-slow) var(--e-out), translate var(--d-slow) var(--e-out);
  }
}
/* در چاپ و در ابزارهایی که اسکرول نمی‌کنند، محتوا هرگز نباید نامرئی بماند */
@media print { .js .rv { opacity: 1 !important; translate: none !important; } }

/* The hidden state must override layout display rules in page styles. */
[hidden]:not([hidden="until-found"]) { display: none !important; }