@charset "UTF-8";
/*
Theme Name: Nona Solar
Theme URI: https://example.com/
Author: Ideapardazan Nona
Description: قالب اختصاصی ایده‌پردازان نونا — طراحی RTL و فارسی، توکن‌محور، مبتنی بر CSS مدرن (Cascade Layers، Container Queries، Logical Properties، scroll-driven animations). صفحهٔ اصلی با لوپ محصولات ووکامرس و لوپ مقالات، نوشتهٔ تکی، فهرست‌ها و دیدگاه‌ها. بدون ویجت، بدون صفحه‌ساز، بدون کتابخانهٔ بیرونی.
Version: 1.0.3
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nona-solar
Tags: rtl-language-support, custom-logo, featured-images, custom-colors, translation-ready
*/
/* ==========================================================================
   NONA — قالب وردپرس ایده‌پردازان نونا
   پایهٔ صفحهٔ خانه (front-page.php) — RTL، فارسی، توکن‌محور
   زبان طراحی: خورشید (سونار، کمان‌های ضخیم، هالهٔ مرکزی)
   ترتیب لایه‌ها با Cascade Layers — !important فقط در بلوک prefers-reduced-motion (الزام دسترس‌پذیری)
   ========================================================================== */
/* wp-core: جای استایل هستهٔ بلوک‌های وردپرس (wp-block-library) — راهنما در functions.php.
   چون CSS بدون لایه همیشه بر CSS لایه‌دار غلبه می‌کند، استایل هسته باید داخل این لایه بیاید. */
@layer reset, wp-core, tokens, base, layout, decorative, components, utilities;

/* ==========================================================================
   DESIGN TOKENS — رنگ و تایپوگرافی
   تنها بخشی که برای تغییر پالت یا فونت کل سایت ویرایش می‌شود.
   ========================================================================== */
@layer tokens {
  :root {
    /* --- ۱) پالت پایه: پنج رنگ ثابت برند --- */
    --color-text: #040316;
    --color-background: #F2F8F7;
    --color-primary: #244A73;
    --color-secondary: #E5A93D;
    --color-cta: #ff4b00;

    /* --- ۲) سطوح — هر بخش صفحه یک سطح متفاوت دارد --- */
    --color-surface: color-mix(in oklab, white 88%, var(--color-background));       /* کارت روشن */
    --color-mint: color-mix(in oklab, var(--color-primary) 9%, var(--color-background));
    --color-warm: color-mix(in oklab, var(--color-secondary) 13%, var(--color-background));
    /* نوارهای تیره: آبی برند و سرمهٔ متن */
    --color-band-brand: color-mix(in oklab, var(--color-primary) 88%, var(--color-text));
    --color-band-deep: color-mix(in oklab, var(--color-primary) 70%, var(--color-text));
    --color-band-ink: color-mix(in oklab, var(--color-text) 93%, var(--color-primary));

    /* --- ۳) خطوط، متن ثانویه و حالت‌ها --- */
    --color-border: color-mix(in oklab, var(--color-primary) 16%, var(--color-background));
    --color-border-strong: color-mix(in oklab, var(--color-primary) 34%, var(--color-background));
    --color-muted: color-mix(in oklab, var(--color-text) 62%, var(--color-background));
    --color-primary-soft: color-mix(in oklab, var(--color-primary) 10%, var(--color-background));
    --color-secondary-soft: color-mix(in oklab, var(--color-secondary) 24%, var(--color-background));
    --color-on-dark: color-mix(in oklab, white 94%, var(--color-background));
    --color-muted-on-dark: color-mix(in oklab, var(--color-background) 74%, transparent);
    --color-hairline-on-dark: color-mix(in oklab, white 18%, transparent);
    --color-focus: var(--color-cta);
    /* هایلایت ماژیکی متن (em / mark): هلوییِ ترکیب کهربایی و نارنجی برند */
    --color-highlight: color-mix(in oklab, color-mix(in oklab, var(--color-secondary) 68%, var(--color-cta)) 34%, transparent);
    /* گرادیان‌های مشترک — یک‌بار تعریف، همه‌جا استفاده */
    --grad-band: linear-gradient(145deg, var(--color-band-brand) 0%, var(--color-band-deep) 55%, var(--color-band-ink) 100%);
    --grad-line: linear-gradient(90deg, var(--color-primary), var(--color-secondary) 45%, var(--color-cta) 78%, var(--color-primary));

    /* --- ۴) دکمهٔ اقدام (CTA): خودِ نارنجی برند + متن سفید ---
       سطح دکمه دقیقاً همان #ff4b00 برند است و دیگر تیره نمی‌شود.
       با متن سفید این رنگ ۳.۳۶:۱ می‌دهد؛ برای اینکه از AA عبور کند،
       برچسب دکمهٔ CTA با --fs-cta-strong به آستانهٔ «متن بزرگ»
       (≥۱۸.۷px و وزن ۷۰۰ → حداقل ۳:۱) برده شده است.
       حالت هاور کمی تیره‌تر است و به ۴.۵۹:۱ می‌رسد. */
    --color-cta-surface: var(--color-cta);                                        /* #ff4b00 — رنگ برند */
    --color-cta-surface-hover: color-mix(in srgb, var(--color-cta) 84%, black);   /* ≈۴.۵۹:۱ با سفید */
    /* حالت هاورِ سطوح سرمه‌ای (دکمه‌های ووکامرس و پیوندها) — تیره‌تر از خودِ رنگ.
       نبودِ این توکن باعث می‌شد هاورِ دکمه‌ها مقدار نامعتبر بگیرد و رنگ پس‌زمینه
       حذف شود؛ نتیجه‌اش متن سفید روی زمینهٔ روشن و ناخوانایی بود. */
    --color-primary-hover: color-mix(in srgb, var(--color-primary) 86%, black);
    --color-on-cta: #ffffff;
    --fs-cta-strong: clamp(1.17rem, 1.05rem + 0.34vw, 1.3rem);  /* ≥۱۸.۷px = آستانهٔ متن بزرگ */
    --color-cta-glow: color-mix(in srgb, var(--color-cta) 45%, transparent);

    /* --- ۵) سایه و عمق --- */
    --shadow-1: 0 1px 2px color-mix(in oklab, var(--color-text) 5%, transparent),
                0 4px 12px -5px color-mix(in oklab, var(--color-primary) 18%, transparent);
    --shadow-2: 0 2px 6px color-mix(in oklab, var(--color-text) 6%, transparent),
                0 18px 38px -16px color-mix(in oklab, var(--color-primary) 28%, transparent);
    --shadow-lift: 0 6px 14px color-mix(in oklab, var(--color-text) 9%, transparent),
                   0 34px 60px -22px color-mix(in oklab, var(--color-primary) 42%, transparent);
    --glow-cta: 0 6px 16px -4px var(--color-cta-glow), 0 18px 40px -14px var(--color-cta-glow);
                0 0 34px 10px color-mix(in oklab, var(--color-secondary) 26%, transparent),
                0 0 78px 26px color-mix(in oklab, var(--color-secondary) 14%, transparent);

    /* --- ۶) تایپوگرافی --- */
    --font-family-base: "Vazirmatn", "Vazir", "Noto Naskh Arabic", system-ui, sans-serif;
    --fw-body: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-black: 800;
    --fs-2xs: clamp(0.6875rem, 0.66rem + 0.12vw, 0.75rem);
    --fs-xs: clamp(0.75rem, 0.72rem + 0.14vw, 0.8125rem);
    --fs-sm: clamp(0.8125rem, 0.79rem + 0.16vw, 0.875rem);
    --fs-base: clamp(1rem, 0.97rem + 0.18vw, 1.0625rem);
    --fs-cta: clamp(1.0625rem, 1.02rem + 0.26vw, 1.1875rem);
    --fs-md: clamp(1.0625rem, 1.01rem + 0.28vw, 1.1875rem);
    --fs-lg: clamp(1.1875rem, 1.1rem + 0.42vw, 1.375rem);
    --fs-xl: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);       /* h2 درون متن مقاله */
    --fs-2xl: clamp(1.625rem, 1.36rem + 1.32vw, 2.25rem);
    --fs-3xl: clamp(1.75rem, 1.3rem + 2vw, 2.75rem);          /* عنوان نوشته (h1) */
    --fs-display: clamp(2.1rem, 1.4rem + 3.2vw, 3.5rem);
    --lh-display: 1.24;
    --lh-heading: 1.4;
    --lh-body: 1.85;
    --lh-item: 1.8;   /* متن مزیت‌ها — طبق بریف */
    --lh-tight: 1.55;

    /* --- ۷) فاصله‌گذاری روان --- */
    --space-3xs: clamp(0.25rem, 0.24rem + 0.05vw, 0.3125rem);
    --space-2xs: clamp(0.5rem, 0.48rem + 0.1vw, 0.625rem);
    --space-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.875rem);
    --space-s: clamp(1rem, 0.96rem + 0.2vw, 1.25rem);
    --space-m: clamp(1.5rem, 1.4rem + 0.4vw, 1.875rem);
    --space-l: clamp(2rem, 1.85rem + 0.6vw, 2.75rem);
    --space-xl: clamp(2.5rem, 2.15rem + 1.4vw, 3.75rem);
    --space-2xl: clamp(3.25rem, 2.8rem + 2vw, 5.25rem);
    --gutter: clamp(1rem, 0.8rem + 1.2vw, 2rem);

    /* --- ۸) شکل، حرکت و اندازه‌های ساختاری --- */
    --radius-s: 0.5rem;
    --radius-m: 0.875rem;
    --radius-l: 1.25rem;
    --radius-xl: 1.75rem;
    --radius-pill: 999px;
    --tile: 2.5rem;                 /* کاشی ۴۰ پیکسلی آیکون‌ها — طبق بریف */
    --dur-1: 160ms;
    --dur-2: 320ms;
    --dur-3: 520ms;
    --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
    --ease-soft: cubic-bezier(0.32, 0.72, 0, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --container: 78rem;
    --header-h: 4.75rem;
    --drawer-shift: 100%;           /* RTL: کشو از راست. در LTR باید -100% شود */
    --z-dock: 40;       /* سطح سند */
    --z-header: 50;     /* سطح سند — بافت لایه‌بندی می‌سازد */
    --z-backdrop: 40;   /* داخل هدر: بالای نوارِ هدر، زیر کشو */
    --z-drawer: 60;     /* داخل هدر */

    /* --- ۹) زبان طراحی خورشید --- */
    --sonar-dur: 3.6s;              /* مدت یک چرخهٔ موج */
    --sonar-rings: 4;               /* تعداد حلقه‌ها — تأخیر هر حلقه = dur ÷ rings */
    --arc-weight: clamp(26px, 4.4vw, 62px);   /* ضخامت کمان‌های محیطی */
  }
}

/* ==========================================================================
   RESET
   ========================================================================== */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body, h1, h2, h3, h4, p, ul, ol, li, figure, blockquote, dl, dd { margin: 0; }
  ul:where([class]), ol:where([class]) { list-style: none; padding: 0; }
  img, svg, video, canvas { display: block; max-inline-size: 100%; }
  img { block-size: auto; }
  button, input, select, textarea { font: inherit; color: inherit; }
  button { background: none; border: 0; padding: 0; cursor: pointer; }
  a { color: inherit; text-decoration: none; }
  summary { cursor: pointer; }
  :where(:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 3px; }
  ::selection { background: var(--color-secondary-soft); color: var(--color-text); }
}

/* ==========================================================================
   BASE
   ========================================================================== */
@layer base {
  html {
    scroll-behavior: smooth;
    scroll-padding-block-start: calc(var(--header-h) + 1rem);
  }

  body {
    background-color: var(--color-background);
    color: var(--color-text);
    font-family: var(--font-family-base);
    font-size: var(--fs-base);
    font-weight: var(--fw-body);
    line-height: var(--lh-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    letter-spacing: normal;   /* متن فارسی: بدون فاصله‌گذاری حروف */
    overflow-wrap: break-word;
  }

  h1, h2, h3, h4 { font-weight: var(--fw-bold); line-height: var(--lh-heading); text-wrap: balance; }
  h1 { font-size: var(--fs-display); font-weight: var(--fw-black); line-height: var(--lh-display); }
  h2 { font-size: var(--fs-2xl); }
  h3 { font-size: var(--fs-lg); }
  h4 { font-size: var(--fs-md); }
  p { text-wrap: pretty; }
  strong { font-weight: var(--fw-bold); }
  small { font-size: var(--fs-xs); }
  time { font-variant-numeric: tabular-nums; }

  @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;
    }
  }
}

/* ==========================================================================
   LAYOUT
   ========================================================================== */
