/*
Theme Name: Nizha
Theme URI: https://nizha.example
Author: Nizha Perfume
Description: قالب اختصاصی ووکامرس برای گالری عطر دست‌ساز نیژا — لوکس، مینیمال، فارسی و کاملاً راست‌چین.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: nizha
Tags: rtl-language-support, e-commerce, custom-colors, full-width-template
*/

/* ==========================================================================
   ۱. توکن‌های طراحی
   پالت برند: کرم استخوانی + مرکب گرم + برگاندی + طلایی
   همهٔ جفت‌های متن/زمینه با WCAG AA سنجیده شده‌اند (نسبت‌ها در کامنت).
   ========================================================================== */

:root {
  /* — رنگ — */
  --cream:        #FAF7F2;  /* زمینهٔ اصلی */
  --cream-deep:   #F2EDE4;  /* نوار بخش‌های متناوب */
  --surface:      #FFFFFF;  /* کارت */
  --ink:          #1A1614;  /* متن اصلی — 16.8:1 روی کرم */
  --ink-soft:     #5F554E;  /* متن ثانویه — 6.8:1 روی کرم */
  --burgundy:     #7A1F2B;  /* اکشن اصلی — 9.6:1 روی کرم */
  --burgundy-deep:#5E1621;  /* هاور */
  --gold:         #8A5406;  /* متن تأکیدی — 5.9:1 روی کرم */
  --gold-leaf:    #C9A227;  /* تزئینی + روی زمینهٔ تیره — 7.4:1 روی مرکب */
  --hairline:     #E6DED3;  /* خط جداکنندهٔ تزئینی */
  --edge:         #8F8172;  /* حاشیهٔ عناصر تعاملی — 3.5:1 روی کرم */
  --success:      #1F6B45;
  --danger:       #B02020;

  /* — فاصله‌گذاری (density 2/10 — بازِ نفس‌کشیده) — */
  --s-1: 0.5rem;   /*  8px */
  --s-2: 1rem;     /* 16px */
  --s-3: 1.5rem;   /* 24px */
  --s-4: 2rem;     /* 32px */
  --s-5: 3rem;     /* 48px */
  --s-6: 4rem;     /* 64px */
  --s-7: 6rem;     /* 96px */
  --s-8: 8rem;     /* 128px */

  /* — تایپوگرافی — */
  --font-fa: 'Vazirmatn', 'IRANSans', 'Tahoma', system-ui, sans-serif;
  --font-en: 'Cormorant', 'Times New Roman', serif;

  --t-xs:   0.8125rem; /* 13px — فقط برچسب، هرگز متن اصلی */
  --t-sm:   0.875rem;  /* 14px */
  --t-base: 1rem;      /* 16px — حداقل متن بدنه */
  --t-md:   1.125rem;  /* 18px */
  --t-lg:   1.375rem;  /* 22px */
  --t-xl:   1.75rem;   /* 28px */
  --t-2xl:  2.25rem;   /* 36px */
  --t-3xl:  3rem;      /* 48px */

  /* فارسی به لیدینگ بازتری از لاتین نیاز دارد */
  --lh-body:    1.9;
  --lh-heading: 1.55;

  /* — شکل — */
  --r-sm: 2px;
  --r-md: 4px;
  --r-pill: 999px;

  /* — حرکت (motion 4/10 — استاندارد و آرام) — */
  --e-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --d-fast: 180ms;
  --d-base: 240ms;
  --d-slow: 420ms;

  /* — لایه‌بندی — */
  --z-base: 1;
  --z-sticky: 20;
  --z-drawer: 40;
  --z-modal: 50;

  --container: 1280px;
  --measure: 68ch;
}

/* ==========================================================================
   ۲. پایه
   ========================================================================== */

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

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-fa);
  font-size: var(--t-base);
  font-weight: 400;
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 500;
  line-height: var(--lh-heading);
  /* هرگز letter-spacing روی متن فارسی — اتصال حروف را می‌شکند */
  letter-spacing: normal;
  text-wrap: balance;
  max-inline-size: 22ch;
}

h1 { font-size: clamp(2rem, 5vw, var(--t-3xl)); font-weight: 400; }
h2 { font-size: clamp(1.5rem, 3.5vw, var(--t-2xl)); font-weight: 400; }
h3 { font-size: var(--t-lg); }
h4 { font-size: var(--t-md); }

p { margin: 0 0 var(--s-2); max-inline-size: var(--measure); }

a { color: inherit; text-decoration-color: var(--edge); text-underline-offset: 0.3em; }
a:hover { text-decoration-color: currentColor; }

ul, ol { margin: 0; padding: 0; list-style: none; }

/* — فوکوس: هرگز حذف نمی‌شود — */
:focus-visible {
  outline: 2px solid var(--burgundy);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
:focus:not(:focus-visible) { outline: none; }

.nz-skip {
  position: absolute;
  inset-inline-start: 50%;
  top: -100px;
  transform: translateX(50%);
  z-index: var(--z-modal);
  padding: var(--s-2) var(--s-3);
  background: var(--ink);
  color: var(--cream);
  transition: top var(--d-fast) var(--e-out);
}
.nz-skip:focus { top: var(--s-2); }

.nz-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* — لاتین داخل متن فارسی (نام برند، اعداد لاتین) — */
.nz-lat {
  font-family: var(--font-en);
  font-weight: 500;
  letter-spacing: 0.04em; /* لاتین است، اینجا مجاز */
  direction: ltr;
  unicode-bidi: isolate;
}

/* ==========================================================================
   ۳. طرح‌بندی
   ========================================================================== */

.nz-wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--s-3);
}
@media (min-width: 768px) { .nz-wrap { padding-inline: var(--s-5); } }

