@charset "UTF-8";
/* ==========================================================================
   کباب ممتاز آرش — سیستم طراحی
   مرجع قواعد: docs/DESIGN.md
   بدون build step. بدون وابستگی بیرونی. فونت‌ها روی همین سرور.
   ========================================================================== */

/* ── فونت ──────────────────────────────────────────────────────────────
   هر دو متغیرند: یک فایل، تمام وزن‌ها ۱۰۰ تا ۹۰۰.
   گوگل‌فونت عمداً استفاده نشده؛ در ایران نامطمئن است.               */
@font-face {
  font-family: 'Estedad';
  src: url('../fonts/estedad-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('../fonts/vazirmatn-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ── توکن‌ها ─────────────────────────────────────────────────────────── */
:root {
  color-scheme: light dark;

  --bg:          #fbfaf5;
  --bg-tint:     #f7f5ec;
  --surface:     #ffffff;
  --surface-2:   #f4f2e9;
  --ink:         #1c2119;
  --ink-2:       #5a6353;
  --ink-3:       #8b9384;
  --line:        #e4e2d6;
  --line-soft:   #eeece2;

  --accent:      #4a7c3f;
  --accent-hi:   #3d6834;
  --accent-soft: #eaf2e5;
  --on-accent:   #ffffff;

  --ok:   #3f7d4f;
  --warn: #b4802a;
  --bad:  #a63d33;
  --ok-soft:   #e7f2e9;
  --warn-soft: #f8efdc;
  --bad-soft:  #f7e7e5;

  --s1: .25rem;  --s2: .5rem;   --s3: .75rem;  --s4: 1rem;
  --s5: 1.5rem;  --s6: 2rem;    --s7: 3rem;    --s8: 4rem;
  --s9: 6rem;    --s10: 8rem;

  --r-shell:  20px;
  --r-core:   14px;
  --r-input:  12px;
  --r-img:    12px;
  --r-pill:   999px;

  --shadow-1: 0 1px 2px rgb(28 33 25 / .04), 0 2px 8px rgb(28 33 25 / .04);
  --shadow-2: 0 2px 6px rgb(28 33 25 / .05), 0 12px 32px rgb(28 33 25 / .07);
  --shadow-lift: 0 8px 24px rgb(74 124 63 / .16);

  --ease: cubic-bezier(.32, .72, 0, 1);
  --t-fast: 180ms;
  --t-mid:  420ms;
  --t-slow: 700ms;

  --container: min(1200px, 100% - 2rem);
  --header-h: 64px;
  --dock-h: 68px;

  --font-display: 'Estedad', 'Vazirmatn', Tahoma, system-ui, sans-serif;
  --font-body:    'Vazirmatn', 'Estedad', Tahoma, system-ui, sans-serif;
}

/* حالت تاریک: فقط توکن‌ها عوض می‌شوند، هیچ قاعده‌ای تکرار نمی‌شود.
   قفل تم: کل صفحه یک حالت است، هیچ بخشی وسط اسکرول معکوس نمی‌شود.   */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg:        #12140f;
    --bg-tint:   #171a13;
    --surface:   #1a1d17;
    --surface-2: #22261e;
    --ink:       #eef0e8;
    --ink-2:     #a9b3a2;
    --ink-3:     #727d6c;
    --line:      #2c3128;
    --line-soft: #242920;

    --accent:      #7cb36a;
    --accent-hi:   #8fc47c;
    --accent-soft: #1e2a19;
    --on-accent:   #11170e;

    --ok-soft:   #18271b;
    --warn-soft: #2a2214;
    --bad-soft:  #2b1815;

    --shadow-1: 0 1px 2px rgb(0 0 0 / .3), 0 2px 8px rgb(0 0 0 / .24);
    --shadow-2: 0 2px 6px rgb(0 0 0 / .34), 0 12px 32px rgb(0 0 0 / .4);
    --shadow-lift: 0 8px 24px rgb(0 0 0 / .5);
  }
}
:root[data-theme='dark'] {
  --bg:        #12140f;
  --bg-tint:   #171a13;
  --surface:   #1a1d17;
  --surface-2: #22261e;
  --ink:       #eef0e8;
  --ink-2:     #a9b3a2;
  --ink-3:     #727d6c;
  --line:      #2c3128;
  --line-soft: #242920;

  --accent:      #7cb36a;
  --accent-hi:   #8fc47c;
  --accent-soft: #1e2a19;
  --on-accent:   #11170e;

  --ok-soft:   #18271b;
  --warn-soft: #2a2214;
  --bad-soft:  #2b1815;

  --shadow-1: 0 1px 2px rgb(0 0 0 / .3), 0 2px 8px rgb(0 0 0 / .24);
  --shadow-2: 0 2px 6px rgb(0 0 0 / .34), 0 12px 32px rgb(0 0 0 / .4);
  --shadow-lift: 0 8px 24px rgb(0 0 0 / .5);
}

