/* =========================================================
   DM Gold — header.css
   تاپ‌بار قیمت، نوار ناوبری شفاف/چسبان، مگامنو، دراور موبایل،
   آیکون‌ها و مدال جدول قیمت
   ========================================================= */


/* =========================================================
   شروع: تاپ بار قیمت (Price Ticker Bar)
   ========================================================= */
.ticker-bar {
  position: relative;
  z-index: 41;
  background: var(--neutral-900);
  color: var(--neutral-100);
  font-size: 12.5px;
  cursor: pointer;
}

.ticker-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  /* ⚠ padding-block نه shorthand: این المان کلاسِ .wrap را هم دارد و
     shorthand، پدینگِ افقیِ .wrap را صفر می‌کند (چون header.css بعد از
     base.css بار می‌شود و وزنشان برابر است) ⇒ محتوا به لبهٔ صفحه می‌چسبد. */
  padding-block: 9px;
  flex-wrap: wrap;
}

.ticker-track { overflow: hidden; flex: 1; min-width: 0; }
.ticker-items { display: flex; gap: 22px; flex-wrap: wrap; }
.ticker-items[aria-hidden] { display: none; }

.ticker-item { white-space: nowrap; }
.ticker-item span:first-child { color: var(--neutral-400); }

.ticker-item b {
  font-family: var(--font-b);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--accent-300);
}

.ticker-updated { color: var(--neutral-500); white-space: nowrap; }

.up { color: #8fd39a; }
.down { color: #e0958a; }
/* =========================================================
   پایان: تاپ بار قیمت
   ========================================================= */


/* =========================================================
   شروع: مدال جدول قیمت (با کلیک روی تاپ‌بار باز می‌شود)
   ========================================================= */
.price-modal-scrim {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10, 8, 5, .5);
  z-index: 90;
}

.price-modal-scrim.open { display: block; }

.price-modal {
  display: none;
  position: fixed;
  z-index: 91;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* جدولِ افزونه ستون‌های بیشتری دارد، پس در آن حالت مودال پهن‌تر می‌شود */
  width: min(92vw, 460px);
  max-height: 80vh;
  overflow-y: auto;
  background: var(--bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.price-modal.open { display: block; }

.price-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--divider);
  position: sticky;
  top: 0;
  background: var(--bg);
}

.price-modal-head h3 { margin: 0; font-size: 17px; }

.price-modal-close {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--divider);
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
}

.price-modal-close:hover { background: var(--surface); }
.price-modal-close svg { width: 16px; height: 16px; }

/* جدولِ خودِ افزونهٔ dm-gold داخلِ مودال — استایلِ خودش را دارد، اینجا فقط جا
   داده می‌شود (پهن‌تر + پدینگ) و اجازهٔ اسکرولِ افقی می‌گیرد تا ستون‌هایش نریزند. */
.price-modal:has(.price-modal-plugin) { width: min(96vw, 760px); }
.price-modal-plugin { padding: 16px 18px 20px; overflow-x: auto; }

.price-table { width: 100%; border-collapse: collapse; }
.price-table td { padding: 13px 20px; font-size: 14px; border-bottom: 1px solid var(--divider); }
.price-table td:first-child { color: var(--neutral-600); }