.nz-section { padding-block: var(--s-6); }
@media (min-width: 768px) { .nz-section { padding-block: var(--s-7); } }
.nz-section--tight { padding-block: var(--s-5); }
.nz-section--band { background: var(--cream-deep); }
.nz-section--ink  { background: var(--ink); color: var(--cream); }
.nz-section--ink p { color: #CDC3B8; }

.nz-head { margin-bottom: var(--s-5); }
.nz-head__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-2);
  font-size: var(--t-sm);
  color: var(--gold);
}
.nz-head__eyebrow::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--hairline);
}
.nz-section--ink .nz-head__eyebrow { color: var(--gold-leaf); }
.nz-section--ink .nz-head__eyebrow::after { background: #3A322D; }
.nz-head__sub { margin-top: var(--s-2); color: var(--ink-soft); }
.nz-section--ink .nz-head__sub { color: #CDC3B8; }

/* ==========================================================================
   ۴. دکمه‌ها  (هدف لمسی ≥ ۴۴px)
   ========================================================================== */

.nz-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
  min-height: 48px;
  padding: 0 var(--s-4);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font: inherit;
  font-size: var(--t-base);
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--d-base) var(--e-out),
              color var(--d-base) var(--e-out),
              border-color var(--d-base) var(--e-out),
              transform var(--d-fast) var(--e-out);
}
.nz-btn:active { transform: translateY(1px); }
.nz-btn svg { width: 20px; height: 20px; flex: none; }

.nz-btn--primary { background: var(--burgundy); color: #fff; }
.nz-btn--primary:hover { background: var(--burgundy-deep); }

.nz-btn--ghost { background: transparent; color: var(--ink); border-color: var(--edge); }
.nz-btn--ghost:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }

.nz-btn--gold { background: var(--gold-leaf); color: #1A1614; }
.nz-btn--gold:hover { background: #B8942250; background: #D9B43A; }

.nz-btn--onink { background: transparent; color: var(--cream); border-color: #55493F; }
.nz-btn--onink:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); }

.nz-btn--block { width: 100%; }
.nz-btn--sm { min-height: 44px; padding-inline: var(--s-3); font-size: var(--t-sm); }

.nz-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  min-height: 44px;
  color: var(--burgundy);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--d-base) var(--e-out), gap var(--d-base) var(--e-out);
}
.nz-link:hover { border-color: var(--burgundy); gap: 0.75rem; }
.nz-link svg { width: 18px; height: 18px; transform: scaleX(-1); } /* فلش راست‌چین */

/* ==========================================================================
   ۵. هدر
   ========================================================================== */

.nz-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: color-mix(in srgb, var(--cream) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--d-base) var(--e-out), background var(--d-base) var(--e-out);
}
.nz-header.is-stuck {
  border-bottom-color: var(--hairline);
  background: color-mix(in srgb, var(--cream) 97%, transparent);
}
.nz-header__bar {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 72px;
}
.nz-logo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-decoration: none;
  line-height: 1;
}
.nz-logo__mark {
  font-family: var(--font-en);
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--ink);
}
.nz-logo__sub {
  font-size: 11px;
  color: var(--ink-soft);
  letter-spacing: normal;
}

.nz-nav { display: none; margin-inline-start: auto; }
@media (min-width: 1024px) { .nz-nav { display: block; } }
.nz-nav ul { display: flex; align-items: center; gap: var(--s-4); }
.nz-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  /* واژه‌های کوتاه مثل «زنانه» بدون این پدینگ زیر ۲۴px هدف لمسی می‌شوند */
  padding-inline: 4px;
  font-size: var(--t-sm);
  text-decoration: none;
  color: var(--ink);
  position: relative;
}
.nz-nav a::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 14px;
  height: 1px;
  background: var(--burgundy);
  transform: scaleX(0);
  transform-origin: inline-end;
  transition: transform var(--d-base) var(--e-out);
}
.nz-nav a:hover::after,
.nz-nav .current-menu-item > a::after { transform: scaleX(1); }

.nz-header__tools {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  margin-inline-start: auto;
}
@media (min-width: 1024px) { .nz-header__tools { margin-inline-start: var(--s-4); } }

.nz-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: none;
  border: 0;
  border-radius: var(--r-sm);
  color: var(--ink);
  cursor: pointer;
  position: relative;
  transition: background var(--d-fast) var(--e-out);
}
.nz-iconbtn:hover { background: var(--cream-deep); }
.nz-iconbtn svg { width: 22px; height: 22px; }
@media (min-width: 1024px) { .nz-iconbtn--menu { display: none; } }

.nz-cartcount {
  position: absolute;
  top: 6px;
  inset-inline-end: 6px;
  min-width: 18px;
  height: 18px;
  padding-inline: 4px;
  display: grid;
  place-items: center;
  background: var(--burgundy);
  color: #fff;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
}

/* — کشوی موبایل — */
.nz-drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  visibility: hidden;
}
.nz-drawer[data-open='true'] { visibility: visible; }
.nz-drawer__veil {
  position: absolute;
  inset: 0;
  background: rgba(26, 22, 20, 0.4);
  opacity: 0;
  transition: opacity var(--d-base) var(--e-out);
}
.nz-drawer[data-open='true'] .nz-drawer__veil { opacity: 1; }
.nz-drawer__panel {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: min(88vw, 360px);
  background: var(--cream);
  padding: var(--s-3);
  overflow-y: auto;
  /* پنل به لبهٔ inline-end چسبیده: در LTR سمت راست، در RTL سمت چپ.
     transform جهت‌آگاه نیست، پس هر حالت باید صریح نوشته شود. */
  transform: translateX(100%);
  transition: transform var(--d-slow) var(--e-out);
}
[dir='rtl'] .nz-drawer__panel { transform: translateX(-100%); }
.nz-drawer[data-open='true'] .nz-drawer__panel { transform: translateX(0); }
.nz-drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-3); }
.nz-drawer nav a {
  display: block;
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--hairline);
  font-size: var(--t-md);
  text-decoration: none;
  min-height: 44px;
}

/* ==========================================================================
   ۶. هیرو
   ========================================================================== */

/* هیرو: ترکیب مرکزی. تیتر بالا، عکس عطر دقیقاً در وسط به‌عنوان قهرمان صفحه.
   چیدمان ستونی کنار گذاشته شد چون نگاه را دو تکه می‌کرد؛ ترکیب مرکزی
   یک نقطهٔ تمرکز می‌سازد و برای یک برند تک‌محصولی آرام‌تر است. */
.nz-hero {
  position: relative;
  padding-block: var(--s-5) var(--s-6);
  text-align: center;
  overflow: hidden;
}
@media (min-width: 900px) { .nz-hero { padding-block: var(--s-6) var(--s-7); } }

