/* shop.css — سیستمِ طراحیِ ویترینِ فروشگاه.
 *
 * چرا یک شیتِ واحد و کلاس‌محور، به‌جای استایلِ inline:
 * صفحات از یک نمونهٔ inline-style شروع شدند و رِسپانسیو با سلکتورهای
 * [style*="…"] و !important رویشان سوار شده بود. آن روش برای یک صفحه جواب
 * می‌دهد و برای هزار فروشگاه نه: هر تغییرِ کوچکِ مارکاپ، استایل را بی‌صدا
 * می‌شکند. اینجا هر چیزی یک اسم دارد و از توکن تغذیه می‌شود.
 *
 * لایه‌ها:
 *   ۱. توکن‌ها  (رنگ، فاصله، شعاع، مقیاسِ قلم)  ← تنها جای اعداد
 *   ۲. پایه     (reset، تایپوگرافی، فرم)
 *   ۳. اجزا     (.sh-card، .sh-btn، .sh-grid، …)
 *   ۴. کمکی‌ها  (فاصله و چیدمانِ پرتکرار)
 */

/* hide-scrollbars — خواستِ کاربر: نوارِ اسکرول در ویترین دیده نشود.
   اسکرول کار می‌کند، فقط نوارش پنهان است. */
* { scrollbar-width: none; -ms-overflow-style: none; }
*::-webkit-scrollbar { width: 0; height: 0; display: none; }


/* ─────────── ۱. توکن‌ها ─────────── */
:root {
  /* رنگ‌های روز — پالتِ فروشگاه از همین‌جا می‌آید و تمِ شب فقط همین‌ها را عوض می‌کند */
  --sh-paper: #F4F1EA;
  --sh-paper-2: #EDE9DF;
  --sh-surface: #FFFFFF;
  --sh-ink: #171512;
  --sh-ink-2: #3E3A33;
  --sh-muted: #807A6E;
  --sh-line: #E4DFD3;
  --sh-dark: #14130F;
  --sh-accent: #FF4A1C;
  --sh-accent-soft: #FDE7DE;
  --sh-on-accent: #FFFFFF;
  --sh-ok: #16A34A;
  --sh-danger: #D33A2C;

  /* فاصله — مقیاسِ ۴ پیکسلی؛ هیچ عددِ دلبخواهی در اجزا نوشته نمی‌شود */
  --sh-1: 4px;  --sh-2: 8px;  --sh-3: 12px; --sh-4: 16px;
  --sh-5: 20px; --sh-6: 24px; --sh-8: 32px; --sh-10: 40px;
  --sh-12: 48px; --sh-16: 64px;

  /* شعاع */
  --sh-r-sm: 10px; --sh-r: 14px; --sh-r-lg: 20px; --sh-r-xl: 28px; --sh-r-pill: 999px;

  /* قلم — با clamp، پس یک تعریف برای موبایل تا مانیتورِ بزرگ کافی است */
  --sh-font: 'Vazirmatn', Tahoma, system-ui, sans-serif;
  /* مقیاسِ فشردهٔ فروشگاهی (الگو: دیجی‌کالا). هر مقدار بین موبایل و دسکتاپ
     با clamp حرکت می‌کند، پس یک تعریف برای هر دو کافی است. */
  --sh-text-xs: clamp(11px, .9vw, 12px);   /* ریزنویس: برند، واحد، شمارنده */
  --sh-text-sm: clamp(12px, 1vw, 13px);    /* متنِ کمکی، برچسب فرم */
  --sh-text: clamp(13px, 1.1vw, 14px);     /* بدنه — پرکاربردترین */
  --sh-text-lg: clamp(14px, 1.3vw, 16px);  /* قیمت، دکمهٔ اصلی */
  --sh-h3: clamp(14px, 1.4vw, 16px);       /* تیترِ کارت/پنل */
  --sh-h2: clamp(17px, 1.9vw, 20px);       /* تیترِ بخش */
  --sh-h1: clamp(19px, 2.6vw, 24px);       /* تیترِ صفحه */
  --sh-h1-hero: clamp(24px, 4.2vw, 40px);  /* فقط هیرو، که تبلیغاتی است */

  /* سایه و حرکت */
  --sh-shadow: 0 18px 40px rgba(20, 18, 15, .10);
  --sh-shadow-sm: 0 1px 2px rgba(20, 18, 15, .06);
  --sh-ease: .22s cubic-bezier(.4, 0, .2, 1);

  /* چیدمان */
  --sh-container: 1240px;
  --sh-card-min: 210px; /* کفِ عرضِ کارتِ کالا — تعدادِ ستون از این درمی‌آید */
}

