/* Homepage new design — Front page. All markup styling lives here; no inline styles in HTML.
   Scroll-driven values arrive as CSS custom properties written by assets/js/homepage-new-design-front.js:
   --hnd-coll-w, --hnd-coll-h */

:root {
  --hnd-coll-w: calc(100% - 140px);
  --hnd-coll-h: 70vh;
}

/* ---------------------------------------------------------------- shared bits */

.hnd-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 2px;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  border: none;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
/* body.hnd-front-page a.hnd-btn-* (not just .hnd-btn-*): these buttons are almost always
   rendered as <a>, and base.css's `body.hnd-front-page a{color}`/`a:hover{color}` rules
   (specificity 0,1,1 / 0,2,2) otherwise out-specify a bare `.hnd-btn-solid` class (0,1,0)
   and silently win — see +SELECTOR-SPECIFICITY. Matching the same prefix beats it cleanly,
   no !important needed. */
.hnd-btn-solid, body.hnd-front-page a.hnd-btn-solid { background: var(--c-ink); color: var(--c-surface); }
.hnd-btn-solid:hover, body.hnd-front-page a.hnd-btn-solid:hover { background: var(--c-gold-deep); color: var(--c-surface); }
.hnd-btn-ghost, body.hnd-front-page a.hnd-btn-ghost { background: transparent; color: var(--c-ink); border: 1px solid var(--c-line); }
.hnd-btn-ghost:hover, body.hnd-front-page a.hnd-btn-ghost:hover { border-color: var(--c-gold); color: var(--c-gold-deep); }
.hnd-btn-light, body.hnd-front-page a.hnd-btn-light { background: var(--c-surface); color: var(--c-ink); }
.hnd-btn-sm { padding: 12px 20px; font-size: 14px; }

/* mirrored arrow glyph (RTL) */
.hnd-arrow { display: inline-block; transform: scaleX(-1); }

.hnd-title-xl,
.hnd-title-lg,
.hnd-title-md,
.hnd-title-sm {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 400;
  color: var(--c-ink);
}
.hnd-title-xl { font-size: clamp(64px, 9vw, 132px); line-height: 0.95; }
.hnd-title-lg { font-size: clamp(56px, 8vw, 120px); line-height: 0.95; }
.hnd-title-md { font-size: clamp(40px, 6vw, 72px); }
.hnd-title-sm { font-size: clamp(32px, 4vw, 48px); line-height: 1.3; }

.hnd-wipe {
  display: inline-block;
  -webkit-mask-image: linear-gradient(to left, black 33%, transparent 33%);
  mask-image: linear-gradient(to left, black 33%, transparent 33%);
  -webkit-mask-size: 300% 100%;
  mask-size: 300% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  animation: hndWipe 4s ease-in-out infinite;
}
@keyframes hndWipe {
  0%   { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  15%  { -webkit-mask-position: -100% 0; mask-position: -100% 0; }
  75%  { -webkit-mask-position: -100% 0; mask-position: -100% 0; }
  90%  { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  100% { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
}

@keyframes hndSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- header extras */

.hnd-topbar-end { display: flex; align-items: center; gap: 16px; }

/* ---------------------------------------------------------------- hero (slider) */

.hnd-hero {
  position: relative;
  width: 100%;
  /* شرط سوم: کوتاه‌تر از کل ارتفاع نمایش، تا هم hnd-ticker-wrap (چسبیده به کف همین سکشن)
     کامل دیده شود هم قدری از hnd-services زیرش، همان اسکرول اول. margin-top لازم نیست:
     هدر الان sticky است (نه fixed)، جای خودش را در جریان سند رزرو می‌کند و این سکشن
     طبیعتاً بدون فاصله بلافاصله زیرش شروع می‌شود. */
  height: 65vh;
  min-height: 560px;
  overflow: hidden;
  background: var(--c-bg);
}
/* اسلایدر خاموش ولی نوار تبلیغاتی روشن (1.30.0): سکشن فقط به اندازهٔ نوار، نوار در جریانِ عادی. */
.hnd-hero.hnd-hero-ticker-only { height: auto; min-height: 0; }
.hnd-hero-ticker-only .hnd-ticker-wrap { position: static; }
.hnd-hero-slider { position: absolute; inset: 0; overflow: hidden; }
.hnd-hero-slides { position: relative; width: 100%; height: 100%; }
.hnd-hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .9s ease;
  background: var(--c-bg);
}
.hnd-hero-slide.active { opacity: 1; visibility: visible; z-index: 1; }
.hnd-hero-slide-link { display: block; width: 100%; height: 100%; }
/* cover، نه contain: contain هر بنری که نسبت‌ابعادش با کادر جور نبود را با یک باکس خالیِ
   letterbox دور خودش نشان می‌داد. cover همیشه کل کادر را پر می‌کند (بدون باکس خالی)؛
   object-position: center کمترین کراپ ممکن را بین دو طرف تقسیم می‌کند، نه یک طرف را کامل. */
/* picture عنصرِ inline بدون ارتفاعِ ذاتی است؛ بدونِ این خط، height:100% روی img زیرش resolve
   نمی‌شد (درصدِ ارتفاع به ارتفاعِ صریحِ همین والد نیاز دارد) و اسلاید در بریک‌پوینتِ عکسِ
   تبلت/موبایل به‌کل جمع می‌شد. */
.hnd-hero-slide picture { display: block; width: 100%; height: 100%; }
.hnd-hero-slide img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* nav arrows: minimal glass chips — dark translucent (not light) so the white icon stays
   readable whether the pixels behind it are a dark banner OR a light/white one (cover fills
   the frame, but banner artwork itself can be light-colored at any edge). */
.hnd-hero-nav {
  position: absolute;
  top: 50%;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  transform: translateY(-50%);
  background: rgba(20,15,10,0.42);
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 50%;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.hnd-hero-nav:hover { background: rgba(20,15,10,0.62); border-color: rgba(255,255,255,0.6); }
.hnd-hero-nav:active { transform: translateY(-50%) scale(0.94); }
.hnd-hero-nav svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.hnd-hero-nav-prev { right: 24px; }
.hnd-hero-nav-next { left: 24px; }

/* pagination: same dark-glass chip as the nav arrows — visible over either a dark or a light
   patch of the slide underneath it, set apart from the ticker strip below it. */
.hnd-hero-dots {
  position: absolute;
  left: 50%;
  bottom: 84px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  background: rgba(20,15,10,0.42);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 999px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transform: translateX(-50%);
}
.hnd-hero-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.6);
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.hnd-hero-dot:hover { background: rgba(255,255,255,0.9); }
.hnd-hero-dot.active { background: var(--c-gold); transform: scale(1.25); }

@media (max-width: 760px) {
  /* روی گوشی دیگر بر مبنای ارتفاعِ نمایش نیست: همان رفتارِ سایتِ زنده («new Front») — بنر با
     عرضِ کامل و نسبتِ ابعادِ ثابتِ خودش رندر می‌شود، کوتاه‌تر از حالتِ دسکتاپ اما هیچ‌وقت
     کراپِ عمودیِ شدید نمی‌خورد و کل طرح/متنِ بنر دیده می‌شود. تیکر دیگر روی خودِ بنر
     ننشسته (آن‌جا فضایی برای اورلی‌شدن نیست)، بلکه یک نوارِ عادیِ زیرِ بنر است. */
  .hnd-hero { height: auto; min-height: 0; overflow: visible; background: none; }
  .hnd-hero-slider { position: relative; inset: auto; aspect-ratio: 20 / 9; }
  .hnd-hero-slide img { object-position: center; }
  .hnd-hero-nav { width: 36px; height: 36px; }
  .hnd-hero-nav-prev { right: 12px; }
  .hnd-hero-nav-next { left: 12px; }
  .hnd-hero-dots { bottom: 14px; }
  .hnd-ticker-wrap { position: static; }
}

/* Draggable/swipeable carousel tracks (wired in homepage-new-design-front.js initTrackCarousels)
   — grab cursor as the affordance hint, no accidental text/image selection while dragging. */
.hnd-draggable-track { cursor: grab; user-select: none; -webkit-user-select: none; }
.hnd-carousel-dragging .hnd-draggable-track { cursor: grabbing; }
.hnd-draggable-track img { -webkit-user-drag: none; pointer-events: none; }

/* حالتِ لمسی: خودِ مرورگر کلیپ را افقی اسکرول می‌کند (initTrackCarousels روی pointer:coarse
   این کلاس را می‌گذارد و اصلاً درگِ دستی نمی‌بندد) — با اینرسی/کششِ بومی، بدون کشمکش با
   داوریِ ژستِ مرورگر. overscroll-behavior-x مانع می‌شود اسکرولِ افقی به ژستِ «برگشت» مرورگر
   تبدیل شود. نوارِ اسکرول پنهان است چون دکمه‌های ناوبری همچنان سرِ جای‌شان هستند. */
.hnd-carousel-native .hnd-carousel-clip {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.hnd-carousel-native .hnd-carousel-clip::-webkit-scrollbar { display: none; }
/* در این حالت ترک نباید transform/transition داشته باشد (اسکرول کارِ خودِ کلیپ است). */
.hnd-carousel-native .hnd-carousel-clip > * { transform: none; transition: none; }

/* ---------------------------------------------------------------- section basics + shared eyebrow label */

.hnd-section { background: var(--c-bg); }
.hnd-intro-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .5px;
  color: var(--c-gold-deep);
}
.hnd-intro-eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--c-gold);
  clip-path: polygon(50% 0%,65% 35%,100% 50%,65% 65%,50% 100%,35% 65%,0% 50%,35% 35%);
}
.hnd-intro-badge {
  position: absolute;
  bottom: -22px;
  right: -22px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: var(--c-ink);
  color: var(--c-surface);
  box-shadow: 0 20px 40px rgba(20,15,8,0.25);
  text-align: center;
}
.hnd-intro-badge strong { font-family: var(--font-heading); font-size: 26px; font-weight: 400; line-height: 1; color: var(--c-gold); }
.hnd-intro-badge span { font-size: 11px; margin-top: 4px; }

