/* =========================================================
   قالب سوم — HND (تیره/جواهری)
   ---------------------------------------------------------
   برگرفته از سکشنِ «شگفت‌انگیز» طرحِ جدیدِ صفحهٔ اصلی قالب، ولی
   کاملاً مستقل: هیچ متغیر یا کلاسی از قالب مصرف نمی‌شود، پس روی
   هر قالبی همان طرح را می‌دهد (اصلِ استقلالِ افزونه).

   همهٔ مقادیر از CSS Variableهایی می‌آیند که
   Frontend::build_hnd_inline_css() از روی تنظیماتِ پیشخوان می‌سازد؛
   fallbackهای اینجا دقیقاً برابرِ ظاهرِ فعلیِ همان سکشن است تا حتی
   بدونِ تنظیمات هم خروجی همان طرح باشد.

   همه‌چیز زیر .dmao-hnd اسکوپ شده تا با استایلِ قالبِ میزبان قاطی نشود.
   ========================================================= */

.dmao-hnd {
  --hnd-section-bg:      #1a1016;
  --hnd-section-pad:     32px;
  --hnd-surface:         #ffffff;
  --hnd-accent:          #c2456f;
  --hnd-eyebrow-color:   #c2456f;
  --hnd-title-color:     #ffffff;
  --hnd-title-size:      34px;
  --hnd-desc-color:      rgba(255,255,255,0.6);
  --hnd-ghost-color:     rgba(194,69,111,0.05);
  --hnd-ghost-stroke:    rgba(194,69,111,0.16);
  --hnd-ghost-size:      clamp(48px, 6.4vw, 100px);

  --hnd-card-bg:         rgba(255,255,255,0.03);
  --hnd-card-border:     rgba(255,255,255,0.14);
  --hnd-card-radius:     0px;
  --hnd-card-gap:        4px;

  --hnd-percent-size:    66px;
  --hnd-percent-color:   rgba(194,69,111,0.16);
  --hnd-percent-stroke:  #c2456f;

  --hnd-media-ratio:     1 / 1;

  --hnd-body-bg:         rgba(20,15,8,0.35);
  --hnd-body-border:     rgba(255,255,255,0.12);
  --hnd-name-color:      #ffffff;
  --hnd-name-size:       17px;
  --hnd-price-old-color: rgba(255,255,255,0.45);
  --hnd-price-old-size:  13px;
  --hnd-price-new-color: #c2456f;
  --hnd-price-new-size:  15px;

  --hnd-stock-track:     rgba(255,255,255,0.14);
  --hnd-stock-fill:      #c2456f;
  --hnd-stock-height:    3px;
  --hnd-stock-label:     rgba(255,255,255,0.5);

  --hnd-timer-color:     rgba(255,255,255,0.55);
  --hnd-timer-icon:      #c2456f;
  --hnd-timer-size:      12px;

  --hnd-promo-tag-color: #c2456f;
  --hnd-promo-btn-bg:    #ffffff;
  --hnd-promo-btn-text:  #1a1016;

  --hnd-nav-bg:          rgba(255,255,255,0.1);
  --hnd-nav-icon:        #ffffff;
  --hnd-nav-size:        40px;

  padding: var(--hnd-section-pad) 0;
  background: var(--hnd-section-bg);
  color: var(--hnd-surface);
  direction: rtl;
  box-sizing: border-box;
}

.dmao-hnd *,
.dmao-hnd *::before,
.dmao-hnd *::after { box-sizing: border-box; }

.dmao-hnd-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ---------- سربرگ ---------- */
.dmao-hnd-head {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-bottom: 56px;
}
.dmao-hnd-eyebrow {
  font-size: 13px;
  letter-spacing: 3px;
  color: var(--hnd-eyebrow-color);
}
.dmao-hnd-desc { margin: 0; font-size: 15px; color: var(--hnd-desc-color); }

/* واژهٔ محوِ پشتِ عنوان. عمداً بالای عنوانِ اصلی می‌نشیند نه دقیقاً پشتش، تا دو خطِ
   فارسی روی یک خطِ مبنا همپوشانی نکنند و عنوانِ اصلی همیشه خوانا بماند. */
