/*
Theme Name: Whipped Cream Canada Child
Template: kadence
Description: Child theme for Whipped Cream Canada — food-grade N2O cream chargers, cylinders & dispensers. Ported from the approved HTML prototypes (index.html / product.html / shop.html / legal-compliance.html).
Version: 0.8.15-ca1
Text Domain: foodgradenos-child
*/

/* ===================================================================
   DESIGN TOKENS — ported 1:1 from the approved prototypes
   =================================================================== */
/* PREMIUM DARK IDENTITY (v0.4.0) — deep navy + electric yellow, inspired by the
   FastGas premium look, adapted for Whipped Cream Canada. Green is retained strictly
   for food-grade / certified / in-stock trust signals (our differentiator).
   Token-based so the whole site inherits it. */
:root{
  --ground:#07202F; --surface:#0C2A3D; --surface-2:#123A52;
  --ink:#EAF2F7; --ink-soft:#9DB4C4; --ink-faint:#6E879B;
  --accent:#17B488; --accent-bright:#2BD9A6; --accent-ink:#04140E;
  --accent-yellow:#EAE710; --accent-yellow-ink:#0A1A22;
  --steel:#6E879B; --cream:#F5E9CC; --cream-ink:#6B5A2E;
  --line:rgba(255,255,255,.11); --line-strong:rgba(255,255,255,.20);
  --amber:#E7B44D; --danger:#E0705F;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 12px 34px -14px rgba(0,0,0,.55);
  --shadow-lift:0 3px 10px rgba(0,0,0,.45),0 24px 54px -18px rgba(0,0,0,.72);
  /* Corner-radius scale (v0.5.1) — a small, consistent set of steps instead of
     scattered one-off values, so every box/button/card reads as one system. */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-pill:999px;
  --dark-band:#04161F;
  --mono:"JetBrains Mono",ui-monospace,"Cascadia Code","SF Mono",Consolas,monospace;
  --sans:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --display:"Bricolage Grotesque","Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --maxw:1200px;
}
:root[data-theme="light"]{
  --ground:#F0F3F4; --surface:#FFFFFF; --surface-2:#E9EEEF;
  --ink:#171C1F; --ink-soft:#49575D; --ink-faint:#7C8A90;
  --accent:#0C6B4E; --accent-bright:#12A576; --accent-ink:#063B2B;
  --steel:#8A9EA7; --cream:#F5E9CC; --cream-ink:#6B5A2E;
  --line:#D5DDDF; --line-strong:#BAC6C9; --amber:#B6791F; --danger:#B23A2E; --dark-band:#12181B;
}
:root[data-theme="dark"]{
  --ground:#0E1315; --surface:#151C1F; --surface-2:#1B2428;
  --ink:#EDF2F3; --ink-soft:#AAB9BE; --ink-faint:#7B8B91;
  --accent:#16B487; --accent-bright:#2BD9A6; --accent-ink:#BDF3E2;
  --steel:#6E828B; --cream:#E9D9B0; --cream-ink:#E9D9B0;
  --line:#263236; --line-strong:#33454A; --amber:#D9A24A; --danger:#E0705F; --dark-band:#05090A;
}
body{
  font-family:var(--sans);color:var(--ink);
  /* !important: Kadence forces a light body background-color via its own CSS */
  background-color:var(--ground) !important;
  background-image:
    radial-gradient(115% 70% at 88% -12%, color-mix(in srgb,var(--accent-yellow) 7%,transparent), transparent 55%),
    radial-gradient(90% 60% at -12% 4%, color-mix(in srgb,var(--accent) 14%,transparent), transparent 55%) !important;
  background-attachment:fixed;
}
h1,h2,h3,h4{font-family:var(--display);letter-spacing:-.02em;text-wrap:balance;color:var(--ink)}
.mono,.fgn-mono{font-family:var(--mono)}
.fgn-eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-bright);font-weight:600}
.tnum{font-variant-numeric:tabular-nums}

/* ===================================================================
   PREMIUM DARK CHROME OVERRIDES (v0.4.0) — make the Kadence header/footer +
   WooCommerce defaults match the navy identity. Apple-simple restraint:
   generous space, high-contrast text, one clear accent.
   =================================================================== */
/* Kadence header + footer chrome -> navy */
#masthead,.site-header,.site-header-wrap,.site-top-header-wrap,.site-main-header-wrap,
.site-header-row-container-inner,.site-footer,.site-footer-wrap,.footer-wrap,
.site-bottom-footer-wrap,.site-top-footer-wrap{background:var(--ground) !important;border-color:var(--line) !important}
.site-header{border-bottom:1px solid var(--line)}
/* Real logo (v0.5.2) — the source file is a wide 1895x630 wordmark banner;
   Kadence has no built-in cap for it, so it would otherwise render at ~full
   container width. Clamp to a header-appropriate height everywhere it's used. */
.site-logo img.custom-logo,.site-branding img.custom-logo{max-height:56px;width:auto;height:auto}
@media (max-width:600px){.site-logo img.custom-logo,.site-branding img.custom-logo{max-height:44px}}
/* the logo artwork already contains the "Whipped Cream Canada" wordmark, so the
   separate Kadence site-title text next to it is redundant — hide visually,
   keep it in the DOM (sr-only-style, still fine for SEO/accessibility since
   the logo image already carries an equivalent alt attribute). */