.nz-hero__intro {
  position: relative;
  z-index: 2;
  max-width: 660px;
  margin-inline: auto;
}
.nz-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  margin-bottom: var(--s-3);
  padding: 7px 16px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  background: var(--surface);
  font-size: var(--t-sm);
  color: var(--ink-soft);
}
.nz-hero__eyebrow svg { width: 16px; height: 16px; color: var(--gold); }

.nz-hero h1 {
  max-inline-size: 16ch;
  margin-inline: auto;
  margin-bottom: var(--s-3);
  font-size: clamp(2.125rem, 6.2vw, 4rem);
  font-weight: 400;
  line-height: 1.4;
}
.nz-hero h1 em { font-style: normal; color: var(--burgundy); }

.nz-hero__lead {
  font-size: var(--t-md);
  color: var(--ink-soft);
  max-inline-size: 46ch;
  margin-inline: auto;
  margin-bottom: var(--s-4);
}
.nz-hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: center; }

/* — صحنهٔ عکس — */
.nz-hero__stage {
  position: relative;
  z-index: 1;
  margin: var(--s-5) auto 0;
  max-width: 560px;
}
@media (min-width: 900px) { .nz-hero__stage { margin-top: var(--s-6); } }

/* هالهٔ گرم پشت بطری — عمق می‌دهد بدون آنکه سایه‌ی سنگین اضافه کند */
.nz-hero__stage::before {
  content: '';
  position: absolute;
  inset: -14% -22%;
  z-index: -1;
  background: radial-gradient(ellipse at center, rgba(201, 162, 39, 0.20), rgba(201, 162, 39, 0) 68%);
  pointer-events: none;
}

.nz-hero__frame {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--cream-deep);
  border-radius: 280px 280px var(--r-md) var(--r-md); /* طاقِ بالا — اشارهٔ کلاسیک به قاب عطر */
}
@media (min-width: 700px) { .nz-hero__frame { aspect-ratio: 1 / 1; } }
.nz-hero__frame img { width: 100%; height: 100%; object-fit: cover; }
.nz-hero__frame::after {
  content: '';
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(250, 247, 242, 0.32);
  border-radius: inherit;
  pointer-events: none;
}

/* — کارت‌های شناور کنار عکس — */
.nz-hero__chip {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  background: color-mix(in srgb, var(--cream) 94%, transparent);
  backdrop-filter: blur(10px);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  text-align: start;
  white-space: nowrap;
  box-shadow: 0 8px 28px rgba(26, 22, 20, 0.09);
}
.nz-hero__chip svg { width: 22px; height: 22px; flex: none; color: var(--gold); }
.nz-hero__chip b { display: block; font-size: var(--t-md); font-weight: 500; line-height: 1.3; }
.nz-hero__chip span { font-size: var(--t-xs); color: var(--ink-soft); line-height: 1.5; }

.nz-hero__chip--a { inset-block-start: 16%; inset-inline-start: -6%; }
.nz-hero__chip--b { inset-block-end: 12%; inset-inline-end: -6%; }

/* زیر ۷۰۰px کارت‌ها روی عکس می‌افتند و تنگ می‌شوند — به جای آن
   زیر عکس در یک ردیف می‌نشینند. */
@media (max-width: 699px) {
  .nz-hero__chips { display: flex; gap: var(--s-2); margin-top: var(--s-2); }
  .nz-hero__chip {
    position: static;
    flex: 1;
    justify-content: center;
    box-shadow: none;
    backdrop-filter: none;
  }
  .nz-hero__chip b { font-size: var(--t-sm); }
}
@media (min-width: 700px) {
  .nz-hero__chips { display: contents; }
}

/* ==========================================================================
   ۷. نوار اعتماد
   ========================================================================== */

/* خطوط بالا و پایین تمام‌عرض می‌مانند (جزئیات ادیتوریال)، اما خودِ گرید
   به عرض کانتینر محدود و وسط‌چین می‌شود — وگرنه در نمایشگر پهن هر خانه
   چند صد پیکسل عرض می‌گیرد و محتوایش در فضای خالی گم می‌شود. */
.nz-trust {
  border-block: 1px solid var(--hairline);
  background: var(--cream);
}
.nz-trust__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--hairline);
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
}
@media (min-width: 768px) { .nz-trust__grid { grid-template-columns: repeat(4, 1fr); } }

.nz-trust__item {
  display: flex;
  align-items: center;
  justify-content: center; /* گروهِ آیکون+متن به‌عنوان یک واحد وسط خانه */
  gap: var(--s-2);
  padding: var(--s-3) var(--s-2);
  background: var(--cream);
}
/* دو خط متن نسبت به هم هم‌تراز می‌مانند، نه وسط‌چین —
   دو خط با طول متفاوت وسط‌چین، بی‌قواره می‌شود. */
.nz-trust__item span { text-align: start; }
.nz-trust__item svg { width: 26px; height: 26px; flex: none; color: var(--gold); }
.nz-trust__item strong { display: block; font-size: var(--t-sm); font-weight: 500; }
.nz-trust__item span { font-size: var(--t-xs); color: var(--ink-soft); line-height: 1.6; }

/* ==========================================================================
   ۸. کارت دسته‌بندی
   ========================================================================== */

.nz-cats { display: grid; gap: var(--s-3); }
@media (min-width: 768px) { .nz-cats { grid-template-columns: repeat(3, 1fr); } }

.nz-cat {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--cream-deep);
  text-decoration: none;
  color: var(--cream);
}
.nz-cat img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--d-slow) var(--e-out);
}
.nz-cat:hover img { transform: scale(1.04); }
.nz-cat::after {
  content: '';
  position: absolute;
  inset: 0;
  /* پوشش تیره باید حتی روی عکس روشن هم متن سفید را بالای ۴٫۵:۱ نگه دارد،
     چون عکسِ نهایی را صاحب برند آپلود می‌کند و از قبل معلوم نیست چقدر روشن است. */
  background: linear-gradient(to top, rgba(26,22,20,0.88) 0%, rgba(26,22,20,0.55) 30%, rgba(26,22,20,0.1) 65%, transparent 100%);
}
.nz-cat__label {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: 1;
  padding: var(--s-3);
}
.nz-cat__label h3 { font-size: var(--t-xl); font-weight: 400; margin-bottom: 2px; }
.nz-cat__label span { font-size: var(--t-sm); color: #D8CFC5; }

/* ==========================================================================
   ۹. کارت محصول
   ========================================================================== */

.nz-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-3);
}
@media (min-width: 768px)  { .nz-grid { grid-template-columns: repeat(3, 1fr); gap: var(--s-4); } }
@media (min-width: 1200px) { .nz-grid--4 { grid-template-columns: repeat(4, 1fr); } }