.dmao-hnd-ghost {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 58px;
}
.dmao-hnd-ghost-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  font-size: var(--hnd-ghost-size);
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  color: var(--hnd-ghost-color);
  -webkit-text-stroke: 1px var(--hnd-ghost-stroke);
  pointer-events: none;
  z-index: 0;
}
.dmao-hnd-ghost-anim { animation: dmaoHndGhostFade 7s ease-in-out infinite; }
@keyframes dmaoHndGhostFade {
  0%, 100% { opacity: 0; }
  20%, 65% { opacity: 1; }
  85% { opacity: 0; }
}
/* احترام به تنظیمِ سیستمیِ «کاهش حرکت» — انیمیشنِ تزئینی نباید به کاربری که
   صریحاً حرکت را خاموش کرده تحمیل شود. */
@media (prefers-reduced-motion: reduce) {
  .dmao-hnd-ghost-anim { animation: none; opacity: 1; }
  .dmao-hnd-grid { transition: none; }
}
.dmao-hnd-title {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: var(--hnd-title-size);
  line-height: 1.25;
  color: var(--hnd-title-color);
}

/* ---------- کاروسل ---------- */
.dmao-hnd-carousel { position: relative; }
.dmao-hnd-clip { width: 100%; overflow: hidden; }
.dmao-hnd-grid {
  display: flex;
  gap: var(--hnd-card-gap);
  transition: transform .5s cubic-bezier(.22,.61,.36,1);
}

/* کشیدنِ افقی مالِ کاروسل، اسکرولِ عمودیِ صفحه مالِ مرورگر. بدونِ pan-y، هر کشیدنِ کمی
   مورب روی موبایل اسکرولِ صفحه را می‌گرفت. */
