/* ==========================================================================
   base.css — فونت، ریست، راست‌چین، تایپوگرافی
   ========================================================================== */

/* ---------- فونت ----------
   خانواده «IRANSansX» عیناً مطابق توکن مرجع نگه داشته شده.
   فایل حاضر Vazirmatn (مجوز SIL OFL) به‌عنوان جایگزین آزاد است؛
   برای استفاده از فونت اصلی، فایل لایسنس‌دار را در همین مسیر جایگزین کنید.
   ------------------------------------------------------------------------- */
@font-face {
  font-family: "IRANSansX";
  src: url("../fonts/iransansx/IRANSansXV.woff2") format("woff2");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}

/* ---------- ریست ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body,
h1, h2, h3, h4,
p, figure, blockquote,
dl, dd, ul, ol {
  margin: 0;
  padding: 0;
}

ul[class], ol[class] { list-style: none; }

/* صفت hidden باید همیشه غالب باشد؛
   بدون این قاعده، هر display:flex روی همان کلاس آن را بی‌اثر می‌کند. */
[hidden] { display: none !important; }

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

img { height: auto; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ---------- بدنه ---------- */
body {
  font-family: var(--sadaf-font-family);
  font-size: 16px;
  line-height: 1.75;
  font-weight: 400;
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: start;
}

/* گاتر اسکرول‌بار همیشه رزرو می‌شود. با این کار برداشتن اسکرول هنگام قفل بدن،
   هیچ جهش چیدمانی (jump) نمی‌سازد و پوسته سر جایش می‌ماند؛ پس نیازی به جبران پدینگ نیست. */
html { scrollbar-gutter: stable; }

/* قفل اسکرول هنگام باز بودن کشو / شیت / لایت‌باکس.
   روی body است (نه html) چون overflow:hidden روی ریشه، چسبندگی هدر (position:sticky)
   را در کروم از کار می‌اندازد و همان باعث پرش اسکرول می‌شود. */
body.is-locked {
  overflow: hidden;
}

/* ---------- تایپوگرافی ---------- */
h1 {
  font-size: var(--ref-h1-size);
  font-weight: var(--ref-h1-weight);
  line-height: var(--ref-h1-leading);
  color: var(--ref-h1-color);
  letter-spacing: -.2px;
}

/* روی گوشی‌های کوچک، تیتر اصلی یک پله کوچک می‌شود (مشخصات واکنش‌گرایی، ۳۲۰px).
   تیترهای اختصاصی هر صفحه سلکتور قوی‌تر دارند و از این قاعده اثر نمی‌گیرند. */
@media (max-width: 340px) {
  h1 { font-size: 20px; }
}

h2 {
  font-size: var(--ref-h2-size);
  font-weight: var(--ref-h2-weight);
  line-height: var(--ref-h2-leading);
  color: var(--ref-h2-color);
}

h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--sadaf-text);
}

p { color: var(--sadaf-muted); }

small { font-size: 11.5px; line-height: 1.6; }

strong, b { font-weight: 700; }

/* ---------- اعداد و قیمت ---------- */
.num,
.price,
[data-number] {
  font-family: var(--sadaf-number-font);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: 0;
}

/* ---------- آیکون‌ها ---------- */
svg.icon,
svg[viewBox="0 0 24 24"] {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

svg.icon--sm { width: 16px; height: 16px; stroke-width: 1.8; }
svg.icon--lg { width: 24px; height: 24px; }

/* ---------- فوکوس ---------- */
:focus-visible {
  outline: 2px solid var(--sadaf-gold);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------- کمکی ---------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.section-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.section-head svg {
  width: 20px;
  height: 20px;
  color: var(--sadaf-gold);
}

.clamp-1 {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}