/* ==========================================================================
   قارقارک — کاتالوگ سفارش قطعات
   ----------------------------------------------------------------------
   منبع: product-catalog (بازنویسی کامل روی توکن‌های پروژه).
   از پکیج ورودی هیچ CSS‌ای پورت نشده؛ آن پکیج :root و ریست body خودش را
   داشت و کلاس‌های بی‌نام‌فضا (card, grid, modal, drawer, toast, cta, cat,
   eyebrow, meta, warn) که با صفحه تداخل می‌کردند. اینجا همه‌چیز زیر qc.

   ایده‌ی مرکزی: این بخش «یک ردیف کارت محصول دیگر» نیست — آن کار را اسلایدر
   می‌کند. کار این بخش انتخاب دقیقِ ترکیب است: سمت × کد رنگ × موجودی.
   پس امضای بصری‌اش «ماتریس موجودی» است؛ یک جدول کوچک که در یک نگاه نشان
   می‌دهد کدام ترکیب واقعاً در انبار هست — هم‌زبان با تز صفحه که هر ادعا
   باید یک عدد باشد نه یک صفت.
   ========================================================================== */
.qc {
  container: qc / inline-size;
  position: relative;
}
.qc__grid {
  display: grid; gap: var(--sp-4);
  grid-template-columns: 1fr;
  margin-block-start: var(--sp-8);
}
@container qc (min-width: 34rem) { .qc__grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--sp-5); } }
@container qc (min-width: 58rem) { .qc__grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }

/* ---------- کارت ---------- */
.qc__card { min-inline-size: 0; }
.qc__card > article {
  display: flex; flex-direction: column; block-size: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--inner-hair), var(--shadow-sm);
  overflow: hidden;
  scroll-margin-block-start: calc(var(--header-total) + 1rem);
  transition: border-color var(--d-base) var(--e-out), box-shadow var(--d-base) var(--e-out);
}
@media (hover: hover) {
  .qc__card:hover > article { border-color: var(--line-accent); box-shadow: var(--inner-hair), var(--shadow-md); }
}
.qc__card:focus-within > article { border-color: var(--accent); }
.qc__card:target > article { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* ---------- ویترین ----------
   عکس‌ها روی یک صفحه‌ی استودیوی روشنِ واحد نرمال شده‌اند (build/parts-images.py).
   در تم تیره، به‌جای دست‌کاری بیت‌مپ، صفحه با یک لایه‌ی جوهری ضرب می‌شود:
   قطعه خوانا می‌ماند و سفیدیِ استودیو دیگر توی چشم نمی‌زند. */
.qc__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--stage);
  border-block-end: 1px solid var(--line);
  overflow: hidden;
}
.qc__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.qc__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, rgba(11,17,22,.05));
}
:root[data-theme="dark"] .qc__media::after {
  background: linear-gradient(180deg, rgba(11,17,22,.20), rgba(11,17,22,.34));
  mix-blend-mode: multiply;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .qc__media::after {
    background: linear-gradient(180deg, rgba(11,17,22,.20), rgba(11,17,22,.34));
    mix-blend-mode: multiply;
  }
}

