/* =====================================================================
   base.css — چیزهایی که فروشگاه و پنل هر دو لازم دارند.
   هیچ رنگ ثابتی اینجا نیست؛ همه چیز روی توکن‌های طراحی سوار است تا
   store.base.css و admin.base.css تنها منبع رنگ بمانند.
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: Lahzeh, Vazirmatn, system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  line-height: 1.5;
  /* ارقام هم‌عرض: بدون این، عدد قیمت در جدول می‌لرزد */
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; text-wrap: pretty; }
p { margin: 0; text-wrap: pretty; }
table { border-collapse: collapse; width: 100%; }

/* ⚠️ جای تصویر با نسبت ۳:۴ برای پوشاک از همین حالا رزرو می‌شود (R-04).
   نقد فنی می‌گفت «وقتی تصویر واقعی بیاید، چیدمان پنج صفحه باید دوباره
   طراحی شود». با نسبت ثابت، چیدمان چه با عکس چه بی‌عکس یکی است و
   پرش چیدمان (CLS) صفر می‌ماند. */
.thumb {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--surf2, #f2efe9);
  display: block;
}
.thumb > img { width: 100%; height: 100%; object-fit: cover; }

/* وقتی عکسی وجود ندارد، جای خالی حرف می‌زند نه اینکه سفید بماند */
.thumb--empty {
  display: flex; align-items: center; justify-content: center;
  color: var(--mut, #7C7365); font-size: 11px; text-align: center;
  background:
    repeating-linear-gradient(45deg,
      var(--surf2, #f2efe9) 0 10px,
      color-mix(in oklab, var(--surf2, #f2efe9) 88%, var(--tx, #000)) 10px 20px);
}

/* برای خواننده‌ی صفحه دیده می‌شود، برای چشم نه */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* پرش‌به‌محتوا — اولین چیزی که با Tab می‌آید.
   ⚠️ پنهان‌سازی با clip-path است، نه آفستِ ‎-9999px: عنصر fixed که در
   راستای افقی بیرون از ویوپورت بنشیند، در کرومیوم scrollWidth ریشه را
   بزرگ می‌کند و صفحه‌ی موبایل به پهنا کشیده می‌شود (سرریز ۳۹۰px پنل). */
.skip-link {
  position: fixed; inset-inline-start: 0; top: 0; z-index: 9999;
  background: var(--brand, var(--accent, #2F7C72)); color: #fff; padding: 10px 16px;
  clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; white-space: nowrap;
}
.skip-link:focus {
  clip-path: none; width: auto; height: auto; overflow: visible; white-space: normal;
}

/* اسکلت بارگذاری — R-05 */
.skeleton {
  background: linear-gradient(90deg,
    var(--surf2, #eee) 25%,
    color-mix(in oklab, var(--surf2, #eee) 55%, var(--surf, #fff)) 37%,
    var(--surf2, #eee) 63%);
  background-size: 400% 100%;
  animation: hhShimmer 1.3s ease-in-out infinite;
  display: block;
}
@keyframes hhShimmer { 0% { background-position: 100% 0 } 100% { background-position: -100% 0 } }

/* حالت بدون‌جاوااسکریپت: اسکلت‌ها نباید تا ابد بلرزند */
.no-js .skeleton { animation: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* پنجره‌ی مودال/کشو — قفل اسکرول بدنه */
body.is-locked { overflow: hidden; }