/* ORGSELL — طراحیِ «مُهرِ دسترسی» (بریفِ مالک، ۳ آبان ۱۴۰۵؛ شورای Astra + Grok، council:orgsell-design-7).
   زمینهٔ روشنِ خنثی با گرمای کم، متنِ تقریباً سیاه، اقدامِ اصلی سبزِ تیره (متنِ سفید روی آن AA دارد؛ متن روی طلایی نداشت).
   طلاییِ تاجِ لوگو فقط برای نشان، لوگو و مُهر. امضا: «مُهر» = نوعِ اکانتِ واقعیِ هر پلن، رنگ + متن.
   حروف: Vazirmatn (فارسی) و IBM Plex Sans (انگلیسی)، هر دو محلی. مقیاس: ۱۲ / ۱۳ / ۱۴ / ۱۶ / ۱۸ / ۲۲ / ۲۸ / ۳۶.
   شکست‌ها (بر پایهٔ محتوا): موبایل < ۷۶۸ (نوارِ پایینی)، تبلت ۷۶۸–۱۰۲۳ (ریلِ دسته‌ها)، دسکتاپ ≥ ۱۰۲۴ (مگامنو). */
@font-face { font-family: Vazirmatn; font-weight: 400; font-display: swap; src: url(/fonts/vazirmatn-arabic-400-normal.woff2) format('woff2'); unicode-range: U+0600-06FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: Vazirmatn; font-weight: 500; font-display: swap; src: url(/fonts/vazirmatn-arabic-500-normal.woff2) format('woff2'); unicode-range: U+0600-06FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: Vazirmatn; font-weight: 700; font-display: swap; src: url(/fonts/vazirmatn-arabic-700-normal.woff2) format('woff2'); unicode-range: U+0600-06FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: Vazirmatn; font-weight: 900; font-display: swap; src: url(/fonts/vazirmatn-arabic-900-normal.woff2) format('woff2'); unicode-range: U+0600-06FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: Vazirmatn; font-weight: 400; font-display: swap; src: url(/fonts/vazirmatn-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F; }
@font-face { font-family: Vazirmatn; font-weight: 700; font-display: swap; src: url(/fonts/vazirmatn-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap; src: url(/fonts/ibm-plex-sans-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-display: swap; src: url(/fonts/ibm-plex-sans-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-display: swap; src: url(/fonts/ibm-plex-sans-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 700; font-display: swap; src: url(/fonts/ibm-plex-sans-latin-700-normal.woff2) format('woff2'); }

:root {
  --bg: #F6F4EF; --surface: #FFFFFF; --surface-2: #F3F0E8; --text: #141414; --muted: #5E584E; --line: #E3DDD2; --line-2: #D4CCBD;
  /* اقدام (دکمه، انتخاب، تأکید): زردِ برندِ orgsell.com (تاجِ لوگو) — خواستِ مالک، ۳ آبان ۱۴۰۵: «رنگ‌ها طبقِ خودِ
     orgsell.com زرد باشه». متنِ روی زرد همیشه تیره (--on-brand)؛ پیوند و متنِ ریز --brand-ink تا کنتراستِ AA بماند. */
  --brand: #E0A100; --brand-hover: #C48C00; --brand-ink: #7A4E00; --on-brand: #1A1406; --brand-soft: #FFF3D1;
  --gold: #E0A100; --gold-ink: #7A4E00; --gold-soft: #FFF3D1;
  --ok: #157A4A; --ok-soft: #E4F3EA; --warn: #8A5A00; --warn-soft: #FFF4DB; --bad: #B42318; --bad-soft: #FDECEC;
  /* چهار مُهر — رنگ + متن */
  --st-shared: #7A5B12; --st-shared-bg: #FBF3E1; --st-private: #1E5B45; --st-private-bg: #E6F2EC;
  --st-own: #2F4B7C; --st-own-bg: #E8EEF8; --st-code: #6B3F7A; --st-code-bg: #F3EAF6;
  --shadow: 0 1px 2px rgb(23 23 26 / .05), 0 8px 24px -16px rgb(23 23 26 / .22);
  --shadow-pop: 0 18px 48px -18px rgb(23 23 26 / .35);
  --r: 10px; --r-lg: 14px;
  --f: Vazirmatn, Tahoma, "Segoe UI", system-ui, sans-serif;
  --bnav-h: 0px;
  /* نام‌های قدیمی (پنل و صفحه‌های حساب هنوز به این‌ها اشاره دارند) */
  --paper: var(--surface); --ink: var(--text); --soft: var(--surface-2); --pass: var(--brand);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #100F0D; --surface: #1C1A17; --surface-2: #26231E; --text: #F6F3EC; --muted: #C4BAA8; --line: #3A342C; --line-2: #4A4339;
    --brand: #F0B429; --brand-hover: #F6C453; --brand-ink: #F6C453; --on-brand: #1A1406; --brand-soft: #3A2E12;
    --gold: #F0B429; --gold-ink: #F6C453; --gold-soft: #3A2E12;
    --ok: #4CD08F; --ok-soft: #12301F; --warn: #F5C451; --warn-soft: #362A0F; --bad: #FF8B80; --bad-soft: #3A1714;
    --st-shared: #E8C987; --st-shared-bg: #33291A; --st-private: #7AD3AD; --st-private-bg: #16302A;
    --st-own: #9DB8EA; --st-own-bg: #1C2638; --st-code: #D6A9E6; --st-code-bg: #2C1F33;
    --shadow: 0 1px 2px rgb(0 0 0 / .5), 0 10px 28px -16px rgb(0 0 0 / .8); --shadow-pop: 0 18px 48px -18px rgb(0 0 0 / .9);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #100F0D; --surface: #1C1A17; --surface-2: #26231E; --text: #F6F3EC; --muted: #C4BAA8; --line: #3A342C; --line-2: #4A4339;
  --brand: #F0B429; --brand-hover: #F6C453; --brand-ink: #F6C453; --on-brand: #1A1406; --brand-soft: #3A2E12;
  --gold: #F0B429; --gold-ink: #F6C453; --gold-soft: #3A2E12;
  --ok: #4CD08F; --ok-soft: #12301F; --warn: #F5C451; --warn-soft: #362A0F; --bad: #FF8B80; --bad-soft: #3A1714;
  --st-shared: #E8C987; --st-shared-bg: #33291A; --st-private: #7AD3AD; --st-private-bg: #16302A;
  --st-own: #9DB8EA; --st-own-bg: #1C2638; --st-code: #D6A9E6; --st-code-bg: #2C1F33;
  --shadow: 0 1px 2px rgb(0 0 0 / .5), 0 10px 28px -16px rgb(0 0 0 / .8); --shadow-pop: 0 18px 48px -18px rgb(0 0 0 / .9);
  color-scheme: dark;
}
/* مینی‌اپ: زمینه و متن از تلگرام (app.js پر می‌کند). */
body.tg { --bg: var(--tg-bg, #F7F6F2); --surface: var(--tg-paper, #FFFFFF); --text: var(--tg-ink, #17171A); --muted: var(--tg-muted, #5C5953); }
body.lang-en { --f: "IBM Plex Sans", Vazirmatn, "Segoe UI", system-ui, sans-serif; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 140px; }
body { margin: 0; font-family: var(--f); font-size: 16px; line-height: 1.8; background: var(--bg); color: var(--text); text-rendering: optimizeLegibility; -webkit-tap-highlight-color: transparent; }
body.lang-en { line-height: 1.6; }
img { max-width: 100%; height: auto; }
a { color: var(--brand-ink); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; }
h1, h2, h3 { line-height: 1.45; text-wrap: balance; margin: 0; }
body.lang-en h1, body.lang-en h2, body.lang-en h3 { line-height: 1.25; letter-spacing: -.01em; }
h1 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); font-weight: 900; }
h2 { font-size: 1.375rem; font-weight: 800; }
h3 { font-size: 1.125rem; font-weight: 700; }
body.lang-en h1 { font-weight: 700; } body.lang-en h2 { font-weight: 700; } body.lang-en h3 { font-weight: 600; }
p { margin: 0; }
.wrap { max-width: 1200px; margin-inline: auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.narrow { max-width: 760px; }
.block { padding-block: 28px; display: grid; gap: 18px; }
.block + .block { padding-top: 8px; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.lead { font-size: 1.125rem; color: var(--muted); max-width: 62ch; }
.eyebrow { font-size: .875rem; font-weight: 700; color: var(--gold-ink); }
.sr, .skip:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip:focus { position: fixed; top: 8px; inset-inline-start: 8px; z-index: 99; background: var(--surface); padding: 8px 12px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
[hidden] { display: none !important; }
body.no-scroll { overflow: hidden; }
/* برگهٔ فیلتر/دسته‌ها یا جست‌وجوی تمام‌صفحه باز است: حبابِ چتِ برج روی دکمه‌ها نیفتد. */
body.no-scroll .pmw-b, body.no-scroll .pmw-p { display: none !important; }
.en-note { font-size: .8125rem; color: var(--muted); padding-block: 8px; text-align: start; }

/* ── دکمه و فرم (هدفِ لمسیِ ۴۴px) */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border: 0; cursor: pointer; font: inherit; font-weight: 700; background: var(--brand); color: var(--on-brand); padding: 10px 20px; border-radius: var(--r); text-decoration: none !important; transition: background .15s ease, transform .1s ease; }
.btn:hover { background: var(--brand-hover); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn-ghost { background: var(--surface); color: var(--text); border: 1px solid var(--line-2); }
.btn-ghost:hover { background: var(--surface-2); }
.btn-lg { min-height: 52px; padding: 12px 28px; font-size: 1.0625rem; }
.btn-sm { min-height: 36px; padding: 6px 12px; font-size: .875rem; border-radius: 8px; }
.btn-block { width: 100%; }
.linkbtn { background: none; border: 0; color: var(--brand-ink); font: inherit; cursor: pointer; padding: 0; }
.icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r); border: 0; background: transparent; color: var(--text); cursor: pointer; font: inherit; flex: none; }
.icon-btn:hover { background: var(--surface-2); }
.field { display: grid; gap: 6px; }
.field > span { font-size: .875rem; font-weight: 600; }
input, select, textarea { font: inherit; color: var(--text); background: var(--surface); border: 1.5px solid var(--line-2); border-radius: var(--r); padding: 10px 12px; min-height: 44px; width: 100%; min-width: 0; }
input:focus, select:focus, textarea:focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px var(--brand-soft); }
input[dir="ltr"] { text-align: left; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: .9375rem; }
.check input { width: 20px; height: 20px; min-height: 0; margin-top: .3em; accent-color: var(--brand); flex: none; }
.alert, .notice { border-radius: var(--r); padding: 12px 14px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; border: 1px solid; }
.alert { background: var(--warn-soft); color: var(--text); border-color: color-mix(in srgb, var(--warn) 35%, transparent); }
.notice.ok { background: var(--ok-soft); color: var(--text); border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
.notice.ok svg { color: var(--ok); }
.notice.bad { background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 35%, transparent); }
.chip { display: inline-flex; align-items: center; gap: 4px; font-size: .75rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--surface-2); color: var(--muted); white-space: nowrap; }
.chip-ok, .chip-fast { background: var(--ok-soft); color: var(--ok); }
.chip-warn { background: var(--warn-soft); color: var(--warn); }
.badge { position: absolute; top: 2px; inset-inline-start: 2px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--gold); color: #1A1406; font-size: .6875rem; font-style: normal; font-weight: 900; display: grid; place-items: center; padding: 0 4px; line-height: 1; }
.badge.bump { animation: bump .5s ease; }
@keyframes bump { 30% { transform: scale(1.45); } 100% { transform: scale(1); } }

/* ── مُهر (امضای طرح): نوعِ اکانت، کوچک، گوشهٔ ۴، خطِ دولایه مثلِ مُهرِ جوهری */
.stamp { display: inline-flex; align-items: center; gap: 5px; font-size: .71875rem; font-weight: 700; line-height: 1; padding: 4px 7px 4px 8px; border-radius: 4px; white-space: nowrap;
  color: var(--st-c); background: var(--st-bg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--st-c) 55%, transparent), inset 0 0 0 3px var(--st-bg), inset 0 0 0 3.5px color-mix(in srgb, var(--st-c) 25%, transparent); }
.stamp::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; }
.st-shared { --st-c: var(--st-shared); --st-bg: var(--st-shared-bg); }
.st-private { --st-c: var(--st-private); --st-bg: var(--st-private-bg); }
.st-own { --st-c: var(--st-own); --st-bg: var(--st-own-bg); }
.st-code { --st-c: var(--st-code); --st-bg: var(--st-code-bg); }
.kind { font-size: .71875rem; font-weight: 600; color: var(--muted); }

/* ── لوگو */
.logo { display: inline-flex; align-items: center; color: var(--text); text-decoration: none !important; flex: none; }
.wordmark { display: inline-flex; align-items: flex-end; gap: 4px; direction: ltr; font-family: Vazirmatn, "IBM Plex Sans", sans-serif; font-weight: 900; font-size: 1.3125rem; letter-spacing: .01em; line-height: 1; }
.wordmark .crown { margin-bottom: 3px; }
.crown .cr-a { fill: var(--gold); }
.crown .cr-b { fill: color-mix(in srgb, var(--gold) 80%, var(--text)); }
.wm-org { color: var(--text); }
.wm-sell { color: var(--gold); margin-inline-start: -2px; }

/* ── سربرگ */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: saturate(1.2) blur(10px); border-bottom: 1px solid var(--line); }
.top-row { display: flex; align-items: center; gap: 14px; padding-block: 10px; }
.search { position: relative; flex: 1; display: flex; align-items: center; max-width: 600px; margin-inline: auto; background: var(--surface); border: 1.5px solid var(--line-2); border-radius: 12px; }
.search:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.search input { border: 0; border-radius: 12px; box-shadow: none !important; background: transparent; min-height: 46px; }
.search input::-webkit-search-cancel-button { display: none; }
.search .s-go { background: none; border: 0; padding: 0 14px; color: var(--muted); cursor: pointer; min-width: 44px; min-height: 44px; }
.search .s-back { display: none; }
.top-actions { display: flex; gap: 2px; align-items: center; }
.top-actions .s-open { display: none; }
.ta { position: relative; display: inline-flex; align-items: center; gap: 6px; color: var(--text); padding: 8px 10px; min-height: 44px; border-radius: var(--r); font-weight: 600; font-size: .9375rem; white-space: nowrap; }
.ta:hover { background: var(--surface-2); text-decoration: none; }
.ta-cart { background: var(--surface-2); }
.ta-lang span { font-size: .875rem; }
[data-theme-toggle] .i-sun { display: none; }
:root[data-theme="dark"] [data-theme-toggle] .i-sun { display: block; }
:root[data-theme="dark"] [data-theme-toggle] .i-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) [data-theme-toggle] .i-sun { display: block; }
  :root:not([data-theme="light"]) [data-theme-toggle] .i-moon { display: none; }
}

