/* ═══════════════════════════════════════════════════════════════════════════
   Moazeni Shop — هستهٔ مشترک
   توکن‌ها · ریست دکمه/ورودی (در برابر استایل سراسری آسترا) · کارت محصول
   سوآچ و چیپ تنوع‌ها · دکمه‌ها · توست · خنثی‌سازی کانتینر آسترا
   هر قاعده با .mz-scope شروع می‌شود تا به هدر/فوتر/بلوک‌های دیگر سرایت نکند.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── ۱. توکن‌ها — رنگ، قلم، فاصله ───────────────────────────────────────────
   برند موذنی: گرافیتی = متن و دکمهٔ ثانویه، سبزآبی #008080 = CTA و تأکید.
   دکمهٔ CTA سبزآبی با متن سفید (--mz-on-accent).
   --mz-accent-ink نارنجیِ قابل‌خواندن روی سفید است. --mz-line-2 مشتق از --line است (بردر ورودی‌ها). */
.mz-scope{
  --mz-bg:#fff;
  --mz-brand:#23262B;
  --mz-soft:#F7F8FA;
  --mz-soft-2:#EEF1F5;
  --mz-line:#E2E6EC;
  --mz-line-2:#CDD4DE;
  --mz-ink:#23262B;
  --mz-ink-2:#454A52;
  --mz-mute:#5B6472;
  --mz-accent:#008080;
  --mz-accent-hi:#5FD0CF;
  --mz-accent-ink:#006A6A;
  --mz-accent-soft:#E6F2F2;
  --mz-grad:#008080;              /* پر، بدون گرادیان (دیزاین‌سیستم) */
  --mz-on-accent:#fff;            /* متن روی دکمهٔ اصلی (سبزآبی): همیشه سفید */
  --mz-gold:var(--mz-accent); --mz-gold-deep:var(--mz-accent-ink); --mz-gold-hi:var(--mz-accent-hi); --mz-gold-tint:var(--mz-accent-soft); /* نام‌های قدیمی بستهٔ نمونه */
  --mz-ok:#16A34A;
  --mz-bad:#DC2626;

  /* قلم را آسترا تعیین می‌کند (مثل hug-assets)؛ اینجا فقط ارث می‌رسد */
  --mz-font-body:inherit;
  --mz-font-display:inherit;

  /* مقیاس تایپ — فقط همین هفت اندازه در صفحه‌ها استفاده می‌شود */
  --mz-fs-xs:12px;                      /* برچسب، متا، نشان */
  --mz-fs-sm:13px;                      /* توضیح کوتاه، دکمهٔ کوچک */
  --mz-fs-md:15px;                      /* متن اصلی */
  --mz-fs-lg:17px;                      /* عنوان کارت/کاشی */
  --mz-fs-xl:clamp(20px,2.4vw,24px);    /* قیمت درشت، آمار */
  --mz-fs-2xl:clamp(23px,3vw,32px);     /* عنوان بخش */
  --mz-fs-h1:clamp(27px,4.6vw,46px);    /* عنوان اصلی */
  --mz-sec-y:clamp(44px,6vw,80px);      /* فاصلهٔ عمودی بخش‌ها */

  --mz-r-s:8px;                   /* دکمه، ورودی */
  --mz-r-m:12px;                  /* کارت */
  --mz-r-l:16px;
  --mz-container:1520px;
  --mz-gutter:16px;
  --mz-ratio:1/1;                 /* همهٔ تصاویر محصول مربع‌اند؛ نسبت دیگری نگذار تا برش نخورند */
  --mz-ease:cubic-bezier(.22,1,.36,1);
  --mz-shadow:0 14px 34px rgba(34,48,74,.10);
  --mz-shadow-s:0 4px 14px rgba(34,48,74,.08);

  box-sizing:border-box;
  background:var(--mz-bg);
  color:var(--mz-ink);
  font-family:var(--mz-font-body);
  font-size:var(--mz-fs-md);
  line-height:1.8;
  text-align:start;
  -webkit-text-size-adjust:100%;
}
@media (min-width:768px){ .mz-scope{ --mz-gutter:28px; } }

