/* ==========================================================================
   Pak Tamin — main stylesheet
   Design tokens and layout follow the approved homepage design.
   ========================================================================== */

@font-face{font-family:'Vazirmatn';font-weight:400;font-style:normal;font-display:swap;
  src:url('../fonts/vazirmatn-400.ttf') format('truetype')}
@font-face{font-family:'Vazirmatn';font-weight:700;font-style:normal;font-display:swap;
  src:url('../fonts/vazirmatn-700.ttf') format('truetype')}
@font-face{font-family:'Vazirmatn';font-weight:800;font-style:normal;font-display:swap;
  src:url('../fonts/vazirmatn-800.ttf') format('truetype')}

:root{
  /* ======================================================================
     LAYER 1 — SEEDS. The only six values a human picks. Everything below is
     derived from these; the admin screen (نمایش → رنگ‌بندی سایت) edits these
     and PHP re-emits the whole block, so the layers can never disagree.
     ====================================================================== */
  --seed-primary:#0F3C6B;
  --seed-accent:#17A44E;
  --seed-info:#1668B3;
  --seed-warning:#C77A17;
  --seed-danger:#C0392B;
  --seed-neutral:#16202B;

  /* ======================================================================
     LAYER 2 — RAMPS. Defaults below are the hand-tuned, contrast-audited
     values that shipped; they are NOT recomputed while the seeds are
     untouched, so the site renders byte-identically out of the box. Change a
     seed and inc/theme-colors.php derives the whole ramp in OKLCh (constant
     hue, per-role lightness and chroma) and then *forces* every text role up
     to 4.5:1 and every UI role to 3:1 against the surface it actually lands
     on. The recipe reproduces each default below to ΔE_ok ≤ 0.013, so the
     switch from literal to derived is not a visible jump.
     ====================================================================== */

  /* primary — chrome: header nav, footer, dark cards, banner veils */
  --primary:#0F3C6B; --primary-deep:#0B2F55; --primary-nav:#103A64;

  /* accent — two roles, deliberately not one value.
     --accent is decorative ONLY: icons, dots, borders, focus rings. At 3.25:1
     on white it meets WCAG 1.4.11 (non-text, 3:1) but NOT 1.4.3 (text, 4.5:1),
     so it must never carry text or sit behind white text — use --accent-text
     there. --accent-text clears 4.5:1 on BOTH white and --accent-surface; the
     previous #128040 was 4.49:1 on mint, a hair under. */
  --accent:#17A44E; --accent-text:#127E3F; --accent-text-hover:#0E6533;
  --accent-surface:#EAF5EF; --accent-surface-hover:#DBEDE3;

  /* status */
  --info:#1668B3; --warning:#C77A17;
  --danger:#C0392B; --danger-surface:#FDECEA; --danger-surface-2:#FBEAE7;

  /* neutrals. Two grey tiers, not three — deliberately.
     --text-soft was #8A99A5 (2.92:1): it failed as text, and as the background
     behind white text (.ptag.out). Any value light enough to read as a distinct
     third tint fails 4.5:1 on one of the four surfaces text actually lands on
     (white, --surface-2, --accent-surface, --bg), so the two quiet tiers share
     one value rather than differing by an imperceptible 2-3 hex points that
     would read as a mistake and drift apart later. Quiet text is distinguished
     by size and weight, not by a third tint — --text-soft is now defined *as*
     --text-muted so the two cannot drift even if someone edits one of them.
     --text-muted also moved from #63737F, which was 4.38:1 on --accent-surface.
     Verified: 5.18 white / 4.94 surface-2 / 4.64 mint / 4.73 bg. */
  --bg:#F2F5F7; --surface:#FFFFFF; --surface-2:#F8FAFB;
  --text:#16202B; --text-muted:#606F7B; --text-soft:var(--text-muted);
  --border:#E3E9ED; --border-soft:#EFF3F5;

  /* ======================================================================
     LAYER 3 — ON-COLORS AND CHANNELS.
     ====================================================================== */

  /* What sits ON a saturated brand surface. Kept per-surface rather than as
     one --on-brand, because a light primary and a dark accent need to flip
     independently — the deriver picks black or white per surface by contrast,
     it does not assume white. */
  --on-primary:#FFFFFF; --on-accent:#FFFFFF;
  --on-info:#FFFFFF; --on-danger:#FFFFFF;
  /* The mid-grey "unavailable" chip is its own surface: white reads on it at
     5.18:1, the body text colour only at 3.18:1. Without this token .ptag.out
     inherits --on-warning, which is how darkening --on-warning for the amber
     discount badge silently broke the grey one next to it. */
  --on-muted:#FFFFFF;
  /* Amber is too light to carry white small text: white on --warning is
     3.37:1, under the 4.5:1 that .ptag (10.5px bold = small text) needs.
     Dark text on the same amber is 4.88:1. The deriver reaches the same
     answer on its own by picking whichever of white/--text reads better. */
  --on-warning:var(--text);

  /* Text ladder on the primary surface. Three roles; the -2/-3 steps exist
     only because the shipped design used near-identical tints for them and
     dropping the distinction would change live pixels. They are collapsed
     onto the three real roles by the deriver the moment a seed changes. */
  --on-inverse:#DCE6EE;
  --on-inverse-muted:#BFD3E4; --on-inverse-muted-2:#B9D0E4; --on-inverse-muted-3:#B7C9D8;
  --on-inverse-soft:#9FB6CA;  --on-inverse-soft-2:#8FA6B8;
  --info-on-inverse:#8FB4D4;
  --accent-on-inverse:#5CD48D;        /* decorative (icons) — 3:1 */
  --accent-on-inverse-text:#8FD9AC;   /* text/links — 4.5:1 */

  /* Space-separated channels for rgb(var(--x)/alpha). Shadows and gradient
     veils used to hardcode the navy's RGB, which is why changing --navy alone
     never actually re-themed the site. */
  --primary-rgb:15 60 107;
  --primary-deep-rgb:11 47 85;
  --accent-rgb:23 164 78;
  --surface-2-rgb:248 250 251;
  --on-primary-rgb:255 255 255;
  --shadow-rgb:var(--primary-rgb);   /* one source of truth: shadows are primary-tinted */

  /* Focus indicator. Not --accent: the ring is drawn OUTSIDE the element, so
     it lands on whatever the parent paints, and --accent is 2.97:1 on --bg and
     2.91:1 on --accent-surface — under the 3:1 that WCAG 1.4.11 asks of a
     focus indicator. --focus-ring is the same green nudged until it clears 3:1
     on all four light surfaces; it sits ΔE_ok 0.009 from the brand green,
     below the just-noticeable threshold, so nothing looks duller.
     One colour cannot serve both grounds (--focus-ring is 2.17:1 on the
     primary), hence the second token for chrome that sits on the brand. */
  --focus-ring:#11A14C;
  --focus-ring-inverse:#5CD48D;

  /* ---- WooCommerce bridge ----
     WooCommerce ships its own :root — --wc-primary is a purple (#720eec) and
     --wc-red a brick (#a00) — and its stylesheet paints real, visible things
     with them: the required-field asterisk, invalid field labels and borders,
     the cart's remove (×) link, the coupon error. The theme overrode a few of
     those by selector, but only inside its own .psp scope, so the plugin's own
     colours still surfaced in the cart drawer and at checkout, and none of it
     followed a theme change.
     main.css is enqueued after every WooCommerce stylesheet (verified in the
     rendered head), so a plain :root here wins on order without needing extra
     specificity. */
  --woocommerce:var(--primary);
  --wc-primary:var(--primary);
  --wc-primary-text:var(--on-primary);
  --wc-secondary:var(--surface-2);
  --wc-secondary-text:var(--text);
  --wc-highlight:var(--accent-text);
  --wc-highligh-text:var(--on-accent);   /* WooCommerce's own spelling */
  --wc-content-bg:var(--surface);
  --wc-subtext:var(--text-muted);
  --wc-green:var(--accent-text);
  --wc-red:var(--danger);
  --wc-destructive:var(--danger);
  --wc-orange:var(--warning);
  --wc-blue:var(--info);
  --wc-form-color-text:var(--text);
  --wc-form-color-background:var(--surface);
  --wc-form-border-color:var(--border);
  --wc-card-border-radius:var(--r);

  --font:'Vazirmatn',Tahoma,sans-serif;
  /* 1440px, not the old 1200px: measured live against Digikala (fluid up to
     1676px), Basalam and Modiseh (both a flat 1440px max-width) on 2026-09-09
     — 1200px left ~360px of dead margin per side on a 1920px screen while the
     3 reference sites sit at 240px (Basalam/Modiseh) to 122px (Digikala).
     1440px matches two of the three exactly and stays inside Digikala's
     range without going as dense as its layout. */
  --container:1440px; --r:10px;
  color-scheme:light;
}

*{box-sizing:border-box}
html{direction:rtl}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);
  font-size:15px;line-height:1.75;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
h1,h2,h3,h4{font-family:var(--font);font-weight:800;margin:0;text-wrap:balance}
p{margin:0}
.wrap{max-width:var(--container);margin-inline:auto;padding-inline:20px}
.tnum{font-variant-numeric:tabular-nums}
/* .screen-reader-text is WordPress core's and WooCommerce's name for the same
   thing. It was only ever styled here by whichever plugin stylesheet happened
   to be on the page (measured: woocommerce.css and block-library on the pages
   that load them), and style.css — which declared it — is never enqueued.
   Adopting it here is what makes emptying style.css safe. */
.sr-only,.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{
  outline:3px solid var(--focus-ring);outline-offset:2px;border-radius:4px}
/* Chrome painted on the brand surface: the light-surface ring is 2.17:1 there,
   which is a focus indicator you cannot see. */
.foot a:focus-visible,.foot button:focus-visible,
.card-navy a:focus-visible,.bulk a:focus-visible,
.pst-cta-card a:focus-visible,.shp-promise a:focus-visible,
.axis-on a:focus-visible,.nf a:focus-visible,.nf button:focus-visible,
.nf input:focus-visible{outline-color:var(--focus-ring-inverse)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- utility bar ---------- */
.ubar{background:var(--surface);border-bottom:1px solid var(--border-soft);font-size:12.5px;color:var(--text-muted)}
.ubar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:40px}
.ubar-group{display:flex;align-items:center;gap:22px}
.ubar-item{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.ubar-item svg{width:15px;height:15px;color:var(--text-soft);flex:none}
.ubar a:hover{color:var(--primary)}
.ubar .sep{width:1px;height:14px;background:var(--border)}

/* ---------- header ---------- */
.head{background:var(--surface)}
.head .wrap{display:flex;align-items:center;gap:28px;padding-block:14px}
.brand{display:flex;align-items:center;gap:10px;flex:none}
/* Scoped as `.brand .brand-logo` (0,2,0), not bare `.brand-logo` (0,1,0), on
   purpose. WooCommerce ships `.woocommerce img,.woocommerce-page img{height:
   auto;max-width:100%}` (woocommerce-layout.css) — a (0,1,1) rule keyed off a
   *body* class, so on every shop/product/product-taxonomy page it outranks any
   bare single-class rule that sizes an image, including the site chrome that
   has nothing to do with WooCommerce. Left unscoped, `height:46px` lost and the
   mark fell back to the SVG's intrinsic 284x319. Same reason for .fbrand-logo,
   .hero-bg and .bh-bg below — see findings.md. */
.brand .brand-logo{width:auto;height:46px;flex:none}
.brand-name{font-size:23px;font-weight:800;color:var(--primary);line-height:1.15;letter-spacing:-.02em;display:block}
.brand-name .bn-accent{color:var(--accent)}
.brand-tag{font-size:10.5px;color:var(--text-soft);margin-top:1px;line-height:1.4;display:block}
.head .search{flex:1;display:flex;height:44px;border:1.5px solid var(--border);border-radius:8px;overflow:hidden;background:var(--surface)}
.head .search select{border:none;background:var(--surface-2);font:inherit;font-size:12.5px;color:var(--text-muted);padding-inline:14px;border-inline-start:1px solid var(--border);cursor:pointer}
.head .search input{flex:1;border:none;background:transparent;font:inherit;font-size:13.5px;color:var(--text);padding-inline:14px;outline:none;min-width:0}
.head .search input::placeholder{color:var(--text-soft)}
.head .search .go{width:56px;background:var(--info);color:var(--on-info);display:grid;place-items:center;transition:background .16s}
.head .search .go:hover{background:var(--primary)}
.head .search .go svg{width:19px;height:19px}
.head-acts{display:flex;align-items:center;gap:20px;flex:none}
.hact{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;color:var(--text-muted);position:relative;min-width:44px;padding-block:2px}
.hact:hover{color:var(--primary)}
.hact svg{width:23px;height:23px}
.badge{position:absolute;top:-3px;inset-inline-start:6px;background:var(--accent-text);color:var(--on-accent);font-size:10px;font-weight:700;min-width:17px;height:17px;border-radius:9px;display:grid;place-items:center;padding-inline:4px}

/* ---------- cart dropdown (below icon) ---------- */
.hact-cart-wrap{position:relative}
.cart-dropdown{
  position:absolute;top:calc(100% + 10px);inset-inline-end:0;
  width:min(360px,92vw);max-height:440px;
  background:var(--surface);border-radius:var(--r);
  box-shadow:0 6px 32px rgb(var(--shadow-rgb)/.15);
  display:flex;flex-direction:column;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .2s ease,transform .2s ease,visibility .2s;
  z-index:100;
}
.cart-dropdown::before{
  content:'';position:absolute;top:-6px;
  inset-inline-end:calc(50% - 12px);
  width:12px;height:12px;background:var(--surface);
  transform:rotate(45deg);
  box-shadow:-2px -2px 4px rgb(var(--shadow-rgb)/.06);
  border-radius:2px 0 0 0;
}
.cart-dropdown.is-open{opacity:1;visibility:visible;transform:translateY(0)}
@media (prefers-reduced-motion:reduce){.cart-dropdown{transition:none}}

/* --- dropdown header --- */
.cd-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;border-bottom:1px solid var(--border-soft);flex:none
}
.cd-title{
  display:flex;align-items:center;gap:6px;
  font-size:14px;font-weight:800;color:var(--primary);margin:0
}
.cd-count{
  font-size:11px;font-weight:700;color:var(--text-muted);
  background:var(--surface-2);border-radius:10px;padding:2px 7px
}
.cd-close{
  width:28px;height:28px;border-radius:6px;display:grid;place-items:center;
  color:var(--text-muted);transition:background .15s,color .15s
}
.cd-close:hover{background:var(--surface-2);color:var(--primary)}
.cd-close svg{width:14px;height:14px}