/* تمِ شب — همان توکن‌ها با مقدارِ تیره. هیچ جزئی رنگِ خودش را هاردکد نمی‌کند. */
.sh[data-theme="dark"], .page[data-theme="dark"],
html[data-theme="dark"] .sh, html[data-theme="dark"] .page {
  --sh-paper: #17150F;
  --sh-paper-2: #1E1B15;
  --sh-surface: #241F18;
  --sh-ink: #F5F1E7;
  --sh-ink-2: #C9C4B7;
  --sh-muted: #948E80;
  --sh-line: #332C22;
  --sh-dark: #0A0908;
  --sh-accent-soft: #3A2418;
  --sh-ok: #4ADE80;
  --sh-danger: #FF7A6E;
  --sh-shadow: 0 18px 40px rgba(0, 0, 0, .5);
}

/* ─────────── ۲. پایه ─────────── */
@font-face {
  font-family: 'Vazirmatn';
  src: url('/fonts/Vazirmatn-Regular.woff2') format('woff2');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('/fonts/Vazirmatn-Bold.woff2') format('woff2');
  font-weight: 700 900; font-display: swap;
}

.sh *, .sh *::before, .sh *::after { box-sizing: border-box; }
/* عمداً font-size/line-height اینجا ست نمی‌شود: اندازه‌ها مالِ خودِ نمونه‌اند؛
   این شیت فقط توکن و اجزاء می‌دهد و چیزی را بازنویسی نمی‌کند. */
.sh { margin: 0; -webkit-font-smoothing: antialiased; }
.sh a { color: inherit; text-decoration: none; }
.sh img { display: block; max-width: 100%; height: auto; }
.sh ul { list-style: none; margin: 0; padding: 0; }
.sh button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
.sh input, .sh textarea, .sh select { font: inherit; color: inherit; }
.sh p { margin: 0; }
.sh ::selection { background: var(--sh-accent); color: var(--sh-on-accent); }

/* فوکوسِ دیده‌شدنی — الزامِ دسترس‌پذیری، نه تزئین */
.sh :focus-visible { outline: 2px solid var(--sh-accent); outline-offset: 2px; border-radius: 6px; }

/* ─────────── ۳. اجزا ─────────── */

/* ظرف */
.sh-wrap { max-width: var(--sh-container); margin: 0 auto; padding-inline: var(--sh-4); }
@media (min-width: 720px) { .sh-wrap { padding-inline: var(--sh-6); } }
.sh-section { padding-top: var(--sh-10); }

/* نوارِ اعلان */
.sh-ticker { background: var(--sh-dark); color: #F4F1EA; font-size: var(--sh-text-sm);
  overflow: hidden; white-space: nowrap; }
.sh-ticker__row { display: flex; align-items: center; gap: 44px; padding: 9px 0;
  width: max-content; animation: sh-ticker 26s linear infinite; }
@keyframes sh-ticker { from { transform: translateX(0) } to { transform: translateX(-50%) } }
@media (prefers-reduced-motion: reduce) { .sh-ticker__row { animation: none } }

/* هدر */
.sh-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--sh-paper) 85%, transparent);
  backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--sh-line); }
.sh-header__bar { display: flex; align-items: center; gap: var(--sh-4);
  padding-block: var(--sh-3); max-width: var(--sh-container); margin: 0 auto; padding-inline: var(--sh-4); }