.qc__sku {
  position: absolute; z-index: 2;
  /* گوشه‌ی پایانِ خط (در فارسی: چپ) — عمداً دور از دکمه‌ی شناور «بازگشت به
     بالا» که در گوشه‌ی شروعِ خط می‌نشیند. */
  inset-block-end: var(--sp-2); inset-inline-end: var(--sp-2);
  padding-inline: var(--sp-2); padding-block: 3px;
  border-radius: var(--r-xs);
  font-family: var(--font-mono); font-size: var(--fs-mono);
  color: var(--qq-ink-800);
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(21,31,39,.12);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.qc__flag {
  position: absolute; z-index: 2;
  inset-block-start: var(--sp-2); inset-inline-start: var(--sp-2);
  padding-inline: var(--sp-2); padding-block: 3px;
  border-radius: var(--r-xs);
  font-size: var(--fs-2xs); font-weight: 800;
  box-shadow: var(--shadow-sm);
}
.qc__flag[data-s="out"] { background: var(--qq-ink-700); color: #fff; }
.qc__flag[data-s="low"] { background: var(--accent); color: var(--text-onbrass); }

/* ---------- بدنه ---------- */
.qc__body { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4); flex: 1 1 auto; }
.qc__cat { font-size: var(--fs-2xs); }
.qc__cat a {
  color: var(--accent-text); font-weight: 700;
  text-decoration-line: underline; text-decoration-color: transparent;
  text-underline-offset: 4px; text-decoration-thickness: 1px;
  transition: text-decoration-color var(--d-fast) var(--e-out);
}
.qc__cat a:hover { text-decoration-color: currentColor; }
.qc__name {
  font-size: var(--fs-md); font-weight: 800; line-height: 1.6;
  color: var(--text-strong);
}
.qc__lead { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.85; }

/* مشخصات — سه عدد، نه سه صفت */
.qc__specs {
  /* auto-fit و نه repeat(3): در چیدمان دو‌ستونه‌ی تبلت، سه ستونِ اجباری
     هر مقدار را به سه خط می‌شکست. حالا وقتی جا هست سه‌تا، وقتی نیست دوتا. */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr));
  gap: var(--sp-2) var(--sp-3);
  padding-block: var(--sp-3);
  border-block: 1px solid var(--line);
}
.qc__specs > div { min-inline-size: 0; }
.qc__specs dt { font-size: var(--fs-3xs); color: var(--text-faint); line-height: 1.6; }
.qc__specs dd {
  font-size: var(--fs-2xs); font-weight: 700; color: var(--text); line-height: 1.6;
  overflow-wrap: anywhere;
}

/* ---------- ماتریس موجودی — امضای بخش ---------- */
/* align-self:start وگرنه جدول به‌عنوان آیتمِ فلکسِ ستونی کش می‌آید و در
   قطعه‌ی تک‌ستونه (آینه: فقط سمت، بدون رنگ) خانه‌ها نوارهای پهن می‌شوند. */
.qc__mx {
  border-collapse: separate; border-spacing: 4px;
  margin-inline: -4px; align-self: start;
}
.qc__mx thead td { inline-size: 2.6rem; }
.qc__mx th[scope="col"] { padding: 0 0 2px; }
.qc__sw {
  display: block; inline-size: 100%; block-size: 6px; border-radius: 3px;
  background: var(--c); border: 1px solid rgba(21,31,39,.22);
}
:root[data-theme="dark"] .qc__sw { border-color: rgba(255,255,255,.24); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .qc__sw { border-color: rgba(255,255,255,.24); }
}
.qc__mx th[scope="row"] {
  padding-inline-end: var(--sp-2);
  font-size: var(--fs-3xs); font-weight: 600; color: var(--text-faint);
  text-align: start; white-space: nowrap;
}
.qc__cell {
  display: grid; place-items: center;
  min-inline-size: 2.1rem; block-size: 1.65rem;
  border-radius: var(--r-xs);
  font-size: var(--fs-2xs); font-weight: 800;
  font-variant-numeric: tabular-nums;
  border: 1px solid transparent;
}
.qc__cell[data-s="ok"]  { background: var(--ok-wash);   color: var(--ok);   border-color: color-mix(in srgb, var(--ok) 26%, transparent); }
.qc__cell[data-s="low"] { background: var(--warn-wash); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
/* ناموجود فقط با رنگ متمایز نمی‌شود (WCAG 1.4.1): هاشور + خط تیره هم دارد */
.qc__cell[data-s="out"] {
  color: var(--text-faint); border-color: var(--line);
  background: repeating-linear-gradient(-45deg,
    var(--surface-3) 0 3px, transparent 3px 6px);
}

/* قرائت موجودی برای قطعه‌ی بدون سمت و رنگ */
.qc__stockline {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-xs); font-weight: 600;
}
.qc__dot { inline-size: 8px; block-size: 8px; border-radius: 50%; flex: 0 0 auto; background: currentColor; }
.qc__stockline[data-s="ok"]  { color: var(--ok); }
.qc__stockline[data-s="low"] { color: var(--warn); }
.qc__stockline[data-s="out"] { color: var(--text-faint); }
.qc__stockline[data-s="out"] .qc__dot { background: none; border: 1.5px dashed currentColor; }