/* --- item list --- */
.cd-items{overflow-y:auto;overscroll-behavior:contain;padding:0;max-height:260px}
.cd-list{list-style:none;margin:0;padding:0}
.cd-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 16px;border-bottom:1px solid var(--border-soft);
  transition:background .15s
}
.cd-item:hover{background:var(--surface-2)}
.cd-item-img{
  width:44px;height:44px;border-radius:6px;overflow:hidden;
  flex:none;background:var(--surface-2);display:grid;place-items:center
}
.cd-item-img img{width:100%;height:100%;object-fit:contain}
.cd-item-info{flex:1;min-width:0}
.cd-item-name{
  display:block;font-size:12px;font-weight:700;color:var(--text);
  line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.cd-item-name:hover{color:var(--primary)}
.cd-item-meta{display:block;font-size:11px;color:var(--text-muted);margin-top:1px}
.cd-item-unit{color:var(--text-soft)}
.cd-item-remove{
  width:28px;height:28px;border-radius:6px;display:grid;place-items:center;
  color:var(--text-soft);flex:none;transition:background .15s,color .15s
}
.cd-item-remove:hover{background:var(--danger-surface);color:var(--danger)}
.cd-item-remove svg{width:13px;height:13px}

/* --- empty state --- */
.cd-empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:32px 16px;color:var(--text-muted);text-align:center
}
.cd-empty svg{width:32px;height:32px;color:var(--border);margin-bottom:8px}
.cd-empty p{font-size:13px;margin:0}

/* --- footer --- */
.cd-foot{flex:none;border-top:1px solid var(--border-soft);padding:12px 16px}
.cd-subtotal{
  display:flex;align-items:center;justify-content:space-between;
  font-size:13px;color:var(--text);margin-bottom:10px
}
.cd-subtotal-val{font-weight:800;color:var(--primary);font-size:15px}
.cd-actions{display:flex;gap:8px}
.cd-btn-cart,.cd-btn-checkout{
  flex:1;display:flex;align-items:center;justify-content:center;
  min-height:36px;border-radius:6px;font-size:12px;font-weight:700;
  transition:background .16s,color .16s,text-decoration .16s
}
.cd-btn-cart{
  background:var(--surface);color:var(--primary);
  border:1.5px solid var(--border)
}
.cd-btn-cart:hover{background:var(--surface-2);border-color:var(--primary)}
.cd-btn-checkout{background:var(--accent-text);color:var(--on-accent)}
.cd-btn-checkout:hover{background:var(--accent-text-hover)}

/* --- button outlines (shared) --- */
.btn-outline{
  background:var(--surface);color:var(--primary);
  border:1.5px solid var(--border);border-radius:8px;
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 20px;font-size:13px;font-weight:700;
  transition:background .16s,border-color .16s
}
.btn-outline:hover{background:var(--surface-2);border-color:var(--primary)}

/* ---------- nav ----------
   Same surface as .head on purpose — Digikala and picnic-brand.com both run
   the categories/menu row on the identical white the logo row sits on, one
   continuous header block rather than a dark bar bolted under it. A hairline
   marks the seam between the two rows, and a slightly stronger one closes the
   block off from whatever page content follows. */
.nav{background:var(--surface);border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border)}
.nav .wrap{display:flex;align-items:stretch}
.nav-cats{display:flex;align-items:center;gap:9px;color:var(--primary);font-weight:700;font-size:13.5px;white-space:nowrap;min-height:46px}
.nav-cats svg{width:17px;height:17px}
.nav-div{width:1px;background:var(--border);margin-inline:22px;margin-block:12px}
.nav-links{display:flex;align-items:center;gap:26px;font-size:13.5px}
.nav-links ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:26px}
/* The signature move: an underline that sweeps in from the reading-start edge
   (right, in RTL) rather than a static border — a little more alive than
   Digikala's fixed underline or picnic's plain colour swap, while still
   reading as the same family of interaction. */
.nav-links a{position:relative;color:var(--text-muted);transition:color .16s;padding-block:14px;display:inline-block}
.nav-links a::after{content:'';position:absolute;inset-inline-start:0;bottom:10px;width:100%;height:2px;
  background:var(--accent-text);border-radius:1px;
  transform:scaleX(0);transform-origin:right;transition:transform .22s ease}
.nav-links a:hover,.nav-links a:focus-visible,.nav-links .current-menu-item>a{color:var(--primary)}
.nav-links a:hover::after,.nav-links a:focus-visible::after,.nav-links .current-menu-item>a::after{transform:scaleX(1)}

/* ---------- mega menu ----------
   The header is the only chrome on every page where both navigation axes are
   visible at once, so the two panels are deliberately not the same grid twice:
   products reads as a shelf list (columns of subcategories with counts),
   business types as a roster of venues (icon-led, grouped). Opening is pure
   CSS — :hover for pointers, :focus-within for keyboards — so every link is a
   real <a href> present in the initial HTML, per the SEO rules in
   docs/site-architecture.md §۴.
   ------------------------------------------------------------------------- */
.nav{position:relative;z-index:30}
.nav-panel{display:flex;align-items:stretch;flex:1;min-width:0}
.nav-cats-wrap{display:flex;align-items:center}
/* Each item fills the bar's full height so its bottom edge meets the panel's
   top edge exactly. With the default centred alignment the <li> is shorter
   than the bar, leaving a few dead pixels where the pointer is over neither
   the item nor the panel — the menu would close while the user was moving
   straight down into it. */
.nav-links>ul{align-items:stretch}
.nav-links>ul>li{display:flex;align-items:center}
/* Static so the panel resolves against .nav (full bleed), not against the
   item it hangs from. Applies to the categories control as well as menu items. */
.mega-parent{position:static}

/* The nav bar's own link/list rules (.nav-links a, .nav-links ul) carry one
   more class than a bare .mega-* class, so they win inside the panel too and
   would re-add the bar's muted colour, 14px padding-block and 26px list gap —
   plus, now, the top-level hover underline's ::after. These reset it at
   matching specificity; everything below is scoped under .mega to stay above
   them. */
.mega ul{display:block;gap:0;align-items:stretch}
.mega a{display:flex;padding-block:0;color:var(--text)}
.mega a::after{content:none}
.mega{position:absolute;top:100%;inset-inline:0;z-index:5;
  background:var(--surface);border-top:1px solid var(--border);
  box-shadow:0 14px 34px rgb(var(--shadow-rgb)/.14);
  padding-block:24px 20px;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s,transform .16s,visibility .16s}
.mega-parent:hover>.mega,
.mega-parent:focus-within>.mega{opacity:1;visibility:visible;transform:none}
.mega .wrap{display:block}
.mega .mega-n{font-size:10.5px;font-weight:700;color:var(--text-soft);
  background:var(--surface-2);border-radius:5px;padding:1px 6px;min-width:20px;text-align:center;flex:none}
.mega .mega-all{display:inline-flex;align-items:center;gap:6px;margin-top:18px;
  font-size:12.5px;font-weight:700;color:var(--info)}
.mega .mega-all:hover{color:var(--primary)}

/* products panel — a shelf list */
.mega-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.mega .mega-h{display:flex;align-items:center;gap:8px;padding-bottom:10px;
  border-bottom:1px solid var(--border);font-size:13.5px;font-weight:800;color:var(--primary)}
.mega .mega-h:hover{color:var(--info)}
.mega .mega-list{list-style:none;margin:10px 0 0;padding:0}
.mega .mega-list a{align-items:center;gap:8px;padding-block:7px;
  font-size:12.5px;color:var(--text-muted)}
.mega .mega-list a:hover{color:var(--primary)}
.mega .mega-soon{font-size:10.5px;font-weight:700;color:var(--text-soft);
  background:var(--surface-2);border-radius:5px;padding:1px 8px;flex:none}
/* An empty Phase-2 branch stays listed — "complete architecture, phased
   content" — but must never look as stocked as a Phase-1 one. */
.mega .mega-col.soon .mega-h{color:var(--text-muted);border-bottom-style:dashed}
/* The dashed rule and the «به‌زودی» badge carry the "not stocked yet" signal.
   The links themselves stay at --text-muted rather than the lighter
   --text-soft: these are real, clickable destinations, and --text-soft on
   white is about 2.9:1, under the 4.5:1 AA minimum for text this size. */
.mega .mega-col.soon .mega-list a{color:var(--text-muted)}

/* business-types panel — a roster of venues */
.mega-groups{display:grid;grid-template-columns:repeat(2,1fr);gap:30px}
.mega .mega-gl{display:block;padding-bottom:10px;margin-bottom:12px;
  border-bottom:1px solid var(--border);font-size:12px;font-weight:800;color:var(--primary)}
.mega-venues{display:grid;grid-template-columns:repeat(2,1fr);gap:6px 14px}
.mega .mega-v{align-items:center;gap:9px;padding:7px 8px;border-radius:8px;
  font-size:12.5px;color:var(--text);transition:background .16s}
.mega .mega-v:hover{background:var(--surface-2)}
.mega .mega-v-ic{width:28px;height:28px;border-radius:8px;background:var(--surface-2);
  display:grid;place-items:center;flex:none}
.mega .mega-v:hover .mega-v-ic{background:var(--accent-surface)}
.mega .mega-v-ic svg{width:15px;height:15px;color:var(--primary)}
.mega .mega-v-n{flex:1;min-width:0;font-weight:700}

/* mobile drawer toggle — dead without JS, so hidden until the script marks the
   document (same has-js convention the buy box already uses) */
.nav-toggle{display:none;align-items:center;gap:8px;color:var(--primary);font-weight:700;
  font-size:13.5px;min-height:46px;padding-inline:2px}
.nav-toggle svg{width:17px;height:17px}
.mega-tog{display:none}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--surface-2);overflow:hidden}
.hero .hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.hero-veil{position:absolute;inset:0;background:linear-gradient(270deg,var(--surface-2) 4%,rgb(var(--surface-2-rgb)/.94) 30%,rgb(var(--surface-2-rgb)/.55) 52%,rgb(var(--surface-2-rgb)/.05) 74%)}
.hero .wrap{position:relative;padding-block:56px 60px}
.hero-copy{max-width:560px}
.hero h1{font-size:clamp(26px,3.4vw,38px);color:var(--primary);line-height:1.42;letter-spacing:-.02em}
.hero h1 .g{color:var(--accent);display:block}
.hero-sub{margin-top:14px;font-size:15px;color:var(--text-muted)}
.hero-trust{display:flex;gap:26px;margin-top:26px;flex-wrap:wrap}
.ht{display:flex;align-items:flex-start;gap:9px}
.ht-ic{width:34px;height:34px;border-radius:8px;background:var(--surface);border:1px solid var(--border);display:grid;place-items:center;flex:none}
.ht-ic svg{width:17px;height:17px;color:var(--primary)}
.ht-t{font-size:12.5px;font-weight:700;line-height:1.4}
.ht-s{font-size:11px;color:var(--text-muted);line-height:1.4}
.hero-cta{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:700;font-size:14px;
  padding:13px 28px;border-radius:8px;min-height:46px;transition:filter .16s,transform .16s}
.btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn svg{width:18px;height:18px}
.btn-navy{background:var(--primary);color:var(--on-primary)}
.btn-green{background:var(--accent-text);color:var(--on-accent)}
.btn-ghost{background:transparent;color:var(--accent-text);border:1.5px solid var(--accent)}

/* ---------- category rail ---------- */
.crail{background:var(--surface);border-radius:var(--r);border:1px solid var(--border);margin-top:-30px;
  position:relative;z-index:2;display:grid;grid-template-columns:repeat(8,1fr);overflow:hidden}
.crail-i{display:flex;flex-direction:column;align-items:center;gap:8px;padding:20px 8px 18px;text-align:center;
  border-inline-start:1px solid var(--border-soft);transition:background .16s}
.crail-i:first-child{border-inline-start:none}
.crail-i:hover{background:var(--surface-2)}
.crail-i img{width:52px;height:52px;object-fit:contain}
.crail-ph{width:52px;height:52px;border-radius:50%;background:var(--surface-2);display:grid;place-items:center}
.crail-ph svg{width:24px;height:24px;color:var(--primary);opacity:.5}
.crail-n{font-size:12.5px;font-weight:700;line-height:1.35}
.crail-m{font-size:10.5px;color:var(--accent-text);font-weight:700}
.crail-i.soon .crail-m{color:var(--text-soft)}
.crail-i.soon img,.crail-i.soon .crail-ph{opacity:.45;filter:grayscale(.6)}

/* ---------- feature strip ---------- */
.fstrip{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);margin-top:18px;
  display:grid;grid-template-columns:repeat(6,1fr);overflow:hidden}
.fs-i{display:flex;align-items:center;gap:10px;padding:16px 14px;border-inline-start:1px solid var(--border-soft)}
.fs-i:first-child{border-inline-start:none}
.fs-ic{width:34px;height:34px;border-radius:50%;background:var(--surface-2);display:grid;place-items:center;flex:none}
.fs-ic svg{width:17px;height:17px;color:var(--primary)}
.fs-t{font-size:12.5px;font-weight:700;line-height:1.35}
.fs-s{font-size:10.5px;color:var(--text-muted);line-height:1.35}

/* ---------- sections ---------- */
.sec{padding-block:48px}
.sec-tight{padding-top:0}
.sec-h{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px}
.sec-h h2{font-size:20px;letter-spacing:-.01em}
.sec-more{font-size:12.5px;color:var(--info);font-weight:700;display:inline-flex;align-items:center;gap:5px}
.sec-more:hover{color:var(--primary)}

/* ---------- split ---------- */
.split{display:grid;grid-template-columns:1fr 1.12fr;gap:18px}
.card-navy{background:var(--primary);border-radius:var(--r);padding:30px;color:var(--on-primary);display:flex;flex-direction:column}
.card-navy h3{font-size:19px;margin-bottom:10px}
.card-navy .d{font-size:13px;color:var(--on-inverse-muted);line-height:1.85;margin-bottom:18px}
.clist{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-direction:column;gap:11px}
.clist li{display:flex;align-items:flex-start;gap:9px;font-size:13px}
.clist svg{width:17px;height:17px;color:var(--accent-on-inverse);flex:none;margin-top:4px}
.card-navy .btn{align-self:flex-start}
.card-navy-a{display:flex;gap:10px;flex-wrap:wrap;align-self:flex-start}
.card-light{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:30px;display:flex;flex-direction:column}
.card-light h3{font-size:19px;margin-bottom:10px;color:var(--primary)}
.card-light .d{font-size:13px;color:var(--text-muted);line-height:1.85;margin-bottom:24px;max-width:52ch}
.wgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:24px}
.wg{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.wg-ic{width:52px;height:52px;border-radius:12px;background:var(--surface-2);border:1px solid var(--border-soft);display:grid;place-items:center}
.wg-ic svg{width:24px;height:24px;color:var(--accent)}
.wg-t{font-size:11.5px;font-weight:700;line-height:1.45}
.card-light .btn{align-self:center}

/* ---------- products ---------- */
.pgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.pcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;transition:box-shadow .18s,transform .18s}
.pcard:hover{box-shadow:0 6px 20px rgb(var(--shadow-rgb)/.09);transform:translateY(-2px)}
.pmedia{aspect-ratio:1/1;background:var(--surface-2);position:relative;overflow:hidden;display:block}
.pmedia img{width:100%;height:100%;object-fit:contain;padding:12px}
.pmedia .pmedia-alt{position:absolute;inset:0;opacity:0;transition:opacity .2s ease}
.pmedia:hover .pmedia-alt{opacity:1}
.pmedia .noimg{width:100%;height:100%;display:grid;place-items:center}
.pmedia .noimg svg{width:38px;height:38px;color:var(--text-soft);opacity:.45}
.ptag{position:absolute;top:9px;inset-inline-start:9px;background:var(--warning);color:var(--on-warning);font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:5px;z-index:1}
.ptag.out{background:var(--text-soft);color:var(--on-muted)}
.pbody{padding:12px 13px 14px;display:flex;flex-direction:column;gap:4px;flex:1}
.pbrand{font-size:10.5px;color:var(--text-soft)}
.pname{font-size:12.5px;font-weight:700;line-height:1.6;min-height:40px}
.pmeta{font-size:10.5px;color:var(--text-muted)}
.prow{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:10px}
.pprice{font-size:13px;font-weight:800;color:var(--text);white-space:nowrap}
.pprice .woocommerce-Price-amount{font-weight:800}
.pprice del{display:none}
.padd{width:36px;height:36px;border-radius:8px;background:var(--primary);color:var(--on-primary);display:grid;place-items:center;flex:none;transition:background .16s}
.padd:hover{background:var(--accent)}
.padd svg{width:17px;height:17px}
.padd.added{background:var(--accent)}
/* WooCommerce's AJAX add-to-cart script injects a "View cart" link next to the
   button on success (.added_to_cart) — the card is icon-only by design and the
   header badge already confirms the add, so it would only crowd a tight row. */
