/*
 * Design tokens — Dr. Jafari Pharmacy brand system.
 * Source of truth: Compass/02-brand-design/02-page-templates/component-style-guide.html
 * (palette + type) and component-sheet.md §0 (shape/shadow). Copied verbatim — ADR-0082 §7:
 * nothing new is designed here.
 */

/*
 * Full, non-subsetted variable font — rastikerdar/vazirmatn v33.003 (SIL OFL, see
 * assets/fonts/Vazirmatn-OFL.txt), NOT a per-unicode-range slice off Google's CDN. A
 * gstatic subset only covers the range Google inferred from the request and can silently
 * drop Persian digits, ZWNJ, or the Latin range this catalogue's product names need —
 * failure that's invisible in a homepage screenshot. This file covers weight 100-900 and
 * the full Latin+Arabic character set in one face.
 */
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/Vazirmatn-Variable.woff2') format('woff2-variations'),
       url('../fonts/Vazirmatn-Variable.woff2') format('woff2 supports variations'),
       url('../fonts/Vazirmatn-Variable.woff2') format('woff2');
}

:root {
  /* palette — component-style-guide.html */
  --teal-deep: #0A3A38;
  --teal: #0E5C57;
  --teal-mid: #1A8079;
  --teal-soft: #BFE0DC;
  --teal-wash: #EAF4F2;
  --orange: #D9662B;
  --orange-light: #EE8A4E; /* R2 (S272): retired from every interactive use; declaration kept until a grep shows zero references */
  --orange-cta: #C05008; /* R1 (S272): every text-bearing purchase fill, and any orange text on white/cream. White on it 4.78 */
  --orange-cta-hover: color-mix(in srgb, var(--orange-cta) 84%, #000); /* paints #A14307, white on it 6.32 */
  --warm-ink: #6B5536; /* R4 (S272): the only warm text colour (replaces #8A6233 and every orange text on tint) */
  --orange-soft: #F7C9A6;
  --orange-tint: #F7E6DA; /* DD12 (S132): ratified mockup token; pairs with --orange-soft on Rx notice/chip/sticky */
  --star: #E8A33D; /* DD14 (S132): rating stars — gold, not brand-teal; own semantic (rating), distinct from CTA orange, harmonizes with the warm family. Convention over novelty in a YMYL/trust context. */
  --cream: #FBF8F3;
  --ink: #1E2A29;
  --slate: #5C6B69;
  --line: #E7EEEC;

  /* shape — component-sheet.md §0 (Shape & feel) */
  --radius-card-min: 14px;
  --radius-card: 16px;
  --radius-card-max: 18px;
  --radius-btn-min: 10px;
  --radius-btn: 11px;
  --radius-btn-max: 12px;
  --shadow-soft: 0 14px 44px rgba(10, 58, 56, .13);

  /* type — component-sheet.md §0 (Typography) + component-style-guide.html body rule */
  --font-brand: 'Vazirmatn', Tahoma, Arial, sans-serif;
  --fw-display: 800;
  --fw-heading: 700;
  --fw-subhead: 600;
  --fw-label: 500;
  --fw-body: 400;
  --line-height-persian: 1.95;

  /* theme T8 (audit finding 11): additive spacing scale, zero visual change. */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px;
}

/*
 * S119 re-parent (GeneratePress): the `html:root { --wd-* }` bridge block that used to live
 * here is removed, not just superseded. It never set anything directly — it fed Woodmart's
 * own `css/parts/base.min.css` and inline `:root` block, both of which only exist under
 * Woodmart. Under GeneratePress nothing reads `--wd-main-bgcolor`/`--wd-text-color`/etc., so
 * the block was valid CSS painting nothing (confirmed: body background/color measured as
 * GeneratePress's own defaults, not ours, on the WoodMart-parented rendered page vs. this
 * one — Phase 2 spike, 2026-08-22). Same for `--wd-text-font`/`--wd-title-font`/etc. and
 * `--btn-accented-bgcolor` — none of them are read anywhere else in this file (grep-confirmed
 * before removal), so nothing else in our own CSS depended on them either.
 *
 * Direct rules below replace the bridge for the properties that were actually lost
 * (background-color, color, line-height); font-family already had its own direct rule and
 * needed no change. line-height was missed in the original re-parent (S120, tokens.css:57's
 * --line-height-persian survived unused while the page painted the browser default 1.5) and
 * is restored here.
 */
html, body {
  font-family: var(--font-brand);
  background-color: var(--cream);
  color: var(--ink);
  line-height: var(--line-height-persian);
}

/*
 * Defect #12: native form controls (WooCommerce's add-to-cart button, cart/checkout
 * buttons) render in the browser's stock UI font stack (measured on the PDP add-to-cart
 * button: `-apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", ...`) because browsers
 * give `button`/`input`/`select`/`textarea` a UA-stylesheet font-family that does NOT
 * inherit from `body` by default — that's why the custom qty +/- buttons (which set
 * font-family directly, grep-confirmed elsewhere in this file) already render correctly
 * while WC's own markup doesn't. `font-family: inherit` restores normal cascade behavior
 * (pull from body → var(--font-brand)) without hardcoding the font a second time, and
 * without touching icon fonts: this file has no ::before/::after glyph rules keyed off
 * dashicons/font-awesome content, so nothing here relies on these tags' UA-default font.
 */
button,
input,
select,
textarea,
.button,
.wp-element-button {
  font-family: inherit;
}

/*
 * Batch B — header + footer. Utility-bar background/text color comes from the
 * header-builder structure filter in functions.php (the row's own configured background,
 * not a Woodmart CSS-variable cascade), so no override needed here for that. Everything
 * below is new surface batch A didn't touch.
 */

/*
 * S119 re-parent (GeneratePress) — Phase 2 finding: GP's own `.site-logo img.header-image`
 * (the Customizer custom-logo output, unrelated to header-elements/logo.php below, which is
 * dormant and being deleted) already carries `max-width: 100%` from GP's own CSS but still
 * rendered at its native 512px and overflowed at 392px — `max-width: 100%` resolves against
 * `.site-branding-container`, which GP itself does not constrain. An explicit px ceiling on
 * the image is required; confirmed by the 392px overflow number going to zero after this
 * rule (`scrollWidth == clientWidth`), not by the declaration being present. 150px reuses
 * the existing ratified logo width (header-elements/logo.php's own `$width = 150` default,
 * component-style-guide.html §4) — not a new size choice.
 *
 * S121 — this rule is now INERT in the header, not wrong. `functions.php` filters
 * `generate_logo` to empty, so GP's Customizer image (attachment 15 = favicon-512-1.png, the
 * 512px this ceiling existed to contain) no longer renders there at all; the ratified 42/48px
 * `.bn-mark` below replaces it. Kept deliberately as a defensive ceiling: if the Customizer
 * logo is ever re-enabled on Mohsen's instance, an uncapped 512px image overflows a 392px
 * viewport again. 150px is NOT a ratified brand size — ADR-0085 records it as a WoodMart
 * parameter default — it is only a width at which any stray header image stays on-screen.
 */
.site-logo img.header-image {
  max-width: 150px;
  height: auto;
}

/* ---- Header: mark + name + slogan (component-style-guide.html §4 .hdr .brand/.bn-name/.bn-sl) ----
 * S121 — these rules are LIVE again. They were authored in S119 against
 * header-elements/logo.php's markup and orphaned when the re-parent deleted that file; the
 * header-brand-block decision they were held for has been made, and `functions.php` now emits
 * the ratified lockup itself on GP's `generate_site_branding_output` filter. The class names
 * (`.wd-logo`, `.bn-text`, `.bn-name`, `.bn-sl`) are kept exactly as S119 wrote them so the
 * rules bind unchanged — `.wd-logo` reads like a WoodMart name but is ours, and nothing
 * vendor-supplied matches it.
 */
.drjafari-brand .wd-logo {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
}
/* 42x42 is component-style-guide.html:186's own `width="42" height="42"` on the .hdr .brand
   mark. Declared in CSS as well as on the <img> so the rendered box does not depend on the
   attribute surviving a filter, and `flex-shrink: 0` so the mark never squeezes when the name
   wraps at 392px. */
.drjafari-brand .bn-mark {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
}
.drjafari-brand .bn-text {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.drjafari-brand .bn-name {
  font-weight: var(--fw-display);
  font-size: 14.5px;
  color: var(--teal-deep);
}
.drjafari-brand .bn-sl {
  font-size: 10px;
  color: var(--orange-cta);
  font-weight: var(--fw-subhead);
  margin-top: 2px;
}
/* MOCKUP-MAP §2 ruling: <769px = 392 frame, >=769px = the 1180 frame's desktop treatment
   (no ratified design for 769-1023, so the desktop value is kept up through that band). */
@media (min-width: 769px) {
  .drjafari-brand .bn-mark {
    width: 48px;
    height: 48px;
  }
  .drjafari-brand .bn-name {
    font-size: 17px;
  }
  .drjafari-brand .bn-sl {
    font-size: 11px;
  }
}

/* ---- Header: §2 search + account + cart (component-sheet.md §2) ----
 * S126 Wave 4b — GP's own `.navigation-search` form (enabled via functions.php's
 * option_generate_settings filter) ships as a full-width overlay hidden by default
 * (installed GP 3.6.1 `inc/css-output.php:136`: position:absolute, left:-99999px,
 * revealed only on `.nav-search-active`) — a click-to-open pattern, not the always-visible
 * centered box §2 asks for. Restyled here into a permanent inline pill instead of writing a
 * custom search component: no new markup, only overriding GP's own show/hide state. Same
 * specificity as GP's rule (one class), tokens.css loads after `#generate-style-inline-css`
 * in <head> (established S121b precedent below), so source order wins outright — no
 * !important. The icon-toggle button that used to open/close the overlay is now redundant
 * (the box is always open) and hidden.
 * #F3F7F6 is not in component-sheet.md §0's token table, but it is the literal value
 * component-style-guide.html's own ratified `.hdr .search` rule uses — copied from there,
 * not invented.
 */
.main-navigation .menu-bar-items .search-item {
  display: none;
}
.navigation-search {
  position: static;
  left: auto;
  right: auto;
  top: auto;
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
  width: auto;
  flex: 1;
  min-width: 0;
  max-width: 480px;
  margin-inline: 12px;
}
.navigation-search input[type="search"] {
  display: block;
  width: 100%;
  height: 40px;
  background: var(--teal-wash);
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px 18px;
  /* Magnifier icon as a data-URI (no markup change) — stroke is a literal
     #5C6B69 (--slate) because background-image SVGs can't read CSS vars. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%235C6B69' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  border: 1px solid var(--line);
  border-radius: var(--radius-btn-max);
  padding-inline-start: 40px;
  padding-inline-end: 14px;
  font-family: var(--font-brand);
  color: var(--ink);
  font-size: 14px;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
/* Site ships RTL-only (Persian-first, Arabic deferred per ADR-0004) — this LTR
   flip is here so the icon stays correct if/when an LTR locale is added. */
[dir="ltr"] .navigation-search input[type="search"] {
  background-position: left 14px center;
}
.navigation-search input[type="search"]:focus {
  outline: none;
  background-color: #fff;
  border-color: var(--teal-mid);
  box-shadow: 0 0 0 4px rgba(26, 128, 121, .22);
}
/* S145 glitch #1 — invisible typed text. GeneratePress's Customizer-generated INLINE
   block (<style id="generate-style-inline-css">) ships its nav-search colours for a DARK
   nav bar:
       .navigation-search input[type="search"],
       .navigation-search input[type="search"]:active,
       .navigation-search input[type="search"]:focus { color:#fff; background-color:#3f3f3f }
   Our base rule above ties that selector's specificity (0,3,1 vs 0,2,1 — no) and wins at
   rest only because tokens.css is enqueued AFTER the inline block. But it declares no
   `color` for the focused state, so the moment the field takes focus GP's `:focus` arm
   (0,3,1) outranks our base rule (0,2,1) and repaints the text #fff — white on the white
   focus background, i.e. you type and see nothing. Confirmed at the rendered node on live:
   colour goes rgb(30,42,41) -> rgb(255,255,255) on focus.
   Fix: restate the colour across GP's own three-state selector list so specificity TIES at
   (0,3,1) and our later source order decides — no !important, no new mechanism.
   -webkit-text-fill-color is paired because WebKit/Blink lets it override `color` outright
   (notably on autofilled search history), which would reopen the identical defect. */
.navigation-search input[type="search"],
.navigation-search input[type="search"]:active,
.navigation-search input[type="search"]:focus {
  color: var(--ink);
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--ink);
}
/* Defect #10: pre-focus hover cue — lighter than :focus (soft border tint + a slight
   background lift), never overriding the focus state above. */
.navigation-search input[type="search"]:hover:not(:focus) {
  background-color: #fff;
  border-color: var(--teal-soft);
}
.navigation-search input[type="search"]::placeholder {
  color: var(--slate);
}

/* account + cart cluster — RTL-safe: gap/inset-inline-*, never margin-left/float
   (this project's own logged RTL trap, see the /cart/ alignwide fix below). */
.menu-bar-items {
  display: flex;
  align-items: center;
  gap: 14px;
}
.menu-bar-item a {
  display: flex;
  align-items: center;
  color: var(--ink);
  text-decoration: none;
}
.menu-bar-item a:hover {
  color: var(--teal-mid);
}
.drjafari-cart-item a {
  position: relative;
}
.drjafari-cart-count {
  position: absolute;
  inset-inline-end: -7px;
  top: -6px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--orange-cta);
  color: #fff;
  font-size: 9.5px;
  font-weight: var(--fw-heading);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Mobile nav-toggle bar (design-review follow-up): GP's always-visible mobile menu bar
 * (`#mobile-menu-control-wrapper`) ships with GP's own dark default background — off-brand
 * against §2's white header. Match the header. The toggle icon must be recolored too:
 * GP's `navigation_text_color` is #ffffff (measured in generate_settings, paired with its
 * dark #222 nav) and the hamburger inherits it — white-on-white and invisible once the bar
 * is white. Force it to --ink; the .gp-icon draws with currentColor. */
/* 390px overlap bug (measured on rig): .inside-header's flex-wrap drops this
 * wrapper flush against the search field above (0px gap — reads as
 * "overlapping") and GP's own `navigation_text_color:#ffffff` painted the
 * account/cart icons white-on-white (invisible, same defect class as the
 * hamburger fix below, just an uncovered sibling — [[gates-bypassed-by-the-ungated-sibling-surface]]).
 * margin-top adds breathing room; align-items:center fixes the hamburger
 * (60px tall button) sitting 20px higher than the 20px-tall account/cart row.
 */
#mobile-menu-control-wrapper {
  background: #fff;
  margin-top: 10px;
  align-items: center;
}
#mobile-menu-control-wrapper .menu-toggle,
#mobile-menu-control-wrapper .menu-toggle .gp-icon,
#mobile-menu-control-wrapper .menu-bar-item a {
  color: var(--ink);
}

/* Desktop nav bar (S127 handoff): same defect, uncovered sibling of the mobile-toggle
 * fix above — #site-navigation is GP's OTHER always-rendered nav-bar element (the
 * .main-navigation one holding the search box + account/cart on desktop, not just the
 * mobile toggle) and ships with the same dark #222 default background. Measured on the
 * rig at 1280px: getComputedStyle(#site-navigation).backgroundColor === rgb(34, 34, 34),
 * painting the dark block behind the account/cart cluster next to the search field.
 * `.menu-bar-item a { color: var(--ink) }` above already recolors the icons, so no
 * further icon-color rule is needed here — only the bar itself was still dark. */
#site-navigation {
  background: #fff;
}
/* Same GP `navigation_text_color:#ffffff` forced-white text (measured: desktop
 * .drjafari-cart-item/.drjafari-account-item anchors compute color:rgb(255,255,255))
 * outranks the generic `.menu-bar-item a{color:var(--ink)}` rule above for THIS bar too —
 * needs the same #site-navigation-scoped override the mobile wrapper already has. */
#site-navigation .menu-bar-item a {
  color: var(--ink);
}
/* Hover/focus state (S135 render pass, glitch #1): the resting fix above recolors the
 * icons but GP's dynamic customizer CSS still paints a dark box on hover —
 * `.main-navigation .menu-bar-item:hover > a{color:#fff;background-color:#3f3f3f}`
 * (measured in the rendered <head>), the uncovered `:hover` sibling of the resting
 * dark-block fix ([[class-fixes-scoped-to-the-reporting-site]]). Override at ID
 * specificity (1,2,1 > GP's 0,3,1) covering BOTH hover-on-item (GP's `>a` form) and
 * hover/focus-on-anchor, so padding outside the anchor is covered too. Replace the dark
 * box with an on-brand light teal-wash pill — a real affordance, not a dead transparent. */
#site-navigation .menu-bar-item:hover > a,
#site-navigation .menu-bar-item.sfHover > a,
#site-navigation .menu-bar-item > a:hover,
#site-navigation .menu-bar-item > a:focus {
  background-color: var(--teal-wash);
  color: var(--teal);
  border-radius: 8px;
}

/* Addendum A (S126 Wave 4b design-review) — GP's own RTL branding-order rule
 * (`.site-logo + .site-branding{order:-1}`, main-rtl.css) only fires when a `.site-logo`
 * sibling element precedes `.site-branding` in the DOM. `generate_site_branding_output`
 * above replaces GP's branding markup wholesale with our own `.drjafari-brand` div and
 * never prints `.site-logo` — so that adjacent-sibling selector never matches, and
 * `.site-branding` is left at flex order:0 while `#site-navigation` sits at order:-5
 * (`.nav-float-right #site-navigation`, main-rtl.css). Measured on the rig: branding
 * rendered at the PHYSICAL LEFT of a 1280px header, nav/search/account/cart at the right —
 * the mirror image of §2's "logo right, search center, account+cart left." Ordering our own
 * branding class directly (lower than nav's -5) fixes it without touching GP's markup or a
 * header.php override — flex order is presentation, same class of fix as the rest of this
 * file.
 */
.nav-float-right .inside-header .drjafari-brand {
  order: -6;
}

/* Addendum B (S126 Wave 4b design-review) — the card's orange primary CTA rendered grey.
 * Root cause measured via matched-rule inspection, not guessed: WooCommerce's own
 * `.woocommerce:where(...) a.button` rule (woocommerce-rtl.css) has specificity (0,0,2,1) —
 * two classes plus a tag — which outranks our single-class `.drjafari-btn-primary`
 * (0,0,1,0) regardless of load order; source order only breaks ties at EQUAL specificity.
 * Matching WC's own shape (class+class+tag) wins outright, same fix pattern as the header
 * rules above. */
.woocommerce a.button.drjafari-btn-primary {
  background: var(--orange-cta);
  color: #fff;
}

/* Addendum B, sibling site (S126 Wave 4b) — the PDP's own add-to-cart button
 * (`button.single_add_to_cart_button.button.alt`) is the SAME defect class as the card CTA
 * one template over: WC's `.woocommerce ... button.button.alt` (0,0,3,1) paints it purple
 * (`--wc-primary`). It carries no `.drjafari-btn-primary`, so Addendum B above doesn't reach
 * it. §0 reserves orange for the key purchase CTA — and the PDP add-to-cart IS that CTA (shown
 * only for OTC; Rx products suppress it, so this never colors a gated item). Adding `.button`
 * gives (0,0,4,1) — wins outright, no source-order reliance. */
.woocommerce button.single_add_to_cart_button.button.alt {
  background: var(--orange-cta);
  color: #fff;
}

/* Addendum C (S143, BUG button-consistency) — the homepage sale/related carousels
 * render the SAME product-loop CTA as /shop/ (measured: identical classes
 * `a.button.add_to_cart_button.ajax_add_to_cart.drjafari-btn-primary`), but the
 * front-page template outputs the loop WITHOUT a `.woocommerce` ancestor, so
 * Addendum B's `.woocommerce a.button.drjafari-btn-primary` never matches there and
 * the button fell back to grey #666 — orange on /shop/, grey on the homepage, the
 * exact inconsistency reported. Re-assert orange scoped to the carousel wrapper
 * (same class+class+tag shape, (0,0,3,1)) so it wins with or without `.woocommerce`.
 * Harmless on PDP related-products (already orange via Addendum B). */
.drjafari-related-carousel a.button.drjafari-btn-primary,
.drjafari-related-carousel a.button.add_to_cart_button {
  background: var(--orange-cta);
  color: #fff;
}

/* ---- Trust strip (component-sheet.md §4) — front page only, see functions.php ---- */
.drjafari-trust-strip {
  background: var(--teal-wash);
}
/* Fix pass (batch B vet, B6): mockup scrolls the strip in one row at 392 (overflow-x:auto);
   flex-wrap:wrap shipped a two-row, 108px-tall bar instead. Matched to the mockup. */
.drjafari-trust-strip-inner {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  align-items: center;
  gap: 9px;
  padding: 11px 0;
}
.drjafari-trust-pill {
  flex: none;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 7px;
  background: #fff;
  border: 1px solid var(--teal-soft);
  border-radius: var(--radius-btn-min);
  padding: 8px 11px;
  font-size: 10.5px;
  font-weight: var(--fw-subhead);
  color: var(--teal-deep);
}
.drjafari-enamad-slot {
  border: 1px dashed var(--teal-soft);
  background: transparent;
  color: var(--slate);
  text-align: center;
  line-height: 1.5;
}
.drjafari-enamad-slot .drjafari-pending {
  display: block;
  font-size: 9.5px;
  color: var(--slate);
}

/* ---- Footer (component-sheet.md §10) ----
 * Same cascade problem as batch A's D2 (hand-back §6): Woodmart prints a dynamically-
 * generated inline `.wd-footer { background-color: #fff; ... }` rule (from the
 * footer-style option), equal specificity (0,0,1,0), later in <head> than this
 * stylesheet — so a plain `.wd-footer` rule here loses on source order. `html .wd-footer`
 * is (0,0,2,0) and wins outright, same fix shape as html:root, no !important. */
html .wd-footer {
  background: var(--teal-deep);
  color: #9FC4BF;
}
.wd-footer a {
  color: inherit;
}
.drjafari-footer-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 24px;
  padding: 30px 0;
  font-size: 12.5px;
  line-height: 2.1;
}
.drjafari-footer-col {
  max-width: 300px;
}
.drjafari-footer-brandline {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 13px;
}
.drjafari-footer-name {
  font-weight: var(--fw-display);
  font-size: 15px;
  color: #fff;
}
.drjafari-footer-brand p {
  color: #7FB0AA;
  margin: 0;
}
.drjafari-footer-h {
  color: #fff;
  font-weight: var(--fw-heading);
  margin-bottom: 6px;
}
/* Fix pass (batch B vet, B5) — Homepage.dc.html's ratified social-link pill styling,
   restored with no href (see sidebar-footer.php). */
.drjafari-footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.drjafari-social-pill {
  display: inline-block;
  background: var(--teal);
  padding: 7px 12px;
  border-radius: 20px;
  font-size: 12px;
  color: #fff;
}
/* BUG-207: `.wd-footer a` (0,1,1) out-ranked the pill and painted #9FC4BF on teal (4.14:1, fails AA). */
.wd-footer a.drjafari-social-pill,
.wd-footer a.drjafari-social-pill:hover {
  color: #fff;
}
.drjafari-footer-trust .drjafari-enamad-slot {
  border-color: #145049;
  color: #9FC4BF;
  padding: 8px 11px;
  border-radius: var(--radius-btn-min);
}
.drjafari-footer-trust .drjafari-pending {
  color: #7FB0AA;
}

/* ---- C-7 (2026-08-20 owner-contact ruling): the real eNamad seal, both slots ----
 * Same box as .drjafari-trust-pill / .drjafari-footer-trust .drjafari-enamad-slot, now an
 * <a> wrapping the seal <img> instead of a dashed placeholder — batch A/B's rules above are
 * untouched; this only adds the anchor-specific bits (no underline, inline layout).
 */
.drjafari-trust-pill.drjafari-enamad-pill,
.drjafari-footer-trust .drjafari-enamad-pill {
  text-decoration: none;
  cursor: pointer;
}
.drjafari-footer-trust .drjafari-enamad-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #145049;
  color: #9FC4BF;
  padding: 8px 11px;
  border-radius: var(--radius-btn-min);
  font-size: 12px;
}
.drjafari-enamad-pill img {
  display: block;
  border-radius: 4px;
  flex: none;
  width: 34px;
  height: 34px;
  overflow: hidden;
}

