/* dooz-engine — product UI (item A), 2026-09-19
 *
 * One shape rule, one scale, one palette. Every number here was measured in the
 * browser against the previews, not guessed:
 *   --dz-nudge  the Persian body band of AbarLowFaNum sits 0.058em above a
 *               flex-centred line box; this pushes the label back onto the centre line
 *   icons       each icon's ink is centred on (12,12) and its longest side normalised
 *               to 18 viewBox units, with stroke-width compensated so the rendered
 *               thickness stays 1.13px at every size
 *
 * Contrast (AA needs 4.5:1 for small text): every badge and chip pair is above 5.3:1;
 * the price went from 2.4:1 to 17.0:1.
 */

:root {
  /* shape — the whole rule in three lines */
  --dz-r-label: 8px;      /* it only informs: badges, chips, info boxes */
  --dz-r-action: 50px;    /* it does something: buttons */
  --dz-r-container: 20px; /* it holds things: cards, the chart panel */

  /* scale */
  --dz-badge-h: 30px;      --dz-badge-fs: 13px;   --dz-badge-pad: 10px;  --dz-badge-gap: 6px;
  --dz-badge-sm-h: 24px;   --dz-badge-sm-fs: 11px; --dz-badge-sm-pad: 8px; --dz-badge-sm-gap: 5px;
  --dz-chip-h: 46px;       --dz-chip-fs: 14px;    --dz-chip-pad: 18px;   --dz-chip-gap: 7px;
  --dz-row-gap: 8px;

  /* the optical nudge, measured — see the header */
  --dz-nudge: 0.058em;

  /* palette */
  --dz-badge-discount-bg: #DD2D38;
  --dz-badge-discount-fg: #FFFFFF;
  --dz-badge-lastchance-bg: #FFF3D6;
  --dz-badge-lastchance-fg: #8A5A00;
  --dz-badge-fast-bg: #E7F4EC;
  --dz-badge-fast-fg: #1A6B42;
  --dz-badge-gift-bg: #FDECEE;
  --dz-badge-gift-fg: #B02630;
  --dz-badge-new-bg: #E9F1FA;
  --dz-badge-new-fg: #1E5A93;
  --dz-chip-oos-bg: #F1F3F5;
  --dz-chip-oos-fg: #525C66;
  --dz-chip-retired-bg: #F4F0E8;
  --dz-chip-retired-fg: #6E5F49;
  --dz-chip-soon-bg: #E9F1FA;
  --dz-chip-soon-fg: #1E5A93;

  --dz-ink: #201B1B;
  --dz-ink-2: #5A6570;
  --dz-ink-3: #8A949E;
  --dz-line: #ECEFF2;
  --dz-brand: #DD2D38;
  --dz-good: #1A6B42;
  --dz-good-bg: #E7F4EC;
  --dz-date-bg: #FCEEEF;
}

/* ── badges ─────────────────────────────────────────────────────────────── */
.dz-badges {
  display: flex;
  flex-wrap: wrap;                 /* was nowrap — this is what clipped them on mobile */
  gap: var(--dz-row-gap);
  align-items: center;             /* was stretch — this is what made height follow the longest label */
}
.dz-badges:empty { display: none; }

.dz-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--dz-badge-gap);
  height: var(--dz-badge-h);
  padding: 0 var(--dz-badge-pad);
  box-sizing: border-box;
  border-radius: var(--dz-r-label);
  font-size: var(--dz-badge-fs);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
.dz-badge > svg { display: block; flex: 0 0 auto; }
.dz-badge > .dz-t { display: block; line-height: 1; transform: translateY(var(--dz-nudge)); }

.dz-badge--sm {
  height: var(--dz-badge-sm-h);
  padding: 0 var(--dz-badge-sm-pad);
  gap: var(--dz-badge-sm-gap);
  font-size: var(--dz-badge-sm-fs);
}