.prow .added_to_cart{display:none}

/* ---------- brands ---------- */
.bgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.bcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);height:82px;
  display:grid;place-items:center;padding:14px;transition:border-color .16s}
.bcard:hover{border-color:var(--primary)}
.bcard img{max-height:44px;max-width:100%;width:auto;object-fit:contain}
.bcard .txt{font-weight:700;color:var(--text-muted);font-size:14px}
.bcard.pending{border-style:dashed;font-size:11.5px;color:var(--text-soft);text-align:center;line-height:1.5}

/* ---------- business types ---------- */
.biz{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.bz{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3.4;display:block}
.bz img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.bz:hover img{transform:scale(1.06)}
.bz-veil{position:absolute;inset:0;background:linear-gradient(to top,rgb(var(--primary-deep-rgb)/.92) 0%,rgb(var(--primary-deep-rgb)/.62) 42%,rgb(var(--primary-deep-rgb)/.18) 100%)}
.bz-txt{position:absolute;inset-inline:0;bottom:0;padding:14px 12px;text-align:center;color:var(--on-primary)}
.bz-ic{width:34px;height:34px;margin:0 auto 8px;border-radius:9px;background:rgb(var(--on-primary-rgb)/.16);display:grid;place-items:center}
.bz-ic svg{width:17px;height:17px;color:var(--on-primary)}
.bz-n{font-size:12.5px;font-weight:700;line-height:1.4;display:block}
.bz-m{font-size:10.5px;color:var(--on-inverse-muted-2);margin-top:3px;display:block}

/* ---------- articles ---------- */
.agrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.acard{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;transition:box-shadow .18s}
.acard:hover{box-shadow:0 6px 20px rgb(var(--shadow-rgb)/.09)}
.athumb{aspect-ratio:16/9;overflow:hidden;background:var(--surface-2)}
.athumb img{width:100%;height:100%;object-fit:cover}
.athumb .noimg{width:100%;height:100%;display:grid;place-items:center}
.athumb .noimg svg{width:30px;height:30px;color:var(--text-soft);opacity:.4}
.abody{padding:14px 15px 16px;display:flex;flex-direction:column;gap:8px;flex:1}
.atitle{font-size:13px;font-weight:700;line-height:1.7}
.adate{font-size:10.5px;color:var(--text-soft);margin-top:auto}

/* ==========================================================================
   Single blog post
   Reading-focused layout: generous type, generous measure, quiet chrome.
   The sidebar column (TOC, share, lead-gen card) is one sticky flex unit so
   it scrolls as a group on desktop. On narrow screens it drops below the
   title (see the 860px block) and lead-gen moves to a fixed bottom bar
   instead — same "carry the buyer's next step down the page" idea as the
   product page's .buybar, not a new pattern.
   ========================================================================== */

.pst{display:grid;grid-template-columns:220px 1fr;gap:36px;align-items:start}
.pst-col-side{position:sticky;top:24px;display:flex;flex-direction:column;gap:16px}
.pst-col-main{min-width:0}
.pst-head{margin-bottom:24px}

/* ---------- reading progress bar ---------- */
.pst-progress{position:fixed;top:0;inset-inline:0;height:3px;z-index:90;pointer-events:none}
.pst-progress-bar{height:100%;width:0%;background:linear-gradient(90deg,var(--primary),var(--accent));
  transition:width .12s linear}
@media (prefers-reduced-motion:reduce){.pst-progress-bar{transition:none}}

/* ---------- mobile sticky CTA — hidden on desktop, switched on at 860px
   (see that block) to match .buybar's own breakpoint on the product page ---------- */
.pst-mobile-cta{display:none}

/* ---------- category tags ---------- */
.pst-cats{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.pst-cat{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:4px 12px;
  background:var(--accent-surface);color:var(--accent-text);border-radius:999px;
  font-size:12px;font-weight:700;transition:background .16s}
.pst-cat:hover{background:var(--accent-surface-hover)}

.pst-head h1{font-size:clamp(22px,2.8vw,28px);font-weight:800;line-height:1.45;margin:0 0 14px;letter-spacing:-.015em}
.pst-meta{display:flex;align-items:center;gap:18px;font-size:12.5px;color:var(--text-soft);margin-bottom:18px;flex-wrap:wrap}
.pst-meta svg{width:14px;height:14px;vertical-align:-2px}
.pst-author a{color:var(--primary);font-weight:700}
.pst-reading,.pst-updated{color:var(--text-muted)}
.pst-img{border-radius:var(--r);overflow:hidden;margin-bottom:24px}
.pst-img img{width:100%;display:block}

/* ---------- table of contents ---------- */
.pst-toc details{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:18px 20px}
.pst-toc summary{cursor:pointer;font-size:13.5px;font-weight:800;color:var(--primary);list-style:none;
  display:flex;align-items:center;justify-content:space-between;gap:8px}
.pst-toc summary::-webkit-details-marker{display:none}
.pst-toc summary::after{content:"+";font-size:17px;color:var(--text-soft);flex:none;line-height:1}
.pst-toc details[open] summary::after{content:"−";color:var(--primary)}
.pst-toc ol{list-style:none;margin:14px 0 0;padding:0;border-top:1px solid var(--border-soft);padding-top:12px}
.pst-toc li{margin-bottom:6px}
.pst-toc li:last-child{margin-bottom:0}
.pst-toc a{display:block;font-size:12.5px;color:var(--text-muted);padding:4px 0;
  border-radius:4px;transition:color .16s;line-height:1.55}
.pst-toc a:hover{color:var(--primary)}
.pst-toc-lvl-3 a{padding-inline-start:16px;font-size:12px}

/* ---------- share row: Telegram + WhatsApp are how links actually travel
   in Iran (findings.md keyword/SEO research), not Facebook/X ---------- */
.pst-share{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:14px 16px}
.pst-share-label{display:block;font-size:11px;font-weight:700;color:var(--text-soft);margin-bottom:10px}
.pst-share-row{display:flex;gap:8px}
.pst-share-btn{width:38px;height:38px;border-radius:50%;background:var(--surface-2);
  border:1px solid var(--border);display:grid;place-items:center;color:var(--text-muted);
  transition:border-color .16s,color .16s;cursor:pointer;padding:0}
.pst-share-btn svg{width:17px;height:17px}
.pst-share-btn:hover{border-color:var(--primary);color:var(--primary)}
.pst-share-btn.is-copied{border-color:var(--accent);color:var(--accent-text)}

/* ---------- sidebar lead-gen card ---------- */
.pst-cta-card{background:var(--primary);border-radius:var(--r);padding:18px 16px;text-align:center}
.pst-cta-card h3{color:var(--on-primary);font-size:13px;font-weight:700;line-height:1.6;margin:0 0 14px}
/* .btn's default padding/gap/icon size (28px sides, 9px gap, 18px icon) is
   sized for full-width buttons — inside the 220px sidebar column there is
   not enough room left for the grouped phone digits on one line, so they
   wrapped. Tightened specifically for this narrow context. */
.pst-cta-card .pst-cta-phone{width:100%;padding-inline:8px;gap:6px;font-size:13px;white-space:nowrap}
.pst-cta-card .pst-cta-phone svg{width:16px;height:16px;flex:none}
.pst-cta-quote{display:block;margin-top:10px;font-size:12px;color:var(--on-inverse-soft);transition:color .16s}
.pst-cta-quote:hover{color:var(--on-primary)}

/* ---------- mid-article CTA (reuses .bulk, the same navy band used on
   category/business-type/wholesale pages) — nested inside .pst-body, so it
   needs explicit resets against .pst-body's own a/h2/p rules: equal
   specificity there is a real trap in this codebase (see findings.md's
   mega-menu CSS-specificity writeup), not a hypothetical one. ---------- */
.pst-body .pst-mid-cta{margin:40px 0}
.pst-body .pst-mid-cta .bulk-t h2{color:var(--on-primary);font-size:18px;margin:0 0 8px}
.pst-body .pst-mid-cta .bulk-t p{color:var(--on-inverse-muted);font-size:13px;line-height:1.85;margin:0;max-width:60ch}
.pst-body .pst-mid-cta a{text-decoration:none}
.pst-body .pst-mid-cta .btn-green{color:var(--on-accent)}
.pst-body .pst-mid-cta .btn-ghost-light{color:var(--on-primary)}

/* ---------- post body — generous typography for long reads ---------- */
.pst-body{font-size:16px;line-height:1.85;max-width:680px}
.pst-body p{margin:0 0 20px}
.pst-body h2{font-size:21px;font-weight:800;margin:36px 0 12px;color:var(--primary);line-height:1.45;
  letter-spacing:-.01em;scroll-margin-top:24px}
.pst-body h3{font-size:17px;font-weight:700;margin:28px 0 10px;color:var(--text);line-height:1.5;
  scroll-margin-top:24px}
.pst-body ul,.pst-body ol{margin:0 0 20px;padding-inline-start:22px}
.pst-body li{margin-bottom:8px;line-height:1.8}
.pst-body blockquote{margin:28px 0;padding:20px 24px;border-inline-start:4px solid var(--primary);
  background:var(--surface-2);border-radius:0 var(--r) var(--r) 0;
  font-size:15px;font-style:italic;color:var(--text-muted);line-height:1.85}
.pst-body blockquote p:last-child{margin-bottom:0}
.pst-body a{color:var(--info);text-decoration:underline;text-underline-offset:2px}
.pst-body a:hover{color:var(--primary)}
.pst-body img{border-radius:var(--r);margin:24px 0}
.pst-body figure{margin:24px 0}
.pst-body figure img{margin:0}
.pst-body figcaption{margin-top:8px;font-size:13px;line-height:1.7;color:var(--text-muted);text-align:start}
.pst-body table{width:100%;border-collapse:separate;border-spacing:0;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r);overflow:hidden;margin:24px 0}
.pst-body th,.pst-body td{text-align:start;padding:12px 16px;font-size:13px}
.pst-body th{background:var(--surface-2);font-weight:700;color:var(--text-muted)}
.pst-body tr+tr th,.pst-body tr+tr td{border-top:1px solid var(--border-soft)}

/* ---------- author box ---------- */
.pst-author-box{display:flex;gap:16px;align-items:flex-start;margin-top:40px;padding:22px 24px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r)}
.pst-author-avatar{flex:none}
.pst-author-avatar img{border-radius:50%;width:64px;height:64px}
.pst-author-label{display:block;font-size:11px;font-weight:700;color:var(--text-soft);
  text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px}
.pst-author-info h3{font-size:16px;font-weight:800;margin:0 0 6px}
.pst-author-info h3 a{color:var(--primary)}
.pst-author-info h3 a:hover{color:var(--info)}
.pst-author-info p{font-size:13px;color:var(--text-muted);margin:0;line-height:1.85;max-width:60ch}

/* ---------- related articles ---------- */
.pst-related{margin-top:48px;padding-top:32px;border-top:1px solid var(--border)}
.pst-related h2{font-size:19px;color:var(--primary);letter-spacing:-.01em;margin-bottom:18px}
.pst-related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pst-related-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  overflow:hidden;transition:border-color .16s,box-shadow .18s}
.pst-related-card:hover{border-color:var(--primary);box-shadow:0 4px 16px rgb(var(--shadow-rgb)/.08)}
.pst-related-img{aspect-ratio:16/9;overflow:hidden;background:var(--surface-2)}
.pst-related-img img{width:100%;height:100%;object-fit:cover;transition:transform .24s}
.pst-related-card:hover .pst-related-img img{transform:scale(1.03)}
.pst-related-body{padding:14px 16px 16px}
.pst-related-date{display:block;font-size:11px;color:var(--text-soft);margin-bottom:6px}
.pst-related-body h3{font-size:14px;font-weight:700;line-height:1.55;margin:0;color:var(--text)}
.pst-related-card:hover .pst-related-body h3{color:var(--primary)}

/* ---------- promise ---------- */
.promise{background:var(--accent-surface);border-block:1px solid var(--border-soft)}
.promise .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding-block:26px}
.pm{display:flex;align-items:center;gap:12px}
.pm-ic{width:46px;height:46px;border-radius:50%;background:var(--surface);display:grid;place-items:center;flex:none;border:1px solid var(--border-soft)}
.pm-ic svg{width:22px;height:22px;color:var(--accent)}
.pm-t{font-size:13px;font-weight:700;line-height:1.4}
.pm-s{font-size:11px;color:var(--text-muted);line-height:1.4}

/* ---------- footer ---------- */
.foot{background:var(--primary-deep);color:var(--on-inverse-muted-3)}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr 1.25fr;gap:28px;padding-block:44px 32px}
.foot h4{color:var(--on-primary);font-size:14px;margin-bottom:16px}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.foot a{font-size:12.5px;transition:color .16s}
.foot a:hover{color:var(--on-primary)}
.fbrand{display:flex;align-items:center;gap:9px;margin-bottom:12px}
.fbrand .fbrand-logo{width:auto;height:38px;flex:none}
.fbrand .n{font-size:19px;font-weight:800;color:var(--on-primary)}
.fdesc{font-size:12.5px;line-height:1.9;max-width:30ch;margin-bottom:18px}
.fsoc{display:flex;gap:9px}
.fsoc a{width:34px;height:34px;border-radius:8px;border:1px solid rgb(var(--on-primary-rgb)/.16);display:grid;place-items:center;transition:background .16s,border-color .16s}
.fsoc a:hover{background:rgb(var(--on-primary-rgb)/.1);border-color:rgb(var(--on-primary-rgb)/.32)}
.fsoc svg{width:16px;height:16px}
.fcontact{display:flex;flex-direction:column;gap:12px}
.fc{display:flex;align-items:flex-start;gap:9px;font-size:12.5px;line-height:1.7}
.fc svg{width:15px;height:15px;flex:none;margin-top:5px;opacity:.7}
.fbadge{border:1px dashed rgb(var(--on-primary-rgb)/.22);border-radius:8px;padding:14px;text-align:center;font-size:10.5px;line-height:1.65;color:var(--on-inverse-soft-2);margin-top:16px}
.fbadge svg{width:26px;height:26px;margin:0 auto 7px;opacity:.55}
.foot-bot{border-top:1px solid rgb(var(--on-primary-rgb)/.09);padding-block:15px;font-size:11.5px;text-align:center;color:var(--on-inverse-soft-2)}