/* ==================================================================================
 * Batch C — homepage (front-page.php). Values copied from Homepage.dc.html's own two
 * frames (392 / 1180), MOCKUP-MAP §2 ruling: <769px = 392 frame, >=769px = the 1180
 * frame's desktop treatment (same interpolation precedent batch B set above for
 * .drjafari-brand .bn-name/.bn-sl — no ratified design for 769-1023, desktop value
 * carried up through that band).
 * ================================================================================== */

/* S145 glitch #2 — no breathing room between home bands. The asymmetric
   `24px 0 4px` meant the gap between two adjacent bands was 4px (outgoing) + 24px
   (incoming) = 28px at EVERY width, with no desktop step-up — measured 0px section
   margin, 28px band-to-band on both 1180 and 392. Full-bleed coloured bands
   (.drjafari-pharmacist-card, .drjafari-consult-band) read as glued to their
   neighbours at that spacing. Symmetric padding makes the rhythm one number: the
   band-to-band gap is 2x the padding, so 24px -> 48px on phone and 32px -> 64px on
   desktop (the >=769px step the original rule never had). */
.drjafari-home section {
  padding: 24px 0;
}
.drjafari-home .container {
  max-width: 1180px;
}
/* S267: .drjafari-home is a flex item of GeneratePress's #content (display:flex) and
   sized to its content (1180px) at every viewport, so the whole home column overflowed
   between 769 and 1179px (S267-d1 §DISSENT 1). Let it shrink to the viewport. */
.drjafari-home {
  min-width: 0;
  flex: 1 1 auto;
}
.drjafari-section-h {
  font-weight: var(--fw-display);
  font-size: 18px;
  color: var(--teal-deep);
  margin: 0 0 13px;
}
.drjafari-section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 13px;
}
.drjafari-see-all {
  font-size: 12.5px;
  color: var(--teal);
  font-weight: var(--fw-subhead);
  text-decoration: none;
}

/* placeholder swatch — the mockup's own diagonal-stripe treatment for anything with no
   real image behind it (component-sheet.md §1: "gradient placeholder until a real photo"). */
.drjafari-placeholder-swatch {
  background: repeating-linear-gradient(135deg, #E3EFEC 0 13px, #EFF6F4 13px 26px);
  display: flex;
  align-items: center;
  justify-content: center;
  /* S276-w2 (T53): the swatch ground is a repeating-linear-gradient whose darker stop
     is #E3EFEC; the old #7E908D measured 2.85:1 on it (fails AA). --slate (#5C6B69)
     measures 4.74:1 on #E3EFEC — existing token, no new colour. */
  color: var(--slate);
  font-size: 11px;
  font-family: 'Courier New', monospace;
  text-align: center;
  border-radius: 18px;
}
.drjafari-category-empty {
  padding: 20px;
  border-radius: 16px;
  font-family: var(--font-brand);
  color: var(--slate);
}

/* ---- listing empty state (component-sheet.md §9) ---- */
.drjafari-listing-empty {
  padding: 32px 20px;
  border: 1.5px dashed var(--teal-soft);
  border-radius: var(--radius-card-max);
  text-align: center;
  font-family: var(--font-brand);
}
.drjafari-listing-empty-icon {
  color: var(--teal-mid);
  margin-bottom: 14px;
}
.drjafari-listing-empty-copy {
  color: var(--slate);
  font-size: 14.5px;
  line-height: var(--line-height-persian);
  margin: 0 0 18px;
}
.drjafari-listing-empty-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 320px;
  margin: 0 auto;
}
.drjafari-listing-empty-actions .drjafari-btn {
  display: inline-block;
}

/* ---- hero — 4-slide billboard (S268; overlay S267-d1 / figurehead HeroBanner B) ----
   Four stacked boards, one visible. Same overlay as the static S267 hero: plate is
   decorative (alt="") and every word is HTML (ADR-0020 rail 1). Two plates per slide,
   two aspects, each its own generation. Controls sit in the empty overlay zone
   (inline-start in RTL = physical right) and never cover the left 34 % subject.
   <900px — a 9:5 plate carrying only the title; the sub and CTAs sit below it on the
   same teal-deep ground, so the block still reads as one billboard.
   >=900px — a 3:1 plate with the whole overlay on its empty right two-thirds.
   The block's own breakpoint is 900, not the site's 769. Spec:
   .claude/skills/figurehead/specs/hero-home-plate-spec.md. */
.drjafari-hero-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--teal-deep);
  color: #fff;
}
.drjafari-hero-slides {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  position: relative;
}
.drjafari-hero-board {
  grid-area: 1 / 1;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
  background: var(--teal-deep);
  color: #fff;
  z-index: 1;
}
.drjafari-hero-board[aria-hidden="true"] {
  z-index: 0;
  opacity: 0;
  pointer-events: none;
}
.drjafari-hero-plate,
.drjafari-hero-board::before {
  grid-area: 1 / 1;
}
.drjafari-hero-plate {
  display: block;
  aspect-ratio: 9 / 5;
}
.drjafari-hero-plate img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  object-position: 0% 50%; /* the subject lives on the left: any crop takes the empty right first */
}
/* Contrast floor under the overlay whatever a plate does: it darkens only the text side
   and fades the plate's foot into the ground below. On a teal-deep plate it is close to
   invisible, which is the point — it exists for the plate that drifts. */
.drjafari-hero-board::before {
  content: "";
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to left, rgba(10, 58, 56, .85) 0%, rgba(10, 58, 56, .55) 40%, rgba(10, 58, 56, 0) 64%),
    linear-gradient(to bottom, rgba(10, 58, 56, 0) 60%, var(--teal-deep) 100%);
}
.drjafari-hero-title {
  grid-area: 1 / 1;
  z-index: 2;
  align-self: center;
  justify-self: start;
  max-width: 56%;
  margin: 0;
  padding-inline-start: 20px;
  font-family: var(--font-brand);
  font-weight: var(--fw-display);
  font-size: clamp(28px, 7.4vw, 44px);
  line-height: 1.4;
  letter-spacing: 0; /* tracking breaks Persian joins: never tighten a cursive script */
  color: #fff;
  text-wrap: pretty;
}
.drjafari-hero-body {
  position: relative;
  z-index: 2;
  padding: 2px 20px 24px;
}
.drjafari-hero-sub {
  margin: 0 0 18px;
  max-width: 34em;
  font-size: 15px;
  line-height: 1.9;
  color: var(--teal-soft);
  text-wrap: pretty; /* no one-word last line */
}
.drjafari-hero-ctas {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* Prev/next + dots: a strip under the plates, never over the subject (the retired
   slider's arrows sat on the left third). Width is content-sized and start-aligned
   so the cluster stays in the overlay column. */
.drjafari-hero-controls {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  align-self: start;
  box-sizing: border-box;
  width: auto;
  max-width: 58%;
  margin-inline-start: 12px;
  margin-inline-end: auto;
  margin-bottom: 8px;
  padding: 2px 4px;
}
.drjafari-hero-prev,
.drjafari-hero-next,
.drjafari-hero-pause,
.drjafari-hero-dot {
  appearance: none;
  box-sizing: border-box;
  margin: 0;
  flex-shrink: 0;
  color: #fff;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.drjafari-hero-prev,
.drjafari-hero-next {
  display: grid;
  place-items: center;
  /* theme T10: 32+12=44px at every width; the 16px icon stays centred via grid. */
  width: calc(var(--space-8) + var(--space-3));
  height: calc(var(--space-8) + var(--space-3));
  padding: 0;
  border-radius: 50%;
}
.drjafari-hero-prev svg,
.drjafari-hero-next svg {
  display: block;
}
/* theme T3: the pause toggle, 44px (house goal); the icon follows aria-pressed. */
.drjafari-hero-pause {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
}
.drjafari-hero-pause__play,
.drjafari-hero-pause[aria-pressed="true"] .drjafari-hero-pause__pause { display: none; }
.drjafari-hero-pause[aria-pressed="true"] .drjafari-hero-pause__play { display: block; }
[dir="rtl"] .drjafari-hero-prev svg,
[dir="rtl"] .drjafari-hero-next svg,
.rtl .drjafari-hero-prev svg,
.rtl .drjafari-hero-next svg {
  transform: scaleX(-1);
}
.drjafari-hero-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-width: 0;
  gap: 2px;
}
.drjafari-hero-dot {
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 50%;
}
.drjafari-hero-dot::after {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  margin: 8px auto;
  border-radius: 50%;
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--teal-soft);
}
.drjafari-hero-dot.is-active::after,
.drjafari-hero-dot[aria-current="true"]::after {
  background: #fff;
  box-shadow: none;
}
.drjafari-hero-prev:focus-visible,
.drjafari-hero-next:focus-visible,
.drjafari-hero-pause:focus-visible,
.drjafari-hero-dot:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
/* 19px/700 is WCAG "large text" (>= 18.66px bold). White on --orange measures 3.6:1,
   which passes only at large size — so the hero's CTAs never go below it. */
.drjafari-hero .drjafari-btn {
  font-size: 19px;
  line-height: 1.5;
  padding: 12px 24px;
}
/* The parent theme's a:hover/a:focus colour beats .drjafari-btn-primary and turns its
   text black; the hero pins it. Hover darkens rather than using --orange-light: white on
   --orange-light is 2.6:1, white on this mix stays above 4.5:1. */
.drjafari-hero .drjafari-btn-primary:hover,
.drjafari-hero .drjafari-btn-primary:focus {
  color: #fff;
}
.drjafari-hero .drjafari-btn-primary:hover {
  background: var(--orange-cta-hover);
}
.drjafari-hero .drjafari-btn-outline {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(191, 224, 220, .55);
}
.drjafari-hero .drjafari-btn-outline:hover,
.drjafari-hero .drjafari-btn-outline:focus {
  color: #fff;
}
.drjafari-hero .drjafari-btn-outline:hover {
  background: rgba(255, 255, 255, .08);
  border-color: var(--teal-soft);
}
.drjafari-hero .drjafari-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
@media (prefers-reduced-motion: no-preference) {
  .drjafari-hero .drjafari-btn {
    transition: background-color .15s ease, border-color .15s ease;
  }
  .drjafari-hero-board {
    transition: opacity .45s ease;
  }
}
@media (min-width: 900px) {
  .drjafari-hero-stage {
    width: 100%;
    border-radius: 20px;
  }
  .drjafari-hero-slides {
    width: 100%;
    aspect-ratio: 3 / 1;
    min-height: 340px;
  }
  .drjafari-hero-board {
    grid-template-rows: 1fr auto auto 1fr;
    width: 100%;
    height: 100%;
    min-height: 0;
    aspect-ratio: auto;
    border-radius: 0;
  }
  .drjafari-hero-plate,
  .drjafari-hero-board::before {
    position: absolute;
    inset: 0;
  }
  .drjafari-hero-plate {
    aspect-ratio: auto;
  }
  .drjafari-hero-board::before {
    background: linear-gradient(to left, rgba(10, 58, 56, .88) 0%, rgba(10, 58, 56, .62) 40%, rgba(10, 58, 56, 0) 66%);
  }
  .drjafari-hero-title {
    grid-area: 2 / 1;
    align-self: end;
    max-width: 58%; /* stay in the empty overlay zone; long titles must not cover the subject */
    padding-inline-start: clamp(40px, 4.7vw, 64px);
    font-size: clamp(40px, 2.6vw + 20px, 58px);
    line-height: 1.35;
  }
  .drjafari-hero-body {
    grid-area: 3 / 1;
    justify-self: start;
    max-width: 580px;
    padding: 14px 0 0;
    padding-inline-start: clamp(40px, 4.7vw, 64px);
  }
  .drjafari-hero-sub {
    margin-bottom: 26px;
    max-width: 30em;
    font-size: 18px;
  }
  .drjafari-hero-ctas {
    flex-direction: row;
    gap: 12px;
  }
  .drjafari-hero .drjafari-btn {
    padding: 13px 28px;
  }
  .drjafari-hero-controls {
    align-self: start;
    margin-inline-start: clamp(16px, 2.2vw, 28px);
    margin-bottom: 10px;
    max-width: 42%;
    gap: 8px;
    padding: 0 0 4px;
  }
  .drjafari-hero-prev,
  .drjafari-hero-next {
    width: calc(var(--space-8) + var(--space-3));
    height: calc(var(--space-8) + var(--space-3));
  }
  .drjafari-hero-dot {
    width: 32px;
    height: 32px;
  }
  .drjafari-hero-dot::after {
    margin: 12px auto;
  }
}

/* ---- buttons (component-sheet.md §6) ---- */
.drjafari-btn {
  display: block;
  text-align: center;
  text-decoration: none;
  border-radius: var(--radius-btn-max);
  font-family: var(--font-brand);
  font-weight: var(--fw-heading);
  cursor: pointer;
  box-sizing: border-box;
}
.drjafari-btn-block {
  width: 100%;
}
.drjafari-btn-primary {
  background: var(--orange-cta);
  color: #fff;
  border: none;
  padding: 14px;
  font-size: 15px;
}
.drjafari-btn-primary:hover,
.drjafari-btn-primary:focus {
  color: #fff;
}
/* S267: hover darkens. White on --orange-light is 2.6:1; white on this mix is 4.83:1
   (measured S267-d1). The parent theme's a:hover colour had turned the text black. */
.drjafari-btn-primary:hover {
  background: var(--orange-cta-hover);
}
.drjafari-btn-outline {
  background: #fff;
  color: var(--teal);
  border: 1.5px solid var(--teal-soft);
  padding: 13px;
  font-size: 14px;
}
.drjafari-btn-on-teal {
  background: #fff;
  color: var(--teal-deep);
  border: none;
  padding: 12px;
  font-size: 13.5px;
}
.drjafari-btn-primary-teal {
  background: var(--teal);
  color: #fff;
  border: none;
  padding: 12px 20px;
  font-size: 13.5px;
}
/* theme T11 (audit finding 9): the R7 hovers as drawn on board §5. The hero's own
   outline rule (.drjafari-hero .drjafari-btn-outline:hover) stays more specific. */
.drjafari-btn-outline:hover { background: var(--teal-wash); color: var(--teal); }
.drjafari-btn-primary-teal:hover { background: var(--teal-deep); color: #fff; }
.drjafari-btn-on-teal:hover { background: var(--teal-wash); color: var(--teal-deep); }

/* ---- meet pharmacist (component-sheet.md §5) ---- */
.drjafari-pharmacist-card {
  padding: 22px 0 4px;
}
.drjafari-pharmacist-inner {
  background: var(--teal);
  border-radius: 20px;
  padding: 20px;
  color: #fff;
}
.drjafari-pharmacist-photo {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  flex: none;
  /* S143: now a real <img> of the pharmacist (owner-profile-1.png), not a
     placeholder swatch. object-fit keeps the square source circular; the solid
     teal is only a fallback if the image ever fails to load. */
  object-fit: cover;
  object-position: center;
  background: var(--teal-deep);
  border: 2px solid var(--teal-soft);
  margin-bottom: 14px;
}
.drjafari-pharmacist-name {
  font-weight: var(--fw-display);
  font-size: 16px;
}
.drjafari-pharmacist-title {
  font-size: 11.5px;
  color: var(--teal-soft);
  margin-top: 3px;
}
.drjafari-pharmacist-quote {
  font-size: 13px;
  line-height: 2;
  color: #E4F1EE;
  margin: 14px 0 16px;
}
.drjafari-pharmacist-inner .drjafari-btn-on-teal {
  width: 100%;
}

/* ---- categories ---- */
.drjafari-category-grid {
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.drjafari-category-tile {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px;
  text-decoration: none;
}
.drjafari-category-tile:hover {
  border-color: var(--teal-soft);
  background: #FCFEFD;
}
/* token-swatch (S127 Wave 2 H2) — no clean category photography exists, rotates
   through our own gradient tokens instead of a photo. */
.drjafari-category-swatch {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 12px;
}
.drjafari-category-swatch-0 {
  background: linear-gradient(135deg, var(--teal-soft), var(--teal-wash));
}
.drjafari-category-swatch-1 {
  background: linear-gradient(135deg, var(--orange-soft), var(--teal-wash));
}
.drjafari-category-swatch-2 {
  background: linear-gradient(135deg, var(--teal-mid), var(--teal-soft));
}
.drjafari-category-name {
  font-weight: var(--fw-heading);
  font-size: 14.5px;
  color: var(--ink);
}
.drjafari-category-desc {
  font-size: 12px;
  color: var(--slate);
  margin-top: 3px;
}

/* ---- featured products ---- */
.drjafari-product-grid {
  display: flex;
  gap: 13px;
  overflow-x: auto;
  padding-bottom: 6px;
}
.drjafari-product-card {
  flex: 0 0 198px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
}
.drjafari-product-image {
  height: 142px;
}
.drjafari-product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.drjafari-product-body {
  padding: 12px 13px 14px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1;
}
.drjafari-product-name {
  font-weight: var(--fw-heading);
  font-size: 13.5px;
  color: var(--ink);
  line-height: 1.6;
}
.drjafari-product-price {
  font-weight: var(--fw-display);
  font-size: 14.5px;
  color: var(--teal-deep);
}
.drjafari-product-card .drjafari-btn-primary,
.drjafari-product-card .drjafari-btn-outline {
  padding: 9px;
  font-size: 12.5px;
  font-weight: var(--fw-subhead);
  border-radius: var(--radius-btn-min);
}

/* ---- consultation band ---- */
.drjafari-consult-band {
  padding: 24px 0 4px;
}
.drjafari-consult-inner {
  background: var(--orange-soft);
  background-color: var(--orange-tint);
  border: 1px solid var(--orange-soft);
  border-radius: 18px;
  padding: 18px;
}
.drjafari-consult-copy {
  font-weight: var(--fw-heading);
  font-size: 14.5px;
  color: var(--teal-deep);
  line-height: 1.85;
  margin-bottom: 13px;
}
.drjafari-consult-inner .drjafari-btn-primary-teal {
  display: inline-block;
}

/* ---- blog teasers ---- */
.drjafari-blog-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.drjafari-blog-card {
  display: flex;
  gap: 13px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
}
.drjafari-blog-image {
  width: 86px;
  flex: none;
  border-radius: 0;
}
.drjafari-blog-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.drjafari-blog-body {
  padding: 13px 4px 13px 0;
  flex: 1;
}
.drjafari-blog-tag {
  font-size: 10.5px;
  color: var(--teal-mid);
  font-weight: var(--fw-subhead);
  margin-bottom: 5px;
}
.drjafari-blog-title {
  font-weight: var(--fw-heading);
  font-size: 13.5px;
  color: var(--ink);
  line-height: 1.7;
}

/* ---- promo banners (S127 Wave 2 H3) — token-gradient cards, no photos ---- */
.drjafari-promo-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.drjafari-promo-card {
  border-radius: 20px;
  padding: 22px;
}
.drjafari-promo-card-a {
  background: linear-gradient(135deg, var(--teal-wash), var(--teal-soft));
}
.drjafari-promo-card-b {
  background: linear-gradient(135deg, var(--orange-tint), var(--teal-wash));
}
.drjafari-promo-title {
  font-weight: var(--fw-display);
  font-size: 17px;
  color: var(--teal-deep);
  margin-bottom: 8px;
}
.drjafari-promo-sub {
  font-size: 13px;
  color: #3B4A48;
  line-height: var(--line-height-persian);
  margin-bottom: 16px;
}
.drjafari-promo-card .drjafari-btn {
  display: inline-block;
}

/* ---- sale carousel (S127 Wave 2 H4) — reuses .drjafari-related-carousel verbatim,
   same class family as the PDP related-products carousel, zero new JS. ---- */
.drjafari-sale-carousel .drjafari-related-carousel {
  padding-block-start: 4px;
}

/* ---- popular tabs (S127 Wave 2 H5) ---- */
.drjafari-popular-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin-bottom: 14px;
}
.drjafari-popular-tab {
  flex: none;
  border: 1.5px solid var(--teal-soft);
  background: #fff;
  color: var(--teal-deep);
  border-radius: var(--radius-btn-max);
  padding: 8px 16px;
  font-family: var(--font-brand);
  font-weight: var(--fw-subhead);
  font-size: 13px;
  cursor: pointer;
}
.drjafari-popular-tab.is-active {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}
.drjafari-popular-panel {
  display: none;
}
.drjafari-popular-panel.is-active {
  display: block;
}
.drjafari-popular-grid ul.products {
  display: flex;
  gap: 13px;
  overflow-x: auto;
  padding-bottom: 6px;
  padding-inline-start: 0;
  list-style: none;
  margin: 0;
}
.drjafari-popular-grid ul.products li.product {
  flex: 0 0 198px;
}

/* ---- >=769px: the 1180 frame's desktop treatment ---- */
@media (min-width: 769px) {
  /* S145 glitch #2 — desktop half of the band rhythm: 32px each side = 64px gap. */
  .drjafari-home section {
    padding: 32px 0;
  }
  .drjafari-btn-block {
    width: auto;
  }
  .drjafari-btn-primary,
  .drjafari-btn-outline {
    padding: 15px 26px;
    font-size: 15px;
  }

  .drjafari-pharmacist-inner {
    display: flex;
    align-items: center;
    gap: 24px;
    border-radius: 22px;
    padding: 28px;
  }
  .drjafari-pharmacist-photo {
    width: 120px;
    height: 120px;
    margin-bottom: 0;
  }
  .drjafari-pharmacist-body {
    flex: 1;
  }
  .drjafari-pharmacist-name {
    font-size: 20px;
  }
  .drjafari-pharmacist-title {
    font-size: 13px;
    margin-top: 4px;
  }
  .drjafari-pharmacist-quote {
    font-size: 15px;
    line-height: 1.95;
    margin: 12px 0 0;
    max-width: 620px;
  }
  .drjafari-pharmacist-inner .drjafari-btn-on-teal {
    width: auto;
    flex: none;
    padding: 14px 22px;
    font-size: 14px;
  }

  .drjafari-section-h {
    font-size: 22px;
    margin-bottom: 16px;
  }
  .drjafari-see-all {
    font-size: 13.5px;
  }

  /* S127 Wave 2 H2: auto-fill rather than a fixed 3-up grid — graceful for today's 2
     real top-level categories and for whatever N exist once more are added. */
  .drjafari-category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 18px;
  }
  .drjafari-category-tile {
    padding: 20px;
  }
  .drjafari-category-name {
    font-size: 16px;
  }
  .drjafari-category-desc {
    font-size: 13px;
    margin-top: 4px;
  }

  .drjafari-product-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    overflow-x: visible;
  }
  .drjafari-product-image {
    height: 140px;
  }

  .drjafari-consult-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    border-radius: 20px;
    padding: 26px 30px;
  }
  .drjafari-consult-copy {
    font-size: 17px;
    line-height: 1.8;
    max-width: 680px;
    margin-bottom: 0;
  }
  .drjafari-consult-inner .drjafari-btn-primary-teal {
    flex: none;
    padding: 15px 28px;
    font-size: 15px;
  }

  .drjafari-blog-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 18px;
  }
  .drjafari-blog-card {
    flex-direction: column;
    border-radius: 18px;
  }
  .drjafari-blog-image {
    width: 100%;
    height: 130px;
  }
  .drjafari-blog-body {
    padding: 16px 18px 18px;
  }
  .drjafari-blog-tag {
    font-size: 11px;
    margin-bottom: 7px;
  }
  .drjafari-blog-title {
    font-size: 15px;
  }

  .drjafari-promo-grid {
    flex-direction: row;
  }
  .drjafari-promo-card {
    flex: 1;
    padding: 30px;
  }
  .drjafari-promo-title {
    font-size: 20px;
  }
  .drjafari-promo-sub {
    font-size: 14px;
  }
}

/* ==================================================================================
 * Batch D Stream A — PDP (wp-mu-plugins/drjafari-pdp-template.php). Zero PDP CSS
 * existed before this batch (grep count 0 for every class below, F4 in the batch C
 * vet). Mobile-first: <769px here, >=769px override follows below, same MOCKUP-MAP
 * §2 interpolation rule batch B/C already established (<769px = ProductPage.dc.html's
 * 392 frame, >=769px = its 1180 frame; no ratified 769-1023 design, so the desktop
 * value carries up through that band).
 *
 * Two blocks below (badges, brand-link) map 1:1 to a mockup element — values copied
 * verbatim. #3B4A48/2.05/2.1 line-height for description prose is ProductPage.dc.html's
 * own tab-content rule, copied verbatim (also ratified as .gd-note/.opt in
 * component-style-guide.html, so it is a real system color, not a new one).
 * Three blocks (badges box, specs table, pharmacist note, consultation CTA) have no
 * literal mockup counterpart — the mu-plugin's stacked-section B1 order has no tabbed
 * PDP mockup to trace. Each is built from the nearest ratified analogy already in this
 * token system, named in its own comment below — same call the A-5b styling ruling
 * makes explicit ("applying a ratified system, not inventing one"). Flagged in the
 * hand-back as a judgment call, not a silent decision.
 * ================================================================================== */

