:root {
  --color-brand-primary: #22746f;
  --color-brand-primary-hover: #12645f;
  --color-brand-primary-active: #085a55;
  --color-brand-secondary: #f5b85b;
  --color-accent: #d94f70;
  --color-background: #f7faf9;
  --color-surface: #ffffff;
  --color-text: #202124;
  --color-text-secondary: #667085;
  --color-border: #d9e1e1;
  --color-border-strong: #9eb8b4;
  --color-success: #258a5c;
  --color-warning: #b7791f;
  --color-danger: #b42318;
  --color-brand-soft: #e8f4f2;
  --color-focus: #9fcac7;
  --color-on-brand-primary: #ffffff;
  --color-on-brand-secondary: #111111;
  --color-on-accent: #ffffff;
  --color-overlay: rgba(15, 23, 42, 0.35);
  --color-shadow: rgba(15, 54, 50, 0.08);
  --color-inverse-surface: #111c1b;
  --color-inverse-text: #ffffff;
  --color-inverse-text-secondary: rgba(255,255,255,0.72);
  --color-inverse-border: rgba(255,255,255,0.18);
  --shadow-soft: 0 12px 30px var(--color-shadow);
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-pill: 999px;
  --container: 1440px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--color-text);
  background: var(--color-background);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.45;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--color-brand-primary-hover); }
img { max-width: 100%; height: auto; display: block; }
button, input { font: inherit; }
button, a, input { outline-offset: 3px; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid var(--color-focus); }
.container { width: min(calc(100% - 32px), var(--container)); margin: 0 auto; }
.skip-link { position: absolute; top: -40px; left: 16px; background: var(--color-text); color: var(--color-surface); padding: 8px 12px; z-index: 1000; }
.skip-link:focus { top: 16px; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ===== Global Campaign Banner — Website Decoration Phase 2 / Batch 2, PART A =====
   Full width, ABOVE the site header. It is a separate slot: it never replaces
   the utility bar, search, logo, account/cart or the primary navigation.
   When the campaign is disabled or outside its schedule the template part
   renders NOTHING, so none of these rules apply and the header keeps exactly
   its pre-banner position and height. */
.campaign-banner { background: var(--color-brand-primary); color: var(--color-on-brand-primary); }
.campaign-banner-inner { position: relative; width: min(calc(100% - 32px), var(--container)); margin: 0 auto; }
.campaign-banner-link { position: relative; display: block; color: inherit; border-radius: 0; overflow: hidden; }
.campaign-banner-link:hover { color: inherit; }
.campaign-banner-media { display: block; line-height: 0; }
/* The intrinsic width/height attributes reserve the box, so the banner causes
   no layout shift while the image streams in. The height cap keeps it a banner
   rather than a full-bleed hero. */
.campaign-banner-image { width: 100%; height: auto; max-height: 200px; object-fit: cover; object-position: center; }
/* Restrained overlay: legible, but it never takes over the artwork. */
.campaign-banner-text {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 30px 20px 14px;
  font-size: clamp(14px, 1.5vw, 19px); font-weight: 800; line-height: 1.25;
  color: var(--color-inverse-text);
  background: linear-gradient(to top, rgba(17, 28, 27, 0.8), rgba(17, 28, 27, 0));
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.campaign-banner-cta { display: inline-block; padding: 6px 14px; border-radius: var(--radius-sm); background: var(--color-inverse-surface); color: var(--color-inverse-text); font-size: 13px; font-weight: 800; }
/* Text-only campaign (a shipping / service notice): a slim, centred strip. */
.campaign-banner--text .campaign-banner-link { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 40px; padding: 8px 44px 8px 16px; text-align: center; }
.campaign-banner--text .campaign-banner-text { position: static; padding: 0; background: none; text-shadow: none; font-size: 14px; font-weight: 700; }
/* Countdown: visually restrained, tabular figures, never negative. */
.campaign-banner-countdown {
  position: absolute; top: 10px; right: 12px; margin: 0;
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  background: var(--color-inverse-surface); color: var(--color-inverse-text);
  font-size: 12px; font-weight: 700;
}
.campaign-banner-countdown-value { font-variant-numeric: tabular-nums; font-size: 13px; }
.campaign-banner-countdown[hidden] { display: none; }

@media (max-width: 767px) {
  .campaign-banner-image { max-height: 132px; }
  .campaign-banner-text { padding: 22px 14px 12px; }
  .campaign-banner-countdown { top: 8px; right: 8px; padding: 3px 8px; font-size: 11px; }
  .campaign-banner--text .campaign-banner-link { padding: 8px 16px; }
}

.site-header { position: sticky; top: 0; z-index: 50; background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.utility-bar { background: var(--color-brand-soft); color: var(--color-brand-primary-active); font-size: 13px; }
.utility-inner { min-height: 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.utility-inner a { font-weight: 700; }
.main-header-inner { min-height: 68px; display: grid; grid-template-columns: 172px minmax(320px, 1fr) 300px; gap: 20px; align-items: center; }
.site-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: 0; }
.brand-mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 8px; background: var(--color-brand-primary); color: var(--color-on-brand-primary); }
.brand-text { font-size: 21px; }
.site-search { position: relative; display: grid; grid-template-columns: 1fr auto; border: 2px solid var(--color-brand-primary); border-radius: var(--radius-md); background: var(--color-surface); }
.site-search input[type="search"] { min-width: 0; border: 0; padding: 11px 14px; background: transparent; }
.site-search button { border: 0; padding: 0 18px; background: var(--color-brand-primary); color: var(--color-on-brand-primary); font-weight: 800; cursor: pointer; }
.site-search button:hover { background: var(--color-brand-primary-hover); }
.search-suggestions { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-soft); padding: 14px; display: grid; grid-template-columns: auto repeat(3, max-content); gap: 10px 16px; z-index: 20; }
/* Author `display: grid` would defeat the `hidden` attribute's UA style —
   keep the dropdown closed until main.js opens it. */
.search-suggestions[hidden] { display: none; }
.search-suggestions a { color: var(--color-brand-primary); font-weight: 700; }
.header-actions { display: flex; justify-content: flex-end; align-items: center; gap: 14px; font-size: 14px; font-weight: 700; }
/* Store Completion Sprint 01: real account state. Logged out shows ONE
   unified account entry (Sprint 01.1); logged in shows the customer's name. */
.header-account { color: var(--color-text); }
.header-account-entry { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; padding: 8px 4px; border: 0; border-radius: var(--radius-md); font-weight: 800; }
.header-account-entry:hover { color: var(--color-brand-primary); }
.header-account-entry:focus-visible, .wishlist-link:focus-visible, .cart-link:focus-visible { outline: 2px solid var(--color-brand-primary); outline-offset: 3px; }
.header-utility-entry { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; }
.utility-icon { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.wishlist-link { color: var(--color-text); }
.wishlist-link:hover { color: var(--color-brand-primary); }
.wishlist-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--color-brand-primary); color: var(--color-on-brand-primary); font-size: 11px; line-height: 1; }
.wishlist-count[hidden] { display: none; }
.header-logout { color: var(--color-text-secondary); font-weight: 650; font-size: 13px; }
.cart-link { color: var(--color-brand-primary); }
.icon-button { border: 1px solid var(--color-border); background: var(--color-surface); border-radius: var(--radius-md); min-width: 44px; min-height: 44px; cursor: pointer; }
.mobile-menu-toggle { display: none; }

.desktop-nav { background: var(--color-surface); border-top: 1px solid var(--color-border); }
/* Sprint 01.1: the top-level menu is ONE centered horizontal row, with the
   presence of a site's PRIMARY shopping navigation: 15.5px/700 type on a
   ~52px row, wide item gaps, centered as a GROUP (justify-content), not
   merely center-aligned text. position: relative lives on .nav-inner so mega
   panels anchor to the container row — opening one can never shift siblings
   or grow the header. */
.nav-inner { min-height: 52px; display: flex; align-items: center; justify-content: center; flex-wrap: nowrap; gap: 38px; position: relative; }
.desktop-nav a, .desktop-nav button { font-weight: 700; font-size: 15.5px; color: var(--color-text); }
.desktop-nav button { border: 0; background: transparent; padding: 14px 0; cursor: pointer; white-space: nowrap; }
/* Mega menu fix: `.nav-item` must be the positioning context for its own
   panel. Previously only `.has-dropdown` declared `position: relative`, so a
   mega panel anchored to `.nav-inner` (left:0 / top:100%) instead — it opened
   at the far left of the whole row, and the pointer lost `:hover` in the gap
   between the trigger and the panel, which made the panel vanish on the way
   down. Anchoring to `.nav-item` removes the gap entirely. */
.nav-item.has-dropdown, .nav-item.has-mega { position: relative; }
.mega-panel { position: absolute; left: 0; top: 100%; width: min(1120px, calc(100vw - 40px)); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 0 0 var(--radius-md) var(--radius-md); box-shadow: var(--shadow-soft); padding: 24px; display: none; z-index: 60; }
.nav-item:hover .mega-panel, .nav-item:focus-within .mega-panel, .nav-item.is-open .mega-panel { display: block; }
/* Invisible hover bridge spanning the seam between trigger and panel: the
   pointer stays inside `.nav-item` while travelling downwards, so the panel
   can never blink out mid-move. It is only a hit target — no paint. */
.nav-item.has-mega > button::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 16px; }
.mega-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.mega-grid h2 { font-size: 15px; margin: 0 0 8px; }
.mega-grid section > a { display: block; color: var(--color-text-secondary); font-weight: 600; font-size: 13px; padding: 3px 0; }
.mega-feature { margin-top: 18px; padding: 16px; background: var(--color-background); border: 1px solid var(--color-border); border-radius: var(--radius-md); display: grid; gap: 4px; }
.mega-feature span, .eyebrow { color: var(--color-brand-primary); font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.08em; }
.theme-link-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.theme-link-grid a { padding: 12px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-background); }

/* Store Completion Sprint 01: ordinary menu submenus, so hierarchy added in
   Appearance -> Menus works without extra theme code. */
.nav-dropdown { position: absolute; left: 0; top: 100%; min-width: 224px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 0 0 var(--radius-md) var(--radius-md); box-shadow: var(--shadow-soft); padding: 8px 0; display: none; z-index: 60; }
.nav-item:hover > .nav-dropdown, .nav-item:focus-within > .nav-dropdown, .nav-item.is-open > .nav-dropdown { display: block; }
.nav-dropdown .sub-menu { margin: 0; padding: 0; list-style: none; display: grid; }
.nav-dropdown .sub-menu a { display: block; padding: 8px 16px; font-size: 13px; font-weight: 650; color: var(--color-text-secondary); }
.nav-dropdown .sub-menu a:hover { color: var(--color-brand-primary); background: var(--color-background); }

.drawer-backdrop { position: fixed; inset: 0; background: var(--color-overlay); z-index: 80; }
.mobile-drawer { position: fixed; inset: 0 auto 0 0; width: min(420px, 92vw); background: var(--color-surface); z-index: 90; transform: translateX(-105%); transition: transform 180ms ease; overflow-y: auto; box-shadow: var(--shadow-soft); }
.mobile-drawer.is-open { transform: translateX(0); }
.drawer-header { min-height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--color-border); }
.drawer-search { padding: 16px; border-bottom: 1px solid var(--color-border); }
.drawer-search .site-search { grid-template-columns: 1fr; }
.drawer-search .site-search button { min-height: 44px; }
.search-suggestions { grid-template-columns: 1fr; max-width: 100%; }
.drawer-nav { padding: 10px 18px 28px; display: grid; gap: 6px; }
.drawer-nav a, .drawer-nav summary { display: block; min-height: 44px; padding: 12px 0; font-weight: 800; cursor: pointer; }
.drawer-nav details details { padding-left: 14px; border-left: 2px solid var(--color-border); }
.drawer-nav details details a { color: var(--color-text-secondary); font-weight: 650; }

/* Store Completion Sprint 01: account entry point inside the drawer, so
   mobile never depends on the desktop header actions. */
.drawer-account { padding: 12px 18px 16px; border-bottom: 1px solid var(--color-border); display: grid; gap: 6px; }
.drawer-account-name { font-size: 14px; font-weight: 900; }
.drawer-account-link { display: flex; align-items: center; min-height: 40px; padding: 0 12px; border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: 14px; font-weight: 700; background: var(--color-surface); color: var(--color-text); }
.drawer-account-link:hover { border-color: var(--color-border-strong); color: var(--color-brand-primary); }
.drawer-account-primary { background: var(--color-brand-primary); color: var(--color-on-brand-primary); border-color: transparent; }
.drawer-account-primary:hover { background: var(--color-brand-primary-hover); color: var(--color-on-brand-primary); border-color: transparent; }