.nz-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--hairline);
  transition: border-color var(--d-base) var(--e-out), transform var(--d-base) var(--e-out);
}
.nz-card:hover { border-color: var(--edge); transform: translateY(-3px); }

.nz-card__media {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--cream-deep);
}
.nz-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--d-slow) var(--e-out);
}
.nz-card:hover .nz-card__media img { transform: scale(1.05); }

.nz-tag {
  position: absolute;
  top: var(--s-2);
  inset-inline-start: var(--s-2);
  z-index: 1;
  padding: 4px 10px;
  background: var(--ink);
  color: var(--cream);
  font-size: var(--t-xs);
  line-height: 1.6;
  border-radius: var(--r-sm);
  /* برچسب کوتاه است اما هرگز نباید بشکند */
  white-space: nowrap;
}
.nz-tag--gold  { background: var(--gold-leaf); color: var(--ink); }
.nz-tag--out   { background: var(--ink-soft); }

.nz-card__body { display: flex; flex-direction: column; gap: 6px; padding: var(--s-3); flex: 1; }
.nz-card__gender { font-size: var(--t-xs); color: var(--gold); }
.nz-card__title {
  font-size: var(--t-md);
  font-weight: 500;
  line-height: 1.6;
  max-inline-size: none;
}
.nz-card__title a { text-decoration: none; }
.nz-card__title a::after { content: ''; position: absolute; inset: 0; } /* کل کارت کلیک‌پذیر */
.nz-card__en {
  font-family: var(--font-en);
  font-size: var(--t-sm);
  color: var(--ink-soft);
  direction: ltr;
  text-align: start;
}
.nz-card__notes {
  font-size: var(--t-sm);
  color: var(--ink-soft);
  line-height: 1.7;
  margin-block: 2px 0;
}
.nz-card__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-1);
  margin-top: auto;
  padding-top: var(--s-2);
  border-top: 1px solid var(--hairline);
}
.nz-price { font-size: var(--t-md); font-weight: 500; }
.nz-price small { font-size: var(--t-xs); font-weight: 400; color: var(--ink-soft); }
.nz-price del { color: var(--ink-soft); font-size: var(--t-sm); margin-inline-end: 6px; font-weight: 400; }
.nz-price__from { display: block; font-size: var(--t-xs); color: var(--ink-soft); font-weight: 400; }

/* ==========================================================================
   ۱۰. نوار «عطرتو پیدا کن» (جایگزین دیجیتال مشاورهٔ رایگان)
   ========================================================================== */

.nz-quiz { display: grid; gap: var(--s-4); align-items: center; }
@media (min-width: 900px) { .nz-quiz { grid-template-columns: 1fr auto; gap: var(--s-6); } }
.nz-quiz h2 { color: var(--cream); max-inline-size: 20ch; }
.nz-quiz__steps { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-3); }
.nz-quiz__step { display: flex; align-items: center; gap: var(--s-1); font-size: var(--t-sm); color: #CDC3B8; }
.nz-quiz__step b {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border: 1px solid var(--gold-leaf);
  border-radius: var(--r-pill);
  color: var(--gold-leaf);
  font-size: var(--t-xs);
  font-weight: 500;
}

/* ==========================================================================
   ۱۱. نظرات مشتریان
   ========================================================================== */

.nz-reviews { display: grid; gap: var(--s-3); }
@media (min-width: 768px) { .nz-reviews { grid-template-columns: repeat(3, 1fr); } }

.nz-review {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-4);
  background: var(--surface);
  border: 1px solid var(--hairline);
}
.nz-review__stars { display: flex; gap: 2px; color: var(--gold-leaf); }
.nz-review__stars svg { width: 17px; height: 17px; }
.nz-review p { font-size: var(--t-base); line-height: 1.85; margin: 0; }
.nz-review__who {
  display: flex; align-items: center; gap: var(--s-2);
  margin-top: auto; padding-top: var(--s-2);
  border-top: 1px solid var(--hairline);
  font-size: var(--t-sm);
}
.nz-review__avatar {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  background: var(--cream-deep);
  border-radius: var(--r-pill);
  font-weight: 500;
  color: var(--ink-soft);
}
.nz-review__verified { display: inline-flex; align-items: center; gap: 4px; color: var(--success); font-size: var(--t-xs); }
.nz-review__verified svg { width: 15px; height: 15px; }

/* ==========================================================================
   ۱۲. داستان برند
   ========================================================================== */

.nz-story { display: grid; gap: var(--s-5); align-items: center; }
@media (min-width: 900px) { .nz-story { grid-template-columns: 0.85fr 1.15fr; gap: var(--s-7); } }
.nz-story__art { aspect-ratio: 4/5; background: var(--cream-deep); overflow: hidden; }
.nz-story__art img { width: 100%; height: 100%; object-fit: cover; }
.nz-story blockquote {
  margin: 0 0 var(--s-3);
  padding-inline-start: var(--s-3);
  border-inline-start: 2px solid var(--gold-leaf);
  font-size: var(--t-md);
  line-height: 1.9;
  color: var(--ink);
}
.nz-story__sign {
  font-family: var(--font-en);
  font-size: var(--t-xl);
  color: var(--burgundy);
  direction: ltr;
  text-align: start;
}

/* ==========================================================================
   ۱۳. فروشگاه — چیدمان + فیلترها
   ========================================================================== */

.nz-shop { display: grid; gap: var(--s-4); align-items: start; }
@media (min-width: 1024px) { .nz-shop { grid-template-columns: 264px 1fr; gap: var(--s-6); } }

.nz-filters {
  display: none;
  position: sticky;
  top: 96px;
  padding: var(--s-3);
  background: var(--surface);
  border: 1px solid var(--hairline);
  max-height: calc(100dvh - 128px);
  overflow-y: auto;
}
@media (min-width: 1024px) { .nz-filters { display: block; } }
.nz-filters[data-open='true'] {
  display: block;
  position: fixed;
  inset: auto 0 0 0;
  top: auto;
  z-index: var(--z-drawer);
  max-height: 82dvh;
  border-radius: 12px 12px 0 0;
}