/* ---------------------------------------------------------------- popular categories */

.hnd-popular-cats { padding: 32px 0; }
.hnd-popular-cats-row { display: flex; gap: 4px; height: 500px; }
.hnd-popular-cats-row .hnd-catcard { flex: 1 1 0%; min-width: 70px; height: 100%; aspect-ratio: unset; cursor: pointer; transition: flex-grow .6s cubic-bezier(.22,.61,.36,1); }
.hnd-popular-cats-row .hnd-catcard.hnd-cat-active { flex-grow: 3; }
.hnd-popular-cats-row .hnd-catcard img { filter: grayscale(1) contrast(1.05); }
.hnd-popular-cats-row .hnd-catcard.hnd-cat-active img { filter: grayscale(0) contrast(1.05); }
.hnd-popular-cats-row .hnd-catcard:not(.hnd-cat-active) .hnd-catcard-title { font-size: 18px; transition: font-size .6s ease; }
.hnd-popular-cats-row .hnd-catcard:not(.hnd-cat-active) .hnd-catcard-btn { opacity: 0; pointer-events: none; }
.hnd-popular-cats-row .hnd-catcard-btn { transition: opacity .3s ease; }
.hnd-cat-progress { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: rgba(255,255,255,0.3); z-index: 3; opacity: 0; transition: opacity .3s ease; }
.hnd-cat-active .hnd-cat-progress { opacity: 1; }
.hnd-cat-progress-fill { display: block; height: 100%; width: 0%; background: var(--c-gold); }

/* ---------------------------------------------------------------- showcase grid */

.hnd-showcase { padding: 32px 0 64px; }
.hnd-stack-4 { display: flex; flex-direction: column; gap: 4px; }

/*
 * ⚠ این سکشن قبلاً یک ارتفاعِ ثابت/نسبتِ ابعادِ مستقل داشت (ردیف ۴۶۰px در دسکتاپ،
 * نسبت‌های ۲۱:۹ و ۲۱:۶ در موبایل) و به همین دلیل مجبور بود عکسِ کارت را از قاعدهٔ
 * عمومیِ ۱:۱ مستثنا کند تا در آن قابِ افقیِ کوتاه جا شود.
 *
 * حالا برعکس شده: هیچ ارتفاعِ ثابتی روی ردیف/کاروسل نمانده، پس عکس از همان قاعدهٔ
 * عمومیِ .hnd-prodcard-media (aspect-ratio:1/1) پیروی می‌کند و ارتفاعِ کلِ سکشن از
 * رویِ محتوا (عکسِ مربع + فوترِ کوتاه‌شده) محاسبه می‌شود. بنرِ کناری (.hnd-showcase-cat)
 * هم دیگر نسبتِ ابعادِ خودش را ندارد و با align-items:stretch (خودِ همین قاعده) به
 * همان ارتفاعِ محاسبه‌شده کشیده می‌شود — پس دو طرفِ ردیف همیشه هم‌قد می‌مانند.
 */
.hnd-showcase-row { display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
/* aspect-ratio:unset اجباری است، وگرنه قاعدهٔ پایهٔ .hnd-catcard (۳:۴) همچنان روی این
   نمونه اثر دارد و اجازه نمی‌دهد با align-items:stretch به ارتفاعِ کاروسلِ کناری‌اش
   کشیده شود. در چیدمانِ ستونیِ موبایل (که کنارِ چیزی نمی‌ایستد و چیزی برای کشیده‌شدن
   ندارد) پایین‌تر یک نسبتِ مستقل برایش برمی‌گردد. */
.hnd-catcard.hnd-showcase-cat { display: block; aspect-ratio: unset; }
/* Real bug: with aspect-ratio:unset the banner's own <img height:100%> resolves against an
   indeterminate parent height during the flex "hypothetical size" pass, so browsers fall back
   to the RAW photo's own intrinsic aspect ratio to size it — a portrait-ish source photo could
   end up taller than the carousel's natural (square image + short footer) height, and since
   align-items:stretch is mutual, that then stretched the carousel/cards too, leaving blank
   space below the shorter cards' footers (their fixed-aspect image + natural footer couldn't
   grow to fill it). Taking the banner img out of flow entirely removes it from that sizing
   pass — the row's height now comes ONLY from the carousel side, one-directional as intended. */
.hnd-catcard.hnd-showcase-cat img { position: absolute; inset: 0; object-position: var(--hnd-pos, center); }
/* 1.65.1: عنوان و دکمهٔ بنر دیگر absolute نیستند؛ ستونِ فلکس‌اند (عنوان بالا، دکمه پایین)، پس در هر عرض و با هر طولِ
   عنوان روی هم نمی‌افتند و ارتفاعِ بنر حداقل به اندازهٔ هر دو می‌شود. بنر دیگر لینک نیست؛ فقط دکمه لینک است. */
.hnd-catcard.hnd-showcase-cat {
  display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;
  gap: 16px; padding: 28px; min-height: 180px;
}
.hnd-catcard.hnd-showcase-cat .hnd-catcard-title,
.hnd-catcard.hnd-showcase-cat .hnd-catcard-btn { position: relative; inset: auto; z-index: 1; }
.hnd-catcard.hnd-showcase-cat .hnd-catcard-title { overflow-wrap: anywhere; line-height: 1.3; }
.hnd-showcase-carousel { position: relative; border: 1px solid var(--c-line); }
.hnd-carousel-clip { width: 100%; overflow: hidden; }
.hnd-showcase-track { display: flex; align-items: stretch; transition: transform .5s cubic-bezier(.22,.61,.36,1); }
.hnd-showcase-track .hnd-prodcard-sm { flex: 0 0 50%; border: none; border-inline-start: 1px solid var(--c-line); }
.hnd-showcase-track .hnd-prodcard-sm:first-child { border-inline-start: none; }
/* فوترِ همین کارت‌ها کوتاه‌تر شد تا ارتفاعِ کلِ سکشن زیاد بالا نرود — پدینگِ عمودی
   نصف شد؛ scope‌شده به همین سکشن است، فوترِ محصولاتِ ویژه/شمش دست‌نخورده می‌ماند. */
.hnd-showcase-track .hnd-prodcard-footer { padding: 10px 16px; }
.hnd-showcase-track .hnd-prodcard-name { font-size: 15px; min-height: calc(1.3em * 2); }
.hnd-carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--c-line);
  background: var(--c-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(20,15,8,0.10);
  z-index: 4;
  transition: background .2s ease, border-color .2s ease, opacity .2s ease;
}
.hnd-carousel-nav:hover { background: var(--c-bg-soft); border-color: var(--c-gold); }
.hnd-carousel-nav.hnd-carousel-disabled { opacity: .35; pointer-events: none; cursor: default; }
.hnd-carousel-nav svg { width: 18px; height: 18px; stroke: var(--c-ink); fill: none; stroke-width: 1.8; }
.hnd-carousel-prev { right: 14px; }
.hnd-carousel-next { left: 14px; }
.hnd-reveal-row {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.hnd-reveal-row.hnd-visible { opacity: 1; transform: translateY(0); will-change: auto; }
.hnd-reveal-row.hnd-delay-1 { transition-delay: .12s; }
.hnd-reveal-row.hnd-delay-2 { transition-delay: .24s; }

.hnd-catcard {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 1px solid var(--c-line);
}
.hnd-catcard img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  transition: transform .6s cubic-bezier(.22,.61,.36,1), filter .6s ease;
}
.hnd-catcard:hover img { transform: scale(1.04); filter: grayscale(0) contrast(1.05); }
.hnd-catcard-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,15,8,0.05) 0%, rgba(20,15,8,0.35) 100%);
}
.hnd-catcard-title {
  position: absolute;
  top: 28px;
  right: 28px;
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 38px;
  color: var(--c-surface);
}
.hnd-catcard-btn { position: absolute; bottom: 28px; right: 28px; }