/* ---- brand link (mu-plugin priority 6) — ProductPage.dc.html brand label
   (لاروش‌پوزای), both frames, values copied verbatim ---- */
.drjafari-brand-link {
  margin: 0 0 4px;
}
.drjafari-brand-link a {
  font-size: 12px;
  color: var(--teal);
  font-weight: var(--fw-subhead);
  text-decoration: none;
}

/* ---- badges (priority 31) — analogy: component-style-guide.html §5 .badge pill
   (teal-wash chip), enlarged for full-sentence content instead of a short tag.
   flex+gap here is the A-1 fix for the "شاندیزمشهد" no-gap concatenation — the
   absence of this rule, not a mu-plugin defect. ---- */
.drjafari-pdp-badges {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0;
}
.drjafari-badge {
  display: inline-block;
  align-self: flex-start;
  background: var(--teal-wash);
  color: var(--teal);
  font-size: 11.5px;
  font-weight: var(--fw-subhead);
  padding: 7px 12px;
  border-radius: 20px;
  line-height: 1.6;
}
/* judgment call: the orange/soft-warning pair is the mockup's own rx-box treatment
   for a restrictive/attention claim (component-style-guide.html §9 .rx-box), reused
   here because this badge carries a shipping restriction, not a neutral fact. Content
   (including the emoji) is A-7/F3 territory — untouched. */
.drjafari-badge--refrigerated {
  background: var(--orange-tint);
  color: var(--warm-ink);
}

/* ---- pharmacist note (priority 35) — component-style-guide.html §1 .gd-note,
   copied verbatim (teal-wash note box already ratified for exactly this purpose:
   a trust-flavoured callout), applied here to a customer-facing block. ---- */
.drjafari-pharmacist-note {
  background: var(--teal-wash);
  border: 1px solid var(--teal-soft);
  border-radius: 12px;
  padding: 14px 16px;
  margin: 16px 0;
}
.drjafari-pharmacist-note__title {
  font-weight: var(--fw-heading);
  font-size: 14px;
  color: var(--teal-deep);
  margin: 0 0 6px;
}
.drjafari-pharmacist-note__text {
  font-size: 13px;
  color: #3B4A48;
  line-height: 1.95;
  margin: 0 0 8px;
}
.drjafari-pharmacist-note__meta {
  font-size: 11.5px;
  color: var(--slate);
  margin: 0 0 6px;
}
.drjafari-pharmacist-note__link a {
  font-size: 12px;
  color: var(--teal);
  font-weight: var(--fw-subhead);
}

/* ---- description (priority 39) — ProductPage.dc.html tab-content prose, mobile
   frame values copied verbatim (padding/font-size/#3B4A48/line-height). ---- */
.drjafari-description {
  margin: 18px 0;
}
.drjafari-description h3 {
  font-weight: var(--fw-heading);
  font-size: 15px;
  color: var(--teal-deep);
  margin: 18px 0 6px;
}
.drjafari-description h3:first-child {
  margin-top: 0;
}
.drjafari-description > div {
  font-size: 13px;
  color: #3B4A48;
  line-height: 2.05;
  margin: 0;
}

/* ---- consultation CTA (priority 41) — analogy: .drjafari-btn-primary-teal (already
   ratified, homepage consult band) applied to this link. flex+gap here is the A-1 fix
   for the "خریدساعات" no-gap concatenation — the absence of this rule, not a
   mu-plugin defect. ---- */
.drjafari-consultation-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
}
.drjafari-consultation-cta a {
  display: inline-block;
  background: var(--teal);
  color: #fff;
  border-radius: var(--radius-btn);
  padding: 12px 20px;
  font-size: 13.5px;
  font-weight: var(--fw-heading);
  text-decoration: none;
}
.drjafari-consultation-hours {
  font-size: 12px;
  color: var(--slate);
}

@media (min-width: 769px) {
  .drjafari-brand-link a {
    font-size: 13px;
  }
  .drjafari-pdp-badges {
    flex-direction: row;
  }
  .drjafari-badge {
    font-size: 12.5px;
    padding: 8px 14px;
  }
  .drjafari-pharmacist-note {
    padding: 16px 20px;
    max-width: 620px;
  }
  .drjafari-pharmacist-note__title {
    font-size: 15px;
  }
  .drjafari-pharmacist-note__text {
    font-size: 14px;
  }
  .drjafari-description {
    max-width: 620px;
  }
  .drjafari-description h3 {
    font-size: 16px;
  }
  .drjafari-description > div {
    font-size: 14.5px;
    line-height: 2.1;
  }
  .drjafari-consultation-cta a {
    padding: 13px 24px;
    font-size: 14px;
  }
}

/* ---- A-5 fixture-only comparison-article mock (functions.php, gated on TEST-ONLY
   title marker) — dashed teal-soft frame borrows component-style-guide.html's own
   "this is a prototype note" visual language (.frame), so the fixture reads as
   visibly provisional rather than as a shipped page section. ---- */
.drjafari-pdp-fixture-compare {
  margin: 24px 0;
  padding: 16px;
  border: 1px dashed var(--teal-soft);
  border-radius: 16px;
  background: var(--cream);
}
.drjafari-pdp-fixture-compare h3 {
  font-weight: var(--fw-heading);
  font-size: 15px;
  color: var(--teal-deep);
  margin: 4px 0 12px;
}
.drjafari-fixture-flag {
  font-size: 11.5px;
  color: var(--slate);
  line-height: 1.9;
  margin: 0 0 12px;
}
.drjafari-fixture-compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  /* S273-w5 (BUG-204): 320 px containment — the 4-column fixture table is wider
     than a narrow phone; scroll it inside its own box instead of the document. */
  display: block;
  max-width: 100%;
  overflow-x: auto;
}
.drjafari-fixture-compare-table th,
.drjafari-fixture-compare-table td {
  border: 1px solid var(--line);
  padding: 8px;
  text-align: right;
}
.drjafari-fixture-compare-table thead th {
  background: #fff;
  color: var(--teal-deep);
  font-weight: var(--fw-subhead);
}
.drjafari-fixture-compare-table tbody th {
  color: var(--slate);
  font-weight: var(--fw-label);
  background: #fff;
}
.drjafari-fixture-compare-table tbody td {
  color: var(--ink);
}

@media (min-width: 769px) {
  .drjafari-pdp-fixture-compare {
    max-width: 820px;
    padding: 22px;
  }
  .drjafari-fixture-compare-table {
    font-size: 13px;
  }
}

/* ---- A-5b (fixture-only comment-thread preview) REMOVED S133 (WS-C) — the ratified
   Reviews.dc.html design superseded this placeholder; see functions.php's A-5b note
   for why. This CSS is orphaned along with it. ---- */

/* ---- S121b D1: /cart/ RTL alignwide overflow (38px @392, 48px @900) ----
 * GeneratePress prints (inline, `#generate-style-inline-css`) a margin-left-only breakout rule:
 * `.entry-content .alignwide{margin-left:-40px;width:calc(100% + 80px)}`, mobile
 * (`max-width:768px`, GP's own `generate_get_media_query('mobile')`) override -30px/+60px. Under
 * `dir:rtl` this is over-constrained (CSS 2.1 §10.3.3: an RTL block with `margin-left` set but
 * `margin-right`/`right` auto has ITS OWN margin-left discarded and solved for) — measured on
 * `.wp-block-woocommerce-cart.alignwide` @392px: declared -30px, but actual left lands at
 * -29.95 against a 332px-wide symmetric parent, i.e. the solved value (332-392-0=-60), not the
 * declared one. `margin-inline` sets both sides explicitly, so nothing is left for the UA to
 * solve away. Same specificity as GP's inline rule (`.entry-content .alignwide`, 0,0,2,0);
 * `tokens.css` loads after `#generate-style-inline-css` in <head>, so source order wins outright
 * — no !important needed. Does not touch `.full-width-content .entry-content .alignwide`
 * (GP's own more-specific override for full-width templates) — that selector doesn't match
 * /cart/'s body class and this rule must not fight it on pages where it does. */
.entry-content .alignwide {
  margin-inline: -40px;
}
@media (max-width: 768px) {
  .entry-content .alignwide {
    margin-inline: -30px;
  }
}

/* ---- S121b D1 follow-up: the 8px residual left after the alignwide fix above ----
 * Vendor pairing `.wc-block-grid__products{margin:0 -8px 16px}` +
 * `.wc-block-grid__product{border-left/right:8px solid transparent}` assumes ≥8px of parent
 * inline padding to absorb the -8px gutter bleed. The alignwide fix above puts that parent flush
 * at the viewport edge (0…392), so nothing absorbs it anymore. Neutralise here instead of
 * `overflow-x:hidden` on an ancestor (would mask the symptom, and risks breaking
 * sticky/dropdown behaviour elsewhere). `margin-inline:0` removes the 16px overhang; the
 * children's own 8px transparent border-inset plus this 8px padding lines the grid up at 16px
 * from the viewport edge — the ratified gutter (Homepage.dc.html's trust-strip
 * `padding:12px 16px`), matching the rest of the phone layout. Scoped to
 * `.wp-block-woocommerce-cart` — this grid also renders on shop/category/related-products, and a
 * cart-driven change must not silently alter those pages too. */
.wp-block-woocommerce-cart .wc-block-grid__products {
  margin-inline: 0;
  padding-inline: 8px;
}

/* B-BREADCRUMB (S125) — component-sheet.md §3: slate text, teal-soft "›" separators,
 * teal-mid links; last crumb muted/non-link. WooCommerce's default delimiter is a bare text
 * node between the <a> tags with nothing to hook a separate color onto, so
 * `woocommerce_breadcrumb_defaults` (functions.php) wraps it in `.wc-bc-sep` — styled here. */
/* S274: .woocommerce prefix matches Woo core's (0,2,1) :where() rule, which otherwise paints #767676 */
.woocommerce .woocommerce-breadcrumb {
  color: var(--slate);
  font-size: 13px;
}

.woocommerce .woocommerce-breadcrumb a {
  color: var(--teal);
  text-decoration: none;
}

.woocommerce-breadcrumb a:hover {
  text-decoration: underline;
}

.woocommerce-breadcrumb .wc-bc-sep {
  color: var(--teal-soft);
}

/* §1 product card (S125) — component-sheet.md §1: WooCommerce's default loop card
 * (category/search/related grids), via wp-theme/drjafari/woocommerce/content-product.php.
 * Reuses existing tokens/classes (--line/--radius-card, .drjafari-placeholder-swatch,
 * .drjafari-btn*) rather than restyling them — only what's new to this card is here. */
.drjafari-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.drjafari-card-media {
  display: block;
}
.drjafari-card-image {
  aspect-ratio: 4 / 3;
}
.drjafari-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.drjafari-card-body {
  padding: 13px 14px 15px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.drjafari-card-badge {
  font-size: 11px;
  font-weight: var(--fw-subhead);
  color: var(--teal-mid);
}
.drjafari-card-name {
  font-weight: var(--fw-heading);
  font-size: 14px;
  color: var(--ink);
  line-height: 1.6;
  text-decoration: none;
}
.drjafari-card-brand {
  font-size: 12px;
  color: var(--slate);
}
.drjafari-card-price {
  font-weight: var(--fw-display);
  font-size: 15px;
  color: var(--teal-deep);
  margin-top: auto;
}
.drjafari-card .drjafari-btn {
  margin-top: 8px;
}

/* §9 listing header (S125) — component-sheet.md §9: count on the right, sort on the left in
 * RTL (flex-direction follows dir:rtl, so first-in-source = right-most). */
.drjafari-listing-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.drjafari-listing-count {
  margin: 0;
  color: var(--slate);
  font-size: 14px;
}

.drjafari-listing-header .woocommerce-ordering {
  margin: 0;
}

/* §4 badge svg (S125) */
.drjafari-badge--refrigerated svg {
  vertical-align: -2px;
}

/* §8 filter sidebar (S125) — component-sheet.md §8: desktop white sidebar card, dedicated
 * font-brand family since it wraps WooCommerce's own widget markup (not our template partial,
 * so nothing upstream sets it). RTL: aside renders on the visual right because it's first in
 * source order under dir:rtl, matching CategoryPage.dc.html's layout — no row-reverse needed. */
.drjafari-shop-layout {
  display: flex;
  align-items: flex-start;
  gap: 26px;
  font-family: var(--font-brand);
}

.drjafari-shop-main {
  flex: 1;
  min-width: 0;
  position: relative; /* anchors the WS-B loading overlay (frame 2a) */
}

/* S145 glitch #4 — misaligned archive cards. The card ANATOMY was already correct
   (.drjafari-card is a column flexbox, .drjafari-card-body is flex:1 and
   .drjafari-card-price carries margin-top:auto, so price + add-to-cart bottom-anchor
   inside their own card). What was never given a layout container is the archive grid
   itself: only .drjafari-popular-grid and .drjafari-related-carousel got one, so
   /shop/ and the category archives still fell through to WooCommerce's bundled
   float layout. Floated items do not stretch to a common row height, so each card's
   box ended wherever its own text ran out and margin-top:auto anchored to THAT — a row
   of 4 measured 339 / 334 / 339 / 361px tall with the buttons on three different
   baselines (2-line vs 3-line titles). Grid items stretch to the row by default, which
   makes the existing margin-top:auto line the prices and buttons up for free.
   Scoped to .drjafari-shop-main so it cannot reach the two homepage/PDP rows above,
   which are deliberately flex scrollers, not grids.
   Gap: 26px reuses .drjafari-shop-layout's own gap and is within 2px of the float
   layout's 28.26px column gutter (density preserved); it also replaces WooCommerce's
   disproportionate 50.86px row margin, so rows and columns share one number.
   Grid also fixes the RTL order properly — the float layout relied on float:right,
   while grid auto-placement follows the inline direction natively. */
.drjafari-shop-main ul.products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px;
  margin: 0 0 17px;
  padding: 0;
  list-style: none;
}
.drjafari-shop-main ul.products.columns-1 {
  grid-template-columns: minmax(0, 1fr);
}
.drjafari-shop-main ul.products.columns-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.drjafari-shop-main ul.products.columns-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* WooCommerce's float layout clearfixes the <ul> with
   `.woocommerce ul.products::before/::after { content:" "; display:table }`. Harmless
   around floats, but a grid container turns BOTH pseudo-elements into grid ITEMS, so
   they silently consume the first and last cells — measured here as a hole in the RTL
   top-right corner (first card landed at left:507, i.e. column 2, not column 1's 700)
   and 16 products spilling over 5 rows instead of 4. Removing them from the box tree is
   the fix; the clearfix has nothing left to clear once the items are grid items. */
.drjafari-shop-main ul.products::before,
.drjafari-shop-main ul.products::after {
  display: none;
}
/* Neutralise WooCommerce's float sizing on the items themselves. Two selectors, not
   one, because WooCommerce sizes the item twice at different specificities:
     desktop  `.woocommerce ul.products li.product`                    (0,1,2)
     <=768px  `.woocommerce ul.products[class*=columns-] li.product`   (0,3,2)  width:48%
   A single (0,2,2) rule clears the first and loses the second — and once the <ul> is a
   grid that 48% resolves against the TRACK, not the row, so each card collapsed to 76px
   inside a 158px column and the text-wrapping blew card height from ~335px to 615-774px.
   Measured on the rig at 390 before this line existed. The attribute arm ties WC's
   (0,3,2) and tokens.css is enqueued after woocommerce.css, so source order carries it. */
.drjafari-shop-main ul.products li.product,
.drjafari-shop-main ul.products[class*="columns-"] li.product {
  width: auto;
  margin: 0;
  float: none;
}
/* Phone: two up, matching the float layout's own 2-across at 390 (its column gutter
   there measured 13px, so 14px keeps the density and matches the sheet's carousel gap).
   .columns-3/.columns-4 are re-listed because the base selector alone (0,2,1) would
   lose to the .columns-3 rule above (0,3,1). */
@media (max-width: 768px) {
  .drjafari-shop-main ul.products,
  .drjafari-shop-main ul.products.columns-3,
  .drjafari-shop-main ul.products.columns-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
}

.drjafari-shop-filters {
  flex: 0 0 250px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 18px;
}

/* S127 Wave 3b — mobile toggle (button.drjafari-shop-filters-btn, shop.js). Hidden on desktop;
   the max-width:768px block below flips it on and turns the filters card into a slide-in
   drawer (WS-B S133, Main.dc.html) instead of the old in-flow expand. */
.drjafari-shop-filters-btn {
  display: none;
}

/* WS-B S133 — drawer chrome. Visible-but-inert on desktop (a scrim/close button make no sense
   on an always-open sidebar); the max-width:768px block turns them into the real drawer header
   and footer. */
.drjafari-shop-filters-scrim {
  display: none;
}
.drjafari-shop-filters-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
.drjafari-shop-filters-header .drjafari-shop-filters-title {
  margin-bottom: 0;
}
.drjafari-shop-filters-header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: none;
}
.drjafari-shop-filters-clear {
  background: none;
  border: none;
  font-family: var(--font-brand);
  font-weight: var(--fw-subhead);
  font-size: 12px;
  color: var(--teal-mid);
  text-decoration: none;
  cursor: pointer;
  padding: 8px 4px;
}
.drjafari-shop-filters-close {
  display: none; /* only meaningful once the sidebar is a dismissible overlay (mobile) */
}
.drjafari-shop-filters-footer {
  display: none; /* mobile-only apply/cancel bar — desktop filters already apply live */
}

.drjafari-shop-filters-title {
  font-weight: var(--fw-display);
  font-size: 15px;
  color: var(--teal-deep);
  margin-bottom: 14px;
}

/* ---- sort chips (WS-B S133, DD10) — a SECOND sort entry point inside the drawer; the native
   woocommerce_catalog_ordering() <select> in the listing header is the first and stays. ---- */
.drjafari-shop-sort-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.drjafari-sort-chip {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 15px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid var(--line);
  color: #3B4A48;
  font-family: var(--font-brand);
  font-size: 12.5px;
  font-weight: var(--fw-subhead);
  text-decoration: none;
  white-space: nowrap;
}
.drjafari-sort-chip.is-active {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}

/* ---- active-filter chips (WS-B S133, DD11 companion) — native WC_Widget_Layered_Nav_Filters
   output, wrapped and restyled as removable teal pills. Renders nothing (no wrapper printed
   either, see functions.php) when no attribute/price/rating filter is chosen. ---- */
.drjafari-active-filters {
  margin: 0 0 14px;
}
.drjafari-active-filters ul {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.drjafari-active-filters li {
  display: flex;
}
.drjafari-active-filters li a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: 20px;
  background: var(--teal);
  color: #fff;
  font-family: var(--font-brand);
  font-size: 11px;
  font-weight: var(--fw-subhead);
  text-decoration: none;
}
.drjafari-active-filters li a::after {
  content: '\2715';
  font-size: 9px;
}

/* ---- nearby-categories recovery row (WS-B S133, DD11 — EmptyState.dc.html). Only ever
   rendered by functions.php when real sibling/top-level terms exist. ---- */
.drjafari-nearby-categories {
  margin: 20px 0 0;
}
.drjafari-nearby-categories-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.drjafari-nearby-categories-list a {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 14px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--teal-deep);
  font-size: 12px;
  font-weight: var(--fw-subhead);
  text-decoration: none;
}

.drjafari-shop-filter-group {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.drjafari-shop-filter-group:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.drjafari-shop-filter-label {
  font-weight: var(--fw-heading);
  font-size: 13px;
  color: var(--teal-deep);
  margin-bottom: 9px;
}

/* دسته / برند lists — WC's own widget_product_categories / widget_layered_nav wrappers
 * (registered classnames, not ours to rename). .current-cat / .chosen are the classes WC
 * itself puts on the active term's <li>; the ::before square approximates the mockup's
 * checkbox mark over what is really single-select navigation (category widget) or
 * add/remove-param filtering (layered nav) — not true multi-select checkbox state. */
.drjafari-shop-filters .widget_product_categories ul,
.drjafari-shop-filters .widget_layered_nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.drjafari-shop-filters .widget_product_categories li,
.drjafari-shop-filters .widget_layered_nav li {
  font-size: 12.5px;
}

.drjafari-shop-filters .widget_product_categories li a,
.drjafari-shop-filters .widget_layered_nav li a {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  text-decoration: none;
}

.drjafari-shop-filters .widget_product_categories li a::before,
.drjafari-shop-filters .widget_layered_nav li a::before {
  content: '';
  flex: none;
  width: 17px;
  height: 17px;
  border-radius: 5px;
  border: 1.5px solid var(--teal-soft);
}

.drjafari-shop-filters .widget_product_categories li.current-cat > a::before,
.drjafari-shop-filters .widget_layered_nav li.chosen > a::before {
  background: var(--teal);
  border-color: var(--teal);
}

.drjafari-shop-filters .widget_product_categories .count,
.drjafari-shop-filters .widget_layered_nav .count {
  color: var(--slate);
  font-size: 11px;
  margin-inline-start: auto;
}

/* محدودهٔ‌قیمت — native WC_Widget_Price_Filter (slider), not the mockup's radio buckets; see
 * the functions.php flag on why. Selector styling only, not the exact rig-rendered slider —
 * needs a rig render pass to confirm the handle/track markup this WC version actually emits. */
.drjafari-shop-filters .widget_price_filter .price_slider {
  margin-bottom: 14px;
}

.drjafari-shop-filters .widget_price_filter .price_slider_amount {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  color: var(--slate);
}

.drjafari-shop-filters .widget_price_filter .price_slider_amount .button {
  background: var(--teal);
  color: #fff;
  border: none;
  border-radius: var(--radius-btn-min);
  padding: 6px 14px;
  font-family: var(--font-brand);
  font-weight: var(--fw-subhead);
  font-size: 11.5px;
  cursor: pointer;
}

.drjafari-shop-filters .widget_price_filter .ui-slider .ui-slider-handle {
  background: var(--teal);
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(10, 58, 56, .3);
}

.drjafari-shop-filters .widget_price_filter .ui-slider .ui-slider-range {
  background: var(--teal-soft);
}

@media (max-width: 768px) {
  .drjafari-shop-layout {
    flex-direction: column;
  }

  .drjafari-shop-filters-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-btn);
    padding: 11px;
    font-family: var(--font-brand);
    font-weight: var(--fw-subhead);
    font-size: 12.5px;
    color: var(--ink);
    cursor: pointer;
    margin-bottom: 12px;
  }

  /* WS-B S133 (Main.dc.html) — a fixed 250px sidebar column would run off a 390px screen
     (brief §4: "don't shove a sidebar column onto a phone"), so below 768px the sidebar
     becomes a right-anchored overlay drawer instead of the S127 in-flow expand. Anchored with
     `right` (not a logical inset) deliberately — this site is RTL-only end to end, and the
     frame's own "slides in from the right" note is a physical direction; translateX(100%)
     pushes it further right (off-canvas) regardless, so there's no RTL sign-flip risk here
     the way there is with margin-left-only rules (see the project's own RTL memory note). */
  .drjafari-shop-filters-scrim {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(10, 58, 56, .48);
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
  }
  .drjafari-shop-filters-scrim.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  .drjafari-shop-filters {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(332px, 86vw);
    height: 100vh;
    background: var(--cream);
    z-index: 1001;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: -18px 0 44px rgba(10, 58, 56, .22);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .28s ease, visibility 0s linear .28s;
  }

  .drjafari-shop-filters.is-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform .28s ease;
  }

  .drjafari-shop-filters-header {
    flex: none;
    height: 58px;
    padding: 0 16px;
    margin-bottom: 0;
    background: #fff;
    border-bottom: 1px solid var(--line);
  }

  .drjafari-shop-filters-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    color: var(--teal-deep);
    cursor: pointer;
    padding: 0;
  }

  .drjafari-shop-filters-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 16px 0;
  }

  .drjafari-shop-filters-footer {
    display: flex;
    flex: none;
    gap: 10px;
    padding: 14px 16px 16px;
    background: #fff;
    border-top: 1px solid var(--line);
    box-shadow: 0 -8px 20px rgba(10, 58, 56, .06);
  }

  .drjafari-shop-filters-footer .drjafari-btn {
    margin: 0;
  }

  .drjafari-shop-filters-cancel {
    flex: 0 0 96px;
  }

  .drjafari-shop-filters-apply {
    flex: 1;
  }

  html.drjafari-no-scroll {
    overflow: hidden;
  }
}