/* ── پیشنهادِ جست‌وجو (دسکتاپ/تبلت: زیرِ فیلد؛ موبایل: تمام‌صفحه) */
.sbox { position: absolute; inset-inline: -1.5px; top: calc(100% + 6px); z-index: 50; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-pop); padding: 8px; max-height: min(70vh, 560px); overflow-y: auto; display: grid; gap: 4px; }
.sbox h3 { font-size: .75rem; font-weight: 700; color: var(--muted); padding: 8px 10px 2px; display: flex; justify-content: space-between; align-items: center; }
.sbox h3 button { background: none; border: 0; color: var(--brand-ink); font: inherit; font-size: .75rem; cursor: pointer; min-height: 32px; padding: 0 6px; }
.s-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 8px 8px; }
.s-chips a, .s-chips button { display: inline-flex; align-items: center; min-height: 36px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit; font-size: .875rem; cursor: pointer; }
.s-item { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 10px; color: var(--text); min-height: 52px; }
.s-item img, .s-item .s-ph { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; background: var(--surface-2); display: block; }
.s-item b { font-size: .9375rem; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.s-item .s-sub { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 2px; }
.s-item .s-price { font-size: .875rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.s-item[aria-selected="true"], .s-item:hover { background: var(--surface-2); text-decoration: none; }
.s-cat { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; color: var(--text); min-height: 44px; }
.s-cat svg { color: var(--brand-ink); }
.s-cat small { color: var(--muted); margin-inline-start: auto; }
.s-cat[aria-selected="true"], .s-cat:hover { background: var(--surface-2); text-decoration: none; }
.s-all { display: block; text-align: center; padding: 10px; font-weight: 700; border-top: 1px solid var(--line); margin-top: 4px; }
.s-msg { padding: 12px 10px; color: var(--muted); font-size: .875rem; }
.did-mean { font-size: .9375rem; }

/* ── مگامنو (کلیکی؛ دسکتاپ) */
.mega { border-top: 1px solid var(--line); }
.mega-in { display: flex; align-items: center; gap: 4px; }
.mega-bar, .mega-side { list-style: none; margin: 0; padding: 0; display: flex; gap: 0; flex-wrap: nowrap; }
.mega-bar { flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.mega-bar::-webkit-scrollbar { display: none; }
.mega-side { margin-inline-start: auto; flex: none; }
.mega-side a { display: inline-flex; gap: 5px; align-items: center; min-height: 44px; padding: 8px 10px; color: var(--muted); font-size: .875rem; font-weight: 600; white-space: nowrap; }
.mega-side .trust-link { color: var(--ok); }
.mega-item { position: static; flex: none; }
.mega-top { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; padding: 8px 11px; border: 0; background: none; font: inherit; font-weight: 700; font-size: .875rem; color: var(--text); cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; line-height: 1.4; }
.mega-top i { font-style: normal; font-size: .6rem; color: var(--muted); transition: transform .15s; line-height: 1; margin-top: 1px; }
@media (max-width: 1100px) { .mega-side { display: none; } }
.mega-top:hover, .mega-top[aria-expanded="true"] { color: var(--brand-ink); border-bottom-color: var(--brand); text-decoration: none; }
.mega-top[aria-expanded="true"] i { transform: rotate(180deg); }
.mega-panel { position: absolute; inset-inline: 0; top: 100%; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-pop); padding: 20px max(16px, calc((100vw - 1200px) / 2 + 16px)); max-height: min(70vh, 560px); overflow-y: auto; display: grid; gap: 14px;
  opacity: 0; visibility: hidden; transform: translateY(-6px); pointer-events: none;
  transition: opacity .22s ease .12s, transform .22s ease .12s, visibility 0s linear .34s; }
.mega-panel.open { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: opacity .18s ease, transform .18s ease, visibility 0s; }
@media (hover: hover) and (pointer: fine) {
  .mega-item:hover > .mega-panel { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: opacity .18s ease .08s, transform .18s ease .08s, visibility 0s linear .08s; }
  .mega-item:hover > .mega-top { color: var(--brand-ink); border-bottom-color: var(--brand); }
}
.mega-cols li a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mega-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 18px 24px; }
.mega-cols section { display: grid; gap: 6px; align-content: start; }
.mega-cols h3 { font-size: .9375rem; padding-bottom: 6px; border-bottom: 2px solid var(--gold-soft); }
.mega-cols h3 a { color: var(--text); }
.mega-cols ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.mega-cols li a { color: var(--muted); font-size: .875rem; display: block; padding: 3px 0; }
.mega-cols li a:hover { color: var(--brand-ink); }
.mega-flat ul { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.mega-more { font-size: .8125rem; font-weight: 700; }
.mega-all { justify-self: start; font-weight: 700; font-size: .875rem; }

/* ── ریلِ دسته‌ها (تبلت و موبایل) */
.rail { display: none; border-top: 1px solid var(--line); }
.rail-in { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-block: 8px; scroll-snap-type: x proximity; }
.rail-in::-webkit-scrollbar { display: none; }
.rail-all, .rail-chip { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit; font-size: .875rem; font-weight: 600; white-space: nowrap; cursor: pointer; scroll-snap-align: start; }
.rail-chip svg { width: 18px; height: 18px; color: var(--brand-ink); }
.rail-all { background: var(--text); color: var(--bg); border-color: var(--text); }
.rail-chip:hover { border-color: var(--brand); text-decoration: none; }

/* ── برگهٔ دسته‌ها (bottom sheet) */
.sheet { position: fixed; inset: 0; z-index: 60; background: rgb(0 0 0 / .45); display: flex; align-items: flex-end; }
.sheet-box { width: 100%; max-width: 640px; margin-inline: auto; max-height: 88vh; overflow-y: auto; background: var(--surface); border-radius: 20px 20px 0 0; padding: 6px max(16px, env(safe-area-inset-right, 0px)) calc(20px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
.sheet-grip { width: 40px; height: 4px; border-radius: 2px; background: var(--line-2); margin: 4px auto 6px; }
.sheet-head { display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; background: var(--surface); padding-block: 6px; z-index: 1; }
.sheet details { border-bottom: 1px solid var(--line); }
.sheet summary { display: flex; align-items: center; gap: 10px; padding: 12px 0; font-weight: 700; cursor: pointer; min-height: 48px; }
.sheet summary svg { color: var(--brand-ink); flex: none; }
.sheet details.sub { margin-inline-start: 12px; border-bottom: 0; }
.sheet details.sub summary { font-weight: 600; padding: 8px 0; min-height: 44px; }
.sheet ul { list-style: none; padding-block: 0 10px; padding-inline: 12px 0; margin: 0; display: grid; gap: 2px; }
.sheet ul a { display: block; padding: 8px 0; color: var(--muted); }
.sheet-all { display: block; padding: 4px 0 8px; font-weight: 700; font-size: .875rem; }
.sheet-links { display: grid; gap: 4px; padding-top: 12px; }
.sheet-links a { padding: 10px 0; color: var(--text); font-weight: 600; }

/* ── نوارِ پایین (موبایل و مینی‌اپ) */
/* حبابِ چتِ آنلاینِ برج (--pmw-offset) بالای نوارِ پایینی و نوارِ «افزودن به سبد» می‌نشیند، نه رویشان. */
:root { --pmw-offset: calc(var(--bnav-h, 0px) + env(safe-area-inset-bottom, 0px)); }
body:has(.sticky-buy:not([hidden])) { --pmw-offset: calc(var(--bnav-h, 0px) + 68px + env(safe-area-inset-bottom, 0px)); }
.bnav { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 40; grid-template-columns: repeat(5, 1fr); background: var(--surface); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom, 0px); padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
body.tg { --bnav-h: 64px; }
body.tg .bnav { display: grid; }
.bnav a { position: relative; display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 60px; color: var(--muted); font-size: .75rem; font-weight: 600; text-decoration: none; }
.bnav a.on { color: var(--brand-ink); }
.bnav a.on::before { content: ""; position: absolute; top: 0; inset-inline: 30%; height: 2px; border-radius: 2px; background: var(--brand); }
.bnav .badge { top: 6px; inset-inline-start: calc(50% - 22px); }
main { padding-bottom: calc(var(--bnav-h) + env(safe-area-inset-bottom, 0px)); }

/* تبلت و موبایل: ریل به‌جای مگامنو */
@media (max-width: 1023px) {
  .mega { display: none; }
  .rail { display: block; }
  .ta-acc span, .ta-cart span { display: none; }
}
/* موبایل: سربرگ ساده (لوگو + آیکن‌ها)، جست‌وجو با دکمه تمام‌صفحه باز می‌شود؛ نوارِ پایینی. */
@media (max-width: 767px) {
  :root { --bnav-h: 64px; }
  .bnav { display: grid; }
  .top { position: static; backdrop-filter: none; background: var(--bg); }
  .top-row { gap: 4px; padding-block: 8px; }
  .top-actions { margin-inline-start: auto; }
  .top-actions .s-open { display: inline-grid; }
  .ta { padding: 8px; }
  .ta-lang span { display: none; }
  .ta-cart { display: none; }
  .search { display: none; }
  .search.s-open { display: flex; position: fixed; inset: 0; z-index: 90; margin: 0; max-width: none; border: 0; border-radius: 0; background: var(--bg); align-items: flex-start; flex-wrap: wrap; align-content: flex-start;
    padding: calc(8px + env(safe-area-inset-top, 0px)) max(8px, env(safe-area-inset-right, 0px)) 0 max(8px, env(safe-area-inset-left, 0px)); box-shadow: none; }
  .search.s-open .s-back { display: inline-grid; }
  .search.s-open input { flex: 1; background: var(--surface); border: 1.5px solid var(--brand); border-radius: 12px; font-size: 16px; }
  .search.s-open .sbox { position: static; flex-basis: 100%; border: 0; box-shadow: none; border-radius: 0; max-height: calc(100dvh - 72px); padding: 8px 0 24px; background: transparent; margin-top: 6px; }
  html { scroll-padding-top: 16px; }
  .rail-in { padding-block: 6px 8px; }
}

/* ── خانه: هیروی وسط‌چین و خلوت — تیتر، یک خط، جست‌وجو، لینک‌های پرطرفدار (خواستِ مالک ۳ آبان: «یوزرفرندلی و خلوت‌تر») */
.hero { padding-block: 48px 16px; }
.hero-in { display: grid; justify-items: center; text-align: center; gap: 16px; max-width: 760px; }
.hero-in .hero-search { width: 100%; }
.hero h1 { font-size: clamp(1.625rem, 1.1rem + 2vw, 2.5rem); line-height: 1.35; }
/* جست‌وجوی هیرو جای جست‌وجوی سرِ صفحه را در خانه می‌گیرد — دو جعبهٔ جست‌وجو در یک نگاه شلوغی بود. */
@media (min-width: 768px) { body:has(#hq) .top .search { visibility: hidden; } }
/* لینک‌های پرطرفدار از ستونِ ۷۶۰ پهن‌تر می‌شوند تا هشت برند در دسکتاپ یک خط بمانند (YouTube تنها به خطِ دوم می‌رفت). */
.hero-pop { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 4px; font-size: .875rem; color: var(--muted); width: max-content; max-width: min(1000px, calc(100vw - 32px)); }
.hero-pop ul { display: contents; list-style: none; }
.hero-pop a { display: inline-flex; align-items: center; min-height: 32px; padding: 2px 12px; border-radius: 999px; color: var(--text); font-weight: 600; background: var(--surface); border: 1px solid var(--line); }
.hero-pop a:hover { border-color: var(--brand); color: var(--brand-ink); text-decoration: none; }
.types-sec { padding-block: 28px 4px; display: grid; gap: 12px; }
.types-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.types-row li { display: grid; gap: 6px; justify-items: start; align-content: start; }
.types-row p { font-size: .8125rem; color: var(--muted); line-height: 1.7; }
@media (max-width: 1023px) { .types-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 32px; align-items: center; }
.hero-copy { display: grid; gap: 14px; min-width: 0; }
body.lang-en .hero h1 { line-height: 1.15; }
.hero h1 .accent { color: var(--brand-ink); }
.hero .lead { font-size: 1.0625rem; max-width: 56ch; }
.hero-search { position: relative; display: flex; gap: 8px; max-width: 620px; align-items: center; background: var(--surface); border: 1.5px solid var(--line-2); border-radius: 14px; padding: 6px; padding-inline-start: 6px; box-shadow: var(--shadow); }
.hero-search:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.hero-search .hs-ic { display: grid; place-items: center; width: 36px; color: var(--muted); flex: none; }
.hero-search input { border: 0; box-shadow: none !important; background: transparent; min-height: 46px; padding-inline: 0; font-size: 1rem; }
.hero-search .btn { flex: none; min-height: 46px; }
.hero-links { font-size: .9375rem; font-weight: 600; }
.stamps-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; display: grid; gap: 12px; box-shadow: var(--shadow); position: relative; overflow: hidden; }
.stamps-card::after { content: ""; position: absolute; inset-inline-end: -36px; top: -36px; width: 120px; height: 120px; border-radius: 50%; border: 2px dashed color-mix(in srgb, var(--gold) 45%, transparent); pointer-events: none; }
.stamps-card h2 { font-size: 1rem; }
.stamps-card ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.stamps-card li { display: grid; gap: 4px; justify-items: start; }
.stamps-card li p { font-size: .8125rem; color: var(--muted); line-height: 1.65; }
.stamps-more { font-size: .875rem; font-weight: 700; }
@media (max-width: 1023px) { .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 20px; } }
@media (max-width: 767px) {
  .hero { padding-block: 24px 4px; }
  .hero-in { gap: 12px; }
  .hero-pop { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; width: calc(100% + 32px); margin-inline: -16px; padding-inline: 16px; }
  .hero-pop::-webkit-scrollbar { display: none; }
  .hero-pop > span { flex: none; }
  .hero-pop a { white-space: nowrap; }
  .hero-grid { grid-template-columns: 1fr; gap: 16px; }
  .hero h1 { font-size: 1.5rem; }
  /* موبایل: هیرو فشرده — تیتر و جست‌وجو کافی است؛ دسته‌ها در ریلِ بالا هستند (بریف: «هیروی فشرده نه تمام‌صفحه»). */
  .hero .lead, .hero-links { display: none; }
  .hero-search { padding: 4px; }
  .hero-search .btn { padding-inline: 14px; }
  .stamps-card { padding: 14px; }
  .stamps-card ul { grid-template-columns: 1fr 1fr; gap: 10px 12px; }
  .stamps-card li p { display: none; }
  .stamps-card::after { display: none; }
}

.block-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.block-head h2 { display: flex; align-items: center; gap: 8px; font-size: 1.25rem; }
.bh-ic { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--brand-soft); color: var(--brand-ink); }
.bh-ic svg { width: 20px; height: 20px; }
.block-head a { font-weight: 700; font-size: .875rem; white-space: nowrap; }

/* دسته‌ها: کاشیِ آیکن‌دار؛ موبایل ریلِ افقی */
.cats-sec, .svc-sec { padding-block: 20px 4px; display: grid; gap: 12px; }
.cat-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 10px; }
.cat-card { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 12px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); color: var(--text); transition: border-color .15s, transform .15s; }
.cat-card:hover { border-color: var(--brand); transform: translateY(-1px); text-decoration: none; }
.cc-ic { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: var(--brand-ink); background: var(--brand-soft); }
.cc-t { display: grid; line-height: 1.45; min-width: 0; }
.cc-t b { font-size: .9375rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cc-t small { font-size: .75rem; color: var(--muted); }
/* مالک (۳ آبان): دسته‌ها و سرویس‌های پرطرفدار «باید تو یک ردیف باشه» — دسکتاپ: همه در یک ردیفِ هم‌عرض، هر تعداد؛
   تبلت و موبایل: یک ردیفِ افقیِ اسکرول‌شو. */
.cats-sec .cat-cards, .svc-rail { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(0, 1fr); }
@media (max-width: 1023px) {
  .cats-sec .cat-cards, .svc-rail { grid-auto-columns: 200px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; padding-bottom: 2px; }
  .svc-rail { grid-auto-columns: 150px; }
  .cats-sec .cat-cards::-webkit-scrollbar, .svc-rail::-webkit-scrollbar { display: none; }
  .cats-sec .cat-cards > li, .svc-rail > li { scroll-snap-align: start; }
}
.cat-card { padding: 10px; gap: 10px; }
.cats-sec .cc-ic { width: 40px; height: 40px; }
/* خانه: کاشیِ دسته عمودی و بی‌شمارنده — نام زیرِ آیکن، وسط‌چین (شمارنده در title) */
.cats-sec .cat-card { flex-direction: column; justify-content: center; text-align: center; gap: 8px; min-height: 96px; padding: 12px 8px; }
.cats-sec .cc-t { font-size: .875rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 1023px) { .cats-sec .cat-cards { grid-auto-columns: 132px; } }
@media (max-width: 767px) {
  .cats-sec .cat-cards { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 30%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 2px; margin-inline: -16px; padding-inline: 16px; }
  .cats-sec .cat-cards::-webkit-scrollbar { display: none; }
  .cats-sec .cat-cards > li { scroll-snap-align: start; }
}

/* سرویس‌های پرطرفدار (کاشی‌های برندِ پنل) */
.svc-rail { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 10px; }
.svc { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 10px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); color: var(--text); }
.svc:hover { border-color: var(--brand); text-decoration: none; }
.svc-mark { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-family: "IBM Plex Sans", Vazirmatn, sans-serif; font-weight: 700; font-size: 1rem; color: hsl(var(--h) 45% 32%); background: hsl(var(--h) 55% 93%); }
:root[data-theme="dark"] .svc-mark { color: hsl(var(--h) 60% 78%); background: hsl(var(--h) 25% 20%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .svc-mark { color: hsl(var(--h) 60% 78%); background: hsl(var(--h) 25% 20%); } }
.svc-t { display: grid; line-height: 1.35; min-width: 0; }
.svc-t b { font-weight: 700; font-size: .9375rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svc-t small { font-size: .71875rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 767px) {
  .svc-rail { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 42%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; }
  .svc-rail::-webkit-scrollbar { display: none; }
  .svc-rail > li { scroll-snap-align: start; }
}

/* تعهدها: یک نوارِ چهارتایی، موبایل دوتایی و فشرده */
.trust { padding-block: 28px 4px; }
.trust-row { list-style: none; margin: 0; padding: 20px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; border-top: 1px solid var(--line); }
.trust-row li { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.trust-row h2 { font-size: .9375rem; line-height: 1.5; }
.trust-row p { font-size: .8125rem; color: var(--muted); line-height: 1.65; }
.trust-ic { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--gold-soft); color: var(--gold-ink); }
@media (max-width: 1023px) { .trust-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .trust-row { gap: 12px; padding: 12px; } .trust-row p { display: none; } .trust-row h2 { font-size: .8125rem; } .trust-ic { width: 30px; height: 30px; } .trust-ic svg { width: 16px; height: 16px; } }
/* سازگاری: کلاس‌های قدیمیِ تعهد (اگر جایی مانده) */
.promises { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding-block: 28px 8px; }
.promise { display: flex; gap: 12px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; }
.promise-ic { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--gold-soft); color: var(--gold-ink); }

.hero-cats, .chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.hero-cats a, .chips a { display: inline-flex; align-items: center; min-height: 36px; padding: 4px 14px; border-radius: 999px; font-size: .875rem; font-weight: 600; background: var(--surface); border: 1px solid var(--line); color: var(--text); }
.hero-cats a:hover, .chips a:hover { border-color: var(--brand); color: var(--brand-ink); text-decoration: none; }
@media (max-width: 767px) { .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; } .chips::-webkit-scrollbar { display: none; } .chips a { flex: none; } }

.seo-fold { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 0 16px; }
.seo-fold summary { cursor: pointer; font-weight: 700; padding: 14px 0; min-height: 48px; }
.seo-fold .seo-text { border-top: 1px solid var(--line); padding-block: 14px 18px; }

/* ── کارتِ محصول: موبایل ۲ ستون (زیرِ ۳۶۰ یک ستونِ افقی)، تبلت ۳، دسکتاپ ۴ */
.grid-pass { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1023px) { .grid-pass { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }
@media (max-width: 767px) { .grid-pass { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
.card { position: relative; display: grid; grid-template-rows: auto 1fr; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; transition: border-color .15s, transform .15s, box-shadow .15s; }
.card:hover { border-color: var(--line-2); transform: translateY(-2px); box-shadow: var(--shadow); }
.card-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.card-link:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.card-img { position: relative; aspect-ratio: 1; max-width: 100%; background: var(--surface-2); display: grid; place-items: center; overflow: hidden; }
.card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.card:hover .card-img img { transform: scale(1.03); }
.card-img b { font-size: 2rem; color: var(--gold-ink); direction: ltr; }
.card-off { position: absolute; top: 10px; inset-inline-start: 10px; background: var(--bad); color: #fff; font-weight: 800; font-size: .75rem; padding: 2px 8px; border-radius: 6px; }
.card-body { display: grid; gap: 6px; padding: 10px 12px 12px; align-content: start; grid-template-rows: auto auto auto 1fr auto; }
.card-stamps { display: flex; flex-wrap: wrap; gap: 4px; min-height: 22px; }
.card-title { font-size: .9375rem; font-weight: 700; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.9em; }
.card-spec { font-size: .78125rem; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.card-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; align-self: end; padding-top: 2px; }
.card-price { font-weight: 800; font-size: 1.125rem; font-variant-numeric: tabular-nums; line-height: 1.4; min-width: 0; }
.card-price s { font-weight: 500; font-size: .8125rem; color: var(--muted); }
.card-price small { font-weight: 500; font-size: .75rem; color: var(--muted); }
.card-price em { font-style: normal; color: var(--muted); font-size: .9375rem; }
.card-go { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-ink); transition: background .15s, color .15s; }
.card:hover .card-go { background: var(--brand); color: var(--on-brand); }
.card-meta { display: flex; gap: 5px; align-items: flex-start; font-size: .71875rem; color: var(--muted); line-height: 1.5; border-top: 1px dashed var(--line); padding-top: 7px; }
.card-meta svg { flex: none; margin-top: 1px; }
.card-meta span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-meta.fast { color: var(--ok); }
/* سازگاری با کارتِ قدیمی (پنل/جاهای دیگر) */
.card-type { font-size: .75rem; color: var(--muted); }
.card-badges { display: flex; flex-wrap: wrap; gap: 4px; }
.badge-soft { display: inline-flex; align-items: center; gap: 4px; font-size: .6875rem; font-weight: 600; padding: 2px 7px; border-radius: 999px; background: var(--surface-2); color: var(--muted); white-space: nowrap; }
.badge-soft.ok { background: var(--ok-soft); color: var(--ok); }
@media (max-width: 767px) {
  .card-body { padding: 8px 10px 10px; gap: 5px; }
  .card-title { font-size: .875rem; }
  .card-price { font-size: 1rem; }
  .card-go { width: 30px; height: 30px; border-radius: 8px; }
  .card-go svg { width: 16px; height: 16px; }
  .stamp { font-size: .6875rem; padding: 3px 6px 3px 7px; }
}
@media (max-width: 359px) {
  .grid-pass { grid-template-columns: 1fr; }
  .card { grid-template-rows: none; grid-template-columns: 112px minmax(0, 1fr); }
  .card-img { align-self: center; margin-inline-start: 8px; border-radius: 10px; }
  .card-title { min-height: 0; }
  .card-body { grid-template-rows: none; }
}

/* ── دسته‌ها */
.cat-tile { display: flex; align-items: center; gap: 10px; padding: 12px 14px; min-height: 56px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); color: var(--text); }
.cat-tile:hover { text-decoration: none; border-color: var(--brand); }
.cat-tile img { border-radius: 10px; }
.cat-tile span { display: grid; line-height: 1.5; }
.cat-tile small { color: var(--muted); font-size: .75rem; }
.subcats { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.cat-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.cat-group { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; display: grid; gap: 8px; align-content: start; }
.cat-group h2, .cat-group h3 { font-size: 1.0625rem; }
.cat-group h2 a, .cat-group h3 a { color: var(--text); }
.cat-group small { color: var(--muted); font-weight: 500; font-size: .75rem; }
.cat-group ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.cat-group li a { color: var(--muted); font-size: .9375rem; }
.cat-head { display: grid; gap: 8px; }
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.sorts { display: flex; gap: 4px; flex-wrap: wrap; }
.sorts a { display: inline-flex; align-items: center; min-height: 36px; padding: 4px 12px; border-radius: 10px; color: var(--muted); font-size: .875rem; font-weight: 600; }
.sorts a.on { background: var(--text); color: var(--bg); }

/* ── صفحهٔ دسته: فیلترِ کنارِ شبکه (دسکتاپ) یا برگهٔ پایینی (تبلت/موبایل، با :target) */
.cat-page .cat-head h1 { display: flex; align-items: center; gap: 10px; }
.cat-page .cat-head .bh-ic { width: 40px; height: 40px; border-radius: 12px; }
.cat-intro { font-size: 1rem; }
.sub-chips a small { color: var(--muted); font-weight: 500; margin-inline-start: 4px; }
.cat-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; align-items: start; }
.cat-layout.no-filters { grid-template-columns: minmax(0, 1fr); }
.cat-main { display: grid; gap: 14px; min-width: 0; }
.filters { position: sticky; top: 140px; }
.f-form { display: grid; gap: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px; }
.f-head { display: flex; justify-content: space-between; align-items: center; min-height: 40px; }
.f-head b { font-size: 1rem; }
.f-close { display: none; }
.f-set { border: 0; border-top: 1px solid var(--line); margin: 0; padding: 12px 0 8px; display: grid; gap: 2px; min-width: 0; }
.f-set legend { font-weight: 700; font-size: .875rem; padding: 0; margin-bottom: 6px; float: inline-start; width: 100%; }
.f-opt { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; font-size: .9375rem; }
.f-opt input { width: 20px; height: 20px; min-height: 0; accent-color: var(--brand); flex: none; }
.f-opt small { margin-inline-start: auto; color: var(--muted); font-variant-numeric: tabular-nums; }
.f-opt span { display: inline-flex; align-items: center; gap: 6px; }
.f-price { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px; align-items: center; color: var(--muted); }
.f-price input { min-height: 42px; font-size: .875rem; }
.f-actions { display: grid; grid-template-columns: 1fr auto; gap: 8px; border-top: 1px solid var(--line); padding-top: 12px; margin-top: 4px; }
.tool-btns { display: flex; gap: 8px; align-items: center; }
.f-btn { display: none; position: relative; }
.f-n { font-style: normal; min-width: 20px; height: 20px; border-radius: 10px; background: var(--brand); color: var(--on-brand); font-size: .75rem; display: inline-grid; place-items: center; padding: 0 5px; }
.sort-form select { min-height: 40px; width: auto; padding-block: 6px; padding-inline: 10px 30px; font-size: .875rem; border-radius: 10px; }
.f-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.f-chips a { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 12px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-ink); font-size: .8125rem; font-weight: 600; }
.f-chips a span { font-size: .7rem; }
.f-chips .f-clear { background: none; color: var(--muted); }
@media (max-width: 1023px) {
  .cat-layout { grid-template-columns: minmax(0, 1fr); }
  .f-btn { display: inline-flex; }
  .filters { display: none; position: fixed; inset: 0; z-index: 70; top: auto; background: rgb(0 0 0 / .45); height: 100%; align-items: flex-end; }
  .filters:target { display: flex; }
  .f-form { width: 100%; max-width: 560px; margin-inline: auto; max-height: 86vh; overflow-y: auto; border-radius: 20px 20px 0 0; border: 0; padding: 8px max(16px, env(safe-area-inset-right, 0px)) calc(14px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
  .f-head { position: sticky; top: 0; background: var(--surface); z-index: 1; }
  .f-close { display: inline-grid; }
  .f-actions { position: sticky; bottom: calc(-14px - env(safe-area-inset-bottom, 0px)); background: var(--surface); padding-bottom: 8px; }
}

.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; counter-reset: none; }
.steps li { display: flex; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; }
.steps b { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--surface); color: var(--gold-ink); display: grid; place-items: center; font-weight: 900; box-shadow: inset 0 0 0 1.5px var(--gold), inset 0 0 0 4px var(--surface), inset 0 0 0 5px color-mix(in srgb, var(--gold) 40%, transparent); }
.steps p { color: var(--muted); font-size: .875rem; }
@media (max-width: 767px) { .steps { grid-template-columns: 1fr; } }

.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; font-size: .8125rem; color: var(--muted); }
.crumbs li + li::before { content: "‹"; margin-inline-end: 6px; color: var(--muted); }
body.lang-en .crumbs li + li::before { content: "›"; }
.crumbs a { color: var(--muted); }

/* ── محصول */
.product { padding-block: 20px 40px; display: grid; gap: 24px; }
.product-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 32px; align-items: start; }
.product-media { display: grid; gap: 14px; position: sticky; top: 150px; }
.product-art { aspect-ratio: 1; max-width: 100%; border-radius: 18px; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; }
.product-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-art b { font-size: 4rem; color: var(--gold-ink); direction: ltr; }
.trust-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.trust-list li { display: flex; gap: 10px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; font-size: .875rem; }
.trust-list svg { flex: none; color: var(--ok); margin-top: 4px; }
.product-main { display: grid; gap: 14px; min-width: 0; }
.rating { display: inline-flex; gap: 8px; align-items: center; color: var(--muted); font-size: .875rem; }
.stars { display: inline-flex; gap: 1px; direction: ltr; }
.stars svg { color: var(--line-2); }
.stars svg.on { color: var(--gold); }
.buy { display: grid; gap: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; box-shadow: var(--shadow); }
.axis { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; min-width: 0; }
.axis legend { font-weight: 700; font-size: .9375rem; margin-bottom: 6px; }
.opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.opts-list { grid-template-columns: 1fr; }
.opt { position: relative; cursor: pointer; }
.opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.opt span { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 48px; padding: 8px 12px; border: 1.5px solid var(--line-2); border-radius: var(--r); font-size: .9375rem; font-weight: 600; background: var(--surface); line-height: 1.5; }
.opt input:checked + span { border-color: var(--brand); background: var(--brand-soft); box-shadow: inset 0 0 0 1px var(--brand); }
.opt input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
/* ترکیبِ ناموجود: کم‌رنگ و خط‌چین، بی خط‌زدن (Grok: خط‌زدن شبیهِ تخفیف است). */
.opt.off span { opacity: .5; border-style: dashed; }
.opt-row { display: flex; align-items: center; gap: 12px; min-height: 52px; border: 1.5px solid var(--line-2); border-radius: var(--r); padding: 10px 14px; }
.opt-row span { border: 0; padding: 0; background: none !important; box-shadow: none !important; flex: 1; justify-content: flex-start; text-align: start; min-height: 0; flex-wrap: wrap; gap: 2px 8px; }
.opt-row span small { font-weight: 500; color: var(--muted); font-size: .75rem; }
.opt-row b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.opt-row:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.type-note p { background: var(--surface-2); border-radius: 10px; padding: 8px 12px; font-size: .875rem; }
.needs { display: grid; gap: 10px; background: var(--gold-soft); border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); border-radius: var(--r); padding: 14px; }
.needs-title { display: flex; gap: 8px; align-items: center; font-weight: 700; font-size: .9375rem; }
.buy-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 14px; }
.buy-sum { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .9375rem; }
.buy-sum:empty { display: none; }
.opt-row span .stamp { margin-inline-start: 2px; }
.price { font-variant-numeric: tabular-nums; }
.price strong { font-size: 1.75rem; font-weight: 900; }
.price s { color: var(--muted); margin-inline-end: 8px; }
.price small { color: var(--muted); }
.rule-note { display: flex; gap: 8px; align-items: flex-start; font-size: .875rem; background: var(--warn-soft); border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); border-radius: 10px; padding: 9px 12px; line-height: 1.7; }
.rule-note svg { flex: none; color: var(--warn); margin-top: 3px; }
.pay-hint { display: flex; gap: 6px; align-items: flex-start; }
.pay-hint svg { flex: none; color: var(--ok); margin-top: 4px; }
/* «نکاتی که قبل از خرید باید توجه کنید» — داخلِ فرمِ خرید، زیرِ دکمه؛ بندِ آخر همیشه قاعدهٔ پس از فعال‌سازی. */
.pre-buy { border-top: 1px solid var(--line); padding-top: 14px; display: grid; gap: 10px; }
.pre-buy h2 { font-size: 1rem; display: flex; align-items: center; gap: 8px; }
.pre-buy h2 svg { color: var(--gold-ink); }
.pre-buy-list { margin: 0; padding: 0; list-style: none; counter-reset: pb; display: grid; gap: 6px; }
.pre-buy-list li { position: relative; padding-block: 8px; padding-inline: 36px 10px; font-size: .875rem; line-height: 1.75; background: var(--surface-2); border-radius: 10px; counter-increment: pb; }
.pre-buy-list li::before { content: counter(pb, persian); position: absolute; inset-inline-start: 10px; top: 9px; width: 20px; height: 20px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line); font-size: .75rem; font-weight: 800; display: grid; place-items: center; color: var(--gold-ink); }
.pre-buy-list li.rule-note { display: block; }
.pre-buy-list li.rule-note::before { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 40%, transparent); color: var(--warn); }
.out-box { background: var(--surface); border: 1px dashed var(--line-2); border-radius: var(--r-lg); padding: 18px; display: grid; gap: 6px; }
.product-body { display: grid; gap: 22px; max-width: 880px; }
.tabs-nav { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; position: sticky; top: 132px; background: var(--bg); padding-block: 8px; z-index: 5; }
.tabs-nav a { white-space: nowrap; display: inline-flex; align-items: center; min-height: 40px; padding: 4px 14px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); color: var(--text); font-size: .875rem; font-weight: 600; }
.sticky-buy { position: fixed; z-index: 35; left: 0; right: 0; bottom: calc(var(--bnav-h) + env(safe-area-inset-bottom, 0px)); display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -6px 20px -12px rgb(0 0 0 / .3); padding: 10px max(16px, env(safe-area-inset-right, 0px)) 10px max(16px, env(safe-area-inset-left, 0px)); }
.sticky-buy strong { font-size: 1.125rem; }
@media (min-width: 900px) { .sticky-buy { display: none !important; } }
@media (max-width: 860px) {
  .product-grid { grid-template-columns: 1fr; gap: 16px; }
  .product-media { position: static; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; align-items: start; }
  .product-art { max-width: 112px; border-radius: 14px; }
  .trust-list { gap: 6px; }
  .trust-list li { padding: 8px 10px; font-size: .8125rem; }
  .tabs-nav { top: 0; }
}