/* product card (shared by showcase / featured / blog) */
.hnd-prodcard {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--c-line);
  background: var(--c-bg-soft);
  color: inherit;
}
/*
 * ⚠ نسبتِ ابعادِ ۳:۴ / ۱۶:۲۱ قبلاً روی خودِ کارت بود (عکس + فوتر با هم)، نه فقط عکس —
 * پس عکس هیچ‌وقت واقعاً مربع نمی‌شد، هرچه هم این عدد را عوض می‌کردی. حالا نسبت روی
 * خودِ ناحیهٔ عکس (.hnd-prodcard-media) نشسته و کارت خودش را با آن بلند می‌کند؛ اینجا
 * چیزی نمانده چون کارت دیگر ارتفاعِ ثابتِ خودش را ندارد.
 */
.hnd-prodcard-cat {
  position: absolute;
  top: 18px;
  right: 22px;
  font-size: 13px;
  color: var(--c-ink-mute);
  z-index: 2;
  padding: 3px 9px;
  border-radius: 999px;
  background: oklch(99% 0.003 85 / 0.55);
}
.hnd-prodcard-lg .hnd-prodcard-cat { top: 15px; right: 15px; font-size: 13px; }
.hnd-prodcard-media {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hnd-prodcard-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.22,.61,.36,1);
}
.hnd-prodcard:hover .hnd-prodcard-img { transform: scale(1.05); }
/* Hover-swap to the product's own 1st gallery photo (only rendered when one exists) — sits
   on top of the main image, faded in on hover; the base image still keeps its zoom above. */
.hnd-prodcard-img-hover { position: absolute; inset: 0; opacity: 0; transition: opacity .35s ease, transform .5s cubic-bezier(.22,.61,.36,1); }
.hnd-prodcard:hover .hnd-prodcard-img-hover { opacity: 1; }
.hnd-prodcard-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 22px;
  border-top: 1px solid var(--c-line);
  transition: background .2s ease, box-shadow .2s ease;
}
/* the name/price block absorbs width squeeze on narrow cards; the arrow icon never should —
   without this, a wide 2-line title on a narrow mobile card shrank the arrow below its
   declared size via flexbox's default flex-shrink:1 (this is what "icon got tiny" actually was). */
.hnd-prodcard-footer > div { min-width: 0; flex: 1; }
.hnd-prodcard-lg .hnd-prodcard-footer { padding: 22px 26px; }
.hnd-prodcard:hover .hnd-prodcard-footer {
  background: var(--c-surface);
  box-shadow: 0 -8px 20px rgba(40,30,10,0.08);
}
.hnd-prodcard-name {
  margin: 0 0 4px;
  font-family: var(--font-heading);
  font-size: 19px;
  line-height: 1.3;
  color: var(--c-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.3em * 2);
}
.hnd-prodcard-lg .hnd-prodcard-name { font-size: 16px; min-height: calc(1.3em * 2); }
.hnd-prodcard-price { font-size: 14px; color: var(--c-gold-deep); }
.hnd-prodcard-arrow {
  opacity: 0.5;
  display: inline-flex;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  transition: transform .2s ease, opacity .2s ease;
}
.hnd-prodcard-lg .hnd-prodcard-arrow { width: 22px; height: 22px; }
.hnd-prodcard:hover .hnd-prodcard-arrow { transform: translate(-3px, -3px); opacity: 1; }
.hnd-prodcard-arrow svg {
  width: 100%;
  height: 100%;
  stroke: var(--c-ink);
  fill: none;
  stroke-width: 1.6;
}

/* ---------------------------------------------------------------- collection (sticky) */

.hnd-coll-section { position: relative; height: 220vh; }
.hnd-coll-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-bg);
  contain: layout paint;
}
.hnd-coll-frame {
  position: relative;
  width: var(--hnd-coll-w);
  height: var(--hnd-coll-h);
  overflow: hidden;
}
.hnd-coll-frame > img, .hnd-coll-frame > video { width: 100%; height: 100%; object-fit: cover; }
.hnd-coll-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,15,8,0.05) 0%, rgba(20,15,8,0.5) 100%);
}
.hnd-coll-marquee {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  overflow: hidden;
  direction: ltr;
  opacity: 0.22;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.hnd-coll-marquee-track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: hndCollMarquee 22s linear infinite;
}
@keyframes hndCollMarquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.hnd-coll-marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 0 18px;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(28px, 4.5vw, 58px);
  color: var(--c-surface);
  white-space: nowrap;
}
.hnd-coll-star { color: var(--c-gold); font-size: 0.5em; }
.hnd-coll-cta {
  position: absolute;
  bottom: 48px;
  right: 48px;
  max-width: 440px;
  text-align: right;
}
.hnd-coll-cta-title {
  margin: 0 0 12px;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.3;
  color: var(--c-surface);
}
.hnd-coll-cta-desc {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.85;
  color: rgba(255,255,255,0.85);
}

/* ---------------------------------------------------------------- services overview strip */