@layer layout {
  .container {
    inline-size: min(100% - var(--gutter) * 2, var(--container));
    margin-inline: auto;
  }

  /* هر بخش صفحه داخل یک «باند» با رنگ پس‌زمینهٔ متفاوت قرار می‌گیرد
     تا مرز بصری بخش‌ها روشن باشد. باند، کمان‌ها را هم می‌بُرد. */
  .band { position: relative; overflow: clip; isolation: isolate; }
  .band > .container{ position: relative; z-index: 1; }
  .band > .arcs { z-index: 0; }

  .band--mint    { background-color: var(--color-background); }
  .band--surface { background-color: var(--color-surface); }
  .band--warm    { background-color: var(--color-warm); }
  .band--brand   { background-color: var(--color-band-brand); color: var(--color-on-dark); }

  .section { padding-block: var(--space-2xl); }

  .section__head {
    display: grid;
    gap: var(--space-xs);
    max-inline-size: 54rem;
    margin-block-end: var(--space-l);
  }

  /* دکمهٔ «مشاهدهٔ همه» — وسط‌چین با فاصلهٔ منطقی از گرید */
  .section__foot {
    display: flex;
    justify-content: center;
    margin-block-start: var(--space-xl);
  }

  .skip-link {
    position: absolute;
    inset-block-start: var(--space-2xs);
    inset-inline-start: var(--space-2xs);
    z-index: 100;
    padding: 0.6rem 1rem;
    border-radius: var(--radius-s);
    background: var(--color-cta-surface-hover);
    color: var(--color-on-cta);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    translate: 0 -220%;
    &:focus-visible { translate: 0 0; }
  }

  .visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* ==========================================================================
   DECORATIVE — زبان طراحی خورشید
   سونار، هالهٔ خورشید، کمان‌های ضخیم محیطی، خط گرادیان
   ========================================================================== */
@layer decorative {

  /* ---------- موج سونار: حلقه‌های هم‌مرکز با تأخیر مساوی ----------
     تأخیر هر حلقه = مدت چرخه ÷ تعداد حلقه‌ها (--sonar-dur ÷ --sonar-rings)
     هر حلقه بزرگ می‌شود و محو می‌گردد؛ نقطهٔ مرکزی، خورشیدِ درخشان است. */
  .sonar {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    pointer-events: none;
  }
  .sonar__ring {
    position: absolute;
    inline-size: var(--sonar-base, min(76%, 21rem));
    aspect-ratio: 1;
    border-radius: 50%;
    border: var(--sonar-weight, 2px) solid var(--sonar-ring-warm, color-mix(in oklab, var(--color-secondary) 90%, transparent));
    opacity: 0;
    animation: sonar-ping var(--sonar-dur) cubic-bezier(0.2, 0.6, 0.3, 1) infinite both;
    animation-delay: calc(var(--sonar-dur) / var(--sonar-rings) * var(--i, 0));
  }
  .sonar__ring:nth-of-type(even) {
    border-color: var(--sonar-ring-cool, color-mix(in oklab, var(--color-on-dark) 62%, transparent));
  }
  @keyframes sonar-ping {
    0%   { scale: var(--sonar-scale-min, 0.26); opacity: 1; }
    62%  { opacity: 0.6; }
    100% { scale: var(--sonar-scale-max, 1.6); opacity: 0; }
  }

  /* مدارهای ثابت — ساختار پشت مرکز */
  .sonar__orbit {
    position: absolute;
    border-radius: 50%;
    border: 1px solid var(--sonar-orbit-color, color-mix(in oklab, var(--color-on-dark) 13%, transparent));
    inline-size: 44%;
    aspect-ratio: 1;
  }
  .sonar__orbit:nth-of-type(2) { inline-size: 66%; }

  /* سونارِ گوشهٔ کارت (فراخوان نهایی): یک مرکز درخشان در فضای خالی کارت */

  /* نقطهٔ مرکزی برند با سایهٔ درخشان */

  /* ---------- کمان‌های ضخیم محیطی در پس‌زمینهٔ باندهای مهم ----------
     دایره‌های بزرگ با بوردر ضخیم و نیمه‌شفاف؛ شعاع‌شان آرام کم و زیاد می‌شود.
     والد (.band) با overflow: clip آن‌ها را می‌بُرد، پس فقط «کمان» دیده می‌شود. */
  .arcs { position: absolute; inset: 0; pointer-events: none; }
  /* نظام کمان‌ها — یک الگوی ثابت برای همهٔ باندها:
     همیشه دو کمان هم‌مرکز، یک ضخامت، یک شفافیت و یک ریتم (۱۴ ثانیه،
     کمان دوم با نیم‌چرخه تأخیر). فقط رنگ کمان بین باند روشن و تیره
     عوض می‌شود؛ اندازه‌ها و فاصله‌ها همه‌جا یکسان است. */
  .arcs { --arc-color: color-mix(in oklab, white 6.5%, transparent); }
  .arcs--light { --arc-color: color-mix(in oklab, var(--color-primary) 9%, transparent); }
  .arcs__ring {
    position: absolute;
    border-radius: 50%;
    aspect-ratio: 1;
    border: var(--arc-weight) solid var(--arc-color);
    animation: arc-breathe 14s var(--ease-out) infinite alternate;
  }
  .arcs__ring:nth-of-type(1) {
    inline-size: 32rem;
    inset-block-start: -14rem;
    inset-inline-start: -11rem;
  }
  .arcs__ring:nth-of-type(2) {
    inline-size: 30rem;
    inset-block-end: -13rem;
    inset-inline-end: -10rem;
    animation-delay: -7s;   /* نیمی از چرخهٔ ۱۴ ثانیه‌ای — ریتم متناوب */
  }
  @keyframes arc-breathe {
    from { scale: 0.95; }
    to   { scale: 1.06; }
  }

  /* نوار «شیشه‌ای» معکوس — همان هالهٔ منحنی اسکرین‌شات مرجع */
  /* روی باندهای روشن، کمان با رنگ برند کشیده می‌شود نه سفید */
  /* کمان دوم روی باندهای روشن، لهجهٔ کهربایی می‌گیرد (همان الگوی
     ثابت، فقط یک لهجهٔ رنگی) */
  .arcs--light .arcs__ring:nth-of-type(2) {
    border-color: color-mix(in oklab, var(--color-secondary) 14%, transparent);
  }

  /* ---------- خط گرادیان زیر کارت‌ها (نازک و چشم‌نواز) ---------- */
  @keyframes grad-slide {
    from { background-position: 0% 100%, 0% 0%; }
    to   { background-position: 200% 100%, 0% 0%; }
  }
}

/* ==========================================================================
   COMPONENTS — عناصر پایه، دکمه‌ها، هدر و ناوبری، داک شناور، فهرست بخش‌ها
   ========================================================================== */
@layer components {

  /* ---------- عناصر پایه ---------- */
  .icon {
    inline-size: 1.25rem;
    block-size: 1.25rem;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: translate var(--dur-2) var(--ease-out);
  }
  .icon--sm { inline-size: 1rem; block-size: 1rem; }

  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-primary);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    line-height: 1.6;
    margin-block-end: var(--space-xs);
    &::before {
      content: "";
      inline-size: 1.75rem;
      block-size: 2px;
      border-radius: 2px;
      background: var(--color-secondary);
      flex: none;
    }
  }

  .lede {
    color: var(--color-muted);
    font-size: var(--fs-md);
    line-height: var(--lh-body);
    max-inline-size: 48rem;
  }
  /* روی باندهای تیره، متن ثانویه روشن می‌شود */
  .band--brand, .post-hero, .promo {
    & .lede { color: var(--color-muted-on-dark); }
    & .eyebrow { color: var(--color-secondary); }
  }

  /* مقدارهای جایگزین — باید توسط کارفرما پر شوند */
  .ph {
    color: inherit;
    opacity: 0.92;
    font-size: var(--fs-xs);
    padding-block-end: 1px;
    border-block-end: 1px dashed color-mix(in oklab, var(--color-secondary) 80%, transparent);
  }

  .tile {
    display: grid;
    place-items: center;
    inline-size: var(--tile);
    block-size: var(--tile);
    border-radius: var(--radius-s);
    border: 1px solid var(--color-border);
    background-color: var(--color-primary-soft);
    color: var(--color-primary);
    margin-block-end: 0.5rem;
  }
  .tile .icon { inline-size: 1.35rem; block-size: 1.35rem; }


  /* ---------- دکمه‌ها ---------- */
  .btn, :where(.prose) .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.8rem 1.5rem;
    border-radius: var(--radius-s);
    border: 1px solid transparent;
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    line-height: 1.6;
    text-align: center;
    transition: background-color var(--dur-1) var(--ease-out),
                border-color var(--dur-1) var(--ease-out),
                color var(--dur-1) var(--ease-out),
                box-shadow var(--dur-2) var(--ease-out),
                translate var(--dur-3) var(--ease-spring),
                scale var(--dur-3) var(--ease-spring);
  }
  .btn--block { display: flex; inline-size: 100%; }

  /* دکمهٔ اصلی اقدام — متن سفید روی سطح تیره‌شدهٔ همان نارنجی برند */
  .btn--cta, :where(.prose) .wp-block-button__link {
    background-color: var(--color-cta-surface);
    color: var(--color-on-cta);
    font-size: var(--fs-cta-strong);
    padding-block: 0.9rem;
    box-shadow: var(--shadow-1), var(--glow-cta);
  }
  .btn--ghost {
    background-color: transparent;
    color: var(--color-primary);
    border-color: var(--color-border-strong);
  }
  .btn--on-dark {
    background-color: color-mix(in oklab, var(--color-on-dark) 12%, transparent);
    color: var(--color-on-dark);
    border-color: color-mix(in oklab, var(--color-on-dark) 60%, transparent);
  }
  @media (hover: hover) {
    .btn--cta:hover, :where(.prose) .wp-block-button__link:hover {
      background-color: var(--color-cta-surface-hover);
      box-shadow: var(--shadow-lift), var(--glow-cta);
    }
    .btn--ghost:hover {
      background-color: var(--color-primary-soft);
      border-color: var(--color-primary);
    }
    .btn--on-dark:hover {
      background-color: color-mix(in oklab, var(--color-on-dark) 20%, transparent);
      border-color: var(--color-on-dark);
    }
  }

  /* دکمهٔ «مشاهدهٔ همه» — بزرگ، وسط‌چین و با فاصلهٔ منطقی از گرید */
  .btn--more {
    inline-size: min(50%, 34rem);
    padding-block: 1.05rem;
    font-size: var(--fs-cta);
    border-radius: var(--radius-m);
    background-color: var(--color-band-deep);
    color: var(--color-on-dark);
    box-shadow: var(--shadow-2);
  }
  @media (hover: hover) {
    .btn--more:hover {
      background-color: var(--color-band-brand);
      box-shadow: var(--shadow-lift);
    }
  }
  @media (max-width: 47.99rem) {
    .btn--more { inline-size: min(80%, 34rem); }
  }

  /* اثر مغناطیسی: بالا آمدن با فنر + سایهٔ رشدیافته (فقط دکمه‌های اصلی) */
  @media (hover: hover) {
    .btn--cta:hover,
    .btn--more:hover { translate: 0 -6px; scale: 1.04; }
  }
  .btn--cta:focus-visible,
  .btn--more:focus-visible { translate: 0 -6px; scale: 1.04; }
  .btn--cta:active,
  .btn--more:active {
    translate: 0 1px;
    scale: 0.985;
    transition: translate 80ms ease-out, scale 80ms ease-out,
                background-color var(--dur-1) linear;
  }
  @media (prefers-reduced-motion: reduce) {
    .btn--cta:hover, .btn--more:hover,
    .btn--cta:focus-visible, .btn--more:focus-visible,
    .btn--cta:active, .btn--more:active { translate: none; scale: none; }
  }

  /* ---------- متن گرادیانی (Text Shimmer) ----------
     رنگ پُر، پیش‌فرض همهٔ مرورگرهاست؛ برش گرادیان روی متن فقط داخل
     @supports فعال می‌شود، بنابراین متن هیچ‌وقت نامرئی نمی‌ماند.
     حرکت گرادیان فقط روی هاور اجرا می‌شود، نه در حلقهٔ بی‌پایان. */
  .shine { display: inline-block; color: var(--color-on-dark); }
  .shine--on-light { color: var(--color-primary); }

  @supports ((background-clip: text) or (-webkit-background-clip: text)) {
    .shine {
      background-image: linear-gradient(100deg,
        color-mix(in oklab, var(--color-on-dark) 78%, transparent) 0%,
        var(--color-on-dark) 34%,
        var(--color-secondary) 50%,
        var(--color-on-dark) 66%,
        color-mix(in oklab, var(--color-on-dark) 78%, transparent) 100%);
      background-size: 260% auto;
      background-position: 100% center;
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .shine--on-light {
      background-image: linear-gradient(100deg,
        var(--color-primary) 0%,
        var(--color-primary) 34%,
        var(--color-cta) 50%,
        var(--color-primary) 66%,
        var(--color-primary) 100%);
    }
    .shine::selection {
      -webkit-text-fill-color: var(--color-text);
      background: var(--color-secondary);
    }
    /* یک بار جارو زدن، همان لحظه‌ای که کاربر به کنترل نگاه می‌کند */
    .cat-card:hover .shine,
    .product-card:hover .shine,
    .post-card:hover .shine,
    .card-action:hover .shine,
    .card-action:focus-visible .shine,
    .btn--more:hover .shine,
    .btn--more:focus-visible .shine { animation: shine-sweep 0.95s linear; }

    .post-card__title a:hover,
    .cat-card:hover .cat-card__title a,
    .product-card:hover .product-card__title a {
      background-image: linear-gradient(100deg,
        var(--color-primary) 0%,
        var(--color-primary) 38%,
        var(--color-cta) 50%,
        var(--color-primary) 62%,
        var(--color-primary) 100%);
      background-size: 220% auto;
      background-position: 100% center;
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: shine-sweep 1s linear;
    }
    @media (prefers-reduced-motion: reduce) {
      .shine { -webkit-text-fill-color: currentColor; }
      .shine--on-light { -webkit-text-fill-color: var(--color-primary); }
    }
  }
  @keyframes shine-sweep {
    from { background-position: 100% center; }
    to   { background-position: -100% center; }
  }

  /* ---------- هدینگ نئون (فقط روی زمینهٔ تیره) ----------
     هالهٔ نئون از چند لایه text-shadow ساخته می‌شود. این جلوه روی
     زمینهٔ روشن کار نمی‌کند (نور جمع‌شونده است)، پس روی باندهای
     تیره اعمال شده و روی کارت‌های روشن، جلوهٔ متن گرادیانی نشسته است. */
  .neon-h {
    /* دو حالتِ هاله به‌صورت متغیر محلی: یک‌بار تعریف، همه‌جا استفاده.
       هر دو حالت پنج لایه‌اند تا مرورگر بتواند بین‌شان میانیابی کند. */
    --neon-off: 0 0 0 transparent, 0 0 0 transparent, 0 0 0 transparent,
                0 0 0 transparent, 0 0 0 transparent;
    --neon-on:
      0 0 4px var(--color-secondary),
      0 0 10px var(--color-secondary),
      0 0 20px var(--color-secondary),
      0 0 40px color-mix(in oklab, var(--color-secondary) 65%, var(--color-cta)),
      0 0 80px color-mix(in oklab, var(--color-secondary) 65%, var(--color-cta));
    color: var(--color-on-dark);
    text-shadow: var(--neon-off);
    transition: color var(--dur-2) var(--ease-out), text-shadow var(--dur-3) var(--ease-out);
  }
  /* نئون فقط به هاورِ خودِ تیتر محدود نیست: هاورِ کلِ باکسِ مزیت
     (و کلِ باکسِ فراخوان) هم هاله را روشن می‌کند. */
  @media (hover: hover) {
    .neon-h:hover,
    .benefit:hover .neon-h,
    .cta-band:hover .neon-h,
    .promo:hover .neon-h {
      color: color-mix(in oklab, var(--color-secondary) 62%, white);
      text-shadow: var(--neon-on);
    }
  }
  .neon-h:focus-visible,
  .benefit:focus-within .neon-h,
  .cta-band:focus-within .neon-h,
  .promo:focus-within .neon-h {
    color: color-mix(in oklab, var(--color-secondary) 62%, white);
    text-shadow: var(--neon-on);
  }
  /* تیترهای فوتر: بدون هاور، هالهٔ ملایمِ دائمی که آرام سو و سُو می‌کند */
  .footer__col-title {
    color: color-mix(in oklab, var(--color-secondary) 56%, white);
    animation: neon-breathe 4.8s var(--ease-soft) infinite alternate;
  }
  @keyframes neon-breathe {
    from {
      text-shadow:
        0 0 2px var(--color-secondary),
        0 0 6px var(--color-secondary),
        0 0 12px var(--color-secondary),
        0 0 20px color-mix(in oklab, var(--color-secondary) 62%, var(--color-cta)),
        0 0 34px color-mix(in oklab, var(--color-secondary) 62%, var(--color-cta));
    }
    to { text-shadow: var(--neon-on); }
  }

  /* ---------- هدر ----------
     نوارِ هدر آبیِ اصلیِ برند (#244A73) با متن سفید است و سطحی مات دارد؛
     چون blur دیگر معنایی نداشت، backdrop-filter حذف شد — همان چیزی که
     ریسکِ «بافت لایه‌بندی» برای کشوی position:fixed را می‌ساخت.
     پس‌زمینه روی شبه‌عنصر می‌ماند تا z-index منفی بگیرد و زیر محتوا بنشیند. */
  .site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-header);
  }
  .site-header::before {
    content: "";
    position: absolute;
    inset: 0;
    /* z-index منفی: زیر محتوای هدر می‌ماند ولی بافت لایه‌بندی نمی‌سازد
       (اگر ظرفِ محتوا z-index بگیرد، کشوی منو که داخل آن است زیر
       پردهٔ کشو می‌افتد) */
    z-index: -1;
    background-color: var(--color-primary);
    /* یک پردهٔ نورِ بسیار ملایم از بالا: نوار مات می‌ماند ولی تخت به‌نظر نمی‌رسد */
    background-image: linear-gradient(180deg,
      color-mix(in oklab, white 7%, var(--color-primary)) 0%, var(--color-primary) 74%);
    border-block-end: 1px solid color-mix(in oklab, white 16%, transparent);
    box-shadow: 0 10px 24px -20px color-mix(in oklab, var(--color-text) 70%, transparent);
  }
  /* بدون z-index: تا بافتِ لایه‌بندی نسازد */
  .site-header > .container { position: relative; }

  .header__inner {
    display: flex;
    align-items: center;
    gap: var(--space-s);
    min-block-size: var(--header-h);
  }

  .brand {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--color-on-dark);
    font-size: var(--fs-md);
    font-weight: var(--fw-black);
    line-height: 1.4;
    flex: none;
  }
  .brand__mark { inline-size: 2rem; block-size: 2rem; }
  .brand__sun { fill: var(--color-secondary); stroke: none; }
  .brand__steel { fill: none; stroke: var(--color-on-dark); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

  .header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    margin-inline-start: auto;
  }

  /* دکمهٔ CTA هدر: پدینگ عمودی کمتر تا داخل نوار هدر نفس بکشد و به
     لبهٔ بالا/پایین نچسبد */
  .header__cta {
    padding-block: 0.5rem;
    padding-inline: 1.25rem;
  }

  .search-toggle, .icon-btn {
    display: grid;
    place-items: center;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    border-radius: var(--radius-s);
    border: 1px solid transparent;
    color: var(--color-on-dark);
    &:hover {
      background-color: color-mix(in oklab, white 14%, transparent);
      border-color: color-mix(in oklab, white 26%, transparent);
    }
  }

  .nav-toggle {
    display: none;
    place-items: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    border-radius: var(--radius-s);
    border: 1px solid color-mix(in oklab, white 26%, transparent);
    background-color: color-mix(in oklab, white 12%, transparent);
    color: var(--color-on-dark);
  }
  .nav-toggle__close { display: none; }
  .nav-toggle[aria-expanded="true"] {
    .nav-toggle__open { display: none; }
    .nav-toggle__close { display: block; }
  }

  /* نوار پیشرفت مطالعه — بدون جاوااسکریپت، با تایم‌لاین اسکرول */
  .progress {
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    block-size: 3px;
    opacity: 0;
    /* RTL: نوار از راست رشد می‌کند */
    transform-origin: right center;
    scale: 0 1;
    background-image: linear-gradient(90deg, var(--color-cta), var(--color-secondary));
  }
  @supports (animation-timeline: scroll()) {
    .progress {
      opacity: 1;
      animation: progress-fill linear both;
      animation-timeline: scroll(root block);
    }
  }
  @keyframes progress-fill {
    from { scale: 0 1; }
    to   { scale: 1 1; }
  }

  /* ---------- ناوبری: دسکتاپ یک دکمهٔ واحد، موبایل کشوی کناری ---------- */
  .nav { display: flex; align-items: center; }
  .nav__head { display: none; }
  .nav__drawer { display: none; }

  .nav__list { display: flex; align-items: center; gap: var(--space-3xs); }
  .nav__item { position: relative; }

  .nav__link,
  .nav__link--toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.55rem 0.85rem;
    border-radius: var(--radius-s);
    color: var(--color-text);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    line-height: 1.7;
    transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
  }
  /* «محصولات» یک کنترل واحد است: متن و فلش داخل همان دکمه، بدون فاصلهٔ اضافه */
  .nav__link--toggle .icon--chev {
    inline-size: 0.95rem;
    block-size: 0.95rem;
    transition: rotate var(--dur-2) var(--ease-out);
  }
  .nav__item--has-sub.is-open .nav__link--toggle .icon--chev { rotate: 180deg; }

  .nav__link:hover,
  .nav__link--toggle:hover {
    background-color: var(--color-primary-soft);
    color: var(--color-primary);
  }
  /* نشانگر صفحهٔ فعال: خطِ زیرِ ساده و صاف، هم‌عرض متن و با فاصله از
     دو سر. (پیش‌تر box-shadow داخلی بود و گوشه‌های گردِ لینک آن را
     می‌برید و به‌شکل نوارِ نیم‌گردِ بی‌معنی نشان می‌داد.) */
  .nav__link { position: relative; }
  .nav__link[aria-current="page"] {
    color: var(--color-primary);
    font-weight: var(--fw-bold);
  }
  .nav__link[aria-current="page"]::after {
    content: "";
    position: absolute;
    inset-block-end: 0.15rem;
    inset-inline: 0.85rem;
    block-size: 2px;
    border-radius: 1px;
    background-color: var(--color-secondary);
  }

  .submenu {
    position: absolute;
    inset-block-start: calc(100% + 0.4rem);
    inset-inline-start: 0;
    z-index: 5;
    inline-size: 19rem;
    display: grid;
    gap: 0.15rem;
    padding: var(--space-2xs);   /* فاصلهٔ بیشتر آیتم‌ها از گوشه‌های پنل */
    border: 1px solid var(--color-border);
    border-radius: var(--radius-m);
    background-color: var(--color-surface);
    box-shadow: var(--shadow-2);
    opacity: 0;
    visibility: hidden;
    translate: 0 -0.4rem;
    transition: opacity var(--dur-2) var(--ease-out),
                translate var(--dur-2) var(--ease-out),
                visibility 0s linear var(--dur-2);
  }
  .nav__item--has-sub.is-open > .submenu {
    opacity: 1;
    visibility: visible;
    translate: 0 0;
    transition: opacity var(--dur-2) var(--ease-out), translate var(--dur-2) var(--ease-out), visibility 0s;
  }

  .submenu__link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    /* پدینگ جادارتر از قبل؛ روی هاور هم یک پله بیشتر می‌شود */
    padding: 0.8rem 0.95rem;
    border-radius: var(--radius-m);
    transition: background-color var(--dur-1) var(--ease-out),
                padding var(--dur-2) var(--ease-out);
  }
  .submenu__link .icon {
    color: var(--color-primary);
    background-color: var(--color-primary-soft);
    border-radius: var(--radius-s);
    padding: 0.4rem;
    inline-size: 2.1rem;
    block-size: 2.1rem;
    transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
  }
  .submenu__text { display: grid; gap: 0.1rem; }
  .submenu__text > span { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--color-text); }
  .submenu__text > small { color: var(--color-muted); line-height: 1.6; }

  @media (hover: hover) {
    .nav__item--has-sub:hover > .submenu {
      opacity: 1;
      visibility: visible;
      translate: 0 0;
      transition: opacity var(--dur-2) var(--ease-out), translate var(--dur-2) var(--ease-out), visibility 0s;
    }
    .submenu__link:hover {
      background-color: var(--color-primary-soft);
      .submenu__text > span { color: var(--color-primary); }
      .icon { background-color: var(--color-primary); color: var(--color-background); }
    }
  }

  /* روی نوارِ آبیِ هدر (فقط دسکتاپ) متن و کنترل‌ها سفید می‌شوند.
     کشوی موبایل یک پنل سفیدِ جداگانه است و از این قاعده اثر نمی‌گیرد. */
  @media (min-width: 60rem) {
    .nav { margin-inline: auto; }
    .header__actions { margin-inline-start: 0; }

    .nav__link,
    .nav__link--toggle { color: var(--color-on-dark); }
    .nav__link:hover,
    .nav__link--toggle:hover {
      background-color: color-mix(in oklab, white 14%, transparent);
      color: #fff;
    }
    .nav__link[aria-current="page"] { color: #fff; }
    .nav__link--toggle:hover .icon--chev { color: var(--color-secondary); }

    @media (hover: hover) {
      .submenu__link:hover { padding-inline: 1.15rem; }   /* روی هاور: دورتر از گوشه‌ها */
    }
  }

  /* --- موبایل: منو به‌صورت کشوی کناری از لبهٔ راست --- */
  @media (max-width: 59.99rem) {
    .search-toggle, .header__cta { display: none; }
    .nav-toggle { display: grid; }
    .brand { margin-inline-end: auto; }

    .nav {
      position: fixed;
      inset-block: 0;
      inset-inline-start: 0;
      inset-inline-end: auto;
      /* عرض قطعی و مستقل از محتوا: با واحد vw حل می‌شود، پس باز/بسته شدنِ
         زیرمنو هرگز عرض کشو را عوض نمی‌کند و چیزی جابه‌جا نمی‌شود. */
      inline-size: min(22rem, 100vw - 3.25rem);
      min-inline-size: 17rem;
      text-align: start;           /* هرگز وسط‌چینِ ارثی */
      /* داخل بافت لایه‌بندی هدر: پرده ← ۴۰، کشو ← ۶۰ */
      z-index: var(--z-drawer);
      display: flex;
      flex-direction: column;
      padding: var(--space-s) var(--space-s) calc(var(--space-s) + env(safe-area-inset-bottom));
      background-color: var(--color-surface);
      /* کمان تزئینی به‌صورت پس‌زمینه: پس‌زمینه هرگز سرریز افقی
         نمی‌سازد. (پیش‌تر شبه‌عنصرِ بیرون‌زده بود و چون کشو
         overflow-y: auto داشت، overflow-x هم auto می‌شد و نوار
         افقی و بریدگی پایین کشو می‌ساخت.) */
      background-image: radial-gradient(circle at 116% -10%,
        transparent 0 8.25rem,
        color-mix(in oklab, var(--color-primary) 7%, transparent) 8.25rem 11.25rem,
        transparent 11.25rem);
      background-repeat: no-repeat;
      box-shadow: var(--shadow-lift);
      overflow-x: clip;
      overflow-y: auto;
      overscroll-behavior: contain;
      translate: var(--drawer-shift) 0;
      visibility: hidden;
      transition: translate var(--dur-3) var(--ease-soft), visibility 0s linear var(--dur-3);
    }
    .nav.is-open {
      translate: 0 0;
      visibility: visible;
      transition: translate var(--dur-3) var(--ease-soft), visibility 0s;
    }

    .nav__head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-s);
      padding-block-end: var(--space-xs);
      border-block-end: 1px solid var(--color-border);
    }
    .nav__head-title { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--color-muted); }
    .nav__close {
      display: grid;
      place-items: center;
      inline-size: 2.5rem;
      block-size: 2.5rem;
      border-radius: var(--radius-s);
      border: 1px solid var(--color-border);
      background-color: var(--color-background);
      color: var(--color-primary);
    }

    .nav__list { flex-direction: column; align-items: stretch; gap: 0; inline-size: 100%; }
    .nav__item { inline-size: 100%; border-block-end: 1px solid var(--color-border); }
    /* یک ردیف کامل، یک کنترل — فلش در انتهای همان ردیف */
    .nav__link,
    .nav__link--toggle {
      inline-size: 100%;
      min-block-size: 3.25rem;      /* هدف لمس دست‌کم ۵۲ پیکسل */
      /* متن همیشه از ابتدای سطر (راست) شروع می‌شود و فلش با margin
         خودش به انتهای سطر (چپ) می‌رود؛ نه وسط‌چین است و نه با
         باز/بسته شدنِ زیرمنو تکانی می‌خورد. */
      justify-content: flex-start;
      text-align: start;
      padding-block: 0.85rem;
      padding-inline: 0.75rem;
      border-radius: var(--radius-s);
      font-size: var(--fs-base);
      font-weight: var(--fw-semibold);
    }
    .nav__link--toggle .icon--chev { margin-inline-start: auto; }
    .nav__item:last-child { border-block-end: 0; }
    .submenu__link { min-block-size: 2.9rem; }
    .nav__link:hover,
    .nav__link--toggle:hover { background-color: transparent; }
    .nav__link--toggle { color: var(--color-text); }
    .nav__link--toggle:hover .icon--chev { color: var(--color-primary); }
    .nav__link[aria-current="page"] {
      border-radius: var(--radius-s);
      padding-inline: 0.75rem;
      background-color: var(--color-primary-soft);
    }
    /* در کشو، بلوکِ پس‌زمینه نشانگر است؛ خط زیر لازم نیست */
    .nav__link[aria-current="page"]::after { content: none; }

    .submenu {
      position: static;
      inline-size: auto;
      padding: 0.15rem 0 var(--space-xs);
      border: 0;
      border-radius: 0;
      box-shadow: none;
      background: none;
      opacity: 1;
      visibility: visible;
      translate: none;
      display: none;
    }
    .nav__item--has-sub.is-open > .submenu { display: block; }

    /* ردیف‌های زیرمنو در کشو: کاشیِ آیکون + عنوان + توضیح کوتاه،
       راست‌چین و با فاصلهٔ یکنواخت (الگوی اسکرین‌شات مرجع). */
    .submenu__link {
      gap: 0.6rem;
      padding-block: 0.55rem;
      padding-inline: 0.6rem;
      text-align: start;
      border-radius: var(--radius-m);
    }
    .submenu__text { text-align: start; }
    .submenu__text > span { font-size: var(--fs-sm); font-weight: var(--fw-bold); }
    .submenu__text > small { display: block; font-size: var(--fs-2xs); }

    .nav__drawer {
      display: grid;
      gap: var(--space-xs);
      /* عامدانه به ته کشو چسبیده: دکمهٔ تماس زیر انگشت شست می‌ماند
         (الگوی استاندارد کشوی کناری). فاصلهٔ خالی میان فهرست و آن،
         «فضای طراحی» است نه جای خالی. */
      margin-block-start: auto;
      padding-block-start: var(--space-s);
      border-block-start: 1px solid var(--color-border);
    }
  }

  /* پردهٔ کشو داخل هدر رندر می‌شود؛ چون هدر خودش z-index دارد و بافتِ
     لایه‌بندی می‌سازد، پرده باید در همان بافت و بین نوارِ هدر و کشو
     بنشیند. اگر در body باشد، z-index بالای هدر آن را روی کل هدر و
     کشو می‌اندازد و کشو تیره و «چندلایه» دیده می‌شود. */
  .nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--z-backdrop);
    background-color: color-mix(in oklab, var(--color-text) 58%, transparent);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur-2) var(--ease-out), visibility 0s linear var(--dur-2);
  }
  body.is-nav-open .nav-backdrop { opacity: 1; visibility: visible; }
  @media (max-width: 59.99rem) {
    body.is-nav-open { overflow: hidden; }
    /* دکمهٔ همبرگری پنهان می‌شود تا «ضربدر» تکراری کنار دکمهٔ بستنِ
       خودِ کشو دیده نشود؛ کنترل بستن، دکمهٔ کشو و پرده و Escape است. */
    body.is-nav-open .nav-toggle { visibility: hidden; }
  }

  .nona-search {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.3rem 0.3rem 0.8rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-s);
    background-color: var(--color-background);
  }
  .search__input {
    flex: 1;
    min-inline-size: 0;
    border: 0;
    background: none;
    font-size: var(--fs-sm);
    padding-block: 0.5rem;
    &::placeholder { color: var(--color-muted); }
    &:focus:not(:focus-visible) { outline: none; }
  }
  .search__btn {
    display: grid;
    place-items: center;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    border-radius: calc(var(--radius-s) - 2px);
    background-color: var(--color-primary);
    color: var(--color-background);
    flex: none;
  }
  .nona-search:focus-within,
  .comment-form :is(input[type="text"], textarea):focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-soft); }

  /* ---------- داک شناور تماس (دسکتاپ: قرص شیشه‌ای پایین صفحه | موبایل: نوار پایین) ---------- */
  .dock {
    position: fixed;
    inset-block-end: max(var(--space-s), env(safe-area-inset-bottom));
    inset-inline: 0;
    z-index: var(--z-dock);
    display: flex;
    justify-content: center;
    padding-inline: var(--gutter);
    pointer-events: none;
  }
  .dock__inner {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.4rem;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    /* دو لایهٔ پس‌زمینه: لایهٔ رویی سطحِ نیمه‌شفاف، لایهٔ زیرین گرادیان برند
       که فقط در ناحیهٔ بوردر دیده می‌شود → خطِ گردِ گرادیان دور قرص */
    background-image:
      linear-gradient(color-mix(in oklab, var(--color-surface) 93%, transparent),
                      color-mix(in oklab, var(--color-surface) 93%, transparent)),
      linear-gradient(100deg,
        var(--color-primary) 0%, var(--color-secondary) 36%,
        var(--color-cta) 66%, var(--color-primary) 100%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    -webkit-backdrop-filter: blur(14px) saturate(1.25);
    backdrop-filter: blur(14px) saturate(1.25);
    /* سایهٔ دوهویتی: کمی توجه‌جلب‌تر، ولی بی‌سروصدا */
    box-shadow:
      0 10px 30px -14px color-mix(in oklab, var(--color-primary) 45%, transparent),
      0 4px 16px -8px var(--color-cta-glow);
  }
  .dock__item {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.6rem 0.95rem;
    border-radius: var(--radius-pill);
    color: var(--color-text);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    transition: background-color var(--dur-1) var(--ease-out),
                translate var(--dur-3) var(--ease-spring),
                box-shadow var(--dur-2) var(--ease-out);
  }
  .dock__item .icon { inline-size: 1.15rem; block-size: 1.15rem; }
  .dock__item--call .icon { color: var(--color-cta-surface); }
  .dock__item--wa .icon { color: #15803D; }
  .dock__item--tg .icon { color: #146C8C; }
  .dock__item--bale .icon { color: var(--color-primary); }
  /* رنگ سرویس فقط در هاور/لمس ظاهر می‌شود؛ در حالت سکون هیچ‌کدام از
     چهار مورد پرشده نیست. */
  @media (hover: hover) {
    .dock__item--call:hover {
      background-color: var(--color-cta-surface);
      color: var(--color-on-cta);
      translate: 0 -3px;
      box-shadow: var(--glow-cta);
    }
    .dock__item--call:hover .icon { color: var(--color-on-cta); }
    .dock__item--wa:hover {
      background-color: color-mix(in oklab, #25D366 18%, var(--color-surface));
      translate: 0 -3px;
    }
    .dock__item--tg:hover {
      background-color: color-mix(in oklab, #229ED9 18%, var(--color-surface));
      translate: 0 -3px;
    }
    .dock__item--bale:hover {
      background-color: var(--color-primary-soft);
      translate: 0 -3px;
    }
  }
  @media (max-width: 47.99rem) {
    .dock { inset-block-end: 0; padding-inline: 0; }
    .dock__inner {
      inline-size: 100%;
      justify-content: space-between;
      gap: 0;
      padding: 0.4rem 0.4rem calc(0.4rem + env(safe-area-inset-bottom));
      border: 0;
      border-block-start: 1px solid transparent;
      border-radius: 0;
      /* همان تکنیک دو لایه: خطِ گرادیان روی لبهٔ بالای نوار */
      background-image:
        linear-gradient(color-mix(in oklab, var(--color-surface) 95%, transparent),
                        color-mix(in oklab, var(--color-surface) 95%, transparent)),
        linear-gradient(100deg,
          var(--color-primary) 0%, var(--color-secondary) 36%,
          var(--color-cta) 66%, var(--color-primary) 100%);
      box-shadow: 0 -6px 24px -12px color-mix(in oklab, var(--color-text) 40%, transparent);
    }
    .dock__item {
      flex: 1;
      flex-direction: column;
      gap: 0.15rem;
      padding: 0.5rem 0.2rem;
      border-radius: var(--radius-s);
      font-size: var(--fs-2xs);
    }
    .dock__item .icon { inline-size: 1.3rem; block-size: 1.3rem; }
    .dock__item--call { color: var(--color-text); }
    .dock__item--call:active {
      background-color: var(--color-cta-surface);
      color: var(--color-on-cta);
    }
    .dock__item--call:active .icon { color: var(--color-on-cta); }
    /* فضای امن پایین به فوتر داده می‌شود تا پس‌زمینهٔ تیرهٔ آن تا
       انتهای صفحه ادامه پیدا کند (پدینگ روی body یک نوار روشن
       زیر فوتر جا می‌گذاشت). */
    .site-footer { padding-block-end: calc(var(--space-s) + 4.75rem); }
  }

  /* ---------- فهرست بخش‌ها (Scroll Spy) ----------
     این نوار به بخش‌های همین صفحه گره نخورده است. اسکریپت پایینِ صفحه
     همهٔ h2 های داخل <main> را پیدا می‌کند، شناسه می‌دهد و آیتم‌ها را
     می‌سازد؛ پس در وردپرس برای هر صفحه خودکار پر می‌شود و نیازی به
     وارد کردن دستیِ عنوان‌ها نیست. */
  .spy { display: none; }
  @media (min-width: 88rem) {
    .spy:not([hidden]) {
      position: fixed;
      inset-block-start: 50%;
      inset-inline-start: var(--space-m);
      translate: 0 -50%;
      z-index: calc(var(--z-header) - 1);
      display: block;
    }
  }
  .spy__list { display: grid; justify-items: start; gap: 0.2rem; margin: 0; padding: 0; list-style: none; }
  .spy__link {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.55rem;
    border-radius: var(--radius-pill);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-medium);
    color: var(--color-muted);
    transition: background-color var(--dur-2) var(--ease-out),
                box-shadow var(--dur-2) var(--ease-out);
  }
  .spy__dot {
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border-radius: 50%;
    flex: none;
    background-color: color-mix(in oklab, var(--color-primary) 30%, var(--color-background));
    transition: background-color var(--dur-2) var(--ease-out),
                box-shadow var(--dur-2) var(--ease-out),
                scale var(--dur-2) var(--ease-spring);
  }
  /* برچسب‌ها فقط در هاور/فوکوس خوانده می‌شوند تا این ستون باریک،
     روی محتوای صفحه نیفتد. */
  .spy__label {
    opacity: 0;
    translate: -0.4rem 0;
    white-space: nowrap;
    transition: opacity var(--dur-2) var(--ease-out), translate var(--dur-2) var(--ease-out);
  }
  .spy:hover .spy__label,
  .spy:focus-within .spy__label { opacity: 1; translate: 0 0; }
  /* وقتی برچسب‌ها باز می‌شوند، هر ردیف یک «قرصِ سفید» می‌گیرد؛
     متنِ فهرست روی متنِ صفحه نمی‌افتد و خوانایی همیشه حفظ می‌شود. */
  .spy:hover .spy__link,
  .spy:focus-within .spy__link {
    background-color: var(--color-surface);
    box-shadow: var(--shadow-1);
  }
  .spy__link:hover,
  .spy__link:focus-visible {
    background-color: var(--color-surface);
    box-shadow: var(--shadow-2);
  }
  .spy__link:hover .spy__dot,
  .spy__link:focus-visible .spy__dot,
  .spy__item.is-active .spy__dot {
    background-color: var(--color-cta);
    scale: 1.4;
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--color-cta) 22%, transparent);
  }
}

@layer components {

  /* ---------- هیرو ---------- */
  .band--hero {
    background-image: linear-gradient(180deg, var(--color-mint) 0%, var(--color-background) 58%, var(--color-surface) 100%);
  }
  .hero {
    position: relative;
    container-type: inline-size;
    padding-block: var(--space-xl) var(--space-2xl);
  }
  .hero__grid { display: grid; gap: var(--space-xl); align-items: center; }
  @container (min-width: 48rem) {
    .hero__grid { grid-template-columns: 1.05fr 0.95fr; gap: var(--space-xl); }
  }
  .hero__lede { max-inline-size: 44rem; }

  /* چهار نکتهٔ هیرو — کارت‌های کوچک شیشه‌ای (۲×۲) */
  .hero__points {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2xs);
    margin-block: var(--space-m);
  }
  @container (min-width: 28rem) {
    .hero__points { grid-template-columns: repeat(2, 1fr); }
  }
  .hero__points li {
    display: flex;
    align-items: start;
    gap: 0.6rem;
    padding: var(--space-xs);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-m);
    background-color: var(--color-surface);
    box-shadow: var(--shadow-1);
    font-size: var(--fs-sm);
    line-height: var(--lh-item);
    transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
  }
  .hero__points li:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-2); }
  .hero__points .icon {
    color: var(--color-primary);
    inline-size: 1.15rem;
    block-size: 1.15rem;
    margin-block-start: 0.2rem;
  }
  .hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    margin-block-start: var(--space-m);
  }
  .hero__note {
    margin-block-start: var(--space-s);
    color: var(--color-muted);
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
    max-inline-size: 36rem;
  }

  /* پنل تصویر هیرو: زمینهٔ برند تیره + موج سونار که از پشت عکس بیرون می‌زند */
  /* قابِ عکسِ هیرو — بدونِ پس‌زمینهٔ سُرمه‌ای و بدونِ سایهٔ بیرونیِ قاب:
     عکس روی زمینهٔ روشنِ صفحه می‌نشیند و فقط حلقه‌های سونار پشتِ آن می‌درخشند. */
  .hero__visual {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 1 / 1.08;
    margin: 0;
    /* پایهٔ حلقه‌ها = عرضِ عکس (۸۰٪) → هر حلقه از پشتِ عکس بیرون می‌زند. */
    --sonar-base: 80%;
    --sonar-weight: 2.5px;
    --sonar-scale-min: 0.7;
    --sonar-scale-max: 1.25;
  }
  /* رنگِ حلقه‌ها روی زمینهٔ روشن — مشترک بین عکس هیرو و تصویر شاخص نوشته */
  .hero__visual, .post-cover {
    --sonar-ring-warm: color-mix(in oklab, var(--color-secondary) 62%, var(--color-cta));
    --sonar-ring-cool: color-mix(in oklab, var(--color-primary) 34%, transparent);
    --sonar-orbit-color: color-mix(in oklab, var(--color-primary) 16%, transparent);
  }
  /* مدارهای ثابت، کمی بزرگ‌تر از عکس: قابِ آرامِ اطراف تصویر */
  .hero__visual .sonar__orbit:nth-of-type(1) { inline-size: 88%; }
  .hero__visual .sonar__orbit:nth-of-type(2) { inline-size: 98%; }
  /* عکس ساده و وسط‌چین، با حاشیهٔ یکنواخت در چهار طرف */
  .hero__visual img {
    position: relative;
    z-index: 1;
    inline-size: 80%;
    aspect-ratio: 1 / 1.08;
    object-fit: cover;
    object-position: center;
    border-radius: var(--radius-l);
    box-shadow: 0 24px 46px -28px color-mix(in oklab, var(--color-primary) 72%, transparent);
  }

  /* ---------- دسته‌بندی محصولات (Bento + Subgrid) ---------- */
  .cats__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-s);
  }
  @media (min-width: 40rem) {
    .cats__grid { grid-template-columns: repeat(2, 1fr); }
  }
  /* سه ستون قطعی + سه سطر مشخص: همهٔ کارت‌ها در یک بلوک قرار می‌گیرند،
     پس Subgrid دقیق و بدون سلول خالی تراز می‌کند. */
  @media (min-width: 62rem) {
    .cats__grid {
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: auto auto auto;
      column-gap: var(--space-s);
      row-gap: var(--space-xs);
    }
    @supports (grid-template-rows: subgrid) {
      .cat-card { grid-row: 1 / span 3; grid-template-rows: subgrid; }
    }
  }

  .cat-card {
    position: relative;
    display: grid;
    grid-template-rows: auto auto 1fr;   /* ردیف آخر کشسان: دکمه ته کارت می‌نشیند */
    gap: var(--space-xs);
    padding: var(--space-xs);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-l);
    background-color: var(--color-surface);
    box-shadow: var(--shadow-1);
    transition: box-shadow var(--dur-2) var(--ease-out),
                translate var(--dur-3) var(--ease-spring),
                border-color var(--dur-2) var(--ease-out);
  }
  /* تصویر یک‌اندازه، وسط‌چین و با فاصله از گوشه‌های کارت */
  .cat-card__media {
    position: relative;
    margin: 0;
    aspect-ratio: 4 / 3;
    overflow: clip;
    border-radius: var(--radius-m);
    background-color: var(--color-primary-soft);
  }
  .cat-card__media img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: center;
    transition: scale var(--dur-3) var(--ease-soft);
  }
  .cat-card__body {
    display: grid;
    gap: 0.4rem;
    justify-items: start;
    padding-inline: var(--space-3xs);
  }
  /* ---------- برچسبِ روی تصویر (الگوی اسکرین‌شات مرجع) ----------
     قرصِ شیشه‌ای روی گوشهٔ بالای عکس؛ pointer-events خاموش است تا
     لینکِ کشیدهٔ کارت سالم بماند. برای دسته‌بندی، محصول و مقاله یکی است. */
  .card-badge {
    position: absolute;
    z-index: 3;
    inset-block-start: 0.6rem;
    inset-inline-start: 0.6rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.65rem;
    border-radius: var(--radius-pill);
    border: 1px solid color-mix(in oklab, var(--color-primary) 16%, transparent);
    background-color: color-mix(in oklab, var(--color-surface) 90%, transparent);
    -webkit-backdrop-filter: blur(6px) saturate(1.1);
    backdrop-filter: blur(6px) saturate(1.1);
    color: var(--color-primary);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-bold);
    line-height: 1.7;
    box-shadow: var(--shadow-1);
    pointer-events: none;
  }
  .card-badge .icon { inline-size: 0.95rem; block-size: 0.95rem; color: var(--color-primary); }
  .cat-card__title { font-size: var(--fs-lg); }
  .cat-card__title a { color: var(--color-text); }
  /* لینک کشیده: کل کارت کلیک‌پذیر است، بدون تکرار متن لینک */
  .cat-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 2; }
  .cat-card__text { color: var(--color-muted); font-size: var(--fs-sm); line-height: var(--lh-item); }
  .cat-card__foot { display: grid; align-self: end; }
  @media (hover: hover) {
    .cat-card:hover { box-shadow: var(--shadow-lift); translate: 0 -5px; border-color: var(--color-border-strong); }
    .cat-card:hover .cat-card__media img { scale: 1.07; }   /* Image Zoom on Hover */
  }
  .cat-card:focus-within { border-color: var(--color-primary); box-shadow: var(--shadow-2); }

  /* ---------- مزیت‌های رقابتی (روی باند تیره + Divider Trick) ---------- */
  .benefits__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;                                     /* خط جداکننده = فاصلهٔ یک‌پیکسلی */
    background-color: var(--color-hairline-on-dark);  /* رنگ خط، از پشت سلول‌ها */
    border: 1px solid var(--color-hairline-on-dark);
    border-radius: var(--radius-l);
    overflow: clip;
    container-type: inline-size;
  }
  @media (min-width: 40rem) { .benefits__grid { grid-template-columns: repeat(2, 1fr); } }
  /* ستون‌بندی ۱ → ۲ → ۳ تا هیچ سلول خالی نماند (۶ آیتم = ۲×۳ یا ۳×۲) */
  @media (min-width: 62rem) { .benefits__grid { grid-template-columns: repeat(3, 1fr); } }
  /* نسخهٔ دوتایی (نوار اشتراک‌گذاری نوشته) */
  @media (min-width: 40rem) { .benefits__grid--duo { grid-template-columns: repeat(2, 1fr); } }

  .benefit {
    display: grid;
    align-content: start;
    gap: 0.55rem;
    padding: var(--space-m) var(--space-s);
    /* سلولِ مات روی زمینهٔ خط — همان بلوک شیشه‌ای اسکرین‌شات مرجع */
    background-color: color-mix(in oklab, var(--color-band-deep) 72%, var(--color-band-brand));
    transition: background-color var(--dur-2) var(--ease-out);
  }
  @media (hover: hover) {
    .benefit:hover { background-color: color-mix(in oklab, var(--color-band-brand) 78%, var(--color-band-deep)); }
  }
  .benefit .tile {
    background-color: color-mix(in oklab, var(--color-secondary) 16%, transparent);
    border-color: color-mix(in oklab, var(--color-secondary) 42%, transparent);
    color: var(--color-secondary);
  }
  .benefit__title { font-size: var(--fs-md); font-weight: var(--fw-bold); }
  .benefit__text { color: var(--color-muted-on-dark); font-size: var(--fs-sm); line-height: var(--lh-item); }
  @container (max-width: 26rem) {
    .benefit { padding: var(--space-s); }
  }
}