.dz-badge--discount   { background: var(--dz-badge-discount-bg);   color: var(--dz-badge-discount-fg); }
.dz-badge--lastchance { background: var(--dz-badge-lastchance-bg); color: var(--dz-badge-lastchance-fg); }
.dz-badge--fast       { background: var(--dz-badge-fast-bg);       color: var(--dz-badge-fast-fg); }
.dz-badge--gift       { background: var(--dz-badge-gift-bg);       color: var(--dz-badge-gift-fg); }
.dz-badge--new        { background: var(--dz-badge-new-bg);        color: var(--dz-badge-new-fg); }

/* ── status chips — one per product, in place of the buy button ─────────── */
.dz-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--dz-chip-gap);
  height: var(--dz-chip-h);
  padding: 0 var(--dz-chip-pad);
  box-sizing: border-box;
  border-radius: var(--dz-r-label);
  font-size: var(--dz-chip-fs);
  font-weight: 600;
  line-height: 1;
}
.dz-chip > svg { display: block; flex: 0 0 auto; }
.dz-chip > .dz-t { display: block; line-height: 1; transform: translateY(var(--dz-nudge)); }
.dz-chip--full { display: flex; width: 100%; height: 50px; }

.dz-chip--oos     { background: var(--dz-chip-oos-bg);     color: var(--dz-chip-oos-fg); }
.dz-chip--retired { background: var(--dz-chip-retired-bg); color: var(--dz-chip-retired-fg); }
.dz-chip--soon    { background: var(--dz-chip-soon-bg);    color: var(--dz-chip-soon-fg); }

/* ── price ──────────────────────────────────────────────────────────────── */
/* today the regular price renders #A6A4A4 / weight 400 — 2.4:1, under AA.
   The sale price renders near-black and bold, so the *discounted* number looks
   strong and the ordinary one looks disabled. Both are now the same weight. */
.dz-price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.dz-price__now {
  font-size: 26px;
  font-weight: 700;
  color: var(--dz-ink);
  white-space: nowrap;
}
.dz-price__unit { font-size: 15px; font-weight: 400; color: var(--dz-ink-2); }
.dz-price__was {
  font-size: 15px;
  color: var(--dz-ink-3);
  text-decoration: line-through;
  white-space: nowrap;
}
/* kills the two-line "تــــــو / مان": the tatweel string and the block display */
/* برش A-2 (هنوز فعال نیست — تنها قاعده‌ای که نشانه‌گذاری فعلی را هدف می‌گیرد):
.woocommerce-Price-currencySymbol { display: inline !important; width: auto !important; } */

.dz-best-price {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--dz-good);
  font-size: 13px;
  font-weight: 600;
}
.dz-best-price > .dz-t { display: block; line-height: 1; transform: translateY(var(--dz-nudge)); }

/* ── info boxes — delivery date, sale start, Tehran stock ───────────────── */
.dz-info {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: var(--dz-r-label);
  padding: 14px 15px;
  font-size: 13.5px;
  line-height: 1.7;
}
.dz-info > svg { display: block; flex: 0 0 auto; }
.dz-info > .dz-t { display: block; line-height: 1; transform: translateY(var(--dz-nudge)); }
.dz-info--date { background: var(--dz-date-bg); color: var(--dz-ink); }
.dz-info--fast { background: var(--dz-good-bg); color: var(--dz-good); }

/* ── buttons ────────────────────────────────────────────────────────────── */
.dz-buy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 50px;
  border-radius: var(--dz-r-action);
  background: var(--dz-brand);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}