.sh-logo { display: flex; align-items: center; gap: var(--sh-3); flex-shrink: 0; }
.sh-logo__mark { width: 44px; height: 44px; border-radius: var(--sh-r); background: var(--sh-ink);
  color: var(--sh-paper); display: grid; place-items: center; font-size: 20px; flex-shrink: 0; }
.sh-logo__name { font-size: var(--sh-text-lg); font-weight: 800; display: block; }
.sh-logo__tag { font-size: var(--sh-text-xs); color: var(--sh-muted); display: block; }

.sh-nav { display: flex; gap: var(--sh-1); margin-inline: auto; min-width: 0; overflow-x: auto;
  scrollbar-width: none; }
.sh-nav::-webkit-scrollbar { display: none; }
.sh-nav a { padding: 9px 14px; border-radius: var(--sh-r-sm); font-weight: 600;
  color: var(--sh-ink-2); white-space: nowrap; transition: background var(--sh-ease), color var(--sh-ease); }
.sh-nav a:hover { background: var(--sh-surface); color: var(--sh-ink); }
.sh-nav a[aria-current="page"] { background: var(--sh-surface); color: var(--sh-ink); box-shadow: var(--sh-shadow-sm); }

.sh-actions { display: flex; align-items: center; gap: var(--sh-2); flex-shrink: 0; }
.sh-icon-btn { width: 42px; height: 42px; border-radius: var(--sh-r-sm); background: var(--sh-surface);
  display: grid; place-items: center; box-shadow: var(--sh-shadow-sm); transition: color var(--sh-ease); }
.sh-icon-btn:hover { color: var(--sh-accent); }
.sh-cart-btn { position: relative; display: flex; align-items: center; gap: var(--sh-2);
  height: 42px; padding-inline: var(--sh-4); border-radius: var(--sh-r-sm);
  background: var(--sh-ink); color: var(--sh-paper); font-weight: 700; font-size: var(--sh-text-sm); }
.sh-cart-btn:hover { background: var(--sh-accent); color: var(--sh-on-accent); }
.sh-badge { position: absolute; top: -6px; inset-inline-start: -6px; min-width: 20px; height: 20px;
  padding-inline: 5px; border-radius: var(--sh-r-pill); background: var(--sh-accent); color:var(--sh-on-accent);
  font-size: 11px; font-weight: 800; display: grid; place-items: center; }

/* دکمه‌ها */
.sh-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sh-2);
  height: 48px; padding-inline: var(--sh-6); border-radius: var(--sh-r); font-weight: 800;
  font-size: var(--sh-text); transition: filter var(--sh-ease), background var(--sh-ease); }
.sh-btn--primary { background: var(--sh-accent); color: var(--sh-on-accent); }
.sh-btn--primary:hover { filter: brightness(1.08); }
.sh-btn--ghost { background: var(--sh-surface); border: 1px solid var(--sh-line); color: var(--sh-ink); }
.sh-btn--block { width: 100%; }
.sh-btn--lg { height: 56px; font-size: var(--sh-text-lg); }
.sh-btn[disabled] { opacity: .6; cursor: default; }

/* گریدِ کالا — تعدادِ ستون از عرضِ کارت درمی‌آید، نه از عددِ ثابت */
.sh-grid { display: grid; gap: var(--sh-4);
  grid-template-columns: repeat(auto-fill, minmax(var(--sh-card-min), 1fr)); }
@media (max-width: 560px) { .sh-grid { --sh-card-min: 150px; gap: var(--sh-3); } }

/* کارتِ کالا */
.sh-card { position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: var(--sh-surface); border: 1px solid var(--sh-line); border-radius: var(--sh-r-lg);
  transition: transform var(--sh-ease), box-shadow var(--sh-ease); }
.sh-card:hover { transform: translateY(-4px); box-shadow: var(--sh-shadow); }
.sh-card__link { position: absolute; inset: 0; z-index: 1; }
.sh-card__media { position: relative; aspect-ratio: 1 / 1; background: var(--sh-paper-2); }
.sh-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sh-card__body { display: flex; flex-direction: column; gap: 6px; padding: var(--sh-3); flex: 1; }
.sh-card__brand { font-size: var(--sh-text-xs); font-weight: 700; color: var(--sh-muted); }
.sh-card__title { font-size: var(--sh-text); font-weight: 700; line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 2.9em; }
.sh-card__foot { display: flex; align-items: center; justify-content: space-between;
  margin-top: auto; padding-top: var(--sh-1); gap: var(--sh-2); }