@layer components {

  /* ---------- محصولات ---------- */
  .products__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-s); }
  @media (min-width: 40rem) { .products__grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 62rem) { .products__grid { grid-template-columns: repeat(3, 1fr); } }

  .product-card {    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-s);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-l);
    /* لایهٔ بالا: خط گرادیان ۳ پیکسلی در لبهٔ پایین کارت.
       لایهٔ پایین: سطح سفید کارت. چون پس‌زمینه با border-radius خودِ کارت
       بریده می‌شود، دوسرِ خط دقیقاً گردیِ گوشه‌ها را دنبال می‌کند. */
    background-image:
      linear-gradient(90deg,
        var(--color-primary), var(--color-secondary) 45%, var(--color-cta) 78%, var(--color-primary)),
      linear-gradient(var(--color-surface), var(--color-surface));
    /* کاشیِ گرادیان دقیقاً ۲ برابر عرض کارت + repeat-x:
       خط هرگز بریده/خالی نمی‌شود و چون انتهای گرادیان همان رنگ ابتداست،
       جای دوختِ کاشی هم دیده نمی‌شود. */
    background-size: 200% 3px, 100% 100%;
    background-position: 0% 100%, 0% 0%;
    background-repeat: repeat-x, no-repeat;
    background-clip: padding-box;
    box-shadow: var(--shadow-1);
    transition: background-size var(--dur-2) var(--ease-out),
                box-shadow var(--dur-2) var(--ease-out),
                translate var(--dur-3) var(--ease-spring),
                border-color var(--dur-2) var(--ease-out);
  }
  /* خط گرادیانِ لبهٔ پایین به‌عنوان «لایهٔ بالای پس‌زمینهٔ خودِ کارت»
     کشیده می‌شود (در بلوک کارت‌ها) و نه با شبه‌عنصر روی لبه. پس زمینهٔ کارت
     با border-radius همان کارت بریده می‌شود و دوسرِ خط بی‌هیچ شکستگی،
     منحنیِ گوشه‌های کارت را دنبال می‌کند. */
  @media (prefers-reduced-motion: no-preference) {
    /* حرکت یک‌جهته و بی‌پایان (نه رفت‌وبرگشت) — چون کاشی خودش تکرار می‌شود */
    .product-card, .post-card { animation: grad-slide 7s linear infinite; }
  }
  }

  .product-card__media {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 10;
    margin: 0;
    border-radius: var(--radius-m);
    background-color: var(--color-primary-soft);
    overflow: clip;
  }
  .product-card__media img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: scale var(--dur-3) var(--ease-soft); }
  .product-card__title { font-size: var(--fs-md); }
  .product-card__title a { color: var(--color-text); }
  .product-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 2; }
  .product-card__text {
    color: var(--color-muted);
    font-size: var(--fs-sm);
    line-height: var(--lh-item);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* پایینِ کارت همیشه ته می‌چسبد تا کارت‌های هم‌ردیف هم‌تراز بمانند */
  .product-card__foot { display: grid; gap: var(--space-2xs); align-content: start; margin-block-start: auto; }
  .product-card__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    padding-block-start: var(--space-2xs);
    border-block-start: 1px solid var(--color-border);
  }
  .product-card__price .icon { color: var(--color-secondary); inline-size: 1.05rem; block-size: 1.05rem; }
  .product-card__price-label { color: var(--color-muted); font-size: var(--fs-xs); }
  .product-card__price-value { color: var(--color-primary); font-size: var(--fs-md); font-weight: var(--fw-black); }
  /* ---------- دکمهٔ درون‌کارتی ----------
     یک کامپوننت مشترک برای هر سه کارت (دسته‌بندی، محصول، مقاله).
     فقط «لهجهٔ» رنگ بین دسته‌بندی و محصول/مقاله تفاوت دارد. */
  .card-action {
    position: relative;
    z-index: 3;                 /* بالای لینکِ کشیدهٔ عنوان می‌ماند */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-s);
    background-image: linear-gradient(100deg,
      color-mix(in oklab, var(--color-primary) 9%, var(--color-background)),
      color-mix(in oklab, var(--color-primary) 4%, var(--color-background)));
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    transition: border-color var(--dur-1) var(--ease-out),
                box-shadow var(--dur-2) var(--ease-out),
                translate var(--dur-3) var(--ease-spring);
  }
  /* لهجهٔ گرم — فقط محصول و مقاله: کمی رنگی‌تر تا کلیک را تشویق کند */
  .card-action--accent {
    border-color: color-mix(in oklab, var(--color-secondary) 46%, var(--color-border));
    background-image: linear-gradient(100deg,
      color-mix(in oklab, var(--color-secondary) 13%, var(--color-background)),
      color-mix(in oklab, var(--color-cta) 8%, var(--color-background)));
  }
  @media (hover: hover) {
    .card-action:hover {
      background-image: linear-gradient(100deg,
        color-mix(in oklab, var(--color-primary) 19%, var(--color-background)),
        color-mix(in oklab, var(--color-primary) 10%, var(--color-background)));
      border-color: var(--color-primary);
      box-shadow: var(--shadow-2);
      translate: 0 -2px;
    }
    .card-action--accent:hover {
      background-image: linear-gradient(100deg,
        color-mix(in oklab, var(--color-secondary) 30%, var(--color-background)),
        color-mix(in oklab, var(--color-cta) 20%, var(--color-background)));
      border-color: color-mix(in oklab, var(--color-cta) 58%, var(--color-border));
    }
    .card-action:hover .icon { translate: -3px 0; }
  }
  .card-action:focus-visible { border-color: var(--color-primary); }
  @media (hover: hover) {
    .product-card:hover {
      box-shadow: var(--shadow-lift);
      translate: 0 -5px;
      border-color: var(--color-border-strong);
      background-size: 200% 5px, 100% 100%;
    }
    .product-card:hover .product-card__media img { scale: 1.07; }
  }

  /* ---------- مقالات ---------- */
  .posts__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-s); }
  @media (min-width: 40rem) { .posts__grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 62rem) { .posts__grid { grid-template-columns: repeat(3, 1fr); } }

  .post-card {    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-s);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-m);
    /* لایهٔ بالا: خط گرادیان ۳ پیکسلی در لبهٔ پایین کارت.
       لایهٔ پایین: سطح سفید کارت. چون پس‌زمینه با border-radius خودِ کارت
       بریده می‌شود، دوسرِ خط دقیقاً گردیِ گوشه‌ها را دنبال می‌کند. */
    background-image:
      linear-gradient(90deg,
        var(--color-primary), var(--color-secondary) 45%, var(--color-cta) 78%, var(--color-primary)),
      linear-gradient(var(--color-surface), var(--color-surface));
    /* کاشیِ گرادیان دقیقاً ۲ برابر عرض کارت + repeat-x:
       خط هرگز بریده/خالی نمی‌شود و چون انتهای گرادیان همان رنگ ابتداست،
       جای دوختِ کاشی هم دیده نمی‌شود. */
    background-size: 200% 3px, 100% 100%;
    background-position: 0% 100%, 0% 0%;
    background-repeat: repeat-x, no-repeat;
    background-clip: padding-box;
    box-shadow: var(--shadow-1);
    transition: background-size var(--dur-2) var(--ease-out),
                box-shadow var(--dur-2) var(--ease-out),
                translate var(--dur-3) var(--ease-spring),
                border-color var(--dur-2) var(--ease-out);
  }
  /* تصویر شاخص مقاله — با همان زوم کارت‌های دیگر */
  .post-card__media {
    position: relative;
    margin: 0;
    aspect-ratio: 16 / 10;
    overflow: clip;
    border-radius: var(--radius-s);
    background-color: var(--color-primary-soft);
  }
  .post-card__media img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: center;
    transition: scale var(--dur-3) var(--ease-soft);
  }
  .post-card__title {
    font-size: var(--fs-md);
    line-height: var(--lh-tight);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .post-card__title a { color: var(--color-text); }
  .post-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 2; }
  .post-card__text {
    color: var(--color-muted);
    font-size: var(--fs-sm);
    line-height: var(--lh-item);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .post-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.85rem;
    margin-block-start: auto;
    padding-block-start: 0.6rem;
    border-block-start: 1px solid var(--color-border);
    color: var(--color-muted);
    font-size: var(--fs-2xs);
  }
  .post-card__meta span { display: inline-flex; align-items: center; gap: 0.3rem; }
  @media (hover: hover) {
    .post-card:hover {
      box-shadow: var(--shadow-lift);
      translate: 0 -4px;
      border-color: var(--color-border-strong);
      background-size: 200% 5px, 100% 100%;
    }
    .post-card:hover .post-card__media img { scale: 1.06; }
  }
  .post-card:focus-within { border-color: var(--color-primary); box-shadow: var(--shadow-2); }

  /* ---------- سوالات متداول (بدون جاوااسکریپت) ---------- */
  .faq__list { display: grid; gap: var(--space-2xs); }
  .faq-item {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-m);
    background-color: var(--color-surface);
    box-shadow: var(--shadow-1);
    transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
    &:hover { border-color: var(--color-border-strong); }
    &[open] { border-color: var(--color-primary); box-shadow: var(--shadow-2); }
  }
  .faq-item__q {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-s);
    padding: var(--space-s);
    list-style: none;
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-tight);
    color: var(--color-text);
    &::-webkit-details-marker { display: none; }
  }
  .faq-item__q h3 { font-size: inherit; font-weight: inherit; }
  .faq-item__q .icon { color: var(--color-primary); transition: rotate var(--dur-2) var(--ease-out); }
  .faq-item[open] .faq-item__q .icon { rotate: 180deg; }
  .faq-item__a {
    padding: 0 var(--space-s) var(--space-s);
    color: var(--color-muted);
    font-size: var(--fs-sm);
    line-height: var(--lh-item);
    max-inline-size: 62rem;
  }
  .faq__more {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2xs);
    margin-block-start: var(--space-s);
    color: var(--color-muted);
    font-size: var(--fs-sm);
  }
  .link-more, .comment-reply-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--color-primary);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
  }

  /* ---------- فراخوان نهایی — «باکس مهم» با کمان‌های ضخیم ---------- */
  /* ---------- فراخوان نهایی — «باکسِ تماس»: متن در راست، عکسِ پشتیبان در چپ ---------- */
  .cta-band {
    position: relative;
    overflow: clip;
    container-type: inline-size;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-l);
    align-items: center;
    padding: var(--space-2xl) var(--space-l);
    border-radius: var(--radius-xl);
    background-image: var(--grad-band);
    color: var(--color-on-dark);
    box-shadow: var(--shadow-lift);
  }
  .cta-band__body {
    position: relative;
    z-index: 1;
    display: grid;
    gap: var(--space-s);
    justify-items: start;
  }
  .cta-band h2 { color: var(--color-on-dark); max-inline-size: 34rem; }
  .cta-band p { color: var(--color-muted-on-dark); max-inline-size: 46rem; }
  .cta-band .eyebrow { color: var(--color-secondary); }
  .cta-band__actions, .actions-row { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-block-start: var(--space-xs); }
  .cta-band__aside {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-secondary);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
  }
  /* سمتِ چپِ باکس = جای عکسِ پشتیبانِ تلفنی؛ سونار پشتِ عکس می‌زند و می‌آید.
     پایهٔ حلقه‌ها = عرضِ عکس (۸۰٪) تا حلقه‌ها دقیقاً از پشتِ عکس بیرون بزنند. */
  .cta-band__visual {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    margin: 0;
    justify-self: center;
    /* عرضِ معیّن (نه درصد): درصد داخل min() روی یک آیتمِ grid با اندازهٔ auto
       حل نمی‌شود و عرض صفر می‌شود — با مقدار قطعی rem این مشکل رخ نمی‌دهد. */
    inline-size: 14rem;
    aspect-ratio: 4 / 5;
    --sonar-base: 80%;
    --sonar-weight: 2.5px;
    --sonar-scale-min: 0.72;
    --sonar-scale-max: 1.25;
  }
  .cta-band__visual .sonar { z-index: 0; }
  .cta-band__visual img {
    position: relative;
    z-index: 1;
    inline-size: 11rem;
    block-size: 13.75rem;
    object-fit: cover;
    object-position: center;
    border-radius: var(--radius-l);
    box-shadow: 0 18px 38px -22px color-mix(in oklab, black 72%, transparent);
  }
  @container (max-width: 39.99rem) {
    :is(.cta-band__actions, .actions-row) { inline-size: 100%; }
    :is(.cta-band__actions, .actions-row) .btn { inline-size: 100%; }
    /* در عرضِ کم عکس زیرِ متن می‌آید؛ سونار کمی آرام‌تر تا با متن رقابت نکند */
    .cta-band__visual .sonar { opacity: 0.75; }
  }
  /* چیدمانِ دوستونیِ خودِ کارت با container query ممکن نیست
     (یک container نمی‌تواند خودش را استایل کند) → media query. */
  @media (min-width: 62rem) {
    .cta-band { grid-template-columns: 1fr auto; column-gap: var(--space-l); }
  }

  /* ---------- فوتر ---------- */
  .site-footer {
    position: relative;
    overflow: clip;
    padding-block: var(--space-2xl) var(--space-s);
    background-color: var(--color-band-ink);
    color: var(--color-on-dark);
  }
  .site-footer > .container { position: relative; z-index: 1; }
  .footer__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-l); }
  @media (min-width: 40rem) { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 62rem) { .footer__grid { grid-template-columns: 1.2fr 0.85fr 1fr 1.15fr; } }
  .footer__brand { display: grid; gap: var(--space-2xs); max-inline-size: 28rem; }
  .footer__brand-name { color: var(--color-secondary); font-size: var(--fs-lg); font-weight: var(--fw-black); }
  .footer__brand p { color: var(--color-muted-on-dark); font-size: var(--fs-sm); line-height: var(--lh-item); }
  .footer__col-title { font-size: var(--fs-sm); font-weight: var(--fw-bold); margin-block-end: var(--space-xs); }
  .footer__list { display: grid; gap: 0.45rem; font-size: var(--fs-sm); }
  .footer__list a { color: var(--color-muted-on-dark); transition: color var(--dur-1) var(--ease-out); }
  @media (hover: hover) {
    .footer__list a:hover { color: var(--color-secondary); }
  }
  .footer__contact { display: grid; gap: 0.55rem; font-size: var(--fs-sm); }
  .footer__contact li { display: flex; align-items: start; gap: 0.5rem; color: var(--color-muted-on-dark); }
  .footer__contact .icon { color: var(--color-secondary); margin-block-start: 0.15rem; }
  .footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-s);
    margin-block-start: var(--space-l);
    padding-block-start: var(--space-s);
    border-block-start: 1px solid var(--color-hairline-on-dark);
    color: color-mix(in oklab, var(--color-on-dark) 62%, transparent);
    font-size: var(--fs-2xs);
  }