/* ---------- breadcrumbs (inner pages) ---------- */
.pt-breadcrumbs{padding-block:14px;font-size:12.5px;color:var(--text-muted)}
.pt-breadcrumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.pt-breadcrumbs li:not(:last-child)::after{content:"‹";margin-inline-start:8px;color:var(--text-soft)}
.pt-breadcrumbs a:hover{color:var(--primary)}
.pt-main{padding-block:32px 56px}

/* ==========================================================================
   Product category archive
   The spec board is this page's one bold element; everything around it stays
   quiet. Its rows align into a fixed label column on purpose — that alignment
   is what makes it read as a spec sheet rather than a tag cloud.
   ========================================================================== */

.cat{padding-bottom:56px}

/* ---------- category header ---------- */
.cat-head{background:var(--surface);border-bottom:1px solid var(--border);padding-block:24px 26px;margin-bottom:26px}
.cat-id{display:flex;align-items:center;gap:14px}
.cat-ic{width:52px;height:52px;border-radius:12px;background:var(--surface-2);border:1px solid var(--border-soft);display:grid;place-items:center;flex:none}
.cat-ic img{width:40px;height:40px;object-fit:contain}
.cat-head h1{font-size:clamp(21px,2.4vw,26px);color:var(--primary);letter-spacing:-.02em;line-height:1.35}
.cat-count{font-size:12.5px;color:var(--text-muted);margin-top:3px}
.cat-intro{margin-top:14px;max-width:74ch;font-size:13.5px;color:var(--text-muted);line-height:1.95}
.cat-intro p{margin:0 0 8px}
.cat-intro p:last-child{margin-bottom:0}
.cat-subs{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.cat-sub{display:inline-flex;align-items:center;gap:7px;background:var(--surface-2);border:1px solid var(--border);
  border-radius:999px;padding:7px 14px;font-size:12.5px;font-weight:700;color:var(--text);transition:border-color .16s,color .16s}
.cat-sub:hover{border-color:var(--primary);color:var(--primary)}
.cat-sub span{font-size:11px;font-weight:700;color:var(--text-soft)}
.cat-sub.soon{color:var(--text-soft);border-style:dashed}

/* ---------- spec board (signature) ---------- */
.board{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  padding:20px 22px 8px;margin-bottom:20px}
.board-h{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}
.board-h h2{font-size:15px;color:var(--primary);letter-spacing:-.01em;font-weight:800}
.board-clear{font-size:12px;font-weight:700;color:var(--info)}
.board-clear:hover{color:var(--primary)}
.facet{display:grid;grid-template-columns:104px 1fr;gap:16px;align-items:baseline;
  padding-block:12px;border-top:1px solid var(--border-soft)}
.facet-l{font-size:12.5px;font-weight:700;color:var(--text-muted);padding-top:5px}
.facet-v{display:flex;flex-wrap:wrap;gap:8px}
.pill{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:5px 12px;
  border:1px solid var(--border);border-radius:7px;background:var(--surface);
  font-size:12.5px;font-weight:700;color:var(--text);transition:border-color .16s,background .16s,color .16s}
.pill:hover{border-color:var(--primary);background:var(--surface-2)}
.pill-n{font-size:10.5px;font-weight:700;color:var(--text-soft);background:var(--surface-2);
  border-radius:5px;padding:1px 6px;min-width:20px;text-align:center}
.pill.on{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.pill.on:hover{background:var(--primary-deep)}
.pill.on .pill-n{background:rgb(var(--on-primary-rgb)/.18);color:var(--on-primary)}
.chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-block:14px;border-top:1px solid var(--border-soft)}
.chips-l{font-size:12px;color:var(--text-muted)}
.chip{display:inline-flex;align-items:center;gap:8px;min-height:30px;padding:4px 11px;border-radius:999px;
  background:var(--accent-surface);color:var(--accent-text);font-size:12px;font-weight:700;transition:background .16s}
.chip:hover{background:var(--accent-surface-hover)}
.chip span[aria-hidden]{font-size:14px;line-height:1;opacity:.7}

/* ---------- results toolbar ---------- */
.cat-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.cat-bar-n{font-size:12.5px;color:var(--text-muted)}
.woocommerce-ordering{margin:0}
.woocommerce-ordering select{font:inherit;font-size:12.5px;font-weight:700;color:var(--text);
  background:var(--surface);border:1px solid var(--border);border-radius:7px;padding:8px 12px;min-height:38px;cursor:pointer}
.woocommerce-ordering select:hover{border-color:var(--primary)}

/* ---------- product grid (spec-led cards) ---------- */
.pgrid.pgrid-cat{grid-template-columns:repeat(4,1fr)}
.pspec{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:4px}
.pspec li{font-size:10.5px;color:var(--text-muted);background:var(--surface-2);
  border:1px solid var(--border-soft);border-radius:5px;padding:2px 7px;line-height:1.6}

/* ---------- pagination ---------- */
.pt-pager{margin-top:28px}
/* .nav-links is reused here from the site nav bar for the flex-row layout
   only — WordPress's own pagination markup nests .page-numbers links inside
   a div.nav-links. The nav bar's hover underline (::after) is not wanted on
   pager buttons, which already carry their own hover treatment below. */
.pt-pager .nav-links{display:flex;justify-content:center;gap:8px;background:none}
.pt-pager .nav-links a::after{content:none}
.pt-pager .page-numbers{min-width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;
  padding-inline:12px;border:1px solid var(--border);border-radius:7px;background:var(--surface);
  font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--text);transition:border-color .16s,color .16s}
.pt-pager .page-numbers:hover{border-color:var(--primary);color:var(--primary)}
.pt-pager .page-numbers.current{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.pt-pager .page-numbers.dots{border:none;background:none}
.pt-pager .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- blog listing ---------- */
.blog-listing .bh{margin-bottom:28px}
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.blog-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;
  transition:border-color .16s,box-shadow .16s}
.blog-card:hover{border-color:var(--primary);box-shadow:0 4px 16px rgb(var(--shadow-rgb)/.08)}
.blog-card-img{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--surface-2)}
.blog-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .24s}
.blog-card:hover .blog-card-img img{transform:scale(1.03)}
.blog-card-body{padding:18px 20px 20px}
.blog-card-meta{display:flex;align-items:center;gap:12px;font-size:11.5px;color:var(--text-soft);margin-bottom:8px}
.blog-card-cat a{color:var(--info);text-decoration:none;font-weight:600}
.blog-card-cat a:hover{text-decoration:underline}
.blog-card h2{font-size:16px;font-weight:700;line-height:1.55;margin:0 0 8px}
.blog-card h2 a{color:var(--primary);text-decoration:none}
.blog-card h2 a:hover{text-decoration:underline}
.blog-card-excerpt{font-size:13.5px;line-height:1.85;color:var(--text-soft);margin:0}
.blog-card-reading{display:inline-flex;align-items:center;gap:4px}

/* ---------- empty state ---------- */
.cat-empty{background:var(--surface);border:1px dashed var(--border);border-radius:var(--r);
  padding:44px 24px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px}
.cat-empty p{font-size:14px;color:var(--text-muted)}

/* ---------- search results ---------- */
.sresults{display:flex;flex-direction:column;gap:2px}
.sresult{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;
  transition:border-color .16s,box-shadow .16s}
.sresult:hover{border-color:var(--primary);box-shadow:0 4px 16px rgb(var(--shadow-rgb)/.08)}
.sresult-link{display:flex;gap:20px;padding:20px 22px;text-decoration:none;color:inherit}
.sresult-thumb{flex:none;width:80px;height:80px;border-radius:8px;overflow:hidden;background:var(--surface-2)}
.sresult-thumb img{width:100%;height:100%;object-fit:cover}
.sresult-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.sresult-type{display:inline-block;font-size:10.5px;font-weight:700;color:var(--info);
  background:var(--accent-surface);border-radius:5px;padding:1px 8px;align-self:flex-start;margin-bottom:2px}