.hnd-services { border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); background: var(--c-bg); }
.hnd-services-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.hnd-service-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 56px;
  min-height: 200px;
  padding-block: 64px 32px;
  padding-inline: clamp(20px, 3.2vw, 44px);
  border-inline-end: 1px solid var(--c-line);
  color: inherit;
  overflow: hidden;
  transition: background .3s ease, color .3s ease;
}
.hnd-service-tile:last-child { border-inline-end: none; }
.hnd-service-index { font-family: var(--font-heading); font-size: 13px; letter-spacing: 1px; color: var(--c-gold-deep); transition: color .3s ease; }
.hnd-service-title { font-family: var(--font-heading); font-weight: 400; font-size: clamp(20px, 2vw, 26px); line-height: 1.3; color: var(--c-ink); transition: color .3s ease; }
.hnd-service-arrow { align-self: flex-end; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--c-line); transition: background .3s ease, border-color .3s ease, transform .3s ease; }
.hnd-service-arrow svg { width: 14px; height: 14px; stroke: var(--c-ink); fill: none; stroke-width: 1.6; transform: scaleX(-1); transition: stroke .3s ease; }
a.hnd-service-tile:hover { background: var(--c-ink); }
a.hnd-service-tile:hover .hnd-service-index { color: var(--c-gold); }
a.hnd-service-tile:hover .hnd-service-title { color: var(--c-surface); }
a.hnd-service-tile:hover .hnd-service-arrow { background: var(--c-gold); border-color: var(--c-gold); transform: translateX(-6px); }
a.hnd-service-tile:hover .hnd-service-arrow svg { stroke: var(--c-ink); }
.hnd-service-tile.hnd-service-soon { color: var(--c-ink-mute); }
.hnd-service-tile.hnd-service-soon .hnd-service-title { color: var(--c-ink-mute); }
.hnd-service-badge { align-self: flex-start; font-size: 11px; font-weight: 700; padding: 4px 12px; border-radius: 999px; background: var(--c-bg-soft); border: 1px solid var(--c-line); color: var(--c-ink-mute); }

@media (max-width: 900px) {
  .hnd-services-grid { grid-template-columns: repeat(2, 1fr); }
  .hnd-service-tile { min-height: 168px; gap: 40px; padding-block: 10px; border-bottom: 1px solid var(--c-line); }
  .hnd-service-tile:nth-child(2n) { border-inline-end: none; }
}

/* ---------------------------------------------------------------- amazing offers promo
   دیگر اینجا رندر نمی‌شود — سکشنِ شگفت‌انگیز حالا با شورت‌کدِ افزونهٔ dm-amazing-offers
   (template="hnd") داده‌ی واقعی می‌آورد؛ آن افزونه CSS/JS کاملاً مستقلِ خودش را دارد
   (public/css/dm-amazing-offers-hnd.css با کلاس‌های dmao-hnd-*)، این‌جا دیگر لازم نیست. */

/* shared "ghost word behind a static, always-readable headline" component — still used by
   .hnd-club (the amazing section it was originally shared with is gone, see comment above).
   The ghost sits ABOVE the real headline (not centered behind
   it) so the two Persian lines never overlap on the same baseline, and is kept very faint
   since it's purely decorative texture now — the real copy carries all the information and
   never depends on the ghost's animation state to be legible. */
.hnd-ghost-title { position: relative; display: flex; flex-direction: column; align-items: center; padding-top: 58px; }
.hnd-ghost-title-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(48px, 6.4vw, 100px);
  line-height: 1;
  white-space: nowrap;
  /* پررنگ‌تر از قبل تا واقعاً دیده شود، ولی همچنان تزئینی: پُرکنندهٔ بسیار کم‌رنگ + خطِ دورِ
     روشن‌تر. متنِ اصلی همچنان تمامِ اطلاعات را می‌دهد و به این لایه وابسته نیست. */
  color: rgba(255, 255, 255, 0.09);
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.4);
  pointer-events: none;
  z-index: 0;
  animation: hndGhostFade 7s ease-in-out infinite;
}
@keyframes hndGhostFade {
  0%, 100% { opacity: 0; }
  20%, 65% { opacity: 1; }
  85% { opacity: 0; }
}
.hnd-ghost-title-fg { position: relative; z-index: 1; margin: 0; color: var(--c-surface); }

/* ---------------------------------------------------------------- color stones carousel */

.hnd-stones { position: relative; padding: 64px 0; background: var(--c-bg); color: var(--c-ink); overflow: hidden; }
.hnd-stones-head { position: relative; z-index: 1; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 64px; }
.hnd-stones-eyebrow { font-family: var(--font-heading); font-size: 13px; letter-spacing: 3px; text-transform: uppercase; color: var(--c-gold-deep); }
.hnd-stones-title { color: var(--c-ink); }
.hnd-stones-desc { margin: 0; color: var(--c-ink-mute); font-size: 15px; }
.hnd-stones-carousel { position: relative; z-index: 1; }
.hnd-stones-carousel > .hnd-carousel-clip { height: auto; padding: 20px 0 8px; }
.hnd-stones-grid { display: flex; gap: 34px; transition: transform .5s cubic-bezier(.22,.61,.36,1); }
.hnd-stone-tile { flex: 0 0 168px; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; color: inherit; }
.hnd-stone-tile-offset { margin-top: 42px; }
.hnd-stone-circle { position: relative; width: 148px; height: 148px; border-radius: 50%; overflow: hidden; border: 2px solid var(--c-gold); box-shadow: 0 14px 30px rgba(20,15,8,0.16); transition: transform .3s ease, border-color .3s ease; }
/* .hnd-stone-circle خودش overflow:hidden دارد، پس این زوم فقط داخلِ همین دایره‌ها کراپ
   می‌شود — سلکتور هم فقط زیرِ .hnd-stone-circle است، هیچ عکسِ دیگری در تم را نمی‌گیرد. */