/* ==========================================================================
   SINGLE — قالب نوشتهٔ تکی (single.php)
   فقط چیزهایی که در صفحهٔ خانه نبود. بقیه از همان کامپوننت‌ها می‌آید:
   .band .arcs .sonar .neon-h .btn .tile .benefit .post-card .product-card
   .faq-item .hero__points .eyebrow .lede .search-toggle(.icon-btn) .link-more
   ========================================================================== */
@layer components {

  /* ---------- سطح تیره و کارت‌های گرد (سرصفحه، خلاصه، بنر سایدبار) ----------
     کلاس .band برش کمان‌ها و لایه‌بندی را می‌دهد؛ اینجا فقط شکل کارت. */
  .post { --container: 74rem; }          /* ستونِ خواندنِ کمی باریک‌تر برای کل نوشته */
  .post-top { display: grid; gap: var(--space-s); padding-block: var(--space-m) var(--space-l); }
  :is(.post-hero, .promo) > :not(.arcs) { position: relative; z-index: 1; }

  .post-hero {
    display: grid;
    gap: var(--space-l);
    align-items: center;
    padding: var(--space-l) var(--space-m);
    border-radius: var(--radius-xl);
    background-image: var(--grad-band);
    color: var(--color-on-dark);
    box-shadow: var(--shadow-lift);
  }
  .post-hero__body { display: grid; gap: var(--space-xs); justify-items: start; }
  .post-hero h1 { font-size: var(--fs-3xl); }
  @media (min-width: 62rem) {
    /* اصلاح کاربر: ستون کاشی‌ها باریک‌تر شد تا تیتر اصلی فضای بیشتری بگیرد */
    .post-hero { grid-template-columns: minmax(0, 1.9fr) minmax(13.5rem, 0.42fr); padding: var(--space-xl) var(--space-l); }
  }

  /* مسیر صفحه — هم مارک‌آپ خودِ قالب و هم خروجی افزونه‌های سئو (Yoast) */
  .breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.15rem 0.45rem;
    color: var(--color-muted-on-dark);
    font-size: var(--fs-xs);
  }
  .breadcrumb li { display: inline-flex; align-items: center; gap: 0.45rem; }
  .breadcrumb li + li::before { content: "/"; opacity: 0.55; }
  .breadcrumb a { color: var(--color-on-dark); }
  @media (hover: hover) { .breadcrumb a:hover { color: var(--color-secondary); } }
  .breadcrumb [aria-current] { color: var(--color-secondary); }

  /* چهار کاشی شیشه‌ای کنار عنوان (۲×۲ در همهٔ عرض‌ها) */
  .post-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem; }
  .post-meta__item {
    display: grid;
    min-inline-size: 0;
    align-content: start;
    gap: 0.25rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--color-hairline-on-dark);
    border-radius: var(--radius-m);
    background-color: color-mix(in oklab, var(--color-on-dark) 7%, transparent);
  }
  .post-meta__label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--color-muted-on-dark);
    font-size: var(--fs-2xs);
  }
  .post-meta__label .icon { color: var(--color-secondary); }
  .post-meta__value { font-size: var(--fs-sm); font-weight: var(--fw-bold); line-height: var(--lh-tight); }
  a.post-meta__value { color: var(--color-on-dark); }
  @media (hover: hover) { a.post-meta__value:hover { color: var(--color-secondary); } }
  .share { display: flex; flex-wrap: wrap; gap: 0.25rem; min-inline-size: 0; }
  /* دکمهٔ کپی داخل کارتِ باریک: فشرده، تا سطر به بیرون نزند */
  .share .btn { padding-block: 0.5rem; padding-inline: 0.8rem; font-size: var(--fs-2xs); }
  .post-meta .icon-btn { inline-size: 2rem; block-size: 2rem; border-color: var(--color-hairline-on-dark); }
  .icon-btn.is-copied { color: var(--color-secondary); border-color: var(--color-secondary); }

  /* باکس «خلاصهٔ کاربردی» حذف شد (بازخورد کاربر: نیاز به فیلد اختصاصی داشت).
     .post-summary در صورت نیاز دوباره قابل استفاده است. */

  /* ---------- دو ستون: سایدبار (≈ یک‌چهارم) + ستون اصلی ----------
     موبایل: یک ستون؛ فهرست بالای متن (جمع‌شده)، بنر بعد از متن.
     display: contents فقط ترتیب دیداری را عوض می‌کند. */
  .post-layout { display: grid; gap: var(--space-l); padding-block: var(--space-l) var(--space-2xl); }
  .post-main { display: grid; gap: var(--space-xl); min-inline-size: 0; }
  @media (max-width: 63.99rem) {
    .post-aside { display: contents; }
    .toc { order: -1; }
    .promo { order: 2; }
  }
  @media (min-width: 64rem) {
    .post-layout { grid-template-columns: minmax(15rem, 1fr) minmax(0, 3.3fr); column-gap: var(--space-xl); }
    .post-aside {
      position: sticky;
      inset-block-start: calc(var(--header-h) + var(--space-s));
      align-self: start;
      display: grid;
      gap: var(--space-s);
    }
  }

  /* فهرست مطالب (Scroll Spy داخلی) */
  .toc {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-l);
    background-color: var(--color-surface);
    box-shadow: var(--shadow-1);
  }
  .toc__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: var(--space-xs) var(--space-s);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    color: var(--color-primary);
    list-style: none;
    &::-webkit-details-marker { display: none; }
    .icon--chev { margin-inline-start: auto; transition: rotate var(--dur-2) var(--ease-out); }
  }
  .toc[open] .toc__head .icon--chev { rotate: 180deg; }
  @media (min-width: 64rem) {
    .toc__head { pointer-events: none; }
    .toc__head .icon--chev { display: none; }
  }
  .toc__list {
    display: grid;
    gap: 0.1rem;
    padding: 0 var(--space-2xs) var(--space-2xs);
    max-block-size: min(56vh, 28rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    counter-reset: toc;
  }
  .toc__link {
    display: flex;
    gap: 0.5rem;
    padding: 0.45rem 0.65rem;
    border-radius: var(--radius-s);
    border-inline-start: 2px solid transparent;
    color: var(--color-muted);
    font-size: var(--fs-xs);
    line-height: 1.7;
    transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
  }
  .toc__item--h2 > .toc__link { counter-increment: toc; color: var(--color-text); font-weight: var(--fw-medium); }
  .toc__item--h2 > .toc__link::before { content: counter(toc, persian) "."; color: var(--color-secondary); font-weight: var(--fw-bold); }
  .toc__item--h3 > .toc__link { padding-inline-start: 1.6rem; }
  @media (hover: hover) { .toc__link:hover { background-color: var(--color-primary-soft); color: var(--color-primary); } }
  .toc__item.is-active > .toc__link {
    background-color: var(--color-primary-soft);
    border-inline-start-color: var(--color-cta);
    color: var(--color-primary);
    font-weight: var(--fw-bold);
  }

  /* بنر سایدبار */
  .promo {
    display: grid;
    gap: var(--space-xs);
    justify-items: start;
    padding: var(--space-m) var(--space-s);
    border-radius: var(--radius-l);
    background-image: var(--grad-band);
    color: var(--color-on-dark);
    box-shadow: var(--shadow-2);
  }
  .promo__title { font-size: var(--fs-lg); }
  .promo p { color: var(--color-muted-on-dark); font-size: var(--fs-sm); line-height: var(--lh-item); }
  .promo .actions-row { display: grid; inline-size: 100%; gap: var(--space-2xs); margin-block-start: var(--space-3xs); }

  /* تصویر شاخص + موج سونار پشت آن */
  .post-cover {
    position: relative;
    display: grid;
    place-items: center;
    margin: 0;
    padding: var(--space-m) var(--space-s);
    overflow: clip;
    border-radius: var(--radius-xl);
    background-color: var(--color-mint);
    --sonar-base: 58%;
    --sonar-weight: 2.5px;
    --sonar-scale-min: 0.8;
    --sonar-scale-max: 1.5;
  }
  .post-cover img {
    position: relative;
    z-index: 1;
    inline-size: min(100%, 52rem);
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--radius-l);
    box-shadow: 0 24px 46px -28px color-mix(in oklab, var(--color-primary) 72%, transparent);
  }

  /* ==========================================================================
     .prose — خروجی the_content() وردپرس (ویرایشگر بلوکی)
     ========================================================================== */
  .prose {
    max-inline-size: 48rem;
    font-size: var(--fs-md);
    line-height: var(--lh-body);
    > * + * { margin-block-start: var(--space-s); }
    > :is(h2, h3, h4) + * { margin-block-start: var(--space-xs); }
  }
  .prose :is(h2, h3, h4) {
    scroll-margin-block-start: calc(var(--header-h) + var(--space-s));
    transition: color var(--dur-2) var(--ease-out);
  }
  .prose h2 {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-block-start: var(--space-xl);
    font-size: var(--fs-xl);
    font-weight: var(--fw-black);
    &::before {
      content: "";
      inline-size: 0.35rem;
      block-size: 1.1em;
      border-radius: 2px;
      background-image: linear-gradient(180deg, var(--color-secondary), var(--color-cta));
      flex: none;
    }
  }
  .prose h3 { margin-block-start: var(--space-l); font-size: var(--fs-lg); color: var(--color-primary); }
  .prose h4 { margin-block-start: var(--space-m); font-size: var(--fs-md); }

  /* تیتری که الان در حال خواندنش هستیم: هالهٔ نئونِ نرم و تپنده
     (نسخهٔ روشنِ همان نئون؛ رنگ متن تیره می‌ماند تا کنتراست حفظ شود) */
  .prose :is(h2, h3).is-reading {
    color: var(--color-primary);
    animation: neon-pulse 2.2s var(--ease-soft) infinite alternate;
  }
  @keyframes neon-pulse {
    from { text-shadow: 0 0 0 transparent, 0 0 0 transparent, 0 0 0 transparent; }
    to {
      text-shadow:
        0 0 6px color-mix(in oklab, var(--color-secondary) 70%, transparent),
        0 0 16px color-mix(in oklab, var(--color-secondary) 46%, transparent),
        0 0 30px color-mix(in oklab, var(--color-cta) 22%, transparent);
    }
  }

  .prose a:not([class]) {
    color: var(--color-primary);
    font-weight: var(--fw-medium);
    text-decoration: underline;
    text-decoration-color: color-mix(in oklab, var(--color-secondary) 70%, transparent);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.35em;
  }
  @media (hover: hover) { .prose a:not([class]):hover { color: var(--color-cta-surface-hover); text-decoration-color: currentColor; } }
  .prose strong { color: var(--color-text); font-weight: var(--fw-black); }

  /* فهرست‌ها */
  .prose :is(ul, ol) { padding-inline-start: 1.4rem; display: grid; gap: 0.45rem; }
  .prose li::marker { color: color-mix(in oklab, var(--color-secondary) 55%, var(--color-text)); font-weight: var(--fw-bold); }
  .prose ol { list-style: persian; }

  /* نقل‌قول (بلوک quote و pullquote) */
  .prose :is(blockquote, .wp-block-pullquote) {
    padding: var(--space-s) var(--space-m);
    border-inline-start: 4px solid var(--color-secondary);
    border-radius: var(--radius-m);
    background-color: var(--color-warm);
    font-size: var(--fs-md);
    font-weight: var(--fw-medium);
    p + p { margin-block-start: var(--space-2xs); }
    cite { display: block; margin-block-start: var(--space-2xs); color: var(--color-muted); font-size: var(--fs-xs); font-style: normal; }
  }

  /* باکس‌های هشدار — سه رنگ (در وردپرس: بلوک «گروه» + کلاس CSS اضافی) */
  .callout {
    --c: var(--color-primary);
    display: grid;
    gap: 0.35rem;
    padding: var(--space-s);
    border: 1px solid color-mix(in oklab, var(--c) 26%, transparent);
    border-inline-start-width: 4px;
    border-inline-start-color: var(--c);
    border-radius: var(--radius-m);
    background-color: color-mix(in oklab, var(--c) 9%, var(--color-surface));
    font-size: var(--fs-sm);
    line-height: var(--lh-item);
  }
  .callout__title { display: flex; align-items: center; gap: 0.45rem; color: var(--c); font-weight: var(--fw-black); }
  .callout--tip  { --c: color-mix(in oklab, var(--color-secondary) 55%, var(--color-text)); background-color: var(--color-warm); }
  .callout--warn { --c: var(--color-cta-surface-hover); }

  /* تصویر درون متن */
  .prose :is(figure, .wp-block-image) { margin-inline: 0; }
  .prose :is(figure, .wp-block-image) img {
    inline-size: 100%;
    border-radius: var(--radius-m);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-1);
  }
  .prose :is(figcaption, .wp-element-caption) {
    margin-block-start: var(--space-2xs);
    color: var(--color-muted);
    font-size: var(--fs-xs);
    line-height: var(--lh-item);
    text-align: center;
  }
  .prose iframe { inline-size: 100%; block-size: auto; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius-m); }

    /* ---------- جدول (بلوک Table وردپرس) — دو طرح ----------
     طرح ۱ «جدول داده» = پیش‌فرضِ خودِ بلوک Table، بدون هیچ کلاسی:
       سرصفحهٔ سرمه‌ای، ردیف‌های راه‌راه، هالهٔ ملایم روی ردیفِ زیر نشانگر.
       (کلاس آمادهٔ وردپرس is-style-stripes هم به همین شکل خوانده می‌شود.)
     طرح ۲ «جدول ساده» = کلاس is-style-simple روی figure.wp-block-table یا خودِ table:
       برای فهرست مشخصات و جدول‌های متن‌محور؛ بدون رنگ سرصفحه و بدون راه‌راه.
     ثبت طرح دوم در وردپرس (functions.php):
       register_block_style('core/table', array('name' => 'simple', 'label' => 'جدول ساده'));
     در موبایل هر جدول داخل پوشش .table-scroll افقی اسکرول می‌شود (theme.js می‌سازد). */
  .prose .wp-block-table { overflow-x: auto; overscroll-behavior-x: contain; }
  .prose table {
    inline-size: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-m);
    overflow: clip;
    background-color: var(--color-surface);
    font-size: var(--fs-sm);
    line-height: var(--lh-tight);
    font-variant-numeric: tabular-nums;
  }
  .prose :is(th, td) { padding: 0.75rem 0.9rem; text-align: start; vertical-align: top; }
  .prose td { border-block-start: 1px solid var(--color-border); }
  .prose thead th { background-color: var(--color-primary); color: var(--color-on-dark); font-weight: var(--fw-bold); white-space: nowrap; }
  .prose tbody th { color: var(--color-primary); font-weight: var(--fw-bold); border-block-start: 1px solid var(--color-border); }
  /* طرح ۱ — راه‌راه پیش‌فرض */
  .prose tbody tr:nth-child(even) { background-color: var(--color-mint); }
  @media (hover: hover) { .prose tbody tr:hover { background-color: var(--color-secondary-soft); } }

  /* طرح ۲ — «جدول ساده» (is-style-simple) */
  .prose .is-style-simple { background-color: transparent; }
  .prose .is-style-simple table { background-color: transparent; }
  .prose .is-style-simple thead th {
    background-color: transparent;
    color: var(--color-primary);
    border-block-end: 2px solid var(--color-primary);
    white-space: normal;
  }
  .prose .is-style-simple tbody tr:nth-child(even) { background-color: transparent; }
  @media (hover: hover) { .prose .is-style-simple tbody tr:hover { background-color: var(--color-warm); } }


  .prose :is(code, kbd) {
    padding: 0.1em 0.4em;
    border-radius: 0.3rem;
    background-color: var(--color-primary-soft);
    color: var(--color-primary);
    font-size: 0.88em;
    direction: ltr;
    unicode-bidi: isolate;
  }
  .prose hr { border: 0; block-size: 3px; border-radius: 3px; background-image: var(--grad-line); margin-block: var(--space-l); }

  /* هایلایت ماژیکی: هر متنِ ایتالیک یا <mark> در صفحه (بدون کج شدن) */
  :where(#main) :is(em, mark) {
    font-style: normal;
    font-weight: var(--fw-semibold);
    color: inherit;
    padding-inline: 0.15em;
    background-color: transparent;
    background-image: linear-gradient(transparent 52%, var(--color-highlight) 52%, var(--color-highlight) 94%, transparent 94%);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
  :where(.post-hero, .promo, .band--brand) :is(em, mark) {
    --color-highlight: color-mix(in oklab, var(--color-secondary) 42%, transparent);
  }

  /* ---------- سوالات متداول و دیدگاه‌ها داخل ستون اصلی ---------- */
  .post-section { display: grid; gap: var(--space-s); }
  .post-section > h2 { font-size: var(--fs-xl); }

  /* دیدگاه‌ها — خروجی استاندارد wp_list_comments (html5)، بدون آواتار و ایمیل */
  .comment-list, .comment-list .children { display: grid; gap: var(--space-2xs); padding: 0; list-style: none; }
  .comment-list .children {
    margin-block-start: var(--space-2xs);
    margin-inline-start: var(--space-s);
    padding-inline-start: var(--space-s);
    border-inline-start: 2px solid var(--color-secondary-soft);
  }
  .comment-body {
    display: grid;
    gap: 0.4rem;
    padding: var(--space-s);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-m);
    background-color: var(--color-surface);
  }
  .bypostauthor > .comment-body { border-color: var(--color-border-strong); background-color: var(--color-mint); }
  .comment-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; }
  .comment-author .fn { font-style: normal; font-weight: var(--fw-bold); color: var(--color-primary); }
  .comment-author .says, .comment-author .avatar { display: none; }
  .comment-metadata { color: var(--color-muted); font-size: var(--fs-2xs); }
  .comment-content { font-size: var(--fs-sm); line-height: var(--lh-item); }
  .reply { justify-self: end; }

  /* فرم دیدگاه: فقط نام و متن */
  .comment-respond {
    display: grid;
    gap: var(--space-xs);
    padding: var(--space-m) var(--space-s);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-l);
    background-color: var(--color-warm);
  }
  .comment-reply-title { font-size: var(--fs-lg); }
  .comment-notes { color: var(--color-muted); font-size: var(--fs-xs); }
  .comment-form { display: grid; gap: var(--space-xs); }
  .comment-form :is(p) { display: grid; gap: 0.35rem; }
  .comment-form label { font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
  .comment-form :is(input[type="text"], textarea) {
    inline-size: 100%;
    padding: 0.8rem 0.9rem;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-s);
    background-color: var(--color-surface);
    font-size: var(--fs-base);              /* ≥۱۶px: iOS روی فیلد زوم نمی‌کند */
    transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
  }
  .comment-form textarea { min-block-size: 9rem; resize: vertical; line-height: var(--lh-item); }
  .comment-form .form-submit { justify-items: start; }
  @media (max-width: 39.99rem) { .comment-form .form-submit .btn { inline-size: 100%; } }

  /* بخش‌های سبک‌تر بعد از نوشته: نوار اشتراک/عضویت روی باند تیره */
  .benefit .actions-row { margin-block-start: var(--space-2xs); }
}