.sh-price { font-size: var(--sh-text-lg); font-weight: 900; }
.sh-price small { font-size: var(--sh-text-xs); font-weight: 600; color: var(--sh-muted); }
.sh-card__add { position: relative; z-index: 2; width: 38px; height: 38px; border-radius: var(--sh-r-sm);
  background: var(--sh-ink); color: var(--sh-paper); display: grid; place-items: center; }
.sh-card__add:hover { background: var(--sh-accent); color: var(--sh-on-accent); }
.sh-tag { position: absolute; top: var(--sh-3); inset-inline-end: var(--sh-3); z-index: 2;
  padding: 3px 9px; border-radius: var(--sh-r-pill); font-size: 11px; font-weight: 800;
  background: var(--sh-ink); color: var(--sh-paper); }
.sh-tag--accent { background: var(--sh-accent); color:var(--sh-on-accent); }
.sh-out { font-size: var(--sh-text-xs); color: var(--sh-danger); font-weight: 700; }

/* پنل/کارتِ عمومی */
.sh-panel { background: var(--sh-surface); border: 1px solid var(--sh-line);
  border-radius: var(--sh-r-lg); padding: var(--sh-5); }
.sh-panel--flat { background: var(--sh-paper-2); }

/* سرتیترِ بخش */
.sh-head { display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sh-4); margin-bottom: var(--sh-5); flex-wrap: wrap; }
.sh-eyebrow { display: block; font-size: var(--sh-text-sm); font-weight: 800; color: var(--sh-accent); }
.sh-sub { color: var(--sh-muted); font-size: var(--sh-text-sm); }

/* فرم */
.sh-field { display: flex; flex-direction: column; gap: 6px; }
.sh-label { font-size: var(--sh-text-sm); font-weight: 700; color: var(--sh-ink-2); }
.sh-input, .sh-textarea { height: 48px; padding-inline: var(--sh-3); border-radius: var(--sh-r-sm);
  border: 1px solid var(--sh-line); background: var(--sh-paper-2); font-size: var(--sh-text);
  transition: border-color var(--sh-ease), background var(--sh-ease); width: 100%; }
.sh-textarea { height: auto; padding: var(--sh-3); resize: vertical; line-height: 1.9; }
.sh-input:focus, .sh-textarea:focus { border-color: var(--sh-accent); outline: none; }
.sh-input[aria-invalid="true"], .sh-textarea[aria-invalid="true"] {
  border-color: var(--sh-danger); background: color-mix(in srgb, var(--sh-danger) 7%, transparent); }
.sh-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sh-3); }
@media (max-width: 620px) { .sh-form-grid { grid-template-columns: 1fr; } }

/* انتخابِ رادیویی (ارسال/پرداخت) */
.sh-choice { display: flex; align-items: center; gap: var(--sh-3); padding: var(--sh-3) var(--sh-4);
  border: 1px solid var(--sh-line); border-radius: var(--sh-r); background: var(--sh-paper-2);
  cursor: pointer; transition: border-color var(--sh-ease); }
.sh-choice:has(input:checked) { border-color: var(--sh-accent); }
.sh-choice input { width: 18px; height: 18px; accent-color: var(--sh-accent); flex-shrink: 0; }
.sh-choice__text { flex: 1; min-width: 0; }
.sh-choice__text b { display: block; font-size: var(--sh-text); }
.sh-choice__text small { display: block; font-size: var(--sh-text-xs); color: var(--sh-muted); }

/* پیام‌ها */
.sh-alert { padding: var(--sh-3) var(--sh-4); border-radius: var(--sh-r-sm); font-weight: 700;
  font-size: var(--sh-text-sm); }