.dz-buy > .dz-t { display: block; line-height: 1; transform: translateY(var(--dz-nudge)); }
.dz-buy[aria-disabled="true"] { background: #F1B3B7; pointer-events: none; }

/* ── the card ───────────────────────────────────────────────────────────── */
.dz-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(0, 1fr));
  gap: 24px;
}
.dz-card { border-radius: var(--dz-r-container); position: relative; }
.dz-card__badges {
  position: absolute;
  top: 16px;
  right: 16px;                     /* RTL leading corner */
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;         /* in an RTL column this is the RIGHT edge.
                                      flex-end put them on the left — that was the bug. */
}
.dz-card .dz-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 44px;                    /* was 40px — under the 44px touch minimum */
  padding: 0 16px;
  box-sizing: border-box;
  border-radius: var(--dz-r-action);
  background: var(--dz-brand);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  flex: 0 0 auto;
}
.dz-card .dz-cta > .dz-t { display: block; line-height: 1; transform: translateY(var(--dz-nudge)); }

/* the expand-on-hover the previous developer built, kept — with its three holes closed.
   The label is a real label now; the accessible name comes from aria-label either way. */
@media (hover: hover) and (pointer: fine) {
  .dz-card .dz-cta > .dz-t {
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-width .4s ease, opacity .25s ease, margin .4s ease;
    margin-inline-start: 0;
  }
  .dz-card:hover .dz-cta > .dz-t,
  .dz-card .dz-cta:focus-visible > .dz-t {
    max-width: 8em;
    opacity: 1;
    margin-inline-start: 2px;
  }
}
/* touch devices never fire hover, so the label is simply always there */

/* ── icons ──────────────────────────────────────────────────────────────── */
.dz-icon { display: block; flex: 0 0 auto; }