/* ==========================================================================
   UTILITIES
   ========================================================================== */
@layer utilities {
  /* ---------- خوانایی: تراز دوطرفه برای متن‌های بلند ----------
     فقط پاراگراف‌های بلندِ تمام‌عرض؛ کارت‌ها در ستون باریک‌اند و
     تراز دوطرفه در آن‌ها فاصله‌های زشت می‌سازد، پس جداگانه و از
     عرض بزرگ‌تر اعمال می‌شود. خطِ آخر کشیده نمی‌شود. */
  @media (min-width: 48rem) {
    :where(.lede, .hero__lede, .section__head p, .faq-item__a, .cta-band p, .prose > p) {
      text-align: justify;
      text-align-last: start;
    }
  }
  @media (min-width: 62rem) {
    :where(.product-card__text, .post-card__text) {
      text-align: justify;
      text-align-last: start;
    }
  }

  /* ---------- موبایل: تراز دوطرفه در همهٔ صفحات ----------
     پیش از این تراز دوطرفه فقط از ۴۸rem (۷۶۸px) به بالا اعمال می‌شد و در
     موبایل لبهٔ چپِ متن دندانه‌دار می‌ماند. این بلوک همان گروه‌سلکتورِ نسخهٔ
     دسکتاپ را در موبایل هم فعال می‌کند: متنِ خواندنیِ محتوا (پاراگراف،
     فهرست، نقل‌قول، پاسخ پرسش‌های متداول، لید و پاراگراف‌های نوار فراخوان).
     تیترها، جدول‌ها، زیرنویس تصویر و کارت‌های باریک دست‌نخورده می‌مانند تا
     کشیدگیِ فاصله‌ها حفرهٔ سفید نسازد. خطِ آخرِ هر پاراگراف کشیده نمی‌شود. */
  @media (max-width: 47.99rem) {
    :where(.lede, .hero__lede, .section__head p, .faq-item__a, .cta-band p, .prose > p,
           .prose > :is(ul, ol) > li, .prose > blockquote) {
      text-align: justify;
      text-align-last: start;
      line-height: 1.92;    /* کمی بازتر: رهبری بهتر برای خطوط فارسی */
      text-wrap: pretty;    /* جلوگیری از خطِ آخرِ تک‌کلمه‌ای (orphan) */
    }
  }

  /* ---------- تورفتگی خط اول پاراگراف — فقط صفحهٔ نوشته ----------
     اصل نگارشی: خط اول هر پاراگراف دو فاصلهٔ حرفی (۲em) جلوتر از بقیهٔ
     خطوط می‌نشیند. text-indent جهت‌آگاه است؛ در RTL از لبهٔ راست جلو می‌آید
     و با تراز دوطرفه همزیستی دارد. کادر پاسخ و عنوان کال‌اوت مستثنا هستند. */
  body.single .prose > p:not():not(.callout__title) { text-indent: 2em; }

  /* ---------- جدول در موبایل: سرصفحه می‌تواند بشکند ----------
     nowrap در موبایل فقط عرض اسکرول را زیاد می‌کرد. */
  @media (max-width: 47.99rem) { .prose thead th { white-space: normal; } }

  /* ---------- هدف لمسی روی اشاره‌گر درشت ----------
     WCAG 2.2 (2.5.8) حداقل ۲۴px است و رعایت می‌شود؛ راهنمای iOS/Android
     ۴۴px است. این بلوک فقط روی لمسی اجرا می‌شود تا چیدمان دسکتاپ ثابت بماند. */
  @media (pointer: coarse) {
    :is(.icon-btn, .search-toggle, .nav-toggle, .nav-toggle__close, .nav__close) { inline-size: 2.75rem; block-size: 2.75rem; }
    :is(.nav__link, .submenu__link, .dock__item) { min-block-size: 2.75rem; }
  }

  /* ---------- موبایل: فاصلهٔ بیشتر بین دکمه‌ها ---------- */
  @media (max-width: 39.99rem) {
    :is(.hero__actions, .cta-band__actions) { gap: var(--space-s); }
  }
}
/* ==========================================================================
   فونت: بارگذاری محلی (توصیهٔ کارایی)
   به‌جای <link> گوگل در header.php، فایل‌های woff2 را در assets/fonts/
   بگذارید و این بلوک را از کامنت خارج کنید. با این کار یک درخواست
   سوم‌شخص و CSS مسدودکنندهٔ رندر حذف می‌شود. نام فایل‌ها را با نام واقعی
   فایل‌های Vazirmatn عوض کنید.
   ==========================================================================
@font-face { font-family: "Vazirmatn"; src: url("assets/fonts/vazirmatn-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Vazirmatn"; src: url("assets/fonts/vazirmatn-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Vazirmatn"; src: url("assets/fonts/vazirmatn-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Vazirmatn"; src: url("assets/fonts/vazirmatn-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Vazirmatn"; src: url("assets/fonts/vazirmatn-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
*/