.price-table td:last-child {
  text-align: left;
  font-family: var(--font-b);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.price-table tr:last-child td { border-bottom: none; }
/* =========================================================
   پایان: مدال جدول قیمت
   ========================================================= */


/* =========================================================
   شروع: نوار ناوبری (شفاف روی هیرو، سفید بعد از اسکرول)
   ========================================================= */
.nav {
  border-bottom: 1px solid transparent;
  position: sticky;
  top: 0;
  z-index: 48;
  background: transparent;
  transition: background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
}

.nav.scrolled {
  background: rgba(246, 244, 241, .92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom-color: var(--divider);
}

/* در صفحات داخلی (بدون هیروی تیره) هدر از ابتدا حالت روشن دارد */
.nav.nav-solid {
  background: rgba(246, 244, 241, .92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom-color: var(--divider);
}

.nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  /* ⚠ همان دلیلِ .ticker-row — shorthand اینجا پدینگِ افقیِ .wrap را می‌کشت
     و کلِ هدر در موبایل و دسکتاپ به لبه می‌چسبید. */
  padding-block: 16px;
  transition: padding .3s ease;
}

.nav.scrolled .nav-row { padding-block: 10px; }

.brand {
  cursor: pointer;
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 25px;
  color: var(--neutral-100);
  letter-spacing: .01em;
  transition: color .3s ease;
}

.brand a { color: inherit; }
.nav.scrolled .brand, .nav.nav-solid .brand { color: var(--text); }

.brand img { max-height: 46px; width: auto; }

/* ⚠ flex-wrap:wrap محافظِ منویی‌ست که آیتم‌هایش زیاد می‌شوند: بدونِ آن، لینک‌ها
   یا از عرضِ نوار بیرون می‌زنند یا رویِ هم فشرده می‌شوند («توهم‌توهم‌رفتن»)؛
   با آن، اضافه‌ها خودشان روی یک خطِ دوم داخلِ همین منو می‌افتند و ارتفاعِ
   واقعیِ هدر بیشتر می‌شود — چیزی که initNavHeightSync در dm-gold-header.js
   همیشه با آن هماهنگ می‌ماند (به‌جای عددِ ثابت). */
.nav-links { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* =========================================================
   حالتِ اختیاریِ «هدرِ دو ردیفه» (تنظیماتِ قالب ← هدر): ردیفِ اول
   لوگو+آیکن‌ها (چیدمانِ فعلی، دست‌نخورده)، ردیفِ دوم خودِ منو با یک
   خطِ باریکِ جداکننده. با flex-basis:100% روی nav-links کارِ خودش را
   می‌کند — نیازی به عوضِ‌کردنِ ساختارِ HTML نیست، فقط چیدمانِ همان
   عناصرِ فعلی در .nav-row.
   ========================================================= */
@media (min-width: 901px) {
  .nav-two-row .nav-row { flex-wrap: wrap; row-gap: 12px; }

  .nav-two-row .nav-links {
    order: 10;
    flex-basis: 100%;
    justify-content: center;
    gap: 4px;
    padding-top: 12px;
    border-top: 1px solid rgba(248, 244, 244, .14);
  }

  .nav-two-row.scrolled .nav-links,
  .nav-two-row.nav-solid .nav-links { border-top-color: var(--divider); }
}
/* ⚠ پلِ نامرئیِ هاور: این پدینگ ناحیهٔ هاورِ .nav-item را تا لبهٔ بالایی پنل امتداد می‌دهد و
   مارجینِ منفیِ هم‌اندازه‌اش اثرِ چیدمانی‌اش را صفر می‌کند (ارتفاعِ نوار عوض نمی‌شود).
   شرطِ حیاتی: .nav-panel باید دقیقاً روی top:100% بنشیند — یعنی چسبیده به لبهٔ پایینِ همین
   پدینگ. هر فاصلهٔ اضافه (calc(100% + …)) یک نوارِ خالیِ بدونِ هاور بینِ لینک و پنل می‌سازد
   که موس با عبور از آن هاور را کنسل می‌کند و پنل می‌پرد. فاصلهٔ بصری با خودِ همین پدینگ
   ساخته می‌شود، نه با offsetِ پنل. */
.nav-item { position: relative; padding-bottom: 14px; margin-bottom: -14px; }

.nav-link {
  display: inline-block;
  padding: 10px 14px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 500;
  color: var(--neutral-100);
  border-radius: var(--radius-md);
  transition: background .18s, color .3s;
  text-decoration: none;
}

.nav.scrolled .nav-link, .nav.nav-solid .nav-link { color: var(--text); }
.nav-link:hover { background: rgba(248, 244, 244, .12); color: var(--accent-300); text-decoration: none; }
.nav.scrolled .nav-link:hover, .nav.nav-solid .nav-link:hover { background: var(--surface); color: var(--accent-700); }

.nav-link.accent { color: var(--accent-300); }
.nav.scrolled .nav-link.accent, .nav.nav-solid .nav-link.accent { color: var(--accent-700); }
/* =========================================================
   پایان: نوار ناوبری
   ========================================================= */


/* =========================================================
   شروع: پنل مگا منو
   ========================================================= */
.nav-panel {
  position: absolute;
  /* top:100% = چسبیده به لبهٔ پایینِ پدینگِ .nav-item. عمداً calc(100% + …) نیست — دلیلش
     در کامنتِ .nav-item توضیح داده شده (فاصلهٔ خالی = کنسل‌شدنِ هاور). */
  top: 100%;
  right: 0;
  min-width: 320px;
  background: var(--bg);
  border: 1px solid var(--divider);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 12px;
  display: none;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease;
  z-index: 50;
  gap: 14px;
}

.nav-panel::before {
  content: '';
  position: absolute;
  top: -6px;
  right: 22px;
  width: 5px;
  height: 5px;
  border-radius: 1px;
  background: var(--accent);
  transform: rotate(45deg);
}

.nav-item:hover .nav-panel,
.nav-panel:hover { display: flex; opacity: 1; transform: translateY(0); }

.nav-panel-links { flex: 1; min-width: 0; width: 100%; }

.nav-panel-kicker {
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--neutral-600);
  margin: 4px 10px 6px;
  font-weight: 700;
}

/* هر آیتم زیرمنو با تصویر بندانگشتی خودش (دسته یا محصول) */
.nav-panel a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  font-size: 14px;
  color: var(--text);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background .15s, color .15s;
}

.nav-panel a:hover { background: var(--surface); color: var(--accent-700); text-decoration: none; }

.nav-thumb {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  background: var(--surface);
}

.nav-thumb img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.3); transform-origin: 50% 0%; }