.hero-section { padding: 22px 0 20px; background: var(--color-brand-soft); }
.hero-layout { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(320px, 0.78fr); gap: 26px; align-items: center; }
.hero-copy h1 { margin: 6px 0 10px; font-size: clamp(28px, 3.1vw, 44px); line-height: 1.05; letter-spacing: 0; }
.hero-copy p { max-width: 560px; color: var(--color-text-secondary); font-size: 16px; margin: 0; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 16px; border-radius: var(--radius-md); font-weight: 900; border: 1px solid transparent; }
/* Shared primary CTA. The colour only ever comes from the brand tokens, and the
   palette is now declared at (0,2,0) on purpose: WooCommerce's button stylesheet
   paints a bare `a.button` grey at (0,1,1), which silently beat the old
   `.button-primary` (0,1,0) — that is why the cart "Proceed to checkout" CTA
   looked disabled. Every primary CTA in the storefront shares these rules. */
/* Capsule shape, label centred. WooCommerce's `a.button` (0,1,1) resets the
   theme's display, border-radius and text alignment, so the primary button
   re-states its geometry together with its colour. */
.button.button-primary { display: inline-flex; align-items: center; justify-content: center; text-align: center; background: var(--color-brand-primary); color: var(--color-on-brand-primary); border-color: transparent; border-radius: var(--radius-pill); }
.button.button-primary:hover { background: var(--color-brand-primary-hover); color: var(--color-on-brand-primary); }
.button.button-primary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.button.button-primary:active { background: var(--color-brand-primary-active); }
/* Grey means "you cannot press this" — only a truly disabled control gets it. */
.button.button-primary:disabled,
.button.button-primary.disabled { background: var(--color-border); color: var(--color-text-secondary); cursor: not-allowed; }
/* Gate 3A.5: on WooCommerce pages the same default grey arrives at (0,2,1)
   (`.woocommerce a.button`), so the brand palette is re-asserted per element
   type. Still token-only: no literal colour anywhere. */
.woocommerce a.button.button-primary,
.woocommerce button.button.button-primary,
.woocommerce input.button.button-primary { display: inline-flex; align-items: center; justify-content: center; text-align: center; background: var(--color-brand-primary); color: var(--color-on-brand-primary); border-color: transparent; border-radius: var(--radius-pill); }
.woocommerce a.button.button-primary:hover,
.woocommerce button.button.button-primary:hover,
.woocommerce input.button.button-primary:hover { background: var(--color-brand-primary-hover); color: var(--color-on-brand-primary); }
.woocommerce a.button.button-primary:focus-visible,
.woocommerce button.button.button-primary:focus-visible,
.woocommerce input.button.button-primary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.woocommerce a.button.button-primary:active,
.woocommerce button.button.button-primary:active,
.woocommerce input.button.button-primary:active { background: var(--color-brand-primary-active); }
.woocommerce a.button.button-primary:disabled,
.woocommerce a.button.button-primary.disabled,
.woocommerce button.button.button-primary:disabled,
.woocommerce button.button.button-primary.disabled,
.woocommerce input.button.button-primary:disabled,
.woocommerce input.button.button-primary.disabled { background: var(--color-border); color: var(--color-text-secondary); cursor: not-allowed; }
.button-secondary { background: var(--color-surface); color: var(--color-brand-primary); border-color: var(--color-border); }
.button-secondary:hover { color: var(--color-brand-primary-hover); border-color: var(--color-border-strong); }
.hero-visual { border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--color-border); background: var(--color-surface); box-shadow: var(--shadow-soft); }
.product-visual-slot { aspect-ratio: 16 / 9; max-height: 260px; }
.product-visual-slot img { width: 100%; height: 100%; object-fit: cover; }

.home-section { padding: 34px 0; background: var(--color-surface); }
.home-section + .home-section { border-top: 1px solid var(--color-border); }
.theme-section { background: var(--color-background); }
.section-heading { margin-bottom: 18px; }
.section-heading h2 { margin: 5px 0 0; font-size: 24px; line-height: 1.15; }
.inline-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.text-link { color: var(--color-brand-primary); font-weight: 900; }
.category-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.category-tile { min-height: 168px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); display: grid; grid-template-rows: 96px 1fr; overflow: hidden; }
.category-image-slot { display: grid; place-items: center; background: linear-gradient(135deg, var(--color-brand-soft), var(--color-background)); border-bottom: 1px solid var(--color-border); }
.category-image-slot span { display: grid; place-items: center; width: 54px; height: 54px; border: 1px solid var(--color-border-strong); border-radius: 50%; background: var(--color-surface); color: var(--color-brand-primary); font-weight: 900; }
.category-content { display: grid; align-content: start; gap: 6px; padding: 13px 14px 14px; }
.category-name { font-weight: 900; font-size: 16px; line-height: 1.2; }
.category-tile small { color: var(--color-text-secondary); }

/* ========== Store Completion Sprint 01.1: product-first shop area ==========
   After the hero, the primary shopping region is one two-column area: LEFT
   the Product Categories navigator, RIGHT real product merchandising
   (Deals / New Arrivals / Best Sellers) in the approved full card. This
   replaces Sprint 01's accordion rail, which the Director rejected — the
   navigator is shop navigation (groups + directly visible children), not a
   filter accordion. */

.home-shop { display: grid; grid-template-columns: 238px minmax(0, 1fr); gap: 22px; align-items: start; padding: 24px 0 10px; }
/* z-index lifts the sticky column (a stacking context) above the product
   column, so the L3 flyout is never painted beneath the cards it overlaps. */
.home-shop-nav { position: sticky; top: 152px; min-width: 0; z-index: 30; }
.home-shop-main { min-width: 0; }
/* PART F P0: with the category rail switched OFF there is no .home-shop-nav
   child, but the grid still declared `238px minmax(0, 1fr)` — so the first
   (empty) track stayed reserved and the product column rendered at ~2/3 width
   with a blank gutter beside it. Collapsing to a single track makes the content
   reflow to the full available width. The rail-ON layout above is untouched. */
.home-shop--no-rail { grid-template-columns: minmax(0, 1fr); gap: 0; }
.home-shop-main > .home-section { padding-top: 0; padding-bottom: 20px; }
.home-shop-main > .home-section + .home-section { padding-top: 20px; }
.home-shop-main > .home-section:last-child { padding-bottom: 2px; }

/* Homepage merchandising density (Director correction): HIGH-DENSITY scan
   rows beside the navigator — 5 columns on large desktop, 4 on desktop, 3 on
   tablet, 2 on mobile. Scoped under .home-shop-main so the archive's own
   .product-grid media rules (later in this file) never win. The card is NOT
   redesigned: the homepage context only steps paddings and the price/button
   scale down slightly; every card element (image, title, pack, price, tier
   hint, quantity, Add, wishlist, badges) stays. */
.home-shop-main .home-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) {
  .home-shop-main .home-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1101px) {
  .home-shop-main .home-product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1600px) {
  .home-shop-main .home-product-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.home-shop-main .product-card .card-body { padding: 9px 10px 10px; gap: 5px; }
.home-shop-main .product-card .card-price { font-size: 15.5px; }
.home-shop-main .product-card .card-quick-add,
.home-shop-main .product-card .quick-add-qty { min-height: 34px; }
.home-shop-main .product-card .card-wishlist { min-width: 34px; min-height: 34px; }

/* ---- Product Categories navigator (real product_cat taxonomy) ---- */
.cat-nav { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.cat-nav-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 14px; background: var(--color-brand-primary); color: var(--color-on-brand-primary); border-radius: var(--radius-md) var(--radius-md) 0 0; }
.cat-nav-title { margin: 0; font-size: 14px; font-weight: 900; letter-spacing: 0.02em; color: inherit; }
.cat-nav-all { font-size: 12px; font-weight: 800; color: inherit; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.cat-nav-toggle { display: none; }
.cat-nav-list { margin: 0; padding: 4px 0 6px; list-style: none; }
.cat-nav-group { padding: 7px 0 5px; }
.cat-nav-group + .cat-nav-group { border-top: 1px solid var(--color-border); }
.cat-nav-group-link { display: block; padding: 0 14px 4px; font-size: 13.5px; font-weight: 900; color: var(--color-text); line-height: 1.4; }
.cat-nav-group-link:hover { color: var(--color-brand-primary); }
.cat-nav-subs { margin: 0; padding: 0; list-style: none; }
/* Sub rows span the full card width so the hover highlight reads like shop
   navigation, and so the L3 flyout (left: 100%) starts just past the card's
   right edge instead of inside it. */
.cat-nav-sub { position: relative; }
.cat-nav-sub > a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 3.5px 14px 3.5px 26px; font-size: 12.5px; font-weight: 600; color: var(--color-text-secondary); line-height: 1.5; }
.cat-nav-sub > a:hover { background: var(--color-brand-soft); }
.cat-nav-sub:focus-within > a { background: var(--color-brand-soft); color: var(--color-brand-primary); }
.cat-nav-arrow { flex: 0 0 auto; color: var(--color-border-strong); font-size: 15px; line-height: 1; }
.cat-nav-sub:hover > a .cat-nav-arrow, .cat-nav-sub:focus-within > a .cat-nav-arrow { color: var(--color-brand-primary); }

/* LEVEL 3 flyout: opens to the RIGHT on hover/focus. Absolutely positioned,
   so it can never shift the navigator, the products, or the page height.
   Keyboard users reach it via Tab (focus-within); it disappears as soon as
   focus or the pointer leaves the item. */
.cat-nav-flyout { position: absolute; left: calc(100% + 2px); top: -8px; width: 218px; max-height: min(430px, 72vh); overflow-y: auto; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-soft); padding: 8px 0 10px; display: none; z-index: 70; }
.cat-nav-sub:hover > .cat-nav-flyout, .cat-nav-sub:focus-within > .cat-nav-flyout { display: block; }
.cat-nav-flyout-head { display: block; padding: 6px 16px 9px; font-size: 12.5px; font-weight: 900; color: var(--color-brand-primary); border-bottom: 1px solid var(--color-border); margin-bottom: 6px; }
.cat-nav-flyout ul { margin: 0; padding: 0; list-style: none; }
.cat-nav-flyout li a { display: block; padding: 6px 16px; font-size: 12.5px; font-weight: 600; color: var(--color-text-secondary); line-height: 1.45; }
.cat-nav-flyout li a:hover { color: var(--color-brand-primary); background: var(--color-brand-soft); }

/* ---- compact featured category strip (replaces the oversized tile grid) ---- */
.section-sub { margin: 6px 0 0; color: var(--color-text-secondary); font-size: 13px; }
.featured-category-section .section-heading { margin-bottom: 14px; }
.featured-category-strip { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.featured-category-chip a { display: grid; gap: 3px; padding: 11px 13px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); min-height: 100%; }
.featured-category-chip a:hover { border-color: var(--color-border-strong); }
.featured-category-name { font-size: 14px; font-weight: 800; }
.featured-category-chip small { color: var(--color-text-secondary); font-size: 12px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }

/* ---- configurable promotional banner slot ---- */
.promo-banner-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.promo-banner { position: relative; display: block; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; background: var(--color-brand-soft); }
.promo-banner:hover { border-color: var(--color-border-strong); }
.promo-banner-image { width: 100%; height: auto; aspect-ratio: 16 / 7; object-fit: cover; }
.promo-banner-label { position: absolute; left: 12px; bottom: 10px; padding: 5px 10px; border-radius: var(--radius-sm); background: var(--color-inverse-surface); color: var(--color-inverse-text); font-size: 13px; font-weight: 800; }
.theme-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.theme-tile { min-height: 72px; display: grid; place-items: center; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); font-weight: 900; }
.price-line { color: var(--color-brand-primary); font-weight: 900; }
.wholesale-band { background: var(--color-brand-primary-active); color: var(--color-on-brand-primary); }
.wholesale-inner { display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center; }
.wholesale-band p { color: var(--color-inverse-text-secondary); max-width: 720px; }
.wholesale-band .eyebrow { color: var(--color-brand-secondary); }
.wholesale-inner ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.wholesale-inner li { padding: 10px 12px; border: 1px solid var(--color-inverse-border); border-radius: var(--radius-md); background: color-mix(in srgb, var(--color-surface) 8%, transparent); font-weight: 800; }
.trust-strip { background: var(--color-surface); padding: 24px 0; border-top: 1px solid var(--color-border); }
.trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.trust-grid div { display: grid; gap: 4px; padding: 16px; background: var(--color-background); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.trust-grid span { color: var(--color-text-secondary); }

.site-footer { background: var(--color-inverse-surface); color: var(--color-inverse-text); padding: 42px 0 22px; }
.footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.site-footer h2 { font-size: 15px; margin: 0 0 12px; }
.site-footer a, .site-footer p { display: block; color: var(--color-inverse-text-secondary); margin: 0 0 8px; }
.newsletter-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.newsletter-form input { min-width: 0; border: 1px solid var(--color-inverse-border); border-radius: var(--radius-md); background: color-mix(in srgb, var(--color-surface) 8%, transparent); color: var(--color-inverse-text); padding: 12px; }
.newsletter-form button { border: 0; border-radius: var(--radius-md); background: var(--color-brand-secondary); color: var(--color-on-brand-secondary); font-weight: 900; padding: 0 14px; }
.site-footer .footer-consent-note { margin-top: 8px; font-size: 11px; line-height: 1.45; opacity: .82; }
.footer-bottom { margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--color-inverse-border); display: flex; justify-content: space-between; gap: 16px; color: var(--color-inverse-text-secondary); font-size: 13px; }
.content-page { padding: 48px 0; }