/* ── پایه ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: .975rem;
  line-height: 1.75;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  margin: 0 0 var(--s3);
  color: var(--ink);
  text-wrap: balance;
}
h1 { font-size: clamp(1.6rem, 5vw, 2.5rem);  font-weight: 700; line-height: 1.2; letter-spacing: -.015em; }
h2 { font-size: clamp(1.3rem, 4vw, 1.85rem); font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }
h3 { font-size: 1.15rem; font-weight: 600; line-height: 1.4; }

p { margin: 0 0 var(--s4); max-width: 65ch; }

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

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

hr { border: 0; border-top: 1px solid var(--line); margin: var(--s6) 0; }

/* حلقه فوکوس روی همه چیز. حذفش بدون جایگزین ممنوع است. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection { background: var(--accent-soft); color: var(--ink); }

/* عدد و کد سفارش داخل متن فارسی نباید جای علائم را به هم بریزد */
.ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── چیدمان ────────────────────────────────────────────────────────── */
.container { width: var(--container); margin-inline: auto; }

.section { padding-block: var(--s7); }
.section--lg { padding-block: var(--s7); }
@media (min-width: 768px) {
  .section    { padding-block: var(--s8); }
  .section--lg { padding-block: var(--s9); }
}

.section__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s4); margin-bottom: var(--s5); flex-wrap: wrap;
}
.section__head h2 { margin: 0; }
.section__head a { font-size: .875rem; font-weight: 500; white-space: nowrap; }

.stack   { display: grid; gap: var(--s4); }
.stack-2 { display: grid; gap: var(--s2); }
.row     { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.row--between { justify-content: space-between; }
.spacer  { flex: 1; }

.muted   { color: var(--ink-2); }
.dim     { color: var(--ink-3); }
.small   { font-size: .85rem; line-height: 1.6; }
.tiny    { font-size: .75rem; font-weight: 500; line-height: 1.5; }
.strong  { font-weight: 700; }
.center  { text-align: center; }
.nowrap  { white-space: nowrap; }

/* ── دکمه ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s2);
  min-height: 44px;                      /* هدف لمسی */
  padding: .7rem 1.35rem;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: .925rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;                   /* برچسب دکمه نباید بشکند */
  cursor: pointer;
  user-select: none;
  background: var(--surface-2);
  color: var(--ink);
  transition: background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}
.btn:hover { background: var(--line-soft); color: var(--ink); }
.btn:active { transform: scale(.97); }   /* فشار فیزیکی */
.btn[disabled], .btn.is-disabled {
  opacity: .5; pointer-events: none;
}

.btn--primary {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: var(--shadow-lift);
}
.btn--primary:hover { background: var(--accent-hi); color: var(--on-accent); }

.btn--ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--ink);
}
.btn--ghost:hover { background: var(--surface-2); border-color: var(--ink-3); }

.btn--quiet { background: transparent; color: var(--ink-2); padding-inline: .75rem; }
.btn--quiet:hover { background: var(--surface-2); color: var(--ink); }

.btn--danger { background: var(--bad-soft); color: var(--bad); }
.btn--danger:hover { background: var(--bad); color: #fff; }

.btn--sm  { min-height: 38px; padding: .45rem 1rem; font-size: .85rem; }
.btn--lg  { min-height: 52px; padding: .9rem 1.75rem; font-size: 1.02rem; }
.btn--full { width: 100%; }

/* آیکن انتهایی داخل قرص خودش می‌نشیند، نه لخت کنار متن */
.btn__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: var(--r-pill);
  background: rgb(255 255 255 / .18);
  margin-inline-start: -.4rem;
  transition: transform var(--t-fast) var(--ease);
}
.btn:hover .btn__icon { transform: translateX(-2px); } /* RTL: به چپ */
.btn--ghost .btn__icon, .btn--quiet .btn__icon { background: var(--surface-2); }

/* ── کارت دوقاب ────────────────────────────────────────────────────── */
.shell {
  background: var(--surface-2);
  border-radius: var(--r-shell);
  padding: 6px;
}
.shell__core {
  background: var(--surface);
  border-radius: var(--r-core);
  padding: var(--s4);
  height: 100%;
}

/* کارت ساده برای جاهایی که دوقاب بیش از حد است */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-core);
  padding: var(--s4);
}