/* ---------- پاورقی کارت ---------- */
.qc__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); flex-wrap: wrap;
  margin-block-start: auto; padding-block-start: var(--sp-3);
  border-block-start: 1px solid var(--line);
}
.qc__price { font-size: var(--fs-2xs); color: var(--text-muted); line-height: 1.4; }
.qc__price b { display: block; font-size: var(--fs-lg); font-weight: 800; color: var(--text-strong); }
.qc__price small { font-size: var(--fs-2xs); font-weight: 600; color: var(--text-muted); }
.qc__order { min-block-size: 44px; padding-inline: var(--sp-4); flex: 0 0 auto; }

/* ==========================================================================
   برگهٔ سفارش — دیالوگ انتخاب ترکیب
   ========================================================================== */
.qc__sheet {
  /* position:fixed صریح است، نه ارثی از UA.
     باگ: کلاس qc (که position:relative دارد) روی خودِ <dialog> نشسته بود تا
     کوئری کانتینر کار کند؛ استایل نویسنده بر UA غالب است، پس دیالوگ مودال
     از حالت fixed درمی‌آمد و به‌جای وسط ویوپورت، ته سند رندر می‌شد —
     بک‌دراپ دیده می‌شد ولی خودِ برگه نه. کانتینر حالا روی همین کلاس است. */
  position: fixed; inset: 0;
  container: qcs / inline-size;
  border: 0; padding: 0;
  inline-size: min(58rem, 100% - 2rem);
  max-inline-size: 100%;
  max-block-size: min(92svh, 54rem);
  margin: auto;
  border-radius: var(--r-xl);
  background: var(--surface); color: var(--text);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.qc__sheet::backdrop {
  background: rgba(6,10,14,.66);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.qc__sheet[open] { display: grid; grid-template-rows: auto minmax(0,1fr); }

.qc__hd {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-block-end: 1px solid var(--line);
  background: var(--surface-2);
}
.qc__hd h2 { font-size: var(--fs-lg); font-weight: 800; line-height: 1.5; color: var(--text-strong); }
.qc__hd .qc__cat { margin-block-end: 2px; }
.qc__hd .qc__sku {
  position: static; display: inline-block; margin-block-start: var(--sp-2);
  background: var(--surface-3); color: var(--text-muted); border-color: var(--line);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}

.qc__bd { overflow-y: auto; overscroll-behavior: contain; padding: var(--sp-5); display: grid; gap: var(--sp-5); }
@container qcs (min-width: 46rem) {
  .qc__bd { grid-template-columns: minmax(0, 1.1fr) minmax(17rem, .9fr); align-items: start; }
}
.qc__figure {
  border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--line); background: var(--stage);
  aspect-ratio: 4 / 3; position: relative;
}
.qc__figure img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.qc__desc { margin-block-start: var(--sp-4); font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.95; }

/* انتخابگرها */
.qc__opts { display: grid; gap: var(--sp-4); align-content: start; }
.qc__opts fieldset { border: 0; padding: 0; margin: 0; min-inline-size: 0; }
.qc__opts legend {
  padding: 0; margin-block-end: var(--sp-2);
  font-size: var(--fs-3xs); font-weight: 700; letter-spacing: .04em; color: var(--text-muted);
}
.qc__chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.qc__chip { position: relative; }
.qc__chip input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.qc__chip > span {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-block-size: 44px; padding-inline: var(--sp-3);
  border-radius: var(--r-sm);
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  font-size: var(--fs-xs); font-weight: 700; color: var(--text);
  transition: border-color var(--d-fast) var(--e-out), background var(--d-fast) var(--e-out),
              color var(--d-fast) var(--e-out);
}
.qc__chip i {
  inline-size: 14px; block-size: 14px; border-radius: 4px; flex: 0 0 auto;
  background: var(--c); border: 1px solid rgba(21,31,39,.25);
}
.qc__chip input:hover + span { border-color: var(--line-accent); }
.qc__chip input:checked + span {
  background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text);
}
.qc__chip input:focus-visible + span { outline: 2px solid var(--ring); outline-offset: 3px; }
.qc__chip input:disabled + span { opacity: .42; cursor: not-allowed; text-decoration: line-through; }
.qc__chip em { font-style: normal; font-size: var(--fs-3xs); color: var(--text-faint); font-family: var(--font-mono); }