.mz-scope *,.mz-scope *::before,.mz-scope *::after{ box-sizing:border-box; }
.mz-scope img{ max-width:100%; height:auto; display:block; }
.mz-scope ul,.mz-scope ol{ list-style:none; margin:0; padding:0; }
.mz-scope p{ margin:0; }
.mz-scope h1,.mz-scope h2,.mz-scope h3,.mz-scope h4{
  font-family:var(--mz-font-display); color:var(--mz-ink); margin:0; line-height:1.4; letter-spacing:0;
}
.mz-scope a{ color:inherit; text-decoration:none; box-shadow:none; }
.mz-scope a:hover{ color:inherit; }
.mz-scope .mz-container{ width:100%; max-width:var(--mz-container); margin-inline:auto; padding-inline:var(--mz-gutter); }
.mz-scope .mz-sr{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.mz-scope [hidden]{ display:none!important; }

/* ── ۲. ریست دکمه و ورودی (آسترا روی هر <button> و <input> استایل می‌گذارد) ─ */
.mz-scope button,
.mz-scope input,
.mz-scope select{
  font:inherit; color:inherit; margin:0; letter-spacing:0; text-transform:none;
  -webkit-appearance:none; appearance:none; box-shadow:none; text-shadow:none;
}
.mz-scope button{
  background:none; border:0; padding:0; border-radius:0; min-height:0; line-height:inherit; cursor:pointer;
}
.mz-scope button:hover,.mz-scope button:focus{ background:none; color:inherit; }
.mz-scope :focus-visible{ outline:2px solid var(--mz-accent-ink); outline-offset:2px; }
.mz-scope :focus:not(:focus-visible){ outline:none; }

/* ── ۳. دکمه‌ها ──────────────────────────────────────────────────────────── */
.mz-scope .mz-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:48px; padding:0 24px; border-radius:var(--mz-r-s); border:1px solid transparent;
  font-family:var(--mz-font-display); font-weight:700; font-size:var(--mz-fs-md); line-height:1; white-space:nowrap;
  transition:transform .25s var(--mz-ease), box-shadow .25s var(--mz-ease), background .2s, color .2s, border-color .2s;
}
.mz-scope .mz-btn--ink{ background:var(--mz-brand); color:#F3F6FA; }
.mz-scope .mz-btn--ink:hover,.mz-scope .mz-btn--ink:focus{ background:var(--mz-ink); color:#F3F6FA; transform:translateY(-1px); }
.mz-scope .mz-btn--accent{ background:var(--mz-accent); color:var(--mz-on-accent); }
.mz-scope .mz-btn--accent:hover,.mz-scope .mz-btn--accent:focus{ background:var(--mz-accent-ink); color:var(--mz-on-accent); transform:translateY(-1px); }
.mz-scope .mz-btn:active{ transform:scale(.97); }
.mz-scope .mz-btn[disabled],.mz-scope .mz-btn[aria-busy="true"]{ opacity:.5; pointer-events:none; }
.mz-scope .mz-btn--ghost{ background:#fff; color:var(--mz-ink); border-color:var(--mz-line-2); }
.mz-scope .mz-btn--ghost:hover,.mz-scope .mz-btn--ghost:focus{ background:#fff; border-color:var(--mz-accent); color:var(--mz-accent-ink); }
.mz-scope .mz-btn .mz-ic{ flex:none; }
[dir="rtl"] .mz-scope .mz-ic--flip,.mz-scope[dir="rtl"] .mz-ic--flip{ transform:scaleX(-1); }

/* ── ۴. جای تصویر خالی (config.php) ──────────────────────────────────────── */
.mz-scope .mz-fig{ width:100%; object-fit:cover; }
.mz-scope .mz-fig--empty{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; width:100%;
  border:1.5px dashed var(--mz-line-2); border-radius:var(--mz-r-m); background:var(--mz-soft); color:var(--mz-mute); text-align:center;
}
.mz-scope .mz-fig--empty b{ font-family:var(--mz-font-display); font-size:var(--mz-fs-sm); }
.mz-scope .mz-fig--empty small{ font-size:var(--mz-fs-xs); }

/* ═══════════════════════════ کارت محصول ═══════════════════════════════════ */
.mz-scope .mz-card{ position:relative; display:flex; flex-direction:column; min-width:0; }

.mz-scope .mz-card__media{
  position:relative; aspect-ratio:var(--mz-ratio); border-radius:var(--mz-r-m);
  background:var(--mz-soft); overflow:hidden; isolation:isolate;
}
.mz-scope .mz-card__imglink{ position:absolute; inset:0; display:block; }
.mz-scope .mz-card__img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:opacity .35s ease, transform .7s var(--mz-ease);
}
.mz-scope .mz-card__img--alt{ opacity:0; }
.mz-scope .mz-card__img--main.is-swap{ opacity:.0; }
.mz-scope .mz-card.is-swapped .mz-card__img--alt{ display:none; }
@media (hover:hover){
  .mz-scope .mz-card:hover .mz-card__img--alt.is-ready{ opacity:1; }
  .mz-scope .mz-card:hover .mz-card__img--main{ transform:scale(1.035); }
}
.mz-scope .mz-card.is-oos .mz-card__img{ opacity:.55; filter:grayscale(.35); }
.mz-scope .mz-card.is-oos .mz-card__img--alt{ display:none; }

/* نشان‌ها */
.mz-scope .mz-badges{ position:absolute; z-index:2; inset-block-start:10px; inset-inline-start:10px; display:flex; flex-direction:column; align-items:flex-start; gap:6px; pointer-events:none; }
.mz-scope .mz-badge{
  display:inline-flex; align-items:center; height:24px; padding:0 10px; border-radius:99px;
  font-family:var(--mz-font-display); font-weight:700; font-size:var(--mz-fs-xs); line-height:1; white-space:nowrap;
}
.mz-scope .mz-badge--sale{ background:var(--mz-grad); color:var(--mz-on-accent); box-shadow:0 4px 12px rgba(0,128,128,.35); }
.mz-scope .mz-badge--new{ background:var(--mz-ink); color:var(--mz-accent-hi); }
.mz-scope .mz-badge--oos{ background:rgba(255,255,255,.94); color:var(--mz-mute); border:1px solid var(--mz-line-2); }

/* دکمهٔ افزودن */
.mz-scope .mz-add{
  position:absolute; z-index:3; inset-block-end:10px; inset-inline-end:10px;
  width:42px; height:42px; border-radius:50%;
  display:grid; place-items:center; background:#fff; color:var(--mz-ink); border:0;
  box-shadow:var(--mz-shadow-s);
  transition:transform .3s var(--mz-ease), opacity .25s, background .2s, color .2s;
}
.mz-scope .mz-add .mz-add__i{ grid-area:1/1; transition:opacity .2s, transform .3s var(--mz-ease); }
.mz-scope .mz-add .mz-add__i--ok{ opacity:0; transform:scale(.5); }
@media (hover:hover){ .mz-scope .mz-add:hover{ background:var(--mz-ink); color:var(--mz-accent-hi); } }
.mz-scope .mz-add:focus-visible{ background:var(--mz-ink); color:var(--mz-accent-hi); }
.mz-scope .mz-add.is-busy{ pointer-events:none; color:transparent; }
.mz-scope .mz-add.is-busy::after{
  content:""; position:absolute; width:18px; height:18px; border-radius:50%;
  border:2px solid var(--mz-line-2); border-top-color:var(--mz-ink); animation:mz-spin .7s linear infinite;
}
.mz-scope .mz-add.is-ok{ background:var(--mz-ok); color:#fff; }
.mz-scope .mz-btn.is-busy{ opacity:.65; pointer-events:none; }
.mz-scope .mz-btn.is-ok{ background:var(--mz-ok); color:#fff; }
.mz-scope .mz-add.is-ok .mz-add__i--plus{ opacity:0; transform:scale(.5); }
.mz-scope .mz-add.is-ok .mz-add__i--ok{ opacity:1; transform:none; }
.mz-scope .mz-add.is-ready{ background:var(--mz-ink); color:var(--mz-accent-hi); }
/* اگر اسکریپت ووکامرس/آسترا خودش دست به دکمه بزند: لینک «مشاهدهٔ سبد» و کلاس added اثری روی کارت نداشته باشد */
.mz-scope .mz-card .added_to_cart,.mz-scope .mz-card .wc-forward{ display:none!important; }
.mz-scope .mz-add.added{ width:42px; height:42px; }
.mz-scope .mz-add.loading::after,.mz-scope .mz-add.added::after{ content:none; }
@media (hover:hover) and (min-width:1024px){
  .mz-scope .mz-add{ opacity:0; transform:translateY(8px); }
  .mz-scope .mz-card:hover .mz-add,.mz-scope .mz-card:focus-within .mz-add,.mz-scope .mz-add.is-ok,.mz-scope .mz-add.is-busy{ opacity:1; transform:none; }
}
@media (max-width:640px){ .mz-scope .mz-add{ width:38px; height:38px; inset-block-end:8px; inset-inline-end:8px; } }
@keyframes mz-spin{ to{ transform:rotate(360deg); } }

/* بدنه */
.mz-scope .mz-card__body{ display:flex; flex-direction:column; flex:1; padding-top:12px; }
.mz-scope .mz-card__meta{ display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:20px; }
.mz-scope .mz-card__cat{ font-size:var(--mz-fs-xs); color:var(--mz-mute); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mz-scope .mz-card__rate{ display:inline-flex; align-items:center; gap:3px; font-size:var(--mz-fs-xs); color:var(--mz-ink-2); flex:none; }
.mz-scope .mz-card__rate .mz-ic{ color:var(--mz-accent); fill:var(--mz-accent); stroke:none; }
.mz-scope .mz-card__title{
  font-family:var(--mz-font-body); font-weight:700; font-size:var(--mz-fs-md); line-height:1.75; color:var(--mz-ink);
  margin:2px 0 0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:3.5em;
}
.mz-scope .mz-card__title a{ color:inherit; }
.mz-scope .mz-card__title a:hover{ color:var(--mz-accent-ink); }

/* تامبنیل تنوع‌ها */
.mz-scope .mz-sws,.mz-scope .mz-szs{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:8px; }
.mz-scope .mz-sw{
  position:relative; width:30px; height:30px; padding:2px; border-radius:50%;
  background:#fff; border:1.5px solid var(--mz-line-2); display:grid; place-items:center;
  transition:border-color .2s, box-shadow .2s, transform .2s var(--mz-ease);
}
.mz-scope .mz-sw::before{ content:""; position:absolute; inset:-5px; border-radius:50%; } /* سطح لمس بزرگ‌تر */
.mz-scope .mz-sw img{ width:100%; height:100%; border-radius:50%; object-fit:cover; background:var(--mz-soft); }
.mz-scope .mz-sw i{ display:block; width:100%; height:100%; border-radius:50%; background:var(--c,#ccc); box-shadow:inset 0 0 0 1px rgba(34,48,74,.14); }
.mz-scope .mz-sw.has-text{ width:auto; min-width:30px; padding:0 10px; border-radius:99px; font-size:var(--mz-fs-xs); line-height:1; }
.mz-scope .mz-sw:hover,.mz-scope .mz-sw:focus{ background:#fff; border-color:var(--mz-ink-2); }
.mz-scope .mz-sw[aria-pressed="true"]{ border-color:var(--mz-ink); box-shadow:0 0 0 2px #fff, 0 0 0 3.5px var(--mz-accent); transform:scale(1.04); }
.mz-scope .mz-sw.is-oos{ opacity:.5; }
.mz-scope .mz-sw.is-oos::after{
  content:""; position:absolute; inset:3px; border-radius:50%;
  background:linear-gradient(to top right,transparent calc(50% - 1px),var(--mz-mute) calc(50% - 1px),var(--mz-mute) calc(50% + 1px),transparent calc(50% + 1px));
}
.mz-scope .mz-sws__more{
  min-width:30px; height:30px; padding:0 6px; border-radius:99px; display:inline-grid; place-items:center;
  font-size:var(--mz-fs-xs); color:var(--mz-mute); background:var(--mz-soft);
}
.mz-scope .mz-sz{
  height:28px; min-width:32px; padding:0 9px; border-radius:8px; font-size:var(--mz-fs-xs); line-height:1;
  border:1px solid var(--mz-line-2); background:#fff; color:var(--mz-ink-2); position:relative;
  transition:background .2s,color .2s,border-color .2s;
}
.mz-scope .mz-sz::before{ content:""; position:absolute; inset:-5px -3px; }
.mz-scope .mz-sz:hover,.mz-scope .mz-sz:focus{ background:#fff; border-color:var(--mz-ink-2); color:var(--mz-ink); }
.mz-scope .mz-sz[aria-pressed="true"]{ background:var(--mz-ink); border-color:var(--mz-ink); color:var(--mz-accent-hi); }
.mz-scope .mz-sz.is-oos{ color:var(--mz-line-2); text-decoration:line-through; }
.mz-scope .mz-sz.is-oos[aria-pressed="true"]{ color:var(--mz-mute); background:var(--mz-soft-2); border-color:var(--mz-line-2); }
.mz-scope .is-nudge{ animation:mz-nudge .5s ease; }
@keyframes mz-nudge{ 20%,60%{ transform:translateX(-4px); } 40%,80%{ transform:translateX(4px); } }

/* قیمت */
.mz-scope .mz-card__foot{ margin-top:auto; padding-top:10px; display:flex; flex-direction:column; gap:6px; align-items:flex-start; }
.mz-scope .mz-price{ display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 8px; }
.mz-scope .mz-price__was{ font-size:var(--mz-fs-sm); color:var(--mz-mute); text-decoration:line-through; text-decoration-color:rgba(107,114,128,.6); font-weight:400; }
.mz-scope .mz-price__now{ font-family:var(--mz-font-display); font-weight:700; font-size:var(--mz-fs-md); color:var(--mz-ink); }
.mz-scope .mz-price__now small{ font-family:var(--mz-font-body); font-weight:400; font-size:var(--mz-fs-xs); color:var(--mz-mute); }
.mz-scope .mz-price__from{ font-family:var(--mz-font-body); font-weight:400; font-size:var(--mz-fs-xs); color:var(--mz-mute); }
.mz-scope .mz-price.is-sale .mz-price__now{ color:var(--mz-accent-ink); }
.mz-scope .mz-price--ask .mz-price__now{ font-size:var(--mz-fs-sm); color:var(--mz-mute); font-weight:400; font-family:var(--mz-font-body); }
.mz-scope .mz-card__inst{ display:inline-flex; align-items:center; gap:4px; font-size:var(--mz-fs-xs); color:var(--mz-accent-ink); background:var(--mz-accent-soft); padding:3px 8px; border-radius:99px; }

/* ═══════════════════════════ توست سبد خرید ═══════════════════════════════ */
.mz-scope.mz-toast{
  background:var(--mz-ink); color:#fff;
  position:fixed; z-index:99999; inset-inline:12px; inset-block-end:calc(16px + env(safe-area-inset-bottom));
  max-width:420px; margin-inline:auto; display:flex; align-items:center; gap:12px;
  background:var(--mz-ink); color:#fff; padding:12px 14px; border-radius:14px; box-shadow:0 18px 40px rgba(34,48,74,.35);
  font-family:var(--mz-font-body); font-size:var(--mz-fs-md); line-height:1.6; text-align:start;
  opacity:0; transform:translateY(14px); pointer-events:none; transition:opacity .3s, transform .4s cubic-bezier(.22,1,.36,1);
}
.mz-toast.is-on{ opacity:1; transform:none; pointer-events:auto; }
.mz-toast__ic{ flex:none; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:var(--mz-ok,#16A34A); color:#fff; }
.mz-toast.is-err .mz-toast__ic{ background:#DC2626; }
.mz-toast__t{ flex:1; min-width:0; }
.mz-toast .mz-toast__a{ flex:none; color:#5FD0CF; font-weight:700; font-size:var(--mz-fs-sm); padding:6px 4px; text-decoration:none; }
.mz-toast .mz-toast__a:hover{ color:#fff; }
@media (max-width:1023.98px){ .mz-scope.mz-toast{ inset-block-end:calc(84px + env(safe-area-inset-bottom)); } }

/* ═══════════ خنثی‌سازی کانتینر و عنوان آسترا روی صفحه‌های این بسته ══════════
   تا لازم نباشد روی هر برگه Full Width، No Sidebar و Disable Title بزنی.       */
body.mz-page,
body.mz-page .site-content{ background:#fff; }
body.mz-page .site-content > .ast-container{ display:block; width:100%; max-width:none; margin:0; padding:0; }
body.mz-page #primary,
body.mz-page .site .site-content #primary{ width:100%; max-width:none; margin:0!important; padding:0; border:0; } /* آسترا از سفارشی‌سازی margin: ۱۰ ۱۳۰ می‌دهد */
body.mz-page #secondary{ display:none; }
body.mz-page.ast-separate-container #primary,
body.mz-page.ast-separate-container .ast-article-single:not(.ast-related-post),
body.mz-page.ast-separate-container .ast-article-post{ padding:0; margin:0; background:transparent; border:0; box-shadow:none; }
body.mz-page .entry-content{ margin:0; }
/* آسترا به فرزندان مستقیم .entry-content (ساختار بلوک) max-width:1200 و margin:auto می‌دهد؛ بنر و پس‌زمینهٔ بخش‌ها باید لبه‌تا‌لبه باشند */
body.mz-page .entry-content[data-ast-blocks-layout] > .mz-scope,body.mz-page .entry-content > .mz-scope{ max-width:none!important; width:100%; margin-inline:0!important; }
body.mz-page.singular .entry-header,
body.mz-page.page .entry-header,
body.mz-page .ast-single-post-order > .post-thumb,
body.mz-page .post-thumb-img-content{ display:none; }
body.mz-page .ast-breadcrumbs-wrapper{ display:none; }

@media (prefers-reduced-motion:reduce){
  .mz-scope *,.mz-scope *::before,.mz-scope *::after,.mz-toast{ animation-duration:.01ms!important; transition-duration:.01ms!important; }
}

/* ── قسط ماهانه روی کارت (سند ۰۴: «ماهی X» درشت، قیمت کل کوچک) ───────────── */
.mz-scope .mz-inst{ display:flex; flex-wrap:wrap; align-items:baseline; gap:0 5px; font-size:var(--mz-fs-sm); color:var(--mz-ink-2); }
.mz-scope .mz-inst b{ font-family:var(--mz-font-display); font-weight:800; font-size:var(--mz-fs-lg); color:var(--mz-accent-ink); }
.mz-scope .mz-inst small{ font-size:var(--mz-fs-xs); color:var(--mz-mute); }
.mz-scope .mz-card__foot.has-inst{ gap:2px; }
.mz-scope .mz-card__foot.has-inst .mz-price{ gap:0 6px; }
.mz-scope .mz-card__foot.has-inst .mz-price::before{ content:attr(data-lbl); font-size:var(--mz-fs-xs); color:var(--mz-mute); }
.mz-scope .mz-card__foot.has-inst .mz-price__now{ font-size:var(--mz-fs-sm); font-weight:500; color:var(--mz-ink-2); }
.mz-scope .mz-card__foot.has-inst .mz-price__was{ font-size:var(--mz-fs-xs); }

/* متن راهنمای ورودی‌ها: کنتراست کافی (بدون کم‌رنگ‌سازی با opacity) */
.mz-scope ::placeholder{ color:var(--mz-mute); opacity:1; }