.nav-thumb-art {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(120% 100% at 50% 15%, #3a270d, #17140f 75%);
}

.nav-thumb-art svg { width: 82%; height: 82%; }

.nav-accordion-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  font: inherit;
  cursor: pointer;
  color: var(--neutral-100);
  text-align: inherit;
  font-family: var(--font-b);
}

.nav.scrolled .nav-accordion-trigger, .nav.nav-solid .nav-accordion-trigger { color: var(--text); }

.accordion-chevron { width: 16px; height: 16px; flex: none; transition: transform .3s ease; }
.nav-item:hover .accordion-chevron { transform: rotate(180deg); }
.nav-item.open .accordion-chevron { transform: rotate(180deg); }
/* =========================================================
   پایان: پنل مگا منو
   ========================================================= */


/* =========================================================
   شروع: آیکون‌های هدر و بج سبد خرید
   ========================================================= */
.nav-icons { display: flex; align-items: center; gap: 14px; }

/* ---- پنلِ هاوریِ آیکنِ حساب کاربری ---- */
.nav-account { position: relative; }

.nav-account-panel {
  position: absolute;
  top: 100%;
  inset-inline-end: 0;
  margin-top: 10px;
  min-width: 200px;
  background: var(--bg);
  border: 1px solid var(--divider);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 50;
}

.nav-account.has-panel:hover .nav-account-panel,
.nav-account.has-panel:focus-within .nav-account-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* پلِ نامرئیِ هاور، مثلِ .nav-item، تا فاصلهٔ خالیِ بینِ آیکن و پنل هاور را قطع نکند */
.nav-account.has-panel { padding-bottom: 14px; margin-bottom: -14px; }

.nav-account-panel a {
  padding: 10px 12px;
  border-radius: var(--radius-md);
  color: var(--text);
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.nav-account-panel a:hover { background: var(--surface); color: var(--accent-700); }

.icon-btn {
  cursor: pointer;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  position: relative;
  transition: background .18s;
  color: var(--neutral-100);
  border: none;
  background: transparent;
}

.icon-btn svg { width: 21px; height: 21px; }
.nav.scrolled .icon-btn, .nav.nav-solid .icon-btn { color: var(--text); }
.icon-btn:hover { background: rgba(248, 244, 244, .12); }
.nav.scrolled .icon-btn:hover, .nav.nav-solid .icon-btn:hover { background: var(--surface); }

.cart-badge {
  position: absolute;
  top: 1px;
  left: 1px;
  background: var(--accent);
  color: #fff;
  font-size: 9px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* =========================================================
   پایان: آیکون‌های هدر
   ========================================================= */


/* ---- شمارهٔ تماس و دکمهٔ اکشنِ اختیاریِ هدر (سربرگ‌ساز) ---- */
.nav-phone {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--neutral-100);
  padding: 0 4px;
  transition: color .3s;
}

.nav.scrolled .nav-phone,
.nav.nav-solid .nav-phone { color: var(--text); }
.nav-phone:hover { color: var(--accent-300); }
.nav.scrolled .nav-phone:hover,
.nav.nav-solid .nav-phone:hover { color: var(--accent-700); }
.nav-phone svg { width: 17px; height: 17px; flex: none; }

.nav-cta { padding: 9px 18px; font-size: 13.5px; white-space: nowrap; }

/* در موبایل نوار جا ندارد؛ هر دو کنار می‌روند */
@media (max-width: 1080px) {
  .nav-phone span { display: none; }
}

@media (max-width: 900px) {
  .nav-phone,
  .nav-cta { display: none; }
}

/* =========================================================
   شروع: دراور منوی موبایل
   ========================================================= */
.nav-toggle {
  display: none;
  cursor: pointer;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--neutral-100);
  flex: none;
  transition: background .18s, color .3s;
}