/* ==========================================================================
   GUARD — محافظت در برابر سرریز افقی (پس از ایراد گزارش‌شدهٔ موبایل)
   overflow: clip (نه hidden) تا position: sticky سایدبار سالم بماند.
   ========================================================================== */
@layer utilities {
  html { overflow-x: clip; }
  body { max-inline-size: 100%; overflow-x: clip; }
  :where(.post-layout, .post-main, .post-aside, .prose, .toc, .promo) { min-inline-size: 0; }
  :where(#main) :is(img, svg, video, iframe, figure, table, pre) { max-inline-size: 100%; }
  .prose :is(p, li, blockquote, figcaption, h2, h3, h4, a, span) { overflow-wrap: break-word; }
  .prose :is(pre, code) { max-inline-size: 100%; overflow-x: auto; }
  .prose :is(.callout, .wp-block-group, figure, .wp-block-columns) { min-inline-size: 0; }

  /* پوششی که theme.js دور جدول‌ها می‌سازد: اسکرول افقی امن در موبایل.
     بدون JS هم چیزی نمی‌شکند؛ فقط نوار اسکرول و راهنمای کشیدن اضافه نمی‌شود. */
  .table-scroll {
    inline-size: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border-strong) var(--color-mint);
  }
  .table-scroll > table { min-inline-size: 34rem; }
  .table-scroll::-webkit-scrollbar { height: 0.5rem; }
  .table-scroll::-webkit-scrollbar-track { background-color: var(--color-mint); border-radius: var(--radius-pill); }
  .table-scroll::-webkit-scrollbar-thumb { background-color: var(--color-border-strong); border-radius: var(--radius-pill); }
  .table-scroll:focus-visible { outline: 2px solid var(--color-cta); outline-offset: 2px; }

  /* راهنمای کشیدن — فقط موبایل و فقط جدولی که واقعاً سرریز دارد */
  .table-scroll__hint {
    display: none;
    margin-block-start: 0.45rem;
    color: var(--color-muted);
    font-size: var(--fs-2xs);
    line-height: var(--lh-item);
    text-align: start;
  }
  @media (max-width: 47.99rem) {
    .table-scroll.is-overflowing:not(.is-at-end) + .table-scroll__hint { display: block; }
  }

  /* خیلی باریک: کاشی‌های اطلاعات یک‌ستونه */
  @media (max-width: 25.99rem) { .post-meta { grid-template-columns: minmax(0, 1fr); } }

  @media (max-width: 47.99rem) {
    .prose table { font-size: var(--fs-xs); }
    .prose :is(th, td) { padding: 0.55rem 0.6rem; }
    .post-hero { padding: var(--space-m); }
    .post-top { padding-block: var(--space-s) var(--space-l); }
  }
}

