/* ==========================================================================
   Espart — Shared styles (tokens, base, atoms, header, product card, footer, bottom nav)
   Built from Figma "Espart Design System"
   Mobile-first (design: 360) → Desktop ≥1200 (design: 1440, content 1280)
   ========================================================================== */

/* ---------- Fonts (local) ---------- */
@font-face { font-family: "Vazirmatn"; src: url("../fonts/Vazirmatn-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Vazirmatn"; src: url("../fonts/Vazirmatn-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Vazirmatn"; src: url("../fonts/Vazirmatn-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Vazirmatn"; src: url("../fonts/Vazirmatn-Black.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }

/* ---------- Tokens ---------- */
:root {
  --primary: #0054a6;
  --primary-900: #024182;
  --primary-100: #d4e6fe;
  --primary-50: #eff6ff;
  --primary-800: #002f62;
  --primary-300: #b2cdf0;
  --focus: #4f82c3;
  --accent-hover: #ffb666;
  --accent-press: #cb7e0b;
  --danger-50: #ffedeb;
  --accent: #f99d1c;
  --accent-50: #fff3e7;
  --accent-900: #784905;
  --danger: #da2128;
  --danger-900: #940110;
  --gray-900: #212529;
  --gray-800: #343a40;
  --gray-700: #495057;
  --gray-600: #6c757d;
  --gray-500: #868e96;
  --gray-400: #adb5bd;
  --gray-350: #ced4da;
  --gray-300: #dee2e6;
  --gray-200: #e9ecef;
  --gray-100: #f8f9fa;
  --white: #ffffff;
  --success-900: #04572b;
  --success-50: #dbfce3;
  --warning-900: #795703;
  --warning-50: #fff4e0;
  --star: #f5b400;

  --shadow-xs: 0 1px 2px rgba(33, 37, 41, .08);
  --gutter: 16px;
  --font: "Vazirmatn", Tahoma, sans-serif;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  line-height: 24px;
  color: var(--gray-900);
  background: var(--gray-100);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; }
input { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Icons (sprite symbols, stroke = currentColor, stroke width stays in px) */
.ic { display: block; flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }

/* Breakpoint visibility helpers */
@media (max-width: 1199.98px) {
  .d-only { display: none !important; }
}
@media (min-width: 1200px) {
  .m-only { display: none !important; }
}
.br-d { display: none; }

/* Layout container */
.container { width: 100%; margin-inline: auto; padding-inline: var(--gutter); }

/* Horizontal scrollers (mobile) */
.hscroll { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.hscroll::-webkit-scrollbar { display: none; }

/* ==========================================================================
   Atoms
   ========================================================================== */

/* Button */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 20px; border-radius: 8px;
  font-weight: 700; font-size: 14px; line-height: 24px; white-space: nowrap;
  transition: background-color .15s, box-shadow .15s, color .15s;
}
.btn .ic { width: 18px; height: 18px; }
.btn--primary { background: var(--primary); color: var(--white); }
.btn--primary:hover { background: var(--primary-900); }
.btn--accent { background: var(--accent); color: var(--gray-900); }
.btn--accent:hover { background: var(--accent-hover); }
.btn--outline { background: var(--white); color: var(--primary); border: 1px solid var(--primary); }
.btn--outline:hover { background: var(--primary-50); }
.btn--text { padding: 0 8px; color: var(--primary); }
.btn--text:hover { background: var(--primary-50); }
.btn--lg { height: 52px; padding: 0 24px; font-size: 16px; line-height: 28px; }
.btn--lg .ic { width: 20px; height: 20px; }
.btn--block { width: 100%; }
.btn--ghost { background: var(--primary-50); color: var(--primary); }
.btn--ghost:hover { background: var(--primary-100); }
.btn--sm { height: 36px; padding: 0 12px; font-size: 13px; line-height: 22px; }
.btn--sm .ic { width: 16px; height: 16px; }
.btn--text.btn--sm { padding: 0 8px; }

/* Icon button */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 36px; height: 36px; border-radius: 8px;
  transition: background-color .15s;
}
.icon-btn--ghost { background: var(--primary-50); color: var(--primary); }
.icon-btn--ghost:hover { background: var(--primary-100); }
.icon-btn--md { width: 44px; height: 44px; }
.icon-btn--md .ic { width: 20px; height: 20px; }
.icon-btn--outline { width: 44px; height: 44px; background: var(--white); border: 1px solid var(--primary); color: var(--primary); }
.icon-btn--outline .ic { width: 20px; height: 20px; }

/* Count badge */
.count {
  position: absolute; display: inline-flex; align-items: center; justify-content: center;
  min-width: 17px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--danger); color: var(--white);
  font-weight: 700; font-size: 10px; line-height: 16px;
}

/* Small primary tag ("نزدیک‌ترین", "مدل شما") */
.tag { display: inline-flex; align-items: center; height: 16px; padding: 0 6px; border-radius: 4px; background: var(--primary); color: var(--white); font-weight: 700; font-size: 10px; line-height: 16px; white-space: nowrap; }

/* Text link */
.link { color: var(--primary); font-weight: 700; font-size: 13px; line-height: 22px; cursor: pointer; }
.link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* "See all" link */
.more {
  display: inline-flex; align-items: center; gap: 2px; flex: none;
  color: var(--primary); font-weight: 700; font-size: 13px; line-height: 22px;
}
.more .ic { width: 16px; height: 16px; }
.more:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Section head */
.sec-head { display: flex; align-items: center; justify-content: space-between; }
.sec-head__title { font-weight: 700; font-size: 18px; line-height: 28px; color: var(--gray-900); }
.sec-head__sub { font-weight: 400; font-size: 13px; line-height: 22px; color: var(--gray-700); }

/* ==========================================================================
   Header
   ========================================================================== */
.hdr { background: var(--white); border-bottom: 1px solid var(--gray-300); }
.hdr__top {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  grid-template-areas: "menu logo . user" "search search search search";
  align-items: center; column-gap: 4px; row-gap: 8px;
  padding-top: 8px; padding-bottom: 12px;
}
.hdr--nosearch .hdr__top { grid-template-areas: "menu logo . user"; }
.hdr__menu { grid-area: menu; }
.logo { grid-area: logo; display: block; width: 163px; height: 40px; flex: none; }
.logo img { width: 100%; height: 100%; object-fit: contain; }
.hdr__user { grid-area: user; }
.hdr__actions { grid-area: actions; }

.search {
  grid-area: search;
  display: flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 12px 0 4px; /* RTL: right 12 (search icon), left 4 (camera) */
  border-radius: 8px; background: var(--gray-200);
}
.search > .ic { color: var(--gray-600); }
.search__input {
  flex: 1 1 auto; min-width: 0; height: 24px; padding: 0; border: 0; outline: 0; background: transparent;
  font-weight: 400; font-size: 14px; line-height: 24px; color: var(--gray-900); text-align: right;
}
.search__input::placeholder { color: var(--gray-600); opacity: 1; }
.search:focus-within { box-shadow: 0 0 0 2px var(--primary-100); }
.search .icon-btn { color: var(--gray-900); }

/* Promo top bar (closable) — Figma PromoTopBar */
.topbar { background: #002f62; color: var(--white); }
.topbar[hidden] { display: none; }
.topbar__inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 44px; padding-inline: 12px; }
.topbar__msg { display: flex; align-items: center; gap: 10px; min-width: 0; overflow: hidden; white-space: nowrap; }
.topbar__msg > .ic { flex: none; width: 18px; height: 18px; }
.topbar__text { font-weight: 500; font-size: 13px; line-height: 22px; overflow: hidden; text-overflow: ellipsis; }
.topbar__code { flex: none; padding: 2px 10px; border-radius: 6px; background: var(--accent); color: var(--gray-900); font-weight: 700; font-size: 12px; line-height: 20px; }
.topbar__link { flex: none; font-weight: 500; font-size: 12px; line-height: 20px; color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.topbar__close { flex: none; display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; color: var(--white); }
.topbar__close .ic { width: 16px; height: 16px; }

/* ==========================================================================
   SmartSearch — modes (chips), field + camera + submit, popular hints
   Desktop: one row. Mobile (Figma): full-width field with camera inside, full-width button.
   ========================================================================== */
.qsearch {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  padding: 16px; border-radius: 16px; background: var(--white); box-shadow: 0 8px 24px rgba(33, 37, 41, .12);
}
.qsearch__modes { display: flex; gap: 4px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.chip {
  display: inline-flex; align-items: center; gap: 4px; flex: none; height: 36px; padding: 0 12px;
  border: 1px solid var(--gray-300); border-radius: 999px; background: var(--white);
  font-weight: 500; font-size: 13px; line-height: 22px; color: var(--gray-700); white-space: nowrap;
}
.chip .ic { width: 16px; height: 16px; }
.chip:hover { border-color: var(--gray-500); }
.chip.is-selected { background: var(--primary-50); border-color: var(--primary); color: var(--primary); }

.qsearch__bar { display: flex; flex-direction: column; gap: 12px; align-self: stretch; }
.qsearch__field {
  display: flex; align-items: center; gap: 8px; min-width: 0; height: 52px; padding: 0 12px 0 4px;
  border: 2px solid var(--primary); border-radius: 8px; background: var(--white); color: var(--gray-600); cursor: text;
}
.qsearch__field > .ic { flex: none; width: 20px; height: 20px; }
.qsearch__field:focus-within { box-shadow: 0 0 0 3px var(--primary-100); }
.qsearch__input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; padding: 0; background: none; font-size: 14px; line-height: 24px; color: var(--gray-900); text-align: right; }
.qsearch__input::placeholder { color: var(--gray-600); opacity: 1; }
.qsearch__input::-webkit-search-cancel-button { display: none; }
.qsearch__cam {
  display: flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px;
  border-radius: 8px; background: var(--primary-50); color: var(--gray-900);
}
.qsearch__cam .ic { width: 20px; height: 20px; }
.qsearch__cam:hover { background: var(--primary-100); }
.qsearch__photo {
  display: none; align-items: center; justify-content: center; flex: none; width: 52px; height: 52px;
  border: 1px solid var(--primary); border-radius: 8px; background: var(--white); color: var(--gray-900);
}
.qsearch__photo .ic { width: 22px; height: 22px; }
.qsearch__photo:hover { background: var(--primary-50); }
.qsearch__go { width: 100%; }

.qsearch__hints { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; align-self: stretch; }
.qsearch__hints-label, .qsearch__hints .hint, .qsearch__spacer { display: none; }
.qsearch__hints-label { font-weight: 400; font-size: 12px; line-height: 20px; color: var(--gray-600); }
.hint { padding: 0 8px; border-radius: 4px; background: var(--gray-200); font-weight: 500; font-size: 12px; line-height: 20px; color: var(--gray-700); white-space: nowrap; }
.hint:hover { background: var(--gray-300); }
.qsearch__help { font-weight: 500; font-size: 12px; line-height: 20px; color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }

.round-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 999px;
  background: var(--white); border: 1px solid var(--gray-300); color: var(--gray-700);
}
.round-btn:hover { background: var(--gray-100); }

/* ==========================================================================
   Product card (PartCard)
   ========================================================================== */
.pcard {
  /* compact (mobile) geometry */
  --pad: 6px; --r: 20px; --r2: 10px; --notch: 40px; --notch-gap: 6px; --notch-r: 14px; --img-h: 140px; --img-r: 14px;
  --off: calc(var(--notch) + var(--notch-gap));
  position: relative; isolation: isolate;
  display: flex; flex-direction: column;
  padding: var(--pad); min-width: 0;
}
.pcard__bg { position: absolute; inset: 0; z-index: -1; filter: drop-shadow(0 2px 5px rgba(33, 37, 41, .09)); pointer-events: none; }
.pcard__bg i { position: absolute; display: block; }
.pcard__bg .t { left: 0; top: 0; right: 0; bottom: var(--off); background: var(--white); border-radius: var(--r) var(--r) 0 var(--r2); }
.pcard__bg .b { right: 0; bottom: 0; left: var(--off); height: calc(var(--off) + 1px); background: var(--white); border-radius: 0 0 var(--r) var(--r2); }
.pcard__bg .f {
  left: calc(var(--off) - var(--r2) - 4px); bottom: calc(var(--off) - var(--fil)); width: var(--fil); height: var(--fil);
  --fil: calc(var(--r2) + 4px);
  background: radial-gradient(circle at 0 100%, transparent calc(var(--fil) - .5px), var(--white) var(--fil));
}

.pcard__img {
  display: flex; align-items: center; justify-content: center;
  height: var(--img-h); border-radius: var(--img-r); background: var(--gray-200); color: var(--gray-600);
}
.pcard__img .ic { width: 48px; height: 48px; stroke-width: 1.5; }

.pcard__body { display: flex; flex-direction: column; gap: 6px; padding: 10px 4px 2px; }
.pcard__title-row { display: flex; align-items: flex-start; gap: 8px; }
.pcard__name {
  flex: 1 1 auto; min-width: 0; height: 44px; overflow: hidden;
  font-weight: 700; font-size: 13px; line-height: 22px; color: var(--gray-900);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.pcard__name a:hover { color: var(--primary); }
.pcard__wish {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 26px; height: 26px; border-radius: 999px; background: var(--white); box-shadow: var(--shadow-xs); color: var(--gray-600);
}
.pcard__wish .ic { width: 13px; height: 13px; }
.pcard__wish:hover, .pcard__wish.is-on { color: var(--danger); }
.pcard__wish.is-on .ic { fill: currentColor; }

.pcard__fit { display: none; align-items: center; gap: 4px; font-weight: 500; font-size: 12px; line-height: 20px; color: var(--success-900); }
.pcard__fit .ic { width: 14px; height: 14px; stroke-width: 2.5; }
.pcard__foot { display: flex; justify-content: flex-start; align-items: flex-end; padding: 4px 0 0 50px; }
.pcard__price { display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; height: 52px; }
.pcard__sale { display: none; align-items: center; gap: 6px; }
.pcard__badge {
  display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 4px;
  background: var(--danger); color: var(--white); font-weight: 700; font-size: 12px; line-height: 20px;
}
.pcard__old { font-weight: 400; font-size: 12px; line-height: 20px; color: var(--gray-600); text-decoration: line-through; }
.pcard__now { display: flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.pcard__amount { font-weight: 900; font-size: 18px; line-height: 28px; color: var(--gray-900); }
.pcard__cur { font-weight: 500; font-size: 12px; line-height: 20px; color: var(--gray-700); }
.pcard__status { display: flex; align-items: center; gap: 4px; font-weight: 400; font-size: 12px; line-height: 20px; color: var(--danger-900); }

.pcard__cart {
  position: absolute; left: 0; bottom: 0;
  display: flex; align-items: center; justify-content: center;
  width: var(--notch); height: var(--notch); border-radius: var(--notch-r);
  background: var(--accent); color: var(--gray-900);
  box-shadow: 0 6px 12px -2px rgba(203, 126, 11, .4), 0 2px 3px rgba(33, 37, 41, .1),
              inset 0 2px 1px rgba(255, 255, 255, .45), inset 0 -3px 4px rgba(159, 97, 4, .35);
  transition: transform .15s, filter .15s;
}
.pcard__cart .ic { width: 18px; height: 18px; }
.pcard__cart:hover { filter: brightness(1.04); transform: translateY(-1px); }

/* Out of stock */
.pcard--out .pcard__name { color: var(--gray-700); }
.pcard--out .pcard__img { color: var(--gray-500); }
.pcard--out .pcard__img .ic { opacity: .45; }
.pcard--out .pcard__amount { color: var(--gray-600); font-size: 16px; line-height: 26px; }
.pcard--out .pcard__cur { color: var(--gray-600); }
.pcard--out .pcard__cart {
  background: var(--gray-200); color: var(--gray-700);
  box-shadow: 0 6px 12px -2px rgba(33, 37, 41, .18), 0 2px 3px rgba(33, 37, 41, .1),
              inset 0 2px 1px rgba(255, 255, 255, .8), inset 0 -3px 4px rgba(33, 37, 41, .1);
}

/* ==========================================================================
   Footer — white, one row on desktop; stacked & centred on mobile
   ========================================================================== */
.ftr { background: var(--white); border-top: 1px solid var(--gray-300); }
.ftr__inner { display: flex; flex-direction: column; gap: 16px; padding-top: 24px; padding-bottom: 20px; }
.ftr__row { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.ftr__logo { display: flex; padding: 8px 0; }
.ftr__logo img { width: 163px; height: 40px; object-fit: contain; }
.ftr__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 20px; align-self: stretch; }
.ftr__links a { font-weight: 400; font-size: 13px; line-height: 22px; color: var(--gray-700); white-space: nowrap; transition: color .15s; }
.ftr__links a:hover { color: var(--primary); }
.ftr__seals { display: flex; gap: 8px; }
.ftr__seal { display: flex; align-items: center; justify-content: center; width: 56px; height: 64px; padding: 4px; border: 1px solid var(--gray-300); border-radius: 8px; background: var(--white); }
.ftr__seal img { width: 40px; height: 48px; object-fit: contain; }
.ftr__rule { height: 1px; margin: 0; border: 0; background: var(--gray-300); }
.ftr__copy { font-weight: 400; font-size: 12px; line-height: 20px; color: var(--gray-600); text-align: center; }

/* Bottom navigation (mobile) */
.bnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
  background: var(--white); border-top: 1px solid var(--gray-300);
}
.bnav__item {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px;
  width: 64px; font-weight: 500; font-size: 10px; line-height: 16px; color: var(--gray-600);
}
.bnav__item .ic { width: 24px; height: 24px; }
.bnav__item.is-active { color: var(--primary); font-weight: 700; }
.bnav__item .count { left: 38px; top: -4px; }
.page--bnav { padding-bottom: 59px; }

/* ==========================================================================
   ≥600 — large phones / tablets (fluid enhancements of the mobile design)
   ========================================================================== */
@media (min-width: 600px) {
  :root { --gutter: 24px; }
}

/* ==========================================================================
   ≥1200 — Desktop (design 1440, content 1280)
   ========================================================================== */
@media (min-width: 1200px) {
  :root { --gutter: clamp(24px, 5.5556vw, 80px); }
  .container { max-width: 1440px; }
  .br-d { display: inline; }
  .page--bnav { padding-bottom: 0; }
  .hdr__top {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "logo search actions";
    column-gap: 24px; height: 72px; padding-top: 0; padding-bottom: 0;
  }
  .hdr--nosearch .hdr__top { grid-template-areas: "logo . actions"; }
  .topbar__inner { justify-content: center; height: 40px; padding-inline: var(--gutter); }
  .topbar__close { position: absolute; left: var(--gutter); top: 12px; }
  /* SmartSearch — desktop single row */
  .qsearch__bar { flex-direction: row; gap: 8px; }
  .qsearch__field { flex: 1 1 0; padding: 0 16px; }
  .qsearch__cam { display: none; }
  .qsearch__photo { display: flex; }
  .qsearch__go { width: auto; flex: none; }
  .qsearch__hints { flex-wrap: nowrap; justify-content: flex-start; }
  .qsearch__hints-label, .qsearch__hints .hint { display: inline-block; }
  .qsearch__spacer { display: block; flex: 1 1 auto; height: 1px; }
  .hdr__actions { display: flex !important; align-items: center; gap: 8px; }
  .hdr__cart { position: relative; }
  .hdr__cart .count { left: 30px; top: -6px; }
  .hdr__nav { display: flex !important; align-items: center; gap: 28px; height: 44px; }
  .hdr__nav a { font-weight: 500; font-size: 14px; line-height: 24px; color: var(--gray-700); white-space: nowrap; transition: color .15s; }
  .hdr__nav a:hover { color: var(--primary); }
  .hdr__nav .hdr__cats { display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--gray-900); }
  .hdr__nav .hdr__phone { display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--primary); }
  .hdr__phone .ic { width: 16px; height: 16px; }
  .hdr__spacer { flex: 1 1 auto; }
  /* Breadcrumb */
  .crumbs { display: flex !important; align-items: center; gap: 8px; font-weight: 400; font-size: 12px; line-height: 20px; color: var(--gray-700); }
  .crumbs .ic { width: 14px; height: 14px; color: var(--gray-600); }
  .crumbs a:hover { color: var(--primary); }
  .crumbs [aria-current] { font-weight: 500; color: var(--gray-900); }
  .sec-head__title { font-size: 20px; line-height: 32px; }
  .sec-head__sub { font-size: 13px; line-height: 22px; }
  .pcard { --pad: 8px; --r: 24px; --r2: 14px; --notch: 52px; --notch-gap: 8px; --notch-r: 18px; --img-h: 200px; --img-r: 18px; }
  .pcard__img .ic { width: 64px; height: 64px; }
  .pcard__body { padding: 12px 8px 4px; }
  .pcard__name { height: 48px; font-size: 14px; line-height: 24px; }
  .pcard__wish { width: 30px; height: 30px; }
  .pcard__wish .ic { width: 15px; height: 15px; }
  .pcard__foot { padding: 6px 0 0 64px; }
  .pcard__sale { display: flex; }
  .pcard__fit { display: flex; }
  .pcard__cart .ic { width: 22px; height: 22px; }
  /* Compact card kept on desktop (cart suggestions) */
  .pcard--compact { --pad: 6px; --r: 20px; --r2: 10px; --notch: 40px; --notch-gap: 6px; --notch-r: 14px; --img-h: 140px; --img-r: 14px; }
  .pcard--compact .pcard__img .ic { width: 48px; height: 48px; }
  .pcard--compact .pcard__body { padding: 10px 4px 2px; }
  .pcard--compact .pcard__name { height: 44px; font-size: 13px; line-height: 22px; }
  .pcard--compact .pcard__wish { width: 26px; height: 26px; }
  .pcard--compact .pcard__wish .ic { width: 13px; height: 13px; }
  .pcard--compact .pcard__foot { padding: 4px 0 0 50px; }
  .pcard--compact .pcard__sale { display: none; }
  .pcard--compact .pcard__cart .ic { width: 18px; height: 18px; }
  .ftr__inner { padding-top: 28px; }
  .ftr--overlap .ftr__inner { padding-top: 92px; }
  .ftr__row { flex-direction: row; justify-content: space-between; gap: 24px; }
  .ftr__links { flex-wrap: nowrap; gap: 28px; align-self: auto; }
  .ftr__copy { text-align: right; }
  .bnav { display: none; }
}


/* ==========================================================================
   Listing layout: filters column + results (archive, technician search)
   ========================================================================== */
.listing { display: flex; flex-direction: column; }
.results { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
@media (min-width: 1200px) {
  .listing { flex-direction: row; align-items: flex-start; gap: 24px; }
  .results { flex: 1 1 auto; gap: 16px; }
}

/* ==========================================================================
   Toolbar, sort select, view toggle & filter panel (archive, technician search)
   ========================================================================== */
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.select {
  position: relative; display: inline-flex; align-items: center; height: 36px;
  border: 1px solid var(--gray-500); border-radius: 8px; background: var(--white); color: var(--gray-700);
}
.select select {
  appearance: none; -webkit-appearance: none; field-sizing: content; border: 0; outline: 0; background: transparent; cursor: pointer;
  height: 34px; padding: 0 12px 0 36px; /* RTL: text right, chevron left */
  font: inherit; font-weight: 500; font-size: 13px; line-height: 22px; color: var(--gray-900);
}
.select .ic { position: absolute; left: 12px; width: 16px; height: 16px; pointer-events: none; }
.select:focus-within { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-100); }
.view-toggle { display: flex; border: 1px solid var(--gray-300); border-radius: 8px; overflow: hidden; }
.view-toggle button { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: var(--white); color: var(--gray-700); }
.view-toggle button.is-active { background: var(--primary-50); color: var(--primary); }
.filters {
  position: fixed; top: 0; bottom: 0; right: 0; z-index: 80;
  width: min(320px, 88vw); overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column;
  padding: 16px; background: var(--white);
  box-shadow: -12px 0 32px rgba(33, 37, 41, .16);
  transform: translateX(105%); transition: transform .25s ease;
}
.filters.is-open { transform: none; }
.filters.is-open + .filters__backdrop { opacity: 1; visibility: visible; }
body.has-drawer { overflow: hidden; }
.switch { display: inline-flex; align-items: center; gap: 8px; height: 44px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch input:checked + .switch__track { background: var(--primary); }
.switch input:checked + .switch__track .switch__dot { transform: translateX(-16px); }
.switch input:focus-visible + .switch__track { box-shadow: 0 0 0 3px var(--primary-100); }
.check { display: flex; align-items: center; gap: 8px; height: 44px; cursor: pointer; }
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check input:checked + .check__box { background: var(--primary); border-color: var(--primary); }
.check input:checked + .check__box .ic { opacity: 1; }
.check input:focus-visible + .check__box { box-shadow: 0 0 0 3px var(--primary-100); }
.price-range { display: flex; gap: 8px; padding-top: 4px; }
@media (min-width: 1200px) {
  .filters {
    position: static; z-index: auto; transform: none; transition: none; overflow: visible;
    flex: 0 0 280px; width: 280px;
    border: 1px solid var(--gray-300); border-radius: 12px; box-shadow: none;
  }
  .toolbar { min-height: 38px; }
}

/* ==========================================================================
   Toolbar & filter panel — elements
   ========================================================================== */
.toolbar__count { font-weight: 500; font-size: 13px; line-height: 22px; color: var(--gray-700); white-space: nowrap; }
.toolbar__tools { display: flex; align-items: center; gap: 8px; }
.toolbar__sort-label { font-weight: 400; font-size: 13px; line-height: 22px; color: var(--gray-600); }
.toolbar__filter { color: var(--primary); }
.filters__backdrop { position: fixed; inset: 0; z-index: 70; background: rgba(33, 37, 41, .4); opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; }
.filters__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 26px; }
.filters__title { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 16px; line-height: 26px; color: var(--gray-900); }
.filters__title .ic { width: 18px; height: 18px; }
.filters__clear { margin-inline-start: auto; font-weight: 500; font-size: 12px; line-height: 20px; color: var(--primary); }
.filters__clear:hover { text-decoration: underline; }
.filters__close .ic { transform: rotate(45deg); }
.filters__apply { position: sticky; bottom: 0; margin-top: auto; }
.filters__group { padding: 12px 0; border-bottom: 1px solid var(--gray-300); }
.filters__group--switch { padding: 12px 0; }
.filters__gtitle {
  display: flex; align-items: center; justify-content: space-between; padding-bottom: 4px;
  font-weight: 700; font-size: 14px; line-height: 24px; color: var(--gray-900);
  list-style: none; cursor: pointer; user-select: none;
}
.filters__gtitle::-webkit-details-marker { display: none; }
.filters__gtitle .ic { width: 16px; height: 16px; color: var(--gray-700); transition: transform .2s; }
.filters__group:not([open]) .filters__gtitle { padding-bottom: 0; }
.filters__group:not([open]) .filters__gtitle .ic { transform: rotate(90deg); }
.switch__track {
  display: flex; align-items: center; justify-content: flex-start;
  width: 40px; height: 24px; padding: 3px; border-radius: 999px; background: var(--gray-400);
  transition: background-color .2s;
}
.switch__dot { width: 18px; height: 18px; border-radius: 50%; background: var(--white); box-shadow: 0 1px 2px rgba(33, 37, 41, .2); transition: transform .2s; }
.switch__label { font-weight: 400; font-size: 14px; line-height: 24px; color: var(--gray-900); }
.check__box {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 20px; height: 20px; border: 2px solid var(--gray-500); border-radius: 4px; background: var(--white); color: var(--white);
}
.check__box .ic { width: 14px; height: 14px; stroke-width: 3; opacity: 0; }
.check__label { font-weight: 400; font-size: 14px; line-height: 24px; color: var(--gray-900); }
.check__count { margin-inline-start: auto; font-weight: 400; font-size: 12px; line-height: 20px; color: var(--gray-600); }
.price-range__field { display: flex; align-items: center; flex: 1 1 0; min-width: 0; height: 36px; padding: 0 8px; border: 1px solid var(--gray-500); border-radius: 8px; }
.price-range__field input { width: 100%; border: 0; outline: 0; padding: 0; background: none; font-size: 12px; line-height: 20px; color: var(--gray-900); text-align: right; }
.price-range__field input::placeholder { color: var(--gray-600); opacity: 1; }
.price-range__field:focus-within { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-100); }
@media (min-width: 1200px) {
  .filters__backdrop { display: none; }
  .toolbar__count { font-size: 14px; line-height: 24px; }
  .toolbar__tools { gap: 12px; }
}

/* ==========================================================================
   Quantity stepper & alert
   ========================================================================== */
.alert { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; border-radius: 8px; }
.alert--info { background: var(--primary-50); color: var(--primary); }
.alert--success { background: var(--success-50); color: var(--success-900); }
.alert__icon { padding-top: 3px; flex: none; }
.alert__icon .ic { width: 20px; height: 20px; }
.alert__body { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.alert__title { font-weight: 700; font-size: 14px; line-height: 24px; }
.alert__text { font-weight: 400; font-size: 13px; line-height: 22px; }
.stepper__btn { display: flex; align-items: center; justify-content: center; width: 40px; height: 42px; }
.stepper__plus { color: var(--primary); }
.stepper__minus { color: var(--danger-900); }
.stepper .ic--minus, .stepper.is-many .ic--trash { display: none; }
.stepper.is-many .ic--minus { display: block; }
.stepper.is-many .stepper__minus { color: var(--primary); }
.stepper__val { width: 32px; text-align: center; font-weight: 700; font-size: 14px; line-height: 24px; color: var(--gray-900); }
.stepper {
  display: flex; align-items: center; flex: none;
  height: 44px; border: 1px solid var(--gray-500); border-radius: 8px; background: var(--white);
}


/* Quality badge */
.quality {
  display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-radius: 4px;
  background: var(--primary-50); color: var(--primary-900); font-weight: 700; font-size: 12px; line-height: 20px; white-space: nowrap;
}
.quality .ic { width: 14px; height: 14px; }
.quality--alt { background: var(--success-50); color: var(--success-900); }

/* ==========================================================================
   Stock badge
   ========================================================================== */
.stock-badge { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-radius: 4px; font-weight: 700; font-size: 12px; line-height: 20px; white-space: nowrap; }
.stock-badge i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.stock-badge--in { background: var(--success-50); color: var(--success-900); }
.stock-badge--low { background: var(--warning-50); color: var(--warning-900); }
.stock-badge--out { background: var(--gray-200); color: var(--gray-700); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ==========================================================================
   App bar (mobile flow pages) · data table · stock by warehouse
   ========================================================================== */
.appbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 4px;
  height: 56px; padding: 0 8px;
  background: var(--white); border-bottom: 1px solid var(--gray-300);
}
.appbar__title { flex: 1 1 auto; min-width: 0; font-weight: 700; font-size: 16px; line-height: 26px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tbl { border: 1px solid var(--gray-300); border-radius: 12px; overflow: hidden; }
.tbl__head, .tbl__row { display: flex; align-items: center; gap: 12px; }
.tbl__head { padding: 8px 12px; background: var(--gray-200); font-weight: 700; font-size: 13px; line-height: 22px; color: var(--gray-700); }
.tbl__row { padding: 10px 12px; border-top: 1px solid var(--gray-300); font-size: 13px; line-height: 22px; color: var(--gray-900); }
.tbl__row.is-mine { background: var(--primary-50); }
.tbl__row[hidden] { display: none; }
.stock { display: flex; flex-direction: column; gap: 8px; }
.stock__head { display: flex; align-items: center; justify-content: space-between; }
.stock__title { font-weight: 700; font-size: 16px; line-height: 26px; color: var(--gray-900); }
.stock__city { display: flex; align-items: center; gap: 4px; font-weight: 500; font-size: 12px; line-height: 20px; color: var(--primary); }
.stock__city .ic { width: 14px; height: 14px; }
.stock .tbl { background: var(--white); }
.c-wh { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 6px; }
.c-qty { flex: 0 0 110px; display: flex; align-items: center; }
.c-ship { flex: 0 0 150px; }
b.c-qty, b.c-ship, .c-wh b { font-weight: 700; }
.c-ship.is-today { color: var(--success-900); }
.stock__note { display: flex; align-items: center; gap: 4px; font-weight: 400; font-size: 12px; line-height: 20px; color: var(--gray-600); }
.stock__note .ic { width: 14px; height: 14px; }
@media (min-width: 1200px) {
  .appbar { display: none; }
  .tbl__head .c-model { font-weight: 700; }
}

/* ==========================================================================
   Order summary · radio
   ========================================================================== */
.radio {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 20px; height: 20px; border: 2px solid var(--gray-500); border-radius: 999px; background: var(--white);
}
.radio::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--primary); transform: scale(0); transition: transform .15s; }
.summary {
  display: flex; flex-direction: column; gap: 12px; padding: 20px;
  border: 1px solid var(--gray-300); border-radius: 12px; background: var(--white); box-shadow: var(--shadow-xs);
}
.summary__title { font-weight: 700; font-size: 16px; line-height: 26px; color: var(--gray-900); }
.summary__rows { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.summary__row { display: flex; align-items: center; justify-content: space-between; font-size: 13px; line-height: 22px; }
.summary__row dt { font-weight: 400; color: var(--gray-700); }
.summary__row dd { margin: 0; font-weight: 700; color: var(--gray-900); }
.summary__row--discount dt, .summary__row--discount dd { color: var(--danger); }
.summary__divider { height: 1px; margin: 0; border: 0; background: var(--gray-300); }
.summary__total { display: flex; align-items: center; justify-content: space-between; }
.summary__total span { font-weight: 700; font-size: 14px; line-height: 24px; color: var(--gray-700); }
.summary__total b { font-weight: 900; font-size: 18px; line-height: 28px; color: var(--gray-900); }
.summary__note { display: flex; align-items: center; gap: 6px; font-weight: 400; font-size: 12px; line-height: 20px; color: var(--gray-600); }
.summary__note .ic { width: 16px; height: 16px; }

/* ==========================================================================
   Text input (label + box + helper)
   ========================================================================== */
.inp { display: flex; flex-direction: column; gap: 4px; align-self: stretch; }
.inp__label { font-weight: 500; font-size: 13px; line-height: 22px; color: var(--gray-700); }
.inp__box {
  height: 44px; padding: 0 12px; border: 1px solid var(--gray-500); border-radius: 8px; background: var(--white);
  font-size: 14px; line-height: 24px; color: var(--gray-900); text-align: left; outline: 0;
}
.inp__box::placeholder { color: var(--gray-600); opacity: 1; }
.inp__box:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-100); }

/* ==========================================================================
   Flow pages — checkout, order tracking, credit payment, pre-list
   Mobile (Figma): app bar replaces the header, sticky CTA at the bottom.
   Desktop (no Figma frame except pre-list): header + title + main/aside layout like the cart.
   ========================================================================== */
@media (max-width: 1199.98px) {
  .page--app .hdr { display: none; }
  .page--cta { padding-bottom: 77px; }
  .page--cta ~ .bnav { display: none; }
}
.flow { display: flex; flex-direction: column; gap: 10px; padding-top: 16px; padding-bottom: 24px; }
.flow__title { font-weight: 700; font-size: 28px; line-height: 42px; color: var(--gray-900); }
.flow__layout { display: flex; flex-direction: column; gap: 10px; }
.flow__main, .flow__aside { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.flow__h { font-weight: 700; font-size: 16px; line-height: 26px; color: var(--gray-900); }

/* Wizard steps (سبد › ارسال › پرداخت) */
.wsteps { display: flex; gap: 6px; }
.wstep { display: flex; flex-direction: column; gap: 4px; flex: 1 1 0; min-width: 0; font-weight: 500; font-size: 10px; line-height: 16px; color: var(--gray-600); white-space: nowrap; }
.wstep::before { content: ""; height: 4px; border-radius: 4px; background: var(--gray-300); }
.wstep.is-done, .wstep.is-current { color: var(--primary); }
.wstep.is-done::before, .wstep.is-current::before { background: var(--primary); }
.wstep.is-current { font-weight: 700; }

/* Card */
.card { display: flex; flex-direction: column; gap: 8px; padding: 16px; border: 1px solid var(--gray-300); border-radius: 12px; background: var(--white); }
.card__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.card__title { font-weight: 700; font-size: 14px; line-height: 24px; color: var(--gray-900); }
.card__text { font-weight: 400; font-size: 13px; line-height: 22px; color: var(--gray-700); }

/* Selectable option row (radio / switch) */
.opt {
  position: relative; display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border: 1px solid var(--gray-300); border-radius: 8px; background: var(--white); cursor: pointer;
}
.opt:has(input:checked):not(.opt--switch) { border: 2px solid var(--primary); background: var(--primary-50); }
.opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.opt input:checked + .radio { border-color: var(--primary); }
.opt input:checked + .radio::after { transform: none; }
.opt input:focus-visible + .radio { box-shadow: 0 0 0 3px var(--primary-100); }
.opt__label { display: flex; align-items: center; min-height: 44px; font-weight: 400; font-size: 14px; line-height: 24px; color: var(--gray-900); }
.opt__meta { margin-inline-start: auto; font-weight: 500; font-size: 12px; line-height: 20px; color: var(--gray-700); white-space: nowrap; }
.opt--switch { padding: 4px 12px; }
.opts-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 0 24px; }
.opts-inline .opt { padding: 0; border: 0 !important; background: none !important; }
.opts-inline .opt__meta { margin: 0; font-weight: 400; color: var(--gray-600); }

/* Input helper, dropzone, uploaded file row */
.inp__help { font-weight: 400; font-size: 12px; line-height: 20px; color: var(--gray-600); }
.dropzone {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px;
  border: 1px dashed var(--gray-500); border-radius: 12px; background: var(--white); text-align: center; cursor: pointer;
}
.dropzone:hover, .dropzone.is-over { border-color: var(--primary); background: var(--primary-50); }
.dropzone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dropzone > .ic { width: 28px; height: 28px; color: var(--primary); stroke-width: 1.5; }
.dropzone__title { font-weight: 700; font-size: 13px; line-height: 22px; color: var(--gray-900); }
.dropzone__hint { font-weight: 400; font-size: 12px; line-height: 20px; color: var(--gray-600); }
.file-row { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 8px; background: var(--gray-200); }
.file-row .ic { flex: none; width: 18px; height: 18px; color: var(--gray-700); }
.file-row__name { flex: 1 1 auto; min-width: 0; font-weight: 500; font-size: 12px; line-height: 20px; color: var(--gray-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-row .ic--ok { color: var(--success-900); }

/* Sticky CTA (mobile) */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--white); border-top: 1px solid var(--gray-300);
}

/* Order tracker — vertical timeline (mobile) / horizontal steps (desktop) */
.track { display: flex; flex-direction: column; gap: 12px; }
.track__step { display: flex; align-items: flex-start; gap: 12px; }
.track__mark { display: flex; flex-direction: column; align-items: center; flex: none; }
.track__mark i { display: block; width: 2px; height: 28px; background: var(--gray-300); }
.track__mark i:first-child { display: none; }
.track__step:last-child .track__mark i { display: none; }
.track__step.is-done .track__mark i:last-child { background: var(--primary); }
.track__dot {
  display: flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px; border-radius: 999px;
  background: var(--gray-200); color: var(--gray-700); font-weight: 700; font-size: 12px; line-height: 20px;
}
.track__dot .ic { width: 14px; height: 14px; stroke-width: 2.5; }
.track__step.is-done .track__dot { background: var(--primary); color: var(--white); }
.track__step.is-current .track__dot { background: var(--white); border: 2px solid var(--primary); color: var(--primary); }
.track__text { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.track__label { font-weight: 400; font-size: 14px; line-height: 24px; color: var(--gray-600); }
.track__step.is-done .track__label { color: var(--gray-900); }
.track__step.is-current .track__label { font-weight: 700; color: var(--gray-900); }
.track__meta { font-weight: 400; font-size: 12px; line-height: 20px; color: var(--gray-700); }
.track__step.is-current .track__meta { color: var(--primary); }
.tracker { gap: 12px; }
.tracker__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tracker__title { font-weight: 700; font-size: 16px; line-height: 26px; color: var(--gray-900); }
.tracker__meta { font-weight: 400; font-size: 12px; line-height: 20px; color: var(--gray-600); }

/* Numbered "how it works" list */
.how { display: flex; flex-direction: column; gap: 14px; }
.how__step { display: flex; align-items: flex-start; gap: 12px; }
.how__num {
  display: flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px; border-radius: 999px;
  background: var(--primary-50); color: var(--primary); font-weight: 700; font-size: 12px; line-height: 20px;
}
.how__text { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.how__text b { font-weight: 700; font-size: 14px; line-height: 24px; color: var(--gray-900); }
.how__text span { font-weight: 400; font-size: 12px; line-height: 20px; color: var(--gray-700); }

/* Two equal buttons */
.btn-pair { display: flex; gap: 8px; }
.btn-pair .btn { flex: 1 1 0; min-width: 0; padding-inline: 12px; }
.btn--muted { background: var(--gray-200); color: var(--gray-600); cursor: not-allowed; }

@media (min-width: 1200px) {
  .flow { gap: 16px; padding-top: 24px; padding-bottom: 64px; }
  .flow__layout { flex-direction: row; align-items: flex-start; gap: 32px; }
  .flow__main { flex: 1 1 auto; gap: 12px; }
  .flow__aside { flex: 0 0 360px; gap: 16px; position: sticky; top: 24px; }
  .wsteps { gap: 12px; }
  .wstep { gap: 6px; font-size: 13px; line-height: 22px; }
  .card { padding: 20px; gap: 12px; }
  .card__title { font-size: 16px; line-height: 26px; }
  .sticky-cta { display: none; }
  /* horizontal tracker */
  .track { flex-direction: row; gap: 0; }
  .track__step { flex: 1 1 0; flex-direction: column; align-items: center; gap: 6px; min-width: 0; text-align: center; }
  .track__mark { flex-direction: row; align-self: stretch; }
  .track__mark i, .track__mark i:first-child, .track__step:last-child .track__mark i { display: block; flex: 1 1 0; width: auto; height: 2px; }
  .track__step:first-child .track__mark i:first-child, .track__step:last-child .track__mark i:last-child { visibility: hidden; }
  .track__step.is-done .track__mark i, .track__step.is-current .track__mark i:first-child { background: var(--primary); }
  .track__dot { width: 32px; height: 32px; font-size: 13px; line-height: 22px; }
  .track__dot .ic { width: 16px; height: 16px; }
  .track__text { align-items: center; gap: 6px; }
  .track__label { font-size: 12px; line-height: 20px; white-space: nowrap; }
  .track__step.is-done .track__label { color: var(--gray-700); }
  .track__meta { font-size: 10px; line-height: 16px; color: var(--gray-600); }
  .tracker { gap: 16px; }
}
.card__list { display: flex; flex-direction: column; gap: 8px; }

/* ==========================================================================
   Tabs (product page, panels)
   ========================================================================== */
.tabs { display: flex; gap: 20px; padding: 0 16px; border-bottom: 1px solid var(--gray-300); }
.tab {
  position: relative; flex: none; padding: 8px 0 10px;
  font-weight: 500; font-size: 14px; line-height: 24px; color: var(--gray-700); white-space: nowrap;
}
.tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; }
.tab.is-active { font-weight: 700; color: var(--primary); }
.tab.is-active::after { background: var(--primary); }
.tab:hover { color: var(--primary); }
@media (min-width: 600px) {
  .tabs { padding-inline: var(--gutter); }
}
@media (min-width: 1200px) {
  .tabs { gap: 24px; padding: 0; overflow: visible; }
}

/* ==========================================================================
   Input with icon (ltr codes) · success state
   ========================================================================== */
.inp__wrap { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; border: 1px solid var(--gray-500); border-radius: 8px; background: var(--white); direction: ltr; }
.inp__wrap:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-100); }
.inp__wrap input { flex: 1 1 auto; min-width: 0; padding: 0; border: 0; outline: 0; background: none; font-size: 14px; line-height: 24px; color: var(--gray-900); text-align: left; }
.inp__wrap .ic { flex: none; width: 18px; height: 18px; color: var(--success-900); }
.inp--ok .inp__wrap { border-color: var(--success-900); }
.inp--ok .inp__help { color: var(--success-900); }

