/* WDK chrome — CW-style custom header (bar + mega dropdowns + account menu +
 * mini cart + drawer) + ticker.
 *
 * The header is OUR OWN DOM, printed by inc/wdk-chrome.php at wp_body_open;
 * Porto's header stays in the page (hidden below). The cart pill and the mini
 * cart now read the header's OWN WooCommerce fragment
 * (.wdk-mc .widget_shopping_cart_content), not Porto's hidden copy.
 * Loads after wdk-shop.css (enqueue dep). The site's "Simple
 * Custom CSS and JS" rules never target .wdk-* classes, so only the Porto
 * hide + a few generic-anchor resets are contested — those carry `body` for
 * +1 specificity and !important.
 *
 * NO @font-face here: Archivo Black ships in wdk-shop.css (single
 * declaration, font-display:swap) and both sheets load on every page.
 * Footer styling: NOT here — rebuilt in its own file by the footer pass.
 * (.wdk-cbtn anchors are still produced by wdk-chrome.js; the new footer
 * file styles them.)
 */

@font-face{font-family:'Figtree';font-style:normal;font-weight:800;font-display:swap;
  src:url('figtree.woff2') format('woff2')}

:root{
  --wdk-jade:#3EB785;        /* THE theme colour (footer bg, ticker) */
  --wdk-jade-soft:#63B798;   /* light jade panel */
  --wdk-jade-deep:#1F8A5F;   /* hovers / deep surfaces / small price accents */
  /* The one jade that carries WHITE TEXT at 4.5:1 (5.17:1 on #fff).
     --wdk-jade is 2.52:1 and --wdk-jade-deep is 4.32:1 — both fail — so any
     jade button with a white label in this layer uses this value and hovers
     to --wdk-jade-deep's darker neighbour. Same figure the jade header
     variant landed on (assets/wdk-hdr-jade.css --jd-deep). */
  --wdk-jade-safe:#1B7C55;
  --wdk-jade-safe-hi:#166646;
  --wdk-jade-tint:#e8f6f0;   /* jade at whisper strength (menu hover wash) */
  --wdk-orange:#FF9800;      /* deal chip / count badge / feature price */
  --wdk-orange-hover:#FF9C00;
  --wdk-ink:#111;
  --wdk-paper:#f4f4f2;       /* the compact bar (CW's light bar tone) */
  --wdk-card:#f7f7f4;        /* rail card / tiles ground */
  --wdk-mut:#6d6d68;
  --wdk-line:#e3e3de;
  --wdk-display:'Archivo Black','Arial Black',Impact,sans-serif;
  /* MENU face — owner picked Figtree from the options page, 2026-08-18
     (https://claude.ai/code/artifact/db8a387c-2073-430d-ad97-8ef5560a9540).
     It applies to the menu ONLY: the logo, the cart pill and every price
     figure stay Archivo Black, which is what --wdk-display keeps meaning.
     Figtree runs ~12% narrower than Archivo Black at the same size, so the
     eight top-level items sit further from the tools cluster than before. */
  --wdk-menu:'Figtree',var(--wdk-display);
  --wdk-ui:'Open Sans',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

/* ============================================================
   PORTO HEADER, RETIRED — the chrome layer renders its own.
   Kept in the DOM: #mini-cart inside it is the fragment target
   the cart pill syncs from. Sticky/mobile variants die with it.
   ============================================================ */
body .page-wrapper .header-wrapper{display:none!important}

/* ============================================================
   PRICE TICKER (.wdk-marq) — now printed INSIDE .wdk-hdr, below
   the bar (CW stack: banner → bar → ticker). Same mechanics as
   before, adapted from cw.css .cw-marq (line ~238).
   ============================================================ */
/* Ink, not jade (owner picked the dark strip from the Ink header preview,
   2026-08-17): the price names ride in jade against it, which reads brighter
   than white-on-green did and leaves green to the brand marks. */
.wdk-marq{background:#101312;color:#fff;overflow:hidden;padding:10px 0;position:relative;
  /* PHP seeds --wdk-mdur from a character estimate; wdk-chrome.js
     overwrites it with the measured width for a constant pace. */
  --wdk-mdur:24s}
/* Fade the cut edges instead of guillotining words — doubles as the
   affordance that the strip moves. */
.wdk-marq::before,.wdk-marq::after{content:"";position:absolute;top:0;bottom:0;width:44px;z-index:2;pointer-events:none}
.wdk-marq::before{left:0;background:linear-gradient(90deg,#101312,rgba(16,19,18,0))}
.wdk-marq::after{right:0;background:linear-gradient(270deg,#101312,rgba(16,19,18,0))}
.wdk-mtrack{display:flex;width:max-content;animation:wdkm var(--wdk-mdur) linear infinite;
  will-change:transform;font:800 12px/1 var(--wdk-ui);letter-spacing:.13em}
.wdk-mcopy{display:flex;align-items:center;white-space:nowrap}
@keyframes wdkm{to{transform:translateX(-50%)}}
/* Readable on hover, catchable on focus. */
.wdk-marq:hover .wdk-mtrack,.wdk-marq:focus-within .wdk-mtrack{animation-play-state:paused}
.wdk-mi{display:inline-flex;align-items:center;gap:7px;text-decoration:none!important}
/* Two hops deep + !important: Porto part-sheets colour bare `a` aggressively. */
.wdk-marq a.wdk-mi,.wdk-marq a.wdk-mi .wdk-mtxt,.wdk-marq .wdk-mi .wdk-mtxt{color:var(--wdk-jade)!important}
/* The delivery/minimum line is information, not a price — keep it white so the
   jade stays meaningful. */
.wdk-marq a.wdk-mi-ship .wdk-mtxt,.wdk-marq .wdk-mi-ship .wdk-mtxt{color:rgba(255,255,255,.86)!important}
.wdk-marq .wdk-mi .cw-i{color:var(--wdk-jade)}
.wdk-marq a.wdk-mi:hover .wdk-mtxt{text-decoration:underline;text-underline-offset:3px}
a.wdk-mi:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:2px}
/* cw_icon() outputs class="cw-i" (the truck on the delivery line). */
.wdk-mi .cw-i{flex:none;color:rgba(255,255,255,.85)}
.wdk-mtxt{text-transform:uppercase}
.wdk-mdot{font-style:normal;color:rgba(255,255,255,.55);margin:0 18px}
/* The one accent: the TODAY'S-DEAL-style chip on the cheapest-OZ line.
   Orange carries it alone — the item text stays white like its peers. */
.wdk-mtag{background:var(--wdk-orange);color:#fff;font:800 10px/1 var(--wdk-ui);letter-spacing:.12em;
  padding:4px 7px;border-radius:2px;flex:none}
/* Reduced motion: no loop — drop the clone, let the strip scroll. */
@media (prefers-reduced-motion:reduce){
  .wdk-marq{overflow-x:auto;scrollbar-width:none}
  .wdk-marq::-webkit-scrollbar{display:none}
  .wdk-mtrack{animation:none;width:auto}
  .wdk-mcopy[inert]{display:none}
}

/* ============================================================
   THE BAR (.wdk-hb) — one compact light strip: logo | inline
   Archivo Black nav | search toggle · account · black cart pill.
   ============================================================ */
.wdk-hdr{position:relative;z-index:490;font-family:var(--wdk-ui)}
.wdk-hb{background:var(--wdk-paper);border-bottom:1px solid var(--wdk-line);position:relative}
/* Same measure as the shop (owner, 2026-08-17): .cw-shoplayout caps at 1610px
   and its rail starts 40px in, so the logo now lines up with the filter rail
   and the cart with the last card instead of sitting 60px inside them. */
.wdk-hb-in{max-width:1610px;margin:0 auto;padding:0 40px;min-height:64px;
  display:flex;align-items:center;gap:18px;position:relative}
.wdk-logo{display:flex;flex:none;line-height:0}
.wdk-logo img{height:44px;width:auto;display:block}

/* --- nav row: uppercase display type, near-zero tracking (tokens) --- */
.wdk-nav{flex:1;min-width:0}
.wdk-nav ul{list-style:none;margin:0;padding:0;display:flex;align-items:stretch;justify-content:center;
  flex-wrap:nowrap}
.wdk-ni{position:static}
body .wdk-ni-a{display:flex;align-items:center;gap:5px;padding:23px 10px;white-space:nowrap;
  font-family:var(--wdk-menu);font-weight:800;font-size:12.5px;letter-spacing:.01em;
  text-transform:uppercase;color:var(--wdk-ink)!important;text-decoration:none!important;
  box-shadow:inset 0 0 0 transparent;transition:color .15s,box-shadow .15s}
body .wdk-ni-a:hover,body .wdk-ni.open > .wdk-ni-a{color:var(--wdk-jade-deep)!important;
  box-shadow:inset 0 -3px 0 var(--wdk-jade)}
.wdk-ni-a:focus-visible{outline:2.5px solid var(--wdk-jade);outline-offset:-2px}
.wdk-chev{width:11px;height:11px;flex:none;opacity:.5;display:inline-flex;transition:transform .18s}
.wdk-chev svg{width:11px;height:11px;display:block}
.wdk-ni.open > .wdk-ni-a .wdk-chev{transform:rotate(180deg);opacity:1}

/* --- tools cluster --- */
.wdk-tools{display:flex;align-items:center;gap:9px;flex:none}
.wdk-stog,.wdk-acct,.wdk-mtog{width:42px;height:42px;flex:none;display:flex;align-items:center;
  justify-content:center;border:1.5px solid var(--wdk-line);border-radius:6px;background:#fff;
  color:var(--wdk-ink)!important;cursor:pointer;padding:0;
  transition:border-color .15s,background .15s,color .15s}
.wdk-stog:hover,.wdk-acct:hover,.wdk-mtog:hover{border-color:var(--wdk-ink)}
.wdk-stog:focus-visible,.wdk-acct:focus-visible,.wdk-mtog:focus-visible,
.wdk-cart:focus-visible{outline:2.5px solid var(--wdk-jade);outline-offset:2px}
.wdk-stog svg,.wdk-acct svg,.wdk-mtog svg{width:19px;height:19px;display:block}
.wdk-stog > span{display:flex}
.wdk-stog .wdk-st-x{display:none}
body.wdk-search-on .wdk-stog{background:var(--wdk-ink);border-color:var(--wdk-ink);color:#fff!important}
body.wdk-search-on .wdk-stog .wdk-st-mag{display:none}
body.wdk-search-on .wdk-stog .wdk-st-x{display:flex}
.wdk-mtog{display:none}

/* Black cart pill: icon + orange count badge + Archivo total. */
body a.wdk-cart{display:flex;align-items:center;gap:11px;height:42px;padding:0 16px;border-radius:6px;
  background:var(--wdk-ink);color:#fff!important;text-decoration:none!important;transition:background .15s}
body a.wdk-cart:hover{background:var(--wdk-jade-deep)}
.wdk-cart-ic{position:relative;display:flex}
.wdk-cart-ic svg{width:19px;height:19px;display:block}
.wdk-cart-n{position:absolute;top:-9px;right:-11px;min-width:16px;height:16px;padding:0 4px;
  border-radius:8px;background:var(--wdk-orange);color:#fff;font:800 10px/16px var(--wdk-ui);
  text-align:center;font-style:normal;box-shadow:0 0 0 2px var(--wdk-ink)}
.wdk-cart-t{font-family:var(--cw-money,'Figtree',sans-serif);font-weight:600;font-size:15px;letter-spacing:.02em}

/* --- search: a compact dropdown field under the icon (owner, 2026-08-18 —
   the full-width slide-down row was too heavy). Anchored to the bar's right
   edge and clamped to the viewport on small screens; the noscript reveal
   beside it still shows the field when JS is off, where it simply sits in the
   flow as a row. --- */
.wdk-hdr{position:relative}
.wdk-search{display:none;align-items:center;gap:0;background:#fff;
  /* Floating card, detached from the bar (owner, 2026-08-18) — it clears the
     header rather than hanging off it, and is rounded on all four corners. */
  position:absolute;top:calc(100% + 12px);right:max(16px,calc((100% - 1610px)/2 + 40px));z-index:60;
  width:min(420px,calc(100vw - 32px));padding:10px;border:1px solid var(--wdk-line);
  border-radius:14px;box-shadow:0 18px 40px -22px rgba(6,38,26,.42)}
body.wdk-search-on .wdk-hsearch{display:flex}
.wdk-search input[type=search]{flex:1;min-width:0;height:44px;border:1.5px solid var(--wdk-line);
  border-right:0;border-radius:6px 0 0 6px;background:var(--wdk-card);padding:0 16px;
  font:700 13px/1.2 var(--wdk-ui);letter-spacing:.02em;color:var(--wdk-ink);outline:none}
/* No glow ring on focus (owner, 2026-08-18) — the border alone marks focus. */
.wdk-search input[type=search]:focus{border-color:var(--wdk-jade);box-shadow:none}
.wdk-search button{height:44px;border:0;border-radius:0 6px 6px 0;background:var(--wdk-jade);color:#fff;
  display:flex;align-items:center;gap:8px;padding:0 18px;cursor:pointer;
  font:800 11px/1 var(--wdk-ui);letter-spacing:.13em;text-transform:uppercase;transition:background .15s}
.wdk-search button:hover{background:var(--wdk-jade-deep)}
.wdk-search button svg{width:16px;height:16px}
.wdk-search button:focus-visible{outline:2.5px solid var(--wdk-ink);outline-offset:2px}

/* ============================================================
   MEGA PANEL — white card under the hovered item. Rows are
   rounded icon tiles + caps name + "from $x · N items"; the rail
   is the CHEAPEST-IN card with the black ALL button. Adapted
   from cw.css .cw-mega (line ~699) with WDK tokens: jade where
   CW used green surfaces/hovers, orange ONLY on the feature
   price (CW's green-price moment); the small `from` bolds stay
   jade-deep — #FF9800 fails contrast at 11px on white.
   ============================================================ */
.wdk-mega{position:absolute;top:100%;left:0;z-index:500;box-sizing:border-box;
  background:#fff;border:1px solid var(--wdk-line);border-radius:0 0 10px 10px;
  box-shadow:0 18px 40px rgba(17,17,16,.16);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s ease,transform .18s ease,visibility 0s linear .18s}
.wdk-mega.on{opacity:1;visibility:visible;transform:none;transition:opacity .16s ease,transform .18s ease}
.wdk-mega[hidden]{display:none}
.wdk-mega-in{display:flex;align-items:stretch;gap:30px;padding:22px 24px;width:max-content;
  max-width:min(92vw,980px)}
.wdk-mega-cols{display:flex;gap:30px;align-items:flex-start}
.wdk-mega-col{min-width:186px}
.wdk-mega-t{font:800 9.5px/1 var(--wdk-ui);letter-spacing:.17em;text-transform:uppercase;color:var(--wdk-mut);
  padding-bottom:9px;margin-bottom:8px;border-bottom:1px solid var(--wdk-line)}
.wdk-mega-l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px}
body .wdk-mega-i{display:grid;grid-template-columns:36px 1fr;align-items:center;gap:11px;
  padding:7px 9px;border-radius:8px;text-decoration:none!important;transition:background .13s}
body .wdk-mega-i:hover{background:var(--wdk-jade-tint)}
.wdk-mega-i:focus-visible{outline:2.5px solid var(--wdk-jade);outline-offset:1px}
.wdk-mega-ic{width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  background:var(--wdk-card);border:1px solid var(--wdk-line);border-radius:9px;color:var(--wdk-ink);
  transition:background .13s,border-color .13s,color .13s}
body .wdk-mega-i:hover .wdk-mega-ic{background:var(--wdk-jade);border-color:var(--wdk-jade);color:#fff}
.wdk-mega-ic svg{width:19px;height:19px;display:block}
.wdk-mega-nm{display:block;font:800 12px/1.25 var(--wdk-ui);letter-spacing:.05em;
  text-transform:uppercase;color:var(--wdk-ink)}
.wdk-mega-sb{display:block;font:700 11px/1.45 var(--wdk-ui);letter-spacing:.01em;color:var(--wdk-mut);margin-top:1px}
.wdk-mega-sb b{color:var(--wdk-jade-deep);font-weight:800}

/* rail: the proof card */
.wdk-mega-f{width:190px;flex:none;display:flex;flex-direction:column;gap:9px;padding:14px;
  background:var(--wdk-card);border:1px solid var(--wdk-line);border-radius:10px}
.wdk-mega-f-k{font:800 9.5px/1.35 var(--wdk-ui);letter-spacing:.17em;text-transform:uppercase;color:var(--wdk-mut)}
.wdk-mega-f img{width:100%;aspect-ratio:.96;object-fit:cover;border-radius:6px;display:block;background:#eceae6}
.wdk-mega-f a{text-decoration:none!important;display:flex;flex-direction:column;gap:7px}
.wdk-mega-f a:focus-visible{outline:2.5px solid var(--wdk-jade);outline-offset:2px;border-radius:6px}
.wdk-mega-f-nm{display:block;font:800 11.5px/1.35 var(--wdk-ui);letter-spacing:.04em;
  text-transform:uppercase;color:var(--wdk-ink)}
.wdk-mega-f-pr{display:block;font-family:var(--cw-money,'Figtree',sans-serif);font-weight:600;font-size:24px;line-height:1;
  letter-spacing:.01em;color:var(--wdk-orange)}
body a.wdk-mega-all{margin-top:auto;display:block;text-align:center;background:var(--wdk-ink);color:#fff!important;
  text-decoration:none!important;border-radius:6px;padding:11px 10px;
  font:800 10.5px/1.3 var(--wdk-ui);letter-spacing:.13em;text-transform:uppercase;transition:background .15s}
body a.wdk-mega-all:hover{background:var(--wdk-jade-deep)}
.wdk-mega-all:focus-visible{outline:2.5px solid var(--wdk-jade);outline-offset:2px}

/* ============================================================
   HEADER POPOVERS — account menu (.wdk-am) + mini cart (.wdk-mc).

   Both are `.wdk-pop`: a card that hangs off the bottom edge of
   the bar exactly like the search dropdown and the mega panel,
   with the same radius, hairline and shadow family. They live
   inside a `.wdk-tool` wrapper next to their trigger, which is
   what they are anchored to and what the hover intent watches.

   Everything here is scoped to .wdk-pop / .wdk-am / .wdk-mc.
   The mini cart in particular styles a pile of core WooCommerce
   classes (.mini_cart_item, .woocommerce-mini-cart__total, …)
   which also exist on the cart page, in Porto's hidden mini-cart
   and inside any cart widget — so NOT ONE of those selectors is
   allowed out from under a .wdk-mc ancestor.
   ============================================================ */

/* The anchor, and nothing else: the jade sheet sizes .wdk-acct and
   a.wdk-cart directly, so the wrapper must stay geometry-neutral —
   align-items:center keeps the 44px trigger centred whatever height the
   wrapper takes.
   The STRETCH CHAIN matters. `top:100%` on the panel resolves against the
   wrapper, and a 44px wrapper centred in a 72px bar drops the card 14px
   ABOVE the bar's bottom edge, overlapping the jade. Stretching .wdk-tools
   and .wdk-tool up to the bar's full height is what makes `top:100%` land
   exactly on that edge — the same trick the jade sheet uses to turn an open
   nav link into a full-height tab. */
.wdk-tools{align-self:stretch}
.wdk-tool{position:relative;display:flex;align-items:center;align-self:stretch}

.wdk-pop{position:absolute;top:100%;right:0;z-index:500;box-sizing:border-box;
  background:#fff;border:1px solid var(--wdk-line);border-top:0;
  border-radius:0 0 14px 14px;box-shadow:0 22px 44px -20px rgba(6,38,26,.45);
  /* --wdk-pop-x is the viewport clamp wdk-chrome.js measures and writes. It
     has to compose with the entry slide, which is why this is a two-axis
     translate where the mega panel gets away with a plain translateY. */
  opacity:0;visibility:hidden;transform:translate(var(--wdk-pop-x,0px),-6px);
  transition:opacity .16s ease,transform .18s ease,visibility 0s linear .18s}
.wdk-pop.on{opacity:1;visibility:visible;transform:translate(var(--wdk-pop-x,0px),0);
  transition:opacity .16s ease,transform .18s ease}
/* !important, and it is load-bearing: `.wdk-pop[hidden]` is (0,2,0) and so is
   `.wdk-pop.wdk-mc{display:flex}` below — a tie the LATER rule wins, which
   left the closed panel laid out (invisible, but present) instead of gone.
   Raising this one declaration is cheaper than contorting every panel
   selector, and nothing else in the codebase touches .wdk-pop. */
.wdk-pop[hidden]{display:none!important}

/* ---------- 1. ACCOUNT MENU ----------
   Guest: the value line and two buttons. Signed in: the greeting, the four
   my-account endpoints as mega-style icon rows, then Log out behind a rule.
   The same builder prints an idless copy at the foot of the mobile drawer
   (.wdk-am-dr), which is the only route to these links below 480px. */
.wdk-pop.wdk-am{width:min(272px,calc(100vw - 24px))}
.wdk-am-in{display:block;padding:14px}
.wdk-am-hd{padding:2px 5px 12px;margin-bottom:10px;border-bottom:1px solid var(--wdk-line)}
.wdk-am-k{display:block;margin-bottom:7px;font:800 9.5px/1 var(--wdk-ui);letter-spacing:.17em;
  text-transform:uppercase;color:var(--wdk-mut)}
/* overflow-wrap:anywhere — a display name can be one long unbroken string and
   it must never widen the card past the clamp. */
.wdk-am-hi{display:block;font-family:var(--wdk-display);font-weight:400;font-size:16px;line-height:1.2;
  letter-spacing:.01em;text-transform:uppercase;color:var(--wdk-ink);overflow-wrap:anywhere}
.wdk-am-sb{display:block;margin-top:7px;font:600 11.5px/1.5 var(--wdk-ui);color:var(--wdk-mut);
  text-transform:none;letter-spacing:0}
.wdk-am-l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px}
/* Rows, Log out and both guest buttons share one shape — icon chip + caps
   label — so the panel reads as one list however it is populated. */
body .wdk-am-i,body .wdk-am-out,body .wdk-am-cta,body .wdk-am-alt{
  display:grid;grid-template-columns:32px 1fr;align-items:center;gap:10px;
  padding:8px 9px;border-radius:8px;text-decoration:none!important;
  color:var(--wdk-ink)!important;transition:background .13s,border-color .13s,color .13s}
body .wdk-am-i:hover,body .wdk-am-out:hover{background:var(--wdk-jade-tint)}
.wdk-am-i:focus-visible,.wdk-am-out:focus-visible,
.wdk-am-cta:focus-visible,.wdk-am-alt:focus-visible{outline:2.5px solid var(--wdk-jade);outline-offset:1px}
.wdk-am-ic{width:32px;height:32px;flex:none;display:flex;align-items:center;justify-content:center;
  background:var(--wdk-card);border:1px solid var(--wdk-line);border-radius:9px;color:var(--wdk-ink);
  transition:background .13s,border-color .13s,color .13s}
.wdk-am-ic svg{width:17px;height:17px;display:block}
body .wdk-am-i:hover .wdk-am-ic,body .wdk-am-out:hover .wdk-am-ic{
  background:var(--wdk-jade);border-color:var(--wdk-jade);color:#fff}
.wdk-am-nm{font:800 11.5px/1.25 var(--wdk-ui);letter-spacing:.05em;text-transform:uppercase}
/* Log out is an exit, not another destination: a rule above it says so. */
.wdk-am-out{margin-top:9px;padding-top:12px!important;border-top:1px solid var(--wdk-line);border-radius:0}
.wdk-am-act{display:flex;flex-direction:column;gap:8px}
/* Solid jade CTA. --wdk-jade-safe, not --wdk-jade: see the token comment —
   white on the brand jade is 2.52:1 and fails at every size. */
body .wdk-am-cta{background:var(--wdk-jade-safe);color:#fff!important;padding:10px 11px}
body .wdk-am-cta:hover{background:var(--wdk-jade-safe-hi)}
.wdk-am-cta .wdk-am-ic{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.35);color:#fff}
body .wdk-am-alt{border:1.5px solid var(--wdk-line);padding:9px 10px}
body .wdk-am-alt:hover{border-color:var(--wdk-ink)}
/* Drawer copy: no card of its own, and it sinks to the bottom of the sheet. */
.wdk-am-dr{margin-top:auto;border-top:1px solid var(--wdk-line);background:var(--wdk-card)}
.wdk-am-dr .wdk-am-in{padding:14px}

/* ---------- 2. MINI CART ----------
   Chrome outside the fragment, WooCommerce inside it. */
.wdk-pop.wdk-mc{width:min(370px,calc(100vw - 24px));max-height:min(76vh,580px);
  display:flex;flex-direction:column}
.wdk-mc-in{flex:1 1 auto;min-height:0;width:100%;display:flex;flex-direction:column;position:relative}
.wdk-mc-hd{flex:none;position:relative;display:flex;align-items:center;gap:10px;
  padding:13px 14px 11px;border-bottom:1px solid var(--wdk-line)}
.wdk-mc-t{font-family:var(--wdk-display);font-weight:400;font-size:14px;letter-spacing:.02em;
  text-transform:uppercase;color:var(--wdk-ink)}
.wdk-mc-n{font:800 10px/1 var(--wdk-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--wdk-mut)}
/* "0 items" beside "Your cart" is the one label that adds nothing. */
.wdk-mc.is-empty .wdk-mc-n{display:none}
.wdk-mc-x{margin-left:auto;width:30px;height:30px;flex:none;display:flex;align-items:center;
  justify-content:center;padding:0;border:0;border-radius:7px;background:transparent;
  color:var(--wdk-mut);cursor:pointer;transition:background .13s,color .13s}
.wdk-mc-x:hover{background:var(--wdk-card);color:var(--wdk-ink)}
.wdk-mc-x svg{width:16px;height:16px;display:block}
.wdk-mc-x:focus-visible{outline:2.5px solid var(--wdk-jade);outline-offset:2px}

/* The fragment. `.widget_shopping_cart_content` is REPLACED whole on every
   refresh, so it is only ever addressed by that core class — never given a
   class of ours, never bound to. Making it the flex column is what keeps the
   subtotal and the buttons pinned while only the item list scrolls; they are
   printed INSIDE the fragment, after the <ul>, and cannot be moved out of it
   without taking over the template. */
.wdk-mc-body{flex:1 1 auto;min-height:0;display:flex}
.wdk-mc-body > .widget_shopping_cart_content{flex:1 1 auto;min-width:0;min-height:0;
  display:flex;flex-direction:column}
.wdk-mc ul.woocommerce-mini-cart{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  list-style:none;margin:0;padding:2px 14px 6px}

/* One line item: 56px photo in the left gutter, remove control in the right
   one, name / options / qty × price stacked between. The photo and the remove
   link are POSITIONED rather than laid out, because WooCommerce prints the
   photo inside the product link where no grid can separate it from the name —
   and because that is the one arrangement that survives a theme adding or
   reordering nodes inside the <li>. */
/* min-height is 56px — the photo's height, not the row's. The <li> is
   content-box, so the 24px of padding is added on top and a one-line item
   still clears its own thumbnail without a band of dead space under it. */
.wdk-mc li.mini_cart_item{position:relative;list-style:none;margin:0;
  padding:12px 30px 12px 68px;min-height:56px}
.wdk-mc li.mini_cart_item + li.mini_cart_item{border-top:1px solid var(--wdk-line)}
.wdk-mc li.mini_cart_item img{position:absolute;left:0;top:12px;width:56px;height:56px;margin:0;
  display:block;object-fit:cover;border-radius:9px;background:var(--wdk-card)}
body .wdk-mc li.mini_cart_item > a:not(.remove){display:block;text-decoration:none!important;
  font:800 11.5px/1.35 var(--wdk-ui);letter-spacing:.04em;text-transform:uppercase;
  color:var(--wdk-ink)!important}
body .wdk-mc li.mini_cart_item > a:not(.remove):hover{color:var(--wdk-jade-deep)!important}
.wdk-mc li.mini_cart_item > a:focus-visible{outline:2.5px solid var(--wdk-jade);outline-offset:2px;
  border-radius:6px}
/* wc_get_formatted_cart_item_data(): <dl class="variation"><dt>Weight:</dt>
   <dd><p>28g</p></dd></dl> — WDK's weights land here. */
.wdk-mc .variation{display:flex;flex-wrap:wrap;gap:0 6px;margin:5px 0 0;
  font:600 11px/1.45 'Figtree',var(--wdk-ui);letter-spacing:.02em;color:var(--wdk-mut)}
.wdk-mc .variation dt,.wdk-mc .variation dd{margin:0;font:inherit}
.wdk-mc .variation dd p{margin:0}
.wdk-mc li.mini_cart_item .quantity{display:block;margin-top:5px;
  font:600 12px/1.3 'Figtree',var(--wdk-ui);letter-spacing:.02em;color:var(--wdk-ink)}
/* The × is the link's own text content, sized rather than replaced, so the
   control keeps its accessible name, its data-* payload and its keyboard
   behaviour (WooCommerce delegates the click from document.body, which is
   also why it keeps working after every fragment swap). */
body .wdk-mc li.mini_cart_item > a.remove{position:absolute;top:12px;right:0;
  width:24px;height:24px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:var(--wdk-card);color:var(--wdk-mut)!important;
  font:400 17px/1 var(--wdk-ui)!important;text-decoration:none!important;
  transition:background .13s,color .13s}
body .wdk-mc li.mini_cart_item > a.remove:hover{background:#B3382B;color:#fff!important}
.wdk-mc li.mini_cart_item > a.remove:focus-visible{outline:2.5px solid var(--wdk-jade);outline-offset:2px}

/* Subtotal — `<p class="woocommerce-mini-cart__total total"><strong>Subtotal:
   </strong> $x</p>`. Flex turns the bare amount into the second item, so the
   label sits left and the money right without touching the markup. */
.wdk-mc .woocommerce-mini-cart__total{flex:none;display:flex;align-items:baseline;
  justify-content:space-between;gap:12px;margin:0;padding:12px 14px 10px;
  border-top:1px solid var(--wdk-line);font:800 10px/1 var(--wdk-ui);letter-spacing:.15em;
  text-transform:uppercase;color:var(--wdk-mut)}
.wdk-mc .woocommerce-mini-cart__total strong{font:inherit;color:inherit}
.wdk-mc .woocommerce-mini-cart__total .woocommerce-Price-amount,
.wdk-mc .woocommerce-mini-cart__total .amount{font-family:var(--cw-money,'Figtree',sans-serif);font-weight:600;
  font-size:21px;line-height:1;letter-spacing:.01em;text-transform:none;color:var(--wdk-ink)}

/* Quiet "View cart" + solid jade "Checkout". Porto styles bare `.button`
   hard, so exactly the contested properties carry !important and nothing
   else does. */
.wdk-mc .woocommerce-mini-cart__buttons{flex:none;display:grid;grid-template-columns:1fr 1fr;
  gap:9px;margin:0;padding:0 14px 14px}
body .wdk-mc .woocommerce-mini-cart__buttons a.button{display:flex;align-items:center;
  justify-content:center;min-height:44px;padding:11px 8px;text-align:center;
  border-radius:8px!important;background:transparent!important;color:var(--wdk-ink)!important;
  border:1.5px solid var(--wdk-line)!important;text-decoration:none!important;
  font:800 10.5px/1.2 var(--wdk-ui)!important;letter-spacing:.13em!important;
  text-transform:uppercase!important;transition:background .15s,border-color .15s,color .15s}
body .wdk-mc .woocommerce-mini-cart__buttons a.button:hover{border-color:var(--wdk-ink)!important}
body .wdk-mc .woocommerce-mini-cart__buttons a.button.checkout{
  background:var(--wdk-jade-safe)!important;border-color:var(--wdk-jade-safe)!important;color:#fff!important}
body .wdk-mc .woocommerce-mini-cart__buttons a.button.checkout:hover{
  background:var(--wdk-jade-safe-hi)!important;border-color:var(--wdk-jade-safe-hi)!important}
.wdk-mc .woocommerce-mini-cart__buttons a.button:focus-visible{outline:2.5px solid var(--wdk-jade);
  outline-offset:2px}

/* Empty state. Our copy replaces WooCommerce's "No products in the cart." —
   which is left in the DOM (display:none, not removed) precisely so the
   :has() rule below can still see it.
   THREE independent routes to the same state, because getting it wrong shows
   a "Shop the menu" button over a full cart: the server sets .is-empty from
   the real cart, the JS re-toggles it on every fragment refresh, and :has()
   reaches the same answer with no JS at all. The :has() rule is written on
   its OWN line — comma-joining it would make browsers that don't know :has()
   drop the .is-empty rule with it. */
.wdk-mc-none{display:none;flex:none;padding:18px 16px;text-align:center}
.wdk-mc.is-empty .wdk-mc-none{display:block}
.wdk-mc:has(.woocommerce-mini-cart__empty-message) .wdk-mc-none{display:block}
.wdk-mc .woocommerce-mini-cart__empty-message{display:none}
.wdk-mc-none-t{margin:0;font-family:var(--wdk-display);font-weight:400;font-size:15px;
  letter-spacing:.01em;text-transform:uppercase;color:var(--wdk-ink)}
.wdk-mc-none-s{margin:7px 0 15px;font:600 11.5px/1.5 var(--wdk-ui);color:var(--wdk-mut)}
body a.wdk-mc-shop{display:block;padding:12px 14px;border-radius:8px;
  background:var(--wdk-jade-safe);color:#fff!important;text-decoration:none!important;
  font:800 10.5px/1.2 var(--wdk-ui);letter-spacing:.13em;text-transform:uppercase;
  transition:background .15s}
body a.wdk-mc-shop:hover{background:var(--wdk-jade-safe-hi)}
.wdk-mc-shop:focus-visible{outline:2.5px solid var(--wdk-jade);outline-offset:2px}

/* ---------- 3. The mini cart as a bottom sheet ----------
   Below the nav collapse the pill opens a sheet, not a 370px dropdown pinned
   to the corner of a 390px screen. Same breakpoint as the burger so the
   header has ONE mobile mode; wdk-chrome.js only hover-opens above it. */
.wdk-pop-scrim{position:fixed;inset:0;z-index:9991;background:rgba(17,17,16,.45);
  opacity:0;transition:opacity .2s}
.wdk-pop-scrim.on{opacity:1}
.wdk-pop-scrim[hidden]{display:none}
@media (min-width:1025px){.wdk-pop-scrim{display:none!important}}

@media (max-width:1024.5px){
  .wdk-pop.wdk-mc{position:fixed;top:auto;left:0;right:0;bottom:0;z-index:9992;width:auto;
    max-height:86vh;max-height:86dvh;border:0;border-top:1px solid var(--wdk-line);
    border-radius:18px 18px 0 0;box-shadow:0 -20px 46px -18px rgba(6,38,26,.5);
    transform:translateY(16px)}
  .wdk-pop.wdk-mc.on{transform:none}
  /* grab handle — absolute, so it never becomes a flex item of the header */
  .wdk-mc-hd{padding-top:19px}
  .wdk-mc-hd::before{content:"";position:absolute;top:8px;left:50%;margin-left:-19px;
    width:38px;height:4px;border-radius:2px;background:var(--wdk-line)}
  .wdk-mc ul.woocommerce-mini-cart,
  .wdk-mc .woocommerce-mini-cart__total{padding-left:16px;padding-right:16px}
  .wdk-mc .woocommerce-mini-cart__buttons{padding-left:16px;padding-right:16px;
    padding-bottom:max(16px,env(safe-area-inset-bottom))}
  .wdk-mc-none{padding-bottom:max(20px,env(safe-area-inset-bottom))}
  /* scroll lock, mobile only: on desktop these are dropdowns and locking the
     page behind them would be wrong. */
  body.wdk-pop-open{overflow:hidden}
}

/* ============================================================
   MOBILE — nav collapses at 1024px: burger + drawer. The drawer
   reuses the mega row/tile classes at the same scale, stacked as
   accordions per department.
   ============================================================ */
.wdk-scrim{position:fixed;inset:0;z-index:9990;background:rgba(17,17,16,.45);opacity:0;
  transition:opacity .2s}
.wdk-scrim.on{opacity:1}
.wdk-scrim[hidden]{display:none}
.wdk-mnav{position:fixed;top:0;bottom:0;right:0;z-index:9991;width:min(350px,94vw);background:#fff;
  overflow-y:auto;-webkit-overflow-scrolling:touch;transform:translateX(100%);
  transition:transform .24s cubic-bezier(.16,1,.3,1);display:flex;flex-direction:column}
.wdk-mnav.on{transform:none}
.wdk-mnav[hidden]{display:none}
body.wdk-mnav-open{overflow:hidden}
/* Head is just the close button since the account link left it (owner,
   2026-08-18) — the account menu at the drawer's foot is the way in now. */
.wdk-mnav-hd{display:flex;align-items:center;justify-content:flex-end;gap:10px;
  padding:6px 8px;border-bottom:1px solid var(--wdk-line)}
.wdk-mnav-x{width:40px;height:40px;border:0;background:transparent;color:var(--wdk-ink);cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0}
.wdk-mnav-x svg{width:20px;height:20px}
/* OUT-OF-AREA FIX (chrome-menus pass, 2026-08-18) — see NOTES-chrome-menus.md.
   When .wdk-search became an absolutely-positioned dropdown card, the DRAWER
   copy inherited position:absolute / top:100% / right:… / a fixed width and a
   card border, which parked it below the bottom edge of the drawer where
   nothing could see it. The drawer's search is a ROW in the flow, so it takes
   the layout back. Scoped to `.wdk-mnav .wdk-msearch`, so the header dropdown
   is untouched — revert is this one block. */
.wdk-mnav .wdk-msearch{display:flex;position:static;width:auto;inset:auto;
  border:0;border-bottom:1px solid var(--wdk-line);border-radius:0;box-shadow:none;
  padding:12px 14px}
.wdk-mnav-list{padding:6px 14px 22px;display:flex;flex-direction:column}
.wdk-acc{border-bottom:1px solid var(--wdk-line)}
.wdk-acc-b{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:transparent;border:0;cursor:pointer;padding:15px 2px;
  font-family:var(--wdk-menu);font-weight:800;font-size:13.5px;letter-spacing:.01em;
  text-transform:uppercase;color:var(--wdk-ink)}
.wdk-acc-b:focus-visible{outline:2.5px solid var(--wdk-jade);outline-offset:-2px}
.wdk-acc-b .wdk-chev{opacity:.6}
.wdk-acc-b[aria-expanded=true] .wdk-chev{transform:rotate(180deg);opacity:1}
/* Department icons on the drawer rows — CW's mobile drawer marks, same SVG
   set the mega panel rows already draw (owner, 2026-08-18). */
.wdk-acc-lb{display:flex;align-items:center;gap:11px;min-width:0}
.wdk-acc-ic{flex:none;display:flex;align-items:center;justify-content:center;color:var(--wdk-jade-deep)}
.wdk-acc-ic svg{width:18px;height:18px;display:block}
.wdk-acc-p{padding:2px 0 14px}
.wdk-acc-p[hidden]{display:none}
.wdk-acc-p .wdk-mega-all{margin-top:10px}
body .wdk-mnav-a{display:flex;align-items:center;gap:11px;padding:15px 2px;
  border-bottom:1px solid var(--wdk-line);
  font-family:var(--wdk-menu);font-weight:800;font-size:13.5px;letter-spacing:.01em;
  text-transform:uppercase;color:var(--wdk-ink)!important;text-decoration:none!important}
body .wdk-mnav-a:hover{color:var(--wdk-jade-deep)!important}

@media (max-width:1024.5px){
  .wdk-nav,.wdk-mega{display:none!important}
  .wdk-mtog{display:flex}
  .wdk-hb-in{min-height:58px;gap:12px}
  .wdk-logo img{height:38px}
}
@media (min-width:1025px){
  .wdk-mnav,.wdk-scrim{display:none!important}
}
@media (max-width:480px){
  .wdk-cart-t{display:none}
  body a.wdk-cart{padding:0 13px}
  /* Account lives in the drawer at this width — head greeting plus the full
     .wdk-am-dr block at its foot — so the WRAPPER goes, taking the dropdown
     with it. Hiding only .wdk-acct would leave an unreachable panel in the
     tab order. */
  .wdk-tool-acct{display:none}
}

@media (prefers-reduced-motion:reduce){
  .wdk-mega,.wdk-mnav,.wdk-scrim,.wdk-chev,.wdk-ni-a,.wdk-mega-i,.wdk-mega-ic,
  .wdk-pop,.wdk-pop-scrim,.wdk-am-i,.wdk-am-out,.wdk-am-cta,.wdk-am-alt,.wdk-am-ic,
  .wdk-mc-x,.wdk-mc li.mini_cart_item > a.remove,
  .wdk-mc .woocommerce-mini-cart__buttons a.button{transition-duration:.01ms!important}
}

/* ---- stray 12px of horizontal scroll, sitewide -----------------------
   Porto's .row.main-content-wrap keeps bootstrap's -12px side gutters, but the
   .container around it has zero padding here, so every page scrolled 12px to
   the right (measured 1612 vs 1600 on both the archive and the homepage —
   pre-existing, not introduced by the full-width homepage).
   `clip`, not `hidden`: hidden would turn .page-wrapper into a scroll
   container and break position:sticky inside it (the PDP gallery). */
.page-wrapper{overflow-x:clip}

/* ============================================================
   PROMO STRIP (#ud-banner-bar) — the "Ink" look, now the
   DEFAULT (owner chose it from /wdk-top-bar-options/,
   2026-08-17). Charcoal to match the hero, footer and price
   ticker, so the page carries one dark language instead of two
   competing greens.

   The ud-banner plugin prints its styling INLINE on both the
   inner div and the CTA link, and inline styles outrank any
   selector — hence !important on each property being changed.
   The inner div carries no class, so it is `#ud-banner-bar > div`.

   It also sits outside Porto's typographic wrapper and inherits
   NO font-family, so the plugin's default rendered in browser
   serif (Times). Setting the family here fixes that everywhere,
   variant or not.
   ============================================================ */
#ud-banner-bar > div{
  background:#151917!important;
  color:#fff!important;
  font-family:'Open Sans',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif!important;
  padding:11px 14px!important;
  font-size:clamp(12px,1.25vw,14px)!important;
  font-weight:800!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
  gap:16px!important;
  border-bottom:1px solid rgba(255,255,255,.08);
}
#ud-banner-bar a{
  background:#FF9800!important;
  color:#1A1204!important;
  font-family:inherit!important;
  padding:8px 15px!important;
  border-radius:999px!important;
  font-size:11.5px!important;
  letter-spacing:.09em!important;
  text-transform:uppercase!important;
  transition:background .15s ease;
}
#ud-banner-bar a:hover{background:#FFA51D!important}
@media (max-width:560px){
  #ud-banner-bar > div{font-size:11px!important;gap:10px!important;padding:9px 12px!important}
  #ud-banner-bar a{font-size:10.5px!important;padding:7px 12px!important}
}

/* ============================================================
   MEGA PANEL — "Mint" (owner chose it from the colour artifact,
   2026-08-17). A jade-tinted paper instead of plain white: light
   enough to scan at a glance, tinted enough that it belongs to
   the jade bar it drops out of. The feature card goes WHITE so it
   still reads as the one thing being singled out, and its button
   goes ink so the orange is not competing with the price.
   ============================================================ */
.wdk-mega{background:#F1F9F5}
.wdk-mega-h,.wdk-mega-t{border-bottom-color:rgba(23,122,82,.20)}
.wdk-mega-ic{background:#fff;border-color:rgba(23,122,82,.22);color:#1F8A5F}
.wdk-mega-i:hover .wdk-mega-ic{background:#e4f4ec;border-color:rgba(23,122,82,.36)}
.wdk-mega-i:hover{background:rgba(23,122,82,.06)}
/* The "cheapest in" card STAYS DARK on the mint field (owner, 2026-08-17:
   "mint with keeping the image") — the ink card and its jade photo tile are
   the contrast that makes the featured product the one thing you look at, so
   only the field around it changed. Its orange price and orange button carry
   over from the base rules above; nothing is overridden here.
   The photo tile: a jade block behind the picture, so a missing image leaves
   the tile rather than a hole (the <img> removes itself on error). */
.wdk-mega-f-img{display:block;aspect-ratio:.96;border-radius:8px;overflow:hidden;
  background:linear-gradient(150deg,#3EB785,#14624a)}
.wdk-mega-f-img img{width:100%;height:100%;object-fit:cover;display:block;background:none}

/* ---- mini cart: Porto's own template extras ---------------------------
   Porto overrides cart/mini-cart.php and prints a `.total-count` row (an
   item count plus its own "View cart" link) above the list. Our panel
   already states both in its header and its buttons, so that row is
   suppressed — it is inside the replaced fragment, so it cannot be removed
   in PHP without overriding the template, which this layer deliberately
   avoids. The list's own class set is Porto's too (`.cart_list
   .product_list_widget`), so the item rules key off those as well as core's
   `.mini_cart_item`. */
.wdk-mc .widget_shopping_cart_content .total-count{display:none}
.wdk-mc .cart_list{margin:0;padding:0;list-style:none;max-height:min(46vh,360px);overflow-y:auto}
.wdk-mc .cart_list li{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:11px;
  align-items:center;padding:11px 14px;border-bottom:1px solid #EDF3F0;position:relative}
.wdk-mc .cart_list li:last-child{border-bottom:0}
.wdk-mc .cart_list li img{grid-column:1;width:52px;height:52px;object-fit:cover;border-radius:9px;
  background:#F1F9F5;margin:0;float:none}
.wdk-mc .cart_list li a:not(.remove){grid-column:2;font:800 12px/1.35 var(--wdk-ui);letter-spacing:.02em;
  text-transform:uppercase;color:var(--wdk-ink)!important;text-decoration:none!important}
.wdk-mc .cart_list li .quantity{grid-column:2;font:600 12px/1 'Figtree',var(--wdk-ui);color:#6d7d75}
.wdk-mc .cart_list li a.remove{grid-column:3;position:static;width:24px;height:24px;display:grid;
  place-items:center;border-radius:50%;background:#F1F9F5;color:#5B7A6D!important;font-size:15px;
  line-height:1;text-decoration:none!important}
.wdk-mc .cart_list li a.remove:hover{background:#FDECEC;color:#B3261E!important}
.wdk-mc .cart_list li.empty{display:block;padding:22px 14px;text-align:center;color:#6d7d75;
  font:600 13px/1.5 var(--wdk-ui)}

/* ============================================================
   PAGE MEASURE (owner, 2026-08-18: "a lot of pages are full
   width, make them all the same width as the header, not the
   homepage")

   Porto is configured wide here: its .container is max-width:100%,
   so cart, checkout, account, blog, single posts, the 404 and
   every Elementor page ran the full width of the monitor. The
   header bar (.wdk-hb-in) has always been 1610px + 40px gutters,
   so the site read as two different widths stacked on each other.

   One lever, three deliberate exemptions:
   1. THE HOMEPAGE keeps its full-bleed hero and slider rows —
      excluded by its template's body class, which also covers the
      /wdk-home-preview/ copy of it.
   2. SHOP ARCHIVES are skipped: .cw-shoplayout already caps at
      1610px with its own 24px gutters, and boxing the container
      around it would indent the grid a second time. :has() picks
      those containers out by content rather than by body class,
      so a new archive route is covered the day it ships. A
      browser without :has() support simply keeps today's
      behaviour on those pages — nothing breaks.
   3. Elementor's own inner cap (.e-con-inner, 1470px) is left
      alone: it is narrower than the 1530px this leaves, so what
      changes on those pages is the SECTION BACKGROUND stopping at
      the header's edge, not the content moving.
   ============================================================ */
/* The child combinator matters: the single-product template nests a SECOND
   .container inside the layout one, and a descendant selector padded both, so
   the PDP came out 110px narrower than every other page and 55px off the
   header's edge. Only the outermost container carries the measure. */
/* Porto's own dynamic CSS narrows the product pages from the layout column up:
     :is(body.single-product, body.archive.product) #main{width:80%;max-width:1500px}
   That is an ID selector, so a class-level override never applies - the PDP kept
   centring inside a 1500px column and sat 55px inside the header's edge while
   every other page lined up. Matching on #main outranks it; the container below
   is what actually sets the measure. */
/* The leading `html` is not decoration. Porto's rule and this one both compute
   to (1,2,1) - one id, two classes, one element - and Porto's dynamic CSS is
   printed inline AFTER the stylesheet, so an exact tie hands it the win. The
   extra element takes this to (1,2,2). */
html body:not(.page-template-page-wdk-home) .page-wrapper > #main{width:auto;max-width:none}

/* width:auto is load-bearing. Porto gives the single-product container a FIXED
   width (1500px), and a fixed width beats max-width, so the PDP sat 55px inside
   the header's edge while every other page lined up. */
body:not(.page-template-page-wdk-home) .page-wrapper > * > .container:not(:has(.cw-shoplayout)){
  width:auto;max-width:1610px;margin-left:auto;margin-right:auto;
  padding-left:40px;padding-right:40px}
@media (max-width:1024.5px){
  body:not(.page-template-page-wdk-home) .page-wrapper > * > .container:not(:has(.cw-shoplayout)){
    padding-left:24px;padding-right:24px}
}
@media (max-width:600px){
  body:not(.page-template-page-wdk-home) .page-wrapper > * > .container:not(:has(.cw-shoplayout)){
    padding-left:16px;padding-right:16px}
}
/* Wrappers that used to carry the measure themselves now fill the boxed
   container instead of centring a second, narrower column inside it. */
body.wdk-legal .wdkl{max-width:none}

/* ============================================================
   MINI-CART LINE ITEM — thumbnail containment (owner, 2026-08-18:
   "mini cart looks messed").

   Porto nests the drawer's thumbnail two levels deep:

       li.mini_cart_item
         └ div.product-image
             └ div.inner
                 └ img            + a.remove overlaid on the thumb

   The two older rule sets in this sheet both target `li … img`
   directly — one absolutely positions it at 56px, the other sizes
   it 52px as a grid item. Neither reached this img: a `width:100%`
   rule on the nested image wins, `.inner` has no height of its own,
   and the picture rendered at its natural 68x68 inside a box that
   had collapsed to 24px. Measured on staging: row 60px tall, image
   running from y=212 to y=280, i.e. ~40px of it lying on top of
   whatever sits underneath — which is Porto's free-shipping bar.

   The fix is to give the WRAPPERS the size and let the image fill
   them, so the row's height is honest no matter what Porto's own
   image CSS says. Kept at the 52px the grid column already
   reserves, so nothing else has to move.
   ============================================================ */
.wdk-mc .cart_list li .product-image,
.wdk-mc li.mini_cart_item .product-image{
  grid-column:1;
  width:52px;height:52px;min-width:52px;min-height:52px;
  margin:0;padding:0;position:relative;flex:none;
  border-radius:9px;overflow:hidden;background:#F1F9F5;
}
.wdk-mc .cart_list li .product-image .inner,
.wdk-mc li.mini_cart_item .product-image .inner{
  width:100%;height:100%;margin:0;padding:0;position:relative;overflow:hidden;
}
.wdk-mc .cart_list li .product-image img,
.wdk-mc li.mini_cart_item .product-image img{
  position:static!important;
  width:100%!important;height:100%!important;max-width:100%!important;
  margin:0!important;display:block;object-fit:cover;border-radius:9px;
}
/* Porto lays the remove control over the thumbnail. Once the thumb is a
   contained 52px box the badge has to be pinned to that box's own corner,
   or it inherits the old absolute offsets and floats off the picture. */
.wdk-mc .cart_list li .product-image a.remove,
.wdk-mc li.mini_cart_item .product-image a.remove{
  position:absolute!important;top:2px;right:2px;left:auto;bottom:auto;
  width:20px;height:20px;display:grid;place-items:center;
  border-radius:50%;background:rgba(255,255,255,.92);
  color:#5B7A6D!important;font-size:13px;line-height:1;text-decoration:none;
  box-shadow:0 1px 3px rgba(21,25,23,.18);
}
.wdk-mc .cart_list li .product-image a.remove:hover,
.wdk-mc li.mini_cart_item .product-image a.remove:hover{
  background:#FDECEC;color:#B3261E!important;
}
/* The remove control is Porto's `.remove-product` — an EMPTY anchor whose ×
   glyph comes from Porto's icon font, which this rebuilt header never loads.
   The circle rendered blank (owner, 2026-08-18: "what are the circles in the
   images?"). Drawing the × ourselves makes the control legible; the anchor
   keeps its aria-label, so the pseudo-glyph is decoration, not the name. */
.wdk-mc .cart_list li .product-image a.remove::before,
.wdk-mc li.mini_cart_item .product-image a.remove::before{
  content:"\00d7";font-family:var(--wdk-ui)!important;
  font-size:14px;font-weight:400;line-height:1;
}
/* The details column sits beside the thumb; without a stated column it was
   free to start wherever the collapsed image left off. */
.wdk-mc .cart_list li .product-details,
.wdk-mc li.mini_cart_item .product-details{
  grid-column:2;min-width:0;
  /* Free Gift Coupons blanks a gift's permalink, so Porto prints its NAME as
     a bare text node here — no <a> for the name rule below to catch, and the
     gift titles rendered in the drawer's default grey (owner, 2026-08-18:
     "free items have different font style in the mini cart"). The container
     carries the same type as the link rule; the <a>, .variation and
     .quantity children all restate their own fonts, so only the naked name
     text actually inherits this. */
  font:800 12px/1.35 var(--wdk-ui);letter-spacing:.02em;
  text-transform:uppercase;color:var(--wdk-ink);
}
/* Row height follows its content again rather than a fixed 60px that the
   image was already breaking out of. */
.wdk-mc .cart_list li{align-items:center;min-height:74px}

/* ============================================================
   MINI-CART FREE-SHIPPING BAR (Porto's lib, drawer only) — the
   delivery theme (owner, 2026-08-18). Wording is re-said in
   inc/wdk-chrome.php (gettext: "Add $X more for free delivery" /
   "Free delivery unlocked!"); this block owns the look: mint
   panel, jade progress, the unlocked state reads as a win.
   ============================================================ */
.wdk-mc .porto-free-shipping{
  margin:0 30px 16px;padding:12px 14px 13px;
  background:var(--wdk-jade-tint);border:1px solid var(--wdk-line);border-radius:10px;
}
.wdk-mc .porto-free-shipping-notice{
  display:flex;align-items:center;gap:8px;margin:0 0 9px;
  font:800 10.5px/1.45 var(--wdk-ui);letter-spacing:.11em;text-transform:uppercase;
  color:var(--wdk-jade-safe);
}
.wdk-mc .porto-free-shipping-notice .amount{color:var(--wdk-ink)}
.wdk-mc .porto-free-shipping-notice .porto-icon-package{display:none}
.wdk-mc .porto-free-shipping-notice.fs-success{margin:0;justify-content:center;color:var(--wdk-jade-safe)}
/* the <progress> element, both engines; hidden entirely once unlocked — a
   full bar under "unlocked" is a gauge with nothing left to measure */
.wdk-mc .porto-free-shipping-bar{
  display:block;width:100%;height:6px;margin:0;border:0;border-radius:99px;overflow:hidden;
  -webkit-appearance:none;appearance:none;background:#d8e8df;
}
.wdk-mc .porto-free-shipping-bar::-webkit-progress-bar{background:#d8e8df;border-radius:99px}
.wdk-mc .porto-free-shipping-bar::-webkit-progress-value{background:var(--wdk-jade);border-radius:99px}
.wdk-mc .porto-free-shipping-bar::-moz-progress-bar{background:var(--wdk-jade);border-radius:99px}
.wdk-mc .porto-free-shipping-notice.fs-success + .porto-free-shipping-bar{display:none}

/* Money figures ride Figtree sitewide (owner, 2026-08-18) — the mini cart's
   subtotal $ steps down like every other large figure's. */
.wdk-mc .woocommerce-mini-cart__total .woocommerce-Price-currencySymbol{font-size:.6em}

/* ============================================================
   MOBILE: THE HEADER STICKS (owner, 2026-08-19: "make the header
   sticky in mobile").

   .wdk-hdr is printed at wp_body_open and is a DIRECT CHILD OF
   <body> — no transformed, clipped or scrolling ancestor between
   it and the viewport — so plain position:sticky resolves against
   the page and needs no JS and no placeholder to stop the content
   jumping. (`.page-wrapper{overflow-x:clip}` further down the page
   is a sibling's problem, not this one's; clip was chosen over
   hidden for exactly this reason.)

   The promo strip (#ud-banner-bar) and the price ticker are NOT
   sticky: they are announcements, and pinning 136px of chrome to a
   844px phone screen would cost a sixth of the viewport. They
   scroll away and the 64px bar stays.

   z-index 9000 sits above the page and the mega panel (500) but
   below the drawer/scrim (9990-9991) and the mini-cart sheet
   (9992), so an open menu still covers the bar it came from.
   ============================================================ */
@media (max-width:991px){
  .wdk-hdr{position:sticky;top:0;z-index:9000}
}

/* ============================================================
   PORTO'S OFF-CANVAS PANEL — STOP IT PAINTING (owner, 2026-08-19:
   "the left side of the homepage has a sliver of a white line...
   on desktop only").

   #side-nav-panel is Porto's mobile off-canvas menu, printed at
   body level on every page. It is parked off-screen with
   `transform:translateX(-290px)` — NOT hidden — so its RIGHT EDGE
   sits exactly on x=0, it is white, full viewport height, and
   z-index 9001 puts it above everything.

   At a whole device pixel ratio that edge lands on the pixel grid
   and is invisible. At a FRACTIONAL one (the owner runs 1.75) the
   composited layer antialiases and bleeds half a device pixel of
   white into column 0 — a hairline over the banner, the header and
   the hero alike. Measured in their screenshot: jade 83,196,149
   came back as 169,225,202, i.e. exactly 50% white. It was there
   before too; the old 16px gutters were the same white, so it only
   became visible once the sections went full-bleed.

   Dead weight on WDK: this header layer replaces Porto's, and the
   only thing that opens the panel — a.mobile-toggle — computes
   display:none. TO REVIVE IT (if Porto's mobile menu is ever
   wanted): drop this rule and park the panel at -292px instead, so
   the antialiased edge falls outside the viewport.
   ============================================================ */
#side-nav-panel{display:none!important}