.hnd-stone-circle img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.65); }
.hnd-stone-tile:hover .hnd-stone-circle { transform: translateY(-6px); border-color: var(--c-ink); }
.hnd-stone-name { font-family: var(--font-heading); font-size: 16px; }
.hnd-stone-circle-end { border-style: dashed; border-color: var(--c-ink-mute); }
.hnd-stone-end-veil { position: absolute; inset: 0; background: rgba(6,6,10,0.4); }
.hnd-stone-end-arrow { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.hnd-stone-end-arrow svg { width: 26px; height: 26px; stroke: var(--c-surface); fill: none; stroke-width: 1.6; transform: scaleX(-1); }

@media (max-width: 900px) {
  .hnd-stones { padding: 40px 0; }
  .hnd-stones-head { margin-bottom: 40px; }
  .hnd-stone-tile { flex-basis: 140px; }
  .hnd-stone-circle { width: 120px; height: 120px; }
  .hnd-stone-tile-offset { margin-top: 30px; }
}

@media (max-width: 480px) {
  /* موبایلِ باریک: دایره‌ها کوچک‌تر تا به‌جای ۲تا، کمی بیشتر از ۳تا هم‌زمان دیده شود
     (چهارمی هم کمی از لبه پیداست، یعنی خودِ "قابل اسکرول بودن" هم روی صفحه معلوم است). */
  .hnd-stones-grid { gap: 14px; }
  .hnd-stone-tile { flex-basis: 92px; gap: 10px; }
  .hnd-stone-circle { width: 76px; height: 76px; border-width: 1px; }
  .hnd-stone-name { font-size: 12px; }
  .hnd-stone-tile-offset { margin-top: 18px; }
  .hnd-stone-end-arrow svg { width: 18px; height: 18px; }
}

/* ---------------------------------------------------------------- bullion tabs (coins / bars) */

/* بدون پس‌زمینهٔ خودش: این سکشن حالا بلافاصله زیرِ «شگفت‌انگیز» می‌نشیند که خودش پس‌زمینه
   دارد — یک پس‌زمینهٔ دیگر روی هم می‌افتاد. */
.hnd-bullion { padding: 64px 0; }
.hnd-bullion-head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 40px; }
.hnd-bullion-head .hnd-intro-eyebrow { justify-content: center; }
.hnd-bullion-tabs { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 40px; }
.hnd-bullion-tab {
  padding: 12px 28px;
  border: 1px solid var(--c-line);
  background: var(--c-surface);
  color: var(--c-ink-soft);
  font-family: var(--font-body);
  font-size: 14px;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.hnd-bullion-tab:hover { border-color: var(--c-gold); color: var(--c-gold-deep); }
.hnd-bullion-tab.active { background: var(--c-ink); color: var(--c-surface); border-color: var(--c-ink); }
.hnd-bullion-panel { display: none; }
.hnd-bullion-panel.active { display: block; }
.hnd-bullion-empty { margin: 0; padding: 48px 20px; text-align: center; font-size: 14px; color: var(--c-ink-mute); border: 1px dashed var(--c-line); }
/* زیرِ کاروسل و وسط‌چین — قبلاً بالای کاروسل و چسبیده به لبه بود. */
.hnd-bullion-panel-foot { display: flex; justify-content: center; margin-top: 24px; }
.hnd-bullion-carousel { position: relative; }
.hnd-bullion-carousel > .hnd-carousel-clip { height: auto; }
.hnd-bullion-grid { display: flex; gap: 4px; transition: transform .5s cubic-bezier(.22,.61,.36,1); }
/* aspect-ratio از خودِ کارت برداشته شد، دلیلش را بالای .hnd-prodcard-media ببین —
   عکس این کارت‌ها هم از همان قاعدهٔ عمومیِ ۱:۱ استفاده می‌کند. */
.hnd-bullion-grid > .hnd-prodcard { flex: 0 0 calc(25% - 3px); }

/* دو نسخهٔ چیدمان (دسکتاپ/تبلتِ کارت‌به‌کارت، موبایلِ صفحه‌بندی‌شدهٔ ۲×۲) هر دو در DOM هستند؛
   فقط یکی‌شان با همین دو قاعده نشان داده می‌شود — کارتِ خودش (hnd-prodcard) در هر دو یکی است. */
.hnd-bullion-view-mobile { display: none; }

@media (max-width: 900px) {
  .hnd-bullion { padding: 40px 0; }
  .hnd-bullion-grid > .hnd-prodcard { flex-basis: calc(50% - 2px); }
  /* یک ردیفِ تک‌خطی و جمع‌وجورتر، به‌جای شکستنِ تب‌ها به چند خط؛ اگر همه جا نشد، خودِ همین
     ردیف با اسکرولِ افقیِ نیتیو کش می‌آید (بدون نوار اسکرولِ قابل‌دیدن، ولی با درگِ لمسیِ
     معمولیِ مرورگر — جدولِ overflow-x یعنی درگ رایگان است). */
  .hnd-bullion-tabs { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 6px; padding: 0 4px 4px; margin-bottom: 28px; }
  .hnd-bullion-tabs::-webkit-scrollbar { display: none; }
  .hnd-bullion-tab { flex: 0 0 auto; padding: 8px 14px; font-size: 12.5px; white-space: nowrap; }
}
@media (max-width: 600px) {
  /* موبایل: کارت‌به‌کارتِ دسکتاپ کنار می‌رود، چیدمانِ صفحه‌بندی‌شدهٔ ۲×۲ جایش می‌نشیند — هر
     «صفحه» ۴ کارت (دو ردیفِ دوتایی) است و هر بار ورق‌زدن دقیقاً همان ۴تا را با هم رد می‌کند و
     ۴تای بعدی را با هم می‌آورد (initTrackCarousels، هر .hnd-bullion-page یک آیتمِ کاروسل است). */
  .hnd-bullion-view-desktop { display: none; }
  .hnd-bullion-view-mobile { display: block; }
  .hnd-bullion-mobile-track { display: flex; transition: transform .5s cubic-bezier(.22,.61,.36,1); }
  .hnd-bullion-page { flex: 0 0 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .hnd-bullion-tab { padding: 7px 12px; font-size: 12px; }
}

/* ---------------------------------------------------------------- club / loyalty promo */

/* بنفشِ برندِ سایت (#911a56) به‌جای مشکیِ خنثیِ قبلی — سکشن حالا از بقیهٔ صفحه جدا و
   «تو چشم» است، ولی چون همان رنگِ برند با شیبِ تیره‌شونده است، با کارت‌ها و طلاییِ سکشن
   هارمونی‌اش را نگه می‌دارد. متغیرها یک‌جا تعریف شده‌اند تا کارت/محوکنندهٔ پایینِ فهرست
   هم دقیقاً از همین پالت بخوانند و هیچ‌وقت از پس‌زمینه جدا نیفتند. */
.hnd-club {
  --hnd-club-deep: #3f0a25;
  /* عمداً مات (نه نیمه‌شفاف): محوکنندهٔ پایینِ فهرستِ مزایا باید دقیقاً به رنگِ خودِ کارت
     برسد؛ با رنگِ نیمه‌شفاف، رنگِ نهایی جای‌به‌جای شیبِ سکشن فرق می‌کرد و محوکننده لبه
     می‌انداخت. */
  --hnd-club-card: #4a0d2c;
  --hnd-club-card-featured: #6d1341;
  padding: 64px 0 32px;
  background: linear-gradient(158deg, #a81f63 0%, #7a1449 42%, var(--hnd-club-deep) 100%);
  color: var(--c-surface);
}
.hnd-club a { color: var(--c-surface); }
.hnd-club-head { text-align: center; max-width: 640px; margin: 0 auto 56px; display: flex; flex-direction: column; gap: 14px; }
.hnd-club-head .hnd-intro-eyebrow { justify-content: center; color: var(--c-gold); }
.hnd-club-head .hnd-intro-eyebrow::before { content: none; }
.hnd-club-head p { margin: 0; color: rgba(255,255,255,0.72); font-size: 15px; line-height: 1.8; }
.hnd-club-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.18); }
.hnd-club-card { position: relative; background: var(--hnd-club-card); padding: 34px 28px; display: flex; flex-direction: column; gap: 18px; overflow: hidden; }
.hnd-club-card.hnd-club-featured { background: var(--hnd-club-card-featured); }
.hnd-club-ribbon { position: absolute; top: 18px; inset-inline-end: -34px; transform: rotate(45deg); background: var(--c-gold); color: var(--c-ink); font-size: 11px; font-weight: 700; padding: 4px 40px; }
.hnd-club-tier { font-family: var(--font-heading); font-size: 28px; color: var(--c-gold); }
.hnd-club-price { font-size: 14px; color: rgba(255,255,255,0.6); }
/* ⚠ اینجا قبلاً max-height + overflow:hidden بود و مزایای پلن‌های بلندتر را وسطِ جمله می‌بُرید.
   حالا هیچ سقفی نیست: ارتفاعِ کارت را بلندترین محتوا تعیین می‌کند و چون هر سه کارت خانه‌های یک
   گریدند، هر سه هم‌قد می‌شوند و پدینگشان هم ثابت می‌ماند. */
.hnd-club-perks-wrap { position: relative; }
.hnd-club-perks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.hnd-club-perks li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: rgba(255,255,255,0.85); line-height: 1.5; }
.hnd-club-perks li svg { width: 16px; height: 16px; stroke: var(--c-gold); fill: none; stroke-width: 2; flex-shrink: 0; }
.hnd-club-foot { display: flex; justify-content: center; margin-top: 48px; }