.dmao-hnd-grid { touch-action: pan-y; }
.dmao-hnd-dragging .dmao-hnd-grid { cursor: grabbing; }
.dmao-hnd-dragging .dmao-hnd-grid img { pointer-events: none; }
.dmao-hnd-card {
  flex: 0 0 calc((100% / var(--hnd-per-view, 4)) - var(--hnd-card-gap));
  position: relative;
  border: 1px solid var(--hnd-card-border);
  border-radius: var(--hnd-card-radius);
  background: var(--hnd-card-bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
}

.dmao-hnd-percent {
  position: absolute;
  top: 5px;
  inset-inline-end: 10px;
  z-index: 2;
  font-weight: 400;
  font-size: var(--hnd-percent-size);
  line-height: 1;
  color: var(--hnd-percent-color);
  -webkit-text-stroke: 1px var(--hnd-percent-stroke);
  pointer-events: none;
}

/* بجِ سطحِ اشتراک — گوشهٔ مقابلِ عددِ درصد تا هرگز روی هم نیفتند. */
.dmao-hnd-tier {
  position: absolute;
  top: 14px;
  inset-inline-start: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(0,0,0,0.28);
}
.dmao-hnd-tier svg { width: 10px; height: 10px; flex-shrink: 0; }
.dmao-hnd-tier-silver   { background: #dcdce0; border: 1px solid #b9b9c0; color: #37373d; }
.dmao-hnd-tier-silver svg { fill: #37373d; }
.dmao-hnd-tier-gold     { background: var(--hnd-accent); color: #1a1016; }
.dmao-hnd-tier-gold svg { fill: #1a1016; }
.dmao-hnd-tier-platinum { background: linear-gradient(135deg, #eef1f6, #c9d1dc); color: #262c36; }
.dmao-hnd-tier-platinum svg { fill: #262c36; }

.dmao-hnd-media { aspect-ratio: var(--hnd-media-ratio); overflow: hidden; }
.dmao-hnd-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.dmao-hnd-body {
  position: relative;
  z-index: 1;
  padding: 18px 20px 22px;
  border-top: 1px solid var(--hnd-body-border);
  background: var(--hnd-body-bg);
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.dmao-hnd-name {
  margin: 0;
  font-size: var(--hnd-name-size);
  line-height: 1.4;
  color: var(--hnd-name-color);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--hnd-name-lines, 2);
  overflow: hidden;
  /* یک تایتلِ کوتاه (یک‌خطی) نباید ردیفِ قیمت/نوار/تایمرِ زیرش را بالاتر از کارتِ کناری‌اش
     بکشد — با رزروِ ارتفاعِ ثابت به‌اندازهٔ حداکثرِ خطوطِ مجاز، عکس+تایتل بالا و
     قیمت+نوار+تایمر همیشه در یک ردیفِ ثابت پایینِ همهٔ کارت‌ها می‌مانند. */
  min-height: calc(var(--hnd-name-size) * 1.4 * var(--hnd-name-lines, 2));
}
.dmao-hnd-prices { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dmao-hnd-prices del { font-size: var(--hnd-price-old-size); color: var(--hnd-price-old-color); }
.dmao-hnd-prices > span { font-size: var(--hnd-price-new-size); font-weight: 700; color: var(--hnd-price-new-color); }
/* واحدِ پولِ تودرتوی خروجیِ ووکامرس رنگ/اندازه را از والد می‌گیرد، وگرنه اگر جایی
   مقدارِ مطلق داشته باشد از ردیفِ قیمت بیرون می‌زند. */
.dmao-hnd-prices del .woocommerce-Price-amount,
.dmao-hnd-prices del .woocommerce-Price-currencySymbol { font-size: inherit; color: inherit; }
.dmao-hnd-prices > span .woocommerce-Price-amount,
.dmao-hnd-prices > span .woocommerce-Price-currencySymbol { font-size: inherit; color: inherit; }

.dmao-hnd-stock { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.dmao-hnd-stock-bar {
  flex: 1;
  height: var(--hnd-stock-height);
  border-radius: 999px;
  background: var(--hnd-stock-track);
  overflow: hidden;
}
.dmao-hnd-stock-fill { display: block; height: 100%; background: var(--hnd-stock-fill); border-radius: 999px; }
.dmao-hnd-stock-label { flex-shrink: 0; font-size: 11px; color: var(--hnd-stock-label); }

.dmao-hnd-timer {
  display: flex;
  align-items: center;
  gap: 6px;
  direction: ltr;
  font-size: var(--hnd-timer-size);
  color: var(--hnd-timer-color);
}
.dmao-hnd-timer svg { width: 13px; height: 13px; stroke: var(--hnd-timer-icon); fill: none; stroke-width: 1.6; flex-shrink: 0; }

/* ---------- اسلایدهای تبلیغاتیِ ابتدا و انتها ---------- */
.dmao-hnd-promo { align-items: stretch; }
/* اسلایدِ ابتدا کارتِ محصول نیست: عرضش ضریبی از عرضِ یک کارت است (تنظیماتِ قالب سوم،
   hnd_promo_width) و رنگِ پس‌زمینه‌اش وقتی دیده می‌شود که تصویری ست نشده باشد. */
.dmao-hnd-grid > .dmao-hnd-promo:first-child {
  flex-basis: calc(((100% / var(--hnd-per-view, 4)) - var(--hnd-card-gap)) * var(--hnd-promo-width, 0.78));
  background: var(--hnd-promo-bg, #2a1520);
}
.dmao-hnd-promo-icon { display: flex; align-items: center; justify-content: center; width: 100%; }
/* آیکون با عرضِ کارت مقیاس می‌گیرد، ولی سقف دارد تا در کارتِ پهن غول‌پیکر نشود. */
.dmao-hnd-promo-icon svg,
.dmao-hnd-promo-icon .dmao-hnd-promo-icon-img {
  display: block;
  width: 100%;
  max-width: 128px;
  height: auto;
  max-height: 128px;
  object-fit: contain;
}
.dmao-hnd-promo-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dmao-hnd-promo-veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,8,4,0.35), rgba(10,8,4,0.8)); }
.dmao-hnd-promo-content {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px;
  text-align: center;
}
.dmao-hnd-promo-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.5px; color: var(--hnd-promo-tag-color); }
.dmao-hnd-promo-tag-icon { width: 16px; height: 16px; flex-shrink: 0; fill: currentColor; color: var(--hnd-promo-tag-color); }
.dmao-hnd-promo-tag-icon[src] { object-fit: contain; }
.dmao-hnd-promo-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  font-size: 14px;
  font-weight: 700;
  background: var(--hnd-promo-btn-bg);
  color: var(--hnd-promo-btn-text);
  border-radius: 3px;
}
.dmao-hnd-promo-btn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.dmao-hnd-promo-end { background: rgba(255,255,255,0.05); }

/* ---------- فلش‌های ناوبری ---------- */
.dmao-hnd-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: var(--hnd-nav-size);
  height: var(--hnd-nav-size);
  border: 2px solid var(--hnd-accent);
  border-radius: 50%;
  background: var(--hnd-nav-bg);
  color: var(--hnd-nav-icon);
  cursor: pointer;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.dmao-hnd-nav svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.dmao-hnd-nav:hover { background: var(--hnd-accent); color: #ffffff; }
/* موقعیتِ راست/چپِ دو دکمه برعکس شد (قبلی سمتِ چپ، بعدی سمتِ راست) — چرخشِ ۱۸۰ درجه‌ی
   قبلی حذف شد چون جهتِ فلش‌ها را دقیقاً برعکسِ خواسته نشان می‌داد. */
.dmao-hnd-prev { inset-inline-start: -8px; }
.dmao-hnd-next { inset-inline-end: -8px; }
.dmao-hnd-nav.dmao-hnd-nav-off { opacity: .35; cursor: default; }

/* ---------- کارتِ تمام‌شده ---------- */
.dmao-hnd-card--finished { cursor: default; }
.dmao-hnd-finished-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: grayscale(1);
  background: rgba(10,8,10,0.25);
}
.dmao-hnd-finished-badge {
  padding: 7px 22px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  background: var(--hnd-accent);
  color: var(--hnd-surface);
}

/* =========================================================
   لندینگ — گریدِ همان کارت‌ها
   ---------------------------------------------------------
   سلکتورها دوکلاسه‌اند (0-2-0) تا مستقل از ترتیبِ سورس بر قاعده‌های
   تک‌کلاسهٔ بالا برنده باشند؛ ترتیبِ سورس چیزی است که افزونهٔ کشِ صفحه
   هنگام ترکیبِ فایل‌ها آزادانه جابه‌جا می‌کند.
   ========================================================= */
.dmao-hnd.dmao-hnd-landing {
  background: var(--hnd-landing-bg, transparent);
  padding: var(--hnd-landing-pad, 0px) 0;
}
.dmao-hnd.dmao-hnd-landing .dmao-hnd-inner { padding: 0; }
.dmao-hnd.dmao-hnd-landing .dmao-hnd-landing-grid {
  display: grid;
  grid-template-columns: repeat(var(--hnd-landing-cols, 4), minmax(0, 1fr));
  gap: var(--hnd-landing-gap, 4px);
  margin-top: 8px;
}
.dmao-hnd.dmao-hnd-landing .dmao-hnd-card {
  /* داخلِ گرید، عرض از سلول می‌آید نه از flex-basisِ اسلاید. */
  flex: initial;
  width: 100%;
  background: var(--hnd-landing-card-bg, rgba(255,255,255,0.03));
  border-color: var(--hnd-landing-card-border, rgba(255,255,255,0.14));
}
.dmao-hnd.dmao-hnd-landing .dmao-hnd-body { background: var(--hnd-landing-body-bg, rgba(20,15,8,0.35)); }
.dmao-hnd.dmao-hnd-landing .dmao-hnd-name { color: var(--hnd-landing-name-color, #ffffff); }
.dmao-hnd.dmao-hnd-landing .dmao-hnd-prices > span { color: var(--hnd-landing-price-new-color, #c2456f); }
.dmao-hnd.dmao-hnd-landing .dmao-hnd-prices del { color: var(--hnd-landing-price-old-color, rgba(255,255,255,0.45)); }

@media (max-width: 1200px) {
  .dmao-hnd.dmao-hnd-landing .dmao-hnd-landing-grid {
    grid-template-columns: repeat(min(var(--hnd-landing-cols, 4), 3), minmax(0, 1fr));
  }
}
@media (max-width: 991.98px) {
  .dmao-hnd.dmao-hnd-landing .dmao-hnd-landing-grid {
    grid-template-columns: repeat(min(var(--hnd-landing-cols, 4), 2), minmax(0, 1fr));
  }
}

/* ---------- ریسپانسیو ---------- */
/* مرزها با همان بریک‌پوینت‌های واحدِ افزونه (۹۹۲ و ۵۷۶) و با اعشارِ .98 تا هیچ عرضِ
   اعشاری بینِ دو بازه بی‌صاحب نماند. */
@media (max-width: 991.98px) {
  .dmao-hnd-head { margin-bottom: 32px; }
  .dmao-hnd-percent { font-size: calc(var(--hnd-percent-size) * 0.72); }
}
@media (max-width: 575.98px) {
  .dmao-hnd-inner { padding: 0 14px; }
  .dmao-hnd-body { padding: 14px 14px 16px; }
}