.sresult-title{font-size:15px;font-weight:700;color:var(--primary);margin:0;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sresult-excerpt{font-size:13px;color:var(--text-muted);margin:0;line-height:1.7;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (max-width:640px){
  .sresult-link{flex-direction:column;gap:12px}
  .sresult-thumb{width:100%;height:160px}
}

/* ==========================================================================
   Buying guide — reusable on category, business-type, and blog pages.
   Each card is a self-contained Q&A: the question is the heading, the answer
   is short enough to scan but specific enough to act on.
   ========================================================================== */

.guide{margin-top:48px}
.guide h2{font-size:19px;color:var(--primary);letter-spacing:-.01em;margin-bottom:18px}
.guide-g{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.guide-i{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  padding:20px 22px;transition:border-color .16s,box-shadow .18s}
.guide-i:hover{border-color:var(--primary);box-shadow:0 4px 14px rgb(var(--shadow-rgb)/.06)}
.guide-i h3{font-size:14px;font-weight:800;color:var(--primary);margin-bottom:8px;line-height:1.6}
.guide-i p{font-size:13px;color:var(--text-muted);line-height:1.95;margin:0}

/* ---------- business-type guide only: checklist marks ----------
   Filled green = in PakTamin's catalog today (card carries a link).
   Empty outline = a real requirement PakTamin doesn't sell — named, not hidden.
   Scoped to .biz-page so the shared .guide-i keeps its plain Q&A look on
   category and blog pages, where this in-catalog/not-in-catalog split
   doesn't apply. */
.biz-page .guide-i h3{display:flex;align-items:flex-start;gap:9px;margin-bottom:10px}
.guide-mark{flex:none;width:19px;height:19px;border-radius:50%;display:grid;place-items:center;margin-top:2px}
.guide-mark svg{width:10px;height:10px}
.guide-mark.in{background:var(--accent-text);color:var(--on-accent)}
.guide-mark.out{border:1.5px solid var(--border)}
.guide-link{display:inline-flex;align-items:center;gap:4px;margin-top:12px;font-size:12.5px;
  font-weight:700;color:var(--primary);text-decoration:none}
.guide-link svg{width:11px;height:11px;transform:scaleX(-1)}
.guide-link:hover{text-decoration:underline;text-underline-offset:2px}

/* ---------- business-type guide: vertical flow, not the 3-col .guide-g grid
   used on category/blog pages — each item can carry its own product grid
   underneath, so a fixed-width grid cell would cramp it. ---------- */
.guide-flow .guide-i{margin-bottom:14px}
.guide-flow .guide-i:last-child{margin-bottom:0}
.guide-i .pgrid{margin-top:14px}

/* ---------- mid-page CTA on business-type pages: the .bulk band, spliced
   after the guide checklist so a reader who never scrolls to the bottom
   still sees the same offer once ---------- */
.mid-bulk{margin-bottom:48px}

/* ---------- leftover shelves: whatever the guide checklist didn't happen to
   name, grouped by top-level category, so nothing goes missing just because
   the editorial content didn't mention it ---------- */
.shelf-rest{margin-top:48px}
.shelf-rest h2{font-size:19px;color:var(--primary);letter-spacing:-.01em;margin-bottom:18px}
.shelf-rest-g{margin-bottom:28px}
.shelf-rest-g:last-child{margin-bottom:0}
.shelf-rest-n{font-size:13px;font-weight:700;color:var(--text-muted);margin-bottom:12px}

.cat-biz{padding-top:48px}

/* ==========================================================================
   FAQ — accordion pattern reused across category, business-type, FAQ page,
   and shipping page. The open/close indicator rotates for clear affordance.
   ========================================================================== */

.faq{margin-top:48px}
.faq h2{font-size:19px;color:var(--primary);letter-spacing:-.01em;margin-bottom:16px}
.faq-i{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);margin-bottom:8px;
  transition:border-color .16s}
.faq-i[open]{border-color:var(--primary)}
.faq-i summary{cursor:pointer;list-style:none;padding:16px 20px;font-size:13.5px;font-weight:700;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  transition:color .16s}
.faq-i summary:hover{color:var(--primary)}
.faq-i summary::-webkit-details-marker{display:none}
.faq-i summary::after{content:"+";font-size:19px;font-weight:400;color:var(--text-soft);flex:none;line-height:1;
  transition:transform .2s,color .2s}
.faq-i[open] summary::after{content:"−";color:var(--primary);transform:rotate(0deg)}
.faq-i[open] summary{border-bottom:1px solid var(--border-soft)}
.faq-i p{padding:14px 20px 18px;font-size:13px;color:var(--text-muted);line-height:1.95;margin:0}

/* ---------- bulk order band ---------- */
.bulk{margin-top:48px;background:var(--primary);border-radius:var(--r);padding:28px 32px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  position:relative;overflow:hidden}
.bulk::before{content:"";position:absolute;top:-30px;inset-inline-end:-30px;width:120px;height:120px;
  border-radius:50%;background:rgb(var(--on-primary-rgb)/.04)}
.bulk-t h2{font-size:18px;color:var(--on-primary);margin-bottom:8px}
.bulk-t p{font-size:13px;color:var(--on-inverse-muted);line-height:1.85;max-width:60ch}
.bulk-t p a{color:var(--on-primary);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.bulk-a{display:flex;gap:12px;flex-wrap:wrap;flex:none}
.btn-ghost-light{color:var(--on-primary);border-color:rgb(var(--on-primary-rgb)/.4)}
.btn-ghost-light:hover{border-color:var(--on-primary)}

/* ==========================================================================
   Business-type page
   A business_type term is fed from several product categories at once, so
   there is no single spec board to build (see taxonomy-business_type.php).
   The structural device here is the "shelf": products grouped by top-level
   category, ordered by how many of the term's products actually fall in
   each — the count is the signature, not a decoration.
   ========================================================================== */

.biz-page{padding-bottom:56px}

/* ---------- header: photo banner when available, quiet card when not ---------- */
.bh{position:relative;overflow:hidden;background:var(--surface);border-bottom:1px solid var(--border);margin-bottom:32px}
.bh .bh-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bh-veil{position:absolute;inset:0;background:linear-gradient(to top,var(--primary-deep) 0%,rgb(var(--primary-deep-rgb)/.86) 46%,rgb(var(--primary-deep-rgb)/.5) 100%)}
.bh-in{position:relative;padding-block:40px 32px;text-align:center;display:flex;flex-direction:column;align-items:center}
.bh-ic{width:56px;height:56px;border-radius:14px;background:var(--surface-2);border:1px solid var(--border-soft);
  display:grid;place-items:center;margin-bottom:16px}
.bh-ic svg{width:27px;height:27px;color:var(--primary)}
.bh h1{font-size:clamp(22px,2.6vw,28px);color:var(--primary);letter-spacing:-.01em}
.bh-desc{margin-top:10px;font-size:13.5px;color:var(--text-muted);max-width:60ch;line-height:1.9}
.bh-count{margin-top:14px;font-size:12.5px;font-weight:700;color:var(--accent-text);background:var(--accent-surface);
  border-radius:999px;padding:6px 16px}
.bh.has-img{padding-block:0}
.bh.has-img .bh-ic{background:rgb(var(--on-primary-rgb)/.14);border-color:rgb(var(--on-primary-rgb)/.22)}
.bh.has-img .bh-ic svg{color:var(--on-primary)}
.bh.has-img h1{color:var(--on-primary)}
.bh.has-img .bh-desc{color:var(--on-inverse)}
.bh.has-img .bh-count{background:rgb(var(--on-primary-rgb)/.14);color:var(--on-primary)}
.bh.has-img .bh-in{padding-block:68px 34px}

/* ---------- shelves ---------- */
.shelf{margin-top:8px;padding-top:36px;border-top:1px solid var(--border-soft)}
.shelf:first-child{margin-top:0;padding-top:0;border-top:none}
.shelf-h{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:18px}
.shelf-h h2{font-size:18px;color:var(--primary);letter-spacing:-.01em;font-weight:800}
.shelf-n{margin-top:5px;font-size:12px;color:var(--text-muted)}
.shelf-all{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--info);
  flex:none;white-space:nowrap}
.shelf-all:hover{color:var(--primary)}
.shelf-all svg{width:15px;height:15px;transform:rotate(90deg)}

/* ---------- other business types ---------- */
.obiz{margin-top:40px;padding-top:24px;border-top:1px solid var(--border-soft);
  display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.obiz-l{font-size:12.5px;color:var(--text-muted);font-weight:700}
.obiz-i{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:5px 14px;
  background:var(--surface);border:1px solid var(--border);border-radius:999px;
  font-size:12px;font-weight:700;color:var(--text);transition:border-color .16s,color .16s}
.obiz-i:hover{border-color:var(--primary);color:var(--primary)}
.obiz-i svg{width:14px;height:14px;color:var(--text-soft)}

/* ==========================================================================
   Single product
   Image right, identity centre, buy box left — the arrangement Iranian buyers
   already know. The buy box is the one place that departs from it, because a
   purchasing buyer orders in cartons and no consumer store accounts for that.
   ========================================================================== */

.prod{padding-block:24px 56px}
/* minmax(0,…) on the middle track, not a bare 1fr. A bare fr keeps an auto
   min-content floor, and .prod-info's floor is its longest unbreakable spec
   chip («۱۰۵×۲۵۰×۱۲۰ میلی‌متر»). Between roughly 885px and 1080px that floor
   exceeded the track, so the whole grid overflowed by ~14px: the page grew a
   horizontal scrollbar and the buy box was cut off at the left edge. Measured
   on ddev at 900px — and confirmed pre-existing, with the gallery removed
   entirely, before being fixed here. */
.prod-top{display:grid;grid-template-columns:400px minmax(0,1fr) 300px;gap:28px;align-items:start}
.prod-info{min-width:0}

/* ---------- gallery ----------
   Stage + rail + hover magnifier + full-screen viewer, to the pattern a
   buyer already knows from Digikala: thumbnails UNDER the stage (a vertical
   rail would eat a quarter of a 400px column), RTL order, click to enlarge.

   Two structural notes that are easy to undo by accident:
   - The stage is one grid cell with every slide stacked in it. That is what
     makes the cross-fade possible without a translateX() carousel, which is
     the thing that goes wrong in RTL. Below 860px the SAME element becomes a
     native scroll-snap strip, so the swipe is the browser's own.
   - .pgal-zoom is inset by exactly the stage padding, so its object-fit
     contain box is identical to the slide's. Change one padding and the
     magnifier stops lining up with what it is magnifying.
   ------------------------------------------------------------------------ */

.prod-media{--pgal-pad:20px;position:sticky;top:20px}
.pgal-stage{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  padding:var(--pgal-pad);aspect-ratio:1/1;position:relative;overflow:hidden}
.pgal-stage.is-clickable{cursor:zoom-in}

.pgal-track{display:grid;width:100%;height:100%}
.pgal-slide{grid-area:1/1;margin:0;min-width:0;display:grid;place-items:center;
  opacity:0;visibility:hidden;transition:opacity .22s ease}
.pgal-slide.is-on{opacity:1;visibility:visible}
.pgal-slide img{width:100%;height:100%;object-fit:contain}

/* Without JS nothing ever adds .is-on beyond the one PHP printed, so the page
   shows the featured image and nothing is broken — the same behaviour it had
   before the gallery existed. .pgal-ready appears once the script takes over. */

/* Magnifier. Hidden and inert until a fine pointer is actually over the stage;
   its <img> carries no src until then, so a phone never downloads it. */
.pgal-zoom{position:absolute;inset:var(--pgal-pad);overflow:hidden;
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .16s ease;
  background:var(--surface)}
.pgal-zoom img{width:100%;height:100%;object-fit:contain;transform-origin:center;
  will-change:transform}
.pgal.is-zooming .pgal-zoom{opacity:1;visibility:visible}

/* Chrome over the stage. All three sit above the zoom layer so the enlarge
   button stays clickable while the magnifier is showing. */
.pgal-open,.pgal-count{position:absolute;z-index:2}
.pgal-open{inset-block-start:10px;inset-inline-start:10px;width:34px;height:34px;
  display:none;place-items:center;border:1px solid var(--border);border-radius:9px;
  background:rgb(255 255 255/.92);color:var(--text-muted);cursor:pointer;
  transition:color .15s ease,border-color .15s ease}
.has-js .pgal-ready .pgal-open{display:grid}
.pgal-open svg{width:16px;height:16px}
.pgal-open:hover{color:var(--primary);border-color:var(--primary)}

/* Gated on .pgal-ready for the same reason .buy-unit is: without the script
   the rail's buttons do nothing and the counter promises five photos the page
   can only show one of. A dead control is worse than an absent one, so with no
   JS this degrades to exactly what the page was before the gallery existed —
   the featured photo, alone, and honest about it. */
.pgal-thumbs,.pgal-count{display:none}
.has-js .pgal-ready .pgal-thumbs{display:flex}
.has-js .pgal-ready .pgal-count{display:inline-flex}

.pgal-count{inset-block-end:10px;inset-inline-start:10px;align-items:center;
  gap:5px;font-size:11.5px;font-weight:700;color:var(--text-muted);
  background:rgb(255 255 255/.92);border:1px solid var(--border);border-radius:999px;
  padding:4px 9px}
.pgal-count svg{width:13px;height:13px;opacity:.7}
.pgal-count-sep{opacity:.5}

/* A photo with no detail left to reveal offers no magnifier, so it must not
   advertise one either: the cursor drops back to a plain pointer, which still
   reads as "this opens" without promising magnification. The stage carries no
   written hint — the zoom-in cursor is the whole affordance, so nothing has to
   be translated, positioned against the counter pill, or hidden again on the
   breakpoints where it would not fit. */
.pgal.pgal-nozoom .pgal-stage.is-clickable{cursor:pointer}

/* Thumbnail rail. It wraps rather than scrolls: five 54px thumbs plus their
   gaps come to 302px inside the 300px column this page uses between 1080px and
   860px, which is exactly enough overflow to grow a permanent scrollbar under
   five thumbnails — and to hide the fifth one behind it. Wrapping to a second
   row costs a little height on a product with many photos and never hides one. */
.pgal-thumbs{list-style:none;margin:10px 0 0;padding:0;flex-wrap:wrap;gap:8px}
.pgal-thumb{flex:0 0 auto;width:62px;height:62px;padding:4px;cursor:pointer;
  background:var(--surface);border:1px solid var(--border);border-radius:9px;
  transition:border-color .15s ease,box-shadow .15s ease}
.pgal-thumb img{width:100%;height:100%;object-fit:contain;display:block}
.pgal-thumb:hover{border-color:var(--primary)}
.pgal-thumb.is-on{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary)}

.prod-media .noimg{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r);aspect-ratio:1/1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  color:var(--text-soft);font-size:12px;text-align:center}
.prod-media .noimg svg{width:54px;height:54px;opacity:.35}

/* ---------- gallery: full-screen viewer ----------
   <dialog> + showModal() carries the focus trap, the Esc key, the inert
   background and the top layer. Everything here is presentation only. */
/* minmax(0,1fr), never a bare 1fr: a bare fr track carries an automatic
   min-content floor, so a 900px-tall photo makes the middle row 900px tall,
   the dialog outgrows the viewport, the page scrolls behind it and the
   thumbnail strip is pushed off the bottom of the screen. */
.pgal-lb{--lb-gutter:68px;
  width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;padding:0;
  border:0;background:rgb(var(--primary-deep-rgb)/.97);color:var(--on-primary);
  display:none;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden}
.pgal-lb[open]{display:grid}
.pgal-lb::backdrop{background:rgb(var(--primary-deep-rgb)/.97)}
html.pgal-locked{overflow:hidden}

.pgal-lb-bar{display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;gap:12px}
.pgal-lb-n{font-size:12.5px;font-weight:700;color:var(--on-inverse-muted)}
.pgal-lb-x{width:38px;height:38px;display:grid;place-items:center;cursor:pointer;
  border:1px solid rgb(var(--on-primary-rgb)/.22);border-radius:10px;
  background:rgb(var(--on-primary-rgb)/.06);color:var(--on-primary);
  transition:background .15s ease}
.pgal-lb-x:hover{background:rgb(var(--on-primary-rgb)/.15)}
.pgal-lb-x svg{width:18px;height:18px}

.pgal-lb-view{position:relative;min-height:0;min-width:0}
/* Absolutely positioned, not a centred grid item, and this is not a style
   preference. Inside a minmax(0,1fr) track a percentage max-height has no
   definite basis to resolve against, so `max-height:100%` silently does
   nothing: a 675x900 photo stayed 900px tall in a 748px row and lost its
   bottom 152px to overflow:hidden — a clipped product photo that still looked
   plausible in a screenshot. inset gives the image a definite containing
   block, so the percentages resolve and margin:auto centres what is left.

   The gutter is subtracted from max-width and NOT written as an inline inset,
   which looks like it would do the same job and does not: on an absolutely
   positioned *replaced* element, left/right never shrink the box — the used
   width comes from the intrinsic size clamped by max-width, and max-width:100%
   resolves against the whole containing block. inset:0 68px therefore left the
   photo at its full width and pushed it 54px off the left edge of a phone
   screen (margin resolved to -108px), while looking correct on a desktop where
   the width was not the binding constraint. */
.pgal-lb-view img{position:absolute;inset:0;margin:auto;
  max-width:calc(100% - var(--lb-gutter) * 2);max-height:100%;width:auto;height:auto;
  object-fit:contain;background:var(--surface);border-radius:var(--r)}

.pgal-lb-nav{position:absolute;inset-block-start:50%;translate:0 -50%;
  width:44px;height:44px;display:grid;place-items:center;cursor:pointer;
  border:1px solid rgb(var(--on-primary-rgb)/.22);border-radius:50%;
  background:rgb(var(--on-primary-rgb)/.10);color:var(--on-primary);
  transition:background .15s ease}
.pgal-lb-nav:hover{background:rgb(var(--on-primary-rgb)/.22)}
.pgal-lb-nav svg{width:20px;height:20px}
/* Sides and arrowheads both follow the flow, not the array. Photos run
   right-to-left, so "next" is the one further LEFT and its chevron points
   left; "previous" sits on the RIGHT and points right. In RTL inline-start
   IS the right edge — writing the obvious-looking inset-inline-end on .prev
   puts both buttons on the wrong side AND makes each point away from where
   it goes. */
.pgal-lb-prev{inset-inline-start:16px}
.pgal-lb-prev svg{transform:scaleX(-1)}   /* sprite points left; prev points right */
.pgal-lb-next{inset-inline-end:16px}

.pgal-lb-strip{display:flex;gap:8px;justify-content:center;overflow-x:auto;
  padding:14px 16px calc(14px + env(safe-area-inset-bottom));scrollbar-width:none}
.pgal-lb-strip::-webkit-scrollbar{display:none}
.pgal-lb-t{flex:0 0 auto;width:58px;height:58px;padding:3px;cursor:pointer;
  background:var(--surface);border:2px solid transparent;border-radius:9px;opacity:.6;
  transition:opacity .15s ease,border-color .15s ease}
.pgal-lb-t img{width:100%;height:100%;object-fit:contain;display:block}
.pgal-lb-t:hover{opacity:1}
.pgal-lb-t.is-on{opacity:1;border-color:var(--accent)}

/* ---------- identity ---------- */
.prod-brand{display:inline-block;font-size:12px;font-weight:700;color:var(--info);margin-bottom:8px}
.prod-brand:hover{color:var(--primary)}
.prod-info h1{font-size:clamp(19px,2.2vw,24px);color:var(--text);line-height:1.6;letter-spacing:-.01em}
.prod-chips{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.prod-chips li{font-size:12px;font-weight:700;color:var(--primary);background:var(--surface);
  border:1px solid var(--border);border-radius:7px;padding:5px 11px}
.prod-biz{margin-top:22px}
.prod-biz-l{display:block;font-size:12.5px;font-weight:700;color:var(--text-muted);margin-bottom:9px}
.prod-biz-v{display:flex;flex-wrap:wrap;gap:8px}
.prod-biz-v a{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:5px 12px;
  background:var(--accent-surface);border-radius:999px;font-size:12px;font-weight:700;color:var(--accent-text);
  transition:background .16s}
.prod-biz-v a:hover{background:var(--accent-surface-hover)}
.prod-biz-v svg{width:15px;height:15px}
.prod-quick{margin:24px 0 0;display:grid;gap:1px;background:var(--border-soft);
  border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
.prod-quick div{display:grid;grid-template-columns:132px 1fr;gap:14px;background:var(--surface);padding:11px 16px}
.prod-quick dt{font-size:12.5px;color:var(--text-muted)}
.prod-quick dd{margin:0;font-size:12.5px;font-weight:700}
.prod-quick-more{display:inline-block;margin-top:12px;font-size:12.5px;font-weight:700;color:var(--info)}
.prod-quick-more:hover{color:var(--primary)}

/* ---------- buy box ---------- */
.buy{position:sticky;top:20px}
.buy-in{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:18px}
.buy-avail{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;
  color:var(--accent-text);margin-bottom:14px}
.buy-avail svg{width:15px;height:15px;color:var(--accent);flex:none}
.buy-limit{font-size:11.5px;color:var(--text-soft);margin:-10px 0 14px;line-height:1.8}
.buy-ship{display:flex;align-items:flex-start;gap:9px;margin-top:14px;padding-top:14px;
  border-top:1px solid var(--border-soft);font-size:11.5px;color:var(--text-muted);line-height:1.9}
.buy-ship a{color:var(--info);font-weight:700}
.buy-ship a:hover{color:var(--primary)}
.buy-ship svg{width:16px;height:16px;color:var(--info);flex:none;margin-top:3px}
/* Hidden until the script that gives it meaning has run — see functions.php. */
.buy-unit{display:none}
.has-js .buy-unit{display:grid}
.buy-unit{grid-template-columns:1fr 1fr;gap:6px;background:var(--surface-2);
  border:1px solid var(--border-soft);border-radius:8px;padding:4px;margin-bottom:16px}
.buy-unit-o{position:relative;display:block}
.buy-unit-o input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.buy-unit-o span{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-height:44px;padding:6px 4px;border-radius:6px;text-align:center;line-height:1.3;
  transition:background .16s}
.buy-unit-o:hover span{background:var(--border-soft)}
.buy-unit-o b{font-size:13px;font-weight:800;color:var(--text);transition:color .16s}
.buy-unit-o small{font-size:10.5px;font-weight:600;color:var(--text-muted);transition:color .16s}
.buy-unit-o input:checked+span{background:var(--surface);box-shadow:0 1px 3px rgb(var(--shadow-rgb)/.13)}
.buy-unit-o input:checked+span b{color:var(--primary)}
.buy-unit-o input:checked+span small{color:var(--accent-text)}
.buy-unit-o input:focus-visible+span{outline:3px solid var(--focus-ring);outline-offset:2px}
.buy-qty{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.buy-qty-l{font-size:12.5px;color:var(--text-muted)}
.qty{display:flex;align-items:center;border:1px solid var(--border);border-radius:8px;overflow:hidden}
.qty-b{width:38px;height:38px;display:grid;place-items:center;font-size:17px;font-weight:700;
  color:var(--primary);background:var(--surface-2);transition:background .16s}
.qty-b:hover{background:var(--accent-surface)}
.qty-i{width:52px;height:38px;border:none;border-inline:1px solid var(--border);text-align:center;
  font:inherit;font-size:13.5px;font-weight:700;color:var(--text);background:var(--surface);outline:none;
  -moz-appearance:textfield}
.qty-i::-webkit-outer-spin-button,.qty-i::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.buy-sum{border-top:1px solid var(--border-soft);padding-top:14px;margin-bottom:14px}
.buy-sum-r{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.buy-sum-r span{font-size:12.5px;color:var(--text-muted)}
.buy-sum-r strong{font-size:18px;font-weight:800;color:var(--primary)}
.buy-sum-r del{display:none}
.buy-sum-u{margin-top:6px;font-size:11.5px;color:var(--text-soft)}
.buy-go{width:100%;min-height:46px;font-size:14.5px}
.buy-none-t{font-size:14px;font-weight:700;color:var(--text);margin-bottom:6px}
.buy-none-s{font-size:12px;color:var(--text-muted);line-height:1.85;margin-bottom:14px}
.buy-trust{list-style:none;margin:16px 0 0;padding:16px 0 0;border-top:1px solid var(--border-soft);
  display:flex;flex-direction:column;gap:11px}
.buy-trust li{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--text-muted)}
.buy-trust svg{width:16px;height:16px;color:var(--accent);flex:none}
.buy-bulk{margin-top:16px;padding-top:14px;border-top:1px solid var(--border-soft);font-size:11.5px;
  color:var(--text-muted);line-height:1.8}
.buy-bulk a{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font-weight:700;color:var(--info)}
.buy-bulk a:hover{color:var(--primary)}
.buy-bulk svg{width:14px;height:14px}

/* ---------- sticky buy bar ----------
   Desktop keeps the buy box in the corner of the eye, so the bar is a
   narrow-screen device only; it is switched on in the 860px block below. */
.buybar{display:none}
.buybar-in{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding-block:10px}
.buybar-p{display:flex;flex-direction:column;gap:2px;min-width:0}
.buybar-p span{font-size:11px;color:var(--text-muted)}
.buybar-p strong{font-size:16px;font-weight:800;color:var(--primary)}
.buybar-p del{display:none}
.buybar .btn{flex:none;min-height:44px;padding-inline:22px}

/* ---------- sections below the fold ---------- */
.psec{margin-top:44px}
.psec h2{font-size:19px;color:var(--primary);letter-spacing:-.01em;margin-bottom:16px}
.stable{width:100%;border-collapse:separate;border-spacing:0;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
.stable th,.stable td{text-align:start;padding:13px 18px;font-size:13px;vertical-align:top}
.stable th{width:190px;font-weight:400;color:var(--text-muted);background:var(--surface-2)}
.stable td{font-weight:700}
.stable tr+tr th,.stable tr+tr td{border-top:1px solid var(--border-soft)}
.pdesc{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:22px 24px;
  font-size:13.5px;color:var(--text-muted);line-height:2.05;max-width:78ch}
.pdesc p{margin:0 0 10px}
.pdesc p:last-child{margin-bottom:0}
/* Product descriptions are sectioned now (what it is / where it works / where it
   does not / FAQ), so the card carries headings, emphasis and links. Without
   these the h3 inherits margin:0 from the base heading rule and collides with
   the paragraph above it, and a{color:inherit;text-decoration:none} renders the
   cross-sell link invisible. */
.pdesc h3{font-size:15px;font-weight:800;color:var(--text);line-height:1.7;margin:26px 0 9px}
.pdesc h3:first-child{margin-top:0}
.pdesc strong{color:var(--text);font-weight:700}
.pdesc a{color:var(--primary);font-weight:700;text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px}
.pdesc a:hover{color:var(--accent)}
.pgrid.pgrid-rel{grid-template-columns:repeat(5,1fr)}

/* ---------- cart & checkout (classic WooCommerce templates) ----------
   [woocommerce_cart] / [woocommerce_checkout] render WooCommerce's own PHP
   templates and class names (shop_table, cart_totals, form-row…) — this
   section re-skins that fixed markup rather than replacing it, since it
   already carries WooCommerce's cart/checkout/validation behaviour for free.
   See page-cart.php / page-checkout.php. */
.psp{padding-block:28px 56px}
.psp-title{font-size:26px;color:var(--primary);margin-bottom:20px;letter-spacing:-.01em}

.psp .woocommerce-error,.psp .woocommerce-message,.psp .woocommerce-info{
  list-style:none;margin:0 0 20px;padding:13px 18px;border-radius:8px;font-size:13px;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;
  background:var(--surface);border:1px solid var(--border);border-inline-start:4px solid var(--info)}
.psp .woocommerce-message{border-inline-start-color:var(--accent)}
.psp .woocommerce-error{border-inline-start-color:var(--danger)}
.psp .woocommerce-error a.button,.psp .woocommerce-message a.button,.psp .woocommerce-info a.button{
  order:2;display:inline-flex;align-items:center;min-height:34px;padding:0 16px;border-radius:7px;
  background:var(--primary);color:var(--on-primary);font-weight:700;font-size:12.5px}

/* cart table */
.psp table.shop_table{width:100%;border-collapse:separate;border-spacing:0;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r);overflow:hidden;font-size:13px}
.psp table.shop_table th{background:var(--surface-2);color:var(--text-muted);font-weight:700;
  text-align:start;padding:13px 16px;font-size:12.5px}
.psp table.shop_table td{padding:14px 16px;vertical-align:middle;border-top:1px solid var(--border-soft)}
.psp table.shop_table .product-thumbnail img{width:56px;height:56px;object-fit:contain;border-radius:8px;
  border:1px solid var(--border-soft);background:var(--surface-2)}
.psp table.shop_table .product-name a{font-weight:700;color:var(--text)}
.psp table.shop_table .product-name a:hover{color:var(--primary)}
.psp table.shop_table .amount{font-weight:700;color:var(--text)}
.psp table.shop_table .product-subtotal .amount{color:var(--primary)}
.psp table.shop_table .product-quantity .quantity input.qty{width:56px;height:38px;border:1px solid var(--border);
  border-radius:8px;text-align:center;font:inherit;font-size:13px;font-weight:700;color:var(--text);
  background:var(--surface-2);-moz-appearance:textfield}
.psp table.shop_table .product-remove a.remove{display:inline-grid;place-items:center;width:26px;height:26px;
  border-radius:50%;color:var(--danger);font-size:16px;line-height:1;background:transparent;transition:background .16s}
.psp table.shop_table .product-remove a.remove:hover{background:var(--danger-surface-2)}
.psp table.shop_table tfoot tr td,.psp table.shop_table tfoot tr th{border-top:1px solid var(--border-soft)}
.psp table.shop_table tfoot .order-total .amount{color:var(--primary);font-size:16px;font-weight:800}

.psp .actions{background:var(--surface-2)}
.psp .actions .coupon{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.psp .actions .coupon label{display:none}
.psp .actions #coupon_code{height:40px;border:1px solid var(--border);border-radius:8px;padding-inline:12px;
  font:inherit;font-size:13px;background:var(--surface);min-width:160px}
.psp button.button,.psp input.button{min-height:40px;padding:0 18px;border-radius:8px;font-weight:700;
  font-size:13px;background:var(--surface);border:1.5px solid var(--border);color:var(--text);transition:filter .16s}
.psp button.button:hover,.psp input.button:hover{border-color:var(--primary);color:var(--primary)}
.psp button.button:disabled{opacity:.5;cursor:default}
.psp button.button[name="update_cart"],.psp .coupon button.button{background:var(--surface)}

.cart-collaterals{margin-top:28px;max-width:420px;margin-inline-start:auto}
.psp .cart_totals h2,.psp #order_review_heading{font-size:17px;color:var(--primary);margin-bottom:14px}
.wc-proceed-to-checkout{margin-top:16px}
/* .button.alt included in the selector: WooCommerce's own .woocommerce a.button.alt rule
   (3 classes + element) otherwise outranks a plainer override regardless of load order. */
.wc-proceed-to-checkout a.checkout-button.button.alt{display:flex;align-items:center;justify-content:center;
  min-height:48px;width:100%;border-radius:8px;background:var(--accent-text);color:var(--on-primary);font-weight:700;
  font-size:14.5px;transition:filter .16s}
.wc-proceed-to-checkout a.checkout-button.button.alt:hover{filter:brightness(1.08)}

/* checkout layout */
.woocommerce-form-coupon-toggle{margin-bottom:20px}
.woocommerce-form-coupon-toggle .woocommerce-info{border-inline-start-color:var(--info)}
.woocommerce-form-coupon-toggle a{font-weight:700;color:var(--info)}
form.checkout_coupon{max-width:420px;margin-bottom:24px;padding:16px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r)}
form.checkout_coupon p.form-row{display:flex;gap:8px;width:100%!important;float:none}
form.checkout_coupon .input-text{flex:1;width:auto!important}

.checkout h3{font-size:16px;color:var(--primary);margin:0 0 16px}
/* #order_review is a SIBLING of #customer_details in WooCommerce's markup, not
   nested inside it (its second column, .col-2, only fills when "ship to a
   different address" is checked) — so the two-column layout has to grid the
   shared parent form and place each sibling explicitly, not grid #customer_details. */
form.checkout.woocommerce-checkout{display:grid;grid-template-columns:1fr 460px;gap:0 32px;align-items:start}
.woocommerce-form-coupon-toggle,form.checkout_coupon{grid-column:1/-1}
#customer_details{grid-column:1;grid-row:1/3}
#order_review_heading{grid-column:2;grid-row:1;margin-top:0}
#order_review{grid-column:2;grid-row:2}
.woocommerce-additional-fields{margin-top:24px}
.psp .form-row{margin-bottom:14px}
.psp .form-row label{display:block;font-size:12.5px;color:var(--text-muted);margin-bottom:6px}
.psp .form-row label .required{color:var(--danger);text-decoration:none}
.psp .form-row .input-text,.psp .form-row select,.psp .select2-container .select2-selection{
  width:100%;height:44px;border:1.5px solid var(--border);border-radius:8px;padding-inline:13px;
  font:inherit;font-size:13.5px;color:var(--text);background:var(--surface)}
.psp .form-row textarea{width:100%;border:1.5px solid var(--border);border-radius:8px;padding:12px 13px;
  font:inherit;font-size:13.5px;background:var(--surface);min-height:84px}
.psp .form-row .input-text:focus,.psp .form-row select:focus,.psp .form-row textarea:focus{
  outline:none;border-color:var(--primary)}
.psp .select2-container .select2-selection__rendered{line-height:44px;padding-inline-start:0}
.psp .select2-container .select2-selection__arrow{height:44px}
.psp .form-row-first,.psp .form-row-last{display:inline-block;width:calc(50% - 8px)}
.psp .form-row-first{margin-inline-end:16px}

#order_review{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:20px}
#order_review table.shop_table{border:none;border-radius:0}
#order_review table.shop_table td,#order_review table.shop_table th{padding:11px 0}
#payment{margin-top:20px}
ul.wc_payment_methods{list-style:none;margin:0;padding:0}
ul.wc_payment_methods li.wc_payment_method{padding:12px 0;border-top:1px solid var(--border-soft)}
ul.wc_payment_methods li.wc_payment_method:first-child{border-top:none}
ul.wc_payment_methods label{font-weight:700;font-size:13.5px}
.payment_box{margin-top:10px;border-radius:8px}
.psp #place_order,.psp .place-order .button{width:100%;min-height:48px;border-radius:8px;
  background:var(--accent-text);color:var(--on-primary);font-weight:700;font-size:14.5px}
.psp #place_order:hover,.psp .place-order .button:hover{filter:brightness(1.08)}
.woocommerce-privacy-policy-text{margin-top:14px;font-size:11.5px;color:var(--text-soft);line-height:1.9}
.woocommerce-privacy-policy-text a{color:var(--info)}
.woocommerce-terms-and-conditions-wrapper{margin-top:14px;font-size:12.5px}

/* ---------- my account (docs/account-area-plan.md) ----------
   Reuses .psp for form styling (login/register, edit-address, edit-account
   are WooCommerce's own templates); .psp-account only adds the sidebar
   layout on top. Flexbox rather than grid so the logged-out login/register
   page — which has no .woocommerce-MyAccount-navigation sibling at all —
   still renders correctly with a single child, no :has() dependency. */
.psp-account .woocommerce-MyAccount-navigation{flex:0 0 200px}
.psp-account:has(.woocommerce-MyAccount-navigation){display:flex;align-items:flex-start;gap:32px}
.psp-account .woocommerce-MyAccount-content{flex:1 1 auto;min-width:0}

.woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
.woocommerce-MyAccount-navigation li{border-top:1px solid var(--border-soft)}
.woocommerce-MyAccount-navigation li:first-child{border-top:none}
.woocommerce-MyAccount-navigation a{display:block;padding:13px 16px;font-size:13.5px;
  color:var(--text-muted);font-weight:700;transition:background .16s,color .16s}
.woocommerce-MyAccount-navigation a:hover{background:var(--surface-2);color:var(--primary)}
.woocommerce-MyAccount-navigation .is-active a{background:var(--accent-surface);color:var(--accent-text)}

/* dashboard */
.acct-dash{display:flex;flex-direction:column;gap:20px}
.acct-file-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--surface);
  border:1px solid var(--border);border-inline-start:4px solid var(--warning);border-radius:var(--r);
  padding:16px 18px}