.qc__qty { display: grid; gap: var(--sp-2); font-size: var(--fs-3xs); font-weight: 700; letter-spacing: .04em; color: var(--text-muted); }
.qc__qty input {
  inline-size: 6rem; min-block-size: 44px;
  padding-inline: var(--sp-3);
  border-radius: var(--r-sm); border: 1px solid var(--line-strong);
  background: var(--surface-2); color: var(--text);
  font-size: var(--fs-sm); font-weight: 700; font-variant-numeric: tabular-nums;
}
.qc__qty input:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

/* قرائت نهایی */
.qc__readout {
  display: grid; gap: var(--sp-2);
  padding: var(--sp-4);
  border-radius: var(--r-md);
  background: var(--surface-2); border: 1px solid var(--line);
}
.qc__readout dl { display: grid; gap: var(--sp-1); }
.qc__readout dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.qc__readout dt { font-size: var(--fs-2xs); color: var(--text-muted); }
.qc__readout dd { font-size: var(--fs-xs); font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.qc__readout .qc__sum { padding-block-start: var(--sp-2); border-block-start: 1px solid var(--line); }
.qc__readout .qc__sum dd { font-size: var(--fs-lg); font-weight: 800; color: var(--accent-text); }
.qc__warn {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  font-size: var(--fs-2xs); font-weight: 600; color: var(--warn); line-height: 1.7;
}
.qc__warn svg { inline-size: 15px; block-size: 15px; flex: 0 0 auto; margin-block-start: 3px; }

/* ==========================================================================
   فهرست سفارش — سبد نیست، برگهٔ سفارشی است که برای فروشنده می‌فرستید
   ========================================================================== */
.qc__listBtn { position: relative; }
.qc__badge {
  position: absolute; inset-block-start: 2px; inset-inline-end: 2px;
  min-inline-size: 18px; block-size: 18px; padding-inline: 4px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: var(--accent); color: var(--text-onbrass);
  font-size: 10px; font-weight: 800; font-variant-numeric: tabular-nums;
  border: 2px solid var(--surface);
  scale: 0; transition: scale var(--d-base) var(--e-spring);
}
.qc__listBtn[data-n]:not([data-n="0"]) .qc__badge { scale: 1; }

.qc__list { inline-size: min(38rem, 100% - 2rem); }
.qc__rows { display: grid; gap: var(--sp-2); }
.qc__row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--surface-2);
}
.qc__row b { display: block; font-size: var(--fs-xs); font-weight: 700; color: var(--text-strong); line-height: 1.6; }
.qc__row span { font-size: var(--fs-2xs); color: var(--text-muted); }
.qc__row .qc__rowEnd { display: flex; align-items: center; gap: var(--sp-3); flex: 0 0 auto; }
.qc__row output { font-size: var(--fs-xs); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.qc__del {
  inline-size: 34px; block-size: 34px; display: grid; place-items: center;
  border-radius: var(--r-xs); color: var(--text-faint);
  transition: color var(--d-fast) var(--e-out), background var(--d-fast) var(--e-out);
}
.qc__del:hover { color: var(--danger); background: var(--danger-wash); }
.qc__del svg { inline-size: 16px; block-size: 16px; }
.qc__empty { padding-block: var(--sp-8); text-align: center; font-size: var(--fs-xs); color: var(--text-faint); }
.qc__listFoot { display: grid; gap: var(--sp-3); margin-block-start: var(--sp-4); padding-block-start: var(--sp-4); border-block-start: 1px solid var(--line); }
.qc__listFoot .actions { inline-size: 100%; }
/* دکمه‌ی واتساپ وقتی فهرست خالی است: بدون href، پس نه کلیک‌پذیر و نه فوکوس‌پذیر */
.qc__listFoot .btn.is-off { opacity: .42; pointer-events: none; }
.qc__note { font-size: var(--fs-3xs); color: var(--text-faint); line-height: 1.8; }

/* موبایل: هر دو دیالوگ تمام‌صفحه‌اند */
@media (max-width: 39.999rem) {
  .qc__sheet, .qc__list {
    inline-size: 100dvw; max-inline-size: 100dvw;
    block-size: 100dvh; max-block-size: 100dvh;
    border-radius: 0;
  }
  .qc__bd { padding: var(--sp-4); }
  .qc__foot { gap: var(--sp-2); }
  .qc__order { inline-size: 100%; }
  .qc__list{inset:0;margin:0;border-radius:0;overflow:hidden;grid-template-rows:auto minmax(0,1fr)!important;overscroll-behavior:contain}
  .qc__list *{min-inline-size:0;max-inline-size:100%;box-sizing:border-box}
  .qc__list .qc__hd{position:relative;z-index:2;align-items:center;padding:max(.85rem,env(safe-area-inset-top)) max(.85rem,env(safe-area-inset-right)) .85rem max(.85rem,env(safe-area-inset-left));background:var(--surface)}
  .qc__list .qc__hd>div{min-inline-size:0}.qc__list .qc__hd h2{font-size:1.05rem!important;white-space:normal}
  .qc__list .qc__bd{display:block;min-inline-size:0;overflow-y:auto;overflow-x:clip;padding:.85rem max(.85rem,env(safe-area-inset-right)) calc(1.25rem + env(safe-area-inset-bottom)) max(.85rem,env(safe-area-inset-left));overscroll-behavior:contain;scrollbar-gutter:stable}
  .qc__list .qc__bd>div,.qc__list .qc__rows,.qc__listFoot{min-inline-size:0;inline-size:100%;max-inline-size:100%}
  .qc__list .qc__row{display:grid;grid-template-columns:1fr;align-items:start;gap:.55rem;padding:.8rem}
  .qc__list .qc__row>div:first-child{inline-size:100%}.qc__list .qc__row b,.qc__list .qc__row span{white-space:normal;overflow-wrap:anywhere}
  .qc__list .qc__rowEnd{inline-size:100%;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:.6rem!important;padding-block-start:.45rem;border-block-start:1px solid var(--line)}.qc__list .qc__row output{font-size:.78rem;white-space:nowrap}
  .qc__listFoot{margin-block-start:.75rem;padding-block-start:.75rem}.qc__listFoot .qc__readout{padding:.8rem}.qc__listFoot .qc__readout dl>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.5rem}.qc__listFoot .actions{display:grid;grid-template-columns:1fr;gap:.55rem}.qc__listFoot .actions .btn{inline-size:100%;min-inline-size:0;justify-content:center;white-space:nowrap;font-size:clamp(.72rem,3.5vw,.84rem);padding-inline:.55rem}.qc__list .qc__note{white-space:normal;overflow-wrap:anywhere}
}