.sh-alert--error { background: color-mix(in srgb, var(--sh-danger) 12%, transparent); color: var(--sh-danger); }
.sh-alert--ok { background: color-mix(in srgb, var(--sh-ok) 12%, transparent); color: var(--sh-ok); }

/* چیدمانِ دوستونه (سبد/تسویه/کالا) — در موبایل زیرِ هم */
.sh-split { display: grid; gap: var(--sh-5); align-items: start; }
@media (min-width: 900px) { .sh-split { grid-template-columns: 1.6fr .9fr; } }
.sh-sticky { position: sticky; top: 90px; }
@media (max-width: 899px) { .sh-sticky { position: static; } }

/* حالتِ خالی */
.sh-empty { text-align: center; padding: var(--sh-12) var(--sh-4);
  background: var(--sh-surface); border: 1px dashed var(--sh-line); border-radius: var(--sh-r-lg); }
.sh-empty__icon { font-size: 44px; margin-bottom: var(--sh-2); }

/* فوتر */
.sh-footer { background: var(--sh-surface); border-top: 1px solid var(--sh-line);
  color: var(--sh-muted); margin-top: var(--sh-16); }
.sh-footer__cols { display: grid; gap: var(--sh-8); padding-block: var(--sh-10) var(--sh-6);
  grid-template-columns: 1fr; }