.acct-file-bar.is-ok{border-inline-start-color:var(--accent)}
.acct-file-ic{flex:none;width:34px;height:34px;border-radius:9px;background:var(--surface-2);
  display:grid;place-items:center;color:var(--warning)}
.acct-file-bar.is-ok .acct-file-ic{color:var(--accent)}
.acct-file-ic svg{width:17px;height:17px}
.acct-file-bar p{flex:1;font-size:13px;color:var(--text);min-width:200px}
.acct-file-cta{min-height:36px;padding:0 16px;font-size:12.5px}

.acct-stats{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.acct-stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:20px 22px}
.acct-stat-l{display:block;font-size:12px;color:var(--text-muted);margin-bottom:8px}
.acct-stat strong{display:block;font-size:19px;color:var(--primary);font-weight:800}
.acct-stat-sub{display:block;font-size:12.5px;color:var(--text-muted);margin-top:4px}

.acct-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:22px 24px}
.acct-card-h{font-size:15px;color:var(--primary);margin-bottom:16px}

/* اقلام همیشگی — reorder rows */
.acct-freq{list-style:none;margin:0;padding:0}
.acct-freq-row{display:flex;align-items:center;gap:14px;padding:14px 0;border-top:1px solid var(--border-soft)}
.acct-freq-row:first-child{border-top:none;padding-top:0}
.acct-freq-row:last-child{padding-bottom:0}
.acct-freq-img{flex:none;width:52px;height:52px;border-radius:8px;overflow:hidden;
  border:1px solid var(--border-soft);background:var(--surface-2)}