.nz-fgroup + .nz-fgroup { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--hairline); }
.nz-fgroup__title { font-size: var(--t-sm); font-weight: 500; margin-bottom: var(--s-2); }
.nz-fopt {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  cursor: pointer;
  font-size: var(--t-sm);
  color: var(--ink-soft);
}
.nz-fopt input {
  width: 18px; height: 18px;
  accent-color: var(--burgundy);
  cursor: pointer;
  flex: none;
}
.nz-fopt:hover { color: var(--ink); }
.nz-fopt__count { margin-inline-start: auto; font-size: var(--t-xs); color: var(--ink-soft); }

.nz-chips { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.nz-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding-inline: var(--s-2);
  background: var(--surface);
  border: 1px solid var(--edge);
  border-radius: var(--r-pill);
  font: inherit;
  font-size: var(--t-sm);
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--d-base) var(--e-out), color var(--d-base) var(--e-out), border-color var(--d-base) var(--e-out);
}
.nz-chip:hover { border-color: var(--ink); }
.nz-chip[aria-pressed='true'] { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.nz-chip svg { width: 15px; height: 15px; }

.nz-shopbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  padding-bottom: var(--s-3);
  margin-bottom: var(--s-3);
  border-bottom: 1px solid var(--hairline);
}
.nz-shopbar__count { font-size: var(--t-sm); color: var(--ink-soft); }
.nz-select {
  min-height: 44px;
  padding-inline: var(--s-2) var(--s-4);
  background: var(--surface);
  border: 1px solid var(--edge);
  border-radius: var(--r-sm);
  font: inherit;
  font-size: var(--t-sm);
  color: var(--ink);
  cursor: pointer;
}
.nz-filterbtn { margin-inline-start: auto; }
@media (min-width: 1024px) { .nz-filterbtn { display: none; } }
.nz-shopbar__sort { margin-inline-start: auto; }
@media (max-width: 1023px) { .nz-shopbar__sort { margin-inline-start: 0; } }

/* — اسکلت بارگذاری: فضا رزرو می‌شود تا CLS رخ ندهد — */
.nz-skel { background: var(--cream-deep); position: relative; overflow: hidden; }
.nz-skel::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
  animation: nz-shim 1.4s infinite;
}
@keyframes nz-shim { 100% { transform: translateX(-100%); } }

/* ==========================================================================
   ۱۴. صفحهٔ محصول
   ========================================================================== */

.nz-pdp { display: grid; gap: var(--s-4); align-items: start; }
@media (min-width: 900px) { .nz-pdp { grid-template-columns: 1.1fr 1fr; gap: var(--s-6); } }

.nz-gallery { display: grid; gap: var(--s-2); }
.nz-gallery__main { aspect-ratio: 1; background: var(--cream-deep); overflow: hidden; }
.nz-gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.nz-gallery__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-2); }
.nz-thumb {
  aspect-ratio: 1;
  padding: 0;
  background: var(--cream-deep);
  border: 1px solid var(--hairline);
  cursor: pointer;
  overflow: hidden;
  transition: border-color var(--d-base) var(--e-out);
}
.nz-thumb img { width: 100%; height: 100%; object-fit: cover; }
.nz-thumb[aria-current='true'] { border-color: var(--ink); }
.nz-thumb:hover { border-color: var(--edge); }

.nz-pdp__gender { font-size: var(--t-sm); color: var(--gold); margin-bottom: var(--s-1); }
.nz-pdp h1 { font-size: clamp(1.75rem, 4vw, var(--t-2xl)); margin-bottom: 4px; }
.nz-pdp__en {
  font-family: var(--font-en);
  font-size: var(--t-lg);
  color: var(--ink-soft);
  direction: ltr;
  text-align: start;
  margin-bottom: var(--s-3);
}
.nz-pdp__rating {
  display: flex; align-items: center; gap: var(--s-2);
  padding-bottom: var(--s-3); margin-bottom: var(--s-3);
  border-bottom: 1px solid var(--hairline);
  font-size: var(--t-sm);
}
.nz-pdp__rating .nz-review__stars svg { width: 18px; height: 18px; }
.nz-pdp__rating a { color: var(--ink-soft); }

.nz-pdp__price { display: flex; align-items: baseline; gap: var(--s-2); margin-bottom: var(--s-4); }
.nz-pdp__price .nz-price { font-size: var(--t-2xl); font-weight: 400; }
.nz-pdp__price del { font-size: var(--t-md); color: var(--ink-soft); }
.nz-pdp__save {
  padding: 3px 10px;
  background: color-mix(in srgb, var(--burgundy) 10%, transparent);
  color: var(--burgundy);
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  white-space: nowrap;
}

/* — انتخاب حجم: دکمهٔ رادیویی، نه سلکت — */
.nz-vol { margin-bottom: var(--s-4); }
.nz-vol__label { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--s-2); }
.nz-vol__label span { font-size: var(--t-sm); font-weight: 500; }
.nz-vol__label a { font-size: var(--t-sm); color: var(--burgundy); }
/* پنج حجم باید یک‌جا دیده شوند — ۳ ستون در موبایل، ۵ ستون از ۴۸۰px به بالا.
   auto-fit اینجا عمداً استفاده نشده چون ۴+۱ می‌ساخت و گزینهٔ آخر یتیم می‌شد. */
.nz-vol__opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-1); }
@media (min-width: 480px) { .nz-vol__opts { grid-template-columns: repeat(5, 1fr); } }
.nz-vol__opt {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 68px;
  padding: var(--s-1);
  background: var(--surface);
  border: 1px solid var(--edge);
  border-radius: var(--r-sm);
  cursor: pointer;
  text-align: center;
  transition: border-color var(--d-base) var(--e-out), background var(--d-base) var(--e-out);
}
.nz-vol__opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.nz-vol__opt b { font-size: var(--t-base); font-weight: 500; }
.nz-vol__opt i { font-style: normal; font-size: var(--t-xs); color: var(--ink-soft); }
.nz-vol__opt:hover { border-color: var(--ink); }
.nz-vol__opt:has(input:checked) { border-color: var(--ink); background: var(--cream-deep); border-width: 2px; }
.nz-vol__opt:has(input:focus-visible) { outline: 2px solid var(--burgundy); outline-offset: 3px; }
.nz-vol__opt:has(input:disabled) { opacity: 0.45; cursor: not-allowed; }
.nz-vol__opt:has(input:disabled) input { cursor: not-allowed; }