/* ── نشان و چیپ ────────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: var(--s1);
  padding: .25rem .6rem;
  border-radius: var(--r-pill);
  font-size: .72rem; font-weight: 600; line-height: 1.6;
  background: var(--surface-2); color: var(--ink-2);
}
.badge--ok   { background: var(--ok-soft);   color: var(--ok); }
.badge--warn { background: var(--warn-soft); color: var(--warn); }
.badge--bad  { background: var(--bad-soft);  color: var(--bad); }
.badge--info { background: var(--accent-soft); color: var(--accent-hi); }
.badge--accent { background: var(--accent); color: var(--on-accent); }

/* نقطه فقط وقتی وضعیت واقعی را می‌گوید، نه به‌عنوان تزئین */
.dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; flex: none;
}
.dot--live { animation: pulse 2.4s var(--ease) infinite; }
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}

.chip {
  display: inline-flex; align-items: center; gap: var(--s2);
  min-height: 40px;
  padding: .45rem 1rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  font-size: .875rem; font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}
.chip:hover { border-color: var(--accent); color: var(--ink); }
.chip[aria-current='true'], .chip.is-active {
  background: var(--accent); border-color: var(--accent); color: var(--on-accent);
}

/* ── فرم ───────────────────────────────────────────────────────────── */
.field { display: grid; gap: var(--s2); margin-bottom: var(--s4); }
.field > label {
  font-size: .85rem; font-weight: 600; color: var(--ink);
}
.field__hint { font-size: .78rem; color: var(--ink-3); }
.field__error { font-size: .8rem; color: var(--bad); font-weight: 500; }

.input, .select, .textarea {
  width: 100%;
  min-height: 46px;
  padding: .65rem .9rem;
  font-family: var(--font-body);
  font-size: .95rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-input);
  transition: border-color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}
.textarea { min-height: 110px; resize: vertical; line-height: 1.7; }
.input::placeholder, .textarea::placeholder { color: var(--ink-3); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.input[aria-invalid='true'] { border-color: var(--bad); }

.select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%),
                    linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: left 1rem top 55%, left .7rem top 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-inline-start: 2rem;
}

/* ورودی عددی: اعداد لاتین لازم است تا کیبورد موبایل درست باز شود */
.input--num { direction: ltr; text-align: right; font-variant-numeric: tabular-nums; }

.check {
  display: flex; align-items: flex-start; gap: var(--s3);
  padding: var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r-input);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.check:hover { border-color: var(--ink-3); }
.check input { margin-top: .35rem; accent-color: var(--accent); width: 18px; height: 18px; flex: none; }
.check:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }

/* ── پیام‌ها ───────────────────────────────────────────────────────── */
.notice {
  display: flex; gap: var(--s3); align-items: flex-start;
  padding: var(--s3) var(--s4);
  border-radius: var(--r-input);
  font-size: .9rem;
  border: 1px solid transparent;
  margin-bottom: var(--s4);
}
.notice--success { background: var(--ok-soft);   color: var(--ok);   border-color: color-mix(in srgb, var(--ok) 22%, transparent); }
.notice--error   { background: var(--bad-soft);  color: var(--bad);  border-color: color-mix(in srgb, var(--bad) 22%, transparent); }
.notice--warn    { background: var(--warn-soft); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 22%, transparent); }
.notice--info    { background: var(--accent-soft); color: var(--accent-hi); border-color: color-mix(in srgb, var(--accent) 22%, transparent); }