@media (min-width: 640px) { .sh-footer__cols { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .sh-footer__cols { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } }
.sh-footer h4 { font-size: var(--sh-text); font-weight: 800; color: var(--sh-ink); margin: 0 0 var(--sh-3); }
.sh-footer li { margin-bottom: 9px; }
.sh-footer a:hover { color: var(--sh-accent); }
.sh-footer__bottom { border-top: 1px solid var(--sh-line); }
.sh-footer__bottom-in { display: flex; align-items: center; justify-content: space-between;
  gap: var(--sh-4); flex-wrap: wrap; padding-block: var(--sh-5); font-size: var(--sh-text-sm); }
.sh-social { display: flex; gap: var(--sh-2); margin-top: var(--sh-4); }
.sh-social a { width: 40px; height: 40px; border-radius: var(--sh-r-sm); background: var(--sh-paper-2);
  display: grid; place-items: center; color: var(--sh-ink); }
.sh-social a:hover { background: var(--sh-accent); color:var(--sh-on-accent); }
.sh-trust { display: flex; gap: var(--sh-3); flex-wrap: wrap; }
.sh-trust__item { width: 78px; height: 78px; border-radius: var(--sh-r); background: var(--sh-paper-2);
  border: 1px solid var(--sh-line); display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: var(--sh-1); text-align: center; color: var(--sh-ink); }
.sh-trust__item span { font-size: 10px; font-weight: 700; }

/* ─────────── ۴. کمکی‌ها ─────────── */
.sh-row { display: flex; align-items: center; gap: var(--sh-2); }
.sh-between { display: flex; align-items: center; justify-content: space-between; gap: var(--sh-3); }
.sh-stack { display: flex; flex-direction: column; gap: var(--sh-3); }
.sh-muted { color: var(--sh-muted); }
.sh-accent { color: var(--sh-accent); }
.sh-sm { font-size: var(--sh-text-sm); }
.sh-xs { font-size: var(--sh-text-xs); }
.sh-bold { font-weight: 800; }
.sh-hr { height: 1px; background: var(--sh-line); border: 0; margin-block: var(--sh-4); }
.sh-skip { position: absolute; inset-inline-start: -9999px; }
.sh-skip:focus { inset-inline-start: var(--sh-4); top: var(--sh-4); z-index: 100;
  background: var(--sh-accent); color:var(--sh-on-accent); padding: var(--sh-2) var(--sh-4); border-radius: var(--sh-r-sm); }

/* ── فوترِ چسبیده به کف ─────────────────────────────────────────
   صفحهٔ کوتاه (۴۰۴، سبدِ خالی، رسیدِ سفارش) نباید فوتر را وسطِ صفحه رها کند.
   ریشه یک ستونِ تمام‌ارتفاع است و فوتر با margin-top:auto به کف می‌چسبد. */
.page.sh { display: flex; flex-direction: column; min-height: 100vh; }
.page.sh > footer { margin-top: auto; }
.page.sh > .fastsit-credit { margin-top: 0; }

/* ── کادرهای عددی: رقمِ لاتین با شکلِ لاتین ───────────────────── */
input[inputmode="tel"], input[inputmode="numeric"], input[type="tel"],
.sh-num, input[dir="ltr"] {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, system-ui, sans-serif;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: .5px;
}

/* پنلِ کاربری: ستونِ پروفایل پهن‌تر از ستونِ سفارش‌ها */
@media (min-width: 900px) { .sh-split { grid-template-columns: 1.15fr .85fr; } }

/* ── واکنشِ سراسریِ کلیک‌شدنی‌ها (تولیدشده از tpl/hover-css.html) ──
   ⚠️ دستی ویرایش نکن. منبع را عوض کن و tools/sync_hover_css.py را بزن. */
/* ── واکنشِ سراسریِ چیزهای کلیک‌شدنی به موس ─────────────────────────────
   *
   * ⚠️ چرا یک قاعده‌ی سراسری و نه یک کلاس روی هر دکمه: در قالب‌ها و JSهای این
   * پروژه ۵۵۳ دکمه هست که ۴۶۳ تایشان هیچ حالتِ hover نداشتند، و ۲۵۷ لینکِ
   * دکمه‌نما (زمینه‌ی رنگی) که ۲۴۰ تایشان هم نداشتند. کلاس‌گذاشتن روی تک‌تک
   * یعنی هفتصد جای فراموش‌شدنی، و هر چیزی که فردا اضافه شود باز بی‌واکنش
   * می‌ماند. این قاعده هم امروز همه را می‌گیرد هم فردا را.
   *
   * چرا brightness و نه عوض‌کردنِ رنگ: در این پروژه دکمه‌ها زمینه‌ی یکدست،
   * گرادیان، شیشه‌ای و بی‌زمینه (فقط متن) دارند. رنگِ ثابت روی یکی خوب می‌افتد
   * و طراحیِ بقیه را خراب می‌کند؛ brightness هر چهار حالت را روشن/تیره می‌کند
   * بی‌آنکه تصمیمِ رنگیِ هیچ‌کدام را عوض کند.
   *
   * پرشِ ۱ پیکسلی هم عمدی است: روی چیزی که زمینه ندارد (فقط متن) ضریبِ
   * روشنایی حس نمی‌شود چون چیزی نیست که روشن یا تیره شود. حرکت همه‌جا حس
   * می‌شود. :active برعکسش می‌کند تا فشردن هم حس شود، نه فقط رسیدنِ موس.
   *
   * ⚠️ لینک‌ها فقط روشنایی می‌گیرند و پرش نمی‌گیرند: نمی‌شود در CSS تشخیص داد
   * کدام <a> دکمه است و کدام وسطِ یک بندِ متن. پراندنِ لینکِ داخلِ متن، متن را
   * موقعِ خواندن تکان می‌دهد.
   *
   * ضریب‌ها در تمِ تاریک بزرگ‌ترند و این عمدی است: ضربِ روشنایی روی رنگِ
   * نزدیک به سیاه تغییرِ مطلقِ کمی می‌دهد، پس عددی که در تمِ روشن کافی است
   * آنجا اصلاً دیده نمی‌شود.
   *
   * انتخابگرِ [data-theme="dark"] بدونِ ریشه‌ی مشخص آمده چون این پروژه یک
   * قرارداد ندارد: تم روی html، .wc، .wc-root، .szr، .sh و .page نشانده
   * می‌شود. همه‌شان نیایِ عنصرند، پس همین یکی هر شش حالت را می‌گیرد.
   */

  /* ⚠️ [style*="cursor:pointer"] مهم‌ترین انتخابگرِ این فایل است، نه یک حقه:
     در این پروژه خیلی از دکمه‌ها اصلاً <button> نیستند. نمونه‌ی زنده، دکمه‌ی
     «انتخابِ فایلِ پشتیبان» — یک <span> داخلِ <label> با یک input[type=file]ِ
     مخفی. نه تگِ معنایی دارد نه data-act (آن روی inputِ مخفی است)، پس هیچ
     قاعده‌ی مبتنی بر تگ نمی‌گرفتش. ۶۱ عنصر دقیقاً همین‌طور بودند.
     ولی هر کدامشان cursor:pointer داشتند — یعنی خودِ نویسنده اعلام کرده بود
     «این کلیک‌شدنی است». همان اعلام، دقیق‌ترین نشانه‌ی موجود است.
     شمرده شد پیش از افزودن: تنها املای به‌کاررفته cursor:pointer است (۲۱۵ بار)،
     هیچ کلیک‌شدنی داخلِ کلیک‌شدنیِ دیگر نیست (پس روشنایی دوبار اعمال نمی‌شود)،
     و هیچ پس‌زمینه‌ی مودالی این نشانه را ندارد. */

  /* data-act قراردادِ خودِ این پروژه برای «این کلیک‌شدنی است» — روی div و img
     و video هم می‌نشیند، نه فقط button.
     ⚠️ استثنای ‎-close/-no: آن‌ها پس‌زمینه‌ی تمام‌صفحه‌ی مودال‌اند («بیرون را
     بزن تا بسته شود»). روشن‌کردنِ کلِ پرده هنگامِ عبورِ موس غلط است. دکمه‌ی
     ضربدرِ واقعی <button> است و از قاعده‌ی بالایی‌اش واکنش می‌گیرد. */
  button,[role="button"],input[type="submit"],input[type="button"],input[type="reset"],
  input[type="file"],summary,label[for],
  [data-act]:not(button):not(input):not(select):not(textarea):not([data-act$="-close"]):not([data-act$="-no"]),
  .btn{cursor:pointer}

  button,[role="button"],input[type="submit"],input[type="button"],input[type="reset"],
  [data-act]:not(button):not(input):not(select):not(textarea):not([data-act$="-close"]):not([data-act$="-no"]),
  [style*="cursor:pointer"],
  .btn{transition:filter .15s ease,transform .12s ease}
  a[href]{transition:filter .15s ease}

  button:hover,[role="button"]:hover,input[type="submit"]:hover,
  input[type="button"]:hover,input[type="reset"]:hover,.btn:hover,
  [data-act]:not(button):not(input):not(select):not(textarea):not([data-act$="-close"]):not([data-act$="-no"]):hover,
  [style*="cursor:pointer"]:hover{
    filter:brightness(.88);transform:translateY(-1px)}
  button:active,[role="button"]:active,input[type="submit"]:active,
  input[type="button"]:active,input[type="reset"]:active,.btn:active,
  [data-act]:not(button):not(input):not(select):not(textarea):not([data-act$="-close"]):not([data-act$="-no"]):active,
  [style*="cursor:pointer"]:active{
    filter:brightness(.8);transform:translateY(1px)}

  a[href]:hover{filter:brightness(.88)}
  a[href]:active{filter:brightness(.8)}

  [data-theme="dark"] button:hover,[data-theme="dark"] [role="button"]:hover,
  [data-theme="dark"] input[type="submit"]:hover,[data-theme="dark"] input[type="button"]:hover,
  [data-theme="dark"] input[type="reset"]:hover,[data-theme="dark"] .btn:hover,
  [data-theme="dark"] a[href]:hover,
  [data-theme="dark"] [data-act]:not(button):not(input):not(select):not(textarea):not([data-act$="-close"]):not([data-act$="-no"]):hover,
  [data-theme="dark"] [style*="cursor:pointer"]:hover{
    filter:brightness(1.4)}
  [data-theme="dark"] button:active,[data-theme="dark"] [role="button"]:active,
  [data-theme="dark"] input[type="submit"]:active,[data-theme="dark"] input[type="button"]:active,
  [data-theme="dark"] input[type="reset"]:active,[data-theme="dark"] .btn:active,
  [data-theme="dark"] a[href]:active,
  [data-theme="dark"] [data-act]:not(button):not(input):not(select):not(textarea):not([data-act$="-close"]):not([data-act$="-no"]):active,
  [data-theme="dark"] [style*="cursor:pointer"]:active{
    filter:brightness(1.6)}

  /* چیزِ ازکارافتاده نباید وعده‌ی کلیک بدهد — نه نشانگر، نه روشن‌شدن. */
  button:disabled,button[disabled],[role="button"][aria-disabled="true"],
  input:disabled,.btn:disabled,.btn.is-disabled{
    cursor:not-allowed;filter:none!important;transform:none!important;opacity:.55}

  /* دسترسی با کیبورد: تا امروز هیچ نشانه‌ای نداشت. focus-visible است نه focus،
     پس با موس حلقه‌ی زشت نمی‌آید و فقط برای کاربرِ Tab دیده می‌شود. */
  button:focus-visible,[role="button"]:focus-visible,input[type="submit"]:focus-visible,
  input[type="button"]:focus-visible,.btn:focus-visible,a[href]:focus-visible{
    outline:2px solid var(--ind,#3D2AE8);outline-offset:2px}

  /* کسی که کاهشِ حرکت خواسته، گذارِ نرم هم نمی‌خواهد. */
  @media (prefers-reduced-motion:reduce){
    button,[role="button"],input[type="submit"],input[type="button"],
    input[type="reset"],a[href],.btn,[data-act],[style*="cursor:pointer"]{transition:none;transform:none!important}
  }
  /* ── ستاره‌ها ───────────────────────────────────────────────────────────
   * ستاره در این پروژه ۱۵ جا کشیده می‌شود و رنگش را از --accent می‌گرفت،
   * یعنی در هر سایتی رنگِ همان سایت. نتیجه: ستاره‌ی سبزآبی، بنفش، مرجانی —
   * در حالی که ستاره یک قراردادِ جهانی است و طلایی خوانده می‌شود.
   * حالا یک نشانه‌ی مرکزی دارد که همه‌جا یکی است.
   *
   * ⚠️ color با !important است چون بیشترِ ستاره‌ها رنگشان را از استایلِ inline
   * می‌گیرند (و ویجتِ امتیازدهی از JS) — قاعده‌ی بدونِ !important به آن‌ها
   * می‌بازد. اندازه دست‌نخورده می‌ماند: هر جا اندازه‌ی خودش را دارد.
   */
  /* ⚠️ --fav جداست و عمداً به --accent وصل نیست: رنگِ accent با تمِ هر
     فروشگاه عوض می‌شود (theme-cobalt، theme-emerald و…)، پس قلبِ علاقه‌مندی
     در یکی آبی می‌شد در یکی سبز. قلب مثلِ ستاره یک قراردادِ جهانی است و
     قرمز خوانده می‌شود — نباید تابعِ تمِ فروشنده باشد. */
  :root{--star:#F5B301;--star-off:rgba(150,150,150,.32);--fav:#E8384F}
  .stars,.star{color:var(--star)!important;
    text-shadow:0 0 5px rgba(245,179,1,.55),0 0 12px rgba(245,179,1,.28)}
  /* تلألو: نبضِ آرامِ درخشش، نه چشمک. سه ثانیه یعنی دیده می‌شود ولی
     حواس را از خواندنِ صفحه پرت نمی‌کند. */
  @keyframes starGlow{
    0%,100%{text-shadow:0 0 5px rgba(245,179,1,.55),0 0 12px rgba(245,179,1,.28)}
    50%    {text-shadow:0 0 9px rgba(245,179,1,.85),0 0 20px rgba(245,179,1,.45)}
  }
  .stars,.star{animation:starGlow 3s ease-in-out infinite}
  /* ستاره‌ی خاموشِ ویجتِ امتیازدهی نه طلاست نه می‌درخشد. */
  [data-off="1"]{color:var(--star-off)!important;text-shadow:none;animation:none}
  @media (prefers-reduced-motion:reduce){.stars,.star{animation:none}}