.acct-freq-img img{width:100%;height:100%;object-fit:contain}
.acct-freq-body{flex:1;min-width:0}
.acct-freq-name{display:block;font-weight:700;font-size:13.5px;color:var(--text)}
.acct-freq-name:hover{color:var(--primary)}
.acct-freq-meta{display:block;font-size:11.5px;color:var(--text-soft);margin-top:4px}
.acct-freq-act{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.acct-freq-price{font-size:12.5px;color:var(--text-muted);font-weight:700}
.acct-freq-add{min-height:36px;padding:0 14px;font-size:12px;white-space:nowrap}
/* WooCommerce's AJAX success handler injects this "مشاهده سبد خرید" link next
   to the button — unlike the icon-only .padd cards elsewhere (where it's
   hidden, no room to explain the icon), there's space here to keep it, just
   given the site's own link styling instead of the browser default. */
.acct-freq-act .added_to_cart{font-size:11.5px;font-weight:700;color:var(--accent-text);margin-top:2px}
.acct-freq-act .added_to_cart:hover{color:var(--accent-text)}
.acct-view-all{display:block;text-align:center;margin-top:16px;padding-top:16px;
  border-top:1px solid var(--border-soft);font-size:13px;font-weight:700;color:var(--primary)}
.acct-view-all:hover{color:var(--accent-text)}

.acct-empty{text-align:center;padding-block:20px}
.acct-empty-ic{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:50%;
  background:var(--accent-surface);color:var(--accent-text);margin-bottom:14px}
.acct-empty-ic svg{width:24px;height:24px}
.acct-empty p{max-width:52ch;margin-inline:auto;font-size:13.5px;color:var(--text-muted);line-height:1.9}
.acct-empty-acts{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:20px}

/* ---------- shipping & delivery (the one page with a real, dated promise) ----------
   Signature: a real two-point timeline (order → 9am next day), not a decorative
   numbered process — the order genuinely is the content here. Kept to one navy
   band, not the page's hero, per the owner's explicit "low-key, not a headline
   claim" correction on an earlier homepage draft. */
.shp{padding-block:28px 56px}
.shp-lead{font-size:13.5px;color:var(--text-muted);max-width:68ch;margin-bottom:32px;line-height:1.9}
.shp-promise{background:var(--primary);border-radius:var(--r);padding:32px 34px;margin-bottom:32px}
.shp-promise h2{color:var(--on-primary);font-size:17px;margin-bottom:24px}
.shp-tl{display:flex;align-items:flex-start;gap:0}
.shp-tl-n{display:flex;flex-direction:column;gap:6px;color:var(--on-primary);flex:none;width:180px}
.shp-tl-d{width:14px;height:14px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgb(var(--accent-rgb)/.25)}
.shp-tl-d-end{background:var(--on-primary);box-shadow:0 0 0 4px rgb(var(--on-primary-rgb)/.2)}
.shp-tl-line{flex:1;border-top:2px dashed rgb(var(--on-primary-rgb)/.35);margin-top:7px;min-width:30px}
.shp-tl-n strong{font-size:14.5px}
.shp-tl-n span{font-size:12px;color:var(--on-inverse-muted-2);line-height:1.6}
.shp-caveat{margin-top:24px;padding-top:18px;border-top:1px solid rgb(var(--on-primary-rgb)/.14);
  font-size:12px;color:var(--on-inverse-muted-2);line-height:1.9;max-width:70ch}

.shp-zones{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:8px}
.shp-zone{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:24px 26px}
.shp-zone-ic{width:42px;height:42px;border-radius:10px;background:var(--accent-surface);display:grid;
  place-items:center;margin-bottom:14px}
.shp-zone-ic svg{width:20px;height:20px;color:var(--accent-text)}
.shp-zone h3{font-size:15px;color:var(--primary);margin-bottom:8px}
.shp-zone p{font-size:13px;color:var(--text-muted);line-height:1.9}
.shp-zone p+p{margin-top:6px}
.shp-zone p strong{color:var(--text)}

.shp-cta{display:flex;gap:12px;margin-top:48px;flex-wrap:wrap}

/* ---------- wholesale ----------
   Signature: a real 4-step sequence for how the relationship starts — order
   carries information here (you can't get pricing before volume is known),
   unlike a decorative 01/02/03. Reuses .wgrid/.wg (benefits) and .shp-zone
   (account comparison) rather than inventing new card patterns. */
.wh{padding-block:28px 56px}
.sec-h2{font-size:20px;color:var(--primary);letter-spacing:-.01em;margin-bottom:20px}
.wh-benefits{margin-top:8px;margin-bottom:44px}
.wh-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:44px}
.wh-step{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:22px 20px}
.wh-step-n{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:var(--accent-text);color:var(--on-primary);font-weight:800;font-size:13px;margin-bottom:14px}
.wh-step h3{font-size:13.5px;color:var(--primary);margin-bottom:7px;line-height:1.6}
.wh-step p{font-size:12px;color:var(--text-muted);line-height:1.85}
.wh-accounts{margin-bottom:44px}

/* ---------- about ---------- */
.ab{padding-block:28px 56px}
.ab-story{margin-bottom:40px}
.ab-story p{margin:0 0 14px}
.ab-story p:last-child{margin-bottom:0}
.ab-values{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:8px}
.ab-reg{margin:40px 0 44px;max-width:520px}

/* ---------- contact ---------- */
.ct{padding-block:28px 56px}
.ct-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:8px}
.ct-link{color:var(--info);font-weight:700;font-size:14px}
.ct-link:hover{color:var(--primary)}
.ct-soc{display:flex;align-items:center;gap:12px;margin:32px 0 44px}
.ct-soc-l{font-size:12.5px;color:var(--text-muted);font-weight:700}
.ct-soc a{width:38px;height:38px;border-radius:8px;border:1px solid var(--border);
  display:grid;place-items:center;color:var(--text-muted);transition:border-color .16s,color .16s}
.ct-soc a:hover{border-color:var(--primary);color:var(--primary)}
.ct-soc svg{width:17px;height:17px}

/* ---------- FAQ page (groups of the .faq-i accordion already used elsewhere) ---------- */
.fq{padding-block:28px 56px}
.fq-g{margin-top:40px}
.fq-g:first-of-type{margin-top:8px}
.fq-g .faq-i p a{color:var(--info);font-weight:700}
.fq-g .faq-i p a:hover{color:var(--primary)}

/* ---------- request-quote (lead capture, not a pricing tool) ---------- */
.rq-lead{font-size:13.5px;color:var(--text-muted);max-width:68ch;line-height:1.9;margin-bottom:20px}
.rq-ctx{display:inline-flex;align-items:center;gap:7px;background:var(--accent-surface);color:var(--accent-text);
  font-size:12.5px;font-weight:700;padding:8px 15px;border-radius:999px;margin-bottom:24px}
.rq-ctx svg{width:14px;height:14px}
.rq-alert{background:var(--surface);border:1px solid var(--border);border-inline-start:4px solid var(--danger);
  border-radius:8px;padding:13px 18px;font-size:13px;margin-bottom:20px}
.rq-form{max-width:720px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  padding:30px 32px}
.rq-h{font-size:15px;color:var(--primary);margin:0 0 16px}
.rq-h:not(:first-child){margin-top:30px;padding-top:26px;border-top:1px solid var(--border-soft)}
.rq-row{display:flex;gap:16px}
.rq-row .form-row-first,.rq-row .form-row-last{width:auto;flex:1;margin-inline-end:0}
.rq-err{display:block;margin-top:6px;font-size:11.5px;color:var(--danger)}
.rq-invalid{border-color:var(--danger)}
.rq-submit{width:100%;min-height:48px;margin-top:6px;font-size:14.5px}
.rq-done{max-width:520px;margin-inline:auto;text-align:center;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r);padding:48px 32px}
.rq-done-ic{width:56px;height:56px;border-radius:50%;background:var(--accent-surface);display:grid;
  place-items:center;margin:0 auto 18px}
.rq-done-ic svg{width:26px;height:26px;color:var(--accent-text)}
.rq-done h2{font-size:19px;color:var(--primary);margin-bottom:10px}
.rq-done p{font-size:13.5px;color:var(--text-muted);line-height:1.9;margin-bottom:24px}

/* ==========================================================================
   Hubs — /products and /business-types
   The two L1 entry points. Their one shared bold element is the axis pair:
   this site indexes the same catalog two ways (category and business type),
   which is the structural idea the whole architecture rests on, and a visitor
   landing on one hub has no other way to learn the other exists. Everything
   else on both pages reuses components the category and business-type pages
   already established.
   ========================================================================== */

.hub .cat-head{padding-block:24px 26px}
/* The toolbar carries only the sorting control here, so it sits where the same
   control sits on every category page rather than jumping to the other margin. */
.hub .cat-bar{justify-content:flex-end}
.hub .cat-head h1{font-size:clamp(22px,2.6vw,28px);color:var(--primary);letter-spacing:-.02em}
.hub .cat-head .cat-intro{margin-top:10px}

/* ---------- axis pair (signature, shared by both hubs) ---------- */
.axis{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:28px}
.axis-i{display:flex;align-items:center;gap:14px;padding:18px 20px;border-radius:var(--r);
  background:var(--surface);border:1px solid var(--border);transition:border-color .16s,box-shadow .18s}
a.axis-i:hover{border-color:var(--primary);box-shadow:0 6px 20px rgb(var(--shadow-rgb)/.09)}
.axis-ic{width:44px;height:44px;border-radius:11px;background:var(--surface-2);
  border:1px solid var(--border-soft);display:grid;place-items:center;flex:none}
.axis-ic svg{width:21px;height:21px;color:var(--primary)}
.axis-t{flex:1;min-width:0}
.axis-n{display:block;font-size:14px;font-weight:800;color:var(--primary);line-height:1.5}
.axis-d{display:block;font-size:12px;color:var(--text-muted);line-height:1.6;margin-top:2px}
.axis-s{flex:none;font-size:12px;font-weight:700;color:var(--info)}
/* The active side is a statement of place, not a control — no hover, no link
   colour, and the accent moves to the icon so the pair still reads as one unit. */
.axis-on{background:var(--primary);border-color:var(--primary)}
.axis-on .axis-ic{background:rgb(var(--on-primary-rgb)/.14);border-color:rgb(var(--on-primary-rgb)/.2)}
.axis-on .axis-ic svg{color:var(--on-primary)}
.axis-on .axis-n{color:var(--on-primary)}
.axis-on .axis-d{color:var(--on-inverse-muted)}
.axis-on .axis-s{color:var(--info-on-inverse);font-weight:700}

/* ---------- catalog directory (/products) ---------- */
.dir{display:flex;flex-direction:column;gap:14px;margin-bottom:44px}
.dir-i{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:20px 22px}
.dir-h{display:flex;align-items:center;gap:14px}
.dir-ic{width:52px;height:52px;border-radius:12px;background:var(--surface-2);
  border:1px solid var(--border-soft);display:grid;place-items:center;flex:none}
.dir-ic img{width:40px;height:40px;object-fit:contain}
.dir-ic svg{width:24px;height:24px;color:var(--primary);opacity:.5}
.dir-id{flex:1;min-width:0}
.dir-n{display:block;font-size:16px;font-weight:800;color:var(--primary);line-height:1.5;letter-spacing:-.01em}
.dir-n:hover{color:var(--info)}
.dir-c{display:block;font-size:12px;color:var(--accent-text);font-weight:700;margin-top:2px}
.dir-all{flex:none;font-size:12.5px;font-weight:700;color:var(--info);white-space:nowrap}
.dir-all:hover{color:var(--primary)}
.dir-i .cat-subs{margin-top:16px}
/* A category with nothing in it yet is still part of the architecture (see
   docs/site-architecture.md's phased-content principle) — shown, not hidden,
   and visibly quieter so the page never implies stock that isn't there. */
.dir-i.soon{background:var(--surface-2);border-style:dashed}
.dir-i.soon .dir-ic{opacity:.5;filter:grayscale(.6)}
.dir-i.soon .dir-n{color:var(--text-muted)}
.dir-i.soon .dir-c{color:var(--text-soft)}

/* ---------- business-type hub grid ---------- */
.biz-hub{grid-template-columns:repeat(3,1fr);margin-bottom:44px}
.biz-hub .bz{aspect-ratio:4/2.9}
.biz-hub .bz-n{font-size:14px}
.biz-hub .bz-m{font-size:11px}
/* Three of the nine terms have no photo. Same box, quiet card treatment —
   the site already treats "photo when available, quiet fallback when not" as
   the norm (product cards, category rail, the business-type page header). */
.bz-plain{background:var(--surface);border:1px solid var(--border);transition:border-color .16s,box-shadow .18s}
.bz-plain:hover{border-color:var(--primary);box-shadow:0 6px 20px rgb(var(--shadow-rgb)/.09)}
/* inset:0 rather than height:100% — the tile's height comes from aspect-ratio,
   and a percentage height against an aspect-ratio-derived box is the kind of
   thing that resolves differently across engines. Absolute inset does not care. */
.bz-plain .bz-txt{inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;color:var(--text)}
.bz-plain .bz-ic{background:var(--surface-2);border:1px solid var(--border-soft)}
.bz-plain .bz-ic svg{color:var(--primary)}
.bz-plain .bz-n{color:var(--primary)}
.bz-plain .bz-m{color:var(--text-muted)}