/* ==========================================================================
   FONT — وزیرمتن (Vazirmatn) متغیر، میزبانی محلی (بدون Google Fonts)
   مجوز: SIL OFL 1.1 — فایل فونت دست‌نخورده است:
   assets/fonts/LICENSE-Vazirmatn-OFL.txt
   ========================================================================== */
@font-face {
  font-family: "Vazirmatn";
  src: url("assets/fonts/Vazirmatn-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   سازگاری با وردپرس — کلاس‌هایی که خودِ هستهٔ وردپرس در خروجی می‌سازد.
   داخل لایهٔ components می‌آید تا بر ترتیب لایه‌ها غلبه نکند.
   ========================================================================== */
@layer components {
  /* متن مخصوص صفحه‌خوان (کلاس هسته) */
  .screen-reader-text:not(:focus) {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  /* لوگوی سفارشی از «شناسهٔ سایت» */
  .custom-logo-link { display: inline-flex; align-items: center; }
  .custom-logo { inline-size: auto; max-inline-size: 11rem; block-size: auto; max-block-size: 3.25rem; }

  /* کلاس‌های ترازبندی هسته */
  .aligncenter { display: block; margin-inline: auto; }
  .alignleft { float: left; margin-inline-end: var(--space-s); }
  .alignright { float: right; margin-inline-start: var(--space-s); }
  .alignwide { inline-size: min(100%, 68rem); margin-inline: auto; }
  .alignfull { inline-size: 100%; }
  .wp-caption { max-inline-size: 100%; }
  .wp-caption-text, .gallery-caption {
    font-size: var(--fs-xs);
    color: var(--color-muted);
    text-align: center;
    margin-block-start: var(--space-3xs);
  }
  .gallery { display: grid; gap: var(--space-s); grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
  .gallery-item { margin: 0; }
  .post-edit-link { font-size: var(--fs-xs); }

  /* فرم دیدگاه و فهرست دیدگاه‌ها (خروجی هسته) */
  .comment-form :is(input[type="text"], input[type="email"], input[type="url"], textarea) {
    inline-size: 100%;
    font: inherit;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-m);
    padding: var(--space-xs) var(--space-s);
  }
  .comment-form textarea { min-block-size: 8rem; resize: vertical; }
  .comment-form label { display: block; margin-block-end: var(--space-3xs); font-weight: var(--fw-medium); }
  .comment-form-cookies-consent { display: flex; align-items: flex-start; gap: var(--space-2xs); }
  .comment-form-cookies-consent label { font-weight: var(--fw-body); }
  .comment-notes, .logged-in-as, .comment-awaiting-moderation, .no-comments {
    font-size: var(--fs-xs);
    color: var(--color-muted);
  }
  #cancel-comment-reply-link { font-size: var(--fs-xs); margin-inline-start: var(--space-2xs); }
  .comment-list .children { list-style: none; margin: 0; padding-inline-start: var(--space-m); }
  .comment-body .avatar { border-radius: var(--radius-pill); }

  /* صفحه‌بندی فهرست‌ها و پیمایش دیدگاه‌ها */
  .pagination { margin-block-start: var(--space-xl); }
  .pagination .nav-links, .comment-navigation .nav-links { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
  .pagination .nav-links { justify-content: center; }
  .pagination .page-numbers, .comment-navigation a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 2.5rem;
    min-block-size: 2.5rem;
    padding-inline: var(--space-xs);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    color: var(--color-text);
    text-decoration: none;
  }
  .pagination .page-numbers.current { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-dark); }
  .comment-navigation { margin-block: var(--space-m); }

  /* ووکامرس — قالب woocommerce.php */
  .wc-main { padding-block: var(--space-l); }
}

/* ==========================================================================
   LISTS — افزودهٔ ۱.۰.۱: سرصفحهٔ فهرست‌ها، پنل جست‌وجوی هدر، صفحهٔ ۴۰۴،
   توضیح آرشیو و ناحیهٔ ابزارک کنار آرشیو محصولات.
   ========================================================================== */
@layer components {

  /* هیروی تک‌ستونی — برگه‌ها و ۴۰۴ کاشی کنار عنوان ندارند، پس ستون دومِ
     رزروشده در دسکتاپ حذف می‌شود (وگرنه یک ناحیهٔ خالی می‌مانْد). */
  @media (min-width: 62rem) {
    .post-hero--single { grid-template-columns: minmax(0, 1fr); }
  }

  /* خلاصهٔ فهرست با یک کاشی: تمام عرض ستون عنوان‌ها */
  .post-meta--single { grid-template-columns: minmax(0, 1fr); }

  /* ---------- پنل جست‌وجوی هدر (فقط دسکتاپ) ----------
     داخل همان هدر می‌مانَد؛ پس‌زمینهٔ آبیِ هدر را از شبه‌عنصر خودش می‌گیرد. */
  .search-panel {
    padding-block: var(--space-s) var(--space-m);
    border-block-start: 1px solid color-mix(in oklab, white 18%, transparent);
  }
  .search-panel[hidden] { display: none; }
  .search-panel .nona-search { max-inline-size: 36rem; }

  /* ---------- قیمت کارت محصول (فقط آرشیو محصولات) ---------- */
  .product-card__price { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--color-primary); }
  .product-card__price :is(del, s) { color: var(--color-muted); font-weight: normal; }
  .product-card__price ins { text-decoration: none; color: var(--color-cta); }

  /* ---------- توضیح آرشیو (همان ساختار دوستونی نوشتهٔ تکی) ---------- */
  .archive-intro .toc { align-self: start; }

  /* ---------- فهرست خالی / چیزی پیدا نشد ---------- */
  .archive-empty__form { max-inline-size: 34rem; margin-block-start: var(--space-s); }

  /* ---------- صفحهٔ ۴۰۴ ---------- */
  .notfound { display: grid; gap: var(--space-l); justify-items: start; max-inline-size: 48rem; }
  .notfound .nona-search { inline-size: 100%; }
  .notfound__links { display: flex; flex-wrap: wrap; gap: var(--space-s); font-size: var(--fs-sm); }
  .notfound__links a { color: var(--color-primary); font-weight: var(--fw-medium); }
  @media (hover: hover) { .notfound__links a:hover { color: var(--color-cta); } }

  /* ---------- ناحیهٔ ابزارک کنار آرشیو محصولات ----------
     (ابزارک‌های ووکامرس مثل فیلتر قیمت و فیلتر بر اساس صفت) */
  .widgets { display: grid; gap: var(--space-s); }
  .widget {
    padding: var(--space-s);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-l);
    background-color: var(--color-surface);
    box-shadow: var(--shadow-1);
  }
  .widget-title {
    margin-block-end: var(--space-xs);
    color: var(--color-primary);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
  }
  .widget ul { display: grid; gap: 0.3rem; margin: 0; padding: 0; list-style: none; font-size: var(--fs-sm); }
  .widget a { color: var(--color-text); }
  @media (hover: hover) { .widget a:hover { color: var(--color-primary); } }
  .widget :is(select, input[type="text"], input[type="search"], input[type="number"]) {
    inline-size: 100%;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-s);
    background-color: var(--color-background);
    font: inherit;
    font-size: var(--fs-sm);
  }
  .widget .tagcloud { display: flex; flex-wrap: wrap; gap: 0.35rem; }
  .widget .tagcloud a {
    padding: 0.25rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background-color: var(--color-background);
    font-size: var(--fs-2xs);
  }
}