@media (max-width: 1100px) {
  .main-header-inner { grid-template-columns: 150px 1fr 268px; gap: 14px; }
  .category-grid { grid-template-columns: repeat(3, 1fr); }
  .mega-grid { grid-template-columns: repeat(3, 1fr); }
  /* Sprint 01.1: narrower category navigator at this width. */
  .home-shop { grid-template-columns: 216px minmax(0, 1fr); gap: 18px; }
  .home-shop-nav { top: 148px; }
  .cat-nav-flyout { width: 200px; }
  .featured-category-strip { grid-template-columns: repeat(2, 1fr); }
  .product-hover-preview { width: min(360px, 46vw); }
}

@media (max-width: 860px) {
  .utility-inner { justify-content: center; text-align: center; }
  .utility-inner a { display: none; }
  .main-header-inner { min-height: 58px; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; }
  .mobile-menu-toggle { display: inline-grid; place-items: center; }
  .site-brand { justify-self: center; }
  .brand-mark { width: 34px; height: 34px; }
  .brand-text { font-size: 18px; }
  .main-header .site-search { grid-column: 1 / -1; grid-row: 2; margin-bottom: 9px; }
  .header-actions a:not(.cart-link), .header-actions .header-sep { display: inline-flex; }
  .header-actions { justify-content: end; gap: 6px; font-size: 12px; }
  .header-actions .header-account-entry span, .header-actions .wishlist-link span[data-wishlist-label] { display: none; }
  .header-actions .header-account-entry, .header-actions .wishlist-link, .header-actions .cart-link { min-width: 38px; min-height: 44px; justify-content: center; padding: 0 2px; }
  .desktop-nav { display: none; }
  .hero-section { padding: 16px 0 18px; }
  .hero-layout { grid-template-columns: 1fr; gap: 12px; }
  .hero-visual { order: -1; }
  .product-visual-slot { max-height: 118px; }
  .category-grid, .theme-grid { grid-template-columns: repeat(2, 1fr); }
  .wholesale-inner, .trust-grid, .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { display: grid; }
  /* Sprint 01.1: touch-sized viewports do NOT get the desktop two-column
     shop area. The navigator collapses into one compact "Browse categories"
     expander above the product sections; opening it reveals the same grouped
     taxonomy in a scrollable panel. No hover-only navigation; products stay
     one thumb-flick away. */
  .home-shop { grid-template-columns: 1fr; gap: 14px; padding: 16px 0 8px; }
  /* Mobile is already a single column, so the no-rail variant only needs to drop
     the desktop gap — otherwise a phantom 22px gutter would appear here. */
  .home-shop--no-rail { grid-template-columns: 1fr; gap: 0; }
  .home-shop-nav { position: static; }
  .home-shop-main > .home-section { padding-top: 4px; padding-bottom: 18px; }
  .cat-nav-toggle { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 11px 14px; border: 0; border-top: 1px solid var(--color-border); background: var(--color-surface); font-weight: 800; font-size: 13px; color: var(--color-text); cursor: pointer; }
  .cat-nav-toggle-chevron { width: 8px; height: 8px; border-right: 1.6px solid var(--color-text-secondary); border-bottom: 1.6px solid var(--color-text-secondary); transform: rotate(45deg) translate(-1px, -1px); transition: transform 140ms ease; }
  .cat-nav.is-open .cat-nav-toggle-chevron { transform: rotate(-135deg) translate(-1px, -1px); }
  .cat-nav-list { display: none; }
  .cat-nav.is-open .cat-nav-list { display: block; max-height: 62vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .cat-nav-flyout { display: none !important; } /* no hover flyouts on touch */
  .featured-category-strip { grid-template-columns: repeat(2, 1fr); }
  .promo-banner-grid { grid-template-columns: 1fr; }
}

@media (max-width: 430px) {
  .container { width: min(calc(100% - 24px), var(--container)); }
  .utility-inner { min-height: 24px; font-size: 12px; }
  .main-header .site-search { grid-template-columns: minmax(0, 1fr) 52px; }
  .site-search input[type="search"] { padding: 9px 12px; }
  .site-search button { min-width: 52px; padding: 0 8px; font-size: 13px; }
  .hero-section { padding-top: 10px; padding-bottom: 14px; }
  .hero-copy .eyebrow { display: none; }
  .hero-copy h1 { font-size: 25px; margin-bottom: 7px; }
  .hero-copy p { font-size: 14px; line-height: 1.35; }
  .hero-actions { margin-top: 10px; gap: 8px; }
  .button { min-height: 36px; padding: 0 12px; font-size: 14px; }
  .home-section { padding: 28px 0; }
  .category-tile { min-height: 148px; grid-template-rows: 82px 1fr; }
  .category-content { padding: 11px 12px 12px; }
  .category-name { font-size: 15px; }
  .theme-tile { min-height: 60px; }
  .featured-category-strip { grid-template-columns: 1fr; }
  .site-search button { padding: 0 14px; }
}

/* ============================== Gate 3A: search dropdown ============================== */

.search-suggestions { display: block; padding: 0; }
.search-panel { display: grid; gap: 10px 16px; padding: 14px; }
.search-panel[hidden] { display: none; }
.search-panel strong { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-secondary); }
.search-panel a { color: var(--color-brand-primary); font-weight: 700; justify-self: start; }
.search-empty { margin: 0; color: var(--color-text-secondary); font-size: 13px; }

/* ============================== Gate 3A: archive layout ============================== */

.archive-page { padding: 18px 0 48px; }
.breadcrumb ol { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 13px; color: var(--color-text-secondary); }
.breadcrumb li { display: flex; gap: 8px; }
.breadcrumb li + li::before { content: "/"; color: var(--color-border-strong); }
.breadcrumb a { color: var(--color-text-secondary); font-weight: 600; }
.breadcrumb a:hover { color: var(--color-brand-primary); }
.breadcrumb [aria-current="page"] { font-weight: 800; color: var(--color-text); }

.archive-head { margin: 14px 0 4px; }
.archive-head h1 { margin: 0 0 6px; font-size: 30px; line-height: 1.1; }
.archive-description { margin: 0; max-width: 760px; color: var(--color-text-secondary); font-size: 14px; }
.subcategory-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
/* Gate 3A.5: cap the collapsed state at two rows so large child lists cannot
   push the grid far below the fold; main.js reveals "Show more" only when the
   content actually overflows. */
.subcategory-nav:not(.is-expanded) { max-height: 76px; overflow: hidden; }
.subcategory-nav.is-expanded { max-height: none; }
.subcategory-chip { padding: 7px 13px; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface); font-size: 13px; font-weight: 700; }
.subcategory-chip:hover { border-color: var(--color-border-strong); color: var(--color-brand-primary); }
.subcategory-more { border-style: dashed; color: var(--color-brand-primary); }
.subcategory-more[hidden] { display: none; }

.archive-toolbar { display: flex; align-items: center; gap: 14px; min-height: 44px; margin: 16px 0 14px; padding: 6px 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
/* Gate 3A.5: the desktop sidebar is always visible, so the toolbar only shows
   a quiet status label; the drawer trigger stays mobile-only. */
.filter-desktop-label { display: none; align-items: center; gap: 6px; color: var(--color-text-secondary); font-size: 13px; font-weight: 600; }
.filter-desktop-count { color: var(--color-brand-primary); font-weight: 800; }
@media (min-width: 1024px) { .filter-desktop-label { display: inline-flex; } }
.filter-toggle { display: none; min-height: 36px; padding: 0 14px; font-size: 14px; gap: 8px; }
/* Gate 3A.5: WooCommerce's button stylesheet forces `display: inline-block`
   onto every `button.button` at specificity (0,2,1), which re-shows this
   desktop-hidden toggle on >=1024px viewports. Re-assert the theme's display
   intent with an equal-specificity selector (wins by source order). Colors
   are deliberately untouched so the approved mobile toggle look is kept. */
.woocommerce button.filter-toggle { display: none; }
.filter-count-badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--color-brand-primary); color: var(--color-on-brand-primary); font-size: 12px; font-weight: 800; }
/* Gate 3A.5: `display: inline-grid` beats the UA `[hidden]` rule, so an empty
   badge rendered as a stray dot ("Filters 0"). Explicitly hide hidden badges. */
.filter-count-badge[hidden] { display: none; }
.result-count { margin: 0; color: var(--color-text-secondary); font-size: 13px; font-weight: 600; }
.archive-sorting { margin-left: auto; }
.archive-sorting select { min-height: 34px; padding: 4px 8px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); font-size: 13px; font-weight: 600; }

.archive-layout { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 24px; align-items: start; }

/* filter rail / drawer */
.filter-rail { display: grid; gap: 2px; }
.filter-rail-head { display: none; }
.filter-groups { display: grid; gap: 2px; }
.filter-group { border-bottom: 1px solid var(--color-border); }
.filter-group summary { cursor: pointer; padding: 11px 2px; font-weight: 800; font-size: 14px; list-style: none; display: flex; align-items: center; justify-content: space-between; }
.filter-group summary::-webkit-details-marker { display: none; }
.filter-group summary::after { content: "+"; color: var(--color-text-secondary); font-weight: 700; }
.filter-group[open] summary::after { content: "–"; }
.filter-options { margin: 0; padding: 0 0 10px; list-style: none; display: grid; gap: 2px; }
.filter-options-nested { padding-bottom: 0; }
.filter-option-link { display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 3px 2px; font-size: 13px; color: var(--color-text); border-radius: var(--radius-sm); }
.filter-option-link:hover { color: var(--color-brand-primary); }
.filter-option-link.is-active { font-weight: 800; color: var(--color-brand-primary); }
.filter-option-check { display: inline-grid; place-items: center; width: 15px; font-weight: 900; }
.filter-option-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filter-option-count { color: var(--color-text-secondary); font-size: 12px; }
.filter-more summary { cursor: pointer; color: var(--color-brand-primary); font-size: 12px; font-weight: 800; padding: 4px 2px; list-style: none; }
.filter-more summary::-webkit-details-marker { display: none; }
.filter-more[open] summary { display: none; }
.filter-price { display: flex; align-items: center; gap: 6px; padding: 4px 2px 12px; }
.filter-price input[type="number"] { width: 100%; min-width: 0; padding: 8px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: 13px; }
.filter-price-apply { min-height: 34px; padding: 0 10px; font-size: 13px; }
.filter-actions { display: none; }

.filter-backdrop { position: fixed; inset: 0; background: var(--color-overlay); z-index: 80; }

/* active filter chips */
.active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.filter-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--color-border-strong); border-radius: 999px; background: var(--color-surface); font-size: 12px; font-weight: 700; color: var(--color-text); }
.filter-chip:hover { border-color: var(--color-brand-primary); color: var(--color-brand-primary); }
.filter-chip-clear { border-style: dashed; color: var(--color-text-secondary); }

/* ============================== Gate 3A: product grid + card ============================== */

.product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 1440px) { .product-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
/* Tablet range between the 2-column phone grid and the 4-column desktop grid. */
@media (min-width: 768px) and (max-width: 1023px) { .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.product-card { display: flex; flex-direction: column; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); overflow: hidden; transition: border-color 120ms ease, box-shadow 120ms ease; }
.product-card:hover { border-color: var(--color-border-strong); box-shadow: 0 4px 14px var(--color-shadow); }
/* Store Completion Sprint 01: ~14% more useful image area, within the
   Director's 10-20% request, without destroying catalog density. */
.card-media { position: relative; display: block; aspect-ratio: 1 / 0.88; background: var(--color-brand-soft); overflow: hidden; }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 240ms ease; }
/* Subtle in-area zoom on hover: a transform inside an overflow-hidden box,
   so the card never moves and nothing reflows. */
.product-card:hover .card-media img { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) {
  .card-media img { transition: none; }
  .product-card:hover .card-media img { transform: none; }
}
.card-media .product-image-placeholder { display: block; width: 100%; height: 100%; background: var(--color-brand-soft) url("../images/product-placeholder.png") center/cover no-repeat; }
.stock-badge { position: absolute; top: 8px; left: 8px; padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: 0.02em; background: var(--color-surface); border: 1px solid var(--color-border-strong); color: var(--color-text); }
.stock-badge.stock-low { color: var(--color-warning); border-color: var(--color-warning); }
.stock-badge.stock-out { color: var(--color-danger); border-color: var(--color-danger); }
.stock-badge.stock-preorder { color: var(--color-brand-primary); border-color: var(--color-brand-primary); }