@media (max-width: 900px) {
  /* ⚠ قبلاً اینجا تک‌ستونی می‌شد و سه کارت سه صفحهٔ کامل ارتفاع می‌گرفتند. حالا هر سه در یک
     ردیف می‌مانند و به‌جای آن، فاصله‌ها/فونت‌ها فشرده می‌شوند — هدف این است که کاربر کلِ
     مقایسهٔ سه اشتراک را در یک نگاه ببیند، بدون این‌که چیزی ناخوانا شود. */
  .hnd-club { padding: 36px 0 20px; }
  .hnd-club-grid { grid-template-columns: repeat(2, 1fr); }
    .hnd-club-card:last-child {
      grid-column: span 2;
  }
  .hnd-club-head { margin-bottom: 26px; gap: 10px; }
  .hnd-club-head p { font-size: 13.5px; line-height: 1.75; }
  .hnd-club-card { padding: 20px 14px; gap: 12px; }
  .hnd-club-tier { font-size: 22px; }
  .hnd-club-perks li { font-size: 12.5px; }
  .hnd-club-foot { margin-top: 24px; }
}
@media (max-width: 600px) {
  /* گوشی: همان سه ستون، ولی واقعاً فشرده — کلِ سکشن (سربرگ + سه کارت + دکمه) هدفش این است
     که در یک نمای صفحه جا شود. خوانایی با فونتِ کفِ ۱۱px و هم‌ترازیِ بالای آیکن حفظ می‌شود. */
  .hnd-club { padding: 26px 0 16px; }
  .hnd-club-head { margin-bottom: 16px; gap: 6px; }
  .hnd-club-head p { font-size: 12.5px; line-height: 1.7; }
  .hnd-ghost-title { padding-top: 32px; }
  .hnd-ghost-title-bg { font-size: clamp(26px, 8vw, 44px); }
  /* پدینگِ کناریِ ظرف در همین سکشن کم می‌شود تا همان سه ستون عرضِ بیشتری بگیرند — راهِ
     خواناتر کردنِ کارت بدونِ شکستنِ «هر سه در یک ردیف». */
  .hnd-club .container { padding-inline: 10px; }
  .hnd-club-card { padding: 16px 6px; gap: 10px; }
  .hnd-club-grid { grid-template-columns: repeat(2, 1fr); }
  .hnd-club-card:last-child {
      grid-column: span 2;
  }
  .hnd-club-tier { font-size: 19px; }
  .hnd-club-price { font-size: 11.5px; }
  .hnd-club-perks { gap: 8px; }
  .hnd-club-perks li { gap: 5px; font-size: 12.5px; line-height: 1.55; align-items: flex-start; overflow-wrap: anywhere; }
  .hnd-club-perks li svg { width: 13px; height: 13px; margin-top: 3px; }
  /* روبانِ چرخانِ دسکتاپ روی کارتِ باریکِ گوشی نصفِ کارت را می‌پوشاند؛ همان اطلاعات به یک
     برچسبِ صافِ کوچک تبدیل می‌شود — حذف نمی‌شود، چون «ویژه‌بودن» نباید فقط با رنگ گفته شود. */
  .hnd-club-ribbon { position: static; transform: none; align-self: flex-start; padding: 3px 8px; font-size: 10px; border-radius: 3px; }
  .hnd-club-foot { margin-top: 16px; }
  .hnd-club-foot .hnd-btn { padding: 11px 16px; font-size: 13px; }
}

/* ---------------------------------------------------------------- gold trade promo */

.hnd-goldtrade { position: relative; padding: 32px 0; background: var(--c-bg); }
.hnd-goldtrade-inner { display: flex; align-items: center; gap: 64px; flex-wrap: wrap; }
.hnd-goldtrade-copy { flex: 1; min-width: 320px; display: flex; flex-direction: column; gap: 20px; }
.hnd-goldtrade-badge { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; border-radius: 999px; background: var(--c-bg-soft); border: 1px solid var(--c-line); color: var(--c-gold-deep); font-size: 13px; font-weight: 700; }
.hnd-goldtrade-badge svg { width: 13px; height: 13px; fill: var(--c-gold-deep); }
.hnd-goldtrade-desc { margin: 0; color: var(--c-ink-soft); font-size: 15px; line-height: 1.9; max-width: 46ch; }
.hnd-goldtrade-cta { align-self: flex-start; }
.hnd-goldtrade-trust { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 4px; }
.hnd-goldtrade-trust span { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--c-ink-mute); }
.hnd-goldtrade-trust svg { width: 16px; height: 16px; stroke: var(--c-gold-deep); fill: none; stroke-width: 2; flex-shrink: 0; }

.hnd-goldtrade-panel { flex: 1; min-width: 320px; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 3px; padding: 30px 28px; display: flex; flex-direction: column; gap: 6px; }
.hnd-goldtrade-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--c-line); flex-wrap: wrap; }
.hnd-goldtrade-live { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--c-ink); }
.hnd-goldtrade-dot { width: 8px; height: 8px; border-radius: 50%; background: oklch(58% 0.14 145); flex-shrink: 0; animation: hndLiveDot 1.8s ease-in-out infinite; }
@keyframes hndLiveDot { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 oklch(58% 0.14 145 / 0.4); } 50% { opacity: 0.6; box-shadow: 0 0 0 6px oklch(58% 0.14 145 / 0); } }
.hnd-goldtrade-updated { font-size: 11px; color: var(--c-ink-mute); }

.hnd-rate-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; flex-wrap: wrap; }
.hnd-rate-card + .hnd-rate-card { border-top: 1px solid var(--c-line); }
.hnd-rate-asset { display: flex; align-items: center; gap: 12px; }
.hnd-rate-asset-icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--c-bg-soft); border: 1px solid var(--c-line); flex-shrink: 0; }
.hnd-rate-asset-icon svg { width: 16px; height: 16px; stroke: var(--c-gold-deep); fill: none; stroke-width: 1.6; }
.hnd-rate-asset-name { font-size: 14px; color: var(--c-ink); }
.hnd-rate-asset-name small { display: block; font-size: 11px; color: var(--c-ink-mute); margin-top: 2px; }
.hnd-rate-values { display: flex; align-items: center; gap: 22px; direction: ltr; }
.hnd-rate-buy, .hnd-rate-sell { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.hnd-rate-buy span, .hnd-rate-sell span { font-size: 11px; color: var(--c-ink-mute); }
.hnd-rate-buy strong, .hnd-rate-sell strong { font-family: var(--font-heading); font-size: 18px; font-weight: 400; color: var(--c-ink); }
.hnd-rate-sell strong { color: var(--c-gold-deep); }
.hnd-goldtrade-panel-note { margin: 12px 0 0; font-size: 14px; line-height: 1.9; color: var(--c-ink-mute); }

.hnd-goldtrade-divider { display: block; width: 100%; max-width: 420px; height: 1px; margin: 40px auto 0; border: none; background: linear-gradient(90deg, transparent, var(--c-gold), transparent); }

@media (max-width: 760px) {
  .hnd-goldtrade { padding: 10px 0; }
  .hnd-goldtrade-inner { flex-direction: column; }
  .hnd-rate-values { direction: rtl; gap: 14px; }
  .hnd-rate-buy, .hnd-rate-sell { align-items: flex-start; }
  .hnd-goldtrade-divider { margin-top: 24px; }
}

/* ---------------------------------------------------------------- hotspot promo (pinned product) */
/* Ported from the "Redesigned Front" template's own dm-hotspot-section (same shared
   hs_main_img/hs_spot_* option data) — restyled to this template's tokens/language: sharp
   2px corners not rounded, gold accent not the burgundy #9c0f48 there, .hnd-carousel-nav/
   .hnd-carousel-clip/.hnd-prodcard-lg reused as-is instead of a parallel set of nav/card rules. */

.hnd-hotspot { padding: 64px 0; }
.hnd-hotspot-grid { display: flex; align-items: center; gap: 40px; }
.hnd-hotspot-visual { position: relative; flex: 0 0 56%; max-width: 56%; border: 1px solid var(--c-line); overflow: hidden; }
.hnd-hotspot-img { display: block; width: 100%; height: 560px; object-fit: cover; }

.hnd-hotspot-pin {
  position: absolute;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  transform: translate(-50%, -50%);
  z-index: 2;
}
.hnd-hotspot-pin-dot { display: block; position: relative; width: 100%; height: 100%; border-radius: 50%; background: var(--c-surface); box-shadow: 0 2px 10px rgba(20,15,8,0.35); }
.hnd-hotspot-pin-dot::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; background: var(--c-gold); opacity: .5; animation: hndPinRipple 1.6s infinite; }
@keyframes hndPinRipple { 0% { transform: scale(0.6); opacity: .6; } 100% { transform: scale(1.8); opacity: 0; } }
.hnd-hotspot-pin.active .hnd-hotspot-pin-dot { background: var(--c-ink); }
.hnd-hotspot-pin.active .hnd-hotspot-pin-dot::before { background: var(--c-gold-deep); animation: none; opacity: .35; }