/* ==========================================================================
   Skeleton (loading placeholder)
   ========================================================================== */
.skel { display: flex; flex-direction: column; overflow: hidden; background: var(--white); border: 1px solid var(--gray-300); border-radius: 12px; }
.skel i { display: block; background: var(--gray-200); border-radius: 6px; animation: skel 1.4s ease-in-out infinite; }
.skel__img { height: 200px; border-radius: 0 !important; }
.skel__body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px; }
.skel__row { display: flex; align-items: center; justify-content: space-between; align-self: stretch; }

/* ==========================================================================
   Select · input error state
   ========================================================================== */
.inp--err .inp__wrap { border-color: var(--danger-900); background: #ffedeb; }
.inp--err .inp__wrap input { color: var(--danger-900); }
.inp--err .inp__wrap .ic { color: var(--danger-900); }
.inp--err .inp__help { color: var(--danger-900); }
.sel { position: relative; display: flex; align-items: center; height: 44px; border: 1px solid var(--gray-500); border-radius: 8px; background: var(--white); }
.sel select { flex: 1 1 auto; height: 100%; min-width: 0; padding: 0 12px 0 38px; border: 0; outline: 0; background: none; appearance: none; font: inherit; font-size: 14px; line-height: 24px; color: var(--gray-900); cursor: pointer; }
.sel select:invalid { color: var(--gray-600); }
.sel .ic { position: absolute; left: 12px; width: 18px; height: 18px; color: var(--gray-900); pointer-events: none; }
.sel:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-100); }