/* ==========================================================================
   FIXES — افزودهٔ ۱.۰.۲
   ========================================================================== */
@layer components {

  /* ۱) کارت‌ها تا قدِ سایدبار کشیده نشوند (ستون اصلی نباید فضای اضافیِ
     ردیفِ گرید را بین ردیف‌هایش پخش کند؛ همان ایراد «هم‌قد شدن کارت‌ها با
     سایدبار» در آرشیو محصولات). */
  .post-layout { align-items: start; }
  .post-main { align-content: start; }

  /* ۲) عرض متن برگه‌ها و ۴۰۴ هم‌اندازهٔ عرض تیتر شود. */
  .prose--wide { max-inline-size: none; }

  /* ۳) چند بج روی کارت (نوشته و محصول می‌توانند چند دسته داشته باشند). */
  .card-badges {
    position: absolute;
    z-index: 3;
    inset-block-start: 0.6rem;
    inset-inline-start: 0.6rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    max-inline-size: calc(100% - 1.2rem);
  }
  .card-badges .card-badge { position: static; inset: auto; }

  /* ۴) برگهٔ محصول: ستون تصویر (سمت راست، چسبان) پهن‌تر از ستون کنارِ
     نوشتهٔ تکی است و کاشی خرید در هیرو فضای بیشتری می‌خواهد. */
  @media (min-width: 62rem) {
    .post-hero--product { grid-template-columns: minmax(0, 1.3fr) minmax(18rem, 0.7fr); align-items: start; }
  }
  .post-meta--buy { grid-template-columns: minmax(0, 1fr); }
  .post-meta--buy .post-meta__value { line-height: var(--lh-item); }
  .product-price :is(.amount, ins) { font-size: var(--fs-lg); font-weight: var(--fw-black); }
  .product-price del { color: var(--color-muted); }
  .product-buy { display: grid; gap: var(--space-2xs); }
  .product-buy__consult { inline-size: 100%; }
  @media (min-width: 64rem) {
    .post-layout--product { grid-template-columns: minmax(0, 2.15fr) minmax(0, 3fr); }
  }
  .product-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
    gap: var(--space-2xs);
    margin: var(--space-s) 0 0;
    padding: 0;
    list-style: none;
  }
  .product-gallery img {
    inline-size: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-m);
    background-color: var(--color-primary-soft);
  }

  /* ۵) پرسش‌های متداول: خروجی خودکارِ اسکیمای افزونهٔ سئو (بخش
     schema-faq-section) و بلوک‌های FAQ/rank-math — همه با زبان طراحی قالب. */
  .prose { counter-reset: faq; }
  .prose :is(.schema-faq, .faq__list) { display: grid; gap: var(--space-2xs); }
  .prose :is(.schema-faq-section, .faq-item) {
    counter-increment: faq;
    display: grid;
    gap: var(--space-2xs);
    padding: var(--space-s);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-l);
    background-color: var(--color-surface);
    box-shadow: var(--shadow-1);
  }
  .prose :is(.schema-faq-question, .faq-item > :is(summary, h3, h4)) {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin: 0;
    color: var(--color-primary);
    font-size: var(--fs-md);
    font-weight: var(--fw-black);
    line-height: var(--lh-item);
  }
  .prose :is(.schema-faq-question)::before {
    content: counter(faq, persian);
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    inline-size: 1.65rem;
    block-size: 1.65rem;
    border-radius: var(--radius-pill);
    background-image: linear-gradient(120deg, var(--color-secondary), var(--color-cta));
    color: #fff;
    font-size: var(--fs-2xs);
    font-weight: var(--fw-bold);
  }
  .prose :is(.schema-faq-answer) {
    margin: 0;
    padding-inline-start: calc(1.65rem + 0.55rem);
    color: var(--color-text);
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
  }

  /* ۶) ۴۰۴: تمام‌عرض با تصویر جذاب. */
  .notfound {
    display: grid;
    gap: var(--space-l);
    max-inline-size: none;
    justify-items: stretch;
  }
  @media (min-width: 48rem) {
    .notfound { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: var(--space-2xl); }
  }
  .notfound__art {
    padding: var(--space-m);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background-color: var(--color-surface);
    box-shadow: var(--shadow-1);
  }
  .notfound__svg { inline-size: 100%; block-size: auto; display: block; }
  .notfound__404 { font-size: 6.5rem; font-weight: 900; fill: var(--color-primary); letter-spacing: 0.02em; }
  .notfound__body { display: grid; gap: var(--space-s); justify-items: start; }
  .notfound .nona-search { inline-size: 100%; }

  /* ۷) حذف بخش «ذخیرهٔ نام، ایمیل و وب‌سایت من در مرورگر» از فرم دیدگاه. */
  .comment-form-cookies-consent { display: none; }

  /* ۸) استحکام فهرست‌ها و تیترها: هیچ کارت/تیتری از عرض بیرون نزند. */
  .posts__grid > *, .products__grid > * { min-inline-size: 0; }
  .post-card__title, .product-card__title, .post-card__text, .post-hero h1 { overflow-wrap: anywhere; }
}


/* ==========================================================================
   FIXES — افزودهٔ ۱.۰.۳
   ========================================================================== */
@layer components {

  /* ---------- ۱) تک نوشته: پایانِ موازیِ متن و تصویر ----------
     ایراد کاربر: متن به انتهای ستون نمی‌رسید و یک ناحیهٔ خالی می‌ماند.
     ستونِ محتوا روی اندازهٔ خواندن (۵۲rem) قفل می‌شود، متن سقف عرض خودش را
     از دست می‌دهد و تصویر شاخص هم ۱۰۰٪ عرض همان ستون می‌شود؛ پس انتهای متن
     و انتهای تصویر موازی هم تمام می‌شوند و فضای بن‌بست نمی‌ماند. */
  @media (min-width: 64rem) {
    .post-layout--single {
      grid-template-columns: minmax(15rem, 1fr) minmax(0, 52rem);
      padding-block-end: var(--space-xl);
    }
    .post-layout--single .post-main { gap: var(--space-l); }
  }
  .post-layout--single .prose { max-inline-size: none; }
  .post-layout--single .post-cover img { inline-size: 100%; }
  .post-main > :last-child, .prose > :last-child { margin-block-end: 0; }

  /* ---------- ۲) برگهٔ محصول: پنل خریدِ هیرو ----------
     ایراد کاربر: زیر عنوان خالی بود و ستون کنار چند خط داشت. اکنون ستون کنار
     یک پنلِ جمع‌وجور است: دسته‌بندی در بالا، و زیرِ آن قیمت و فرمِ افزودن به
     سبد به‌صورت افقی. */
  @media (min-width: 62rem) {
    .post-hero--product {
      grid-template-columns: minmax(0, 1.5fr) minmax(19rem, 1fr);
      align-items: start;
      padding-block: var(--space-l);
    }
  }
  .product-panel {
    display: grid;
    gap: var(--space-s);
    inline-size: 100%;
    min-inline-size: 0;
    padding: var(--space-s);
    border: 1px solid var(--color-hairline-on-dark);
    border-radius: var(--radius-l);
    background-color: color-mix(in oklab, var(--color-on-dark) 7%, transparent);
  }
  .product-panel__cats { display: grid; gap: 0.3rem; min-inline-size: 0; }
  .product-panel__cats .post-meta__value { line-height: var(--lh-item); }
  .product-panel__cats .post-meta__value a { color: var(--color-on-dark); }
  @media (hover: hover) { .product-panel__cats .post-meta__value a:hover { color: var(--color-secondary); } }
  .product-panel__buy {
    display: grid;
    gap: var(--space-2xs);
    padding-block-start: var(--space-s);
    border-block-start: 1px solid var(--color-hairline-on-dark);
  }
  .product-buy-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); }
  .product-price { flex: 0 0 auto; }
  .product-price :is(.amount, ins) { color: var(--color-secondary); font-size: var(--fs-lg); font-weight: var(--fw-black); }
  .product-price del { color: var(--color-muted-on-dark); font-weight: var(--fw-medium); }
  .product-price ins { text-decoration: none; }
  .product-buy { flex: 1 1 12rem; min-inline-size: 0; display: grid; gap: var(--space-2xs); }
  .product-buy form.cart,
  .product-buy .woocommerce-variation-add-to-cart {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2xs);
    margin: 0;
  }
  .product-buy form.cart .variations,
  .product-buy form.cart .single_variation_wrap,
  .product-buy form.cart .reset_variations { flex: 1 1 100%; }
  .product-buy .quantity { flex: 0 0 auto; }
  .product-buy .single_add_to_cart_button { flex: 1 1 9rem; }
  .product-buy__consult {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    justify-self: start;
    padding-block-end: 2px;
    border-block-end: 1px dashed color-mix(in oklab, var(--color-on-dark) 45%, transparent);
    color: var(--color-muted-on-dark);
    font-size: var(--fs-xs);
    text-decoration: none;
  }
  .product-buy__consult .icon { color: var(--color-secondary); }
  @media (hover: hover) {
    .product-buy__consult:hover { color: var(--color-secondary); border-block-end-color: var(--color-secondary); }
  }

  /* ---------- ۳) کارت CTA ستون تصویرِ محصول (فقط دسکتاپ) ---------- */
  .promo--aside { display: none; }
  .promo--aside .promo__title { font-size: var(--fs-md); }
  .promo--aside .btn { inline-size: 100%; }
  @media (min-width: 64rem) {
    .promo--aside { display: grid; margin-block-start: var(--space-s); }
    .post-layout--product .post-aside { gap: var(--space-m); }
  }
}