@media print {
  .qc__order, .qc__listBtn { display: none !important; }
  .qc__card > article { break-inside: avoid; box-shadow: none; }
}

/* Stage 3 — canonical storefront integration */
.qc__name a{color:inherit;text-decoration:none}
.qc__name a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.qc__stockline small{font-size:var(--fs-3xs);color:var(--text-faint);font-weight:600}
.qc__range{display:block;margin-block-start:2px;font-size:var(--fs-3xs);color:var(--text-faint)}
.qc__actions{display:flex;align-items:center;gap:var(--sp-2);margin-inline-start:auto}
.qc__details{min-block-size:44px;padding-inline:var(--sp-3)}
.qc__dynamic-options{display:grid;gap:var(--sp-4)}
.qc__option-help{display:block;margin-block-start:var(--sp-1);font-size:var(--fs-3xs);color:var(--text-faint)}
.qc__chip-media{inline-size:34px;block-size:34px;border-radius:var(--r-xs);object-fit:cover;border:1px solid var(--line)}
.qc__error{padding:var(--sp-3);border:1px solid color-mix(in srgb,var(--danger) 32%,transparent);border-radius:var(--r-sm);background:var(--danger-wash);color:var(--danger);font-size:var(--fs-2xs);line-height:1.8}
.qc__add-state{font-size:var(--fs-3xs);color:var(--text-faint);text-align:center}
@media (max-width:39.999rem){.qc__actions{inline-size:100%;display:grid;grid-template-columns:.72fr 1.28fr}.qc__details,.qc__order{inline-size:100%}}