.card-body { display: grid; gap: 6px; padding: 10px 12px 12px; flex: 1; align-content: start; }
.card-title { margin: 0; font-size: 13px; line-height: 1.3; font-weight: 700; }
.card-title a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
.card-pack { margin: 0; font-size: 12px; color: var(--color-text-secondary); font-weight: 600; }
/* Gate 3A.5 price hierarchy: current pack price is the PRIMARY price line;
   unit price and the tier hint stay secondary/tertiary support info. */
.card-pricing { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.card-price { color: var(--color-brand-primary); font-weight: 900; font-size: 17px; }
.card-price-per { font-size: 12px; font-weight: 600; color: var(--color-text-secondary); }
.card-unit { font-size: 12px; color: var(--color-text-secondary); }
/* Tertiary tier hint: plain quiet text ("50+ packs · $X / pack") instead of
   the former heavy pill block; values still come from PricingService data. */
.card-tier-hint { margin: 0; font-size: 12px; font-weight: 600; color: var(--color-text-secondary); }

.card-actions { display: flex; align-items: stretch; gap: 6px; margin-top: auto; padding-top: 4px; }
/* Quick Add is the primary shopping action: full Theme Primary CTA treatment
   via the existing brand tokens (never a hardcoded color). */
.card-quick-add { flex: 1; min-height: 38px; padding: 0 12px; font-size: 14px; }
.product-card.is-out-of-stock .card-media { opacity: 0.75; }
.quick-add-qty { width: 52px; min-height: 38px; padding: 0 6px; border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: 13px; text-align: center; }
/* Wishlist stays deliberately weaker than the Add CTA. */
.card-wishlist { min-width: 38px; min-height: 38px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text-secondary); cursor: pointer; display: inline-grid; place-items: center; padding: 0; }
.card-wishlist:hover { color: var(--color-text); border-color: var(--color-border-strong); }
.card-wishlist.is-active { color: var(--color-brand-primary); border-color: var(--color-brand-primary); background: var(--color-brand-soft); }
.card-feedback { margin: 0; font-size: 12px; font-weight: 700; color: var(--color-danger); }
.button.is-loading { opacity: 0.65; cursor: progress; }

/* pagination */
.archive-results .pagination, .archive-results .navigation.pagination { margin-top: 24px; }
.nav-links { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.nav-links .page-numbers { display: inline-grid; place-items: center; min-width: 36px; min-height: 36px; padding: 0 8px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); font-size: 13px; font-weight: 700; color: var(--color-text); }
.nav-links .page-numbers.current { background: var(--color-brand-primary); border-color: var(--color-brand-primary); color: var(--color-on-brand-primary); }
.nav-links .page-numbers:hover:not(.current) { border-color: var(--color-border-strong); color: var(--color-brand-primary); }
.nav-links .page-numbers.dots { border: 0; background: transparent; }

.archive-empty { padding: 48px 20px; border: 1px dashed var(--color-border-strong); border-radius: var(--radius-md); text-align: center; display: grid; gap: 10px; justify-items: center; }
.archive-empty h2 { margin: 0; font-size: 20px; }
.archive-empty p { margin: 0; color: var(--color-text-secondary); }

/* quick add toast */
.quick-add-toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 120; display: flex; align-items: center; gap: 14px; padding: 11px 18px; border-radius: var(--radius-md); background: var(--color-inverse-surface); color: var(--color-inverse-text); font-size: 13px; font-weight: 700; box-shadow: var(--shadow-soft); }
.quick-add-toast[hidden] { display: none; }
.quick-add-toast a { color: var(--color-brand-secondary); font-weight: 800; }

/* cart count */
.cart-link { position: relative; }
.cart-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 6px; padding: 0 5px; border-radius: 999px; background: var(--color-brand-primary); color: var(--color-on-brand-primary); font-size: 11px; font-weight: 800; vertical-align: 1px; }
.wishlist-page { padding-top: 32px; padding-bottom: 52px; }
.wishlist-page h1 { margin-bottom: 18px; }
.wishlist-empty, .wishlist-login-note { padding: 28px; border: 1px dashed var(--color-border-strong); border-radius: var(--radius-md); text-align: center; }
.wishlist-login-note { margin-bottom: 18px; padding: 12px 16px; border-style: solid; background: var(--color-brand-soft); }
.wishlist-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; list-style: none; padding: 0; margin: 0; }
@media (min-width: 1440px) { .wishlist-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 768px) and (max-width: 1023px) { .wishlist-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) { .wishlist-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.service-form-page { max-width: 980px; padding: 42px 20px 72px; }
.service-form-copy { max-width: 680px; margin-bottom: 24px; }
.service-form-copy h1 { margin: 4px 0 10px; font-size: clamp(30px, 5vw, 48px); }
.service-form-copy p:last-child { color: var(--color-text-secondary); font-size: 17px; }
.service-inquiry-form { display: grid; gap: 16px; max-width: 680px; padding: 24px; border: 1px solid var(--color-border); border-radius: 16px; background: var(--color-surface); box-shadow: var(--shadow-soft); }
.service-inquiry-form label { display: grid; gap: 6px; font-weight: 700; }
.service-inquiry-form input:not(.honeypot), .service-inquiry-form select, .service-inquiry-form textarea { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: 10px; font: inherit; background: var(--color-surface); }
.service-inquiry-form textarea { resize: vertical; }
.service-inquiry-form input:focus, .service-inquiry-form select:focus, .service-inquiry-form textarea:focus { outline: 2px solid var(--color-focus); border-color: var(--color-brand-primary); }
.honeypot { position: absolute; left: -10000px; opacity: 0; }
.privacy-note { margin: 0; color: var(--color-text-secondary); font-size: 13px; }
.service-success { display: grid; gap: 6px; max-width: 680px; margin: 0 0 20px; padding: 16px 18px; border: 1px solid #9ccfb0; border-radius: 12px; background: #effaf3; color: #1d5b38; }
@media (max-width: 640px) { .service-form-page { padding: 28px 16px 52px; } .service-inquiry-form { padding: 18px; } }
.wishlist-guest-card { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 12px; }
.wishlist-guest-media { display: block; aspect-ratio: 1; background: var(--color-brand-soft); overflow: hidden; }
.wishlist-guest-media img { width: 100%; height: 100%; object-fit: cover; }
.wishlist-guest-card h2 { font-size: 15px; margin: 10px 0 5px; }
.wishlist-guest-card p { margin: 0 0 10px; color: var(--color-brand-primary); font-weight: 800; }
.wishlist-guest-card button { min-height: 38px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); cursor: pointer; padding: 0 12px; }

/* ============ Store Completion Sprint 01: desktop hover preview ============
   One shared element for the whole grid. `pointer-events: none` guarantees it
   can never obstruct a control and that clicking the card image still opens
   the product page. Position comes from the pure geometry helper, so it can
   never overflow the viewport.                                              */
.product-hover-preview { position: fixed; z-index: 130; width: min(360px, 42vw); padding: 6px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-soft); pointer-events: none; }
.product-hover-preview[hidden] { display: none; }
.product-hover-preview-image { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; background: var(--color-brand-soft); border-radius: var(--radius-sm); }

/* search suggestions inside drawer */
.drawer-search .search-panel { grid-template-columns: 1fr; }

/* ============================== Gate 3A: responsive ============================== */

@media (max-width: 1100px) {
  .archive-layout { grid-template-columns: 208px minmax(0, 1fr); gap: 18px; }
}

@media (max-width: 1023px) {
  .archive-layout { grid-template-columns: 1fr; }
  .filter-toggle { display: inline-flex; }
  .woocommerce button.filter-toggle { display: inline-flex; }
  .filter-rail { position: fixed; inset: 0 auto 0 0; width: min(380px, 92vw); z-index: 90; background: var(--color-surface); transform: translateX(-105%); transition: transform 180ms ease; overflow-y: auto; box-shadow: var(--shadow-soft); padding-bottom: 20px; }
  .filter-rail.is-open { transform: translateX(0); }
  .filter-rail-head { display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 10px 16px; border-bottom: 1px solid var(--color-border); }
  .filter-groups { padding: 6px 16px; }
  .filter-actions { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding: 12px 16px; background: var(--color-surface); border-top: 1px solid var(--color-border); }
  .filter-clear { font-weight: 800; color: var(--color-text-secondary); text-decoration: underline; }
}

@media (max-width: 767px) {
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .archive-head h1 { font-size: 24px; }
  .archive-toolbar { flex-wrap: wrap; gap: 8px 12px; }
  .archive-sorting { margin-left: 0; }
  /* Mobile subcategory chips: one compact horizontal scroll row instead of a
     wrapped stack, so many children stay above the fold. */
  .subcategory-nav { flex-wrap: nowrap; max-height: none; overflow-x: auto; padding-bottom: 2px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .subcategory-nav::-webkit-scrollbar { display: none; }
  .subcategory-chip { flex: 0 0 auto; }
  .subcategory-more { display: none; }
  .card-body { padding: 9px 10px 10px; }
  .card-title { font-size: 12px; }
  .card-price { font-size: 14px; }
  .quick-add-qty { width: 44px; }
}

@media (max-width: 430px) {
  .archive-page { padding-top: 12px; }
  .archive-toolbar { margin: 12px 0; }
  .card-actions { flex-wrap: nowrap; }
  .card-tier-hint { font-size: 11px; }
}

/* ============================== Gate 3B: product detail ============================== */

.product-page { padding: 18px 0 48px; }
.product-layout { display: grid; grid-template-columns: minmax(0, 57fr) minmax(0, 43fr); gap: 28px; align-items: start; margin-top: 14px; }

/* gallery: large square main image + vertical thumbnail rail on its left (desktop).
   DOM order is thumbs-first so the 68px grid column is the rail and the 1fr
   column is the stage — the reverse order squeezed the main image into the
   rail (Director-reported blank gallery). */
.product-gallery { position: sticky; top: 128px; }
.product-gallery.has-thumbs { display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: 12px; align-items: start; }
/* Desktop PDP viewer: one stable square (~600px, hard max 620px) no matter
   which gallery image is showing — different aspect ratios must never resize
   the viewer, shift the page, or squeeze the product info column. */
.gallery-stage { position: relative; width: min(100%, 620px); min-width: 0; margin-inline: auto; }
.gallery-main { position: relative; margin: 0; width: 100%; aspect-ratio: 1 / 1; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-brand-soft); overflow: hidden; }
.gallery-main img { width: 100%; height: 100%; object-fit: contain; }
.gallery-main .product-image-placeholder { display: block; width: 100%; height: 100%; background-size: contain; }
.gallery-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--color-border); border-radius: 50%; background: var(--color-surface); color: var(--color-text); font-size: 20px; line-height: 1; cursor: pointer; opacity: 0.75; box-shadow: var(--shadow-soft); }
.gallery-nav:hover, .gallery-nav:focus-visible { opacity: 1; color: var(--color-brand-primary); }
.gallery-nav:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.gallery-prev { left: 6px; }
.gallery-next { right: 6px; }
.product-gallery.has-thumbs .gallery-thumbs { display: flex; flex-direction: column; gap: 8px; max-height: 560px; overflow-y: auto; overscroll-behavior: contain; padding: 2px; }
.gallery-thumb { width: 64px; height: 64px; flex: 0 0 auto; padding: 0; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); overflow: hidden; cursor: pointer; }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumb.is-active { border-color: var(--color-brand-primary); box-shadow: 0 0 0 1px var(--color-brand-primary); }

/* click-to-zoom: the main image invites a click; the lightbox shows the
   full-resolution attachment over a dimmed backdrop */
.gallery-main { cursor: zoom-in; }
.gallery-zoom-trigger { position: absolute; inset: 0; z-index: 1; padding: 0; border: 0; background: transparent; cursor: zoom-in; border-radius: inherit; }
.gallery-zoom-trigger:focus-visible { outline: 3px solid var(--color-focus); outline-offset: -3px; }
.lightbox { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 32px; background: rgba(15, 18, 24, 0.88); cursor: zoom-out; }
.lightbox-image { max-width: min(92vw, 1100px); max-height: 88vh; width: auto; height: auto; object-fit: contain; border-radius: var(--radius-sm); background: var(--color-surface); box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45); cursor: default; }
.lightbox-close { position: absolute; top: 18px; right: 22px; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 50%; background: rgba(15, 18, 24, 0.6); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
.lightbox-close:hover, .lightbox-close:focus-visible { background: rgba(15, 18, 24, 0.85); }
.lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 50%; background: rgba(15, 18, 24, 0.6); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
.lightbox-nav:hover, .lightbox-nav:focus-visible { background: rgba(15, 18, 24, 0.85); }
.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }
.lightbox button:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
@media (max-width: 767px) {
  .lightbox { padding: 12px; }
  .lightbox-image { max-width: 96vw; max-height: 76vh; }
  .lightbox-nav { width: 40px; height: 40px; }
  .lightbox-prev { left: 8px; }
  .lightbox-next { right: 8px; }
}
.gallery-thumb:hover { border-color: var(--color-border-strong); }
.gallery-thumb:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }

/* desktop hover zoom: lens over the main image + magnified pane beside it.
   Both are pointer-events: none so thumbnails and prev/next stay clickable,
   and both are out of flow so nothing can jump. Desktop (fine pointer) only;
   touch devices never depend on hover. */
.gallery-lens { position: absolute; z-index: 2; display: none; pointer-events: none; border: 1px solid rgba(15, 18, 24, 0.35); border-radius: 2px; background: rgba(255, 255, 255, 0.22); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55) inset; }
.gallery-lens.is-visible { display: block; }
.gallery-zoom-pane { position: fixed; z-index: 9990; display: none; pointer-events: none; border: 1px solid var(--color-border); border-radius: var(--radius-md); background-color: var(--color-surface); background-repeat: no-repeat; box-shadow: var(--shadow-soft); }
.gallery-zoom-pane.is-visible { display: block; }
@media (max-width: 1023px), (hover: none), (pointer: coarse) {
  .gallery-lens, .gallery-zoom-pane { display: none !important; }
}

/* purchase panel */
.purchase-panel { display: grid; gap: 10px; align-content: start; }
.panel-title { margin: 0; font-size: 26px; line-height: 1.15; }
.panel-sku { margin: -6px 0 0; color: var(--color-text-secondary); font-size: 13px; font-weight: 600; }
.panel-sku [data-panel-sku] { font-weight: 700; }
.panel-rating { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--color-text-secondary); }
.panel-pack { margin: 4px 0 0; font-size: 14px; font-weight: 800; color: var(--color-text); }
.panel-price { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.panel-price .price-main { color: var(--color-brand-primary); font-size: 26px; font-weight: 900; }
.panel-price .price-per { font-size: 14px; font-weight: 600; color: var(--color-text-secondary); }
.panel-price .price-unit { font-size: 13px; color: var(--color-text-secondary); font-weight: 600; }

/* active promotion: rule tag + was/now prices rendered by the promotion engine */
.panel-promo { margin: 4px 0 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.panel-promo .promo-tag { display: inline-block; padding: 2px 8px; border-radius: 4px; background: #fdecea; color: #c0392b; font-size: 12px; font-weight: 800; }
.panel-promo .promo-was { color: var(--color-text-secondary); font-size: 14px; }
.panel-promo .promo-now { color: #c0392b; font-size: 20px; font-weight: 900; text-decoration: none; }
.panel-promo .promo-cond { color: var(--color-text-secondary); font-size: 12px; font-weight: 600; }
.panel-promo .promo-savings, .card-savings { color: var(--color-success); font-size: 12px; font-weight: 800; }

/* promotion leads the main price: del original, ins promo (a11y: del/ins semantics) */
.panel-price .price-main-promo { display: inline-flex; align-items: baseline; gap: 8px; }
.panel-price .price-was { color: var(--color-text-secondary); font-size: 15px; font-weight: 600; }
.panel-price .price-now { color: #c0392b; font-size: 26px; font-weight: 900; text-decoration: none; }

/* PDP promotion messaging block: quiet discovery, price stays the protagonist */
.panel-promo-msgs { margin: 6px 0 0; display: grid; gap: 6px; }
.promo-msg { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; font-size: 13px; color: var(--color-text); }
.promo-msg-shipping::before, .promo-msg-spend::before { content: '✔'; color: var(--color-success); font-weight: 700; margin-right: 2px; }
.promo-msg-coupon { padding: 7px 9px; background: #fff8f6; border: 1px solid #efd9d4; border-left: 3px solid var(--color-brand-primary); border-radius: 7px; box-shadow: none; }
.promo-msg-coupon.is-unavailable { opacity: .64; filter: saturate(.65); }

/* PDP coupon offer: one quiet commerce row, not a ticket or a form control. */
.promo-coupon-tag { display: inline-block; padding: 2px 7px; border-radius: 999px; background: var(--color-brand-soft); color: var(--color-brand-primary); font-size: 11px; font-weight: 800; line-height: 1.3; }
.promo-coupon-label { font-size: 13px; font-weight: 800; white-space: nowrap; }
.promo-coupon-cond { color: var(--color-text-secondary); font-size: 12px; line-height: 1.35; }
.promo-coupon-get { cursor: pointer; margin-left: auto; min-height: 29px; padding: 4px 9px; border: 1px solid var(--color-border-strong); border-radius: 5px; background: var(--color-surface); color: var(--color-brand-primary); font-size: 12px; font-weight: 800; line-height: 1.1; white-space: nowrap; }
.promo-coupon-get:hover { border-color: var(--color-brand-primary); background: var(--color-brand-soft); }
.promo-coupon-get.is-done { border-color: var(--color-success); color: var(--color-success); }

/* product card promotion (PLP) */
.card-promo-tag { display: inline-block; padding: 2px 8px; border-radius: 4px; background: #fdecea; color: #c0392b; font-size: 11px; font-weight: 800; width: fit-content; }
.card-price-promo { display: inline-flex; align-items: baseline; gap: 6px; }
.card-price-promo .card-price-was { color: var(--color-text-secondary); font-size: 13px; font-weight: 600; }
.card-price-promo .card-price-now { color: #c0392b; font-size: 20px; font-weight: 900; text-decoration: none; }
.card-promo-cond { margin: 2px 0 0; font-size: 12px; color: var(--color-text-secondary); }

/* cart offers block */
.cart-offers { margin: 14px 0 0; padding: 12px 14px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 8px; }
.cart-offers[hidden] { display: none; }
.cart-offers-title { margin: 0 0 8px; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-secondary); }
.cart-offers-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.cart-offer { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; font-size: 13px; }
.cart-offer-applied::before { content: '✔'; color: var(--color-success); font-weight: 700; }
.cart-offer-progress { color: var(--color-text); }
.cart-offer-progress::before { content: '•'; color: var(--color-brand-secondary); font-weight: 900; }
.cart-offer-coupon { padding: 8px 10px; background: var(--color-brand-soft); border: 1px solid var(--color-border); border-radius: 6px; }

.cart-summary-promo-savings dt, .cart-summary-promo-savings dd { color: var(--color-success); }
.checkout-savings-note td { padding-top: 10px; font-size: 13px; font-weight: 700; color: var(--color-success); }

@media (max-width: 720px) {
  .cart-offers { margin: 10px 0 0; padding: 10px; }
  .panel-promo-msgs { gap: 4px; }
  .promo-msg { font-size: 12px; }
  .promo-msg-coupon { gap: 5px 8px; }
  .promo-coupon-cond { flex: 1 1 100%; order: 3; }
  .promo-coupon-get { order: 2; }
}

/* tier table: light rules, no boxed frame */
.tier-table { width: 100%; margin: 2px 0 0; border: 0; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.tier-table thead th { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--color-border-strong); background: transparent; color: var(--color-text-secondary); font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; }
.tier-table thead th:last-child, .tier-table td:last-child { text-align: right; }
.tier-row td { padding: 7px 8px; border-top: 1px solid var(--color-border); }
.tier-row:first-child td { border-top: 0; }
.tier-row .tier-range { font-weight: 600; }
.tier-row .tier-price { font-weight: 700; }
.tier-mobile-price { display: none; }
.tier-row.is-active { background: var(--color-brand-soft); box-shadow: inset 3px 0 0 var(--color-brand-primary); }
.tier-row.is-active .tier-range, .tier-row.is-active .tier-price { color: var(--color-brand-primary-active); font-weight: 800; }

/* stock / lead time */
.stock-line { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; font-size: 13px; font-weight: 700; }
.stock-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--color-success); }
.stock-line .lead-time { color: var(--color-text-secondary); font-weight: 600; }
.stock-line.stock-out .stock-dot { background: var(--color-danger); }
.stock-line.stock-out { color: var(--color-danger); }
.stock-line.stock-preorder .stock-dot { background: var(--color-brand-primary); }
.stock-line.stock-preorder { color: var(--color-brand-primary); }
.stock-line.stock-instock { color: var(--color-success); }

/* variation selectors: genuine product options only */
.variation-groups { display: grid; gap: 10px; margin-top: 0; }
.variation-fieldset { margin: 0; padding: 0; border: 0; }
.variation-legend { padding: 0; margin-bottom: 6px; font-size: 13px; font-weight: 800; }
.variation-options { display: flex; flex-wrap: wrap; gap: 8px; }
.variation-option { position: relative; display: inline-flex; }
.variation-input { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.variation-chip { display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); font-size: 14px; font-weight: 700; cursor: pointer; }
.variation-option:hover .variation-chip { border-color: var(--color-border-strong); color: var(--color-brand-primary); }
.variation-input:checked + .variation-chip { border-color: var(--color-brand-primary); background: var(--color-brand-soft); color: var(--color-brand-primary-active); }
.variation-input:focus-visible + .variation-chip { outline: 3px solid var(--color-focus); outline-offset: 3px; }

/* quantity + piece helper */
.qty-block { display: grid; gap: 6px; margin-top: 2px; }
.qty-heading { font-size: 13px; font-weight: 800; }
.qty-stepper { display: inline-flex; align-items: stretch; gap: 6px; }
.qty-btn { min-width: 44px; min-height: 44px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); font-size: 18px; font-weight: 900; cursor: pointer; }
.qty-btn:hover { border-color: var(--color-border-strong); color: var(--color-brand-primary); }
.qty-input { width: 84px; min-height: 44px; padding: 0 8px; border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: 15px; font-weight: 800; text-align: center; }
.piece-helper { margin: 0; font-size: 13px; color: var(--color-text-secondary); font-weight: 600; }

/* estimated total: no boxed frame, quiet grouping */
.est-block { display: grid; gap: 3px; margin-top: 2px; }
.est-line { margin: 0; font-size: 14px; }
.est-line strong { font-size: 18px; color: var(--color-brand-primary); }
.est-note { margin: 0; font-size: 12px; color: var(--color-text-secondary); }
.est-next { margin: 0; font-size: 13px; font-weight: 700; color: var(--color-brand-primary); }
.est-next[hidden] { display: none; }

/* add to cart + bulk entry */
.panel-actions { display: grid; gap: 10px; justify-items: start; margin-top: 2px; }
.panel-add { width: 100%; max-width: 420px; min-height: 48px; font-size: 16px; }
.woocommerce button.panel-add { font-size: 16px; }
.panel-add:disabled { opacity: 0.55; cursor: not-allowed; }
.detail-feedback { margin: 0; font-size: 13px; font-weight: 700; color: var(--color-danger); }
.detail-feedback[hidden] { display: none; }
.bulk-link { font-size: 13px; font-weight: 700; color: var(--color-text-secondary); text-decoration: underline; text-underline-offset: 3px; }
.bulk-link:hover { color: var(--color-brand-primary); }

/* information + trust layer */
.product-info { display: grid; gap: 22px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--color-border); }
.product-info h2 { margin: 0; font-size: 20px; line-height: 1.2; }
.product-info h3 { margin: 0; font-size: 15px; line-height: 1.25; }
.product-info-nav { position: sticky; top: 137px; z-index: 5; display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 0; background: color-mix(in srgb, var(--color-background) 92%, transparent); border-bottom: 1px solid var(--color-border); }
.product-info-nav a { min-height: 34px; display: inline-flex; align-items: center; padding: 0 12px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); font-size: 13px; font-weight: 800; }
.product-info-nav a:hover,
.product-info-nav a:focus-visible { border-color: var(--color-border-strong); color: var(--color-brand-primary); }
.info-section { display: grid; gap: 14px; scroll-margin-top: 170px; }
.info-section-head { display: grid; gap: 3px; }
.info-section-head .eyebrow { margin: 0; }
.info-description { max-width: 920px; }
.info-description p { margin: 0 0 10px; color: var(--color-text); font-size: 14px; line-height: 1.65; }
.info-empty { color: var(--color-text-secondary); font-weight: 650; }
.description-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; margin: 8px 0 0; }
.description-fact { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 8px; align-items: baseline; }
.description-fact dt { color: var(--color-text-secondary); font-size: 13px; font-weight: 800; }
.description-fact dd { margin: 0; color: var(--color-text); font-size: 13px; font-weight: 650; }
.description-guidance { display: grid; gap: 6px; margin-top: 12px; max-width: 860px; color: var(--color-text-secondary); font-size: 13px; line-height: 1.55; }
.description-guidance p { margin: 0; }
.description-guidance strong { color: var(--color-text); }
.production-notes { display: grid; gap: 8px; margin-top: 8px; padding: 14px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-background); }
.production-notes ul { margin: 0; padding-left: 18px; color: var(--color-text-secondary); font-size: 13px; }
.production-notes li + li { margin-top: 5px; }
.info-list { margin: 0; display: grid; gap: 0; }
.info-row { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--color-border); }
.info-row:last-child { border-bottom: 0; }
.info-term { color: var(--color-text-secondary); font-size: 13px; font-weight: 700; }
.info-desc { margin: 0; font-size: 13px; font-weight: 600; }
.info-link { color: var(--color-brand-primary); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.info-link:hover { color: var(--color-brand-primary-hover); }
.guide-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.guide-card { display: grid; align-content: start; gap: 8px; padding: 14px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.guide-card p { margin: 0; color: var(--color-text-secondary); font-size: 13px; line-height: 1.55; }
.guide-card .guide-care { color: var(--color-text); font-weight: 650; }
.reviews-head { grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 16px; }
.reviews-summary { display: grid; justify-items: end; gap: 3px; color: var(--color-text-secondary); font-size: 13px; font-weight: 700; text-align: right; }
.reviews-summary .star-rating { margin: 0; }
.reviews-panel { border-top: 1px solid var(--color-border); padding-top: 14px; }
.readonly-review-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.readonly-review { display: grid; gap: 8px; padding: 14px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.readonly-review-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; color: var(--color-text-secondary); font-size: 13px; }
.readonly-review-head strong { color: var(--color-text); }
.readonly-review-head .star-rating { margin: 0; }
.verified-purchase { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border-radius: 999px; background: var(--color-brand-soft); color: var(--color-brand-primary-active); font-size: 12px; font-weight: 900; }
.readonly-review-body p { margin: 0; font-size: 14px; line-height: 1.55; }

/* related products */
.related-products { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--color-border); }
.related-products .inline-heading { align-items: start; }
.related-products .inline-heading h2 { margin: 0; font-size: 20px; }
.related-products .inline-heading .eyebrow { margin: 0 0 4px; }
.related-grid { margin-top: 16px; }

/* mobile sticky purchase bar */
.sticky-purchase { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: none; align-items: center; gap: 12px; padding: 10px 14px; background: var(--color-surface); border-top: 1px solid var(--color-border); box-shadow: 0 -6px 18px var(--color-shadow); }
.sticky-info { flex: 1; min-width: 0; display: grid; gap: 1px; }
.sticky-price { font-size: 17px; font-weight: 900; color: var(--color-brand-primary); }
.sticky-qty { font-size: 12px; font-weight: 600; color: var(--color-text-secondary); }
.sticky-add { min-width: 148px; min-height: 44px; }
.sticky-add:disabled { opacity: 0.55; cursor: not-allowed; }
.woocommerce button.sticky-add { font-size: 14px; }

/* ============================== Gate 3B: responsive ============================== */

@media (max-width: 1023px) {
  .product-gallery { position: static; }
  .product-gallery.has-thumbs .gallery-thumbs { max-height: none; }
}

@media (min-width: 768px) {
  .sticky-purchase { display: none; }
}

@media (max-width: 767px) {
  .product-page { padding-bottom: 96px; }
  .product-layout { grid-template-columns: 1fr; gap: 18px; margin-top: 10px; }
  .product-gallery.has-thumbs { grid-template-columns: 1fr; gap: 10px; }
  /* Mobile-first reading: large image on top, swipeable thumbnail strip below.
     The DOM is thumbs-first (desktop rail on the left), so the visual order is
     reversed here — never by moving markup around at runtime. */
  .gallery-stage { order: 1; width: 100%; }
  .product-gallery.has-thumbs .gallery-thumbs { order: 2; flex-direction: row; max-height: none; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; }
  .gallery-main { width: 100%; }
  .gallery-nav { display: none; }
  .purchase-panel { min-width: 0; overflow: hidden; }
  .panel-title { font-size: 22px; }
  .panel-price .price-main { font-size: 22px; }
  .tier-table { display: block; font-size: 12px; }
  .tier-table thead { display: none; }
  .tier-table tbody { display: grid; gap: 0; width: 100%; }
  .tier-table tr { display: block; width: 100%; }
  .tier-table th,
  .tier-table td { display: block; width: 100%; min-width: 0; overflow-wrap: anywhere; padding-left: 6px; padding-right: 6px; }
  .tier-table .tier-price { display: none; }
  .tier-table .tier-range { display: grid; gap: 2px; }
  .tier-mobile-price { display: block; color: var(--color-text); font-weight: 800; text-align: left; }
  .sticky-purchase { display: flex; }
  .sticky-purchase { max-width: 100vw; box-sizing: border-box; }
  .product-info { margin-top: 28px; padding-top: 22px; gap: 20px; }
  .product-info-nav { position: static; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding-bottom: 12px; }
  .product-info-nav a { justify-content: center; min-width: 0; padding: 0 8px; text-align: center; }
  .description-facts { grid-template-columns: 1fr; }
  .info-row { grid-template-columns: 128px minmax(0, 1fr); }
  .guide-grid { grid-template-columns: 1fr; }
  .reviews-head { grid-template-columns: 1fr; }
  .reviews-summary { justify-items: start; text-align: left; }
  .related-products { margin-top: 28px; padding-top: 22px; }
  .panel-add { max-width: none; }
}

@media (max-width: 430px) {
  .product-page { padding-top: 12px; }
  .panel-title { font-size: 20px; }
  .product-info h2,
  .related-products .inline-heading h2 { font-size: 18px; }
  .product-info-nav a { font-size: 12px; }
  .description-fact { grid-template-columns: 78px minmax(0, 1fr); }
  .info-row { grid-template-columns: 1fr; gap: 4px; }
  .qty-input { flex: 1; width: auto; }
  .sticky-price { font-size: 15px; }
  .sticky-add { min-width: 112px; }
}

/* ============================== Gate 4A: procurement cart ============================== */

.cart-page { padding: 18px 0 48px; }
.cart-head-meta { margin: 0; color: var(--color-text-secondary); font-size: 13px; font-weight: 600; }

.cart-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; margin-top: 16px; }