.nz-buy { display: flex; gap: var(--s-2); margin-bottom: var(--s-3); }
.nz-qty {
  display: flex;
  align-items: center;
  border: 1px solid var(--edge);
  border-radius: var(--r-sm);
  background: var(--surface);
}
.nz-qty button {
  width: 46px; height: 48px;
  background: none; border: 0;
  font-size: var(--t-md); color: var(--ink);
  cursor: pointer;
}
.nz-qty button:hover { background: var(--cream-deep); }
.nz-qty input {
  width: 44px; height: 48px;
  border: 0; background: none;
  font: inherit; text-align: center; color: var(--ink);
  -moz-appearance: textfield;
}
.nz-qty input::-webkit-outer-spin-button,
.nz-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.nz-assure { display: grid; gap: var(--s-1); padding: var(--s-3); background: var(--cream-deep); margin-bottom: var(--s-4); }
.nz-assure li { display: flex; align-items: flex-start; gap: var(--s-2); font-size: var(--t-sm); line-height: 1.8; }
.nz-assure svg { width: 19px; height: 19px; flex: none; margin-top: 5px; color: var(--gold); }

/* — نت‌های بویایی — */
.nz-notes { display: grid; gap: var(--s-2); margin-bottom: var(--s-4); }
.nz-note { display: grid; grid-template-columns: 78px 1fr; gap: var(--s-2); align-items: baseline; font-size: var(--t-sm); }
.nz-note dt { color: var(--gold); }
.nz-note dd { margin: 0; color: var(--ink); }

/* — سنجهٔ ماندگاری / پخش بو — */
.nz-meter { display: grid; gap: var(--s-2); margin-bottom: var(--s-4); }
.nz-meter__row { display: grid; grid-template-columns: 92px 1fr auto; gap: var(--s-2); align-items: center; font-size: var(--t-sm); }
.nz-meter__track { height: 6px; background: var(--cream-deep); border-radius: var(--r-pill); overflow: hidden; }
.nz-meter__fill { height: 100%; background: var(--gold-leaf); border-radius: var(--r-pill); }
.nz-meter__val { color: var(--ink-soft); font-size: var(--t-xs); }

.nz-acc { border-top: 1px solid var(--hairline); }
.nz-acc__item { border-bottom: 1px solid var(--hairline); }
.nz-acc__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  width: 100%;
  min-height: 60px;
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  font-size: var(--t-base);
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  text-align: start;
}
.nz-acc__btn svg { width: 20px; height: 20px; flex: none; transition: transform var(--d-base) var(--e-out); }
.nz-acc__btn[aria-expanded='true'] svg { transform: rotate(180deg); }
.nz-acc__panel { padding-bottom: var(--s-3); color: var(--ink-soft); }
.nz-acc__panel[hidden] { display: none; }

/* — نوار خرید چسبان موبایل — */
.nz-stickybuy {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  padding-bottom: calc(var(--s-2) + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--cream) 96%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--hairline);
  transform: translateY(100%);
  transition: transform var(--d-slow) var(--e-out);
}
.nz-stickybuy.is-on { transform: translateY(0); }
.nz-stickybuy .nz-btn { flex: 1; }
@media (min-width: 900px) { .nz-stickybuy { display: none; } }

/* ==========================================================================
   ۱۵. نوار مشاوره + فوتر
   ========================================================================== */

.nz-consult { display: grid; gap: var(--s-3); align-items: center; }
@media (min-width: 768px) { .nz-consult { grid-template-columns: 1fr auto; gap: var(--s-5); } }
.nz-consult__cta { display: flex; flex-wrap: wrap; gap: var(--s-2); }

.nz-footer { background: var(--ink); color: #CDC3B8; padding-block: var(--s-6) var(--s-3); }
.nz-footer a { color: #CDC3B8; text-decoration: none; }
.nz-footer a:hover { color: var(--cream); }
.nz-footer__grid { display: grid; gap: var(--s-4); }
@media (min-width: 768px) { .nz-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--s-5); } }
.nz-footer h4 { color: var(--cream); font-size: var(--t-base); margin-bottom: var(--s-2); }
.nz-footer li { line-height: 1.7; font-size: var(--t-sm); }
.nz-footer li a { display: inline-block; padding-block: 6px; padding-inline: 4px; margin-inline-start: -4px; }
.nz-footer .nz-logo__mark { color: var(--cream); }
.nz-footer .nz-logo__sub { color: #9A8E83; }
.nz-footer__social { display: flex; gap: var(--s-1); margin-top: var(--s-2); }
.nz-footer__social a {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border: 1px solid #3A322D;
  border-radius: var(--r-sm);
  transition: border-color var(--d-base) var(--e-out), background var(--d-base) var(--e-out);
}
.nz-footer__social a:hover { border-color: var(--gold-leaf); background: #241F1B; }
.nz-footer__social svg { width: 21px; height: 21px; }
.nz-footer__bottom {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  justify-content: space-between;
  margin-top: var(--s-5); padding-top: var(--s-3);
  border-top: 1px solid #2E2723;
  font-size: var(--t-xs);
  color: #9A8E83;
}
.nz-footer__badges { display: flex; gap: var(--s-2); }
.nz-footer__badges div {
  display: grid; place-items: center;
  width: 66px; height: 66px;
  border: 1px solid #3A322D;
  border-radius: var(--r-sm);
  font-size: 10px;
  color: #9A8E83;
  text-align: center;
  line-height: 1.5;
  padding: 4px;
}

/* — دکمهٔ شناور مشاوره — */
.nz-float {
  position: fixed;
  inset-inline-end: var(--s-3);
  bottom: var(--s-3);
  z-index: var(--z-sticky);
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  min-height: 52px;
  padding-inline: var(--s-3);
  background: var(--ink);
  color: var(--cream);
  border-radius: var(--r-pill);
  text-decoration: none;
  font-size: var(--t-sm);
  box-shadow: 0 6px 24px rgba(26,22,20,0.22);
  transition: background var(--d-base) var(--e-out), transform var(--d-slow) var(--e-out);
}
.nz-float:hover { background: var(--burgundy); }
.nz-float svg { width: 21px; height: 21px; }
/* فقط وقتی نوار خرید چسبان بالا آمده، دکمهٔ شناور را کنار بزن —
   نه همیشه، تا در بقیهٔ صفحات فاصلهٔ بی‌دلیل نگیرد. */
body:has(.nz-stickybuy.is-on) .nz-float { transform: translateY(-72px); }

/* ==========================================================================
   ۱۶. مسیر راهنما + صفحه‌بندی
   ========================================================================== */

.nz-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); padding-block: var(--s-2); font-size: var(--t-sm); color: var(--ink-soft); }
/* پدینگ عمودی هدف لمسی را به بالای ۲۴px می‌برد بدون آنکه چیدمان را باز کند */
.nz-crumbs a { text-decoration: none; display: inline-block; padding-block: 8px; }
.nz-crumbs a:hover { color: var(--ink); }
/* --hairline روی کرم فقط ۱٫۲۵:۱ است و ساختار مسیر را محو می‌کند */
.nz-crumbs__sep { color: var(--edge); }