.prose { line-height: 1.95; max-width: 72ch; }
body.lang-en .prose:not([dir="rtl"]) { line-height: 1.7; }
.prose > * + * { margin-top: .8em; }
.prose h2 { font-size: 1.25rem; margin-top: 1.4em; }
.prose h3 { margin-top: 1.1em; }
.prose ul, .prose ol { padding-inline-start: 1.3em; }
.prose table { border-collapse: collapse; width: 100%; display: block; overflow-x: auto; }
.prose td, .prose th { border: 1px solid var(--line); padding: 6px 10px; }
.prose blockquote { margin: 0; border-inline-start: 3px solid var(--gold); background: var(--surface-2); padding: 8px 14px; border-radius: 8px; }
/* صفحه‌های ثابت و راهنما (Astra/Grok): متنِ بلندِ خوانا — ۱۷px، ستونِ حداکثر ۶۸ نویسه، فاصلهٔ تیترها. */
.static-page .prose { font-size: 1.0625rem; max-width: 68ch; }
.static-page .prose h1 { margin-bottom: .4em; }
.static-page .prose h2 { margin-top: 1.8em; padding-top: .2em; border-top: 1px solid var(--line); }
.static-page .prose h2:first-of-type { border-top: 0; }
@media (max-width: 767px) { .static-page .prose { font-size: 1rem; } }
.guarantee-box { background: var(--ok-soft); border-radius: var(--r-lg); padding: 16px 18px; max-width: none; }
.faq-list { display: grid; gap: 8px; }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 0 14px; }
.faq details + details { margin-top: 8px; }
.faq-list details + details { margin-top: 0; }
.faq summary { cursor: pointer; font-weight: 700; padding: 12px 0; min-height: 48px; display: flex; align-items: center; }
.faq details[open] summary { color: var(--brand-ink); }
.faq h2 { margin-bottom: 10px; }
.reviews { display: grid; gap: 10px; }
.reviews h2 small { font-size: .875rem; font-weight: 500; color: var(--muted); margin-inline-start: 8px; }
.review { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; display: grid; gap: 6px; }
.review header { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.review time { color: var(--muted); font-size: .8125rem; margin-inline-start: auto; }
.review .reply { background: var(--surface-2); border-radius: 8px; padding: 6px 10px; font-size: .875rem; }
.seo-text { color: var(--muted); border-top: 1px solid var(--line); padding-top: 18px; }
/* خلاصهٔ ووکامرسی که به پشتیبانی ارجاع می‌دهد: پایینِ صفحه، کم‌رنگ، تا بازنویسی شود. */
.summary-below { background: var(--surface-2); border-radius: var(--r); padding: 12px 14px; color: var(--muted); font-size: .9375rem; }

/* ── سبد و پرداخت */
.checkout-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.lines { display: grid; gap: 10px; }
.line { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; }
.line-img img { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; background: var(--surface-2); display: block; }
.line-text { display: grid; min-width: 0; }
.line-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.qty { display: inline-flex; align-items: center; gap: 8px; }
.qty button { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--text); cursor: pointer; font: inherit; }
.line-total { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pay-box, .card-form { display: grid; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; box-shadow: var(--shadow); }
.pay-box { position: sticky; top: 150px; }
.pay-box h2 { font-size: 1.125rem; }
.pay-box .field > span small { font-weight: 500; }
/* قدمِ ورود در سبد (خریدِ مهمان حذف شد) */
.cart-login { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft), var(--shadow); }
.login-why { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-size: .875rem; }
.login-why li { display: flex; gap: 8px; align-items: flex-start; }
.login-why svg { flex: none; color: var(--ok); margin-top: 4px; }
.lines > .muted { padding-inline: 4px; }
.row { display: flex; justify-content: space-between; gap: 10px; font-variant-numeric: tabular-nums; }
.row.total { border-top: 1px solid var(--line); padding-top: 10px; font-size: 1.125rem; }
.gws { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.gws legend { font-weight: 700; font-size: .9375rem; margin-bottom: 6px; }
.gw { display: flex; gap: 10px; align-items: center; min-height: 52px; border: 1.5px solid var(--line-2); border-radius: var(--r); padding: 10px 12px; cursor: pointer; }
.gw input { width: 20px; height: 20px; min-height: 0; accent-color: var(--brand); flex: none; }
.gw span { display: grid; line-height: 1.5; }
.gw small { color: var(--muted); font-size: .8125rem; }
.gw:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
@media (max-width: 860px) { .checkout-grid { grid-template-columns: 1fr; } .pay-box { position: static; } .line { grid-template-columns: 48px minmax(0, 1fr); } .qty, .line-total { grid-column: 2; } }

/* ── سفارش */
.order-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.status { display: inline-block; padding: 4px 12px; border-radius: 999px; font-weight: 700; font-size: .875rem; background: var(--surface-2); }
.s-paid, .s-processing { background: var(--brand-soft); color: var(--brand-ink); }
.s-delivered { background: var(--ok-soft); color: var(--ok); }
.s-pending { background: var(--warn-soft); color: var(--warn); }
.s-cancelled, .s-refunded { background: var(--bad-soft); color: var(--bad); }
.items { display: grid; gap: 14px; }
.ticket { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.ticket-main { padding: 16px 18px; display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start; }
.ticket-main h2 { flex-basis: 100%; font-size: 1.0625rem; }
.ticket-tear { display: none; }
.ticket-stub { padding: 16px 18px; display: grid; gap: 10px; align-content: start; background: var(--surface-2); border-inline-start: 1px solid var(--line); }
.ticket.delivered .ticket-stub { background: var(--ok-soft); }
@media (max-width: 700px) { .ticket { grid-template-columns: 1fr; } .ticket-stub { border-inline-start: 0; border-top: 1px solid var(--line); } }
.secret { display: flex; gap: 8px; align-items: stretch; }
.secret pre { flex: 1; margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; white-space: pre-wrap; word-break: break-all; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .875rem; min-width: 0; }
.order-sum { max-width: 400px; display: grid; gap: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; }
.tg-cta { display: flex; gap: 8px; align-items: center; }
.review-form { display: grid; gap: 10px; max-width: 520px; }
.rate { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; }
.rate input { position: absolute; opacity: 0; }
.rate label { font-size: 1.75rem; color: var(--line-2); cursor: pointer; }
.rate input:checked ~ label, .rate label:hover, .rate label:hover ~ label { color: var(--gold); }

/* ── پنجرهٔ «به سبد اضافه شد» */
.added { position: fixed; inset: 0; z-index: 70; background: rgb(0 0 0 / .45); display: grid; place-items: center; padding: 16px; }
.added-box { width: min(420px, 100%); background: var(--surface); border-radius: var(--r-lg); padding: 18px; display: grid; gap: 12px; box-shadow: var(--shadow-pop); }
.added-ok { display: flex; gap: 8px; align-items: center; color: var(--ok); font-weight: 800; font-size: 1.125rem; }
.added-item { display: flex; gap: 12px; align-items: center; background: var(--surface-2); border-radius: var(--r); padding: 10px; }
.added-item img { border-radius: 10px; }
.added-item div { display: grid; line-height: 1.6; min-width: 0; }
.added-item span { color: var(--muted); font-size: .875rem; }
.added-actions { display: grid; gap: 8px; }
@media (max-width: 560px) { .added { place-items: end center; padding: 0; } .added-box { border-radius: 20px 20px 0 0; padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); } }

/* ── پشتیبانی: آیدی کنارِ لینک */
.support { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.handle { font-weight: 700; color: var(--text); background: var(--surface-2); border-radius: 6px; padding: 0 6px; font-size: .875rem; }
.copy-mini { display: inline-grid; place-items: center; width: 36px; height: 36px; border: 0; background: none; color: var(--muted); cursor: pointer; border-radius: 8px; }
.copy-mini:hover { background: var(--surface-2); color: var(--text); }

/* ── راهنماها */
.guides { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.guide-card { display: grid; gap: 8px; align-content: start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; color: var(--text); }
.guide-card:hover { border-color: var(--brand); text-decoration: none; }
.guide-card h2 { font-size: 1.0625rem; }
.guide-card p { font-size: .875rem; }
.guide-more { font-weight: 700; color: var(--brand-ink); font-size: .875rem; }
.contact-form { margin-top: 18px; }

/* ── حساب */
.acc-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
/* دکمه‌های سرِ «حساب من»: کنارِ هم و هم‌قد (‎.btns فقط در admin.css تعریف شده بود و این دو زیرِ هم با پهنای نابرابر می‌افتادند)؛
   «خروج» کم‌رنگ و بی‌قاب تا با اقدامِ اصلی اشتباه نشود. */
.acc-head .btns { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.acc-head .btns form { margin: 0; display: contents; }
.acc-head .btns .btn { min-height: 40px; }
.acc-head .acc-logout { border-color: transparent; background: transparent; color: var(--muted); }
.acc-head .acc-logout:hover { color: var(--bad); background: var(--bad-soft); border-color: transparent; }
/* شارژِ کیف پول (۳ آبان ۱۴۰۵): مبلغ‌های آماده به‌صورتِ قرص، بعد فیلدِ مبلغ و یک دکمه. */
.topup { display: grid; gap: 10px; margin-top: 4px; }
.topup-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.topup-presets .chip { min-height: 34px; padding: 4px 12px; font-size: .8125rem; color: var(--text); background: var(--surface); border: 1px solid var(--line); cursor: pointer; }
.topup-presets .chip:hover, .topup-presets .chip.on { border-color: var(--brand); color: var(--brand-ink); background: var(--brand-soft); }
.acc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.acc-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; display: grid; gap: 10px; align-content: start; }
.acc-card .big { font-size: 1.75rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.tx, .subs { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.tx li { display: grid; grid-template-columns: 1fr auto; font-size: .875rem; }
.tx time { color: var(--muted); font-size: .75rem; }
.pos { color: var(--ok); } .neg { color: var(--bad); }
.subs li { display: grid; gap: 4px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.subs li.soon .meter i { background: var(--warn); }
.meter { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.meter i { display: block; height: 100%; width: calc(var(--p) * 1%); background: var(--ok); border-radius: 3px; }
@media (max-width: 860px) { .acc-grid { grid-template-columns: 1fr; } }
.login-ways { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
/* ورود و حساب (فاز ۵): کارتِ فرم با خطِ زردِ بالا، روشِ ورود به شکلِ دکمهٔ دوحالته، کدِ یک‌بارمصرف درشت و فاصله‌دار
   (پرشِ خودکار و paste همان یک فیلد؛ autocomplete=one-time-code روی موبایل کد را خودش پیشنهاد می‌دهد). */
.login .card-form, .account-settings .card-form { border-top: 3px solid var(--brand); }
.login .cat-head h1 { font-size: 1.75rem; }
.login .sorts { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--surface-2); justify-self: start; }
.login .sorts a { min-height: 40px; padding: 6px 16px; border-radius: 9px; color: var(--muted); }
.login .sorts a.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
input[name="code"] { font-size: 1.625rem; font-weight: 700; letter-spacing: .5em; text-align: center; font-variant-numeric: tabular-nums; min-height: 60px; padding-inline: .5em 0; }
.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.checks li { display: flex; gap: 8px; align-items: center; min-height: 32px; }
.checks li b { width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; font-size: .75rem; background: var(--surface-2); color: var(--muted); }
.checks li.ok b { background: var(--ok-soft); color: var(--ok); }
.account .acc-card { border-top: 3px solid var(--brand); }
.account .acc-head h1 { font-size: 1.625rem; }
.subs .meter i { background: var(--brand); }
.subs li.soon .meter i { background: var(--warn); }
@media (max-width: 767px) { .login .cat-head h1 { font-size: 1.375rem; } .login .lead { font-size: .9375rem; } }
.login-ways h2 { font-size: 1.0625rem; display: flex; align-items: center; gap: 8px; }
.login-ways h2 svg { color: var(--brand-ink); }
.login .lead { font-size: 1rem; }
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; background: var(--surface); border-radius: var(--r); overflow: hidden; font-size: .875rem; }
.table th, .table td { padding: 10px; border-bottom: 1px solid var(--line); text-align: start; vertical-align: top; }
.table th { font-size: .75rem; color: var(--muted); font-weight: 700; background: var(--surface-2); }
.empty { text-align: center; display: grid; gap: 10px; justify-items: center; padding: 40px 16px; }

/* ── پانویس */
.foot { margin-top: 40px; background: var(--surface); border-top: 1px solid var(--line); padding-block: 32px 18px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 24px; }
.foot-grid section { display: grid; gap: 10px; align-content: start; }
.foot h2 { font-size: 1rem; }
.foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; font-size: .9375rem; }
.foot ul a { color: var(--muted); display: inline-block; padding-block: 4px; }
.foot-support { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.foot-support svg { color: var(--gold-ink); }
.seal-box { background: #fff; border-radius: var(--r); padding: 8px; justify-self: start; }
.foot-bottom { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--line); margin-top: 20px; padding-top: 14px; font-size: .8125rem; }
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .foot-grid { grid-template-columns: 1fr; } }

.toast { position: fixed; bottom: calc(18px + var(--bnav-h) + env(safe-area-inset-bottom, 0px)); inset-inline: 16px; margin-inline: auto; max-width: 420px; background: var(--text); color: var(--bg); border-radius: var(--r); padding: 12px 16px; z-index: 80; box-shadow: var(--shadow-pop); text-align: center; font-weight: 600; }

/* ── مینی‌اپ */
body.tg .hero { padding-top: 16px; }
body.tg .hero h1 { font-size: 1.375rem; }
body.tg .hero-cats, body.tg .how, body.tg .seo-text, body.tg .seo-fold, body.tg .promises, body.tg .hero-brands, body.tg .stamps-card, body.tg .svc-sec, body.tg .types-sec, body.tg .hero-pop { display: none; }

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