/* column grid shared by the header row and every line (procurement list) */
.cart-grid-head,
.cart-line { display: grid; grid-template-columns: minmax(0, 1fr) 84px 118px 84px 176px 132px; gap: 12px; align-items: start; }

.cart-grid-head { padding: 8px 12px; border-bottom: 1px solid var(--color-border-strong); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-secondary); }
.cart-col-total { text-align: right; }

.cart-lines { display: grid; }
.cart-line { padding: 12px; border-bottom: 1px solid var(--color-border); transition: opacity 120ms ease; }
.cart-line:hover { background: color-mix(in srgb, var(--color-brand-soft) 40%, transparent); }
.cart-line.is-updating { opacity: 0.55; }
.cart-line.is-invalid .cart-line-title { color: var(--color-danger); }

.cart-line-product { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 10px; align-items: start; }
.cart-line-media img { width: 56px; height: 56px; object-fit: cover; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-brand-soft); }
.cart-line-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; font-weight: 700; line-height: 1.3; }
.cart-line-title:hover { color: var(--color-brand-primary); }
.cart-line-sku { margin: 2px 0 0; font-size: 12px; color: var(--color-text-secondary); }
.cart-line-sku span { font-weight: 700; }
.cart-line-variation { margin: 2px 0 0; font-size: 12px; font-weight: 600; }
.cart-line-stock { margin: 3px 0 0; font-size: 12px; font-weight: 800; color: var(--color-success); }
.cart-line-stock.is-preorder { color: var(--color-brand-primary); }
.cart-line-stock.is-out { color: var(--color-danger); }
.cart-line-lead { font-weight: 600; color: var(--color-text-secondary); }
.cart-line-error { margin: 3px 0 0; font-size: 12px; font-weight: 700; color: var(--color-danger); }
.cart-line-error[hidden] { display: none; }

.cart-line-pack span, .cart-line-pieces span { display: block; padding-top: 5px; font-size: 13px; font-weight: 600; }

/* dense compact stepper overrides the PDP sizing */
.cart-line-qty .cart-qty { gap: 4px; }
.cart-qty .qty-btn { min-width: 30px; min-height: 32px; font-size: 15px; }
.cart-qty .qty-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.cart-qty .qty-btn:hover:not(:disabled) { border-color: var(--color-border-strong); color: var(--color-brand-primary); }
.cart-qty .qty-input { width: 52px; min-height: 32px; padding: 0 4px; font-size: 14px; }

.cart-line-pricing { display: grid; gap: 3px; padding-top: 5px; justify-items: start; }
.cart-line-price { font-size: 13px; font-weight: 800; }
.cart-line-reference, .checkout-line-reference { color: var(--color-text-secondary); font-size: 12px; }
.cart-line-savings, .checkout-line-effective { color: var(--color-success); font-size: 12px; font-weight: 800; }
.cart-line-price em { font-style: normal; font-size: 12px; font-weight: 600; color: var(--color-text-secondary); }
.cart-line-tier { font-size: 12px; font-weight: 600; color: var(--color-text-secondary); }
.cart-line-next { display: grid; gap: 4px; justify-items: start; }
.cart-line-next[hidden] { display: none; }
.cart-line-next-label { font-size: 12px; font-weight: 700; color: var(--color-brand-primary); }
.cart-tier-add { padding: 0; border: 0; background: transparent; color: var(--color-brand-primary); font-size: 12px; font-weight: 800; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.cart-tier-add:hover { color: var(--color-brand-primary-hover); }

.cart-line-total { display: grid; gap: 3px; justify-items: end; text-align: right; padding-top: 5px; }
.cart-line-formula { font-size: 12px; color: var(--color-text-secondary); }
.cart-line-amount { font-size: 15px; font-weight: 900; color: var(--color-brand-primary); }
.cart-line-remove { font-size: 12px; font-weight: 600; color: var(--color-text-secondary); text-decoration: underline; text-underline-offset: 3px; }
.cart-line-remove:hover { color: var(--color-danger); }

/* coupon entry stays available but visually secondary */
.cart-coupon { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--color-border); }
.cart-coupon-label { font-size: 12px; font-weight: 800; color: var(--color-text-secondary); }
.cart-coupon-input { flex: 1; min-width: 140px; padding: 8px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: 13px; }
.cart-coupon-apply { min-height: 36px; padding: 0 14px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); font-size: 13px; font-weight: 800; cursor: pointer; }
.cart-coupon-apply:hover { border-color: var(--color-border-strong); color: var(--color-brand-primary); }

/* order summary */
.cart-summary { position: sticky; top: 128px; }
.cart-summary-card { display: grid; gap: 10px; padding: 16px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.cart-summary-card h2 { margin: 0; font-size: 16px; }
.cart-summary-meta { margin: -4px 0 0; font-size: 12px; font-weight: 600; color: var(--color-text-secondary); }
.cart-summary-rows { margin: 0; }
.cart-summary-row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--color-border); font-size: 13px; }
.cart-summary-row dt { color: var(--color-text-secondary); font-weight: 600; }
.cart-summary-row dd { margin: 0; font-weight: 800; text-align: right; }
.cart-summary-row[hidden] { display: none; }
.cart-summary-savings dt { color: var(--color-success); font-weight: 700; }
.cart-summary-savings dd { color: var(--color-success); }
.cart-summary-total { border-bottom: 0; padding-top: 10px; }
.cart-summary-total dt { color: var(--color-text); font-weight: 800; font-size: 14px; }
.cart-summary-total dd { color: var(--color-brand-primary); font-size: 18px; }
.cart-checkout-btn { width: 100%; min-height: 46px; font-size: 15px; }
.cart-continue { justify-self: center; font-size: 13px; font-weight: 700; color: var(--color-text-secondary); text-decoration: underline; text-underline-offset: 3px; }
.cart-continue:hover { color: var(--color-brand-primary); }

/* empty cart: procurement continuation, not a dead end */
.cart-empty { display: grid; gap: 12px; justify-items: center; margin-top: 16px; padding: 44px 20px; border: 1px dashed var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-surface); text-align: center; }
.cart-empty h1 { margin: 0; font-size: 22px; }
.cart-empty-hint { margin: 0; color: var(--color-text-secondary); font-size: 14px; }
.cart-empty-actions { margin-top: 2px; }
.cart-empty-browse h2 { margin: 14px 0 0; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-secondary); }
.cart-empty-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.cart-empty-links a { display: inline-block; padding: 7px 13px; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface); font-size: 13px; font-weight: 700; }
.cart-empty-links a:hover { border-color: var(--color-border-strong); color: var(--color-brand-primary); }

/* mobile sticky checkout CTA: reads server-backed state, never covers controls */
.cart-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: none; align-items: center; gap: 12px; padding: 10px 14px; background: var(--color-surface); border-top: 1px solid var(--color-border); box-shadow: 0 -6px 18px var(--color-shadow); }
.cart-sticky-info { flex: 1; min-width: 0; display: grid; gap: 1px; }
.cart-sticky-label { font-size: 11px; font-weight: 700; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.05em; }
.cart-sticky-total { font-size: 17px; font-weight: 900; color: var(--color-brand-primary); }
.cart-sticky-checkout { min-width: 172px; min-height: 44px; }
.woocommerce button.cart-sticky-checkout { font-size: 14px; }