/* ── the price chart ────────────────────────────────────────────────────── */
.dz-chart {
  border: 1px solid var(--dz-line);
  border-radius: var(--dz-r-container);
  background: #fff;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.dz-chart__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.dz-chart__title { margin: 0; font-size: 17px; font-weight: 700; }
.dz-chart__window { font-size: 11.5px; color: var(--dz-ink-3); }
.dz-chart__stats { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }  /* حسین 2026-09-19: سه عدد سمت چپ، هر کدام در کادر */
.dz-stat { display: flex; flex-direction: column; gap: 3px; min-width: 150px; padding: 10px 16px; background: #F6F7F9; border-radius: var(--dz-r-label); }  /* کادرِ «فقط خبر می‌دهد» → شعاع ۸px طبق قانون شکل */
.dz-stat__label { font-size: 11.5px; color: var(--dz-ink-3); }
.dz-stat__value { font-size: 17px; font-weight: 700; white-space: nowrap; }
.dz-stat__date { font-size: 11px; color: var(--dz-ink-3); }
.dz-chart svg { display: block; width: 100%; height: auto; }
.dz-chart__svg { position: relative; touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }  /* نگه‌داشتن انگشت متنِ نمودار را انتخاب نکند */
.dz-chart__guide, .dz-chart__dot, .dz-chart__tip { position: absolute; pointer-events: none; opacity: 0; transition: opacity .12s ease; }
.dz-chart__svg.is-on .dz-chart__guide, .dz-chart__svg.is-on .dz-chart__dot, .dz-chart__svg.is-on .dz-chart__tip { opacity: 1; }
.dz-chart__guide { top: 0; bottom: 0; width: 1px; background: #C9D1D9; transform: translateX(-.5px); }
.dz-chart__dot { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: #fff; border: 2px solid var(--dz-ink, #201B1B); }
.dz-chart__tip { transform: translate(-50%, -100%); background: var(--dz-ink, #201B1B); color: #fff; border-radius: 8px; padding: 6px 10px; white-space: nowrap; display: flex; flex-direction: column; align-items: center; gap: 1px; line-height: 1.5; z-index: 2; }
.dz-chart__tip-price { font-size: 13px; font-weight: 700; }
.dz-chart__tip-date { font-size: 11px; opacity: .8; }
.dz-chart__svg--m { display: none; }
@media (max-width: 767px) { .dz-chart__svg--d { display: none; } .dz-chart__svg--m { display: block; } }  /* no horizontal scroll, any width */

@media (max-width: 768px) {
  .dz-chart { padding: 16px; gap: 14px; }
  .dz-chart__title { font-size: 15px; }
  .dz-chart__stats { gap: 6px; flex-wrap: nowrap; }
  /* پدینگِ افقی از ۸ به ۵ و گپ از ۸ به ۶: روی هر کاشی ~۷ پیکسل جای
     بیشتر می‌دهد و به چشم نمی‌آید. این **پله‌ی اول** بیمه است — تا شکستِ
     خط فقط برای عرض‌هایی بماند که واقعاً کم می‌آورند، نه برای دستگاهی که
     دو پیکسل کم دارد. (بدونِ این، روی ۴۳۰ هم می‌شکست؛ سنجیده شد.) */
  .dz-stat { min-width: 0; flex: 1 1 0; padding: 8px 5px; }
  .dz-stat__value { font-size: 13.5px; }   /* قیمتِ ۹ رقمی (بالای ۱۰۰ میلیون) هم در کادرِ ~۱۰۸px جا شود */

  /* ── بیمه‌ی «تومان» (تصمیمِ حسین، ۳ نوامبر ۲۰۲۶) ──────────────────────
   * این خط `white-space: nowrap` دارد (خطِ ۲۵۶)، یعنی «هرگز نشکن». پس وقتی
   * جا کم می‌آید متن به‌جای رفتن به خطِ بعد، از کادر **بیرون می‌زند**.
   * این‌جا ممنوعیت برداشته می‌شود و یک نقطه‌ی شکستِ نامرئی (فاصله‌ی صفرعرض)
   * درست پیشِ «تومان» گذاشته می‌شود. مرورگر از نقطه‌ی شکست **فقط وقتی جا
   * نشود** استفاده می‌کند — پس روی هر دستگاهی که امروز درست است، هیچ چیز
   * عوض نمی‌شود: نه ارتفاع، نه تعداد خط، نه قلم.
   *
   * ⚠ چرا «بیمه» و نه «رفع»: چهار گوشی‌ی واقعیِ حسین (دو اندروید، دو آیفون)
   *   این بلوک را **سالم** نشان دادند، ولی مرورگرِ این سشن روی ۳۶۰ سرریز
   *   می‌دید. علتش فونت است: این بلوک فونتِ **سیستم** را می‌گیرد
   *   (`-apple-system`)، و رندرِ این سشن حدود **۸٪ پهن‌تر** از دستگاه‌های او
   *   است — آن‌قدر که حتی خودِ عدد بدونِ «تومان» هم ۵ پیکسل سرریز می‌کرد،
   *   در حالی که عکسِ آیفونِ او همان عدد **به‌علاوه‌ی** «تومان» را یک‌خطی
   *   نشان می‌داد. پس این تغییر برای دستگاهی است که شاید وجود داشته باشد،
   *   نه برای نقصی که روی دستگاهِ واقعی دیده شده باشد. */
  .dz-stat__value { white-space: normal; }
  .dz-stat__value .dzp-cur::before { content: "\200B"; }
}

/* ══ closed gaps, 2026-09-19 (second pass) ══════════════════════════════ */

/* ── 1. the tablet band ─────────────────────────────────────────────────
 * The page has exactly ONE breakpoint today: 767px. Above it the desktop
 * two-column layout is kept whatever the width, so the whole 768–1100 band
 * overflows horizontally. Measured on the real page:
 *     768px  → 47px overflow, summary column 279px
 *     900px  → 31px overflow, summary column 324px
 *    1024px  → 24px overflow, summary column 366px
 *     767px  →  0px overflow, single column          ← stacking fixes it
 * The summary column on an iPad (279px) is NARROWER than on an iPhone (342px).
 * Fix: start the existing single-column layout at 1100 instead of 767.
 * In Elementor this is the "Tablet" breakpoint value, not new CSS. */
@media (max-width: 1100px) {
  .dz-summary-col, .dz-gallery-col { width: 100%; max-width: 100%; float: none; }
  .dz-product-top { display: flex; flex-direction: column; }
}

/* ── 2. the spec strip on a phone ───────────────────────────────────────
 * "H: 16cm W: 16cm D: 32cm" was the only item that wrapped to two lines
 * (93px wide, 30px tall) which left the 3×2 grid with uneven rows, and the
 * Latin run had no isolation inside the RTL container. */
@media (max-width: 767px) {
  .dz-spec-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.dz-spec-strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.dz-spec__value--ltr { direction: ltr; unicode-bidi: isolate; }

/* ── 3. the description block on a phone ────────────────────────────────
 * H2 rendered at 40px inside a 333px column — the product's own H1 is 22px. */
@media (max-width: 767px) {
  .dz-desc h2 { font-size: 20px; line-height: 1.6; }
  .dz-desc h3 { font-size: 17px; line-height: 1.65; }
  .dz-desc, .dz-desc p { font-size: 14px; line-height: 2.05; }
}
/* justify stretches Persian word spacing badly at narrow widths */
.dz-desc, .dz-desc p, .dz-desc li { text-align: start; }

/* ── 4. one accordion, not two ──────────────────────────────────────────
 * Both families are the same Elementor widget but drifted apart: heights
 * 66 vs 72, dividers #E9E8E8 vs #E5E5E5, one tinted background, icons on
 * one group only. Shared tokens; heights differ because the jobs differ. */
.dz-acc__row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border-bottom: 1px solid var(--dz-line);
  padding: 0 14px;
  box-sizing: border-box;
}
.dz-acc__row > .dz-acc__chevron { color: #C9D0D8; flex: 0 0 auto; }
.dz-acc__row > .dz-acc__text { flex-grow: 1; color: var(--dz-ink); }
/* the three link-like rows in the summary column — they keep their icons */
.dz-acc--summary .dz-acc__row { height: 52px; }
.dz-acc--summary .dz-acc__text { font-size: 13.5px; }
/* the four full-width page sections — headings, so no icons */
.dz-acc--page .dz-acc__row { height: 60px; }
.dz-acc--page .dz-acc__text { font-size: 15px; }

/* ══════════ برش A-2 — نشانه‌گذاری «تقویت‌شده»ی قالب (سشن استیجینگ، 2026-09-19) ══════════
   کلاس‌های dz-* روی همان عناصر قالب/المنتور می‌نشینند؛ چون CSS هر ویجت المنتور ویژگیِ بالاتری دارد، این‌جا !important ناگزیر است. */
a.dz-badge { text-decoration: none; cursor: pointer; transition: filter .15s ease; }
a.dz-badge:hover, a.dz-badge:focus-visible { filter: brightness(.92); }
.single-product .dz-badges { margin: 0 0 10px; }

/* چیپ وضعیت جای دکمه‌ی خرید (div.custom_call_btn) */
.single-product .elementor-button.dz-chip {
  display: flex !important; align-items: center; justify-content: center; gap: var(--dz-chip-gap);
  width: 100%; height: 50px; padding: 0 var(--dz-chip-pad) !important; box-sizing: border-box;
  border: 0 !important; border-radius: var(--dz-r-label) !important; box-shadow: none !important;
  font-size: var(--dz-chip-fs) !important; font-weight: 600 !important; line-height: 1 !important; cursor: default;
}
.single-product .elementor-button.dz-chip .elementor-button-content-wrapper { display: inline-flex; align-items: center; gap: var(--dz-chip-gap); }
.single-product .elementor-button.dz-chip .elementor-button-text { transform: translateY(var(--dz-nudge)); }
.single-product .elementor-button.dz-chip--oos     { background: var(--dz-chip-oos-bg) !important;     color: var(--dz-chip-oos-fg) !important; }
.single-product .elementor-button.dz-chip--retired { background: var(--dz-chip-retired-bg) !important; color: var(--dz-chip-retired-fg) !important; }

/* دکمه‌ی خرید و «خبرم کن» */
.single-product .dz-buy {
  display: flex !important; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 50px; padding: 0 18px !important; box-sizing: border-box;
  border: 0 !important; border-radius: var(--dz-r-action) !important;
  background: var(--dz-brand) !important; color: #fff !important;
  font-size: 15px !important; font-weight: 600 !important; line-height: 1.2 !important; text-decoration: none !important; cursor: pointer;
}
.single-product .dz-buy:hover, .single-product .dz-buy:focus-visible { filter: brightness(.94); }
.single-product .dz-buy .elementor-button-content-wrapper { display: inline-flex; align-items: center; gap: 8px; }
.single-product .dz-buy svg { width: 22px; height: 22px; flex: 0 0 auto; }
.single-product .dz-buy svg path { stroke: currentColor; stroke-width: 1.24; stroke-linecap: round; stroke-linejoin: round; }
.single-product .dz-buy .elementor-button-text, .single-product .dz-buy > .dz-t { transform: translateY(var(--dz-nudge)); color: #fff; }

/* قیمت: تیره و پررنگ (قبلاً #A6A4A4 / ۴۰۰ = کنتراست ۲٫۴)، واحد کوچک و یک‌خطی، خط‌خورده آرام */
.single-product .elementor-widget-woocommerce-product-price .price { color: var(--dz-ink) !important; font-size: 26px !important; font-weight: 700 !important; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.single-product .elementor-widget-woocommerce-product-price .price .woocommerce-Price-amount { color: inherit; white-space: nowrap; }
.single-product .elementor-widget-woocommerce-product-price .price .woocommerce-Price-currencySymbol { font-size: 15px !important; font-weight: 400 !important; color: var(--dz-ink-2) !important; }
.single-product .elementor-widget-woocommerce-product-price .price del { font-size: 15px !important; font-weight: 400 !important; color: var(--dz-ink-3) !important; text-decoration: line-through; opacity: 1; order: 2; }
.single-product .elementor-widget-woocommerce-product-price .price del .woocommerce-Price-currencySymbol { font-size: 12px !important; color: inherit !important; }
.single-product .elementor-widget-woocommerce-product-price .price ins { text-decoration: none; font-weight: 700 !important; color: var(--dz-ink) !important; order: 1; }
.single-product .elementor-widget-woocommerce-product-price .price ins .woocommerce-Price-amount bdi { color: var(--dz-ink) !important; }   /* قالب قیمت حراج را قرمز می‌کرد؛ طرح: یک قرمز در صفحه (بج تخفیف و دکمه) */

/* کادرهای خبر */
.single-product .dz-info--fast { margin-bottom: 10px; }
.single-product .dz-info--fast .dz-t { line-height: 1.7; }
.single-product .product-receive-date.dz-info-date { border-radius: var(--dz-r-label); background: var(--dz-date-bg) !important; padding: 14px 15px !important; }
.single-product .product-receive-date.dz-info-date ul { margin: 0; padding: 0; list-style: none; }
.single-product .product-receive-date.dz-info-date li { display: flex !important; align-items: center; gap: 10px; }
.single-product .product-receive-date.dz-info-date .elementor-icon-list-icon { display: flex; color: var(--dz-ink); margin: 0 !important; }
.single-product .product-receive-date.dz-info-date .elementor-icon-list-icon svg { width: 18px !important; height: 18px !important; fill: none !important; }
.single-product .product-receive-date.dz-info-date .elementor-icon-list-text { color: var(--dz-ink) !important; font-size: 13.5px !important; line-height: 1.7; padding: 0 !important; transform: translateY(var(--dz-nudge)); }
/* راهنمای قیمت محصول متغیر */
.single-product .elementor-widget-woocommerce-product-price .price .dz-price-hint { flex-basis: 100%; font-size: 12px; font-weight: 400; color: var(--dz-ink-3); line-height: 1.6; margin-top: -6px; }