/* توست فقط برای پیام گذرا */
.toasts {
  position: fixed; inset-block-end: calc(var(--dock-h) + var(--s4));
  inset-inline: var(--s4); z-index: 60;
  display: grid; gap: var(--s2); justify-items: center;
  pointer-events: none;
}
@media (min-width: 768px) {
  .toasts { inset-block-end: var(--s5); inset-inline-start: var(--s5); inset-inline-end: auto; justify-items: start; }
}
.toast {
  pointer-events: auto;
  max-width: 420px;
  padding: .75rem 1.1rem;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--bg);
  font-size: .875rem; font-weight: 500;
  box-shadow: var(--shadow-2);
  animation: toast-in var(--t-mid) var(--ease);
}
.toast--error { background: var(--bad); color: #fff; }
.toast--success { background: var(--accent); color: var(--on-accent); }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(12px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

/* ── هدر ───────────────────────────────────────────────────────────── */
.header {
  position: sticky; top: 0; z-index: 40;
  height: var(--header-h);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border-bottom: 1px solid var(--line-soft);
}
.header__inner {
  height: 100%;
  display: flex; align-items: center; gap: var(--s4);
}
.brand { display: flex; align-items: center; gap: var(--s3); flex: none; }
.brand__mark {
  width: 38px; height: 38px; border-radius: 11px;
  background: var(--accent); color: var(--on-accent);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: 1.05rem;
  flex: none;
}
.brand__name {
  font-family: var(--font-display); font-weight: 700; font-size: 1.02rem;
  color: var(--ink); line-height: 1.2;
}
.brand__sub { font-size: .7rem; color: var(--ink-3); line-height: 1; }

.nav { display: none; gap: var(--s1); margin-inline-start: var(--s5); }
@media (min-width: 940px) { .nav { display: flex; } }
.nav a {
  padding: .5rem .8rem; border-radius: var(--r-pill);
  color: var(--ink-2); font-size: .9rem; font-weight: 500;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.nav a:hover { background: var(--surface-2); color: var(--ink); }
.nav a[aria-current='page'] { color: var(--accent); background: var(--accent-soft); }

.header__actions { margin-inline-start: auto; display: flex; align-items: center; gap: var(--s2); }

.icon-btn {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--ink-2);
  cursor: pointer; position: relative;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.icon-btn:hover { background: var(--surface-2); color: var(--ink); }
.icon-btn__count {
  position: absolute; inset-block-start: 4px; inset-inline-end: 2px;
  min-width: 19px; height: 19px; padding: 0 4px;
  border-radius: var(--r-pill);
  background: var(--accent); color: var(--on-accent);
  font-size: .68rem; font-weight: 700;
  display: grid; place-items: center;
  border: 2px solid var(--bg);
}
.icon-btn__count:empty, .icon-btn__count[hidden] { display: none; }

/* ── نوار پایین موبایل ─────────────────────────────────────────────── */
.dock {
  position: fixed; inset-block-end: 0; inset-inline: 0; z-index: 45;
  height: calc(var(--dock-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(4, 1fr);
}
@media (min-width: 940px) { .dock { display: none; } }
.dock a {
  display: grid; place-items: center; gap: 2px;
  color: var(--ink-3); font-size: .68rem; font-weight: 500;
  position: relative;
}
.dock a[aria-current='page'] { color: var(--accent); }
.dock__count {
  position: absolute; inset-block-start: 6px; inset-inline-end: calc(50% - 20px);
  min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: var(--r-pill); background: var(--accent); color: var(--on-accent);
  font-size: .62rem; font-weight: 700; display: grid; place-items: center;
}

/* روی موبایل زیر محتوا فضا باز می‌شود تا نوار پایین چیزی را نپوشاند */
@media (max-width: 939px) {
  body.has-dock { padding-bottom: calc(var(--dock-h) + env(safe-area-inset-bottom)); }
}

/* ── منوی کشویی موبایل ─────────────────────────────────────────────── */
.drawer {
  position: fixed; inset: 0; z-index: 70;
  visibility: hidden;
  overflow: hidden;            /* پنل بسته بیرون کادر است و نباید اسکرول افقی بسازد */
}
.drawer[data-open='true'] { visibility: visible; }
.drawer__veil {
  position: absolute; inset: 0;
  background: rgb(12 14 10 / .45);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity var(--t-mid) var(--ease);
}
.drawer[data-open='true'] .drawer__veil { opacity: 1; }
.drawer__panel {
  /* inline-start در RTL یعنی سمت راست، همان‌جا که دکمه‌ی منو هست.
     transform جهت‌آگاه نیست، پس مثبت همیشه یعنی حرکت به راست. */
  position: absolute; inset-block: 0; inset-inline-start: 0;
  width: min(340px, 86vw);
  background: var(--bg);
  border-inline-end: 1px solid var(--line);
  padding: var(--s5) var(--s4);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform var(--t-mid) var(--ease);
}
[dir='ltr'] .drawer__panel { transform: translateX(-100%); }
.drawer[data-open='true'] .drawer__panel { transform: none; }
.drawer__link {
  display: flex; align-items: center; gap: var(--s3);
  padding: .85rem var(--s3); border-radius: var(--r-input);
  color: var(--ink); font-weight: 500;
  transition: background var(--t-fast) var(--ease);
}
.drawer__link:hover { background: var(--surface-2); }

/* ── قهرمان صفحه اصلی ──────────────────────────────────────────────── */
/* چیدمان نامتقارن: متن سمت راست، تصویر سمت چپ. مرکزچین نیست. */
.hero {
  padding-block: var(--s6) var(--s7);
}
@media (min-width: 900px) {
  .hero {
    padding-block: var(--s7) var(--s8);   /* سقف pt در دسکتاپ رعایت شده */
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    align-items: center;
    gap: var(--s7);
  }
}
.hero__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 7vw, 3.4rem);
  font-weight: 800; line-height: 1.12; letter-spacing: -.02em;
  margin: 0 0 var(--s4);
}
.hero__title em {
  font-style: normal;
  color: var(--accent);                  /* تأکید با رنگ همان فونت */
}
.hero__lead {
  font-size: 1.05rem; color: var(--ink-2);
  max-width: 46ch; margin-bottom: var(--s5);
}
.hero__cta { display: flex; gap: var(--s3); flex-wrap: wrap; }

.hero__art {
  position: relative;
  border-radius: var(--r-shell);
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--surface-2);
  margin-top: var(--s6);
}
@media (min-width: 900px) { .hero__art { margin-top: 0; aspect-ratio: 4 / 3; } }
.hero__art img { width: 100%; height: 100%; object-fit: cover; }

/* ── وضعیت باز/بسته بودن ───────────────────────────────────────────── */
.openbar {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-radius: var(--r-pill);
  background: var(--ok-soft); color: var(--ok);
  font-size: .875rem; font-weight: 600;
  width: fit-content;
  margin-bottom: var(--s5);
}
.openbar--closed { background: var(--warn-soft); color: var(--warn); }

/* ── شبکه محصولات ──────────────────────────────────────────────────── */
.grid-products {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s4);
}
@media (min-width: 560px) { .grid-products { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .grid-products { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1160px){ .grid-products { grid-template-columns: repeat(4, 1fr); } }

.pcard {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-core);
  overflow: hidden;
  transition: border-color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.pcard:hover { border-color: var(--accent); box-shadow: var(--shadow-2); transform: translateY(-2px); }
.pcard.is-out { opacity: .58; }

.pcard__media {
  position: relative; aspect-ratio: 4 / 3;
  background: var(--surface-2); overflow: hidden;
}
.pcard__media img { width: 100%; height: 100%; object-fit: cover; }
.pcard__flags {
  position: absolute; inset-block-start: var(--s2); inset-inline-start: var(--s2);
  display: flex; gap: var(--s1); flex-wrap: wrap;
}
.pcard__fav {
  position: absolute; inset-block-start: var(--s2); inset-inline-end: var(--s2);
  width: 36px; height: 36px; border: 0; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--surface) 85%, transparent);
  backdrop-filter: blur(6px);
  color: var(--ink-3); cursor: pointer;
  display: grid; place-items: center;
  transition: color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.pcard__fav[aria-pressed='true'] { color: var(--bad); }
.pcard__fav:active { transform: scale(.9); }

.pcard__body { padding: var(--s3) var(--s4) var(--s4); display: flex; flex-direction: column; flex: 1; gap: var(--s2); }
.pcard__name { font-family: var(--font-display); font-size: 1rem; font-weight: 600; color: var(--ink); margin: 0; }
.pcard__desc { font-size: .82rem; color: var(--ink-3); margin: 0; line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pcard__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--s2); padding-top: var(--s2); }
.pcard__price { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; color: var(--ink); }
.pcard__was { font-size: .78rem; color: var(--ink-3); text-decoration: line-through; margin-inline-end: var(--s2); }

.pcard__add {
  width: 40px; height: 40px; flex: none;
  border: 0; border-radius: var(--r-pill);
  background: var(--accent); color: var(--on-accent);
  display: grid; place-items: center; cursor: pointer;
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.pcard__add:hover { background: var(--accent-hi); }
.pcard__add:active { transform: scale(.88); }

/* پله‌ی تعداد وقتی کالا در سبد است */
.stepper {
  display: inline-flex; align-items: center; gap: var(--s1);
  background: var(--accent-soft); border-radius: var(--r-pill); padding: 3px;
}
.stepper button {
  width: 34px; height: 34px; border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--accent-hi);
  font-size: 1.05rem; font-weight: 700; cursor: pointer; line-height: 1;
  display: grid; place-items: center;
  transition: background var(--t-fast) var(--ease);
}
.stepper button:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.stepper button:active { transform: scale(.9); }
.stepper output { min-width: 26px; text-align: center; font-weight: 700; font-size: .95rem; color: var(--accent-hi); }

/* ── دسته‌بندی افقی ────────────────────────────────────────────────── */
.catbar {
  display: flex; gap: var(--s2);
  overflow-x: auto; scroll-snap-type: x proximity;
  padding-block: var(--s2); margin-block-end: var(--s5);
  scrollbar-width: none;
}
.catbar::-webkit-scrollbar { display: none; }
.catbar > * { scroll-snap-align: start; flex: none; }

/* هدر چسبان دسته‌ها در صفحه منو */
.catbar--sticky {
  position: sticky; top: var(--header-h); z-index: 30;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  margin-inline: calc(var(--s4) * -1);
  padding-inline: var(--s4);
  border-bottom: 1px solid var(--line-soft);
}

/* ── سبد خرید ──────────────────────────────────────────────────────── */
/* اینجا کارت دوقاب استفاده نمی‌شود: فهرست متراکم، جداکننده مویی کافی است */
.cartline {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: var(--s3);
  padding-block: var(--s4);
  border-bottom: 1px solid var(--line-soft);
  align-items: start;
}
.cartline:last-child { border-bottom: 0; }
.cartline__img {
  width: 72px; aspect-ratio: 1; border-radius: var(--r-img);
  object-fit: cover; background: var(--surface-2);
}
.cartline__name { font-weight: 600; font-size: .95rem; margin: 0 0 2px; }
.cartline__opts { font-size: .78rem; color: var(--ink-3); margin: 0; }
.cartline__side { display: grid; gap: var(--s2); justify-items: end; }
.cartline__price { font-weight: 700; font-size: .95rem; white-space: nowrap; }

/* ── جمع فاکتور ────────────────────────────────────────────────────── */
.totals { display: grid; gap: var(--s3); }
.totals__row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--s3); font-size: .9rem; color: var(--ink-2);
}
.totals__row--free { color: var(--ok); font-weight: 600; }
.totals__row--off  { color: var(--accent); font-weight: 600; }
.totals__sep { border-top: 1px dashed var(--line); margin-block: var(--s1); }
.totals__final {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; color: var(--ink);
}