.nav.scrolled .nav-toggle, .nav.nav-solid .nav-toggle { color: var(--text); }
.nav-toggle:hover { background: rgba(248, 244, 244, .12); }
.nav.scrolled .nav-toggle:hover, .nav.nav-solid .nav-toggle:hover { background: var(--surface); }
.nav-toggle svg { width: 20px; height: 20px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle.open .icon-menu { display: none; }
.nav-toggle.open .icon-close { display: block; }

.nav-scrim {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10, 8, 5, .45);
  z-index: 45;
}

.nav-scrim.open { display: block; }

.nav-drawer-head {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 16px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--divider);
}

.nav-drawer-logo { font-family: var(--font-h); font-weight: 700; font-size: 20px; color: var(--text); }

.nav-drawer-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--divider);
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
}

.nav-drawer-close:hover { background: var(--surface); }
.nav-drawer-close svg { width: 16px; height: 16px; }
/* =========================================================
   پایان: دراور منوی موبایل
   ========================================================= */


/* =========================================================
   شروع: ریسپانسیو هدر
   ========================================================= */
@media (max-width: 900px) {
  /* نوار موبایل فشرده‌تر است؛ ارتفاع مؤثر کمتری برای هم‌پوشانی روی هیرو دارد */
  :root { --nav-h: 78px; }

  /* ⚠⚠ ریشهٔ باگِ «همبرگری باز نمی‌شود» — backdrop-filter (هر مقداری غیر از none)
     طبق مشخصات، برای فرزندانِ position:fixed یک «بلوکِ دربرگیرنده» می‌سازد. دراورِ
     موبایل (.nav-links) و پوششِ تیره‌اش (.nav-scrim) هر دو fixed و داخلِ .nav هستند،
     پس به‌جای viewport نسبت به خودِ نوارِ ۷۸ پیکسلیِ هدر جای می‌گیرند و با
     translateX(100%) عملاً بیرون از دیدرس می‌افتند ⇒ کلیک می‌کنی، کلاس open را هم
     می‌گیرد، ولی چیزی دیده نمی‌شود. چون این افکت فقط روی حالتِ scrolled/nav-solid
     است، در بالای صفحهٔ اصلی گاهی کار می‌کرد و در بقیهٔ صفحات نه — همان رفتارِ
     «گاهی درست، گاهی خراب». در موبایل حذفش می‌کنیم و به‌جایش پس‌زمینهٔ تقریباً مات
     می‌گذاریم؛ از نظر بصری تفاوتش با بلورِ پشتِ یک پس‌زمینهٔ ۹۲٪ مات ناچیز است. */
  .nav.scrolled,
  .nav.nav-solid {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(246, 244, 241, .98);
  }

  .nav-toggle { display: flex; }
  .nav-drawer-head { display: flex; }

  .nav-links {
    position: fixed;
    inset: 0 0 0 auto;
    right: 0;
    width: min(82vw, 320px);
    height: 100vh;
    background: var(--bg);
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 2px;
    padding: 18px 18px 24px;
    box-shadow: -12px 0 40px rgba(0, 0, 0, .18);
    transform: translateX(100%);
    transition: transform .3s ease;
    z-index: 46;
    overflow-y: auto;
  }

  .nav-links.open { transform: translateX(0); }

  /* هر آیتم منو تمام‌عرض دراور، با خط ظریف جداکننده */
  .nav-item { padding-bottom: 0; margin-bottom: 0; width: 100%; border-bottom: 1px solid var(--divider); }
  .nav-item:last-child { border-bottom: none; }

  .nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    color: var(--text);
    padding: 14px 6px;
  }

  .nav-link.accent { color: var(--accent-700); }
  .accordion-chevron { display: block; color: var(--neutral-600); }
  .nav-accordion-trigger { padding: 14px 6px; color: var(--text); }

  /* داخل دراور، پنل مگامنو به‌جای هاور، آکاردئونِ بسته/باز است.
     ⚠⚠ ریشهٔ باگِ «باز‌کردنِ منوی همبرگری ریسپانسیو را به‌هم می‌ریزد»: نسخهٔ
     دسکتاپِ همین پنل min-width:320px دارد (تا مگامنو در دسکتاپ باریک نشود) و این
     بلوک آن را صفر نمی‌کرد. عرضِ خودِ دراور min(82vw,320px) است و با پدینگِ ۱۸
     پیکسل، فضای داخلی‌اش حدودِ ۲۷۱ تا ۲۸۴ پیکسل می‌شود ⇒ پنل از ظرفش پهن‌تر
     می‌شد. چون دراور overflow-y:auto دارد، طبقِ مشخصاتِ CSS محورِ افقی هم به
     auto تبدیل می‌شود و یک اسکرولِ افقیِ ناخواسته داخلِ منو ساخته می‌شد که کلِ
     چیدمانِ آیتم‌ها را جابه‌جا نشان می‌داد. اینجا صریحاً خنثی می‌شود. */
  .nav-panel {
    position: static;
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: 100%;
    opacity: 1;
    transform: none;
    box-shadow: none;
    border: none;
    border-radius: 0;
    margin: 0;
    padding: 0 4px;
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s ease, padding .4s ease;
  }

  /* همان دلیل: خودِ دراور هم صریحاً از سرریزِ افقی منع می‌شود تا اگر افزونه‌ای
     محتوای پهنی داخلِ منو تزریق کرد، منو به‌جای جابه‌جا شدن، آن را مهار کند. */
  .nav-links { overflow-x: hidden; }

  .nav-item.open .nav-panel { max-height: 600px; padding: 2px 4px 14px; }
  .nav-panel-links { width: 100%; }
  .nav-panel a { width: 100%; }
  .nav-panel::before { display: none; }

  /* ترتیب آیکون‌های هدر موبایل: منو، جستجو، لوگو (وسط)، کاربر، سبد خرید */
  .nav-row { flex-wrap: nowrap; gap: 8px; }
  .nav-icons { display: contents; }
  .nav-toggle { order: 1; }
  .nav-icon-search { order: 2; }
  .brand { order: 3; flex: 1; text-align: center; font-size: 20px; }
  /* .nav-account یک لایهٔ اضافه دورِ آیکنِ کاربر است (برای پنلِ هاوریِ دسکتاپ)؛
     display:contents یعنی همان .nav-icon-user داخلش هنوز مستقیماً آیتمِ فلکسِ
     .nav-row حساب می‌شود و order زیر رویش اثر می‌کند — بدونِ این، آیکنِ کاربر
     از ترتیبِ «منو، جستجو، لوگو، کاربر، سبد» خارج می‌شد. پنل هم روی موبایل
     (بدونِ هاورِ واقعی) اصلاً معنی ندارد، پس صریحاً پنهان می‌شود. */
  .nav-account { display: contents; }
  .nav-account-panel { display: none !important; }
  .nav-icon-user { order: 4; }
  .nav-icon-cart { order: 5; }

  .icon-btn, .nav-toggle {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(248, 244, 244, .22);
  }

  .nav.scrolled .icon-btn, .nav.scrolled .nav-toggle,
  .nav.nav-solid .icon-btn, .nav.nav-solid .nav-toggle { border-color: var(--divider); }

  .icon-btn svg, .nav-toggle svg { width: 22px; height: 22px; }
}