.hnd-hotspot-pin[aria-label]::after {
  content: attr(aria-label);
  position: absolute;
  bottom: 130%;
  right: 50%;
  transform: translateX(50%);
  background: var(--c-ink);
  color: var(--c-surface);
  padding: 5px 10px;
  font-size: 12px;
  white-space: nowrap;
  border-radius: 2px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.hnd-hotspot-pin:hover::after,
.hnd-hotspot-pin.active::after { opacity: 1; }

.hnd-hotspot-carousel { position: relative; flex: 1 1 auto; min-width: 0; padding: 0 52px; }
.hnd-hotspot-track { display: flex; transition: transform .5s cubic-bezier(.22,.61,.36,1); }
.hnd-hotspot-track > .hnd-prodcard { flex: 0 0 100%; }

@media (max-width: 900px) {
  .hnd-hotspot { padding: 40px 0; }
  .hnd-hotspot-grid { flex-direction: column-reverse; gap: 22px; }
  .hnd-hotspot-visual, .hnd-hotspot-carousel { flex: 1 1 auto; max-width: 100%; width: 100%; }
  .hnd-hotspot-img { height: 320px; }
  .hnd-hotspot-carousel { padding: 0 44px; }
}

/* ---------------------------------------------------------------- featured */

.hnd-featured { padding: 32px 0 64px; }
.hnd-featured-inner { display: flex; flex-direction: column; gap: 44px; }
.hnd-feat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.hnd-feat-carousel { position: relative; }
.hnd-feat-carousel > .hnd-carousel-clip { height: auto; }
.hnd-feat-carousel .hnd-carousel-nav { display: none; }

/* ---------------------------------------------------------------- testimonials */

.hnd-test-section {
  position: relative;
  padding: 64px 0 32px;
  background: var(--c-bg);
  overflow: hidden;
}
.hnd-test-head { margin-bottom: 52px; }
.hnd-test-head h2 { text-align: center; }
.hnd-test-wrap { position: relative; height: 400px; }
.hnd-test-track {
  display: flex;
  direction: ltr;
  gap: 18px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  will-change: transform;
  animation: hndTestMarquee 26s linear infinite;
  animation-direction: reverse;
}
@keyframes hndTestMarquee { 0% { transform: translateX(0%); } 100% { transform: translateX(-50%); } }
.hnd-test-wrap:hover .hnd-test-track { animation-play-state: paused; }
.hnd-test-card {
  flex: 0 0 300px;
  height: 100%;
  overflow: hidden;
  background: var(--c-bg-soft);
  border: 1px solid var(--c-line);
  border-radius: 2px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.hnd-test-head-row { display: flex; align-items: center; gap: 14px; min-width: 0; }
/* بدونِ min-width:0 فرزندِ فلکس کوچک‌تر از محتوایش نمی‌شود، پس نامِ بلندِ کاربر/محصول کارت را
   از هم می‌درید؛ با آن، سه‌نقطه کار می‌کند. */
.hnd-test-head-row > div { min-width: 0; }
/* .hnd-test-track (اجدادش) خودش direction:ltr دارد، پس اینجا هم به ارث می‌رسد: در چیدمانِ
   ردیفیِ ltr، فرزندِ دوم/آخر (تاریخ) کنارِ لبهٔ راستِ کارت می‌نشیند — دقیقاً همان‌جایی که
   خواسته شد، روبروی ستاره‌ها. */
.hnd-test-meta-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hnd-test-date {
  direction: rtl;
  flex-shrink: 0;
  font-size: 11px;
  color: var(--c-ink-mute);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}
.hnd-test-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--c-gold-soft);
  color: var(--c-gold-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 20px;
  flex-shrink: 0;
}
.hnd-test-name { margin: 0; font-family: var(--font-heading); font-size: 18px; color: var(--c-ink); display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; white-space: nowrap; }
/* همان رنگ/متنِ برچسبِ «خریدار» خودِ افزونهٔ dm-advanced-reviews (dm-buyer-badge)، فقط با
   کلاس خودمان — چیزی از آن پلاگین اینجا include/فراخوانی نمی‌شود. */
.hnd-test-buyer-badge { flex-shrink: 0; font-size: 11px; font-weight: 700; padding: 2px 8px; border: 1px solid #198754; color: #198754; border-radius: 4px; font-family: var(--font-body); }
.hnd-test-role { display: block; font-size: 13px; color: var(--c-ink-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.hnd-test-role:hover { color: var(--c-gold-deep); }
.hnd-test-stars { color: var(--c-gold); font-size: 16px; letter-spacing: 2px; }
/* متنِ نظر هرچقدر هم بلند باشد از کارت بیرون نمی‌زند: چهار خط، بعدش سه‌نقطه. کلمهٔ بلندِ
   بدونِ فاصله (لینک/نام لاتین) هم می‌شکند تا عرضِ کارت را پاره نکند. */
.hnd-test-quote {
  margin: 0;
  font-size: 14px;
  line-height: 1.9;
  color: var(--c-ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.hnd-test-video {
  position: absolute;
  top: 0;
  right: 0;
  width: min(360px, 34vw);
  height: 100%;
  z-index: 5;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: -30px 0 50px var(--c-bg);
}
.hnd-test-video video { width: 100%; height: 100%; object-fit: cover; }
.hnd-test-playbtn {
  position: absolute;
  bottom: 16px;
  left: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(20,15,8,0.55);
  border: none;
  color: var(--c-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.hnd-test-playbtn svg { width: 14px; height: 14px; fill: currentColor; }

/* ---------------------------------------------------------------- blog (irregular tile mosaic) */

.hnd-blog { padding: 32px 0; background: var(--c-bg); }

/* متن سئوی انتهای صفحه با «ادامه مطلب» (1.65.3). کلِ متن در DOM است؛ فقط ارتفاعش تا --hnd-seo-h بسته می‌شود. */
.hnd-seo { padding: 32px 0 48px; background: var(--c-bg); }
.hnd-seo-box { position: relative; border: 1px solid var(--c-line); background: var(--c-bg-soft); padding: 24px 28px 16px; }
.hnd-seo-content {
  position: relative;
  max-height: var(--hnd-seo-h, 240px);
  overflow: hidden;
  font-size: 15px;
  line-height: 1.9;
  color: var(--c-ink-soft);
  transition: max-height .4s ease;
}
.hnd-seo-content > :first-child { margin-top: 0; }
.hnd-seo-content > :last-child { margin-bottom: 0; }
.hnd-seo-content p { margin: 0 0 12px; }
.hnd-seo-content :is(h2, h3, h4) { margin: 20px 0 8px; color: var(--c-ink); font-family: var(--font-heading); font-weight: 400; line-height: 1.4; }
.hnd-seo-content h2 { font-size: 24px; }
.hnd-seo-content h3 { font-size: 20px; }
.hnd-seo-content h4 { font-size: 17px; }
.hnd-seo-content :is(ul, ol) { margin: 0 0 12px; padding-inline-start: 22px; }
.hnd-seo-content a { text-decoration: underline; }
/* محوشدنِ پایینِ متنِ بسته؛ با باز شدن یا وقتی متن کوتاه است (is-fit) برداشته می‌شود. */
.hnd-seo-box:not(.is-open):not(.is-fit) .hnd-seo-content::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 72px; pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--c-bg-soft));
}
.hnd-seo-box.is-open .hnd-seo-content { max-height: 4000px; }
.hnd-seo-toggle {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 8px 4px;
  border: 0; background: none; cursor: pointer; font: inherit; font-size: 14px; color: var(--c-gold-deep, var(--c-ink));
}
.hnd-seo-toggle[hidden] { display: none; }
.hnd-seo-toggle:focus-visible { outline: 2px solid var(--c-gold, currentColor); outline-offset: 2px; }
.hnd-seo-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s ease; }
.hnd-seo-box.is-open .hnd-seo-toggle svg { transform: rotate(180deg); }
@media (max-width: 900px) {
  .hnd-seo { padding: 10px 0 24px; }
  .hnd-seo-box { padding: 18px 16px 10px; }
  .hnd-seo-content { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .hnd-seo-content, .hnd-seo-toggle svg { transition: none; }
}
.hnd-blog-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 44px;
  gap: 16px;
  flex-wrap: wrap;
}
.hnd-blog-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 210px; gap: 4px; }
.hnd-blog-grid > a:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.hnd-blog-grid > a:nth-child(2) { grid-column: span 2; grid-row: span 1; }
.hnd-blog-grid > a:nth-child(3) { grid-column: span 1; grid-row: span 1; }
.hnd-blog-grid > a:nth-child(4) { grid-column: span 1; grid-row: span 1; }
.hnd-blog-grid > a:nth-child(5) { grid-column: span 2; grid-row: span 1; }
.hnd-blog-grid > a:nth-child(6) { grid-column: span 2; grid-row: span 1; }

.hnd-blogtile { position: relative; display: block; overflow: hidden; border: 1px solid var(--c-line); color: inherit; }
.hnd-blogtile-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.22,.61,.36,1); }
.hnd-blogtile:hover .hnd-blogtile-img { transform: scale(1.06); }
.hnd-blogtile-veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,15,8,0) 45%, rgba(20,15,8,0.8) 100%); }
.hnd-blogtile-body { position: absolute; inset-inline: 0; bottom: 0; z-index: 1; padding: 16px 20px; display: flex; flex-direction: column; gap: 6px; }
.hnd-blogtile-date { font-size: 11px; color: rgba(255,255,255,0.7); }
.hnd-blogtile-title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(15px, 1.5vw, 20px);
  line-height: 1.35;
  color: var(--c-surface);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 760px) {
  .hnd-blog-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 170px; }
  .hnd-blog-grid > a:nth-child(1) { grid-column: span 2; grid-row: span 1; }
  .hnd-blog-grid > a:nth-child(2) { grid-column: span 2; grid-row: span 1; }
  .hnd-blog-grid > a:nth-child(3) { grid-column: span 1; grid-row: span 1; }
  .hnd-blog-grid > a:nth-child(4) { grid-column: span 1; grid-row: span 1; }
  .hnd-blog-grid > a:nth-child(5) { grid-column: span 1; grid-row: span 1; }
  .hnd-blog-grid > a:nth-child(6) { grid-column: span 1; grid-row: span 1; }
}