/* screen-reader-only announcer for AJAX state changes */
.cart-announcer { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ============================== Gate 4A: responsive ============================== */

@media (min-width: 768px) {
  .cart-sticky { display: none; }
}

/* The 6-column procurement grid needs ~1230px+ (594px fixed columns + gaps +
   a readable product column) next to the 320px summary, so it only applies
   at ≥1280. Below that, drop pack/pieces and stack the summary. */
@media (max-width: 1279px) {
  .cart-layout { grid-template-columns: 1fr; }
  .cart-summary { position: static; }
  /* tablet: drop pack/pieces columns, keep the list scannable */
  .cart-grid-head, .cart-line { grid-template-columns: minmax(0, 1fr) 118px 170px 132px; }
  .cart-col-pack, .cart-col-pieces, .cart-line-pack, .cart-line-pieces { display: none; }
}

@media (max-width: 767px) {
  .cart-page { padding-bottom: 92px; }
  .cart-grid-head { display: none; }
  .cart-line { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "product product product" "pack . pieces" "qty . total" "pricing pricing pricing"; gap: 8px 12px; padding: 12px 8px; }
  .cart-line-product { grid-area: product; }
  .cart-line-pack { display: block; grid-area: pack; }
  .cart-line-pack span, .cart-line-pieces span { padding-top: 0; font-size: 12px; color: var(--color-text-secondary); }
  .cart-line-pieces { display: block; grid-area: pieces; }
  .cart-line-pieces span { text-align: right; }
  .cart-line-qty { grid-area: qty; }
  .cart-line-total { grid-area: total; padding-top: 0; }
  .cart-line-pricing { grid-area: pricing; padding-top: 2px; }
  .cart-line-media { justify-self: start; }
  .cart-line-media img { width: 64px; height: 64px; }
  .cart-sticky { display: flex; }
  .cart-summary-card { padding: 14px; }
}

@media (max-width: 430px) {
  .cart-page { padding-top: 12px; }
  .cart-line-product { grid-template-columns: 48px minmax(0, 1fr); }
  .cart-line-media img { width: 48px; height: 48px; }
  .cart-sticky-checkout { min-width: 148px; }
  .cart-sticky-total { font-size: 15px; }
}

/* ============================== Gate 4B: checkout ============================== */

.checkout-page { padding: 18px 0 54px; }
.checkout-head { margin-bottom: 18px; }
.checkout-head h1 { margin: 4px 0 8px; font-size: 28px; line-height: 1.12; }
.checkout-procurement-summary { display: grid; gap: 4px; max-width: 760px; color: var(--color-text-secondary); font-size: 14px; }
.checkout-procurement-summary p { margin: 0; }
.checkout-savings { color: var(--color-success); font-weight: 800; }
.checkout-authority-note { font-size: 13px; }

.checkout-layout { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 24px; align-items: start; }
.checkout-card { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); padding: 18px; }
.checkout-review { position: sticky; top: 128px; }
.checkout-review-card { display: grid; gap: 14px; }
/* No numbered badge: the checkout is one page, and a lone circled digit reads
   as a duplicate marker. Headings stay flush with the card content. */
.checkout-step-heading { margin-bottom: 16px; }
.checkout-step-heading h2 { margin: 0; font-size: 18px; line-height: 1.2; }
.checkout-step-heading p { margin: 3px 0 0; color: var(--color-text-secondary); font-size: 13px; }

.checkout-fields-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.checkout-field-column h3,
.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3 { margin: 0 0 12px; font-size: 16px; }
.checkout-page .form-row { margin: 0 0 12px; }
.checkout-page .form-row label { display: block; margin-bottom: 5px; color: var(--color-text); font-size: 13px; font-weight: 800; }
.checkout-page .required { color: var(--color-danger); }
.checkout-page .input-text,
.checkout-page select,
.checkout-page textarea { width: 100%; min-height: 42px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); padding: 9px 10px; color: var(--color-text); font: inherit; }
.checkout-page textarea { min-height: 84px; resize: vertical; }
.checkout-page .input-text:focus,
.checkout-page select:focus,
.checkout-page textarea:focus { border-color: var(--color-brand-primary); outline: 3px solid var(--color-focus); outline-offset: 2px; }
.checkout-page .woocommerce-invalid .input-text,
.checkout-page .woocommerce-invalid select,
.checkout-page .woocommerce-invalid textarea { border-color: var(--color-danger); }
.checkout-page .woocommerce-error,
.checkout-page .woocommerce-info,
.checkout-page .woocommerce-message { border: 1px solid var(--color-border); border-left: 4px solid var(--color-brand-primary); border-radius: var(--radius-md); background: var(--color-surface); padding: 12px 14px; font-size: 14px; }
.checkout-page .woocommerce-error { border-left-color: var(--color-danger); }
.checkout-page .woocommerce-message { border-left-color: var(--color-success); }

.checkout-order-lines { display: grid; gap: 10px; width: 100%; }
/* The line list is a row inside the order-review table (see review-order.php)
   so Woo's AJAX fragment replacement keeps it in sync instead of duplicating
   it. Neutralise the totals-table cell styles for that one cell. */
.checkout-totals-table .checkout-lines-cell { padding: 0; border-bottom: 0; text-align: left; font-weight: 400; }
.checkout-line { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--color-border); }
.checkout-line-media img { width: 54px; height: 54px; object-fit: cover; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-brand-soft); }
.checkout-line-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; font-weight: 800; line-height: 1.3; }
.checkout-line-meta,
.checkout-line-procurement { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 4px; color: var(--color-text-secondary); font-size: 12px; }
.checkout-line-procurement span { padding: 2px 7px; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-background); font-weight: 700; }
.checkout-line-tier { margin: 5px 0 0; color: var(--color-brand-primary); font-size: 12px; font-weight: 800; }
.checkout-line-stock { margin: 4px 0 0; color: var(--color-success); font-size: 12px; font-weight: 800; }
.checkout-line-stock.is-preorder { color: var(--color-brand-primary); }
.checkout-line-stock.is-out { color: var(--color-danger); }
.checkout-line-total { display: grid; gap: 3px; justify-items: end; min-width: 88px; text-align: right; }
.checkout-line-total span { color: var(--color-text-secondary); font-size: 12px; }
.checkout-line-total strong { color: var(--color-brand-primary); font-size: 14px; }

.checkout-totals-table { width: 100%; border-collapse: collapse; margin-top: 4px; font-size: 13px; }
.checkout-totals-table th,
.checkout-totals-table td { padding: 8px 0; border-bottom: 1px solid var(--color-border); vertical-align: top; }
.checkout-totals-table th { color: var(--color-text-secondary); text-align: left; font-weight: 700; }
.checkout-totals-table td { text-align: right; font-weight: 800; }
.checkout-totals-table .order-total th,
.checkout-totals-table .order-total td { border-bottom: 0; color: var(--color-text); font-size: 16px; }
.checkout-totals-table .order-total td { color: var(--color-brand-primary); }

.woocommerce-checkout-payment { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--color-border); }
.woocommerce-checkout-payment ul { margin: 0; padding: 0; list-style: none; }
.woocommerce-checkout-payment li { margin: 0 0 10px; }
.woocommerce-checkout-payment .payment_box { margin-top: 8px; padding: 10px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-background); font-size: 13px; }
.checkout-page #place_order { width: 100%; min-height: 46px; border: 0; border-radius: var(--radius-md); background: var(--color-brand-primary); color: var(--color-on-brand-primary); font-weight: 900; cursor: pointer; }
.checkout-page #place_order:hover { background: var(--color-brand-primary-hover); }
.checkout-page .woocommerce-privacy-policy-text { color: var(--color-text-secondary); font-size: 12px; }

@media (max-width: 1100px) {
  .checkout-layout { grid-template-columns: 1fr; }
  .checkout-review { position: static; }
}

@media (max-width: 767px) {
  .checkout-page { padding-top: 12px; }
  .checkout-head h1 { font-size: 24px; overflow-wrap: break-word; }
  .checkout-procurement-summary,
  .checkout-page .woocommerce-info { overflow-wrap: anywhere; }
  .checkout-card { min-width: 0; padding: 14px; overflow: hidden; }
  .checkout-fields-grid { grid-template-columns: 1fr; }
  .checkout-page .form-row-first,
  .checkout-page .form-row-last { float: none !important; clear: both !important; width: 100% !important; }
  .checkout-line { grid-template-columns: 48px minmax(0, 1fr); }
  .checkout-line-total { grid-column: 1 / -1; justify-items: start; text-align: left; }
  .checkout-line-total strong { font-size: 15px; }
}


/* ===================================================================
   Website Decoration Phase 2 — Homepage Hero Carousel (PART B)
   -------------------------------------------------------------------
   Progressive enhancement over server-rendered slides. Without JS every
   slide is in the DOM and readable; the controller only marks which one
   is active, so this CSS must never be the reason a slide is hidden.
   =================================================================== */

.hero-carousel { position: relative; overflow: hidden; }
.hero-carousel-viewport { position: relative; }
/* Every slide occupies the same grid cell and inactive ones are stacked
   out of view — NOT display:none, so assistive tech and no-JS readers
   still reach the content. */
.hero-carousel-track { display: grid; margin: 0; padding: 0; list-style: none; }
.hero-carousel-slide {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 320ms ease;
  pointer-events: none;
  /* Containing block for the stretched link (Director requirement A2). */
  position: relative;
}
.hero-carousel-slide.is-active { opacity: 1; visibility: visible; pointer-events: auto; }

/* A slide with a destination is clickable AS A BANNER. The link is an empty
   overlay rather than a wrapper, so the CTA anchor stays a sibling — nesting
   two <a> elements would be invalid HTML and ambiguous for assistive tech.
   Layer order inside the slide: content (auto) < stretch link (2) < arrows and
   pause (3, positioned in the carousel) < CTA (4).
   `pointer-events` is inherited, so an inactive slide's overlay is inert too. */
.hero-carousel-link {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  border-radius: var(--radius-md);
}
.hero-carousel-link:focus-visible { outline: 3px solid var(--color-focus); outline-offset: -3px; }
/* Above the stretched link, so the button always wins its own click. */
.hero-carousel-cta { position: relative; z-index: 4; }

.hero-carousel-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(320px, 0.78fr);
  gap: 26px;
  align-items: center;
}
.hero-carousel-copy h2 { margin: 6px 0 10px; font-size: clamp(26px, 2.9vw, 40px); line-height: 1.08; }
.hero-carousel-copy p { max-width: 560px; color: var(--color-text-secondary); font-size: 16px; margin: 0; }
.hero-carousel-visual { border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--color-border); background: var(--color-surface); box-shadow: var(--shadow-soft); }
.hero-carousel-visual picture { display: block; }
.hero-carousel-image { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }

.hero-carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
}
.hero-carousel-arrow:hover { background: var(--color-brand-primary); color: var(--color-on-brand-primary); border-color: transparent; }
/* Visible focus is a hard accessibility requirement, not a nicety. */
.hero-carousel-arrow:focus-visible,
.hero-carousel-dot:focus-visible,
.hero-carousel-pause:focus-visible {
  outline: 3px solid var(--color-brand-primary);
  outline-offset: 2px;
}
.hero-carousel-prev { left: 14px; }
.hero-carousel-next { right: 14px; }

.hero-carousel-dots { display: flex; justify-content: center; gap: 8px; padding: 14px 0 4px; }
.hero-carousel-dot {
  width: 11px;
  height: 11px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  cursor: pointer;
}
.hero-carousel-dot.is-active { background: var(--color-brand-primary); border-color: transparent; }

.hero-carousel-pause {
  position: absolute;
  right: 14px;
  bottom: 12px;
  z-index: 3;
  min-height: 28px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
/* Autoplay is decoration: reduced-motion removes the transition entirely
   and the controller stops advancing slides on its own. */
@media (prefers-reduced-motion: reduce) {
  .hero-carousel-slide { transition: none; }
}

@media (max-width: 900px) {
  .hero-carousel-inner { grid-template-columns: 1fr; gap: 14px; }
  /* Mobile is its own composition — copy first over a taller image — not a
     shrunken desktop: the mobile-specific asset gets the full width. */
  .hero-carousel-visual { order: 2; }
  .hero-carousel-image { aspect-ratio: 4 / 3; }
  .hero-carousel-arrow { width: 36px; height: 36px; font-size: 22px; }
}

@media (max-width: 430px) {
  .hero-carousel-copy h2 { font-size: 23px; margin-bottom: 7px; }
  .hero-carousel-copy p { font-size: 14px; line-height: 1.35; }
  .hero-carousel-prev { left: 8px; }
  .hero-carousel-next { right: 8px; }
  .hero-carousel-pause { right: 8px; bottom: 8px; }
}

/* ===================================================================
   Website Decoration Phase 2 — Repeatable Promo Banner modules (PART C)
   -------------------------------------------------------------------
   Each module is a full-width band that closes up completely when it is
   disabled, scheduled, expired or empty — no empty frame, no reserved gap.
   =================================================================== */

.promo-module-section { padding: 26px 0; background: var(--color-surface); }
.promo-module-section + .home-section,
.home-section + .promo-module-section { border-top: 1px solid var(--color-border); }

.promo-module-link {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-brand-soft);
  text-decoration: none;
  color: inherit;
}
.promo-module-link:hover { border-color: var(--color-border-strong); }
.promo-module-media { display: block; }
.promo-module-image { display: block; width: 100%; height: auto; aspect-ratio: 21 / 7; object-fit: cover; }