/* ---- موبایل: تیکر به‌صورت نوار متحرک (مارکی) ---- */
@media (max-width: 640px) {
  .ticker-updated { display: none; }
  .ticker-row { flex-wrap: nowrap; overflow: hidden; }
  .ticker-track > .ticker-items[aria-hidden] { display: none; }

  .ticker-track > .ticker-items {
    display: flex;
    flex-wrap: nowrap;
    white-space: nowrap;
    width: max-content;
    animation: tickerMarquee 14s linear infinite;
  }

  .ticker-track { display: block; width: 100%; flex: 1; }

  .nav-row { padding-block: 14px; }

  /* هدر موبایل کمی از لبهٔ صفحه فاصله بگیرد (پدینگِ ۵ پیکسلیِ درخواستی).
     padding-inline اینجا از padding-inline: 16px کلاسِ .wrap برنده می‌شود چون
     انتخابگرش خاص‌تر است و بعد از آن هم بار می‌شود. */
  .nav-row,
  .ticker-row { padding-inline: 5px; }
}

/* از چپ به راست حرکت می‌کند (برعکس جهت نوشتار) */
@keyframes tickerMarquee {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
  .ticker-track > .ticker-items { animation: none; }
}
/* =========================================================
   پایان: ریسپانسیو هدر
   ========================================================= */