/* ===== S127 Wave 1: PDP + product-card commerce baseline ===== */

/* --- item 2: sale badge + strikethrough price ---
 * WC's own bundled woocommerce.css ships `.woocommerce ul.products li.product .onsale`
 * (specificity 0,4,2) and `.woocommerce span.onsale` (0,2,1) — a bare `.onsale` here
 * (0,1,0) loses the cascade regardless of stylesheet order, so this matches/exceeds both. */
.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale,
.onsale {
  display: inline-flex;
  align-items: center;
  min-height: 0;
  min-width: 0;
  line-height: normal;
  border-radius: var(--radius-btn-min);
  background: var(--teal);
  color: #fff;
  font-family: var(--font-brand);
  font-weight: var(--fw-subhead);
  font-size: 12px;
  padding: 3px 9px;
  position: absolute;
  inset-block-start: 10px;
  inset-inline-start: 10px;
  inset-inline-end: auto;
  margin: 0;
  z-index: 1;
}

.drjafari-card-media {
  position: relative;
  display: block;
}

.drjafari-card-price del,
.price del {
  color: var(--slate);
  font-weight: var(--fw-body);
  margin-inline-end: 6px;
}

/* S127 W3a item 1: was --orange (CTA-only per §0) — off-token on both PDP price and card
 * sale price. The price token is teal-deep everywhere; orange stays reserved for CTAs. */
.drjafari-card-price ins,
.price ins {
  text-decoration: none;
  color: var(--teal-deep);
}

/* S127 W3a item 1: the plain (non-sale) PDP price — `.price` with no ins/del — inherits an
 * off-token accent color from the parent theme/plugin stack instead of the price token.
 * Matches the button-alt override above (specificity win, no !important). */
.woocommerce div.product .summary p.price {
  color: var(--teal-deep);
}

/* --- item 1: gallery zoom + lightbox + thumbnail strip (WC native, GP parent already
 * declares wc-product-gallery-zoom/lightbox/slider support — this is presentation only) --- */
.woocommerce-product-gallery__wrapper {
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--cream);
}

.woocommerce-product-gallery__image a {
  cursor: zoom-in;
  display: block;
}

.flex-control-thumbs {
  list-style: none;
  display: flex;
  gap: 8px;
  margin: 10px 0 0;
  padding: 0;
}

.flex-control-thumbs li {
  width: 64px;
}

.flex-control-thumbs img {
  border-radius: var(--radius-btn-min);
  border: 1.5px solid var(--line);
  cursor: pointer;
  aspect-ratio: 1;
  object-fit: cover;
}

.flex-control-thumbs img.flex-active {
  border-color: var(--teal);
}

/* --- item 3: qty stepper --- */
.quantity {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-btn);
  overflow: hidden;
}

.quantity .qty {
  width: 44px;
  border: none;
  text-align: center;
  font-family: var(--font-brand);
  font-size: 14px;
  padding: 8px 0;
  background: transparent;
}

.drjafari-qty-btn {
  border: none;
  background: var(--teal-wash);
  color: var(--teal-deep);
  width: 32px;
  height: 100%;
  min-height: 38px;
  font-size: 16px;
  cursor: pointer;
  font-family: var(--font-brand);
}

.drjafari-qty-btn:hover {
  background: var(--teal-soft);
}

/* --- item 4: stock-count line --- WC's own woocommerce.css sets `.woocommerce
 * div.product .stock` color via a `:where()`-wrapped selector (0 specificity there, but
 * the surrounding .woocommerce/.product/.stock classes still total higher than a bare
 * `.stock`) — matching that shape here to actually win the cascade. */
.woocommerce div.product .stock,
.stock {
  font-family: var(--font-brand);
  font-size: 12.5px;
  font-weight: var(--fw-label);
  margin: 8px 0;
}

.woocommerce div.product .stock.in-stock,
.stock.in-stock {
  color: var(--teal);
}

.woocommerce div.product .stock.out-of-stock,
.stock.out-of-stock {
  color: var(--warm-ink);
}

/* --- item 5: related-products carousel (wraps existing WC output, no re-query) --- */
.drjafari-related-carousel {
  position: relative;
  clear: both; /* wraps WC's floated .images/.summary siblings; without this the
                  wrapper's own box rides up over the floats and eats their clicks. */
}

.drjafari-related-carousel ul.products {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  /* S143 (BUG carousel-overflow): overflow-x:auto already clips the row's paint
     and the arrows scroll it fine, but in RTL the leftward scroll-overflow still
     leaked into the document scrollWidth — the homepage sale carousel (75 cards)
     blew the page to ~16000px, reading as the "infinite scroll left" / too-wide
     hero symptom. `contain: layout` isolates the row's scroll size from the
     document without touching its own scrollability (proven live: 16078 -> 1277px,
     arrows still drive it). min-width:0 keeps the flex item from re-expanding. */
  contain: layout;
  min-width: 0;
  scroll-snap-type: inline mandatory;
  gap: 14px;
  padding-inline: 2px;
}

.drjafari-related-carousel ul.products li.product {
  scroll-snap-align: start;
  flex: 0 0 200px;
}

.drjafari-related-arrow {
  position: absolute;
  inset-block-start: 50%;
  transform: translateY(-50%);
  z-index: 1;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: #fff;
  box-shadow: var(--shadow-soft);
  cursor: pointer;
  font-size: 18px;
  color: var(--teal-deep);
  line-height: 1;
}

.drjafari-related-prev {
  inset-inline-start: -14px;
}

.drjafari-related-next {
  inset-inline-end: -14px;
}

/* S145 glitch #3 — mobile "infinite scroll left" / hero-too-broad. The -14px overhang
   is deliberate on desktop: .container is inset from the viewport there, so the arrows
   sit in the page gutter. On a phone .container spans the full width, so the outer arrow
   hangs 14px past the viewport and the document scrolls horizontally — measured on live
   AND reproduced on the rig at 390: scrollWidth 405 vs clientWidth 391, sole culprit
   button.drjafari-related-next at computed left:-14px (an element-by-element
   hide-and-remeasure sweep; removing it alone returns 405 -> 391).
   Note this is NOT the S143 `contain: layout` defect above — that one was the scroll row's
   own 16000px scroll size; this is the absolutely-positioned arrow outside the wrapper,
   which `contain: layout` on the <ul> never covered. Fix is the gutter that no longer
   exists: below the desktop breakpoint the arrows sit ON the row edge instead of outside
   it, which is also the usual phone treatment for a swipeable row. */
/* S267: the -14px overhang needs a gutter ≥14px outside the 1180px container, which
   exists only from 1208px; below it the arrows tuck in (769–1207 overflowed 14px). */
@media (max-width: 1207px) {
  .drjafari-related-prev {
    inset-inline-start: 4px;
  }

  .drjafari-related-next {
    inset-inline-end: 4px;
  }
}

/* --- item 6: category tags + social-share row --- */
.drjafari-pdp-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin: 14px 0;
  padding-block-start: 14px;
  border-block-start: 1px solid var(--line);
}

.drjafari-pdp-cats {
  font-size: 12.5px;
  color: var(--slate);
}

.drjafari-pdp-cats a {
  color: var(--teal);
  text-decoration: none;
}

.drjafari-pdp-share {
  display: flex;
  align-items: center;
  gap: 8px;
}

.drjafari-pdp-share a,
.drjafari-pdp-share button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--teal-wash);
  color: var(--teal-deep);
  border: none;
  cursor: pointer;
}

/* S127 W3a item 7: the copy-link <button>'s svg computed width 0 (flex-item min-content
 * shrink with no explicit CSS size, unlike the <a> icons — same width/height HTML attrs on
 * all four, only the button one collapsed). Pin the size directly instead of relying on the
 * attribute fallback. */
.drjafari-pdp-share svg {
  width: 16px;
  height: 16px;
  flex: none;
}

/* S127 W3a item 6: raychat (#raychat_widget) is a cross-origin iframe — its internal color
 * is set in the Raychat dashboard, not reachable from theme CSS. This only nudges its fixed
 * offset so it stops sitting on top of the sale badge / category tiles; if Raychat's own
 * script re-applies its inline offset on interaction this may not hold — verify by screenshot.
 * !important is deliberate here: overriding a third-party script's own inline/injected style,
 * not our own cascade. */
#raychat_widget {
  inset-block-end: 84px !important;
}
/* Defect #5 / raychat: the plugin is DROPPED from the launch stack (Mohsen, S132) — the
 * launcher no longer renders, so the WS-A recolor hack was removed. The S127
 * `#raychat_widget { inset-block-end: 84px }` rule above is now also dead; left in place
 * (harmless) and sweepable if raychat stays out. */

/* S127 W4 T1 item B: Block #9 key-features bullets — plain list, reuses --ink/--slate tokens */
.drjafari-key-features {
  margin: 14px 0;
  padding-inline-start: 20px;
  color: var(--ink);
  font-size: 13.5px;
  line-height: 1.9;
}

/* S127 W4 T1 item C: Block #15 recently-viewed row — grid/scroll reused verbatim from
 * .drjafari-related-carousel (item 5 above); only the empty-state hide is new. */
#drjafari-recently-viewed {
  display: none;
  margin-block-start: 24px;
}

#drjafari-recently-viewed.is-populated {
  display: block;
}

/* Defect #11: shop/category pagination had ZERO theme rules — confirmed by grep before
 * writing this block — so `.woocommerce-pagination .page-numbers` rendered as default
 * WP-blue links with an unstyled active state. Cream/white pills in brand tokens; RTL-safe
 * via gap + margin-inline (never margin-left/right — this project's own logged RTL trap,
 * tokens.css line ~199). Persian numerals are plain text nodes from WC's own markup, so
 * font-family: var(--font-brand) is enough for them to inherit Vazirmatn correctly. */
.woocommerce-pagination {
  margin-block-start: 32px;
}
.woocommerce-pagination .page-numbers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.woocommerce-pagination .page-numbers li {
  display: flex;
}
.woocommerce-pagination .page-numbers a.page-numbers,
.woocommerce-pagination .page-numbers span.page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding-inline: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
  background: var(--cream);
  color: var(--teal);
  font-family: var(--font-brand);
  font-size: 14px;
  text-decoration: none;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.woocommerce-pagination .page-numbers a.page-numbers:hover {
  border-color: var(--teal-mid);
  background: #fff;
  color: var(--teal-deep);
}
.woocommerce-pagination .page-numbers span.page-numbers.current {
  background: var(--teal);
  border-color: var(--teal);
  color: var(--cream);
}
.woocommerce-pagination .page-numbers span.page-numbers.dots {
  border: none;
  background: transparent;
  color: var(--slate);
  min-width: 24px;
}
.woocommerce-pagination .page-numbers .next.page-numbers,
.woocommerce-pagination .page-numbers .prev.page-numbers {
  font-family: var(--font-brand);
}

/* ================================================================
   WS-B (S133) — net-new PDP/shop UI from ws-b-frames/. See handback
   handoffs/2026-08-29-S133-wsb-handback.md for the per-frame table.
   ================================================================ */

/* ---- Frame 2a (LoadingGrid.dc.html) — this catalogue has no AJAX grid refresh to hook a
   "real" loading state to (filters/sort/pagination are plain links — full navigation), so
   shop.js shows this as a transient overlay covering that navigation round-trip rather than
   inventing an async layer that doesn't exist. Skeleton anatomy mirrors the real card 1:1
   (image 120 · badge · 2 title lines · price · CTA) so nothing shifts once the new page
   paints. Anchored by `.drjafari-shop-main { position: relative }` above. ---- */
@keyframes drjafariShimmer {
  0% { opacity: .55; }
  50% { opacity: 1; }
  100% { opacity: .55; }
}
@keyframes drjafariSpin {
  to { transform: rotate(360deg); }
}
.drjafari-skeleton-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: var(--cream);
  padding-top: 2px;
}
.drjafari-skeleton-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--slate);
  font-family: var(--font-brand);
  margin: 0 0 12px;
}
.drjafari-skeleton-status svg {
  animation: drjafariSpin .9s linear infinite;
  transform-origin: 50% 50%;
  flex: none;
}
.drjafari-skeleton-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 13px;
}
.drjafari-skeleton-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
  animation: drjafariShimmer 1.3s ease-in-out infinite;
}
.drjafari-skeleton-card__image {
  height: 120px;
  background: #EDF2F1;
}
.drjafari-skeleton-card__body {
  padding: 11px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.drjafari-skeleton-card__line {
  height: 11px;
  width: 84%;
  background: var(--line);
  border-radius: 5px;
}
.drjafari-skeleton-card__line--badge {
  height: 10px;
  width: 55%;
  background: var(--teal-wash);
}
.drjafari-skeleton-card__line--title2 {
  width: 58%;
}
.drjafari-skeleton-card__line--price {
  height: 13px;
  width: 46%;
  background: #E2EAE8;
  margin-top: 3px;
}
.drjafari-skeleton-card__cta {
  height: 32px;
  background: var(--orange-tint);
  border-radius: 9px;
  margin-top: 3px;
}
@media (min-width: 769px) {
  .drjafari-skeleton-grid {
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  }
}

/* ---- Frame 4 / DD4 / DD9 (StickyBuyBar.dc.html) — mobile sticky buy bar. Hidden until
   shop.js's IntersectionObserver reports the inline buy area (price + add-to-cart, OR the ℞
   notice for Rx PDPs) has scrolled out of view — "never both at once" per canvas.json note-4.
   .is-rx / non-Rx markup is chosen server-side (wp-mu-plugins/drjafari-pdp-template.php); these
   rules only ever restyle whichever branch PHP already decided to print. ---- */
.drjafari-sticky-buybar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900;
  display: none;
  align-items: center;
  gap: 12px;
  background: #fff;
  border-top: 1px solid var(--line);
  box-shadow: 0 -10px 24px rgba(10, 58, 56, .10);
  padding: 12px 16px calc(18px + env(safe-area-inset-bottom, 0px));
  font-family: var(--font-brand);
}
/* DD4 names this a MOBILE sticky bar; RxDesktopPage.dc.html's own desktop frame keeps the
   buy area in-column with no sticky counterpart. Gated to the same ~768px breakpoint the
   rest of the shop/PDP mobile treatment already uses, so it can never appear once the inline
   buy area scrolls out of view on a tall desktop viewport. */
@media (max-width: 768px) {
  .drjafari-sticky-buybar.is-visible {
    display: flex;
  }
}
/* theme T6 (audit finding 7, 2.4.11): keep the focused control above the sticky bar
   while it shows (class set by the bar's own shop.js script). Measured 127.6px tall
   at 390px on the rig, so 144px clears it with margin (the audit's 96px did not). */
html.drjafari-has-buybar { scroll-padding-bottom: 144px; }
.drjafari-sticky-buybar__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.drjafari-sticky-buybar__price {
  font-weight: var(--fw-display);
  font-size: 19px;
  color: var(--teal-deep);
}
.drjafari-sticky-buybar__label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: var(--fw-heading);
  font-size: 13px;
  color: var(--teal-deep);
}
.drjafari-sticky-buybar__sub {
  font-size: 10.5px;
  font-weight: var(--fw-subhead);
  color: var(--teal);
}
.drjafari-sticky-buybar.is-rx .drjafari-sticky-buybar__sub {
  color: var(--warm-ink);
}
.drjafari-sticky-buybar__cta {
  flex: 0 0 176px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--orange-cta);
  color: #fff;
  border: none;
  border-radius: var(--radius-btn);
  font-family: var(--font-brand);
  font-weight: var(--fw-heading);
  font-size: 14.5px;
  cursor: pointer;
  text-decoration: none;
}
.drjafari-sticky-buybar__cta[disabled] {
  opacity: .5;
  cursor: not-allowed;
}
/* Rx variant — orange-tint/orange-soft pair (DD12), teal CTA, NEVER an add-to-cart button
   (the PHP branch that would print one never runs for an Rx product — see DD9 in the
   handback). */
.drjafari-sticky-buybar.is-rx {
  background: var(--orange-tint);
  border-top-color: var(--orange-soft);
}
.drjafari-sticky-buybar.is-rx .drjafari-sticky-buybar__cta {
  background: var(--teal);
}
/* "added" state (progressive enhancement, shop.js) — only reachable if the site's add-to-cart
   is AJAX-enabled and fires WooCommerce's own `added_to_cart` event; on a plain form-submit
   the page navigates before this could ever show, which is a safe no-op, not a broken state. */
.drjafari-sticky-buybar.is-added .drjafari-sticky-buybar__cta {
  background: var(--teal);
}
.drjafari-sticky-buybar__added-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--teal-wash);
  color: var(--teal);
  flex: none;
}

/* ---- Frame 3 (RxDesktopPage.dc.html), DD8 — Rx notice replaces price + add-to-cart in the
   PDP buy area (wp-mu-plugins/drjafari-pdp-template.php, priority 30, the slot the suppressed
   add-to-cart form used to occupy). ---- */
.drjafari-rx-notice {
  margin: 18px 0;
  background: var(--orange-tint);
  border: 1.5px solid var(--orange-soft);
  border-radius: 16px;
  padding: 20px;
}
.drjafari-rx-symbol {
  font-size: 1.25em;
  line-height: 1;
  font-weight: 700;
}
.drjafari-rx-notice__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: var(--fw-display);
  font-size: 17px;
  color: var(--teal-deep);
  margin: 0 0 9px;
}
.drjafari-rx-notice__body {
  font-size: 13.5px;
  color: var(--warm-ink);
  line-height: 1.95;
  margin: 0 0 16px;
  max-width: 540px;
}
.drjafari-rx-notice__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
  max-width: 540px;
}
.drjafari-rx-notice__actions .drjafari-btn {
  flex: 1;
  min-width: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}
.drjafari-rx-notice__price-note {
  margin-top: 14px;
  font-size: 12px;
  color: var(--warm-ink);
  line-height: 1.85;
}

/* ---- Frame 3 companion — Rx-gated product-card badge (category/related grids,
   content-product.php). Reuses the orange-tint/orange-soft pair (DD12); overrides the plain-
   text .drjafari-card-badge with a pill, since an Rx card needs to read as a distinct state,
   not just another trust badge. ---- */
.drjafari-card-badge--rx {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 5px;
  background: var(--orange-tint);
  color: var(--warm-ink);
  font-size: 10px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 20px;
}

/* ============================================================================
 * ===== WS-C (S133) — 5 PDP blocks designed-in but OFF at launch (DD5/DD6) =====
 * Source frames: Compass/02-brand-design/01-brand-identity/task-02-visual-identity-
 * mockups/ws-c-frames/*.dc.html. Markup lives in wp-mu-plugins/drjafari-pdp-
 * template.php, gated to [TEST-ONLY] fixture products only — every class below is
 * dead weight on a real PDP. Palette is drawn from the SAME 14 tokens declared at
 * the top of this file (var(--...) only, no new tokens, no raw brand hex — plain
 * #fff/rgba(0,0,0,...) follow this file's own existing convention for white/black).
 * DD14 (S132): stars use --star (gold); the rating-distribution bars stay --teal-mid
 * on purpose — see .drjafari-pdp-reviews__bar-track below. DD17: no helpful-vote
 * row exists anywhere in this section.
 * ============================================================================ */

/* ---- shared: fixture-mode gate badge (all 5 blocks) ---- */
.drjafari-fixture-badge {
  display: flex;
  align-items: center;
  gap: 9px;
  background: #fff;
  border: 1.5px dashed var(--orange-soft);
  border-radius: var(--radius-card-min);
  padding: 10px 14px;
  margin-bottom: 20px;
  color: var(--warm-ink);
}
.drjafari-fixture-badge span:not(.drjafari-fixture-badge__tag) {
  font-size: 12.5px;
  font-weight: var(--fw-heading);
  color: var(--teal-deep);
}
.drjafari-fixture-badge__tag {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--warm-ink);
  margin-inline-start: auto;
  white-space: nowrap;
}

/* ---- shared: star rating row (DD14) ---- */
.drjafari-stars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

/* ---- shared: pharmacist / shop-reply badges ---- */
.drjafari-pharmacist-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--teal-wash);
  border: 1px solid var(--teal-soft);
  color: var(--teal);
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: var(--fw-heading);
  white-space: nowrap;
}
.drjafari-pharmacist-badge--sm {
  padding: 3px 9px;
  font-size: 10.5px;
}
.drjafari-pharmacist-badge--plain {
  background: #fff;
  padding: 3px 8px;
  font-size: 10px;
}

/* ---- shared: pending-moderation chip — the moderation gate drawn as a state, not
   an afterthought (ws-c-frames/README.md "Decisions taken while drawing" #1) ---- */
.drjafari-pending-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--orange-tint);
  border: 1px solid var(--orange-soft);
  color: var(--warm-ink);
  border-radius: 20px;
  padding: 5px 11px;
  font-size: 11px;
  font-weight: var(--fw-heading);
  white-space: nowrap;
}

/* ---- shared: sort/filter chips (Reviews sort row, Q&A filter row) ---- */
.drjafari-chip {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 14px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--teal-deep);
  font-size: 12.5px;
  font-weight: var(--fw-subhead);
  cursor: pointer;
  white-space: nowrap;
  /* S273-w5 (BUG-204): 320 px containment — chips are flex items of nowrap
     scroll rows; in RTL their leftward overflow leaks into the document
     scrollWidth. Let them shrink (min-width:0 defeats the min-width:auto
     floor) and clip the shrunken label with an ellipsis instead of spilling. */
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.drjafari-chip--on {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}

/* ---- shared: "official reply" card — Reviews' shop reply AND Q&A's pharmacy
   answer are the same visual language, one class ---- */
.drjafari-shop-reply {
  margin-top: 14px;
  background: var(--teal-wash);
  border-inline-start: 3px solid var(--teal);
  border-radius: 0 var(--radius-card-min) var(--radius-card-min) 0;
  padding: 14px 16px;
}
.drjafari-shop-reply__head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
  font-weight: var(--fw-heading);
  font-size: 13px;
  color: var(--teal-deep);
}
.drjafari-shop-reply__avatar {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 11px;
}
.drjafari-shop-reply p {
  margin: 0;
  font-size: 13px;
  line-height: var(--line-height-persian);
  color: var(--ink);
}

/* ---- shared: bracketed/GATED value tag (ADR-0086 licence number, IRC, e-namad
   image, authenticity wording — every unverified value carries this) ---- */
.drjafari-gated-tag {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 9px;
  letter-spacing: .06em;
  font-weight: 700;
  color: var(--warm-ink);
  background: var(--orange-tint);
  border: 1px solid var(--orange-soft);
  border-radius: 5px;
  padding: 1px 5px;
  margin-inline-start: 6px;
  vertical-align: middle;
  white-space: nowrap;
}

/* ---- shared: empty gated slot (SellerTrust shipping/returns — deliberately empty,
   not filled with plausible copy; D-3 unresolved) ---- */
.drjafari-empty-slot {
  border: 1.5px dashed var(--teal-soft);
  background: var(--cream);
  border-radius: var(--radius-card-min);
  padding: 11px 13px;
}
.drjafari-empty-slot p {
  margin: 6px 0 0;
  font-size: 11.5px;
  color: var(--slate);
  line-height: var(--line-height-persian);
}

/* ---- shared: heading row (title + count — Reviews + Q&A share this exact shape) ---- */
.drjafari-wsc-heading-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.drjafari-wsc-heading-row h2 {
  margin: 0;
  font-size: 20px;
  font-weight: var(--fw-display);
  color: var(--teal-deep);
}
.drjafari-wsc-heading-row span {
  font-size: 13px;
  color: var(--slate);
}

/* ============================================================================
 * #11 — Pharmacist review (ExpertReview.dc.html)
 * ============================================================================ */