.site-branding .site-title{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.site-branding .site-title a{color:var(--ink) !important}
/* Header account icon (v0.6.0) — injected next to the native Kadence cart icon
   since free Kadence has no built-in "account" header item. Sized/spaced to
   match the cart button's footprint so the pair reads as one control group. */
.fgn-header-account-item{display:flex;align-items:center}
.fgn-header-account{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;color:var(--ink);flex:0 0 auto}
.fgn-header-account:hover{color:var(--accent-yellow)}
.fgn-header-account svg{width:22px;height:22px}
.site-header-main-section-right{display:flex;align-items:center}
.header-cart-wrap .header-cart-button{color:var(--ink)}
.header-cart-wrap .header-cart-button:hover{color:var(--accent-yellow)}
.header-cart-total{background:var(--accent-yellow);color:var(--accent-yellow-ink) !important}
@media (max-width:600px){.fgn-header-account{width:38px;height:38px}.fgn-header-account svg{width:20px;height:20px}}
/* Header Snapchat icon (v0.8.2) — same injection/sizing pattern as the account
   icon above, so the two read as one consistent icon row next to the cart. */
.fgn-header-snap-item{display:flex;align-items:center}
.fgn-header-snap{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;color:var(--ink);flex:0 0 auto}
.fgn-header-snap:hover{color:var(--accent-yellow)}
.fgn-header-snap svg{width:22px;height:22px}
@media (max-width:600px){.fgn-header-snap{width:38px;height:38px}.fgn-header-snap svg{width:20px;height:20px}}
.site-branding a,.site-title,.site-title a,.site-header .header-navigation a,#masthead a,.header-menu-container a,
.site-footer a,.site-footer .widget,.site-footer p,.footer-widgets a{color:var(--ink) !important}
.site-header .header-navigation a:hover,#masthead a:hover{color:var(--accent-yellow) !important}
.site-footer,.site-info,.footer-navigation{color:var(--ink-soft)}
.site-info a{color:var(--ink-soft) !important} .site-info a:hover{color:var(--accent-yellow) !important}
/* Kadence "boxed content" white container -> transparent so the navy body shows
   through the full-bleed front-page sections (hero, how-it-works, formats, FAQ). */
.content-bg,.content-container,.entry-content-wrap,.single-content,.content-area,
#primary,.site-content,#main,.hentry,body.content-style-boxed .content-container,
#inner-wrap,#wrapper{background:transparent !important;box-shadow:none !important}
/* WooCommerce primary buttons -> electric-yellow (FastGas energy), dark ink */
.woocommerce a.button,.woocommerce button.button,.woocommerce button.button.alt,
.woocommerce #respond input#submit,.woocommerce input.button,.woocommerce input.button.alt,
.woocommerce .single_add_to_cart_button,.wc-block-components-button{background:var(--accent-yellow) !important;color:var(--accent-yellow-ink) !important;border-radius:var(--r-pill);font-weight:750;letter-spacing:.01em;border:none}
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover,
.woocommerce .single_add_to_cart_button:hover{background:#fff !important;color:#0a1a22 !important}
/* WooCommerce variation dropdowns / inputs -> dark, readable */
.woocommerce div.product form.cart .variations select,.woocommerce .quantity input.qty,
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,
.woocommerce table.variations td select,select,input[type=text],input[type=email],input[type=tel],input[type=number],textarea{
  background:var(--surface) !important;color:var(--ink) !important;border:1px solid var(--line-strong) !important;border-radius:var(--r-sm)}
.woocommerce div.product p.price,.woocommerce div.product span.price,
.woocommerce div.product p.price ins,.woocommerce-Price-amount{color:var(--ink) !important}
.woocommerce-breadcrumb,.kadence-breadcrumbs,.kadence-breadcrumbs a{color:var(--ink-soft)}
/* tables (spec sheets / additional info) on navy */
.woocommerce table.shop_attributes th,.woocommerce table.shop_attributes td{color:var(--ink-soft);border-color:var(--line)}
/* Kadence forces a dark heading colour that beats our token — restore white on
   the dark theme. Intentionally-light panels (the cream Bulk & Trade block) are
   re-exempted to dark ink just below so their headings stay readable. */
h1,h2,h3,h4,h5,h6{color:var(--ink) !important}
.fgn-bulk h1,.fgn-bulk h2,.fgn-bulk h3,.fgn-bulk h4,.fgn-bulk .fgn-wrap>*{color:var(--cream-ink) !important}
.fgn-bulk .fgn-wrap .fgn-eyebrow{color:var(--amber) !important}
/* the darker table panel inside the cream block keeps light text */
.fgn-bulk .fgn-tiertable,.fgn-bulk .fgn-tiertable *{color:var(--ink) !important}
/* PDP + FAQ readability on the dark theme */
.fgn-specbox .sbhead b{color:var(--ink)}
.fgn-specgrid .sg .v{color:var(--ink)}
.woocommerce div.product .woocommerce-product-details__short-description{color:var(--ink-soft)}
.woocommerce-Tabs-panel,.woocommerce-Tabs-panel p,.woocommerce-Tabs-panel li{color:var(--ink-soft)}
.woocommerce div.product .product_meta,.woocommerce div.product .product_meta a{color:var(--ink-soft)}
.woocommerce div.product .product_meta a:hover{color:var(--accent-yellow)}
.fgn-faq details summary{color:var(--ink)}
.woocommerce-tabs ul.tabs li a{color:var(--ink-soft)}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:var(--ink)}
/* Kadence page-title hero band (shows on cart/checkout/default pages) -> navy */
.entry-hero-container-inner,.entry-hero,.entry-hero-container,.page-hero,.kadence-title-above-container-inner{background:transparent !important;background-color:transparent !important}
.entry-hero-container-inner .entry-title,.entry-hero .entry-title,.page-title .entry-title{color:var(--ink) !important}
/* WooCommerce block cart + checkout: default dark slate text -> light on navy.
   Scoped to the block wrappers; buttons + notices keep their own colours. */
.wp-block-woocommerce-cart,.wp-block-woocommerce-checkout{background:transparent}
.wp-block-woocommerce-cart *:not(button):not(.wc-block-components-button__text):not(.wc-block-components-notice-banner):not(.wc-block-components-notice-banner *),
.wp-block-woocommerce-checkout *:not(button):not(.wc-block-components-button__text):not(.wc-block-components-notice-banner):not(.wc-block-components-notice-banner *){color:var(--ink) !important}
.wc-block-components-product-metadata,.wc-block-components-totals-item__label,
.wc-block-checkout__guest-checkout-notice,.wc-block-components-product-details,
.wc-block-components-order-summary-item__individual-price{color:var(--ink-soft) !important}
.wc-block-components-text-input input,.wc-block-components-text-input .components-form-token-field__input,
.wc-block-components-country-input select,.wc-block-components-address-form input{background:var(--surface) !important;color:var(--ink) !important;border-color:var(--line-strong) !important}
.wc-block-components-text-input label{color:var(--ink-faint) !important}

/* ===================================================================
   TOP ANNOUNCEMENT BAR + WHATSAPP (site-wide, injected via wp_body_open / wp_footer)
   =================================================================== */
/* Top announcement bar. Owner 2026-10-24: this had grown to six items at 12px
   with 9px/24px padding, which wrapped to three or four rows on a phone and read
   as a second header rather than a utility strip. Smaller type, tighter padding,
   lighter weight; on narrow screens the items that are duplicated elsewhere are
   dropped rather than allowed to wrap. The 18+ / lawful-use line is kept at every
   width on purpose - it is a compliance signal, not a marketing claim. */
.fgn-topbar{background:var(--dark-band);color:rgba(255,255,255,.66);font-size:11px}
.fgn-topbar .fgn-wrap{display:flex;align-items:center;justify-content:center;gap:4px 18px;padding:5px 20px;max-width:var(--maxw);margin:0 auto;font-family:var(--mono);font-size:11px;line-height:1.5;letter-spacing:.02em;flex-wrap:wrap}
.fgn-topbar b{color:rgba(255,255,255,.92);font-weight:600}
.fgn-topbar .dot{width:4px;height:4px;border-radius:50%;background:var(--accent-bright);display:inline-block}
.fgn-topbar .fgn-tg-top,.fgn-topbar .fgn-wa-top{font-weight:500;color:rgba(255,255,255,.88)}
.fgn-topbar .fgn-tg-top .fgn-tg-icon{width:12px;height:12px}
.fgn-topbar .fgn-wa-top .fgn-wa-glyph{font-size:12px}
/* Redundant below ~900px: the min-order is already stated in the delivery item
   and enforced in the cart, and the purity claim has its own place on the page. */
@media (max-width:900px){
	.fgn-topbar .fgn-wrap > span:nth-of-type(3){display:none}
}
/* On a phone keep only the delivery promise, the 18+ line and WhatsApp. The
   Telegram channel is still in the footer and on the Contact page. */
@media (max-width:560px){
	.fgn-topbar .fgn-wrap{gap:3px 12px;padding:4px 14px;font-size:10.5px}
	.fgn-topbar .fgn-tg-top{display:none}
}
.fgn-wa-glyph{width:1em;height:1em;flex:0 0 auto;fill:currentColor}
.fgn-wa-top{display:inline-flex;align-items:center;gap:6px;color:#fff;font-weight:600}
.fgn-wa-top .fgn-wa-glyph{color:#25D366;font-size:14px}
.fgn-wa-btn{display:inline-flex;align-items:center;gap:9px;font-weight:650;font-size:14.5px;padding:13px 20px;border-radius:var(--r-pill);cursor:pointer;border:1px solid #1EBE57;background:#25D366;color:#08251A;text-decoration:none}
.fgn-wa-btn:hover{background:#22c65f}
.fgn-wa-btn .fgn-wa-glyph{font-size:19px;color:#08251A}
.fgn-wa-btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.fgn-wa-btn.ghost .fgn-wa-glyph{color:#25D366}
/* Snapchat + Telegram fallback contact chips (v0.8.3) — footer + Contact page */
.fgn-alt-contact{margin-top:16px}
.fgn-alt-contact-lbl{font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-faint);margin-bottom:8px}
.fgn-alt-contact-row{display:flex;flex-wrap:wrap;gap:10px}
.fgn-snap-chip,.fgn-tg-chip{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border:1px solid var(--line-strong);border-radius:12px;font-size:12.5px;line-height:1.35;color:var(--ink);text-decoration:none;background:var(--surface)}
.fgn-snap-chip img{border-radius:6px;flex:0 0 auto;display:block}
.fgn-tg-chip .fgn-tg-glyph{width:24px;height:24px;flex:0 0 auto;color:#229ED9}
.fgn-snap-chip b,.fgn-tg-chip b{font-weight:650}
.fgn-snap-chip:hover,.fgn-tg-chip:hover{border-color:var(--accent-yellow)}
.fgn-alt-contact-note{margin-top:9px;font-size:12px;color:var(--ink-faint);max-width:340px}
/* Multi-channel contact FAB (WhatsApp / Telegram / Snapchat) — one toggle,
   anchored bottom-right same spot the old single WhatsApp FAB held, expands
   into a vertical speed-dial of per-channel pill buttons above it. */
.fgn-contact-fab{position:fixed;right:22px;bottom:22px;z-index:60}
.fgn-fab-toggle{position:relative;width:58px;height:58px;border:0;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;background:#25D366;color:#fff;padding:0;
  box-shadow:0 10px 30px -8px rgba(7,37,26,.5),0 2px 8px rgba(0,0,0,.2);
  transition:background .25s ease,transform .2s ease}
.fgn-fab-toggle:hover{transform:translateY(-2px)}
.fgn-fab-toggle::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #25D366;opacity:.6;animation:fgn-waring 2.4s ease-out infinite}
.fgn-contact-fab.open .fgn-fab-toggle{background:var(--surface-2)}
.fgn-contact-fab.open .fgn-fab-toggle::before{display:none}
.fgn-fab-toggle svg{position:absolute;width:24px;height:24px;transition:opacity .2s ease,transform .25s ease}
.fgn-fab-toggle .ic-x{opacity:0;transform:rotate(-45deg) scale(.6)}
.fgn-contact-fab.open .fgn-fab-toggle .ic-msg{opacity:0;transform:rotate(45deg) scale(.6)}
.fgn-contact-fab.open .fgn-fab-toggle .ic-x{opacity:1;transform:rotate(0) scale(1)}
@keyframes fgn-waring{0%{transform:scale(1);opacity:.5}100%{transform:scale(1.35);opacity:0}}
@media (prefers-reduced-motion:reduce){.fgn-fab-toggle::before{animation:none}}

.fgn-fab-menu{position:absolute;right:4px;bottom:70px;display:flex;flex-direction:column;align-items:flex-end;gap:12px;
  opacity:0;visibility:hidden;transition:opacity .2s ease,visibility 0s linear .2s}
.fgn-contact-fab.open .fgn-fab-menu{opacity:1;visibility:visible;transition:opacity .2s ease}
.fgn-fab-item{display:inline-flex;align-items:center;gap:10px;padding-right:16px;height:46px;border-radius:var(--r-pill);
  text-decoration:none;font-weight:650;font-size:13.5px;box-shadow:0 6px 18px -6px rgba(0,0,0,.5);
  transform:translateY(10px) scale(.92);opacity:0;transition:transform .22s ease,opacity .22s ease}
.fgn-contact-fab.open .fgn-fab-item{transform:translateY(0) scale(1);opacity:1}
.fgn-contact-fab.open .fgn-fab-item.fgn-fab-wa{transition-delay:.09s}
.fgn-contact-fab.open .fgn-fab-item.fgn-fab-tg{transition-delay:.05s}
.fgn-contact-fab.open .fgn-fab-item.fgn-fab-snap{transition-delay:0s}
.fgn-fab-item .ic{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:0 0 auto;background:rgba(0,0,0,.12)}
.fgn-fab-wa{background:#25D366;color:#fff}
.fgn-fab-wa .ic .fgn-wa-glyph{font-size:21px;color:#fff}
.fgn-fab-tg{background:#229ED9;color:#fff}
.fgn-fab-tg .ic .fgn-tg-glyph{width:21px;height:21px;color:#fff}
.fgn-fab-snap{background:var(--accent-yellow);color:var(--accent-yellow-ink)}
.fgn-fab-snap .ic{background:rgba(0,0,0,.08)}
.fgn-fab-snap .ic .fgn-snap-glyph{font-size:21px;color:var(--accent-yellow-ink)}
.fgn-snap-glyph{width:1em;height:1em;flex:0 0 auto}

/* ===================================================================
   COMPLIANCE STRIP (footer band, injected via wp_footer before Kadence footer OR as a template part)
   =================================================================== */
.fgn-compliance{background:var(--dark-band);color:#fff}
.fgn-compliance .fgn-wrap{display:flex;gap:20px;align-items:center;padding:26px 24px;max-width:var(--maxw);margin:0 auto;flex-wrap:wrap}
.fgn-compliance .badge18{width:52px;height:52px;border-radius:50%;border:2px solid var(--accent-bright);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-weight:700;font-size:15px;color:#fff;flex:0 0 auto}
.fgn-compliance .ctxt{font-size:13px;color:rgba(255,255,255,.72);line-height:1.5;max-width:70ch}
.fgn-compliance .ctxt b{color:#fff}
.fgn-compliance .ctxt a{color:var(--accent-bright)}

/* ===================================================================
   PRODUCT PAGE ADDITIONS (hooked into WooCommerce single-product via functions.php)
   =================================================================== */
.fgn-dispatch-mini{margin-top:18px;background:color-mix(in srgb,var(--accent) 6%,var(--surface));border:none;border-radius:var(--r-md);padding:12px 16px;display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--ink-soft);box-shadow:var(--shadow)}
.fgn-dispatch-mini .pulse{width:7px;height:7px;border-radius:50%;background:var(--accent-bright);flex:0 0 auto}
.fgn-dispatch-mini .clock{margin-left:auto;font-family:var(--mono);font-weight:600;color:var(--accent)}
.fgn-trustmini{display:flex;gap:18px;margin-top:22px;padding-top:20px;border-top:1px solid var(--line);flex-wrap:wrap}
.fgn-tmini{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-soft)}
.fgn-tmini svg{width:17px;height:17px;color:var(--accent);flex:0 0 auto}

.fgn-specbox{clear:both;margin-top:36px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow)}
.fgn-specbox .sbhead{display:flex;align-items:center;gap:10px;padding:18px 22px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.fgn-specbox .sbhead svg{width:18px;height:18px;color:var(--accent)}
.fgn-specbox .sbhead b{font-size:14.5px}
.fgn-specgrid{display:grid;grid-template-columns:1fr 1fr}
.fgn-specgrid .sg{padding:18px 22px;border-bottom:1px solid var(--line)}
.fgn-specgrid .sg:nth-last-child(-n+2){border-bottom:none}
.fgn-specgrid .sg .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:5px}
.fgn-specgrid .sg .v{font-weight:650;font-size:15px}
.fgn-specgrid .sg .v.mono{font-family:var(--mono)}
@media (max-width:640px){.fgn-specgrid{grid-template-columns:1fr}.fgn-specgrid .sg:nth-last-child(-n+2){border-bottom:1px solid var(--line)}.fgn-specgrid .sg:last-child{border-bottom:none}}

.fgn-certblock{margin-top:20px;background:var(--dark-band);border-radius:var(--r-md);padding:26px 24px;color:#fff}
.fgn-certblock .chead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.fgn-certblock .chead p{font-size:13px;color:rgba(255,255,255,.62);max-width:38ch}
.fgn-certrow{display:flex;gap:12px;flex-wrap:wrap}
.fgn-certpill{display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:var(--r-pill);padding:10px 16px;font-size:12.5px;color:#fff}
.fgn-certpill svg{width:18px;height:18px;color:var(--accent-bright);flex:0 0 auto}
.fgn-certpill a{font-family:var(--mono);font-size:11px;color:var(--accent-bright);margin-left:4px;white-space:nowrap;text-decoration:none}
.fgn-certpill a:hover{text-decoration:underline}
.fgn-certnote{font-family:var(--mono);font-size:11px;color:rgba(255,255,255,.4);margin-top:14px}

/* per-charge unit price shown under the headline price (CRO motif) */
.fgn-percharge{margin:6px 0 2px;font-size:13px;color:var(--ink-soft);display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.fgn-percharge .woocommerce-Price-amount{font-weight:700;color:var(--accent)}
.fgn-percharge span{font-family:var(--sans);font-size:12px;color:var(--ink-faint)}
/* PDP WhatsApp enquiry / bulk-quote CTA (below add-to-cart) */
.fgn-pdp-wa{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:14px;padding:13px 18px;border-radius:var(--r-pill);border:1px solid color-mix(in srgb,#25D366 45%,var(--line));background:color-mix(in srgb,#25D366 8%,var(--surface));color:#0b6b3a;font-weight:650;font-size:14.5px;text-decoration:none;transition:background .15s,color .15s,border-color .15s}
.fgn-pdp-wa svg{width:20px;height:20px;flex:none}
.fgn-pdp-wa:hover{background:#25D366;border-color:#25D366;color:#fff}

/* product gallery — added video-demo tile appended after WooCommerce thumbnails */
.fgn-demo-thumb{position:relative;cursor:pointer}
.fgn-demo-thumb .playtag{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(9,15,17,.42);border-radius:var(--r-sm)}
.fgn-demo-thumb .playtag svg{width:22px;height:22px;color:#fff}
.fgn-demo-modal{position:fixed;inset:0;z-index:80;background:rgba(9,15,17,.72);display:none;align-items:center;justify-content:center;padding:24px}
.fgn-demo-modal.open{display:flex}
.fgn-demo-modal .box{background:var(--surface);border-radius:var(--r-md);max-width:560px;width:100%;padding:32px 28px;text-align:center;position:relative}
.fgn-demo-modal .close{position:absolute;top:14px;right:14px;background:none;border:none;cursor:pointer;color:var(--ink-faint);font-size:20px}
.fgn-demo-modal .play{width:60px;height:60px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.fgn-demo-modal .play svg{width:22px;height:22px}
.fgn-demo-modal p{color:var(--ink-soft);font-size:14px;line-height:1.6}

/* ===================================================================
   WOOCOMMERCE BRIDGE — reskin default markup to match brand
   =================================================================== */
.woocommerce ul.products li.product,.woocommerce-page ul.products li.product{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 16px 18px;transition:transform .16s ease,box-shadow .16s ease}
.woocommerce ul.products li.product:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.woocommerce ul.products li.product .woocommerce-loop-product__title{font-family:var(--display);font-size:15.5px;font-weight:700;letter-spacing:-.01em}
.woocommerce ul.products li.product .price{font-family:var(--mono);font-weight:600;color:var(--ink)}
.woocommerce span.onsale{background:var(--cream);color:var(--cream-ink);font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.05em;border-radius:var(--r-pill);min-height:auto;min-width:auto;padding:4px 10px;line-height:1;font-weight:600}
.woocommerce div.product .woocommerce-tabs ul.tabs li{font-family:var(--sans);font-weight:650}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active{border-bottom:2px solid var(--accent)}
.woocommerce .star-rating span{color:var(--accent)}
.woocommerce a.button,.woocommerce button.button,.woocommerce #respond input#submit,.woocommerce input.button{background:var(--accent);color:#fff;border-radius:var(--r-pill);font-weight:650}
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover{background:var(--accent-bright);color:#fff}
.woocommerce div.product p.price,.woocommerce div.product span.price{font-family:var(--mono);font-size:28px;color:var(--ink)}
.woocommerce-checkout #payment ul.payment_methods{border-top:1px solid var(--line)}
/* Classic checkout payment-method list (v0.5.4) — WooCommerce's default
   <label> background (#EDF2F7-ish) and dark-slate text were never overridden
   because checkout previously ran on the Cart/Checkout block, not this classic
   template. Now that Interac e-Transfer/Skrill need it, bring it in line
   with the rest of the dark theme. */
.woocommerce-checkout #payment ul.payment_methods li{padding:14px 4px;border-bottom:1px solid var(--line)}
.woocommerce-checkout #payment ul.payment_methods li:last-of-type{border-bottom:none}
.woocommerce-checkout #payment ul.payment_methods li label{background:transparent !important;color:var(--ink) !important;font-weight:650;cursor:pointer}
.woocommerce-checkout #payment ul.payment_methods li input.input-radio{accent-color:var(--accent)}
.woocommerce-checkout #payment .payment_box{background:var(--surface-2) !important;color:var(--ink-soft);border-radius:var(--r-sm);margin-top:10px !important}
.woocommerce-checkout #payment .payment_box p{color:var(--ink-soft)}
.woocommerce-checkout #payment .payment_box a{color:var(--accent-bright)}
/* Default WooCommerce notice boxes (e.g. "Have a coupon?") — light-grey by
   default, unreadable context switch on navy. */
.woocommerce-info,.woocommerce-message,.woocommerce-noreviews,.woocommerce-error{
  background:var(--surface) !important;color:var(--ink) !important;border-top-color:var(--accent) !important;box-shadow:none !important}
.woocommerce-info a,.woocommerce-message a{color:var(--accent-bright) !important}
.woocommerce-error{border-top-color:var(--danger) !important}

/* ===================================================================
   LEGAL / COMPLIANCE PAGE (page-legal-compliance.php)
   =================================================================== */
.fgn-arthero{padding:52px 0 40px;border-bottom:1px solid var(--line)}
.fgn-arthero h1{font-size:clamp(30px,4.2vw,46px);max-width:24ch}
.fgn-arthero .lede{margin-top:18px;font-size:17.5px;color:var(--ink-soft);max-width:60ch;line-height:1.6}
.fgn-artmeta{display:flex;gap:18px;margin-top:22px;flex-wrap:wrap}
.fgn-artmeta span{font-family:var(--mono);font-size:12px;color:var(--ink-faint)}
.fgn-quickanswer{margin-top:28px;background:var(--dark-band);color:#fff;border-radius:var(--r-md);padding:22px 24px;max-width:70ch;display:flex;gap:16px}
.fgn-quickanswer svg{width:28px;height:28px;color:var(--accent-bright);flex:0 0 auto;margin-top:2px}
.fgn-quickanswer b{color:#fff}
.fgn-quickanswer p{color:rgba(255,255,255,.82);font-size:14.5px;line-height:1.6}
.fgn-artgrid{display:grid;grid-template-columns:220px 1fr;gap:56px;padding:56px 0;align-items:start;max-width:var(--maxw);margin:0 auto}
.fgn-toc{position:sticky;top:96px;display:flex;flex-direction:column;gap:2px}
.fgn-toc .lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:10px}
.fgn-toc a{font-size:13.5px;color:var(--ink-soft);padding:7px 0;border-left:2px solid transparent;padding-left:12px;text-decoration:none}
.fgn-toc a:hover{color:var(--accent);border-left-color:var(--accent)}
.fgn-article{max-width:74ch}
.fgn-article h2{font-size:clamp(22px,2.6vw,28px);margin-top:52px;margin-bottom:16px;scroll-margin-top:100px}
.fgn-article h2:first-child{margin-top:0}
.fgn-article p{color:var(--ink-soft);font-size:15.5px;line-height:1.75;margin-bottom:14px}
.fgn-article ul{color:var(--ink-soft);font-size:15.5px;line-height:1.75;padding-left:22px;margin-bottom:14px}
.fgn-callout{border-radius:var(--r-md);padding:18px 20px;margin:20px 0;display:flex;gap:14px;font-size:14px}
.fgn-callout svg{width:20px;height:20px;flex:0 0 auto;margin-top:1px}
.fgn-callout.info{background:color-mix(in srgb,var(--accent) 8%,var(--surface));border:1px solid color-mix(in srgb,var(--accent) 26%,var(--line));color:var(--ink-soft)}
.fgn-callout.info svg{color:var(--accent)}
.fgn-timeline{display:flex;flex-direction:column;gap:0;margin:24px 0}
.fgn-tl-item{display:grid;grid-template-columns:110px 24px 1fr;gap:0}
.fgn-tl-item .date{font-family:var(--mono);font-size:12.5px;color:var(--accent);font-weight:600;padding-top:2px}
.fgn-tl-item .rail{display:flex;flex-direction:column;align-items:center}
.fgn-tl-item .dot{width:11px;height:11px;border-radius:50%;background:var(--accent);border:2px solid var(--surface);box-shadow:0 0 0 2px var(--accent);margin-top:4px}
.fgn-tl-item .line{flex:1;width:2px;background:var(--line);margin-top:4px}
.fgn-tl-item:last-child .line{display:none}
.fgn-tl-body{padding:0 0 28px 16px}
.fgn-tl-body h3{margin-top:0;font-size:15.5px}
.fgn-tl-body p{font-size:14px;margin-bottom:0}
.fgn-lawtable{width:100%;border-collapse:collapse;font-size:14px;margin:20px 0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.fgn-lawtable th,.fgn-lawtable td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:top}
.fgn-lawtable th{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);background:var(--surface-2)}
.fgn-lawtable td.yes{color:var(--accent);font-weight:650}
.fgn-lawtable td.no{color:var(--danger);font-weight:650}
.fgn-redflag{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:20px 22px;margin:20px 0}
.fgn-redflag .rf-row{display:flex;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.fgn-redflag .rf-row:first-child{border-top:none;padding-top:0}
.fgn-redflag .rf-x{color:var(--danger)}
.fgn-redflag .rf-ok{color:var(--accent)}
.fgn-redflag .rf-row svg{width:17px;height:17px;flex:0 0 auto;margin-top:2px}
.fgn-redflag .rf-row span{font-size:14px;color:var(--ink-soft)}
.fgn-sources{margin-top:18px;padding:18px 20px;background:var(--surface-2);border-radius:var(--r-md);font-size:13px;color:var(--ink-faint)}
.fgn-artcta{margin-top:56px;background:var(--dark-band);border-radius:var(--r-lg);padding:40px 36px;color:#fff;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.fgn-artcta h3{color:#fff;font-size:22px;max-width:28ch}
.fgn-artcta p{color:rgba(255,255,255,.66);font-size:14px;margin-top:8px;max-width:40ch}
@media (max-width:900px){
  .fgn-artgrid{grid-template-columns:1fr;gap:20px;padding:0 24px 56px}
  .fgn-toc{position:static;flex-direction:row;flex-wrap:wrap;gap:10px}
  .fgn-toc a{border-left:none;padding:6px 10px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pill)}
}
@media (min-width:901px){.fgn-artgrid{padding:56px 24px}}

/* ===================================================================
   HOMEPAGE (front-page.php) — ported from the approved index.html prototype
   =================================================================== */
.fgn-btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);font-weight:650;font-size:14.5px;padding:13px 22px;border-radius:var(--r-pill);border:1px solid transparent;cursor:pointer;transition:transform .15s ease,background .15s ease;text-decoration:none}
.fgn-btn:focus-visible{outline:2px solid var(--accent-bright);outline-offset:2px}
.fgn-btn-primary{background:var(--accent);color:#fff}
.fgn-btn-primary:hover{background:var(--accent-bright);transform:translateY(-1px);color:#fff}
.fgn-btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.fgn-btn-ghost:hover{border-color:var(--ink);background:var(--surface);color:var(--ink)}

.fgn-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.fgn-hero::before{content:"";position:absolute;top:-30%;right:-8%;width:52%;height:150%;pointer-events:none;background:radial-gradient(closest-side, color-mix(in srgb,var(--accent) 20%,transparent), transparent 72%);filter:blur(30px);opacity:.55}
.fgn-hero .fgn-wrap{display:grid;grid-template-columns:1.08fr .92fr;gap:56px;padding:64px 24px 68px;align-items:stretch;max-width:var(--maxw);margin:0 auto}
.fgn-hero-copy{display:flex;flex-direction:column;justify-content:center}
.fgn-hero h1{font-size:clamp(38px,5.4vw,64px);letter-spacing:-.03em;font-family:var(--display);margin:0}
.fgn-hero h1 .g{color:var(--accent)}
.fgn-hero-sub{margin-top:20px;font-size:18px;line-height:1.55;color:var(--ink-soft);max-width:34ch}
.fgn-hero-cta{margin-top:30px;display:flex;gap:12px;flex-wrap:wrap}
.fgn-dispatch{margin-top:26px;background:color-mix(in srgb,var(--accent) 6%,var(--surface));border:none;border-radius:var(--r-md);padding:14px 18px;display:flex;align-items:center;gap:14px;box-shadow:var(--shadow);max-width:400px}
.fgn-dispatch .pulse{width:9px;height:9px;border-radius:50%;background:var(--accent-bright);position:relative;flex:0 0 auto}
.fgn-dispatch .pulse::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--accent-bright);opacity:.5;animation:fgn-ring 1.8s ease-out infinite}
@keyframes fgn-ring{0%{transform:scale(.6);opacity:.6}100%{transform:scale(1.5);opacity:0}}
.fgn-dispatch .txt{font-size:13px;color:var(--ink-soft);line-height:1.35}
.fgn-dispatch .txt b{color:var(--ink)}
.fgn-dispatch .clock{margin-left:auto;font-family:var(--mono);font-size:19px;font-weight:600;letter-spacing:.02em;color:var(--accent)}
.fgn-speccard{background:var(--surface);border:1px solid var(--line);border-radius:4px;box-shadow:var(--shadow-lift);overflow:hidden}
.fgn-speccard .top{background:linear-gradient(160deg,var(--surface-2),var(--surface));padding:30px 28px 22px;border-bottom:1px solid var(--line);position:relative}
.fgn-speccard .cyl{display:block;margin:0 auto;filter:drop-shadow(0 18px 26px rgba(0,0,0,.22))}
.fgn-speccard .stamp{position:absolute;top:18px;right:18px;width:78px;height:78px;transform:rotate(9deg)}
.fgn-speccard .rows{padding:8px 0}
.fgn-spec-row{display:flex;justify-content:space-between;align-items:center;padding:11px 24px;border-bottom:1px solid var(--line);font-size:13.5px}
.fgn-spec-row:last-child{border-bottom:none}
.fgn-spec-row .k{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}
.fgn-spec-row .v{font-weight:650}
.fgn-spec-row .v.pos{color:var(--accent)}
.fgn-chip{font-family:var(--mono);font-size:11px;padding:3px 9px;border-radius:999px;font-weight:600;display:inline-flex;align-items:center;gap:5px}
.fgn-chip.stock{background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent)}
.fgn-chip.stock::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent-bright)}

.fgn-trustband{background:var(--dark-band);color:#fff}
.fgn-trustband .fgn-wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;padding:0;max-width:var(--maxw);margin:0 auto}
.fgn-trust-cell{padding:22px 24px;display:flex;gap:13px;align-items:center;position:relative}
.fgn-trust-cell + .fgn-trust-cell::before{content:"";position:absolute;left:0;top:20%;bottom:20%;width:1px;background:rgba(255,255,255,.12)}
.fgn-trust-cell svg{width:26px;height:26px;flex:0 0 auto;color:var(--accent-bright)}
.fgn-trust-cell b{display:block;font-size:14px;font-weight:650;color:#fff}
.fgn-trust-cell span{font-size:12px;color:rgba(255,255,255,.62);font-family:var(--mono);letter-spacing:.02em}

.fgn-blk{padding:76px 0}
.fgn-blk .fgn-wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.fgn-sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:38px}
.fgn-sec-head h2{font-size:clamp(26px,3.2vw,36px);font-family:var(--display);margin:0}
.fgn-sec-head .fgn-eyebrow{display:block;margin-bottom:12px}
.fgn-sec-head p{color:var(--ink-soft);font-size:15px;max-width:44ch;margin-top:8px}
.fgn-sec-link{font-family:var(--mono);font-size:12.5px;color:var(--accent);font-weight:600;letter-spacing:.03em;white-space:nowrap;text-decoration:none}

.fgn-steps{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:stretch;gap:0}
.fgn-step{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:30px 28px;display:flex;flex-direction:column;gap:11px;position:relative;transition:transform .18s ease,box-shadow .18s ease}
.fgn-step:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.fgn-step-ic{width:52px;height:52px;border-radius:13px;background:color-mix(in srgb,var(--accent) 12%,var(--surface));color:var(--accent);display:flex;align-items:center;justify-content:center;margin-bottom:4px}
.fgn-step-ic svg{width:26px;height:26px}
.fgn-step-no{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:600}
.fgn-step h3{font-size:19px;font-family:var(--display);margin:0}
.fgn-step p{font-size:14px;color:var(--ink-soft);line-height:1.55;margin:0}
.fgn-step-line{align-self:center;width:100%;min-width:26px;height:2px;position:relative;background:repeating-linear-gradient(90deg,var(--line-strong) 0 6px,transparent 6px 12px)}
.fgn-step-line::after{content:"";position:absolute;right:-4px;top:50%;transform:translateY(-50%);border-left:7px solid var(--accent);border-top:5px solid transparent;border-bottom:5px solid transparent}
.fgn-howit-cta{margin-top:40px;display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap}

.fgn-shopgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.fgn-gcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.fgn-gcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);border-color:var(--line-strong)}
.fgn-gcard-imgwrap{display:block;aspect-ratio:1/1;background:#000;overflow:hidden}
.fgn-gcard-imgwrap img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease}
.fgn-gcard:hover .fgn-gcard-imgwrap img{transform:scale(1.04)}
.fgn-gcard-body{padding:14px 14px 16px;display:flex;flex-direction:column;gap:8px;flex:1}
.fgn-gcard-title{font-size:13.5px;font-weight:650;line-height:1.35;color:var(--ink);text-decoration:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em}
.fgn-gcard-title:hover{color:var(--accent-yellow)}
.fgn-gcard-price{font-family:var(--mono);font-size:13px;color:var(--ink-soft);font-weight:600}
.fgn-gcard-price ins{text-decoration:none;color:var(--accent-yellow)}
.fgn-gcard-add{margin-top:auto;width:100%;padding:11px 14px;border-radius:var(--r-pill);border:none;background:var(--accent-yellow);color:var(--accent-yellow-ink);font-weight:750;font-size:13px;cursor:pointer;transition:background .15s,opacity .15s}
.fgn-gcard-add:hover{background:#fff}
.fgn-gcard-add.is-loading{opacity:.7;cursor:default}
.fgn-gcard-add.is-added{background:var(--accent-bright);color:#04140E}
.fgn-gcard-add.is-error{background:var(--danger,#E0705F);color:#fff}
@media (min-width:640px){.fgn-shopgrid{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1000px){.fgn-shopgrid{grid-template-columns:repeat(4,1fr);gap:18px}.fgn-gcard-body{padding:16px 16px 18px}.fgn-gcard-title{font-size:14.5px}}

.fgn-brands{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.fgn-brands .fgn-wrap{display:flex;align-items:center;gap:14px 40px;padding:26px 24px;flex-wrap:wrap;justify-content:center;max-width:var(--maxw);margin:0 auto}
.fgn-brands .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.fgn-brands .bname{font-weight:800;font-size:18px;letter-spacing:-.02em;color:var(--ink-soft);opacity:.75;transition:opacity .15s,color .15s;text-decoration:none}
.fgn-brands .bname:hover{opacity:1;color:var(--ink)}

.fgn-why{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.fgn-why .fgn-wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding:74px 24px;max-width:var(--maxw);margin:0 auto}
.fgn-why h2{font-size:clamp(26px,3.4vw,40px);margin-bottom:18px;font-family:var(--display)}
.fgn-why p.lead{color:var(--ink-soft);font-size:16px;margin-bottom:26px;max-width:46ch}
.fgn-why-item{display:flex;gap:16px;padding:16px 0;border-top:1px solid var(--line)}
.fgn-why-item .num{font-family:var(--mono);font-size:12px;color:var(--accent);font-weight:600;padding-top:3px}
.fgn-why-item h3{font-size:16px;margin-bottom:4px;font-family:var(--display)}
.fgn-why-item p{font-size:14px;color:var(--ink-soft);margin:0}
.fgn-purity-viz{background:var(--dark-band);border-radius:var(--r-lg);padding:38px 34px;color:#fff;position:relative;overflow:hidden;box-shadow:var(--shadow-lift)}
.fgn-purity-viz .fgn-eyebrow{color:var(--accent-bright)}
.fgn-purity-big{font-family:var(--mono);font-size:clamp(56px,9vw,92px);font-weight:600;letter-spacing:-.04em;line-height:1;color:#fff;margin:14px 0 6px}
.fgn-purity-big small{font-size:.32em;color:var(--accent-bright);vertical-align:super;letter-spacing:0}
.fgn-purity-viz .sub{color:rgba(255,255,255,.66);font-size:14px;margin-bottom:26px}
.fgn-gauge{height:8px;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden;margin-bottom:8px}
.fgn-gauge i{display:block;height:100%;width:99.9%;background:linear-gradient(90deg,var(--accent),var(--accent-bright))}
.fgn-gauge-lbl{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;color:rgba(255,255,255,.5)}
.fgn-cert-mini{display:flex;gap:10px;margin-top:26px;flex-wrap:wrap}
.fgn-cert-mini span{font-family:var(--mono);font-size:11px;letter-spacing:.06em;border:1px solid rgba(255,255,255,.2);padding:6px 12px;border-radius:var(--r-pill);color:rgba(255,255,255,.82)}

.fgn-bulk .fgn-wrap{background:var(--cream);border-radius:var(--r-lg);padding:44px 44px;display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center;color:var(--cream-ink);max-width:var(--maxw);margin:0 auto}
@media (prefers-color-scheme:dark){.fgn-bulk .fgn-wrap{background:var(--surface-2);color:var(--ink)}}
:root[data-theme="dark"] .fgn-bulk .fgn-wrap{background:var(--surface-2);color:var(--ink)}
:root[data-theme="light"] .fgn-bulk .fgn-wrap{background:var(--cream);color:var(--cream-ink)}
.fgn-bulk h2{font-size:clamp(24px,3vw,34px);color:inherit;margin-bottom:12px;font-family:var(--display)}
.fgn-bulk p{font-size:15px;opacity:.86;margin-bottom:22px;max-width:42ch}
.fgn-bulk .fgn-btn-primary{background:var(--ink);color:var(--ground)}
.fgn-bulk .fgn-btn-primary:hover{background:var(--accent);color:#fff}

/* Audit M15 — the discount tiers were a div grid pretending to be a table, so
   the quantity/discount pairing existed only visually. Now a real <table>: the
   header cells are programmatically associated with their rows, which is what
   AI Overviews' comparison-table surfaces and screen readers both read.
   Native table display is kept deliberately — putting `display:grid` on <tr>
   strips the implicit table roles again and undoes the whole point. */
.fgn-tiertable{width:100%;background:var(--surface);border-radius:var(--r-md);border:none;overflow:hidden;box-shadow:var(--shadow);border-collapse:collapse;font-size:13px}
.fgn-tiertable caption{caption-side:top;text-align:left;padding:0 0 12px;font-size:13px;color:var(--ink-soft);max-width:60ch}
.fgn-tiertable th,.fgn-tiertable td{padding:12px 18px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
.fgn-tiertable tr:last-child th,.fgn-tiertable tr:last-child td{border-bottom:none}
.fgn-tiertable thead th{background:var(--surface-2);font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);font-weight:600}
/* Kadence styles bare `th` at #2D3748 (the same dark slate that broke the M11
   WhatsApp glyph). As <span class="qty"> these cells inherited --ink for free;
   as real <th> they do not, so the colour has to be stated or the quantity
   column renders near-invisible on the navy panel. */
.fgn-tiertable tbody th{font-weight:650;color:var(--ink)}
.fgn-tiertable thead th:last-child,.fgn-tiertable tbody td{text-align:right}
.fgn-tiertable tbody td{font-family:var(--mono);color:var(--accent);font-weight:600}
/* On the homepage the table sits in the cream block, and `caption-side:top`
   puts the caption ABOVE the dark panel — i.e. on the cream, not on the navy.
   The blanket `.fgn-bulk .fgn-tiertable *{color:var(--ink)!important}` above
   would paint it near-white on cream, so it is restated per colour scheme.
   `inherit` is not usable here: the caption's parent is the table, which that
   same rule has already forced to the light ink. */
.fgn-bulk .fgn-tiertable caption{color:var(--cream-ink) !important}
@media (prefers-color-scheme:dark){.fgn-bulk .fgn-tiertable caption{color:var(--ink) !important}}
:root[data-theme="dark"] .fgn-bulk .fgn-tiertable caption{color:var(--ink) !important}
:root[data-theme="light"] .fgn-bulk .fgn-tiertable caption{color:var(--cream-ink) !important}

.fgn-social-placeholder{background:var(--surface);border:1px dashed var(--line-strong);border-radius:var(--r-md);padding:32px;text-align:center;color:var(--ink-soft)}
.fgn-social-placeholder p{font-size:14px;max-width:48ch;margin:0 auto}

.fgn-faq{display:grid;grid-template-columns:1fr 1fr;gap:14px 40px}
.fgn-faq details{border-bottom:1px solid var(--line);padding:4px 0}
.fgn-faq details summary{list-style:none;cursor:pointer;padding:16px 0;font-weight:650;font-size:15.5px;display:flex;justify-content:space-between;gap:16px;align-items:center}
.fgn-faq details summary::-webkit-details-marker{display:none}
.fgn-faq details summary .pm{font-family:var(--mono);color:var(--accent);font-size:18px;transition:transform .2s}
.fgn-faq details[open] summary .pm{transform:rotate(45deg)}
.fgn-faq details p{padding:0 0 18px;color:var(--ink-soft);font-size:14px;max-width:60ch;margin:0}

/* Reveal-on-scroll is gated behind html.fgn-js (added by JS only once an
   IntersectionObserver is confirmed) so content is NEVER permanently hidden
   if JS fails, is slow, or on a non-scrolling capture. JS also runs a failsafe
   that reveals everything after a short delay. */
html.fgn-js [data-fgn-reveal]{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
html.fgn-js [data-fgn-reveal].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html.fgn-js [data-fgn-reveal]{opacity:1;transform:none;transition:none}}

@media (max-width:1000px){
  .fgn-hero .fgn-wrap{grid-template-columns:1fr;gap:40px;padding-top:48px}
  .fgn-why .fgn-wrap,.fgn-bulk .fgn-wrap{grid-template-columns:1fr;gap:34px}
  .fgn-trustband .fgn-wrap{grid-template-columns:repeat(2,1fr)}
  .fgn-faq{grid-template-columns:1fr}
  .fgn-steps{grid-template-columns:1fr}
  .fgn-step-line{display:none}
}
@media (max-width:640px){
  .fgn-trustband .fgn-wrap{grid-template-columns:1fr}
  .fgn-trust-cell + .fgn-trust-cell::before{display:none}
  .fgn-sec-head{flex-direction:column;align-items:flex-start}
  .fgn-blk{padding:56px 0}
  .fgn-bulk .fgn-wrap,.fgn-why .fgn-wrap{padding:32px 22px}
}

/* ===================================================================
   SHOP ARCHIVE (archive-product.php + woocommerce/content-product.php)
   =================================================================== */
.fgn-shophero{padding:44px 0 32px;border-bottom:1px solid var(--line)}
.fgn-shophero .fgn-wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.fgn-shophero h1{font-size:clamp(28px,3.6vw,42px);font-family:var(--display);margin:0}
.fgn-shophero p{margin-top:12px;color:var(--ink-soft);font-size:15.5px;max-width:60ch}

.fgn-filterbar{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--ground) 92%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);padding:16px 0}
.fgn-filterbar .fgn-wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.fgn-filterrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:space-between}
.fgn-chips{display:flex;gap:8px;flex-wrap:wrap}
.fgn-chip-f{font-family:var(--mono);font-size:12.5px;padding:8px 14px;border-radius:999px;border:1px solid var(--line-strong);color:var(--ink-soft);cursor:pointer;background:var(--surface);transition:all .15s}
.fgn-chip-f:hover{border-color:var(--accent)}
.fgn-chip-f.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.fgn-filterright{display:flex;gap:10px;align-items:center}
.fgn-selectlike{position:relative}
.fgn-sortsel{font-family:var(--mono);font-size:12.5px;padding:9px 32px 9px 14px;border-radius:999px;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);cursor:pointer;appearance:none}
.fgn-resultcount{font-family:var(--mono);font-size:12px;color:var(--ink-faint)}

.fgn-shoparchive{padding:36px 0 20px}
.fgn-shoparchive .fgn-wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
ul.fgn-grid-p{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
/* Premium product card — navy surface, product-dominant media, yellow brand
   accent, one clear primary CTA + WhatsApp. FastGas energy, Apple restraint. */
li.fgn-pcard{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;margin:0}
li.fgn-pcard:hover{transform:translateY(-5px);box-shadow:var(--shadow-lift);border-color:color-mix(in srgb,var(--accent-yellow) 42%,var(--line))}
.fgn-pcard-link{display:flex;flex-direction:column;flex:1;text-decoration:none;color:inherit}
/* Product media — whole cylinder on a deep tile that matches the black-shot
   photos, so mixed source images read as one uniform premium grid. */
.fgn-pmedia{position:relative;aspect-ratio:4/5;background:radial-gradient(130% 96% at 50% 28%,#12222f,#050d15);display:flex;align-items:center;justify-content:center;overflow:hidden;padding:16px}
.fgn-pmedia img{width:100%;height:100%;object-fit:contain;transition:transform .35s ease}
li.fgn-pcard:hover .fgn-pmedia img{transform:scale(1.045)}
.fgn-tag{position:absolute;top:12px;left:12px;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.05em;padding:4px 9px;border-radius:999px;background:var(--accent-yellow);color:var(--accent-yellow-ink);text-transform:uppercase;z-index:2}
.fgn-pbody{padding:16px 17px 12px;display:flex;flex-direction:column;gap:7px;flex:1}
.fgn-pbrand{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-yellow)}
.fgn-pname{font-size:15.5px;font-weight:700;letter-spacing:-.01em;line-height:1.3;font-family:var(--display);color:var(--ink)}
.fgn-pspecs{display:flex;gap:8px;flex-wrap:wrap;margin-top:1px}
.fgn-mini-chip{font-family:var(--mono);font-size:10.5px;padding:3px 9px;border-radius:999px;border:1px solid var(--line);color:var(--ink-soft)}
.fgn-mini-chip.stock{color:var(--accent-bright);border-color:color-mix(in srgb,var(--accent-bright) 40%,var(--line))}
.fgn-mini-chip.low{color:var(--amber);border-color:color-mix(in srgb,var(--amber) 40%,var(--line))}
.fgn-pfoot{margin-top:auto;padding-top:12px}
.fgn-price{font-family:var(--mono);font-weight:650;color:var(--ink);font-size:17px}
.fgn-price del{opacity:.5;font-size:13px;margin-right:6px}
.fgn-price ins{text-decoration:none;color:var(--accent-bright)}
/* Card actions — primary "View product" pill + WhatsApp icon button */
.fgn-pcard-actions{padding:0 17px 17px;display:grid;grid-template-columns:1fr 44px;gap:8px}
.fgn-card-view{display:flex;align-items:center;justify-content:center;gap:6px;padding:11px 14px;border-radius:999px;background:var(--accent-yellow);color:var(--accent-yellow-ink);font-family:var(--sans);font-weight:750;font-size:13.5px;text-decoration:none;transition:background .15s ease,transform .15s ease}
.fgn-card-view svg{width:15px;height:15px}
.fgn-card-view:hover{background:#fff}
.fgn-card-wa{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:999px;border:1px solid color-mix(in srgb,#25D366 55%,var(--line));background:color-mix(in srgb,#25D366 12%,transparent);color:#25D366;text-decoration:none;transition:background .15s,color .15s}
.fgn-card-wa svg{width:19px;height:19px;flex:none}
.fgn-card-wa span{display:none}
.fgn-card-wa:hover{background:#25D366;color:#fff}
/* Audit M11 — the glyph was rendering dark slate (#2D3748) on the dark green
   tile, not WhatsApp green. Cause: WooCommerce ships `.woocommerce li.product a
   {color:inherit}` at specificity (0,1,2), which outranks `.fgn-card-wa` (0,1,0);
   the SVG paints with `fill:currentColor`, so it inherited the card's body
   colour. These selectors reach (0,2,2) so the brand colour wins, and the fill is
   pinned rather than left to resolve through currentColor. */
.woocommerce li.product a.fgn-card-wa,
.woocommerce ul.products li.product a.fgn-card-wa{color:#25D366}
.woocommerce li.product a.fgn-card-wa:hover,
.woocommerce ul.products li.product a.fgn-card-wa:hover{color:#fff}
.fgn-card-wa svg{fill:currentColor}

.fgn-emptystate{display:none;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:70px 24px;color:var(--ink-soft)}
.fgn-emptystate.show{display:flex}
.fgn-emptystate svg{width:44px;height:44px;color:var(--ink-faint)}
.fgn-emptystate h3{font-size:18px;color:var(--ink);font-family:var(--display);margin:0}
.fgn-emptystate p{font-size:14px;max-width:40ch;margin:0}

.fgn-shoptrust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surface)}
.fgn-shoptrust .fgn-wrap{display:flex;gap:32px;padding:20px 24px;flex-wrap:wrap;justify-content:center;max-width:var(--maxw);margin:0 auto}
.fgn-stmini{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink-soft)}
.fgn-stmini svg{width:18px;height:18px;color:var(--accent)}

@media (max-width:1000px){
  ul.fgn-grid-p{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  ul.fgn-grid-p{grid-template-columns:1fr 1fr;gap:12px}
  .fgn-filterrow{flex-direction:column;align-items:flex-start}
}

/* ===================================================================
   HELP CENTRE (page-help-centre.php) — ported from help.html prototype
   =================================================================== */
.fgn-hh{padding:56px 0 40px;text-align:center;position:relative}
.fgn-hh .fgn-wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.fgn-hh h1{font-size:clamp(32px,5vw,52px);letter-spacing:-.03em;font-family:var(--display);margin:0}
.fgn-hh .fgn-eyebrow{display:block;margin-bottom:16px}
.fgn-hh p.sub{color:var(--ink-soft);font-size:17px;margin:16px auto 0;max-width:52ch}
.fgn-searchwrap{max-width:640px;margin:30px auto 0;position:relative}
.fgn-searchwrap svg{position:absolute;left:18px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:var(--ink-faint)}
#fgn-q{width:100%;font-family:var(--sans);font-size:16px;padding:16px 18px 16px 50px;border-radius:999px;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
#fgn-q:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 16%,transparent)}
.fgn-hcchips{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:18px}
.fgn-hcchips b{font-family:var(--mono);font-size:11px;color:var(--ink-faint);letter-spacing:.08em;text-transform:uppercase;align-self:center;margin-right:2px}
.fgn-chip-q{font-size:13px;padding:7px 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);cursor:pointer;transition:all .15s}
.fgn-chip-q:hover{border-color:var(--accent);color:var(--accent)}
#fgn-searchmeta{font-family:var(--mono);font-size:12.5px;color:var(--ink-faint);margin-top:18px;min-height:18px}

.fgn-hc{display:grid;grid-template-columns:230px 1fr;gap:44px;padding:20px 24px 40px;align-items:start;max-width:1120px;margin:0 auto}
.fgn-catnav{position:sticky;top:88px;display:flex;flex-direction:column;gap:2px}
.fgn-catnav a{font-size:14px;color:var(--ink-soft);padding:9px 12px;border-radius:var(--r-sm);border-left:2px solid transparent;transition:all .15s;text-decoration:none}
.fgn-catnav a:hover{background:var(--surface);color:var(--ink)}
.fgn-catnav a.on{color:var(--accent);border-left-color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,transparent);font-weight:600}
.fgn-catnav .navlbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);padding:0 12px 8px;margin-top:8px}

.fgn-cat{margin-bottom:44px;scroll-margin-top:96px}
.fgn-cat-h{display:flex;align-items:center;gap:13px;margin-bottom:6px}
.fgn-cat-h .ci{width:40px;height:40px;border-radius:10px;background:color-mix(in srgb,var(--accent) 12%,var(--surface));color:var(--accent);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.fgn-cat-h .ci svg{width:22px;height:22px}
.fgn-cat-h h2{font-size:23px;font-family:var(--display);margin:0}
.fgn-cat .cd{color:var(--ink-soft);font-size:14px;margin:2px 0 16px 53px}
details.fgn-qa{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);margin-bottom:10px;overflow:hidden;transition:border-color .15s}
details.fgn-qa[open]{border-color:var(--line-strong);box-shadow:var(--shadow)}
details.fgn-qa summary{list-style:none;cursor:pointer;padding:17px 20px;font-weight:650;font-size:15.5px;display:flex;justify-content:space-between;gap:16px;align-items:center}
details.fgn-qa summary::-webkit-details-marker{display:none}
details.fgn-qa summary:hover{color:var(--accent)}
details.fgn-qa .pm{font-family:var(--mono);color:var(--accent);font-size:20px;transition:transform .2s;flex:0 0 auto}
details.fgn-qa[open] .pm{transform:rotate(45deg)}
details.fgn-qa .ans{padding:0 20px 20px;color:var(--ink-soft);font-size:14.5px;line-height:1.65}
details.fgn-qa .ans p+p{margin-top:10px}
details.fgn-qa .ans strong{color:var(--ink);font-weight:650}
details.fgn-qa .ans ul{margin:10px 0 0;padding-left:18px}
details.fgn-qa .ans li{margin-bottom:5px}
details.fgn-qa .ans a.inline{color:var(--accent);font-weight:600;border-bottom:1px solid color-mix(in srgb,var(--accent) 40%,transparent);text-decoration:none}
.fgn-tagrow{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.fgn-tagrow span{font-family:var(--mono);font-size:10.5px;color:var(--ink-faint);border:1px solid var(--line);border-radius:999px;padding:3px 9px}
.fgn-nores{display:none;text-align:center;padding:50px 20px;color:var(--ink-faint)}
.fgn-nores.show{display:block}

.fgn-deflect{margin:10px 24px 60px;background:var(--dark-band);color:#fff;border-radius:var(--r-lg);padding:40px 36px;text-align:center;max-width:1120px;margin-left:auto;margin-right:auto}
.fgn-deflect h2{font-size:27px;color:#fff;margin-bottom:10px;font-family:var(--display)}
.fgn-deflect p{color:rgba(255,255,255,.7);font-size:15px;max-width:52ch;margin:0 auto 24px}
.fgn-deflect .row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.fgn-deflect .fgn-btn-ghost{color:#fff;border-color:rgba(255,255,255,.3)}
.fgn-deflect .fgn-btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08);color:#fff}
.fgn-deflect .fineprint{font-family:var(--mono);font-size:11.5px;color:rgba(255,255,255,.5);margin-top:18px}

@media (max-width:860px){
  .fgn-hc{grid-template-columns:1fr}
  .fgn-catnav{position:static;flex-direction:row;flex-wrap:wrap;gap:6px;margin-bottom:20px;overflow-x:auto}
  .fgn-catnav .navlbl{display:none}
  .fgn-catnav a{border-left:none;border:1px solid var(--line)}
}

/* ===================================================================
   CONTACT / TRADE FORMS (page-contact.php, page-bulk-trade.php)
   =================================================================== */
.fgn-contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:start;max-width:var(--maxw);margin:0 auto;padding:0 24px}
.fgn-contact-info{position:sticky;top:96px}
.fgn-nap-block{margin-top:6px;font-size:14.5px;color:var(--ink-soft);line-height:1.7}
.fgn-nap-block p{margin:0}
.fgn-nap-block a{color:var(--accent)}
.fgn-contact-form-wrap{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:28px;box-shadow:var(--shadow)}
.fgn-form{display:flex;flex-direction:column;gap:16px}
.fgn-field{display:flex;flex-direction:column;gap:6px;font-size:13.5px;font-weight:650;color:var(--ink)}
.fgn-field input,.fgn-field textarea,.fgn-field select{font-family:var(--sans);font-size:14.5px;font-weight:400;padding:12px 14px;border-radius:var(--r-sm);border:1px solid var(--line-strong);background:var(--surface);color:var(--ink)}
.fgn-field input:focus,.fgn-field textarea:focus,.fgn-field select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)}
.fgn-field textarea{resize:vertical;font-family:var(--sans)}
.fgn-notice{padding:14px 16px;border-radius:var(--r-sm);font-size:14px;margin-bottom:18px}
.fgn-notice.success{background:color-mix(in srgb,var(--accent) 12%,var(--surface));border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));color:var(--ink)}
.fgn-notice.error{background:color-mix(in srgb,var(--danger) 10%,var(--surface));border:1px solid color-mix(in srgb,var(--danger) 30%,var(--line));color:var(--ink)}
@media (max-width:860px){
  .fgn-contact-grid{grid-template-columns:1fr;gap:32px}
  .fgn-contact-info{position:static}
}

/* ===================================================================
   WOOCOMMERCE BRIDGE — cart, checkout, my-account (extends earlier bridge)
   =================================================================== */
.woocommerce-cart table.shop_table,.woocommerce-checkout table.shop_table{border:1px solid var(--line);border-radius:var(--r-md);border-collapse:separate;border-spacing:0;overflow:hidden;background:var(--surface)}
.woocommerce table.shop_table th{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);background:var(--surface-2);border-bottom:1px solid var(--line)}
.woocommerce table.shop_table td{border-top:1px solid var(--line)}
.woocommerce-cart .cart-collaterals .cart_totals,.woocommerce-checkout #order_review{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:20px}
.woocommerce-cart .cart_totals h2,.woocommerce-checkout #order_review h3{font-family:var(--display)}
.woocommerce form .form-row input.input-text,.woocommerce form .form-row select,.woocommerce form .form-row textarea{border-radius:var(--r-sm);border:1px solid var(--line-strong);font-family:var(--sans)}
.woocommerce #payment div.payment_box{background:var(--surface-2);border-radius:var(--r-sm)}
.woocommerce-MyAccount-navigation ul{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--surface)}
.woocommerce-MyAccount-navigation li{border-bottom:1px solid var(--line)}
.woocommerce-MyAccount-navigation li:last-child{border-bottom:none}
.woocommerce-MyAccount-navigation li a{padding:12px 16px;display:block;font-weight:600;font-size:14px}
.woocommerce-MyAccount-navigation li.is-active a{color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent)}

/* -------------------------------------------------------------------
   CLASSIC CART/CHECKOUT CONTRAST (v0.6.2)
   The Cart page was migrated off the WooCommerce Cart *block* onto the
   classic [woocommerce_cart] shortcode (to match the already-classic
   checkout and drop ~2.7MB of React/Blocks JS). That swap exposed
   WooCommerce's stock light-theme colours, which had only ever been
   overridden for the block markup. Measured before this block:
     "FREE delivery" + shipping address .... 1.24:1  (invisible)
     cart product-name link ................ 1.97:1
     checkout "$" currency symbol .......... 1.13:1  (white on white)
     province <select2> text ............... 2.22:1
   All are text-on-dark-surface, so force the theme's own ink tokens.
   ------------------------------------------------------------------- */
.woocommerce-cart table.shop_table td,
.woocommerce-checkout table.shop_table td,
.woocommerce-cart .cart_totals td,
.woocommerce-checkout #order_review td,
.woocommerce-cart .cart_totals th,
.woocommerce-checkout #order_review th{background:transparent !important;color:var(--ink) !important}
/* shipping row: method label, radio label and the "Shipping to ..." line */
.woocommerce-shipping-destination,
.woocommerce-shipping-methods,
.woocommerce-shipping-methods li,
.woocommerce-shipping-methods label,
#shipping_method label,
.woocommerce-cart .shipping td,
.woocommerce-checkout .shipping td,
.woocommerce-checkout .shipping th{color:var(--ink) !important}
.woocommerce-shipping-destination strong{color:var(--ink) !important}
/* product + link text inside the cart/checkout tables */
.woocommerce-cart .product-name a,
.woocommerce-checkout .product-name,
.woocommerce-cart td.product-name,
.woocommerce-cart .product-name .variation,
.woocommerce-cart .product-name .variation *{color:var(--ink) !important}
.woocommerce-cart .product-name a:hover{color:var(--accent-yellow) !important}
/* currency symbol was inheriting a white background from WC's stock styles */
.woocommerce-Price-amount,
.woocommerce-Price-currencySymbol,
.woocommerce-cart .amount,
.woocommerce-checkout .amount{background:transparent !important;color:inherit !important}
.woocommerce-cart .order-total .amount,
.woocommerce-checkout .order-total .amount{color:var(--ink) !important;font-weight:750}
/* small print + secondary links */
.woocommerce form .form-row label .optional,
.woocommerce-checkout .optional,
.woocommerce-checkout label{color:var(--ink-soft) !important}
.shipping-calculator-button,
.woocommerce-privacy-policy-link,
.woocommerce-terms-and-conditions-link,
.showcoupon,
.showlogin{color:var(--accent-bright) !important;text-decoration:underline}
/* select2 (province/country pickers) render their own inner markup */
.select2-container--default .select2-selection--single{background:var(--surface) !important;border:1px solid var(--line-strong) !important;border-radius:var(--r-sm)}
.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection--single .select2-selection__placeholder{color:var(--ink) !important}
.select2-dropdown{background:var(--surface) !important;border-color:var(--line-strong) !important;color:var(--ink)}
.select2-container--default .select2-results__option{color:var(--ink)}
.select2-container--default .select2-results__option--highlighted[aria-selected]{background:var(--accent) !important;color:#fff !important}
.select2-search--dropdown .select2-search__field{background:var(--surface-2) !important;color:var(--ink) !important;border-color:var(--line-strong) !important}
/* coupon + update-cart row */
.woocommerce-cart .coupon input.input-text{background:var(--surface) !important;color:var(--ink) !important}
.woocommerce-cart td.actions{background:transparent !important}
/* The checkout's "Your order" table carries an explicit white background from
   WooCommerce's own stylesheet that out-specifies the generic .shop_table rule
   above, so every label in it (Product/Subtotal/GST/PST/Total/"$") was light
   text on white at 1.13:1. Target the table by its own class. */
table.woocommerce-checkout-review-order-table,
table.woocommerce-checkout-review-order-table thead,
table.woocommerce-checkout-review-order-table tbody,
table.woocommerce-checkout-review-order-table tfoot,
table.woocommerce-checkout-review-order-table tr,
table.woocommerce-checkout-review-order-table th,
table.woocommerce-checkout-review-order-table td{background-color:transparent !important;color:var(--ink) !important}
table.woocommerce-checkout-review-order-table thead th{color:var(--ink-faint) !important;background-color:var(--surface-2) !important}
table.woocommerce-checkout-review-order-table tfoot .order-total th,
table.woocommerce-checkout-review-order-table tfoot .order-total td{color:var(--ink) !important;font-weight:750}
/* The 18+ confirmation is registered required=false so WooCommerce doesn't add
   a second, redundant "...is a required field." error on top of our clearer
   one (see functions.php §10) -- but that also makes WooCommerce append its
   "(optional)" hint, which is flatly wrong here: the box IS mandatory and the
   label already carries its own asterisk. Hide the hint for this field only. */
.fgn-lawful-use .optional{display:none !important}
.fgn-lawful-use abbr.required{color:var(--danger,#E0705F);text-decoration:none;border:none}
.woocommerce-MyAccount-content{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:24px}
.woocommerce-order-details,.woocommerce-customer-details{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:20px}
.fgn-lawful-use label{font-weight:600;font-size:13.5px}
/* my-account CLASSIC forms (login/register/reset — shortcode, not blocks):
   Kadence/WooCommerce default label slate (#4A5568) + link blue (#2b6cb0) both
   fail contrast on navy. Scope to the account/classic-woo forms only. (v0.4.5) */
.woocommerce-account .woocommerce form label,
.woocommerce form.woocommerce-form-login label,
.woocommerce form.woocommerce-form-register label,
.woocommerce form.woocommerce-ResetPassword label,
.woocommerce-account .woocommerce-form-row label{color:var(--ink) !important}
.woocommerce-account .woocommerce form .woocommerce-form-login__rememberme,
.woocommerce-account .woocommerce form em,
.woocommerce-account .woocommerce-privacy-policy-text,
.woocommerce-account .woocommerce-privacy-policy-text p{color:var(--ink-soft) !important}
.woocommerce-account .woocommerce-LostPassword a,
.woocommerce-account .woocommerce form a{color:var(--accent-yellow) !important;text-decoration:underline}
.woocommerce-account .woocommerce form input.input-text{background:var(--surface) !important;color:var(--ink) !important;border-color:var(--line-strong) !important}

/* ===================================================================
   RICH FOOTER (injected via wp_footer in functions.php)
   =================================================================== */
.fgn-footer{background:var(--surface);border-top:1px solid var(--line);padding:60px 0 30px}
.fgn-footer .fgn-wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.fgn-footer .fgn-brand{display:flex;align-items:center;gap:11px;font-family:var(--display);font-weight:800;letter-spacing:-.02em;color:var(--ink) !important}
.fgn-footer .fgn-footer-logo{height:38px;width:auto;display:block}
.fgn-fgrid{display:grid;grid-template-columns:1.6fr 1fr 1.5fr 1fr 1fr;gap:40px;padding-bottom:44px;border-bottom:1px solid var(--line)}
.fgn-fcol h4{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:16px;font-weight:600}
.fgn-fcol a{display:block;font-size:14px;color:var(--ink-soft);padding:6px 0;text-decoration:none}
.fgn-fcol a:hover{color:var(--accent)}
.fgn-fbrands{columns:2;column-gap:24px}
.fgn-fbrands a{break-inside:avoid}
.fgn-fcol-about p{font-size:13.5px;color:var(--ink-soft);margin:14px 0;max-width:36ch;line-height:1.6}
.fgn-nap{font-size:12px;color:var(--ink-faint);line-height:1.7}
.fgn-fbot{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-top:24px;flex-wrap:wrap}
.fgn-fbot .cc{font-size:12.5px;color:var(--ink-faint)}
.fgn-pays{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.fgn-pays span{font-family:var(--mono);font-size:11px;border:1px solid var(--line);border-radius:var(--r-pill);padding:6px 12px;color:var(--ink-soft)}
@media (max-width:1000px){.fgn-fgrid{grid-template-columns:1fr 1fr;gap:32px}.fgn-fcol-about,.fgn-fcol-brands{grid-column:1/-1}}
@media (max-width:640px){.fgn-fgrid{grid-template-columns:1fr}}

/* ===================================================================
   EDITORIAL / REAL-OPERATION PHOTOS (v0.4.6) — homepage proof band,
   about-page shots, delivery/bulk imagery. Real photos = human-effort
   authenticity no competitor has.
   =================================================================== */
.fgn-proofgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:6px}
.fgn-proofshot{position:relative;margin:0;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);background:var(--surface)}
.fgn-proofshot img{display:block;width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .5s ease}
.fgn-proofshot:hover img{transform:scale(1.045)}
.fgn-proofshot figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 12px;font-family:var(--mono);font-size:11.5px;letter-spacing:.02em;color:#fff;background:linear-gradient(180deg,transparent,rgba(4,14,20,.85))}
.fgn-proofnote{max-width:72ch;margin:20px auto 0;text-align:center;color:var(--ink-soft);font-size:13.5px;line-height:1.65}
.fgn-proofnote a{color:var(--accent);text-decoration:underline}
@media (max-width:820px){.fgn-proofgrid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.fgn-proofgrid{grid-template-columns:1fr}}

/* HERO IMAGE SLIDER (v0.4.7) — imagery rotates, headline/CTA stay fixed
   (conversion-safe: no message/CTA ever moves). */
.fgn-hero-visual{display:flex;flex-direction:column;justify-content:center}
.fgn-heroslider{position:relative;width:100%;flex:1 1 auto;min-height:440px;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line-strong);box-shadow:0 34px 80px -26px rgba(0,0,0,.65);background:#0a1c28}
.fgn-slides{position:absolute;inset:0}
.fgn-slide{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .9s ease;will-change:opacity}
.fgn-slide.is-active{opacity:1}
.fgn-slide img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.02);transition:transform 6s ease}
.fgn-slide.is-active img{transform:scale(1.09)}
.fgn-slide figcaption{position:absolute;left:0;right:0;bottom:0;padding:44px 18px 16px;font-family:var(--mono);font-size:12.5px;letter-spacing:.02em;color:#fff;background:linear-gradient(180deg,transparent,rgba(4,14,20,.9))}
.fgn-herobadge{position:absolute;top:14px;left:14px;z-index:3;display:inline-flex;align-items:center;gap:7px;background:rgba(7,32,47,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid rgba(23,180,136,.55);color:#fff;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.02em;padding:7px 12px;border-radius:var(--r-pill)}
.fgn-herobadge .dot{width:7px;height:7px;border-radius:50%;background:var(--accent-bright);animation:fgn-heropulse 2s infinite}
@keyframes fgn-heropulse{0%{box-shadow:0 0 0 0 rgba(43,217,166,.5)}70%{box-shadow:0 0 0 7px rgba(43,217,166,0)}100%{box-shadow:0 0 0 0 rgba(43,217,166,0)}}
.fgn-slidedots{position:absolute;bottom:14px;right:14px;z-index:3;display:flex;gap:7px}
.fgn-dot{width:9px;height:9px;border-radius:50%;border:none;padding:0;cursor:pointer;background:rgba(255,255,255,.42);transition:background .2s,width .2s}
.fgn-dot:hover{background:rgba(255,255,255,.7)}
.fgn-dot.is-active{background:var(--accent-yellow);width:22px;border-radius:5px}
.fgn-herofacts{display:flex;gap:8px;margin-top:14px}
.fgn-herofacts span{flex:1;text-align:center;font-family:var(--mono);font-size:10.5px;letter-spacing:.03em;color:var(--ink-soft);background:var(--surface);border:none;border-radius:var(--r-md);padding:9px 6px;box-shadow:var(--shadow)}
.fgn-herofacts b{display:block;color:var(--ink);font-size:14px;margin-bottom:2px}
@media (max-width:900px){.fgn-hero-visual{display:block}.fgn-heroslider{flex:none;min-height:0;aspect-ratio:4/3}}
@media (prefers-reduced-motion:reduce){.fgn-slide img,.fgn-slide.is-active img{transition:none;transform:none}.fgn-herobadge .dot{animation:none}}

/* About-page editorial figures (break up the text with real photos) */
.fgn-abfig{margin:8px 0 6px;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);position:relative}
.fgn-abfig img{display:block;width:100%;height:auto}
.fgn-abfig figcaption{position:absolute;left:0;right:0;bottom:0;padding:30px 18px 14px;font-family:var(--mono);font-size:12px;color:#fff;background:linear-gradient(180deg,transparent,rgba(4,14,20,.82))}
.fgn-abrow{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:10px 0}
.fgn-abrow .fgn-abfig{margin:0}
.fgn-abrow .fgn-abfig img{aspect-ratio:4/5;object-fit:cover}
@media (max-width:700px){.fgn-abrow{grid-template-columns:1fr}}

/* Cookie consent banner (inc/cookie-consent.php).
   Reject and Accept are deliberately the SAME size/weight — the ICO treats a
   harder-to-find reject option as non-compliant, so this is not a style choice. */
/* z-index must beat .fgn-stw-launch (8000) or the spin-to-win pill draws over
   the banner text. Consent has to be readable, so it sits above everything. */
.fgn-cc{position:fixed;left:0;right:0;bottom:0;z-index:9000;background:var(--surface);
  border-top:1px solid var(--line-strong);box-shadow:0 -8px 40px -12px rgba(0,0,0,.7)}
/* While the banner is open, lift the floating buttons clear of it (height is
   measured in JS into --fgn-cc-h) so nothing is obscured and both stay usable. */
html.fgn-cc-open .fgn-stw-launch{bottom:calc(16px + var(--fgn-cc-h, 0px)) !important}
html.fgn-cc-open .fgn-contact-fab{bottom:calc(22px + var(--fgn-cc-h, 0px)) !important}
.fgn-stw-launch,.fgn-contact-fab{transition:bottom .25s ease,transform .22s ease,opacity .22s ease}
/* Scroll-away state (audit H9) — toggled by the wp_footer scroll script. Both
   buttons slide out to their own side rather than fading in place, so nothing
   is left dimmed on top of the copy underneath. Pointer events are dropped so a
   half-transitioned button can't swallow a tap meant for the page. JS also
   force-closes the speed-dial menu on hide, so it can't be left open+offscreen. */
html.fgn-fabs-hidden .fgn-contact-fab{transform:translateX(calc(100% + 26px));opacity:0;pointer-events:none}
html.fgn-fabs-hidden .fgn-stw-launch{transform:translateX(calc(-100% - 20px));opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){
  html.fgn-fabs-hidden .fgn-contact-fab,html.fgn-fabs-hidden .fgn-stw-launch{transition:none}
}
/* On phones the banner is tall, so lifting the spin-to-win pill pushes it over the
   hero CTA. Don't compete with the consent decision — hide it until they've chosen. */
@media (max-width:640px){
  html.fgn-cc-open .fgn-stw-launch{display:none !important}
}
.fgn-cc[hidden]{display:none}
.fgn-cc-in{max-width:var(--maxw);margin:0 auto;padding:16px 24px;display:flex;gap:22px;
  align-items:center;justify-content:space-between;flex-wrap:wrap}
.fgn-cc-txt{flex:1 1 420px;min-width:280px}
.fgn-cc-txt strong{display:block;color:var(--ink);font-size:14.5px;margin-bottom:4px}
.fgn-cc-txt p{margin:0;color:var(--ink-soft);font-size:13px;line-height:1.55;max-width:70ch}
.fgn-cc-txt a{color:var(--accent-bright);text-decoration:underline}
.fgn-cc-btns{display:flex;gap:10px;flex:0 0 auto}
.fgn-cc-btn{font-family:var(--sans);font-weight:700;font-size:14px;padding:11px 26px;
  border-radius:var(--r-pill);cursor:pointer;border:1px solid var(--line-strong);
  transition:background .15s,color .15s,border-color .15s}
.fgn-cc-no{background:transparent;color:var(--ink)}
.fgn-cc-no:hover{border-color:var(--ink);background:var(--surface-2)}
.fgn-cc-yes{background:var(--accent-yellow);color:var(--accent-yellow-ink);border-color:var(--accent-yellow)}
.fgn-cc-yes:hover{background:#fff;border-color:#fff}
.fgn-cc-btn:focus-visible{outline:2px solid var(--accent-bright);outline-offset:2px}
/* Per-purpose consent rows (added 2026-10-20 with the two-category banner).
   Analytics and advertising are separate purposes under Quebec Law 25, so they
   are separate checkboxes rather than one bundled yes. */
.fgn-cc-opt{display:flex;align-items:flex-start;gap:9px;margin-top:10px;
  color:var(--ink-soft);font-size:12.5px;line-height:1.5;cursor:pointer;max-width:70ch}
.fgn-cc-opt input{flex:0 0 auto;margin-top:2px;width:16px;height:16px;cursor:pointer;
  accent-color:var(--accent-bright)}
.fgn-cc-opt input[hidden]{display:none}
.fgn-cc-opt strong{display:inline;color:var(--ink);font-size:12.5px;margin:0}
.fgn-cc-opt input:focus-visible{outline:2px solid var(--accent-bright);outline-offset:2px}
/* "Reject all" was a ghost button next to a filled "Accept all". Equal ease of
   refusal is a requirement, not a preference, so it now carries the same visual
   weight -- same size, same solid treatment, differing only in colour. */
.fgn-cc-no{background:var(--surface-2);color:var(--ink);border-color:var(--ink-soft)}
.fgn-cc-no:hover{background:var(--surface);border-color:var(--ink)}
.fgn-cc-save{background:transparent;color:var(--ink-soft);border-color:transparent;
  text-decoration:underline;padding-left:12px;padding-right:12px}
.fgn-cc-save:hover{color:var(--ink)}
@media (max-width:640px){
  .fgn-cc-in{padding:14px 18px;gap:14px}
  .fgn-cc-btns{width:100%}
  .fgn-cc-btn{flex:1;padding:12px 10px}
}

.fgn-minorder-note{margin:10px 0 0;font-size:12.5px;color:var(--ink-faint);font-family:var(--mono)}

/* Portrait editorial figure, constrained width, used inline in article copy */
.fgn-artfig-portrait{max-width:340px;margin:24px auto}
.fgn-artfig-portrait img{aspect-ratio:3/4;object-fit:cover}

/* Split hero: copy left, portrait product/editorial photo right (shop + help centre) */
.fgn-splithero-wrap{display:grid;grid-template-columns:1.25fr .75fr;gap:44px;align-items:center;text-align:left}
.fgn-splithero-media{margin:0;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);position:relative}
.fgn-splithero-media img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover}
.fgn-splithero-media figcaption{position:absolute;left:0;right:0;bottom:0;padding:24px 14px 12px;font-family:var(--mono);font-size:11.5px;color:#fff;background:linear-gradient(180deg,transparent,rgba(4,14,20,.82))}
.fgn-hh.fgn-splithero-alt .fgn-hcchips{justify-content:flex-start}
.fgn-hh.fgn-splithero-alt .fgn-searchwrap{margin-left:0;margin-right:0}
.fgn-hh.fgn-splithero-alt p.sub{margin-left:0;margin-right:0}
@media (max-width:820px){.fgn-splithero-wrap{grid-template-columns:1fr;text-align:center}.fgn-splithero-media{order:-1;max-width:320px;margin:0 auto}.fgn-hh.fgn-splithero-alt .fgn-searchwrap{margin-left:auto;margin-right:auto}.fgn-hh.fgn-splithero-alt .fgn-hcchips{justify-content:center}}

/* Audit M5 — Kadence's cart-drawer title is rewritten from <h2> to <div> in
   inc/seo-fixes.php so a sitewide UI widget stops injecting a heading into every
   page's outline. Kadence styles it as `#cart-drawer h2.side-cart-header`, an
   element-qualified selector that no longer matches, so these reproduce the
   exact computed values the <h2> had (measured live: 17px/700/1.5, -.02em,
   margins 0, colour --ink) — the swap is semantic only, not visual. */
#cart-drawer .side-cart-header{font-size:1em;font-weight:700;line-height:1.5;
  letter-spacing:-.02em;margin:0;color:var(--ink)}

/* Audit M14/M17 — editorial photos now render through fgn_ed_img(), which wraps
   them in <picture class="fgn-edpic"> with a WebP srcset and a JPG fallback.
   <picture> is display:inline by default, which would leave a stray text-node gap
   under the image inside the fixed-ratio figures. */
.fgn-edpic{display:block;position:relative}
.fgn-edpic img{display:block;width:100%;height:auto}
/* M17 — a lazy image used to leave a flat navy hole until it decoded, which reads
   as a broken image and undercuts the "these are our real photos" claim these
   figures exist to make. A tinted plate plus a soft diagonal sheen reads as
   loading instead. No animation: it sits behind an opaque JPG and is gone the
   moment the image paints, so an infinite keyframe would burn CPU for nothing. */
.fgn-edpic img[loading="lazy"]{
  background-color:var(--surface-2);
  background-image:linear-gradient(118deg,transparent 18%,rgba(255,255,255,.05) 46%,transparent 64%)}

/* ===================================================================
   CHECKOUT + MINI-CART CONTRAST GAPS (v0.8.0-ca1)
   Swept every text node on the live checkout: the classic-checkout bridge
   added in 0.6.2 holds up (prices/labels/tables all pass), but three
   surfaces were still failing. Same sweep found the identical gaps on the
   UK sibling, so both were fixed together.
     "Your personal data will be used..." .. 1.24:1
     required-field asterisk (#F00) ........ 4.18:1
     mini-cart drawer prices ............... ~3.4:1 on a white drawer
   =================================================================== */
/* WooCommerce ships the privacy notice at dark slate; the LINK inside it was
   already fixed in 0.6.2 but the surrounding paragraph never was. */
.woocommerce-privacy-policy-text,
.woocommerce-privacy-policy-text p{color:var(--ink-soft) !important}
/* Required-field asterisk: pure #F00 measures 4.18:1 on navy, under AA. */
.woocommerce form .form-row .required,
.woocommerce form .form-row abbr.required,
.woocommerce .required,
.woocommerce abbr.required{color:var(--danger) !important;text-decoration:none;border:none}

/* Kadence slide-out mini-cart (#cart-drawer, opened by the header cart icon).
   Ships WHITE while the theme's commerce panels are all navy, leaving item
   prices at ~3.4:1 on it. Scoped to #cart-drawer specifically: #mobile-drawer
   is the nav panel and is already correctly dark. */
#cart-drawer .drawer-inner{background:var(--surface) !important}
#cart-drawer .drawer-content,
#cart-drawer .widget_shopping_cart,
#cart-drawer .mini-cart-container,
#cart-drawer .woocommerce-mini-cart,
#cart-drawer .woocommerce-mini-cart__total,
#cart-drawer .woocommerce-mini-cart__total strong,
#cart-drawer .woocommerce-mini-cart__empty-message,
#cart-drawer .mini_cart_item,
#cart-drawer .mini_cart_item a:not(.remove),
#cart-drawer .quantity,
#cart-drawer .amount,
#cart-drawer .woocommerce-Price-amount,
#cart-drawer .woocommerce-Price-currencySymbol,
#cart-drawer .drawer-header,
#cart-drawer .drawer-toggle{color:var(--ink) !important;background-color:transparent !important}
#cart-drawer .mini_cart_item{border-bottom:1px solid var(--line) !important}
#cart-drawer .mini_cart_item a:not(.remove):hover{color:var(--accent-yellow) !important}
#cart-drawer .woocommerce-mini-cart__total{border-top:1px solid var(--line) !important;padding-top:12px}
#cart-drawer a.remove{color:var(--danger) !important;background:transparent !important}
#cart-drawer a.remove:hover{color:#fff !important;background:var(--danger) !important}
#cart-drawer .woocommerce-mini-cart__buttons a.button{background:var(--surface-2) !important;color:var(--ink) !important;border-radius:var(--r-pill)}
#cart-drawer .woocommerce-mini-cart__buttons a.button.checkout{background:var(--accent-yellow) !important;color:var(--accent-yellow-ink) !important}