/* Copy sits in a readable band beneath the artwork, so a promo never depends on
   text baked into an image to be usable. */
.promo-module-copy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  padding: 14px 16px;
}
.promo-module-headline { font-size: 20px; line-height: 1.2; }
.promo-module-text { color: var(--color-text-secondary); font-size: 14px; flex: 1 1 260px; min-width: 0; }
.promo-module-cta {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border-radius: var(--radius-sm);
  background: var(--color-brand-primary);
  color: var(--color-on-brand-primary);
  font-weight: 800;
  font-size: 14px;
}
/* An image-only promo needs no copy band at all. */
.promo-module-section .promo-module-link:not(:has(.promo-module-copy)) { border: 0; }

@media (max-width: 900px) {
  .promo-module-section { padding: 18px 0; }
  .promo-module-image { aspect-ratio: 16 / 9; }
}

@media (max-width: 430px) {
  .promo-module-copy { padding: 12px; gap: 8px 12px; }
  .promo-module-headline { font-size: 17px; }
  .promo-module-text { font-size: 13px; }
  .promo-module-cta { min-height: 34px; font-size: 13px; }
}

/* ===================================================================
   Website Decoration Phase 2 — header menus (PART G/H)
   =================================================================== */

.account-menu { position: relative; display: inline-flex; align-items: center; gap: 4px; }
.account-menu-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
}
.account-menu-trigger:hover { color: var(--color-brand-primary); }
.account-menu-trigger:focus-visible {
  outline: 3px solid var(--color-brand-primary);
  outline-offset: 2px;
}
/* The chevron rotates from the same state attribute the button's aria-expanded
   reflects, so CSS and assistive tech can never disagree. */
.account-menu[data-account-open='true'] .account-menu-trigger span { transform: rotate(180deg); }

.account-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  min-width: 180px;
  padding: 6px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-soft);
}
.account-dropdown[hidden] { display: none; }
.account-dropdown-link {
  display: block;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.account-dropdown-link:hover { background: var(--color-brand-soft); color: var(--color-brand-primary); }
.account-dropdown-link:focus-visible { outline: 3px solid var(--color-brand-primary); outline-offset: -2px; }
.account-dropdown-divider { height: 1px; margin: 5px 2px; background: var(--color-border); }
.account-dropdown-logout { color: #a4243b; }
.account-dropdown-logout:hover { background: #fdf1f3; color: #8c1c2e; }

/* Mobile: the menu must work by TAP, never requiring hover. */
@media (max-width: 1024px) {
  .account-dropdown { right: auto; left: 0; }
  .account-menu-trigger { width: 26px; height: 26px; }
}

/* ---------------------------------------------------------------------
   PART H: the search dropdown must never be an invisible click blocker.
   `pointer-events: none` while closed is the belt-and-braces guarantee: even
   if a stale `hidden` attribute were ever removed, the panel cannot swallow a
   click meant for the page beneath it.
   --------------------------------------------------------------------- */
[data-search-form][data-search-state='closed'] .search-suggestions { pointer-events: none; }
.search-panel-body { display: grid; gap: 10px 16px; }

.contact-inquiry-hub { position: fixed; right: 20px; bottom: 20px; z-index: 30; }
.contact-inquiry-hub > summary { list-style: none; cursor: pointer; display: grid; place-items: center; min-width: 56px; min-height: 56px; padding: 0 16px; border-radius: 999px; background: var(--color-brand-primary); color: #fff; font-weight: 750; box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.contact-inquiry-hub > summary::-webkit-details-marker { display: none; }
.contact-inquiry-hub-panel { display: grid; gap: 10px; width: min(280px, calc(100vw - 32px)); margin-bottom: 10px; padding: 16px; border: 1px solid var(--color-border); border-radius: 16px; background: var(--color-surface); box-shadow: 0 12px 32px rgba(0,0,0,.16); }
.contact-inquiry-hub-panel a { color: var(--color-brand-primary); font-weight: 700; text-decoration: none; }
@media (max-width: 767px) { .contact-inquiry-hub { right: 12px; bottom: 12px; } .contact-inquiry-hub-panel { margin-bottom: 8px; } }

/* Display controls (A4): applied ONLY when a promo module sets display settings;
   modules without them keep the shipped aspect ratios above. */
.promo-module-media.has-display { aspect-ratio: var(--promo-ratio, 3 / 1); overflow: hidden; }
.promo-module-media.has-display .promo-module-image { aspect-ratio: auto; width: 100%; height: 100%; object-fit: var(--promo-fit, cover); object-position: var(--promo-pos, center); }
@media (max-width: 767px) {
  .promo-module-media.has-display { aspect-ratio: var(--promo-ratio-mobile, var(--promo-ratio, 16 / 9)); }
}

/* MULTILINGUAL FOUNDATION (V1) — storefront language switcher.
   Core decides WHICH languages exist and which one is active; this only
   renders it. One dropdown in the utility bar (desktop) and one inline row in
   the mobile drawer: a <details> needs no JS, and the active language is always
   readable from the URL-free cookie state. */
.utility-links { display: inline-flex; align-items: center; gap: 16px; }
.lang-switcher { position: relative; }
.lang-switcher > summary { list-style: none; }
.lang-switcher > summary::-webkit-details-marker { display: none; }
.lang-switcher-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 2px 4px; border-radius: var(--radius); cursor: pointer; font-weight: 700; color: inherit; }
.lang-switcher-toggle:hover { background: rgba(0, 0, 0, 0.06); }
.lang-switcher-toggle:focus-visible { outline: 2px solid var(--color-brand-primary); outline-offset: 2px; }
.lang-switcher-caret { font-size: 10px; opacity: 0.7; }
.lang-switcher-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; min-width: 168px; margin: 0; padding: 6px; list-style: none; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-soft); }
.lang-switcher-menu a { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--radius); color: var(--color-text); font-weight: 600; }
.lang-switcher-menu a:hover { background: var(--color-brand-soft); }
.lang-switcher-menu a.is-current { background: var(--color-brand-soft); color: var(--color-brand-primary-active); font-weight: 800; }
/* Flag artwork is local inline SVG (inc/flags.php). Fixed box + `object-fit`-like
   framing keeps every flag the same size and vertically centred with the name,
   and it stays small in the header. */
.lang-flag { display: inline-block; flex: 0 0 auto; width: 20px; height: 13px; border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.14); vertical-align: -2px; overflow: hidden; }
.lang-switcher-code { font-size: 11px; letter-spacing: 0.04em; font-weight: 800; color: var(--color-brand-primary); }
.lang-switcher-label { font-size: 13px; line-height: 1.2; }
.lang-switcher-menu a .lang-switcher-label { flex: 1 1 auto; }
.lang-switcher-check { flex: 0 0 auto; font-size: 11px; font-weight: 900; color: var(--color-brand-primary); }
.drawer-languages { padding: 10px 0 12px; border-top: 1px solid var(--color-border); }
.drawer-languages-label { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-muted, #6b7280); }
.drawer-language-list { display: flex; flex-wrap: wrap; gap: 6px; }
.drawer-language-item { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border: 1px solid var(--color-border); border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--color-text); }
.drawer-language-item .lang-flag { width: 18px; height: 12px; }
.drawer-language-name { line-height: 1.2; }
.drawer-language-item.is-current { border-color: var(--color-brand-primary); background: var(--color-brand-soft); color: var(--color-brand-primary-active); font-weight: 800; }
@media (max-width: 860px) {
  /* The bar already hides its utility links at this width; the drawer carries
     the switcher instead so a language is never unreachable on mobile. */
  .utility-inner .lang-switcher { display: none; }
}

/* ---- Unread store-message badge (header greeting / drawer / account nav) -- */
.diy-unread-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 19px;
  height: 19px;
  padding: 0 6px;
  margin-left: 8px;
  border-radius: 999px;
  background: #c0392b;
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  vertical-align: middle;
}
.diy-unread-badge:hover { background: #a53125; color: #fff; }
.diy-unread-badge-drawer { margin-left: 10px; }
.diy-account-nav-link .diy-unread-badge { margin-left: auto; margin-right: 2px; }

/* Quote customer experience V2 — Core owns every commercial value; these
   rules only give that authoritative snapshot a calm, readable B2B layout. */
.diy-quote-detail { margin: 26px 0; color: var(--color-text); }
.diy-quote-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--color-border); }
.diy-quote-kicker { margin: 0 0 4px; color: var(--color-muted); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.diy-quote-header h2 { margin: 0; font-size: clamp(21px, 3vw, 28px); line-height: 1.18; }
.diy-quote-created { margin: 6px 0 0; color: var(--color-muted); font-size: 14px; }
.diy-quote-status { flex: 0 0 auto; padding: 5px 10px; border: 1px solid #b9d6d2; border-radius: 999px; background: #edf7f5; color: #17655f; font-size: 12px; font-weight: 800; letter-spacing: .04em; }
.diy-quote-status-declined,.diy-quote-status-expired { border-color: #ead0d0; background: #fdf1f1; color: #9c3737; }
.diy-quote-status-converted { border-color: #c9d8ee; background: #f0f5fc; color: #285887; }
.diy-quote-table { width: 100%; margin: 0; border-collapse: separate; border-spacing: 0; border: 1px solid var(--color-border); background: var(--color-surface); }
.diy-quote-table th { padding: 12px 14px; background: #f7f9f9; color: var(--color-muted); font-size: 11px; font-weight: 800; letter-spacing: .04em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.diy-quote-table td { padding: 14px; border-top: 1px solid var(--color-border); vertical-align: top; font-size: 14px; }
.diy-quote-product { display: flex; gap: 12px; min-width: 240px; }
.diy-quote-image { width: 62px; height: 62px; flex: 0 0 62px; border: 1px solid var(--color-border); object-fit: cover; background: #f7f9f9; }
.diy-quote-product strong { display: block; line-height: 1.35; }
.diy-quote-sku { display: block; margin-top: 5px; color: var(--color-muted); font-size: 12px; }
.diy-quote-attributes { display: flex; flex-wrap: wrap; gap: 3px 10px; margin: 6px 0 0; padding: 0; list-style: none; color: var(--color-text); font-size: 12px; }
.diy-quote-attributes span { color: var(--color-muted); }
.diy-quote-saving { display: block; margin-top: 5px; color: #17655f; font-size: 12px; font-weight: 700; white-space: nowrap; }
.diy-quote-line-total { font-weight: 800; white-space: nowrap; }
.diy-quote-summary { width: min(100%, 390px); margin: 20px 0 0 auto; padding: 18px; border: 1px solid var(--color-border); background: #f8fbfa; }
.diy-quote-summary h3 { margin: 0 0 12px; font-size: 17px; }
.diy-quote-summary dl { margin: 0; }
.diy-quote-summary dl > div { display: flex; justify-content: space-between; gap: 18px; padding: 7px 0; }
.diy-quote-summary dt { color: var(--color-muted); }
.diy-quote-summary dd { margin: 0; font-weight: 700; text-align: right; }
.diy-quote-total { margin-top: 7px; padding-top: 12px !important; border-top: 1px solid var(--color-border); font-size: 18px; }
.diy-quote-total dt,.diy-quote-total dd { color: var(--color-text); font-weight: 800; }
.diy-quote-valid,.diy-quote-lead { margin: 14px 0 0; font-size: 13px; }
.diy-quote-lead { margin-top: 6px; color: var(--color-muted); }
.diy-quote-shipping-mode { display: block; margin-top: 3px; color: var(--color-muted); font-size: 12px; font-weight: 400; }
.diy-quote-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.diy-quote-actions .button { min-height: 42px; padding: 10px 18px; font-weight: 700; }
@media (max-width: 700px) {
  .diy-quote-header { align-items: flex-start; }
  .diy-quote-table,.diy-quote-table tbody,.diy-quote-table tr,.diy-quote-table td { display: block; width: 100%; }
  .diy-quote-table thead { display: none; }
  .diy-quote-table { border: 0; background: transparent; }
  .diy-quote-table tr { margin-bottom: 12px; border: 1px solid var(--color-border); background: var(--color-surface); }
  .diy-quote-table td { display: grid; grid-template-columns: minmax(112px, .85fr) minmax(0, 1.15fr); gap: 10px; padding: 9px 12px; border-top: 1px solid var(--color-border); text-align: right; }
  .diy-quote-table td::before { content: attr(data-title); color: var(--color-muted); font-size: 12px; font-weight: 800; letter-spacing: .03em; text-align: left; text-transform: uppercase; }
  .diy-quote-table td.diy-quote-product { display: flex; padding: 14px 12px; text-align: left; }
  .diy-quote-table td.diy-quote-product::before { display: none; }
  .diy-quote-summary { width: 100%; margin-top: 12px; }
  .diy-quote-actions .button { width: 100%; text-align: center; }
}