.nz-pager { display: flex; justify-content: center; gap: var(--s-1); margin-top: var(--s-5); }
.nz-pager a, .nz-pager span {
  display: grid; place-items: center;
  min-width: 46px; height: 46px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  text-decoration: none;
  font-size: var(--t-sm);
}
.nz-pager a:hover { border-color: var(--edge); }
.nz-pager .current { background: var(--ink); color: var(--cream); border-color: var(--ink); }

/* ==========================================================================
   ۱۷. حالت خالی
   ========================================================================== */

.nz-empty { padding: var(--s-7) var(--s-3); text-align: center; }
.nz-empty svg { width: 46px; height: 46px; margin-inline: auto; color: var(--edge); }
.nz-empty h3 { margin: var(--s-3) auto var(--s-1); }
.nz-empty p { margin-inline: auto; color: var(--ink-soft); }

/* ==========================================================================
   ۱۸. انیمیشن ورود (فقط وقتی کاربر حرکت را رد نکرده باشد)
   ========================================================================== */

/* کلاس nz-motion را جاوااسکریپت روی <html> می‌گذارد.
   بدون آن هیچ چیزی پنهان نمی‌شود — اگر اسکریپت لود نشد یا خطا داد،
   محتوا همچنان دیده می‌شود. محتوا هرگز نباید گروگانِ انیمیشن باشد. */
@media (prefers-reduced-motion: no-preference) {
  .nz-motion .nz-rise { opacity: 0; transform: translateY(16px); }
  .nz-motion .nz-rise.is-in {
    opacity: 1;
    transform: none;
    transition: opacity var(--d-slow) var(--e-out), transform var(--d-slow) var(--e-out);
    transition-delay: var(--delay, 0ms);
  }
}

/* ==========================================================================
   ۱۹. هماهنگ‌سازی با ووکامرس
   ========================================================================== */

.woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  display: flex; align-items: center; gap: var(--s-2);
  margin-bottom: var(--s-3); padding: var(--s-2) var(--s-3);
  border: 1px solid var(--hairline);
  border-inline-start: 3px solid var(--gold);
  background: var(--surface);
  font-size: var(--t-sm);
}
.woocommerce-error { border-inline-start-color: var(--danger); color: var(--danger); }
.woocommerce-message { border-inline-start-color: var(--success); }
.woocommerce-message .button { margin-inline-start: auto; }

.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   ۲۰. چاپ
   ========================================================================== */

@media print {
  .nz-header, .nz-footer, .nz-float, .nz-stickybuy, .nz-filters { display: none !important; }
  body { background: #fff; }
}

/* ==========================================================================
   ۲۱. کوییز «عطرتو پیدا کن»
   بدون جاوااسکریپت، هر پنج سؤال به‌صورت یک فرم بلند دیده می‌شوند و
   قابل پاسخ‌اند؛ کلاس nz-motion فقط حالت تک‌سؤالی را روشن می‌کند.
   ========================================================================== */

.nz-quizpage { padding-block: var(--s-4) var(--s-7); }

.nz-qz__intro { text-align: center; max-width: 620px; margin-inline: auto; padding-block: var(--s-4) var(--s-5); }
.nz-qz__intro h1 { max-inline-size: 14ch; margin-inline: auto; margin-block: var(--s-3); }
.nz-qz__intro .nz-hero__lead { margin-inline: auto; }
.nz-qz__intro .nz-hero__cta { justify-content: center; }

.nz-qz { max-width: 620px; margin-inline: auto; }
/* fieldset با display:flex — وگرنه مرورگر <legend> را به بالای کادر میخ
   می‌کند و تیتر سؤال بالای نوار پیشرفت می‌افتد. */
.nz-qz__step {
  display: flex;
  flex-direction: column;
  border: 0;
  padding: 0;
  margin: 0 0 var(--s-6);
  min-inline-size: 0;
}

/* حالت تک‌سؤالی فقط وقتی جاوااسکریپت زنده است */
.nz-motion .nz-qz__step { display: none; margin-bottom: 0; }
.nz-motion .nz-qz__step.is-on { display: flex; }
.nz-motion .nz-qz { display: none; }
.nz-motion .nz-qz.is-on { display: block; }
.nz-motion .nz-qz__intro.is-off { display: none; }

.nz-qz__bar { height: 2px; background: var(--hairline); margin-bottom: var(--s-3); }
.nz-qz__bar-fill { height: 100%; background: var(--burgundy); transition: width var(--d-slow) var(--e-out); }

.nz-qz__count { font-size: var(--t-sm); color: var(--gold); margin-bottom: var(--s-1); }

.nz-qz__q {
  margin: 0;
  padding: 0;
  font-size: clamp(1.5rem, 4vw, var(--t-2xl));
  font-weight: 400;
  line-height: var(--lh-heading);
  max-inline-size: 20ch;
}
.nz-qz__hint { font-size: var(--t-sm); color: var(--ink-soft); margin-block: var(--s-1) var(--s-3); }

.nz-qz__opts { display: grid; gap: var(--s-1); }

.nz-qz__opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 72px;
  padding: var(--s-2) var(--s-3);
  background: var(--surface);
  border: 1px solid var(--edge);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color var(--d-base) var(--e-out), background var(--d-base) var(--e-out);
}
.nz-qz__opt input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.nz-qz__opt:hover { border-color: var(--ink); }
.nz-qz__opt:has(input:checked) { border-color: var(--burgundy); border-width: 2px; background: var(--cream); }
.nz-qz__opt:has(input:focus-visible) { outline: 2px solid var(--burgundy); outline-offset: 3px; }