.drjafari-expert-review {
  clear: both; /* first after-summary block: clear Woodmart's floated .summary/.gallery
                  (both float within the product row) so the OFF-block stack starts BELOW
                  them, not squeezed into the ~40px inter-float gap (S133 top-overlap fix). */
  margin: 28px 0;
  background: var(--cream);
  border-radius: 2px;
  padding: 24px 20px 28px;
}
.drjafari-expert-review__kicker {
  font-size: 12px;
  font-weight: var(--fw-heading);
  letter-spacing: .02em;
  color: var(--teal);
  margin-bottom: 6px;
}
.drjafari-expert-review__title {
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: var(--fw-display);
  color: var(--teal-deep);
}
.drjafari-expert-review__lede {
  margin: 0 0 18px;
  font-size: 13px;
  color: var(--slate);
  line-height: var(--line-height-persian);
}
.drjafari-expert-review__byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-card-max);
  padding: 16px;
  margin-bottom: 20px;
}
.drjafari-expert-review__avatar {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1.5px dashed var(--teal-soft);
  background: var(--teal-wash);
  color: var(--teal-mid);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.drjafari-expert-review__avatar span {
  font-size: 7px;
  font-weight: 600;
}
.drjafari-expert-review__byline-main {
  flex: 1;
  min-width: 200px;
}
.drjafari-expert-review__byline-name-row {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}
.drjafari-expert-review__name {
  font-weight: var(--fw-display);
  font-size: 15px;
  color: var(--teal-deep);
}
.drjafari-expert-review__byline-sub {
  margin-top: 4px;
  font-size: 12px;
  color: var(--slate);
}
.drjafari-expert-review__byline-dates {
  flex: none;
  font-size: 11.5px;
  color: var(--slate);
  line-height: 1.8;
  padding-top: 10px;
  margin-top: 6px;
  border-top: 1px solid var(--line);
  width: 100%;
}
.drjafari-expert-review__body-wrap {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.drjafari-expert-review__prose h3 {
  font-size: 15px;
  font-weight: var(--fw-display);
  color: var(--teal-deep);
  margin: 0 0 8px;
}
.drjafari-expert-review__prose p {
  font-size: 13.5px;
  line-height: var(--line-height-persian);
  color: var(--ink);
  margin: 0 0 14px;
}
.drjafari-expert-review__last-p {
  margin-bottom: 0 !important;
}
.drjafari-pharmacist-tip {
  background: var(--orange-tint);
  border: 1.5px solid var(--orange-soft);
  border-radius: var(--radius-card-max);
  padding: 14px 15px;
  margin: 0 0 16px;
}
.drjafari-pharmacist-tip__title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: var(--fw-display);
  font-size: 13px;
  color: var(--teal-deep);
  margin-bottom: 6px;
}
.drjafari-pharmacist-tip__title svg {
  color: var(--warm-ink);
  flex: none;
}
.drjafari-pharmacist-tip p {
  margin: 0;
  font-size: 12.5px;
  line-height: var(--line-height-persian);
  color: var(--ink);
}
.drjafari-expert-review__rail {
  background: var(--teal);
  border-radius: var(--radius-card-max);
  padding: 18px;
  color: #fff;
}
.drjafari-expert-review__rail-title {
  font-weight: var(--fw-display);
  font-size: 14.5px;
  margin-bottom: 12px;
}
.drjafari-expert-review__rail-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.drjafari-expert-review__rail-list li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.drjafari-expert-review__rail-list svg {
  flex: none;
  margin-top: 3px;
  color: var(--teal-soft);
}
.drjafari-expert-review__rail-list span {
  font-size: 12.5px;
  line-height: 1.85;
  color: #DDEDEA;
}
.drjafari-expert-review__rail-cta {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(191, 224, 220, .32);
}
.drjafari-expert-review__disclaimer {
  margin-top: 22px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-card-min);
  padding: 14px 16px;
}
.drjafari-expert-review__disclaimer svg {
  flex: none;
  margin-top: 2px;
  color: var(--slate);
}
.drjafari-expert-review__disclaimer p {
  margin: 0;
  font-size: 12px;
  line-height: var(--line-height-persian);
  color: var(--slate);
}

@media (min-width: 769px) {
  .drjafari-expert-review {
    padding: 32px 36px;
  }
  .drjafari-expert-review__byline-dates {
    width: auto;
    border-top: none;
    margin-top: 0;
    padding-top: 0;
    text-align: left;
  }
  .drjafari-expert-review__body-wrap {
    flex-direction: row;
    align-items: flex-start;
    gap: 26px;
  }
  .drjafari-expert-review__prose {
    flex: 1;
    min-width: 0;
  }
  .drjafari-expert-review__rail {
    flex: none;
    width: 300px;
  }
}

/* ============================================================================
 * #12 — Reviews & ratings (Reviews.dc.html)
 * ============================================================================ */
.drjafari-pdp-reviews {
  margin: 28px 0;
}
.drjafari-pdp-reviews__summary {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-card-max);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 18px;
}
.drjafari-pdp-reviews__average {
  text-align: center;
}
.drjafari-pdp-reviews__average-num {
  font-size: 40px;
  font-weight: var(--fw-display);
  color: var(--teal-deep);
  line-height: 1;
}
.drjafari-pdp-reviews__average-of {
  font-size: 12px;
  color: var(--slate);
  margin-top: 2px;
}
.drjafari-pdp-reviews__average .drjafari-stars {
  justify-content: center;
  margin-top: 8px;
}
.drjafari-pdp-reviews__average-base {
  font-size: 12px;
  color: var(--slate);
  margin-top: 8px;
}
.drjafari-pdp-reviews__bars {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.drjafari-pdp-reviews__bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.drjafari-pdp-reviews__bar-label {
  flex: none;
  width: 46px;
  font-size: 11.5px;
  color: var(--slate);
}
.drjafari-pdp-reviews__bar-track {
  flex: 1;
  height: 8px;
  border-radius: 6px;
  background: var(--teal-wash);
  overflow: hidden;
  display: block;
}
/* DD14 extension: the distribution mass stays --teal-mid, NOT gold — a star is a
   small glyph, a 71%-wide bar is a colour mass that would compete with the CTA
   orange (ws-c-frames/README.md "Ruled — applied" #1). */
.drjafari-pdp-reviews__bar-track i {
  display: block;
  height: 100%;
  background: var(--teal-mid);
}
.drjafari-pdp-reviews__bar-count {
  flex: none;
  width: 26px;
  font-size: 11.5px;
  font-weight: var(--fw-heading);
  color: var(--teal-deep);
  text-align: left;
}
.drjafari-pdp-reviews__cta {
  text-align: center;
}
.drjafari-pdp-reviews__cta-title {
  font-weight: var(--fw-display);
  font-size: 14px;
  color: var(--teal-deep);
  margin-bottom: 6px;
}
.drjafari-pdp-reviews__cta p {
  margin: 0 0 12px;
  font-size: 12px;
  line-height: var(--line-height-persian);
  color: var(--slate);
}
.drjafari-pdp-reviews__sort {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  margin-bottom: 16px;
}
.drjafari-pdp-reviews__sort-label {
  flex: none;
  font-size: 12px;
  color: var(--slate);
}
.drjafari-pdp-reviews__list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 18px;
}
.drjafari-review-card {
  display: flex;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-card-max);
  padding: 18px;
}
.drjafari-review-card--pending {
  border: 1.5px dashed var(--teal-soft);
  opacity: .86;
}
.drjafari-review-card__avatar {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--teal-wash);
  border: 1px solid var(--teal-soft);
  color: var(--teal);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--fw-display);
  font-size: 14px;
}
.drjafari-review-card__avatar--pending {
  background: #F3F7F6;
  border-color: var(--line);
  color: var(--slate);
}
.drjafari-review-card__body {
  flex: 1;
  min-width: 0;
}
.drjafari-review-card__head {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}
.drjafari-review-card__author {
  font-weight: var(--fw-display);
  font-size: 14px;
  color: var(--teal-deep);
}
.drjafari-review-card__author--pending {
  color: var(--slate);
}
.drjafari-review-card__date {
  font-size: 11px;
  color: var(--slate);
  margin-inline-start: auto;
}
.drjafari-review-card .drjafari-stars {
  margin-top: 8px;
}
.drjafari-review-card__title {
  margin-top: 10px;
  font-weight: var(--fw-heading);
  font-size: 14px;
  color: var(--teal-deep);
}
.drjafari-review-card__text {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: var(--line-height-persian);
  color: var(--ink);
}
.drjafari-review-card__text--pending {
  color: var(--slate);
}
.drjafari-review-card__photos {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.drjafari-review-card__photo {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-card-min);
  background: var(--teal-wash);
  border: 1px solid var(--teal-soft);
  color: var(--teal-mid);
  display: flex;
  align-items: center;
  justify-content: center;
}
.drjafari-review-card__photo--more {
  color: var(--teal);
  font-weight: var(--fw-display);
  font-size: 13px;
}

@media (min-width: 769px) {
  .drjafari-pdp-reviews__summary {
    flex-direction: row;
    align-items: stretch;
    gap: 30px;
    padding: 24px 26px;
  }
  .drjafari-pdp-reviews__average {
    flex: none;
    width: 180px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .drjafari-pdp-reviews__bars {
    flex: 1;
    justify-content: center;
    border-inline-start: 1px solid var(--line);
    border-inline-end: 1px solid var(--line);
    padding: 0 28px;
  }
  .drjafari-pdp-reviews__cta {
    flex: none;
    width: 260px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: right;
  }
  .drjafari-review-card__photo {
    width: 72px;
    height: 72px;
  }
}

/* ============================================================================
 * #13 — Q&A (QA.dc.html)
 * ============================================================================ */
.drjafari-pdp-qa {
  margin: 28px 0;
}
.drjafari-qa-ask {
  margin-bottom: 18px;
}
.drjafari-qa-ask__mobile-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 50px;
  background: var(--orange-cta);
  color: #fff;
  border: none;
  border-radius: var(--radius-card-min);
  font-family: var(--font-brand);
  font-weight: var(--fw-heading);
  font-size: 14px;
  cursor: pointer;
}
.drjafari-qa-ask__panel {
  display: none;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-card-max);
  padding: 18px;
  margin-top: 10px;
}
.drjafari-qa-ask.is-open .drjafari-qa-ask__panel {
  display: block;
}
.drjafari-qa-ask.is-open .drjafari-qa-ask__mobile-cta {
  display: none;
}
.drjafari-qa-ask__label {
  font-weight: var(--fw-display);
  font-size: 15px;
  color: var(--teal-deep);
  margin-bottom: 10px;
}
.drjafari-qa-ask__textarea {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-card-min);
  padding: 14px 16px;
  min-height: 88px;
  font-size: 13px;
  color: var(--slate);
  line-height: var(--line-height-persian);
}
.drjafari-qa-ask__footer {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.drjafari-qa-ask__note {
  display: flex;
  align-items: flex-start;
  gap: 7px;
}
.drjafari-qa-ask__note svg {
  flex: none;
  margin-top: 2px;
  color: var(--teal);
}
.drjafari-qa-ask__note span {
  font-size: 11.5px;
  color: var(--slate);
  line-height: 1.85;
}
.drjafari-qa-ask__buttons {
  display: flex;
  gap: 10px;
}
.drjafari-qa-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  margin-bottom: 16px;
}
.drjafari-qa-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 18px;
}
.drjafari-qa-item {
  display: flex;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-card-max);
  padding: 18px;
}
.drjafari-qa-item--pending {
  border: 1.5px dashed var(--teal-soft);
  opacity: .86;
}
.drjafari-qa-avatar {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-card-min);
  background: var(--teal-wash);
  border: 1px solid var(--teal-soft);
  color: var(--teal);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--fw-display);
  font-size: 14px;
}
.drjafari-qa-avatar--pending {
  background: #F3F7F6;
  border-color: var(--line);
  color: var(--slate);
}
.drjafari-qa-item__body {
  flex: 1;
  min-width: 0;
}
.drjafari-qa-item__question {
  font-weight: var(--fw-heading);
  font-size: 14px;
  line-height: 1.75;
  color: var(--teal-deep);
}
.drjafari-qa-item--pending .drjafari-qa-item__question {
  color: var(--slate);
}
.drjafari-qa-item__meta {
  margin-top: 6px;
  font-size: 11px;
  color: var(--slate);
}
.drjafari-qa-item__waiting {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  background: var(--teal-wash);
  border: 1px solid var(--teal-soft);
  color: var(--teal);
  border-radius: 20px;
  padding: 5px 11px;
  font-size: 11px;
  font-weight: var(--fw-heading);
}
.drjafari-qa-item__pending-note {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--slate);
  line-height: var(--line-height-persian);
}

@media (min-width: 769px) {
  .drjafari-qa-ask__mobile-cta {
    display: none;
  }
  .drjafari-qa-ask__panel {
    display: block;
  }
  .drjafari-qa-ask__footer {
    flex-direction: row;
    align-items: center;
  }
  .drjafari-qa-ask__note {
    flex: 1;
  }
}

/* ============================================================================
 * #8 — Seller & trust (SellerTrust.dc.html) — OFF at launch, enable is owner-gated
 * ============================================================================ */
.drjafari-seller-trust {
  margin: 28px 0;
}
.drjafari-seller-trust__title {
  margin: 0 0 16px;
  font-size: 19px;
  font-weight: var(--fw-display);
  color: var(--teal-deep);
}
.drjafari-seller-trust__card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-card-max);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.drjafari-seller-trust__col-divider {
  display: none;
}
.drjafari-seller-trust__identity {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 12px;
}
.drjafari-seller-trust__identity-name {
  font-weight: var(--fw-display);
  font-size: 15px;
  color: var(--teal-deep);
}
.drjafari-seller-trust__identity-sub {
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--slate);
}
.drjafari-seller-trust__col-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-weight: var(--fw-display);
  font-size: 14px;
  color: var(--teal-deep);
}
.drjafari-seller-trust__col-heading svg {
  color: var(--teal);
}
.drjafari-seller-trust__rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.drjafari-seller-trust__label {
  font-size: 11.5px;
  color: var(--slate);
  font-weight: var(--fw-label);
  margin-bottom: 4px;
}
.drjafari-seller-trust__value {
  font-size: 13px;
  color: var(--teal-deep);
  font-weight: var(--fw-heading);
  line-height: 1.8;
}
.drjafari-seller-trust__badges {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}
.drjafari-seller-trust__enamad-slot {
  height: 96px;
  border: 1.5px dashed var(--teal-soft);
  background: var(--cream);
  border-radius: var(--radius-card-max);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: var(--teal-mid);
  text-align: center;
}
.drjafari-seller-trust__enamad-slot span {
  font-size: 11px;
  font-weight: var(--fw-subhead);
  color: var(--slate);
  line-height: 1.7;
}
.drjafari-seller-trust__badge {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-card-max);
  padding: 14px 16px;
}
.drjafari-seller-trust__badge svg {
  flex: none;
  color: var(--teal);
}
.drjafari-seller-trust__badge-title {
  font-weight: var(--fw-display);
  font-size: 13px;
  color: var(--teal-deep);
}
.drjafari-seller-trust__badge-sub {
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--slate);
}

@media (min-width: 769px) {
  .drjafari-seller-trust__card {
    flex-direction: row;
    align-items: stretch;
    gap: 26px;
    padding: 24px 26px;
  }
  .drjafari-seller-trust__identity-col {
    flex: 1.25;
  }
  .drjafari-seller-trust__col {
    flex: 1;
  }
  .drjafari-seller-trust__col-divider {
    display: block;
    flex: none;
    width: 1px;
    background: var(--line);
  }
  .drjafari-seller-trust__badges {
    flex-direction: row;
  }
  .drjafari-seller-trust__enamad-slot {
    flex: none;
    width: 210px;
  }
  .drjafari-seller-trust__badge {
    flex: 1;
  }
}

/* ============================================================================
 * #2b — Gallery video lightbox (VideoLightbox.dc.html), DD6: self-hosted <video>,
 * native browser controls. This CSS styles only the dialog shell, the gallery tile
 * and the caption — the control bar is the browser's own chrome and is intentionally
 * NOT restyled here (ws-c-frames/README.md "Decisions taken while drawing" #5).
 * ============================================================================ */
.drjafari-video-tile {
  position: relative;
  flex: none;
  width: 60px;
  height: 60px;
  border-radius: var(--radius-card-min);
  background: var(--teal-deep);
  border: 2px solid var(--teal);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  padding: 0;
}
.drjafari-video-tile__time {
  position: absolute;
  bottom: 4px;
  inset-inline-start: 5px;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 5px;
}
.drjafari-video-lightbox {
  border: none;
  padding: 0;
  border-radius: var(--radius-card-max);
  max-width: 780px;
  width: calc(100% - 32px);
  background: #0F1A19;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .42);
}
.drjafari-video-lightbox::backdrop {
  background: rgba(10, 58, 56, .72);
}
.drjafari-video-lightbox__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .10);
  color: #fff;
}
.drjafari-video-lightbox__head svg {
  color: var(--teal-soft);
  flex: none;
}
.drjafari-video-lightbox__head span {
  font-weight: var(--fw-heading);
  font-size: 14px;
}
.drjafari-video-lightbox__close {
  margin-inline-start: auto;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-btn);
  background: rgba(255, 255, 255, .10);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
}
.drjafari-video-lightbox video {
  display: block;
  width: 100%;
  max-height: 70vh;
  background: #000;
}
.drjafari-video-lightbox__caption {
  padding: 14px 18px 18px;
}
.drjafari-video-lightbox__caption p {
  margin: 0;
  font-size: 12.5px;
  line-height: var(--line-height-persian);
  color: var(--teal-soft);
}
/* ===== S272 (R1+R2+R4+R5): one orange-CTA token everywhere, hero included =====
 * ONE rest list + ONE hover/focus list, so no WooCommerce selector is missed again
 * (spec §4 "◆ The declarations"). In-place repoints above carry the same values;
 * this block is the single source that wins ties by source order. Rx/is-added teal
 * variants are re-asserted AFTER it so they keep winning (never an orange control). */