@keyframes skel { 50% { opacity: .55; } }

.inp:not(.inp--err) .inp__wrap .ic--err { display: none; }
@keyframes skel { 50% { opacity: .55; } }

/* ==========================================================================
   Interaction states (Figma «Button»: default · hover · focus · pressed · loading · disabled)
   ========================================================================== */
.btn:focus-visible, .icon-btn:focus-visible, .round-btn:focus-visible, .chip:focus-visible, .tab:focus-visible,
.pnav:focus-visible, .bnav__item:focus-visible, .link:focus-visible, .more:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 2px;
}
.btn--primary:active { background: var(--primary-800); }
.btn--accent:active { background: var(--accent-press); }
.btn--outline:active, .btn--text:active { background: var(--primary-100); }
.btn--ghost:active, .icon-btn--ghost:active { background: var(--primary-300); }
.btn:disabled, .btn.is-disabled, .icon-btn:disabled {
  background: var(--gray-200) !important; border-color: var(--gray-200) !important; color: var(--gray-600) !important;
  box-shadow: none !important; cursor: not-allowed;
}
.btn--text:disabled, .btn--text.is-disabled { background: none !important; }
.btn.is-loading { pointer-events: none; }
.btn.is-loading .ic { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn.is-loading .ic, .skel i { animation: none; } }