.nz-qz__opt-body { flex: 1; }
.nz-qz__opt-body b { display: block; font-size: var(--t-md); font-weight: 500; line-height: 1.5; }
.nz-qz__opt-body i { font-style: normal; font-size: var(--t-sm); color: var(--ink-soft); line-height: 1.7; }

.nz-qz__tick {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  color: var(--burgundy);
  opacity: 0;
  transform: scale(0.7);
  transition: opacity var(--d-base) var(--e-out), transform var(--d-base) var(--e-out);
}
.nz-qz__tick svg { width: 24px; height: 24px; }
.nz-qz__opt:has(input:checked) .nz-qz__tick { opacity: 1; transform: none; }

.nz-qz__nav { display: flex; gap: var(--s-2); margin-top: var(--s-3); }
.nz-qz__nav [data-nz-qz-next] { margin-inline-start: auto; }
.nz-qz__nav [data-nz-qz-back][hidden] { display: none; }
/* بدون جاوااسکریپت دکمه‌های ناوبری کاری نمی‌کنند، پس پنهان می‌مانند */
.nz-qz__nav { display: none; }
.nz-motion .nz-qz__nav { display: flex; }

.nz-qz__result { padding-block: var(--s-4); }
.nz-qz__result .nz-head { margin-bottom: var(--s-4); }

/* دلیل انتخاب — همان چیزی که مشاورهٔ دستی می‌گفت */
.nz-qz__why {
  display: flex;
  align-items: flex-start;
  gap: var(--s-1);
  margin: 0;
  padding: var(--s-2) var(--s-3);
  background: var(--cream-deep);
  border-top: 1px solid var(--hairline);
  font-size: var(--t-sm);
  line-height: 1.75;
  color: var(--ink);
}
.nz-qz__why svg { width: 17px; height: 17px; flex: none; margin-top: 5px; color: var(--gold); }

.nz-qz__rank {
  position: absolute;
  top: var(--s-2);
  inset-inline-end: var(--s-2);
  z-index: 1;
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  background: var(--cream);
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  font-size: var(--t-sm);
  font-weight: 500;
}
.nz-qz__rank--1 { background: var(--gold-leaf); border-color: var(--gold-leaf); }

.nz-qz__after {
  max-width: 560px;
  margin: var(--s-6) auto 0;
  padding-top: var(--s-4);
  border-top: 1px solid var(--hairline);
  text-align: center;
}
.nz-qz__after p { color: var(--ink-soft); margin-inline: auto; margin-bottom: var(--s-3); }

.nz-qz__empty { text-align: center; padding: var(--s-5) 0; color: var(--ink-soft); }

/* نتیجهٔ کوییز در موبایل تک‌ستونی است: فقط سه کارت‌اند و هرکدام یک
   جملهٔ «دلیل انتخاب» دارند که در ستون ۱۵۰px خوانا نمی‌ماند.
   گرید عمومی فروشگاه همچنان دوستونی می‌ماند. */
@media (max-width: 599px) {
  [data-nz-qz-matches] { grid-template-columns: 1fr; }
}

/* ==========================================================================
   ۲۲. صفحهٔ اختصاصی دسته (زنانه / مردانه / یونیسکس)
   ========================================================================== */

.nz-cathero {
  display: grid;
  gap: var(--s-4);
  align-items: center;
  padding-block: var(--s-3) var(--s-5);
}
@media (min-width: 900px) {
  .nz-cathero {
    grid-template-columns: 1fr 0.8fr;
    gap: var(--s-7);
    padding-block: var(--s-4) var(--s-6);
  }
}

.nz-cathero h1 { max-inline-size: 12ch; margin-bottom: var(--s-2); }
.nz-cathero__lead {
  font-size: var(--t-md);
  color: var(--ink-soft);
  max-inline-size: 44ch;
  margin-bottom: var(--s-4);
}

.nz-cathero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  margin: 0 0 var(--s-4);
  background: var(--hairline);
  border: 1px solid var(--hairline);
}
.nz-cathero__stats > div {
  flex: 1 1 auto;
  min-width: 108px;
  padding: var(--s-2) var(--s-3);
  background: var(--cream);
}
.nz-cathero__stats dt { font-size: var(--t-xs); color: var(--ink-soft); }
.nz-cathero__stats dd {
  margin: 2px 0 0;
  font-size: var(--t-md);
  font-weight: 500;
}

.nz-cathero__art {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--cream-deep);
  /* همان طاقِ هیروِ صفحهٔ اصلی، در مقیاس کوچک‌تر — تا دو صفحه یک خانواده بمانند */
  border-radius: 220px 220px var(--r-md) var(--r-md);
}
.nz-cathero__art img { width: 100%; height: 100%; object-fit: cover; }
.nz-cathero__art::after {
  content: '';
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(250, 247, 242, 0.3);
  border-radius: inherit;
  pointer-events: none;
}

/* سربرگ ردیف: عنوان سمتِ شروع، لینک «همه» سمتِ پایان */
.nz-head--row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-2);
}
.nz-head--row .nz-head__eyebrow::after { display: none; } /* خط کشیده در چیدمان دوستونی بی‌معنی است */

/* راهنمای انتخاب — روی زمینهٔ تیره */
.nz-guide { display: grid; gap: var(--s-3); }
@media (min-width: 768px) { .nz-guide { grid-template-columns: repeat(3, 1fr); gap: var(--s-4); } }

.nz-guide__item {
  padding: var(--s-3);
  border: 1px solid #3A322D;
  border-radius: var(--r-md);
}
.nz-guide__item svg { width: 26px; height: 26px; color: var(--gold-leaf); margin-bottom: var(--s-2); }
.nz-guide__item h3 {
  font-size: var(--t-md);
  font-weight: 500;
  color: var(--cream);
  margin-bottom: var(--s-1);
  max-inline-size: none;
}
.nz-guide__item p {
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.85;
  color: #CDC3B8;
  max-inline-size: none;
}