/* rest */
.drjafari-btn-primary,
.woocommerce a.button.drjafari-btn-primary,
.woocommerce button.single_add_to_cart_button.button.alt,
.drjafari-related-carousel a.button.drjafari-btn-primary,
.drjafari-related-carousel a.button.add_to_cart_button,
.drjafari-sticky-buybar__cta,
.drjafari-qa-ask__mobile-cta,
.drjafari-cart-count,
.drj-consult-form button[type="submit"] { background: var(--orange-cta); color: #fff; }
/* hover + focus: the same list */
.drjafari-btn-primary:hover, .drjafari-btn-primary:focus,
.woocommerce a.button.drjafari-btn-primary:hover, .woocommerce a.button.drjafari-btn-primary:focus,
.woocommerce button.single_add_to_cart_button.button.alt:hover, .woocommerce button.single_add_to_cart_button.button.alt:focus,
.drjafari-related-carousel a.button.drjafari-btn-primary:hover, .drjafari-related-carousel a.button.drjafari-btn-primary:focus,
.drjafari-related-carousel a.button.add_to_cart_button:hover, .drjafari-related-carousel a.button.add_to_cart_button:focus,
.drjafari-sticky-buybar__cta:hover, .drjafari-sticky-buybar__cta:focus,
.drjafari-qa-ask__mobile-cta:hover, .drjafari-qa-ask__mobile-cta:focus,
.drjafari-cart-count:hover, .drjafari-cart-count:focus,
.drj-consult-form button[type="submit"]:hover, .drj-consult-form button[type="submit"]:focus { background: var(--orange-cta-hover); color: #fff; }
/* Rx / added sticky variants stay teal (re-asserted after the ONE list) */
.drjafari-sticky-buybar.is-rx .drjafari-sticky-buybar__cta,
.drjafari-sticky-buybar.is-rx .drjafari-sticky-buybar__cta:hover,
.drjafari-sticky-buybar.is-rx .drjafari-sticky-buybar__cta:focus,
.drjafari-sticky-buybar.is-added .drjafari-sticky-buybar__cta,
.drjafari-sticky-buybar.is-added .drjafari-sticky-buybar__cta:hover,
.drjafari-sticky-buybar.is-added .drjafari-sticky-buybar__cta:focus { background: var(--teal); color: #fff; }
/* focus-visible */
.drjafari-btn:focus-visible,
.drjafari-sticky-buybar__cta:focus-visible,
.woocommerce .button:focus-visible { outline: 2px solid var(--teal-mid); outline-offset: 2px; }
/* theme T1 (audit finding 4, 1.4.11): a white ring on the dark grounds (--teal 7.81, --teal-deep). */
.drjafari-pharmacist-card .drjafari-btn:focus-visible,
.drjafari-btn-on-teal:focus-visible,
.drjafari-hero .drjafari-btn:focus-visible { outline-color: #fff; outline-offset: 3px; }
/* theme T2 (audit finding 3, 1.4.1): inline links underlined at rest (--teal vs --ink is 1.89), plus their
   focus ring, and the footer «تماس» tel links (d4 fold F14). The footer sits on --teal-deep, so its ring is white. */
.entry-content a:not(.drjafari-btn):not(.button),
.drjafari-description a, .drjafari-pharmacist-note__text a,
.wd-footer a[href^="tel:"] {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; }
.entry-content a:not(.drjafari-btn):not(.button):focus-visible,
.drjafari-description a:focus-visible, .drjafari-pharmacist-note__text a:focus-visible {
  outline: 2px solid var(--teal-mid); outline-offset: 2px; border-radius: 2px; }
.wd-footer a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 2px; }
/* disabled: the shipped sticky-CTA rule, extended to every button */
.drjafari-btn[disabled], .drjafari-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
/* slogan (brand exception) */
.drjafari-brand .bn-sl { color: var(--orange-cta); }
/* orange leaves every non-CTA surface */
.drjafari-blog-tag { color: var(--teal-mid); }
.drjafari-expert-review__kicker { color: var(--teal); }
.stock.out-of-stock, .drjafari-badge--refrigerated, .drjafari-card-badge--rx,
.drjafari-pending-chip, .drjafari-gated-tag,
.drjafari-fixture-badge, .drjafari-fixture-badge__tag,
.drjafari-pharmacist-tip__title svg { color: var(--warm-ink); }
/* ===== end WS-C ===== */

/* ===== theme T16 (S271P-d2): consult form ===== */
/* ---- consult form (S271P-d2) — board: .claude/skills/figurehead/assets/brand/ConsultForm.dc.html ---- */
.drj-consult {
  --drj-consult-ic-ok: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12.5 2.7 2.6L16 9.6'/%3E%3C/svg%3E");
  --drj-consult-ic-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.4v.1'/%3E%3C/svg%3E");
  --drj-consult-ic-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.2 2'/%3E%3C/svg%3E");
  --drj-consult-ic-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start;
  font-family: var(--font-brand); color: var(--ink); }
.drj-consult *, .drj-consult *::before, .drj-consult *::after { box-sizing: border-box; }
.drj-consult p { margin: 0; }
:where(.drj-consult) fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
:where(.drj-consult) legend { float: right; width: 100%; margin: 0; padding: 0; }

.drj-consult-notice { display: flex; align-items: flex-start; gap: 12px; padding: 16px 20px; border: 1px solid var(--teal-soft);
  border-radius: var(--radius-card); background: var(--teal-wash); color: var(--teal); font-size: 15px;
  font-weight: var(--fw-subhead); line-height: 1.9; }
.drj-consult-notice::before { content: ""; flex: none; width: 24px; height: 24px; margin-top: 3px; background: currentColor;
  -webkit-mask: var(--drj-consult-ic-ok) center / contain no-repeat; mask: var(--drj-consult-ic-ok) center / contain no-repeat; }
.drj-consult-notice__title { display: block; font-weight: var(--fw-display); color: var(--teal-deep); }
.drj-consult-notice:focus { outline: 2px solid var(--teal-mid); outline-offset: 2px; }
.drj-consult-notice--error { border-color: var(--orange-soft); background: var(--orange-tint); color: var(--warm-ink); }
.drj-consult-notice--error::before { -webkit-mask-image: var(--drj-consult-ic-alert); mask-image: var(--drj-consult-ic-alert); }

.drj-consult-form { display: flex; flex-direction: column; gap: 20px; padding: 20px; border: 1px solid var(--line);
  border-radius: 20px; background: #fff; }

.drj-consult-topics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.drj-consult-topics > legend { grid-column: 1 / -1; margin-bottom: 4px; font-size: 18px; font-weight: var(--fw-display); line-height: 1.6;
  color: var(--teal-deep); }

.drj-consult-choice { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 12px;
  border: 1px solid var(--teal-soft); border-radius: var(--radius-btn-max); background: #fff; color: var(--ink);
  font-size: 14px; font-weight: var(--fw-label); line-height: 1.6; cursor: pointer; }
.drj-consult-choice:hover { border-color: var(--teal); background: var(--teal-wash); }
.drj-consult-choice:has(input:checked) { border-color: var(--teal); background: var(--teal-wash); color: var(--teal-deep);
  font-weight: var(--fw-heading); box-shadow: inset 0 0 0 1px var(--teal); }
.drj-consult-topics .drj-consult-choice { justify-content: center; min-height: 56px; border-width: 1.5px; color: var(--teal-deep);
  font-size: 16px; font-weight: var(--fw-heading); }
.drj-consult-topics .drj-consult-choice:has(input:checked) { border-color: var(--teal); background: var(--teal); color: #fff;
  box-shadow: none; }
.drj-consult-topics .drj-consult-choice:has(input:checked):hover { border-color: var(--teal-deep); background: var(--teal-deep); }
.drj-consult input[type="radio"], .drj-consult input[type="checkbox"] { flex: none; width: 20px; height: 20px; margin: 0;
  accent-color: var(--teal); cursor: pointer; }
.drj-consult input[type="radio"]:focus-visible, .drj-consult input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--teal-mid); outline-offset: 2px; }
@supports selector(:has(*)) {
  .drj-consult .drj-consult-choice input:focus-visible { outline: 0; }
  .drj-consult-choice:has(input:focus-visible) { outline: 2px solid var(--teal-mid); outline-offset: 2px; }
}

.drj-consult-topic { display: flex; flex-direction: column; gap: 16px; padding: 0 16px 16px; border-radius: var(--radius-card);
  background: var(--teal-wash); animation: drj-consult-in .24s ease-out; }
.drj-consult-topic > legend { margin: 0; padding-top: 16px; font-size: 15px; font-weight: var(--fw-display);
  line-height: 1.6; color: var(--teal-deep); }
.drj-consult .drj-consult-topic__note { margin-top: -12px; font-size: 13px; line-height: 1.8; color: var(--slate); }
@keyframes drj-consult-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .drj-consult-topic { animation: none; } }

.drj-consult-q, .drj-consult-field { position: relative; }
p.drj-consult-q > label, p.drj-consult-field > label { display: flex; flex-direction: column; gap: 8px; font-size: 14px;
  font-weight: var(--fw-subhead); line-height: 1.8; color: var(--ink); }
.drj-consult-q--radio, .drj-consult-field--sex { display: flex; flex-wrap: wrap; gap: 8px; }
.drj-consult-q--radio > legend, .drj-consult-field--sex > legend { margin: 0; font-size: 14px; font-weight: var(--fw-subhead);
  line-height: 1.8; color: var(--ink); }

.drj-consult :is(input[type="text"], input[type="tel"], select, textarea) { display: block; width: 100%; max-width: none;
  min-height: 48px; margin: 0; padding: 10px 14px; border: 1px solid var(--slate); border-radius: var(--radius-btn-max);
  background: #fff; color: var(--ink); font: var(--fw-body) 15px/1.7 var(--font-brand); box-shadow: none; }
.drj-consult input[type="tel"] { direction: ltr; text-align: right; letter-spacing: .02em; }
.drj-consult-field--age::after { content: ""; position: absolute; inset-inline-end: 14px; bottom: 14px; width: 20px; height: 20px;
  background: var(--slate); pointer-events: none;
  -webkit-mask: var(--drj-consult-ic-chev) center / contain no-repeat; mask: var(--drj-consult-ic-chev) center / contain no-repeat; }
.drj-consult :is(input[type="text"], input[type="tel"], select, textarea):hover { border-color: var(--teal); }
.drj-consult :is(input[type="text"], input[type="tel"], select, textarea):focus { padding: 9px 13px; border: 2px solid var(--teal-mid);
  outline: 2px solid transparent; box-shadow: 0 0 0 4px rgba(26, 128, 121, .22); background: #fff; color: var(--ink); }
.drj-consult :is(input[type="text"], input[type="tel"], select, textarea):is([aria-invalid="true"], :user-invalid) {
  padding: 9px 13px; border: 2px solid var(--warm-ink); }
.drj-consult input[type="checkbox"]:is([aria-invalid="true"], :user-invalid) { outline: 2px solid var(--warm-ink); outline-offset: 2px; }
.drj-consult textarea[name] { min-height: 120px; resize: vertical; }
.drj-consult select[name] { appearance: none; -webkit-appearance: none; padding-inline-end: 44px; cursor: pointer; }
.drj-consult select[name]:is(:focus, [aria-invalid="true"], :user-invalid) { padding-inline-end: 43px; }

.drj-consult-err { display: flex; align-items: flex-start; gap: 6px; margin-top: 8px; font-size: 13px;
  font-weight: var(--fw-subhead); line-height: 1.7; color: var(--warm-ink); }
.drj-consult-err::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 2px; background: currentColor;
  -webkit-mask: var(--drj-consult-ic-alert) center / contain no-repeat; mask: var(--drj-consult-ic-alert) center / contain no-repeat; }
.drj-consult-err[hidden] { display: none; }
.drj-consult-topics > .drj-consult-err, .drj-consult-field--sex > .drj-consult-err { grid-column: 1 / -1; flex-basis: 100%; margin-top: 0; }

.drj-consult-consent > label { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 12px 16px;
  border: 1px solid var(--teal-wash); border-radius: var(--radius-btn-max); background: var(--teal-wash); font-size: 14px;
  font-weight: var(--fw-label); line-height: 1.8; color: var(--ink); cursor: pointer; }
.drj-consult-consent > label input { margin-top: 3px; }
.drj-consult-consent > label:has(:is([aria-invalid="true"], :user-invalid)) { border: 2px solid var(--warm-ink); padding: 11px 15px; }

.drj-consult-form button[type="submit"] { display: inline-flex; align-items: center; justify-content: center; width: 100%;
  min-height: 52px; margin: 0; padding: 12px 24px; border: 0; border-radius: var(--radius-btn-max);
  font: var(--fw-heading) 16px/1.5 var(--font-brand); cursor: pointer; }
.drj-consult-form button[type="submit"]:focus-visible { outline: 2px solid var(--teal-mid); outline-offset: 2px; }

.drj-consult-sla { display: flex; align-items: flex-start; gap: 8px; padding-inline: 4px; font-size: 13.5px; line-height: 1.9;
  color: var(--slate); }
.drj-consult-sla::before { content: ""; flex: none; width: 20px; height: 20px; margin-top: 3px; background: var(--teal);
  -webkit-mask: var(--drj-consult-ic-clock) center / contain no-repeat; mask: var(--drj-consult-ic-clock) center / contain no-repeat; }
.drj-consult:has(.drj-consult-notice:not(.drj-consult-notice--error)) .drj-consult-sla { display: none; }

@media (min-width: 769px) {
  .drj-consult-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 24px; padding: 32px; }
  .drj-consult-form > * { grid-column: 1 / -1; }
  .drj-consult-form > .drj-consult-field--name, .drj-consult-form > .drj-consult-field--mobile,
  .drj-consult-form > .drj-consult-field--age, .drj-consult-form > .drj-consult-field--sex { grid-column: auto; }
  .drj-consult-topics > legend { font-size: 20px; }
  .drj-consult-topic { padding: 0 24px 24px; }
  .drj-consult-topic > legend { padding-top: 24px; }
  .drj-consult-form button[type="submit"] { width: auto; min-width: 240px; padding-inline: 40px; }
}
@media (min-width: 900px) {
  .drj-consult { grid-template-columns: minmax(0, 1fr) 320px; column-gap: 32px; row-gap: 16px; }
  .drj-consult-notice { grid-column: 1 / -1; }
  .drj-consult-sla { position: sticky; top: 24px; flex-direction: column; gap: 12px; padding: 28px; border-radius: 20px;
    background: var(--teal-deep); color: #fff; font-size: 18px; font-weight: var(--fw-heading); line-height: 1.9; }
  .drj-consult-sla::before { width: 32px; height: 32px; margin-top: 0; background: var(--teal-soft); }
}

.drjafari-consult-page .inside-article { padding: 0; background: transparent; }
.drjafari-consult-page .entry-header { padding-block: 24px 16px; }
.drjafari-consult-page .entry-title { margin: 0; font-size: 26px; font-weight: var(--fw-display); line-height: 1.5; color: var(--teal-deep); }
.drjafari-consult-page .entry-content { margin-top: 0; }
/* Amendment A1 (S283): T16 zeroed `.inside-article` padding, leaving the only
   gutter gone — the h1 and the SLA sat at x=0 below 1280px. Restore gutters
   on the two containers instead (16px <=768, 24px above). */
.drjafari-consult-page .drj-consult,
.drjafari-consult-page .entry-header { padding-inline: 16px; }
@media (min-width: 769px) {
  .drjafari-consult-page .drj-consult,
  .drjafari-consult-page .entry-header { padding-inline: 24px; }
}
@media (min-width: 769px) {
  .drjafari-consult-page .entry-header { padding-block: 40px 24px; }
  .drjafari-consult-page .entry-title { font-size: 32px; }
}
/* ===== end T16 ===== */
/* ===== theme T15 (S283): Woo states ===== */
/* Loading (WooCommerce ajax add-to-cart `.loading`): dim in place, label and
   size unchanged (opacity only, no font or padding change), progress cursor. */
.woocommerce a.button.loading,
.woocommerce button.button.loading,
a.ajax_add_to_cart.loading {
  opacity: .7;
  cursor: progress;
}
/* Added (WooCommerce ajax add-to-cart `.added`): the sticky bar's teal
   `is-added` treatment — `--teal` fill, white text (7.81). This block sits
   after the S272 ONE list so it wins ties by source order; the first selector
   below also wins outright on specificity. Hover/focus stay teal, like the
   sticky bar's `is-added` re-assertion. */
.woocommerce a.button.drjafari-btn-primary.added,
.woocommerce a.button.added,
.woocommerce button.button.added,
a.ajax_add_to_cart.added,
.woocommerce a.button.drjafari-btn-primary.added:hover,
.woocommerce a.button.added:hover,
.woocommerce button.button.added:hover,
a.ajax_add_to_cart.added:hover,
.woocommerce a.button.drjafari-btn-primary.added:focus,
.woocommerce a.button.added:focus,
.woocommerce button.button.added:focus,
a.ajax_add_to_cart.added:focus {
  background: var(--teal);
  color: #fff;
}
/* WooCommerce appends its own "view cart" link after an ajax add; the button
   itself relabels to the cart (shop.js, audit fold F15), so the appended link
   is hidden — one added state per view, no layout shift. */
.woocommerce a.added_to_cart,
a.added_to_cart {
  display: none;
}
/* Feedback notices (spec §2.11.1): shared shape, grounds per variant. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 16px;
  padding: 12px 16px;
  border-radius: var(--radius-card);
  font-size: 14px;
  line-height: 1.9;
}
.woocommerce-message a,
.woocommerce-info a,
.woocommerce-error a {
  color: inherit;
}
.woocommerce-message {
  background: var(--teal-wash);
  color: var(--teal);
  border: 1px solid var(--teal-soft);
}
.woocommerce-info {
  background: var(--teal-wash);
  color: var(--ink);
  border: 1px solid var(--teal-soft);
}
.woocommerce-error {
  --t15-ic-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.4v.1'/%3E%3C/svg%3E");
  background: var(--orange-tint);
  color: var(--warm-ink);
  border: 1px solid var(--orange-soft);
}
/* The error is never carried by colour alone: an alert glyph from the spec
   §2.5 stroke set (24 viewBox, stroke 2, round caps) beside the text. */
.woocommerce-error::before {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 3px;
  background: currentColor;
  -webkit-mask: var(--t15-ic-alert) center / contain no-repeat;
  mask: var(--t15-ic-alert) center / contain no-repeat;
}
/* WooCommerce core pins its notice glyphs absolute on one side with fixed
   green/blue/red colours; on a wrapping RTL line the text can run under the
   glyph. Bring all three glyphs into the flex row at the inline start,
   painted in the notice's own text colour (icon plus text, never colour
   alone). Tokens only: currentColor, no new hex. */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
  position: static;
  top: auto;
  left: auto;
  color: currentColor;
}
/* T15a (S272P-d4): an error LIST (checkout validation, any multi-error add) is
   a block, not a flex row. With T15's flex the <li>s sat side by side and the
   390 phone checkout widened to 639 px. The glyph goes absolute at the start. */
ul.woocommerce-error {
  display: block;
  position: relative;
  padding-inline-start: 46px;
  list-style: none;
}
ul.woocommerce-error::before {
  position: absolute;
  inset-inline-start: 16px;
  top: 15px;
}
ul.woocommerce-error li {
  margin: 0;
  padding: 0;
}
ul.woocommerce-error li + li {
  margin-top: 6px;
}
/* ===== end T15 ===== */

/* ===== B11 board 11 search ===== */
/* S273P-b11 (SearchResults.dc.html, board 11): store search results, no results, single result,
   NotFound, and the three store-wide lines S6 / S7 / S13. Class names are the board's. */

.drjafari-q { unicode-bidi: isolate; }
.drjafari-listing-count .drjafari-q { color: var(--ink); font-weight: var(--fw-subhead); }
/* S4: the count wraps and never truncates (WCAG 1.4.12) */
.drjafari-listing-header--search .drjafari-listing-count { line-height: 1.8; }
.drjafari-shop-toolbar { display: flex; align-items: center; gap: 8px; }
.drjafari-shop-toolbar .woocommerce-ordering { margin: 0; }

/* S3: the result-scoped category chips */
.drjafari-search-cats { margin: 16px 0 24px; font-family: var(--font-brand); }
.drjafari-search-cats__row { display: flex; flex-wrap: wrap; gap: 8px; }
.entry-content .drjafari-search-cats a.drjafari-search-cat {
  flex: none;
  scroll-snap-align: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--teal-deep);
  font-size: 13px;
  font-weight: var(--fw-subhead);
  text-decoration: none;
  white-space: nowrap;
}
/* GP underlines links inside .entry-content; a chip is a control, not a text link */
.entry-content .drjafari-search-cats a.drjafari-search-cat:hover,
.entry-content .drjafari-search-cats a.drjafari-search-cat:focus { text-decoration: none; }
.entry-content .drjafari-search-cats a.drjafari-search-cat:hover { background: var(--teal-wash); color: var(--teal-deep); }
.drjafari-search-cat__n { font-size: 12px; font-weight: 400; color: var(--slate); }
.entry-content .drjafari-search-cats a.drjafari-search-cat.is-active { background: var(--teal); border-color: var(--teal); color: #fff; }
.entry-content .drjafari-search-cats a.drjafari-search-cat.is-active .drjafari-search-cat__n { color: #fff; }

/* S8: the §9 empty card, search-aware */
.drjafari-search-empty { background: #fff; }
.drjafari-search-empty__title { margin: 0 0 8px; font-size: 22px; font-weight: var(--fw-display); color: var(--teal-deep); line-height: 1.7; }
.drjafari-search-empty__tips { list-style: none; margin: 0 auto 16px; padding: 0; max-width: 46ch; font-size: 14px; color: var(--slate); line-height: 1.95; }

/* S10: the suggestions block (no results + NotFound) */
.drjafari-suggest { display: flex; flex-direction: column; gap: 48px; margin-top: 48px; font-family: var(--font-brand); }
.drjafari-suggest__sec { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.drjafari-section-h { margin: 0; font-size: 22px; font-weight: var(--fw-display); color: var(--teal-deep); line-height: 1.6; }
.drjafari-suggest__posts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-card); background: #fff; }
.drjafari-suggest__posts li + li { border-top: 1px solid var(--line); }
.drjafari-suggest__post { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 16px; color: var(--teal); font-size: 14px; font-weight: var(--fw-subhead); line-height: 1.8; text-decoration: none; }
.drjafari-suggest__post svg { flex: none; color: var(--teal-mid); }
.drjafari-suggest .drjafari-nearby-categories-list a { height: 44px; font-size: 13px; }
/* GP underlines links inside .entry-content; the suggestion rows are controls, not text links */
.entry-content .drjafari-suggest a:not(.button):not(.drjafari-btn) { text-decoration: none; }
/* the best-seller scroller must scroll inside its section, never widen the page. On the 404 (no
   .drjafari-shop-main around it) the RTL scroller's overflow widened the mobile layout viewport
   to 964 at 390: overflow:hidden on the ul did not stop it, `contain: paint` on the wrapper does. */
.drjafari-suggest .drjafari-popular-grid { min-width: 0; max-width: 100%; contain: paint; }
.drjafari-suggest .drjafari-consult-band { padding: 0; }
.drjafari-suggest .drjafari-consult-inner { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; padding: 24px 32px; border-radius: 20px; }
.drjafari-suggest .drjafari-consult-copy { margin: 0; font-size: 16px; max-width: 72ch; text-wrap: pretty; }
.drjafari-suggest .drjafari-consult-inner .drjafari-btn { flex: none; }

/* S11: NotFound (404.php) */
.drjafari-404 { max-width: 1100px; margin: 0 auto; padding: 32px 16px 48px; font-family: var(--font-brand); }
.drjafari-404__head { text-align: center; padding: 32px 0 8px; display: flex; flex-direction: column; align-items: center; }
.drjafari-404__code { margin: 0; font-size: 13px; font-weight: var(--fw-subhead); color: var(--slate); }
.drjafari-404__title { margin: 0; font-size: 32px; font-weight: var(--fw-display); color: var(--teal-deep); line-height: 1.6; }
.drjafari-404__lede { margin: 4px 0 20px; font-size: 15px; color: var(--slate); line-height: 1.95; }
.drjafari-404__actions { display: flex; flex-direction: row; gap: 10px; }
.drjafari-404__actions .drjafari-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }

/* the card CTA on a page without body.woocommerce (the 404): Woo's grey a.button would win over the ONE orange list */
.drjafari-suggest a.button.drjafari-btn-primary,
.drjafari-suggest a.button.add_to_cart_button { background: var(--orange-cta); color: #fff; }
.drjafari-suggest a.button.drjafari-btn-primary:hover,
.drjafari-suggest a.button.drjafari-btn-primary:focus,
.drjafari-suggest a.button.add_to_cart_button:hover,
.drjafari-suggest a.button.add_to_cart_button:focus { background: var(--orange-cta-hover); color: #fff; }

/* S12: the cross row under a single match */
.drjafari-single-related { margin-top: 32px; }

/* S13: stock on the card. The price already carries margin-top:auto, so the line sits right under it. */
.drjafari-card-stock { margin: 0; font-size: 12.5px; font-weight: var(--fw-subhead); color: var(--warm-ink); line-height: 1.6; }

/* S7: card density, store-wide (search and category stay one canvas) */
.drjafari-card-name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.drjafari-card a.button.add_to_cart_button { white-space: nowrap; font-size: 12.5px; font-weight: var(--fw-subhead); line-height: 1.6; padding: 12px 6px; }

@media (max-width: 768px) {
  /* S6(a): the store archives' content gutter is 16, the chrome's own (GP pads .inside-article 30) */
  .drjafari-store-archive .inside-article { padding-inline: 16px; }
  /* S6(b): on a search the breadcrumb repeats the H1 */
  body.search.drjafari-store-archive .woocommerce-breadcrumb { display: none; }
  /* the plain listing header (shop, category) must not out-grow a 320 phone: the select was 255 wide + the count */
  .drjafari-store-archive .drjafari-listing-header { flex-wrap: wrap; }
  .drjafari-store-archive .drjafari-listing-header .woocommerce-ordering { min-width: 0; max-width: 100%; }
  .drjafari-store-archive .drjafari-listing-header .woocommerce-ordering select { max-width: 100%; }
  .drjafari-search-cats { margin: 12px 0 16px; }
  .drjafari-search-cats__row { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: 16px; margin-inline: -16px; padding-inline: 16px; scrollbar-width: none; }
  .drjafari-search-cats__row::-webkit-scrollbar { display: none; }
  /* S6(c): filters button + sort select share one row, the count sits under them */
  .drjafari-listing-header--search { flex-direction: column; align-items: stretch; gap: 8px; margin-bottom: 12px; }
  .drjafari-listing-header--search .drjafari-shop-toolbar { order: -1; }
  .drjafari-shop-toolbar .drjafari-shop-filters-btn { flex: 1 1 0; width: auto; min-width: 0; min-height: 44px; margin-bottom: 0; }
  .drjafari-shop-toolbar .woocommerce-ordering { flex: 1 1 0; min-width: 0; }
  .drjafari-shop-toolbar .woocommerce-ordering select { width: 100%; min-height: 44px; }
  .drjafari-search-empty__title { font-size: 18px; }
  .drjafari-suggest { gap: 32px; margin-top: 32px; }
  .drjafari-section-h { font-size: 18px; }
  .drjafari-suggest .drjafari-consult-inner { flex-direction: column; align-items: flex-start; padding: 18px; border-radius: 18px; }
  .drjafari-suggest .drjafari-consult-copy { font-size: 14.5px; }
  .drjafari-404 { padding: 16px 16px 32px; }
  .drjafari-404__head { padding: 16px 0 8px; }
  .drjafari-404__title { font-size: 24px; }
  .drjafari-404__lede { font-size: 14px; }
  .drjafari-404__actions { flex-direction: column; width: 100%; max-width: 320px; }
}
/* ===== end B11 ===== */


/* ---- contact page (S292) — spec: .claude/skills/figurehead/specs/contact-page-spec.md §4 + §9a; board: .claude/skills/figurehead/assets/brand/ContactPage.dc.html ----
   Two actions on the counter card (§9a P4): the call button is the page's one orange element (R1);
   «ثبت مشاوره در سایت» is a white-outline secondary on the teal ground. Tokens only. */
.drjafari-contact { padding-bottom: 48px; }
.drjafari-contact .container { box-sizing: border-box; max-width: 1180px; margin-inline: auto; padding-inline: 16px; }
.drjafari-contact__head { padding-block: 24px 16px; }
.drjafari-contact__title { margin: 0; font-size: 26px; font-weight: var(--fw-display); line-height: 1.5; color: var(--teal-deep); }
.drjafari-contact__lede { margin: 4px 0 0; max-width: 60ch; font-size: 14px; line-height: 1.95; color: var(--slate); }

.drjafari-contact__grid { display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "counter" "visit" "social" "trust"; gap: 16px; }

.drjafari-contact__counter { grid-area: counter; display: flex; flex-direction: column; gap: 20px; padding: 20px;
  border-radius: 20px; background: var(--teal-deep); color: #fff; }
.drjafari-contact__counter-title { margin: 0; font-size: 20px; font-weight: var(--fw-display); line-height: 1.5; color: #fff; }
.drjafari-contact__counter-sub { margin: 4px 0 0; font-size: 14px; line-height: 1.9; color: var(--teal-soft); }

.drjafari-contact__actions { display: flex; flex-direction: column; gap: 12px; }
.drjafari-contact .drjafari-contact__cta,
.drjafari-contact .drjafari-contact__cta:visited,
.drjafari-contact .drjafari-contact__cta-alt,
.drjafari-contact .drjafari-contact__cta-alt:visited { box-sizing: border-box; display: flex; align-items: center; justify-content: center;
  gap: 8px; width: 100%; min-height: 52px; padding: 12px 20px; border-radius: var(--radius-btn-max);
  color: #fff; font-size: 16px; font-weight: var(--fw-heading); line-height: 1.5; text-align: center; text-decoration: none; }
.drjafari-contact .drjafari-contact__cta,
.drjafari-contact .drjafari-contact__cta:visited { border: 0; background: var(--orange-cta); }
.drjafari-contact .drjafari-contact__cta:hover,
.drjafari-contact .drjafari-contact__cta:focus { background: var(--orange-cta-hover); color: #fff; }
.drjafari-contact .drjafari-contact__cta-alt,
.drjafari-contact .drjafari-contact__cta-alt:visited { border: 1.5px solid #fff; background: transparent; }
.drjafari-contact .drjafari-contact__cta-alt:hover,
.drjafari-contact .drjafari-contact__cta-alt:focus { border-color: #fff; background: rgba(255, 255, 255, .12); color: #fff; }
.drjafari-contact .drjafari-contact__cta:focus-visible,
.drjafari-contact .drjafari-contact__cta-alt:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.drjafari-contact__cta svg,
.drjafari-contact__cta-alt svg { width: 20px; height: 20px; flex: none; }

.drjafari-contact__phones { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(255, 255, 255, .25); }
.drjafari-contact__phones li { margin: 0; }
.drjafari-contact .drjafari-contact__phone,
.drjafari-contact .drjafari-contact__phone:visited { box-sizing: border-box; display: flex; align-items: center; gap: 12px;
  min-height: 64px; padding: 12px 4px; border-bottom: 1px solid rgba(255, 255, 255, .25); color: #fff; text-decoration: none; }
.drjafari-contact .drjafari-contact__phone:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.drjafari-contact .drjafari-contact__phone:hover .drjafari-contact__phone-ic { background: var(--teal-mid); }
.drjafari-contact .drjafari-contact__phone:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.drjafari-contact__phone-ic { display: flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px;
  border-radius: 50%; background: var(--teal); color: #fff; }
.drjafari-contact__phone-ic svg { width: 20px; height: 20px; }
.drjafari-contact__phone-txt { display: flex; flex-direction: column; min-width: 0; }
.drjafari-contact__phone-label { font-size: 12.5px; font-weight: var(--fw-subhead); line-height: 1.6; color: var(--teal-soft); }
.drjafari-contact__phone-num { direction: ltr; unicode-bidi: isolate; white-space: nowrap; font-size: 24px;
  font-weight: var(--fw-display); line-height: 1.4; color: #fff; }

.drjafari-contact__visit,
.drjafari-contact__social,
.drjafari-contact__trust { box-sizing: border-box; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-card); background: #fff; }
.drjafari-contact__visit { grid-area: visit; display: flex; flex-direction: column; gap: 16px; }
.drjafari-contact__h2 { margin: 0; font-size: 16px; font-weight: var(--fw-display); line-height: 1.6; color: var(--teal-deep); }
.drjafari-contact__row { display: flex; align-items: flex-start; gap: 12px; margin: 0; font-size: 14px; font-style: normal;
  line-height: 1.95; color: var(--ink); }
.drjafari-contact__row svg { width: 20px; height: 20px; flex: none; margin-top: 4px; color: var(--teal); }

.drjafari-contact__map { box-sizing: border-box; flex: 1 0 auto; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 12px; min-height: 184px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-card-min);
  background-color: var(--teal-wash);
  background-image: linear-gradient(rgba(191, 224, 220, .55) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(191, 224, 220, .55) 1px, transparent 1px);
  background-size: 32px 32px; }
.drjafari-contact__map.is-loaded { padding: 0; background-image: none; overflow: hidden; }
.drjafari-contact__map iframe { display: block; width: 100%; height: 100%; min-height: inherit; border: 0; }
.drjafari-contact__map-pin { box-sizing: border-box; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border: 1px solid var(--teal-soft); border-radius: 50%; background: #fff; color: var(--teal); }
.drjafari-contact__map-pin svg { width: 20px; height: 20px; }
.drjafari-contact .drjafari-contact__map-btn { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; min-height: 44px; padding: 8px 20px; border: 1.5px solid var(--teal-soft); border-radius: var(--radius-btn-max);
  background: #fff; color: var(--teal); font-family: var(--font-brand); font-size: 14px; font-weight: var(--fw-heading); line-height: 1.6; }
.drjafari-contact .drjafari-contact__map-btn:hover,
.drjafari-contact .drjafari-contact__map-btn:focus { border-color: var(--teal); background: var(--teal-wash); color: var(--teal); }
.drjafari-contact .drjafari-contact__map-btn:focus-visible { outline: 2px solid var(--teal-mid); outline-offset: 2px; }
.drjafari-contact__map-note { margin: -4px 0 0; font-size: 12px; line-height: 1.8; color: var(--slate); }

.drjafari-contact__routes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.drjafari-contact__routes-label { margin-inline-end: 4px; font-size: 12.5px; font-weight: var(--fw-subhead); color: var(--slate); }
.drjafari-contact .drjafari-contact__route,
.drjafari-contact .drjafari-contact__route:visited { box-sizing: border-box; display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 16px; border: 1px solid var(--teal-soft); border-radius: 20px; background: #fff; color: var(--teal);
  font-size: 13px; font-weight: var(--fw-subhead); text-decoration: none; }
.drjafari-contact .drjafari-contact__route:hover { border-color: var(--teal); background: var(--teal-wash); color: var(--teal); }

.drjafari-contact__social { grid-area: social; display: flex; flex-direction: column; gap: 12px; }
.drjafari-contact__pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.drjafari-contact .drjafari-social-pill { box-sizing: border-box; display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 20px; font-size: 13px; font-weight: var(--fw-subhead); line-height: 1.4; }
.drjafari-contact .drjafari-social-pill:hover { background: var(--teal-deep); color: #fff; }

.drjafari-contact__trust { grid-area: trust; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.drjafari-contact__licensed { box-sizing: border-box; display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  border: 1px solid var(--teal-soft); border-radius: var(--radius-btn-min); background: #fff; color: var(--teal-deep);
  font-size: 12px; font-weight: var(--fw-subhead); }
.drjafari-contact .drjafari-enamad-pill--light { box-sizing: border-box; display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  padding: 4px 12px 4px 8px; border: 1px solid var(--teal-soft); border-radius: var(--radius-btn-min); background: #fff;
  color: var(--teal-deep); font-size: 12px; font-weight: var(--fw-subhead); text-decoration: none; }
.drjafari-contact .drjafari-enamad-pill--light:hover { border-color: var(--teal); color: var(--teal-deep); }
.drjafari-contact__licence { flex: 1 1 100%; margin: 0; font-size: 12.5px; line-height: 1.8; color: var(--slate); }

/* one focus ring for every light-ground control on the page (R7) */
.drjafari-contact .drjafari-contact__route:focus-visible,
.drjafari-contact .drjafari-social-pill:focus-visible,
.drjafari-contact .drjafari-enamad-pill--light:focus-visible { outline: 2px solid var(--teal-mid); outline-offset: 2px; }

@media (min-width: 769px) {
  .drjafari-contact { padding-bottom: 64px; }
  .drjafari-contact .container { padding-inline: 24px; }
  .drjafari-contact__head { padding-block: 40px 24px; }
  .drjafari-contact__title { font-size: 32px; }
  .drjafari-contact__lede { font-size: 15px; }
  .drjafari-contact__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-areas: "counter visit" "social visit" "trust trust"; gap: 24px; align-items: stretch; }
  .drjafari-contact__counter { padding: 32px; gap: 24px; }
  .drjafari-contact__counter-title { font-size: 24px; }
  .drjafari-contact__counter-sub { font-size: 15px; }
  .drjafari-contact__actions { flex-direction: row; flex-wrap: wrap; }
  .drjafari-contact .drjafari-contact__cta,
  .drjafari-contact .drjafari-contact__cta-alt { width: auto; padding: 12px 32px; }
  .drjafari-contact__phone-num { font-size: 28px; }
  .drjafari-contact__visit, .drjafari-contact__social, .drjafari-contact__trust { padding: 24px; }
  .drjafari-contact__h2 { font-size: 18px; }
  .drjafari-contact__row { font-size: 15px; }
  .drjafari-contact__map { min-height: 216px; }
  .drjafari-contact__licence { flex: 0 1 auto; margin-inline-start: auto; }
}
/* ===== end contact page (S292) ===== */

/* ===== B10 board 10 spec block ===== */
/* S293-w1: from .claude/skills/figurehead/records/2026-10-04-spec-table-kit/spec-css.txt (board: .claude/skills/figurehead/assets/brand/SpecTable.dc.html).
   Markup: wp-mu-plugins/drjafari-pdp-template.php §7. S294-w1: the old summary specs-table rules are deleted (no markup used them). */
/* ---- PDP «مشخصات» body block + summary key specs (SpecTable.dc.html, board 10) ----
   Replaces the old summary specs table (priority 37). Phone first: label over value. From 769px:
   label | value. From 1024px: section titles in a start-side rail. Every GeneratePress element rule that
   reaches this markup (dt bold, dd margin, h2/h3 size and margin, button grey and its :focus fill,
   a:hover/:focus black) is pinned here; the board renders those GP rules to prove it. */
.drjafari-specs {
  clear: both; /* S293-w1: the first after-summary block on a real PDP (the expert review at 5 is TEST-ONLY):
                  clear the floated gallery/summary, or at 1440 the block rides up into the gap between them
                  and overlaps the summary (measured on rig1006 before this line; the board cannot show it). */
  margin: 32px 0;
  max-width: 960px;
}
/* S294-w1 (ruling 2): one style for the PDP body-section h2s. «محصولات مرتبط» and «بازدیدهای اخیر»
   had no theme rule: they showed the GeneratePress default h2 (25/30px, weight 300, ink). The house
   section heading is .drjafari-section-h (18px, 22px from 769px, --fw-display, --teal-deep; the
   homepage and search sections), so all three PDP body h2s take that. */
.drjafari-specs__title,
.single-product .related.products > h2,
.single-product #drjafari-recently-viewed > h2 {
  font-size: 18px;
  font-weight: var(--fw-display);
  line-height: 1.6;
  color: var(--teal-deep);
}
.drjafari-specs__title {
  margin: 0 0 4px;
}
.drjafari-specs__section + .drjafari-specs__section {
  margin-top: 16px;
}
.drjafari-specs__section-title {
  margin: 0;
  padding: 12px 0 2px;
  font-size: 14px;
  font-weight: var(--fw-heading);
  line-height: 1.7;
  color: var(--teal-deep);
}
.drjafari-specs__list {
  margin: 0;
  padding: 0;
}
.drjafari-specs__row {
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.drjafari-specs__label {
  margin: 0;
  font-size: 12.5px;
  font-weight: var(--fw-body);
  line-height: 1.7;
  color: var(--slate);
}
.drjafari-specs__value {
  margin: 2px 0 0;
  font-size: 14px;
  font-weight: var(--fw-label);
  line-height: 1.8;
  color: var(--ink);
  unicode-bidi: plaintext;
  text-align: right;
  overflow-wrap: anywhere;
}
.drjafari-specs__value a,
.drjafari-keyspecs dd a {
  display: inline-block; /* a lone link in a value is a target, not inline prose: 24px floor (WCAG 2.2 2.5.8) */
  min-width: 24px;
  padding: 2px 0;
  margin: -2px 0; /* the hit area grows, the line box does not: label and value keep one baseline */
  color: var(--teal);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.drjafari-specs__value a:hover,
.drjafari-specs__value a:focus,
.drjafari-keyspecs dd a:hover,
.drjafari-keyspecs dd a:focus {
  color: var(--teal-deep);
}
.drjafari-specs__value a:focus-visible,
.drjafari-keyspecs dd a:focus-visible,
.drjafari-keyspecs__more:focus-visible,
.drjafari-specs__toggle:focus-visible {
  outline: 2px solid var(--teal-mid);
  outline-offset: 2px;
}
.drjafari-specs.is-folded .drjafari-specs__row--extra,
.drjafari-specs.is-folded .drjafari-specs__section--extra {
  display: none;
}
.drjafari-specs__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-sizing: border-box;
  width: 100%;
  min-height: 48px;
  margin: 16px 0 0;
  padding: 12px 16px;
  background: #fff;
  color: var(--teal);
  border: 1.5px solid var(--teal-soft);
  border-radius: var(--radius-btn-max);
  font-family: var(--font-brand);
  font-size: 14px;
  font-weight: var(--fw-heading);
  line-height: 1.5;
  cursor: pointer;
}
.drjafari-specs__toggle[hidden] {
  display: none;
}
.drjafari-specs__toggle:hover,
.drjafari-specs__toggle:focus {
  background: var(--teal-wash);
  color: var(--teal);
}
.drjafari-specs__toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

/* summary column: up to three key specs + the jump link */
.drjafari-keyspecs {
  margin: 16px 0;
}
.drjafari-keyspecs__list {
  margin: 0;
  padding: 0;
}
.drjafari-keyspecs__row {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  column-gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.drjafari-keyspecs dt {
  margin: 0;
  font-size: 13px;
  font-weight: var(--fw-body);
  line-height: 1.7;
  color: var(--slate);
}
.drjafari-keyspecs dd {
  margin: 0;
  font-size: 13.5px;
  font-weight: var(--fw-subhead);
  line-height: 1.7;
  color: var(--ink);
  unicode-bidi: plaintext;
  text-align: right;
}
.drjafari-keyspecs__more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  font-size: 13.5px;
  font-weight: var(--fw-subhead);
  color: var(--teal);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.drjafari-keyspecs__more:hover,
.drjafari-keyspecs__more:focus {
  color: var(--teal-deep);
}

@media (min-width: 769px) {
  .drjafari-specs__title,
  .single-product .related.products > h2,
  .single-product #drjafari-recently-viewed > h2 {
    font-size: 22px;
  }
  .drjafari-specs__row {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    column-gap: 24px;
    padding: 12px 0;
  }
  .drjafari-specs__label {
    grid-column: 1;
    grid-row: 1 / span 20;
    font-size: 14px;
    line-height: 1.8;
  }
  .drjafari-specs__value {
    grid-column: 2;
    margin: 0;
  }
  .drjafari-specs__toggle {
    display: inline-flex;
    width: auto;
    padding: 12px 24px;
  }
}

@media (min-width: 1024px) {
  .drjafari-specs__section {
    display: grid;
    grid-template-columns: 168px minmax(0, 1fr);
    column-gap: 32px;
    align-items: start;
  }
  .drjafari-specs__section--untitled {
    grid-template-columns: minmax(0, 1fr);
  }
  .drjafari-specs__section-title {
    padding-top: 12px;
  }
  .drjafari-specs__section + .drjafari-specs__section {
    margin-top: 0;
  }
  .drjafari-specs__section + .drjafari-specs__section .drjafari-specs__section-title,
  .drjafari-specs__section + .drjafari-specs__section .drjafari-specs__list {
    padding-top: 16px;
  }
  .drjafari-specs__section + .drjafari-specs__section .drjafari-specs__section-title {
    padding-top: 28px;
  }
}
/* ===== end B10 ===== */

/* ===== B14 board 14 account ===== */
/* S294-w2 (theme T18, S272P-d5). Board: .claude/skills/figurehead/assets/brand/Account.dc.html; generated from the kit's
   S272P-d5-build.py PROD + DESK by _cursor-run/S294-w7-css.py (from S294-w2). Hooks: wp-mu-plugins/drjafari-account.php. */
/* page head: the house head (T16 / T17) */
.woocommerce-account .entry-title { margin: 0; font-size: 26px; font-weight: var(--fw-display); line-height: 1.5; color: var(--teal-deep); }
.woocommerce-account .woocommerce > * { min-width: 0; }
.woocommerce-account .woocommerce-notices-wrapper:empty { display: none; }

/* ---- logged out: Digits inside the page (H-L1, H-L2) ---- */
/* one narrow column: the head and the form card share it */
.woocommerce-account:not(.logged-in) :is(.entry-header, .entry-content) { max-width: 460px; margin-inline: auto; }
/* L-V: Digits paints from six variables (render.php digits_new_form_css_style). Repointed to the palette here, for
   BOTH colour schemes: the store has no dark theme, so Digits' "automatic" dark form never shows inside it. */
.drjafari-login :is(.digits-form_container, .digits-main_style, .digits-form_page, .digits_ui) {
  --dprimary: var(--teal); --dtitle: var(--teal-deep); --dfield_bg: #fff; --daccent: var(--teal-mid); --dform_bg: #fff; --dbutton_text: #fff; }
.drjafari-login { box-sizing: border-box; padding: 24px 20px; border: 1px solid var(--line); border-radius: var(--radius-card); background: #fff; }
.drjafari-login .digits-form_wrapper { position: static; width: auto; max-width: none; margin: 0; padding: 0; box-shadow: none; background: transparent; }
.drjafari-login form.digits_form_index_section { margin: 0; }
/* heading row: Digits' back mark + title. The back mark shows only on the code step (Digits toggles digits_hide_back) */
.drjafari-login .digits-form_heading { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; }
.drjafari-login .digits-form_heading_text { font-size: 20px; font-weight: var(--fw-display); line-height: 1.6; color: var(--teal-deep); }
.drjafari-login .digits_back_icon { display: grid; place-items: center; box-sizing: border-box; width: 44px; height: 44px; flex: none;
  border: 1px solid var(--line); border-radius: var(--radius-btn); background: #fff; color: var(--teal); cursor: pointer; }
.drjafari-login .digits_back_icon::before { content: ""; width: 20px; height: 20px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; }
.drjafari-login .digits_back_icon.digits_hide_back { display: none; }
/* method tabs (J-A1 gives them role="tab"): a two-part segmented control */
.drjafari-login .digits-form_tab-bar { display: flex; gap: 4px; margin: 0 0 20px; padding: 4px; border-radius: var(--radius-btn-max); background: var(--teal-wash); }
.drjafari-login .digits-form_tab-item { flex: 1 1 0; display: grid; place-items: center; min-height: 40px; padding: 4px 8px; border-radius: 9px;
  font-size: 14px; font-weight: var(--fw-subhead); line-height: 1.6; color: var(--slate); text-align: center; cursor: pointer; }
.drjafari-login .digits-form_tab-item.digits-tab_active { background: #fff; color: var(--teal-deep); font-weight: var(--fw-heading); box-shadow: 0 0 0 1px var(--teal-soft); }
.drjafari-login .digits-form_tab-item:focus-visible { outline: 2px solid var(--teal-mid); outline-offset: 2px; }
.drjafari-login .digits-form_tab_body { display: none; }
.drjafari-login .digits-form_tab_body.digits-tab_active { display: block; }
/* visible labels (J-A1 inserts label.drjafari-digits-label before each field; Digits prints placeholders only) */
.drjafari-digits-label { display: block; margin: 0 0 8px; font-size: 14px; font-weight: var(--fw-subhead); line-height: 1.8; color: var(--ink); }
/* the phone row: country code and number read left to right, as the number is dialled */
.drjafari-login .digits-mobile_wrapper { display: flex; direction: ltr; box-sizing: border-box; min-height: 48px; border: 1px solid var(--slate);
  border-radius: var(--radius-btn-max); background: #fff; overflow: hidden; }
.drjafari-login .digits-mobile_wrapper:hover { border-color: var(--teal); }
.drjafari-login .digits-mobile_wrapper:focus-within { border: 2px solid var(--teal-mid); box-shadow: 0 0 0 4px rgba(26, 128, 121, .22); }
.drjafari-login .digits-form_countrycode { position: static; display: flex; align-items: center; gap: 6px; flex: none; padding-inline: 12px 10px;
  border-inline-end: 1px solid var(--line); background: var(--teal-wash); }
.drjafari-login .digits-field-country_flag { display: block; width: 22px; height: 15px; border-radius: 2px; }
.drjafari-login input.countrycode { width: 44px; min-height: 0; margin: 0; padding: 0; border: 0; background: transparent; color: var(--ink);
  font: var(--fw-subhead) 15px/1.7 var(--font-brand); direction: ltr; }
.drjafari-login .digits-mobile_wrapper .digits-form_input:last-child { flex: 1 1 auto; min-width: 0; }
/* Digits writes an inline padding-left (123px) for its absolutely placed code box: the one !important in T18 */
.drjafari-login input.mobile_field { display: block; box-sizing: border-box; width: 100%; height: 100%; min-height: 46px; margin: 0;
  padding: 8px 14px !important; border: 0; background: transparent; color: var(--ink); font: var(--fw-body) 16px/1.7 var(--font-brand);
  direction: ltr; text-align: left; letter-spacing: .03em; outline: 2px solid transparent; }
.drjafari-login .digits-form_input_row { margin: 0 0 16px; }
.drjafari-login .digits-form_tab_body .digits-form_input_row { margin: 0; }
.drjafari-login .digits-form_tab_body .digits-form_input input[type="email"] { display: block; box-sizing: border-box; width: 100%; min-height: 48px;
  margin: 0; padding: 10px 14px; border: 1px solid var(--slate); border-radius: var(--radius-btn-max); background: #fff; color: var(--ink);
  font: var(--fw-body) 15px/1.7 var(--font-brand); direction: ltr; text-align: left; }
/* remember me: a 44 row, the native checkbox in teal */
.drjafari-login .digits-form_rememberme { margin: 12px 0 8px; }
.drjafari-login .digits-form_rememberme label { display: flex; align-items: center; min-height: 44px; cursor: pointer; }
.drjafari-login .digits-form_rememberme .dig_input_wrapper { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink); }
.drjafari-login .digits-form_rememberme input[type="checkbox"] { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--teal); }
/* the button: teal, never orange (login is not the purchase CTA; R1 keeps orange for that) */
.drjafari-login .digits-form_button { display: flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box; width: 100%;
  min-height: 52px; margin: 8px 0 0; padding: 12px 24px; border: 0; border-radius: var(--radius-btn-max); background: var(--dprimary); color: var(--dbutton_text);
  font: var(--fw-heading) 16px/1.5 var(--font-brand); cursor: pointer; }
.drjafari-login .digits-form_button:is(:hover, :focus) { background: var(--teal-deep); }
.drjafari-login .digits-form_button:focus-visible { outline: 2px solid var(--teal-mid); outline-offset: 2px; }
.drjafari-login .digits-form_button_ic { display: none; }
/* sign-up line */
.drjafari-login .dig_login_signup_bar { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 6px; margin: 16px 0 0;
  font-size: 14px; line-height: 1.9; color: var(--slate); }
.drjafari-login .dig_login_signup_bar a { display: inline-flex; align-items: center; min-height: 32px; color: var(--teal); font-weight: var(--fw-heading);
  text-decoration: underline; text-underline-offset: 3px; }
.drjafari-login .digits-hide { display: none; }
/* the code step: Digits inserts .digits_secure_login_auth_wrapper; J-A2 adds the sent-to line */
.drjafari-otp-sent { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 0 16px; padding: 10px 14px;
  border-radius: var(--radius-btn-max); background: var(--teal-wash); color: var(--teal); font-size: 14px; font-weight: var(--fw-subhead); line-height: 1.8; }
.drjafari-otp-sent bdi { color: var(--teal-deep); font-weight: var(--fw-heading); direction: ltr; unicode-bidi: isolate; }
.drjafari-otp-sent button { min-height: 32px; margin: 0; margin-inline-start: auto; padding: 2px 4px; border: 0; background: none; color: var(--teal);
  font: var(--fw-heading) 14px/1.6 var(--font-brand); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.drjafari-login input.otp_input { display: block; box-sizing: border-box; width: 100%; min-height: 56px; margin: 0; padding: 8px 14px;
  border: 1px solid var(--slate); border-radius: var(--radius-btn-max); background: #fff; color: var(--ink);
  font: var(--fw-heading) 24px/1.4 var(--font-brand); direction: ltr; text-align: center; letter-spacing: .5em; }
.drjafari-login input.otp_input:focus { padding: 7px 13px; border: 2px solid var(--teal-mid); outline: 2px solid transparent; box-shadow: 0 0 0 4px rgba(26, 128, 121, .22); }
.drjafari-login input.otp_input[aria-invalid="true"] { padding: 7px 13px; border: 2px solid var(--warm-ink); }
.drjafari-login .digits-form_footer_content { display: flex; justify-content: flex-start; margin-top: 8px; }
.drjafari-login .digits-form_resend_otp { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font-size: 13.5px;
  font-weight: var(--fw-heading); color: var(--teal); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.drjafari-login .digits-form_resend_otp.digits_resend_disabled { color: var(--slate); font-weight: var(--fw-subhead); text-decoration: none; cursor: default; }
.drjafari-login .digits-form_resend_otp span { direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
/* J-A3: Digits' corner toast becomes an inline alert under the field it names (J-A3 removes the toast node) */
.drjafari-digits-error { display: flex; align-items: flex-start; gap: 6px; margin: 8px 0 0; font-size: 13.5px; font-weight: var(--fw-subhead);
  line-height: 1.7; color: var(--warm-ink); }
.drjafari-digits-error::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 2px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.4v.1'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.4v.1'/%3E%3C/svg%3E") center / contain no-repeat; }
.drjafari-login .digits-mobile_wrapper:has(input[aria-invalid="true"]) { border: 2px solid var(--warm-ink); }
/* under the card: the one help line (C5) and the consult route */
.drjafari-login-help { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 16px 0 0; font-size: 13.5px; line-height: 1.9;
  color: var(--slate); text-align: center; }
.drjafari-login-help a { display: inline-flex; align-items: center; min-height: 32px; color: var(--teal); font-weight: var(--fw-subhead); text-underline-offset: 3px; }

/* ---- logged in: navigation + content ---- */
.woocommerce-account.logged-in .woocommerce { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
nav.woocommerce-MyAccount-navigation { margin: 0; }
nav.woocommerce-MyAccount-navigation ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
nav.woocommerce-MyAccount-navigation li { margin: 0; }
nav.woocommerce-MyAccount-navigation a { display: flex; align-items: center; gap: 8px; box-sizing: border-box; min-height: 44px; padding: 8px 14px;
  border: 1px solid var(--teal-soft); border-radius: 999px; background: #fff; color: var(--teal-deep); font-size: 14px; font-weight: var(--fw-subhead);
  line-height: 1.6; text-decoration: none; white-space: nowrap; }
nav.woocommerce-MyAccount-navigation a::before { content: ""; flex: none; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: var(--drj-acc-ic) center / contain no-repeat; mask: var(--drj-acc-ic) center / contain no-repeat; }
nav.woocommerce-MyAccount-navigation a:hover { border-color: var(--teal); background: var(--teal-wash); }
nav.woocommerce-MyAccount-navigation a:focus-visible { outline: 2px solid var(--teal-mid); outline-offset: 2px; }
nav.woocommerce-MyAccount-navigation li.is-active a { border-color: var(--teal); background: var(--teal); color: #fff; }
.woocommerce-MyAccount-navigation-link--dashboard { --drj-acc-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11.5 12 5l8 6.5V20a1 1 0 0 1-1 1h-4.5v-6h-5v6H5a1 1 0 0 1-1-1z'/%3E%3C/svg%3E"); }
.woocommerce-MyAccount-navigation-link--orders { --drj-acc-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7.5 12 4l8 3.5v9L12 20l-8-3.5z'/%3E%3Cpath d='M4 7.5 12 11l8-3.5M12 11v9'/%3E%3C/svg%3E"); }
.woocommerce-MyAccount-navigation-link--edit-address { --drj-acc-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-6.5-5.6-6.5-11a6.5 6.5 0 0 1 13 0c0 5.4-6.5 11-6.5 11z'/%3E%3Ccircle cx='12' cy='10' r='2.4'/%3E%3C/svg%3E"); }
.woocommerce-MyAccount-navigation-link--edit-account { --drj-acc-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c0-4 3.6-7 8-7s8 3 8 7'/%3E%3C/svg%3E"); }
.woocommerce-MyAccount-navigation-link--customer-logout { --drj-acc-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-4M10 16l-4-4 4-4M6 12h10'/%3E%3C/svg%3E"); }
nav.woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--customer-logout a { border-color: transparent; background: transparent; color: var(--slate); }
nav.woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--customer-logout a:hover { border-color: var(--line); background: #fff; color: var(--ink); }
.woocommerce-MyAccount-content { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-content: start; min-width: 0; }
.woocommerce-MyAccount-content > * { margin: 0; }

/* dashboard: Woo's two paragraphs (dashboard.php) + the H-A5 summary */
.woocommerce-MyAccount-content > p:not([class]):first-of-type { margin: 0; font-size: 15px; line-height: 1.9; color: var(--slate); }
.woocommerce-MyAccount-content > p:not([class]):first-of-type strong:first-of-type { display: block; font-size: 20px; font-weight: var(--fw-display); color: var(--teal-deep); }
.woocommerce-MyAccount-content > p:not([class]):first-of-type strong + strong { font-weight: var(--fw-subhead); }
.woocommerce-MyAccount-content > p:not([class]) a { padding-block: 2px; color: var(--teal); font-weight: var(--fw-subhead); text-underline-offset: 3px; }
/* the stock sentence of three links repeats the tiles under it: it stays in the DOM for a theme without H-A5 */
.woocommerce-MyAccount-content:has(> .drjafari-account-home) > p:not([class]):nth-of-type(2) { display: none; }
.drjafari-account-home { display: grid; gap: 12px; }
.drjafari-account-last { box-sizing: border-box; padding: 16px 20px; border: 1px solid var(--line); border-radius: var(--radius-card); background: #fff; }
.drjafari-account-last h2 { margin: 0 0 8px; font-size: 16px; font-weight: var(--fw-display); line-height: 1.7; color: var(--teal-deep); }
.drjafari-account-last dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin: 0; }
.drjafari-account-last dt { font-size: 12.5px; line-height: 1.7; color: var(--slate); }
.drjafari-account-last dd { margin: 0; font-size: 14.5px; font-weight: var(--fw-heading); line-height: 1.7; color: var(--ink); }
.drjafari-account-last .drjafari-account-last__more { display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px; color: var(--teal);
  font-size: 14px; font-weight: var(--fw-heading); text-underline-offset: 3px; }
ul.drjafari-account-tiles { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 0; padding: 0; list-style: none; }
ul.drjafari-account-tiles a { display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-areas: "ic t" "ic s"; column-gap: 12px; align-items: center;
  box-sizing: border-box; min-height: 64px; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius-card); background: #fff;
  color: var(--ink); text-decoration: none; }
ul.drjafari-account-tiles a::before { content: ""; grid-area: ic; width: 40px; height: 40px; border-radius: 50%;
  background: var(--teal-wash); }
ul.drjafari-account-tiles a::after { content: ""; grid-area: ic; justify-self: center; width: 20px; height: 20px; background: var(--teal);
  -webkit-mask: var(--drj-acc-ic) center / contain no-repeat; mask: var(--drj-acc-ic) center / contain no-repeat; }
ul.drjafari-account-tiles a:hover { border-color: var(--teal-soft); background: var(--teal-wash); }
ul.drjafari-account-tiles a:focus-visible { outline: 2px solid var(--teal-mid); outline-offset: 2px; }
.drjafari-account-tiles__t { grid-area: t; font-size: 15px; font-weight: var(--fw-heading); line-height: 1.6; color: var(--teal-deep); }
.drjafari-account-tiles__s { grid-area: s; font-size: 13px; line-height: 1.7; color: var(--slate); }
.drjafari-account-tiles .is-orders { --drj-acc-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7.5 12 4l8 3.5v9L12 20l-8-3.5z'/%3E%3Cpath d='M4 7.5 12 11l8-3.5M12 11v9'/%3E%3C/svg%3E"); }
.drjafari-account-tiles .is-address { --drj-acc-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-6.5-5.6-6.5-11a6.5 6.5 0 0 1 13 0c0 5.4-6.5 11-6.5 11z'/%3E%3Ccircle cx='12' cy='10' r='2.4'/%3E%3C/svg%3E"); }
.drjafari-account-tiles .is-details { --drj-acc-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c0-4 3.6-7 8-7s8 3 8 7'/%3E%3C/svg%3E"); }
.drjafari-account-tiles .is-consult { --drj-acc-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 5h14a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H10l-4 3v-3H5a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1z'/%3E%3C/svg%3E"); }

/* the support line (mu-plugin drjafari-order-support-line.php, shipped string): the board 12 treatment */
.woocommerce-account .drj-order-support { display: flex; gap: 10px; margin: 0; padding: 12px 16px; border-radius: var(--radius-btn-max);
  background: var(--teal-wash); color: var(--teal); font-size: 14px; font-weight: var(--fw-subhead); line-height: 1.9; }

/* orders: phone = one card per order (Woo's shop_table_responsive mode, its data-title labels) */
.woocommerce-account table.woocommerce-orders-table { display: block; width: 100%; margin: 0; border: 0; }
.woocommerce-account table.woocommerce-orders-table thead { display: none; }
.woocommerce-account table.woocommerce-orders-table tbody { display: grid; gap: 12px; }
.woocommerce-account table.woocommerce-orders-table tr { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 16px; align-items: center;
  box-sizing: border-box; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-card); background: #fff; }
.woocommerce-account table.woocommerce-orders-table :is(th, td) { display: contents; padding: 0; border: 0; }
.woocommerce-account table.woocommerce-orders-table :is(th, td)::before { content: attr(data-title); font-size: 12.5px;
  font-weight: var(--fw-subhead); line-height: 1.8; color: var(--slate); }
.woocommerce-account table.woocommerce-orders-table :is(th, td) { font-size: 14px; line-height: 1.8; color: var(--ink); text-align: start; }
.woocommerce-account .woocommerce-orders-table__cell-order-number a { justify-self: start; display: inline-flex; align-items: center; min-height: 32px;
  color: var(--teal-deep); font-size: 16px; font-weight: var(--fw-display); text-decoration: none; }
.woocommerce-account .woocommerce-orders-table__cell-order-number a:hover { text-decoration: underline; text-underline-offset: 3px; }
.drjafari-order-status { justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px;
  border-radius: 20px; background: var(--teal-wash); color: var(--teal); font-size: 13px; font-weight: var(--fw-heading); line-height: 1.9; }
.drjafari-order-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.woocommerce-orders-table__row--status-completed .drjafari-order-status { background: var(--line); color: var(--ink); }
.woocommerce-orders-table__row--status-completed .drjafari-order-status::before { background: var(--teal); }
:is(.woocommerce-orders-table__row--status-pending, .woocommerce-orders-table__row--status-on-hold) .drjafari-order-status { background: var(--orange-tint); color: var(--warm-ink); }
:is(.woocommerce-orders-table__row--status-cancelled, .woocommerce-orders-table__row--status-failed, .woocommerce-orders-table__row--status-refunded) .drjafari-order-status { background: var(--line); color: var(--slate); }
.woocommerce-orders-table__cell-order-total .woocommerce-Price-amount { font-weight: var(--fw-heading); }
.woocommerce-account .woocommerce-orders-table__cell-order-actions::before { display: none; }
.drjafari-order-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.drjafari-order-actions a.button { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 44px; margin: 0;
  padding: 8px 18px; border: 1.5px solid var(--teal-soft); border-radius: var(--radius-btn-max); background: #fff; color: var(--teal);
  font: var(--fw-heading) 14px/1.6 var(--font-brand); text-decoration: none; }
.drjafari-order-actions a.button:hover { border-color: var(--teal); background: var(--teal-wash); }
.drjafari-order-actions a.button:focus-visible { outline: 2px solid var(--teal-mid); outline-offset: 2px; }
/* an unpaid order's pay link IS the purchase CTA (R1): the one orange in the view */
.drjafari-order-actions a.button.pay { order: -1; border-color: var(--orange-cta); background: var(--orange-cta); color: #fff; }
.drjafari-order-actions a.button.pay:is(:hover, :focus) { border-color: var(--orange-cta-hover); background: var(--orange-cta-hover); color: #fff; }
.drjafari-order-actions a.button.cancel { border-color: transparent; background: transparent; color: var(--warm-ink); text-decoration: underline; text-underline-offset: 3px; }
.drjafari-order-actions a.button.cancel:hover { border-color: var(--orange-soft); background: var(--orange-tint); }
.woocommerce-pagination { display: flex; justify-content: space-between; gap: 8px; }

/* orders, empty: Woo's notice becomes the EmptyState card (board 0 §11); H-A7 adds the consult action under it */
.woocommerce-MyAccount-content > .woocommerce-info:has(> a.woocommerce-Button) { display: flex; flex-direction: column; align-items: center; gap: 12px;
  margin: 0; padding: 32px 20px 8px; border: 1px solid var(--line); border-bottom: 0; border-radius: var(--radius-card) var(--radius-card) 0 0;
  background: #fff; color: var(--ink); font-size: 17px; font-weight: var(--fw-heading); line-height: 1.8; text-align: center; }
.woocommerce-MyAccount-content > .woocommerce-info:has(> a.woocommerce-Button)::before { content: ""; width: 64px; height: 64px; border-radius: 50%;
  background: var(--teal-wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E5C57' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8h12l-1 12H7z'/%3E%3Cpath d='M9 8V6.5a3 3 0 0 1 6 0V8'/%3E%3C/svg%3E") center / 30px no-repeat; -webkit-mask: none; mask: none; }
.woocommerce-MyAccount-content > .woocommerce-info > a.woocommerce-Button { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  min-height: 48px; padding: 10px 22px; border-radius: var(--radius-btn-max); background: var(--teal); color: #fff; font-size: 15px; font-weight: var(--fw-heading);
  text-decoration: none; }
.woocommerce-MyAccount-content > .woocommerce-info > a.woocommerce-Button:hover { background: var(--teal-deep); }
.woocommerce-MyAccount-content > p.drjafari-orders-empty-more { display: flex; justify-content: center; margin: -16px 0 0; padding: 0 20px 28px;
  border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--radius-card) var(--radius-card); background: #fff; }
.drjafari-orders-empty-more a { display: inline-flex; align-items: center; min-height: 44px; color: var(--teal); font-size: 14.5px; font-weight: var(--fw-heading);
  text-underline-offset: 3px; }

/* the address form (form-edit-address.php stock): one card, the board 12 field pattern */
.woocommerce-account .woocommerce-MyAccount-content > form { box-sizing: border-box; padding: 20px; border: 1px solid var(--line);
  border-radius: var(--radius-card); background: #fff; }
.woocommerce-account .woocommerce-MyAccount-content > form > h2 { margin: 0 0 16px; font-size: 18px; font-weight: var(--fw-display); line-height: 1.6; color: var(--teal-deep); }
.woocommerce-account .woocommerce-address-fields__field-wrapper { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.woocommerce-account .woocommerce-address-fields .form-row { float: none; width: auto; grid-column: 1 / -1; margin: 0; padding: 0; }
.woocommerce-account .woocommerce-address-fields .form-row > label { display: block; margin: 0 0 8px; font-size: 14px; font-weight: var(--fw-subhead); line-height: 1.8; color: var(--ink); }
.woocommerce-account .woocommerce-address-fields .form-row .required { border: 0; color: var(--warm-ink); text-decoration: none; }
.woocommerce-account .woocommerce-address-fields .form-row .optional { font-weight: var(--fw-body); color: var(--slate); }
.woocommerce-account .woocommerce-address-fields .form-row :is(input.input-text, select) { display: block; box-sizing: border-box; width: 100%; max-width: none;
  min-height: 48px; margin: 0; padding: 10px 14px; border: 1px solid var(--slate); border-radius: var(--radius-btn-max); background: #fff; color: var(--ink);
  font: var(--fw-body) 15px/1.7 var(--font-brand); box-shadow: none; }
.woocommerce-account .woocommerce-address-fields .form-row :is(input[type="tel"], input[type="email"], #billing_postcode, #shipping_postcode) { direction: ltr; text-align: right; }
.woocommerce-account .woocommerce-address-fields .form-row :is(input.input-text, select):hover { border-color: var(--teal); }
.woocommerce-account .woocommerce-address-fields .form-row :is(input.input-text, select):focus { padding: 9px 13px; border: 2px solid var(--teal-mid);
  outline: 2px solid transparent; box-shadow: 0 0 0 4px rgba(26, 128, 121, .22); }
.woocommerce-account .woocommerce-address-fields .form-row.woocommerce-invalid :is(input.input-text, select) { padding: 9px 13px; border: 2px solid var(--warm-ink); }
.woocommerce-account .woocommerce-address-fields > p:last-child { margin: 20px 0 0; }
.woocommerce-account .woocommerce-address-fields button[name="save_address"] { display: flex; align-items: center; justify-content: center; box-sizing: border-box;
  width: 100%; min-height: 52px; margin: 0; padding: 12px 24px; border: 0; border-radius: var(--radius-btn-max); background: var(--teal); color: #fff;
  font: var(--fw-heading) 16px/1.5 var(--font-brand); cursor: pointer; }
.woocommerce-account .woocommerce-address-fields button[name="save_address"]:is(:hover, :focus) { background: var(--teal-deep); }
.woocommerce-account .woocommerce-address-fields button[name="save_address"]:focus-visible { outline: 2px solid var(--teal-mid); outline-offset: 2px; }

/* Woo's layout sheet floats the nav (30%) and the content (68%); the grid above places them, so both go full width */
.woocommerce-account .woocommerce :is(.woocommerce-MyAccount-navigation, .woocommerce-MyAccount-content) { float: none; width: auto; }
/* the grid holds the nav and content; Woo's clearfix pseudo-elements would become empty grid cells */
.woocommerce-account.logged-in .woocommerce::before, .woocommerce-account.logged-in .woocommerce::after { content: none; }
/* theme T2 underlines every .entry-content link at rest (0,3,1). The nav chips, the tiles and the order number are
   block-shaped controls with their own boundary or weight; inline links (greeting, «مشاهده», consult) keep T2. */
.woocommerce-account .entry-content :is(nav.woocommerce-MyAccount-navigation a, ul.drjafari-account-tiles a) { text-decoration: none; }
.woocommerce-account .entry-content .woocommerce-orders-table__cell-order-number a:not(:hover) { text-decoration: none; }
/* Digits 9.2's own sheets (login.min.css, main.min.css), measured on rig1006 with Digits active (S294-w2): */
/* .digits-form_container { width: 400px; max-width: 90%; padding: 40px 0 } */
.drjafari-login .digits-form_container { width: auto; max-width: none; padding: 0; }
/* .countrycode { width: auto !important } sizes the code box to 82px; max-width caps it without a second !important */
.drjafari-login input.countrycode { max-width: 48px; }
/* .digits2_box .digits-form_input input:focus paints a 1px border inside the row, which already carries the focus ring */
.drjafari-login .digits-mobile_wrapper .digits-form_input input.mobile_field { border: 0; }
/* .digits-form_tab-bar .digits-form_tab-item { opacity: .35; border-bottom: 3px solid transparent } */
.drjafari-login .digits-form_tab-bar .digits-form_tab-item { opacity: 1; border: 0; }
/* remember me: Digits hides the native box (display: none) and draws a 15px mask box; the board keeps the native one.
   Digits' own handler listens to the native checkbox's click, so the state stays Digits'. */
.drjafari-login .digits-form_rememberme { height: auto; }
.drjafari-login .digits-form_rememberme input[type="checkbox"] { display: block; visibility: visible; opacity: 1; }
.drjafari-login .digits-form_rememberme .dig_input_wrapper::before, .drjafari-login .digits-form_rememberme .dig_input_wrapper::after { content: none; }
.drjafari-login .digits-form_rememberme .dig_input_wrapper div { padding: 0; }
/* script.js appends div.digits-slider_line under the tab row (an underline); the segmented control marks the tab itself */
.drjafari-login .digits-slider_line { display: none; }
/* .dig_login_signup_bar span { opacity: .35 } puts the question under 4.5:1 */
.drjafari-login .dig_login_signup_bar span { opacity: 1; }
/* no flag (Operating ruling 4, S294): the store sells inside Iran only and the +98 cell names the country. (Digits' flag
   is a 48x32 sprite cell scaled by .5 inside a clipping box it does not print here; T18's 22x15 box showed a sliver.) */
.drjafari-login .digits-field-country_flag { display: none; }

/* Woo's woocommerce-smallscreen sheet (<= 768 px) out-ranks the card rules above: it hides the order number, makes the row
   and cells blocks, floats a «: » label and stripes even rows. Re-asserted at (0,4,x) inside Woo's breakpoint. Woo also
   forces text-align: left !important on the cells, so each cell holds ONE element placed by justify-self (S294-w7). */
@media (max-width: 768px) {
  .woocommerce-account .woocommerce table.woocommerce-orders-table.shop_table_responsive tr { display: grid; }
  .woocommerce-account .woocommerce table.woocommerce-orders-table.shop_table_responsive tbody :is(th, td) { display: contents; }
  .woocommerce-account .woocommerce table.woocommerce-orders-table.shop_table_responsive tbody :is(th, td)::before { content: attr(data-title); float: none; font-weight: var(--fw-subhead); }
}
.woocommerce-account .woocommerce-orders-table :is(time, .drjafari-order-total) { justify-self: start; }

/* the sign-up view: Digits' register form draws its own 1px border inside the card, and its e-mail, name and password
   fields have a transparent border (WCAG 1.4.11). No board frame draws it: the T18 field pattern above, extended (S294-w7). */
.drjafari-login form.digits_register { border: 0; border-radius: 0; padding: 0; box-shadow: none; }
.drjafari-login form.digits_register .digits-form_input input:is([type="email"], [type="text"], [type="password"]):not(.countrycode) { display: block;
  box-sizing: border-box; width: 100%; min-height: 48px; margin: 0; padding: 10px 14px; border: 1px solid var(--slate); border-radius: var(--radius-btn-max);
  background: #fff; color: var(--ink); font: var(--fw-body) 15px/1.7 var(--font-brand); }
.drjafari-login form.digits_register .digits-form_input input[type="email"] { direction: ltr; text-align: left; }
.drjafari-login form.digits_register .digits-form_input input[type="password"] { padding-inline-start: 48px; }
.drjafari-login form.digits_register .digits-form_input input:is([type="email"], [type="text"], [type="password"]):not(.countrycode):focus { border-color: var(--teal-mid);
  outline: 2px solid var(--teal-mid); outline-offset: 2px; }
/* J-A1 labels every field; Digits' update_fields() copies a row's label into the placeholder when the view opens */
.drjafari-login input[data-drj-labelled]::placeholder { color: transparent; }
/* Digits' script writes style="display: inline" on the submit icon after each request; a flex item out of flow, 0 x 0 */
.drjafari-login .digits-form_button_ic { position: absolute; width: 0; height: 0; margin: 0; overflow: hidden; }
/* WCAG 2.4.7: Digits' outline: 0 on every .digits-form_input input (0,3,1) takes the native ring off remember-me */
.drjafari-login .digits-form_rememberme input[type="checkbox"]:focus-visible { outline: 2px solid var(--teal-mid); outline-offset: 2px; }

@media (min-width: 769px) {
  .woocommerce-account .entry-title { font-size: 32px; }
  .drjafari-login { padding: 32px 36px; }
  /* logged in: the navigation is a card column at the start (right, RTL), sticky; content 1fr */
  .woocommerce-account.logged-in .woocommerce { grid-template-columns: 264px minmax(0, 1fr); column-gap: 32px; }
  .woocommerce-account.logged-in .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; }
  nav.woocommerce-MyAccount-navigation { position: sticky; top: 24px; box-sizing: border-box; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius-card); background: #fff; }
  nav.woocommerce-MyAccount-navigation ul { flex-direction: column; flex-wrap: nowrap; gap: 2px; }
  nav.woocommerce-MyAccount-navigation a { min-height: 48px; padding: 8px 14px; border: 0; border-radius: var(--radius-btn-max); font-size: 15px; }
  nav.woocommerce-MyAccount-navigation li.is-active a { background: var(--teal-wash); color: var(--teal-deep); font-weight: var(--fw-heading); box-shadow: inset -3px 0 0 var(--teal); }
  nav.woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--customer-logout { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
  ul.drjafari-account-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .woocommerce-account .woocommerce-address-fields :is(#billing_first_name_field, #billing_last_name_field, #billing_state_field, #billing_city_field, #billing_phone_field, #billing_email_field) { grid-column: auto; }
  .woocommerce-account .woocommerce-MyAccount-content > form { padding: 28px; }
  .woocommerce-account .woocommerce-address-fields button[name="save_address"] { width: auto; min-width: 240px; }
}
@media (min-width: 1100px) {
  /* orders >= 1100 (S294-w7; the kit says >= 769): a real table again */
  .woocommerce-account table.woocommerce-orders-table { display: table; border: 1px solid var(--line); border-radius: var(--radius-card); background: #fff; overflow: hidden; }
  .woocommerce-account table.woocommerce-orders-table thead { display: table-header-group; }
  .woocommerce-account table.woocommerce-orders-table tbody { display: table-row-group; }
  .woocommerce-account table.woocommerce-orders-table tr { display: table-row; padding: 0; border: 0; border-radius: 0; }
  .woocommerce-account table.woocommerce-orders-table :is(th, td) { display: table-cell; padding: 14px 16px; border-top: 1px solid var(--line); vertical-align: middle; }
  .woocommerce-account table.woocommerce-orders-table :is(th, td)::before { display: none; }
  .woocommerce-account table.woocommerce-orders-table thead th { padding: 10px 16px; border-top: 0; background: var(--teal-wash); font-size: 12.5px; font-weight: var(--fw-subhead); color: var(--slate); }
  .drjafari-order-actions { flex-wrap: nowrap; margin-top: 0; }
  /* the number, the date «۱۵ مهر ۱۴۰۵» and the status chip each stay on one line; the total may wrap */
  .woocommerce-account table.woocommerce-orders-table :is(.woocommerce-orders-table__cell-order-number, .woocommerce-orders-table__cell-order-date, .woocommerce-orders-table__cell-order-status) { white-space: nowrap; }
}
/* ===== end B14 ===== */