/* Quality levels (Figma «QualityBadge»: اصلی/OEM · جایگزین معتبر · اقتصادی · استوک) */
.quality--eco { background: var(--accent-50); color: var(--accent-900); }
.quality--used { background: var(--gray-200); color: var(--gray-700); }

/* Alert — error tone; input — disabled */
.alert--error { background: var(--danger-50); color: var(--danger-900); }
.inp__box:disabled, .inp__wrap:has(input:disabled), .sel:has(select:disabled) { background: var(--gray-200); border-color: var(--gray-300); color: var(--gray-600); cursor: not-allowed; }
.inp--err .inp__box { border-color: var(--danger-900); background: var(--danger-50); color: var(--danger-900); }

/* EntryPath — three ways in (model · symptom · photo); mobile: horizontal card */
.entries { display: grid; gap: 12px; }
.entry { display: flex; align-items: flex-start; gap: 12px; padding: 16px; border: 1px solid var(--gray-300); border-radius: 12px; background: var(--white); box-shadow: var(--shadow-xs); }
.entry--featured { border-color: var(--primary); box-shadow: 0 2px 8px rgba(33, 37, 41, .1); }
.entry__ico { order: 1; display: flex; align-items: center; justify-content: center; flex: none; width: 48px; height: 48px; border-radius: 12px; background: var(--primary-50); color: var(--primary); }
.entry__ico .ic { width: 24px; height: 24px; }
.entry__body { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; flex: 1 1 auto; min-width: 0; }
.entry__title { font-weight: 700; font-size: 16px; line-height: 26px; color: var(--gray-900); }
.entry__desc { font-weight: 400; font-size: 13px; line-height: 22px; color: var(--gray-700); }
.entry .btn { height: 36px; padding: 0 12px; font-size: 13px; line-height: 22px; }
@media (min-width: 900px) {
  .entries { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .entry { flex-direction: column; gap: 8px; padding: 20px; }
  .entry__ico { order: 0; }
  .entry__body { gap: 8px; }
  .entry .btn { height: 44px; padding: 0 20px; font-size: 14px; line-height: 24px; margin-top: 4px; }
}