.hub-body{max-width:74ch;font-size:13.5px;color:var(--text-muted);line-height:1.95;margin-bottom:44px}
.hub-body p{margin:0 0 12px}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .crail{grid-template-columns:repeat(4,1fr)}
  .crail-i:nth-child(4n+1){border-inline-start:none}
  .fstrip{grid-template-columns:repeat(3,1fr)}
  .fs-i:nth-child(3n+1){border-inline-start:none}
  .pgrid{grid-template-columns:repeat(3,1fr)}
  .bgrid{grid-template-columns:repeat(4,1fr)}
  .biz{grid-template-columns:repeat(3,1fr)}
  .agrid{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:repeat(3,1fr);gap:24px}
  .nav-links,.nav-links ul{gap:18px;font-size:12.5px}
  .pgrid.pgrid-cat{grid-template-columns:repeat(3,1fr)}
  .guide-g{grid-template-columns:repeat(2,1fr)}
  .prod-top{grid-template-columns:300px minmax(0,1fr) 270px;gap:20px}
  .prod-media{--pgal-pad:16px}
  .pgal-thumb{width:52px;height:52px}
  .pgrid.pgrid-rel{grid-template-columns:repeat(4,1fr)}
  .ab-values{grid-template-columns:repeat(2,1fr)}
  .ct-grid{grid-template-columns:1fr}
  .pst{grid-template-columns:180px 1fr;gap:24px}
}
@media (max-width:860px){
  .split{grid-template-columns:1fr}
  /* Mobile nav: one control opens a drawer holding both axes, and each mega
     section is a real accordion rather than a squeezed desktop panel
     (docs/site-architecture.md §۴). Without JS the toggle never appears and
     the bar keeps the plain categories link it always had — no regression. */
  .nav-panel{display:none}
  .has-js .nav-toggle{display:inline-flex}
  .nav .wrap{flex-wrap:wrap}
  .nav-panel.is-open{display:block;flex-basis:100%;
    border-top:1px solid var(--border);padding-block:6px 12px}
  .nav-panel.is-open .nav-div{display:none}
  /* The hover underline is a pointer-only affordance; in the stacked drawer
     each row already gets its own border-bottom, so the ::after would just
     sit inert under the text. */
  .nav-panel.is-open .nav-links a::after{display:none}

  /* The categories control becomes the drawer's first row, styled to match the
     menu items below it rather than staying a bar-height flex cell. */
  .nav-panel.is-open .nav-cats-wrap{display:block;position:relative;
    border-bottom:1px solid var(--border-soft)}
  .nav-panel.is-open .nav-cats{min-height:0;padding-block:12px}

  /* Scoped to the top-level list only — an unscoped rule here would also
     restyle the links inside the panels, which have their own layout. */
  .nav-panel.is-open .nav-links>ul{display:block}
  .nav-panel.is-open .nav-links>ul>li{display:block;position:relative;
    border-bottom:1px solid var(--border-soft)}
  .nav-panel.is-open .nav-links>ul>li:last-child{border-bottom:none}
  .nav-panel.is-open .nav-links>ul>li>a{display:block;padding-block:12px}

  .nav-panel.is-open .mega-tog{display:grid;place-items:center;
    position:absolute;top:0;inset-inline-end:0;width:46px;height:46px}
  .nav-panel.is-open .mega-tog::before{content:"+";color:var(--text-muted);font-size:19px;line-height:1}
  .nav-panel.is-open .mega-parent.is-expanded .mega-tog::before{content:"−";color:var(--primary)}

  /* In the drawer the panel is a plain stacked block, not an overlay — but it
     is still on the same white surface .mega was always styled for, so none
     of its colours need overriding here any more. Only the layout changes. */
  .nav-panel.is-open .mega{position:static;opacity:1;visibility:visible;transform:none;
    display:none;background:transparent;border-top:none;box-shadow:none;padding-block:0 10px;transition:none}
  .nav-panel.is-open .mega-parent.is-expanded>.mega{display:block}
  .nav-panel.is-open .mega .wrap{padding-inline:0;max-width:none}
  .nav-panel.is-open .mega-cols,
  .nav-panel.is-open .mega-groups{grid-template-columns:1fr;gap:14px}
  .nav-panel.is-open .mega-venues{grid-template-columns:1fr;gap:2px}
  .hero-veil{background:linear-gradient(270deg,var(--surface-2) 26%,rgb(var(--surface-2-rgb)/.9) 62%,rgb(var(--surface-2-rgb)/.25) 100%)}
  .head .search select{display:none}
  .promise .wrap{grid-template-columns:repeat(2,1fr)}
  .ubar-group.u-mid{display:none}
  .facet{grid-template-columns:1fr;gap:8px}
  .facet-l{padding-top:0}
  .bulk{flex-direction:column;align-items:flex-start}
  /* Buy box moves under the identity block, so the price and the button leave
     the first screen — the sticky bar carries them down the page instead. */
  .prod-top{grid-template-columns:1fr 1fr}
  .prod-media{position:static;grid-column:1}
  .prod-info{grid-column:2}
  /* Swipe, not cross-fade. The slides go back to being laid out side by
     side in a scroll-snap track, so the gesture is the browser's own —
     no transform maths, and therefore no RTL sign to get wrong. The
     stage keeps its padding, so the track is inset like the stack was. */
  .pgal-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .pgal-track::-webkit-scrollbar{display:none}
  .pgal-slide{flex:0 0 100%;opacity:1;visibility:visible;scroll-snap-align:center;
    transition:none}
  /* A finger drag must scroll the strip, never be swallowed by the tap
     target that opens the viewer. */
  .pgal-stage.is-clickable{cursor:default}
  .buy{position:static;grid-column:1/-1}
  .prod{padding-bottom:96px}
  .buybar{display:block;position:fixed;inset-inline:0;bottom:0;z-index:40;
    background:var(--surface);border-top:1px solid var(--border);
    box-shadow:0 -4px 18px rgb(var(--shadow-rgb)/.10);
    padding-bottom:env(safe-area-inset-bottom)}
  /* Blog post: same "carry the CTA down the page" idea as .buybar above —
     the sidebar's own lead-gen card would otherwise still show in the
     still-two-column .pst layout down to 640px, doubling up with this bar. */
  .pst-mobile-cta{display:block;position:fixed;inset-inline:0;bottom:0;z-index:40;
    background:var(--surface);border-top:1px solid var(--border);
    box-shadow:0 -4px 18px rgb(var(--shadow-rgb)/.10);
    padding-bottom:env(safe-area-inset-bottom)}
  .pst-mobile-cta-in{display:flex;gap:10px;padding-block:10px}
  .pst-mobile-cta-in .btn-green{flex:1}
  .pst-mobile-cta-in .btn-outline{flex:none;padding-inline:16px}
  .pst-cta-card{display:none}
  .pgrid.pgrid-rel{grid-template-columns:repeat(3,1fr)}
  .stable th{width:150px}
  form.checkout.woocommerce-checkout{grid-template-columns:1fr}
  #customer_details,#order_review_heading,#order_review{grid-column:1;grid-row:auto}
  #order_review_heading{margin-top:24px}
  .cart-collaterals{max-width:none;margin-inline-start:0}
  /* Stated for .biz-hub explicitly rather than inherited from .biz — the two
     have equal specificity, so relying on source order alone would silently
     break if either block moved. */
  .biz-hub{grid-template-columns:repeat(3,1fr)}
  .axis{grid-template-columns:1fr}
  .dir-h{flex-wrap:wrap}
  .dir-all{width:100%;padding-top:4px}

  /* Account sidebar becomes a horizontal chip row above the content, same
     collapse pattern as the category page's .cat-sub chips. */
  .psp-account:has(.woocommerce-MyAccount-navigation){flex-direction:column}
  .psp-account .woocommerce-MyAccount-navigation{flex-basis:auto;width:100%}
  .woocommerce-MyAccount-navigation ul{display:flex;flex-wrap:wrap;gap:8px;
    background:transparent;border:none;padding:0}
  .woocommerce-MyAccount-navigation li{border-top:none;flex:none}
  .woocommerce-MyAccount-navigation a{padding:8px 14px;border-radius:20px;
    background:var(--surface);border:1px solid var(--border)}
  .woocommerce-MyAccount-navigation .is-active a{background:var(--accent-surface);border-color:transparent}

  .acct-stats{grid-template-columns:1fr}
  .acct-freq-row{flex-wrap:wrap}
  .acct-freq-act{flex-direction:row;align-items:center;width:100%;
    justify-content:space-between;margin-inline-start:66px}
}
@media (max-width:640px){
  .head .wrap{flex-wrap:wrap;gap:14px;justify-content:space-between}
  .head .search{order:3;flex-basis:100%}
  /* Keep the mark, the name and the cart/wishlist actions on one row. The
     tagline is 233px of the brand's 284px, and .brand/.head-acts are both
     flex:none, so on a 390px screen 284+108+gap overflowed the 350px of usable
     width and pushed the actions onto their own line. The tagline is the one
     part that is decorative here — the same sentence is the site description
     and is already in the footer. */
  .brand-tag{display:none}
  .brand .brand-logo{height:40px}
  .brand-name{font-size:20px}
  .crail{grid-template-columns:repeat(3,1fr);margin-top:-16px}
  .crail-i{border-inline-start:none;border-top:1px solid var(--border-soft)}
  .fstrip{grid-template-columns:repeat(2,1fr)}
  .fs-i{border-inline-start:none;border-top:1px solid var(--border-soft)}
  .pgrid,.bgrid{grid-template-columns:repeat(2,1fr)}
  .pgrid.pgrid-cat{grid-template-columns:repeat(2,1fr)}
  .pgrid.pgrid-rel{grid-template-columns:repeat(2,1fr)}
  .prod-top{grid-template-columns:1fr}
  .prod-media{grid-column:1}
  .pgal-stage{aspect-ratio:4/3;--pgal-pad:14px}
  .prod-media .noimg{aspect-ratio:4/3}
  .pgal-thumb{width:50px;height:50px}
  /* Phone viewer: swipe and the thumbnail strip, no chevrons — the same
     choice Digikala makes, and for a measurable reason. Two 54px gutters on a
     390px screen spend 28% of the width on buttons that duplicate a gesture
     the viewer already supports, leaving the photo 282px wide. Dropping them
     to a 12px margin gives it 366px. Floating the buttons over the photo
     instead was the other option and is worse: they are white-on-translucent,
     so they vanish against the white product background these photos have. */
  .pgal-lb{--lb-gutter:12px}
  .pgal-lb-nav{display:none}
  .pgal-lb-t{width:48px;height:48px}
  /* Centred is wrong once the strip overflows: it hides the first
     thumbnails behind the edge with no way to reach them. */
  .pgal-lb-strip{justify-content:flex-start}
  .prod-info{grid-column:1}
  .prod-quick div{grid-template-columns:110px 1fr;gap:10px}
  .stable th{width:120px}
  .stable th,.stable td{padding:11px 13px;font-size:12.5px}
  .guide-g{grid-template-columns:1fr}
  .board{padding:16px 16px 4px}
  .biz{grid-template-columns:repeat(2,1fr)}
  .agrid{grid-template-columns:1fr}
  .wgrid{grid-template-columns:repeat(2,1fr)}
  .wh-steps{grid-template-columns:1fr}
  .ab-values{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:repeat(2,1fr)}
  .promise .wrap{grid-template-columns:1fr}
  .hero .wrap{padding-block:36px 44px}
  .hact span{display:none}
  .ubar-group.u-left{display:none}
  .psp .form-row-first,.psp .form-row-last{width:100%;margin-inline-end:0}
  .psp .actions{display:flex;flex-direction:column;align-items:stretch;gap:12px}
  .psp .actions .coupon{flex-direction:column;align-items:stretch}
  .shelf-h{flex-direction:column;align-items:flex-start;gap:8px}
  .bh.has-img .bh-in{padding-block:44px 26px}
  .obiz{flex-direction:column;align-items:flex-start}
  .rq-row{flex-direction:column;gap:0}
  .rq-form{padding:24px 20px}
  .shp-tl{flex-direction:column;align-items:flex-start;gap:16px}
  .shp-tl-line{display:none}
  .shp-tl-n{width:auto}
  .shp-zones{grid-template-columns:1fr}
  .wh-steps{grid-template-columns:repeat(2,1fr)}
  .biz-hub{grid-template-columns:repeat(2,1fr)}
  .dir-i{padding:16px}
  .dir-n{font-size:15px}
  /* Blog: TOC moves above content, related cards go single column */
  .pst{grid-template-columns:1fr}
  .pst-toc{position:static}
  .pst-related-grid{grid-template-columns:1fr}
  .pst-body{font-size:15px}
  .pst-body h2{font-size:19px}
}

/* ---------- 404 ---------- */
.pt-404{
  background:var(--primary);
  min-height:calc(100vh - 280px);
  display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
  padding:60px 20px;
}
.nf{text-align:center;position:relative;z-index:2;max-width:560px;width:100%}
.nf-num{
  display:block;
  font-size:clamp(140px,22vw,260px);
  font-weight:900;
  line-height:.88;
  color:rgb(var(--on-primary-rgb)/.06);
  user-select:none;
  pointer-events:none;
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  z-index:1;
  letter-spacing:-.04em;
}
.nf-inner{position:relative;z-index:2}
.nf-inner h1{
  font-size:clamp(22px,3.5vw,32px);
  font-weight:800;
  color:var(--on-primary);
  margin:0 0 12px;
  letter-spacing:-.02em;
}
.nf-desc{
  font-size:15px;
  color:var(--on-inverse-muted);
  margin:0 0 32px;
  line-height:1.7;
}
.nf-search{
  max-width:440px;
  margin:0 auto 36px;
  display:flex;
  height:52px;
  border:2px solid rgb(var(--on-primary-rgb)/.12);
  border-radius:12px;
  overflow:hidden;
  background:rgb(var(--on-primary-rgb)/.07);
  transition:border-color .2s,background .2s;
}
.nf-search:focus-within{
  border-color:rgb(var(--on-primary-rgb)/.3);
  background:rgb(var(--on-primary-rgb)/.1);
}
.nf-search input{
  flex:1;
  border:none;
  background:transparent;
  font:inherit;
  font-size:15px;
  color:var(--on-primary);
  padding-inline:18px;
  outline:none;
  min-width:0;
}
.nf-search input::placeholder{color:var(--on-inverse-soft)}
.nf-submit{
  width:56px;
  background:var(--accent);
  color:var(--on-accent);
  display:grid;place-items:center;
  transition:background .16s;
  flex:none;
}
.nf-submit:hover{background:var(--accent-text)}

.nf-links{
  display:flex;flex-wrap:wrap;gap:12px;justify-content:center;
}
.nf-links .btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 22px;
  border-radius:10px;
  font-size:14px;font-weight:700;
  transition:all .2s;
}
.nf-links .btn-green{
  background:var(--accent-text);
  color:var(--on-accent);
}
.nf-links .btn-green:hover{
  background:var(--accent-text-hover);
  transform:translateY(-1px);
  box-shadow:0 6px 20px rgb(var(--accent-rgb)/.35);
}
.nf-links .btn-nf-ghost{
  background:transparent;
  color:var(--on-inverse);
  border:1.5px solid rgb(var(--on-primary-rgb)/.15);
}
.nf-links .btn-nf-ghost:hover{
  color:var(--on-primary);
  border-color:rgb(var(--on-primary-rgb)/.4);
  background:rgb(var(--on-primary-rgb)/.06);
}

@media (max-width:640px){
  .pt-404{min-height:calc(100vh - 240px);padding:40px 16px}
  .nf-search{max-width:100%}
  .nf-links{flex-direction:column;align-items:stretch}
  .nf-links .btn{justify-content:center}
}