/* ستون کناری چسبان در دسکتاپ، تخته‌ی چسبان پایین در موبایل */
.checkout-grid { display: grid; gap: var(--s5); }
@media (min-width: 900px) {
  .checkout-grid { grid-template-columns: 1fr 360px; align-items: start; }
  .checkout-aside { position: sticky; top: calc(var(--header-h) + var(--s4)); }
}

.paybar {
  position: fixed; inset-block-end: 0; inset-inline: 0; z-index: 46;
  padding: var(--s3) var(--s4) calc(var(--s3) + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: var(--s4);
}
@media (min-width: 900px) { .paybar { display: none; } }
.paybar__sum { display: grid; gap: 0; line-height: 1.3; }
.paybar__sum b { font-family: var(--font-display); font-size: 1.05rem; }

/* ── نوار پیشرفت سفارش ─────────────────────────────────────────────── */
.track { display: grid; gap: var(--s5); }
.track__bar {
  height: 6px; border-radius: var(--r-pill);
  background: var(--surface-2); overflow: hidden;
}
.track__fill {
  height: 100%; border-radius: var(--r-pill);
  background: var(--accent);
  transition: width var(--t-slow) var(--ease);
}
.track__steps { display: grid; gap: var(--s4); }
.track__step {
  display: grid; grid-template-columns: 28px 1fr; gap: var(--s3);
  align-items: start; color: var(--ink-3);
}
.track__step b { display: block; font-size: .92rem; font-weight: 600; }
.track__step.is-done { color: var(--ink); }
.track__step.is-now  { color: var(--accent); }
.track__mark {
  width: 28px; height: 28px; border-radius: var(--r-pill);
  border: 2px solid currentColor; display: grid; place-items: center;
  font-size: .7rem; font-weight: 700;
}
.track__step.is-done .track__mark,
.track__step.is-now .track__mark { background: currentColor; color: var(--bg); border-color: currentColor; }

/* ── حالت خالی ─────────────────────────────────────────────────────── */
/* حالت خالی طراحی می‌شود، رها نمی‌شود. راه خروج همیشه هست. */
.empty {
  display: grid; justify-items: center; gap: var(--s4);
  padding: var(--s8) var(--s4);
  text-align: center;
}
.empty__art {
  width: 96px; height: 96px; border-radius: var(--r-shell);
  background: var(--surface-2); color: var(--ink-3);
  display: grid; place-items: center;
}
.empty h3 { margin: 0; }
.empty p { margin: 0; color: var(--ink-2); max-width: 38ch; }

/* ── اسکلت بارگذاری ────────────────────────────────────────────────── */
.skel {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--line-soft) 37%, var(--surface-2) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: var(--r-img);
}
@keyframes shimmer {
  from { background-position: 100% 0; }
  to   { background-position: 0 0; }
}
.skel--text { height: .8rem; margin-bottom: var(--s2); }
.skel--media { aspect-ratio: 4/3; }