/* ---------------------------------------------------------------- responsive */

@media (min-width: 901px) {
  /* height:460px حذف شد: ارتفاعِ ردیف حالا از محتوای کاروسل (عکسِ مربع + فوترِ کوتاه)
     می‌آید، نه یک عددِ ثابتِ جدا. flex-basisها برای عرض هنوز لازم‌اند. */
  .hnd-showcase-row { flex-direction: row; }
  .hnd-showcase-row:nth-child(even) { flex-direction: row-reverse; }
  .hnd-catcard.hnd-showcase-cat { flex: 0 0 33.3333%; }
  .hnd-showcase-carousel { flex: 1 1 66.6667%; }
}

@media (max-width: 1200px) and (min-width: 901px) {
  .hnd-feat-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  /* section rhythm: combined gap between any two adjacent sections must stay ≤20px on mobile */
  .hnd-popular-cats,
  .hnd-showcase,
  .hnd-featured,
  .hnd-blog { padding: 10px 0; }
  .hnd-test-section { padding: 10px 0; }

  /* بنرِ کنارِ کاروسل در چیدمانِ ستونیِ موبایل کنارِ چیزی نمی‌ایستد که ارتفاعش را از
     رویش بگیرد (align-items:stretch فقط روی چیدمانِ ردیفِ دسکتاپ اثر دارد)، پس اینجا
     تنها جایی است که همچنان به یک نسبتِ ابعادِ مستقل نیاز دارد. */
  .hnd-catcard.hnd-showcase-cat { aspect-ratio: auto; min-height: 200px; padding: 18px; }
  .hnd-catcard.hnd-showcase-cat .hnd-catcard-title { font-size: clamp(22px, 6.4vw, 30px); }
  .hnd-catcard.hnd-showcase-cat img { object-position: var(--hnd-pos-m, var(--hnd-pos, center)); }

  /* popular categories: static 2-col grid on mobile, every card fully shown/"active" at once —
     no story-style one-at-a-time switching (initPopularCats in front.js is a pure no-op below
     this same breakpoint: it never touches .hnd-cat-active, so nothing here depends on JS/timing
     at all). The overrides below repeat the exact ":not(.hnd-cat-active)"/plain-img selectors
     from the shared desktop rules on purpose — same specificity, later in the file, so they win
     regardless of whether a card happens to carry that class. */
  .hnd-popular-cats-row { flex-direction: row; flex-wrap: wrap; height: auto; gap: 8px; }
  .hnd-popular-cats-row .hnd-catcard {
    flex: 0 0 calc(50% - 4px);
    width: calc(50% - 4px);
    height: auto;
    aspect-ratio: 3 / 4;
    min-width: 0;
    cursor: default;
  }
  /* فرد بودن تعداد: کارتِ آخر اگر تنها بماند (بدون جفت در ردیفِ خودش)، کل عرض را می‌گیرد
     تا جای خالی جلویش نیفتد. */
  /* aspect-ratio:unset لازم است چون قاعدهٔ پایهٔ ۳:۴ روی عرضِ ۱۰۰٪ همین کارت را به یک
     ارتفاعِ خیلی بلند/کشیده می‌رساند (عکسِ آویز هم عمودی‌ست، دوتایی همدیگر را تشدید می‌کردند)؛
     ارتفاعِ ثابتِ معقول جای آن. */
  .hnd-popular-cats-row .hnd-catcard:nth-child(odd):last-child { flex-basis: 100%; width: 100%; aspect-ratio: unset; height: 260px; }

  .hnd-popular-cats-row .hnd-catcard img { filter: grayscale(0) contrast(1.05); }
  .hnd-popular-cats-row .hnd-catcard-title,
  .hnd-popular-cats-row .hnd-catcard:not(.hnd-cat-active) .hnd-catcard-title { top: 14px; right: 14px; font-size: 20px; }
  .hnd-popular-cats-row .hnd-catcard-btn,
  .hnd-popular-cats-row .hnd-catcard:not(.hnd-cat-active) .hnd-catcard-btn { bottom: 14px; right: 14px; opacity: 1; pointer-events: auto; }
  .hnd-cat-progress { display: none; }


  /* compact product-card text on mobile — the name already reserves a fixed 2-line height
     (min-height above), but the price was still free to wrap to a 2nd line and grow the
     footer, which (since the whole card's height is fixed via aspect-ratio) squeezed the
     image shorter on just that one card. Smaller + guaranteed-single-line price keeps the
     footer height identical across every card in a row. */
  .hnd-prodcard-footer { padding: 7px; }
  .hnd-prodcard-name { font-size: 13px; }
  .hnd-prodcard-price { font-size: 11px; display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hnd-prodcard-cat { top: 6px; right: 8px; }

  /* featured: real carousel, no native overflow-scroll */
  .hnd-feat-carousel .hnd-carousel-nav { display: flex; }
  .hnd-feat-grid {
    display: flex;
    flex-wrap: nowrap;
    transition: transform .5s cubic-bezier(.22,.61,.36,1);
  }
  .hnd-feat-grid > * { flex: 0 0 100%; }

  /* carousel arrows: let them sit just outside the card without being clipped */
  .hnd-carousel-next { left: -20px; }
  .hnd-carousel-prev { right: -20px; }
}

@media (max-width: 760px) {
  .hnd-coll-cta {
    right: 20px;
    bottom: 20px;
    left: 20px;
    max-width: none;
    background: rgba(15,12,6,0.55);
    padding: 18px;
    border-radius: 3px;
  }
  .hnd-test-video { display: none; }
}

/* ---------------------------------------------------------------- a11y */

@media (prefers-reduced-motion: reduce) {
  .hnd-wipe,
  .hnd-ghost-title-bg,
  .hnd-coll-marquee-track,
  .hnd-test-track,
  .hnd-f-ticker-track,
  .hnd-ticker-track,
  .hnd-f-brand-star { animation: none !important; }
  .hnd-reveal-row { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}