/* ── ورود با کد پیامکی ─────────────────────────────────────────────── */
.auth {
  min-height: 100dvh;                    /* نه 100vh: نوار آدرس iOS */
  display: grid; place-items: center;
  padding: var(--s5) var(--s4);
}
.auth__box { width: min(420px, 100%); }
.otp {
  display: flex; gap: var(--s2); justify-content: center;
  direction: ltr;
}
.otp input {
  width: 48px; height: 56px;
  text-align: center; font-size: 1.35rem; font-weight: 700;
  font-family: var(--font-display);
  border: 1px solid var(--line); border-radius: var(--r-input);
  background: var(--surface); color: var(--ink);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.otp input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* ── جدول ساعت کاری ────────────────────────────────────────────────── */
.hours { display: grid; gap: 0; }
.hours__row {
  display: flex; justify-content: space-between; gap: var(--s4);
  padding-block: var(--s3);
  font-size: .9rem;
}
.hours__row + .hours__row { border-top: 1px solid var(--line-soft); }
.hours__row.is-today { color: var(--accent); font-weight: 600; }

/* ── ورود با اسکرول ────────────────────────────────────────────────── */
/* توجیه: ترتیب ورود، سلسله‌مراتب خواندن را می‌سازد. IntersectionObserver. */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ── پاورقی ────────────────────────────────────────────────────────── */
.footer {
  margin-top: var(--s8);
  padding-block: var(--s7) var(--s6);
  background: var(--bg-tint);
  border-top: 1px solid var(--line);
}
.footer__grid { display: grid; gap: var(--s6); }
@media (min-width: 760px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer h4 { font-size: .9rem; font-weight: 700; margin-bottom: var(--s3); color: var(--ink); }
.footer a { display: block; color: var(--ink-2); font-size: .875rem; padding-block: .3rem; }
.footer a:hover { color: var(--accent); }
.footer__bottom {
  margin-top: var(--s6); padding-top: var(--s4);
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: var(--s3); flex-wrap: wrap;
  font-size: .8rem; color: var(--ink-3);
}

/* ── صفحه‌بندی ─────────────────────────────────────────────────────── */
.pager { display: flex; gap: var(--s2); justify-content: center; margin-top: var(--s6); flex-wrap: wrap; }
.pager a, .pager span {
  min-width: 40px; height: 40px; padding-inline: var(--s2);
  display: grid; place-items: center;
  border-radius: var(--r-input); border: 1px solid var(--line);
  color: var(--ink-2); font-size: .875rem; font-weight: 500;
}
.pager a:hover { border-color: var(--accent); color: var(--accent); }
.pager .is-current { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* ── چاپ ───────────────────────────────────────────────────────────── */
@media print {
  .header, .dock, .footer, .paybar, .no-print { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .shell { background: none; padding: 0; }
  .shell__core { border: 1px solid #999; }
}

/* ── نمایش بر اساس عرض ─────────────────────────────────────────────
   روی موبایل هدر فقط برند و دکمه‌ی منو دارد. خانه، منو، سبد و حساب
   در نوار پایین‌اند؛ تکرارشان در هدر باعث می‌شد چهار دکمه از عرض
   ۳۹۰ پیکسل بیرون بزند و مرورگر موبایل کل صفحه را کوچک کند.       */
.only-wide { display: none !important; }
.only-narrow { display: inline-grid !important; }
@media (min-width: 940px) {
  .only-wide { display: inline-flex !important; }
  .icon-btn.only-wide { display: grid !important; }
  .only-narrow { display: none !important; }
}

/* نشانگر تعداد سبد وقتی خالی است نباید دیده شود.
   display:grid روی خودِ عنصر، پیش‌فرض [hidden] را می‌شکند، پس صریح
   خاموشش می‌کنیم. */
.dock__count:empty,
.dock__count[hidden],
.icon-btn__count:empty,
.icon-btn__count[hidden] { display: none !important; }

/* ساعت کاری: هر ساعت ایزوله، واژه‌های فارسی در جهت خودشان */
.hours__times { display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; }
.hours__shift { display: inline-flex; align-items: baseline; gap: .3rem; white-space: nowrap; }
.hours__shift bdi { font-variant-numeric: tabular-nums; }
.hours__to, .hours__sep { color: var(--ink-3); font-size: .85em; }

/* ── قاعده‌ی سراسری hidden ─────────────────────────────────────────
   هر قاعده‌ی کلاسی که display بدهد، بر [hidden] پیش‌فرض مرورگر غلبه
   می‌کند (هر دو یک وزن دارند و قاعده‌ی نویسنده برنده است). این باعث
   شد صفحه‌ی ورود بعد از ورود ناپدید نشود و نشانگر خالیِ سبد و
   ناوبری دیده شوند. یک قاعده‌ی سراسری همه را یک‌جا می‌بندد. */
[hidden] { display: none !important; }

/* ── جدول‌های پنل مدیریت ───────────────────────────────────────────
   یک الگو برای همه‌ی فهرست‌ها. روی موبایل جدول به کارت تبدیل می‌شود،
   چون جدول افقی روی گوشی خوانده نمی‌شود.                            */
.atable { width: 100%; border-collapse: collapse; font-size: .875rem; }
.atable th {
  text-align: right; font-weight: 600; font-size: .78rem; color: var(--ink-3);
  padding: var(--s3); border-bottom: 1px solid var(--line); white-space: nowrap;
}
.atable td { padding: var(--s3); border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.atable tr:last-child td { border-bottom: 0; }
.atable tbody tr { transition: background var(--t-fast) var(--ease); }
.atable tbody tr:hover { background: var(--surface-2); }
.atable .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.atable .code { font-family: var(--font-display); font-weight: 700; }

/* روی موبایل هر ردیف یک کارت می‌شود و هر خانه برچسب خودش را می‌گیرد */
@media (max-width: 860px) {
  .atable, .atable tbody, .atable tr, .atable td { display: block; width: 100%; }
  .atable thead { display: none; }
  .atable tr {
    border: 1px solid var(--line); border-radius: var(--r-core);
    background: var(--surface); margin-bottom: var(--s3); padding: var(--s2);
  }
  .atable td { border: 0; display: flex; justify-content: space-between; gap: var(--s3); padding: .45rem var(--s2); }
  .atable td::before {
    content: attr(data-label); color: var(--ink-3); font-size: .78rem;
    font-weight: 600; flex: none;
  }
  .atable td:empty { display: none; }
}

/* نوار فیلتر بالای فهرست‌ها */
.afilter {
  display: grid; gap: var(--s3); align-items: end;
  padding: var(--s4); margin-bottom: var(--s4);
  border: 1px solid var(--line); border-radius: var(--r-core); background: var(--surface);
}
@media (min-width: 760px) { .afilter { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } }
.afilter .field { margin: 0; }

/* کارت آمار کوچک بالای فهرست */
.astats { display: flex; gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s4); }
.astat { display: grid; gap: 2px; }
.astat span { font-size: .75rem; color: var(--ink-3); }
.astat b { font-family: var(--font-display); font-size: 1.1rem; }

/* فرم دوستونی پنل */
.aform { display: grid; gap: 0 var(--s4); }
@media (min-width: 760px) { .aform--2 { grid-template-columns: 1fr 1fr; } }
.aform--full { grid-column: 1 / -1; }

/* تخته‌ی آشپزخانه */
.board { display: grid; gap: var(--s3); align-items: start; }
@media (min-width: 900px) { .board { grid-template-columns: repeat(5, 1fr); } }
.board__col { background: var(--surface-2); border-radius: var(--r-core); padding: var(--s3); }
.board__head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .85rem; font-weight: 700; margin-bottom: var(--s3);
}
.board__card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-input); padding: var(--s3); margin-bottom: var(--s2);
}
.board__card.is-late { border-color: var(--bad); }
.board__card:last-child { margin-bottom: 0; }

/* کارت‌های تخته: لینک‌اند، پس رنگ و چیدمانشان را صریح می‌نویسیم */
.board__card { display: block; color: inherit; text-decoration: none; }
.board__card:hover { border-color: var(--brand); }
.board__card--warm { border-color: var(--warn); box-shadow: inset 3px 0 0 var(--warn); }
.board__card--late { border-color: var(--bad);  box-shadow: inset 3px 0 0 var(--bad); }
.board__item {
  display: flex; justify-content: space-between; gap: var(--s2);
  font-size: .88rem; padding-block: .15rem;
}
.board__note { color: var(--warn); }
.board__list { min-height: 2rem; }

/* آمار پنل: قاعده‌ی کلی .astat span عدد را هم ریز می‌کرد، پس صریح می‌نویسیم */
.astat__n { font-family: var(--font-display); font-size: 1.15rem; color: var(--ink-1) !important; }
.astat__l { font-size: .75rem; color: var(--ink-3); }

/* انتخاب چندتایی در کد تخفیف نباید از عرض ستون بزند بیرون */
.select[multiple] { background-image: none; padding-inline-end: var(--s3); height: auto; }

/* در حالت کارتی، خانه‌های پرمتن (نام غذا و توضیحش) کنار برچسب له می‌شدند:
   برچسب را بالا می‌بریم و متن تمام عرض کارت را می‌گیرد. */
@media (max-width: 860px) {
  .atable td[data-label='نام'],
  .atable td[data-label='کار'],
  .atable td[data-label='مشتری'] {
    display: grid; gap: .15rem; justify-content: stretch;
  }
  .atable td[data-label='نام']::before,
  .atable td[data-label='کار']::before,
  .atable td[data-label='مشتری']::before { margin-bottom: .1rem; }
  .atable td[data-label='عکس'] { justify-content: flex-start; align-items: center; }
}