/* ==========================================================================
   ARTISAN AMINOS — theme stylesheet
   Display : Fraunces      (premium serif, italic accent)
   UI      : Schibsted Grotesk
   Data    : Geist Mono    (numbers, lots, batch codes only)
   Fonts are self-hosted (see @font-face below) for performance/privacy.
   ========================================================================== */

/* ---------- fonts (self-hosted, variable) ---------- */
@font-face{font-family:"Fraunces";font-style:normal;font-weight:300 600;font-display:swap;
  src:url("../fonts/fraunces/fraunces-roman.woff2") format("woff2")}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:300 500;font-display:swap;
  src:url("../fonts/fraunces/fraunces-italic.woff2") format("woff2")}
@font-face{font-family:"Schibsted Grotesk";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("../fonts/schibsted-grotesk/schibsted-grotesk.woff2") format("woff2")}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:400 500;font-display:swap;
  src:url("../fonts/geist-mono/geist-mono.woff2") format("woff2")}

/* ---------- design tokens ---------- */
:root{
  color-scheme:light only;
  --paper:#FFFFFF;
  --mist:#F3F8FE;
  --tint:#E7F1FD;
  --line:#DBE6F3;
  --line2:#C3D6EC;
  --ink:#08111F;
  --navy:#00306B;
  --blue:#1F6FD0;
  --cyan:#4FA8F5;
  --sky:#A9D5FB;
  --grey:#546172;
  --good:#1E7F52;
  --bad:#B4462B;

  --r-xs:8px; --r-sm:12px; --r-md:16px; --r-lg:22px; --r-xl:30px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(8,17,31,.05);
  --sh-2:0 14px 38px rgba(0,48,107,.12);
  --sh-3:0 30px 90px rgba(8,17,31,.34);
  --f:"Schibsted Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --fd:"Fraunces",Georgia,"Times New Roman",serif;
  --fm:"Geist Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --pad:clamp(18px,4vw,56px); --maxw:1340px; --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset / base ---------- */
*{box-sizing:border-box}
html{background:var(--paper);-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f);font-size:16px;
  line-height:1.62;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:clip} /* clip, not hidden — keeps sticky nav working */
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--navy);color:#fff}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:var(--r-xs)}
/* !important on every property: this utility must hide its target regardless
   of what else targets the same element. WooCommerce's own descendant
   selector `.woocommerce div.product form.cart table.variations{width:100%}`
   (4 classes + 3 elements) heavily outranks a single `.sr` class, so without
   !important it was overriding width:1px back to width:100% — stretching the
   "hidden" no-JS fallback variations table to the full column width while it
   stayed position:absolute, which pushed its right edge past the viewport
   and forced a horizontal scrollbar/overflow at every breakpoint. */
.sr{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.container{width:100%;max-width:1140px;margin-inline:auto;padding-inline:1rem}

/* ---------- image skeleton loader (used by hy_image()) ---------- */
.skeleton-placeholder{position:relative;overflow:hidden}
.skeleton-placeholder img{display:block;width:100%;height:auto;opacity:0;transition:opacity .3s ease}
.skeleton-placeholder img.loaded{opacity:1}
@keyframes skeleton-loading{0%{background-position:-200% 0}100%{background-position:200% 0}}

/* ---------- type scale ---------- */
.lab{font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--grey);margin:0}
.lab--b{color:var(--blue)}
.d1{font-family:var(--fd);font-optical-sizing:auto;font-weight:400;
  font-size:clamp(2.4rem,5.4vw,4.4rem);line-height:1.04;letter-spacing:-.028em;margin:0}
.d2{font-family:var(--fd);font-optical-sizing:auto;font-weight:400;
  font-size:clamp(1.8rem,3.5vw,2.9rem);line-height:1.1;letter-spacing:-.024em;margin:0}
.d3{font-family:var(--fd);font-weight:500;font-size:1.3rem;line-height:1.25;letter-spacing:-.018em;margin:0}
.em{font-style:italic;font-weight:400;color:var(--blue)}
.md{font-size:1.12rem;line-height:1.34;letter-spacing:-.016em;font-weight:600;margin:0}
.lede{font-size:1.05rem;line-height:1.62;color:var(--grey);max-width:50ch;margin:0}
.small{font-size:.92rem;line-height:1.6;color:var(--grey)}
.tiny{font-size:.82rem;line-height:1.55;color:var(--grey)}
.num{font-family:var(--fm);font-variant-numeric:tabular-nums;letter-spacing:-.01em}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;font-size:15px;font-weight:700;
  padding:16px 32px;border:1.5px solid var(--navy);background:var(--navy);color:#fff;cursor:pointer;
  border-radius:var(--r-pill);transition:background .22s var(--ease),color .22s var(--ease),
  box-shadow .22s var(--ease),transform .22s var(--ease)}
.btn:hover{background:#00408F;box-shadow:0 10px 26px rgba(0,48,107,.28);transform:translateY(-1px)}
.btn:active{transform:none}
.btn--g{background:transparent;color:var(--navy);border-color:var(--line2)}
.btn--g:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn--w{width:100%}
.btn--sm{font-size:13.5px;padding:12px 22px;font-weight:600}
.btn[disabled],.btn.off{opacity:.34;box-shadow:none;transform:none}
.btn svg{width:17px;height:17px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:transform .28s var(--ease)}
.btn:hover svg{transform:translateX(3px)}

/* ---------- chips + ticks ---------- */
.chip{display:inline-flex;align-items:center;gap:7px;border-radius:var(--r-pill);
  font-size:12.5px;font-weight:600;padding:7px 14px;white-space:nowrap}
.chip svg{width:13px;height:13px;stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none}
.chip--soft{background:var(--tint);color:var(--navy)}
.chip--soft svg{stroke:var(--blue)}
.chip--ok{background:#E4F3EB;color:var(--good)}
.chip--ok svg{stroke:var(--good)}
.chip--bad{background:#FBE9E4;color:var(--bad)}
.chip--warn{background:#FCF0D9;color:#966016}
.tick{display:inline-flex;align-items:center;gap:10px;font-size:14.5px;font-weight:500}
.tick i{flex:none;width:22px;height:22px;border-radius:var(--r-pill);background:var(--tint);display:grid;place-items:center}
.tick svg{width:12px;height:12px;stroke:var(--blue);stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* ---------- brand logo (rendered by the_custom_logo()) ---------- */
.custom-logo-link{display:block;line-height:0}
/* WooCommerce's own woocommerce-layout.css ships
   `.woocommerce img,.woocommerce-page img{height:auto;max-width:100%}` — scoped to the
   <body> class WooCommerce adds on every shop/category/product page, so it matches
   every <img> in the document, including the header logo. Its extra `img` type
   selector makes it more specific than a bare `.custom-logo` class, so it silently
   overrode the fixed height back to auto, letting the logo render at its native pixel
   size ("disturbed" on shop/product pages). !important guarantees the intended height. */
.custom-logo{display:block;height:27px!important;width:auto!important}
@media(max-width:520px){.custom-logo{height:23px!important}}
.drawer__t .custom-logo{height:24px}
.foot__b .custom-logo{height:24px;filter:brightness(0) invert(1)}

/* ---------- announcement (top bar) ---------- */
.ann{background:linear-gradient(90deg,#00265A,#004592 55%,#00265A);color:#DCEBFB;text-align:center;
  padding:14px var(--pad);overflow:hidden}
.ann p{margin:0;font-size:14px;font-weight:600;letter-spacing:.03em}
.ann b{color:#fff;font-weight:700}
.ann span{opacity:.5;padding:0 12px}
@media(max-width:700px){.ann p{font-size:12.5px}.ann span{padding:0 6px}}

/* ---------- header / nav ---------- */
.nav{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.88);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav__in{display:flex;align-items:center;justify-content:space-between;height:72px;gap:20px}
.brand{display:flex;align-items:center;gap:11px}
.brand span{font-family:var(--fd);font-weight:500;font-size:1.05rem;letter-spacing:.14em;
  text-transform:uppercase;white-space:nowrap;color:var(--navy)}
.nav__links{display:flex;align-items:center;gap:26px}
.nav__links ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:26px}
/* parts/header/main.php renders the 'main-menu' location with
   items_wrap:'%3$s' (no <ul>) so the fallback's bare <a> links sit
   directly in .nav__links's flex row — but WordPress's menu walker
   always wraps each real menu item in <li> regardless of items_wrap
   (that param only controls the outer wrapper, never the per-item one).
   Once a real menu is assigned in Appearance → Menus, those orphaned
   <li> elements (no parent <ul>, so .nav__links ul above never matches)
   fell back to the browser's default bullet-list styling. display:contents
   removes the <li> from the box model entirely so its <a> becomes an
   effective direct flex child either way — matches the fallback's own
   markup and needs no PHP-side changes. */
.nav__links li{list-style:none;display:contents}
.nav__links a{font-size:14.5px;font-weight:500;color:var(--grey);transition:color .2s var(--ease)}
.nav__links a:hover{color:var(--navy)}
.cartb{display:inline-flex;align-items:center;gap:9px;color:var(--navy)!important;font-weight:600;
  border:1px solid var(--line);border-radius:var(--r-pill);padding:9px 15px 9px 17px}
.cartb:hover{border-color:var(--navy)}
.cartb b{font-family:var(--fm);font-size:12px;background:var(--blue);color:#fff;min-width:21px;height:21px;
  border-radius:var(--r-pill);display:inline-grid;place-items:center;font-weight:500}
.burger{display:none;align-items:center;justify-content:center;width:42px;height:42px;flex:none;
  border:1px solid var(--line);border-radius:var(--r-pill);background:var(--paper);cursor:pointer;padding:0}
.burger span{display:block;width:17px;height:1.6px;background:var(--navy);border-radius:2px;position:relative;transition:.3s var(--ease)}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:17px;height:1.6px;background:var(--navy);border-radius:2px;transition:.3s var(--ease)}
.burger span::before{top:-5.5px}.burger span::after{top:5.5px}
.burger.on span{background:transparent}
.burger.on span::before{top:0;transform:rotate(45deg)}
.burger.on span::after{top:0;transform:rotate(-45deg)}
@media(max-width:1040px){.burger{display:inline-flex}.nav__links a:not(.cartb){display:none}}

/* FunnelKit Cart's own floating toggle bubble (cart-for-woocommerce plugin,
   #fkcart-floating-toggler) ships with z-index:10999 — far above every
   overlay this theme has (.scrim 70, .drawer 80, the "added to cart" toast
   90), so it visually sat on top of the mobile nav drawer, its scrim, and
   any toast instead of going behind them like the rest of the page does.
   Pulled down here to sit with the rest of this stack: above the sticky
   .nav (60) since it's meant to stay reachable while scrolling, but below
   .scrim so an open drawer/modal correctly covers it, not the other way
   around. .aa-hide-near-footer (assets/js/custom.js) fades it out only
   while the footer's own RUO disclaimer text is in view, so the two never
   overlap there either. */
#fkcart-floating-toggler{z-index:65!important;transition:opacity .25s var(--ease),visibility .25s var(--ease)}
#fkcart-floating-toggler.aa-hide-near-footer{opacity:0!important;visibility:hidden!important;pointer-events:none!important}

/* ---------- mobile drawer ---------- */
.scrim{position:fixed;inset:0;z-index:70;background:rgba(6,14,26,.45);backdrop-filter:blur(3px);
  opacity:0;pointer-events:none;transition:opacity .3s var(--ease)}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(86vw,340px);z-index:80;background:var(--paper);
  box-shadow:-20px 0 60px rgba(8,17,31,.22);transform:translateX(100%);transition:transform .38s var(--ease);
  display:flex;flex-direction:column;overflow-y:auto}
.drawer.on{transform:none}
.drawer__t{display:flex;align-items:center;justify-content:space-between;padding:22px 22px 18px;border-bottom:1px solid var(--line)}
.drawer__x{width:38px;height:38px;border:1px solid var(--line);border-radius:var(--r-pill);background:none;cursor:pointer;display:grid;place-items:center}
.drawer__x svg{width:15px;height:15px;stroke:var(--navy);stroke-width:2;fill:none;stroke-linecap:round}
/* The design's own markup wraps the drawer's link list in a <nav>, but
   this theme's wp_nav_menu() call uses container:false + a bare <ul>
   items_wrap (for both a real assigned menu and the fallback_cb) — there's
   no <nav> element inside .drawer at all, so every `.drawer nav ...`
   selector below silently never matched anything (no flex row, no padding,
   no hover state, no bullet removal, and the icon rendered at the
   browser's unstyled default size). Scoped to the <ul> that's actually
   there instead. */
.drawer ul{list-style:none;margin:0;padding:12px 14px;display:flex;flex-direction:column}
.drawer ul a{display:flex;align-items:center;justify-content:space-between;padding:15px 14px;border-radius:var(--r-md);
  font-size:1.02rem;font-weight:600;transition:background .2s}
.drawer ul a:hover{background:var(--mist)}
.drawer ul svg{width:14px;height:14px;stroke:var(--blue);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none}
.drawer__f{margin-top:auto;padding:20px 22px 26px;border-top:1px solid var(--line)}
.drawer__f .btn{width:100%}
.drawer__ruo{margin:14px 0 0;font-size:11.5px;line-height:1.5;color:var(--grey)}

/* "View COA" modal — reuses the drawer's .scrim backdrop + .drawer__x close
   button so it matches the site's one existing overlay convention instead
   of inventing a second one. Shows the lot's PDF/image scan in-page (an
   <iframe> for a PDF so Chromium/Firefox/Safari render it inline via their
   native PDF viewer, or a plain <img> for an image scan) rather than
   opening a new tab, with its own "Download PDF" button for anyone who
   still wants the raw file. */
.coa-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.97);
  width:min(97vw,1360px);max-height:calc(100vh - 40px);z-index:81;background:var(--paper);
  border-radius:var(--r-lg);box-shadow:var(--sh-2);display:flex;flex-direction:column;
  opacity:0;pointer-events:none;transition:opacity .28s var(--ease),transform .28s var(--ease);overflow:hidden}
.coa-modal.on{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
.coa-modal__t{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;
  border-bottom:1px solid var(--line);background:var(--mist);flex:none}
.coa-modal__t span{font-family:var(--fd);font-weight:500;font-size:1.15rem;letter-spacing:-.01em}
.coa-modal__body{padding:20px 22px;overflow-y:auto;flex:1}
/* The doc area doesn't force a fixed-size decorative box around the file —
   an image scan sizes off its own natural aspect ratio (capped by
   max-width/max-height) with its border/shadow directly on the <img>
   itself, so a tall/narrow scan doesn't get letterboxed inside a wide box
   with empty gutters on both sides. A PDF's <iframe> has no "natural size"
   of its own, so it keeps a fixed height instead. */
.coa-modal__doc{margin-top:16px;display:flex;justify-content:center}
.coa-modal__doc iframe{width:100%;height:min(58vh,600px);border:0;border-radius:var(--r-md)}
.coa-modal__doc img{max-width:100%;height:auto;max-height:min(58vh,600px);display:block;
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--paper);
  box-shadow:0 4px 12px rgba(0,0,0,.06);cursor:zoom-in;-webkit-user-drag:none}
/* Click-to-zoom (image scans only — a PDF's <iframe> already has its own
   native viewer zoom controls). Toggles the image up to a large-but-capped
   size (not its full natural pixel size, which for a high-res scan could
   be many times the viewport) inside a scrollable box so the shopper can
   pan around and read fine print. The zoomed image itself gets
   pointer-events:none so every click/drag reliably targets the scrollable
   container instead — clicking the image directly worked for zooming IN,
   but re-clicking to zoom back OUT was unreliable once the browser's own
   pointer capture started reporting the container, not the image, as the
   event target for every event after the first. */
/* justify-content:center (set above for the non-zoomed, non-overflowing
   state) is a well-known trap once the child overflows: the browser's
   scrollable-overflow calculation for a centered flex item only ever
   exposes the END side of the overflow via scrolling, leaving the START
   side permanently unreachable — dragging/scrolling one direction (right,
   in a horizontal row) simply has nowhere further to go. Switching to
   flex-start once zoomed makes the entire scroll range reachable both
   ways. */
.coa-modal__doc.zoomed{overflow:auto;cursor:grab;justify-content:flex-start;align-items:flex-start}
.coa-modal__doc.zoomed.dragging{cursor:grabbing}
.coa-modal__doc.zoomed img{width:min(1400px,180vw);max-width:none;height:auto;max-height:none;
  margin:auto;pointer-events:none;touch-action:none;user-select:none;flex-shrink:0}
@media(max-width:600px){.coa-modal{width:calc(100vw - 12px);max-height:calc(100vh - 24px)}
  .coa-modal__doc img{max-height:min(50vh,600px)}}

/* "Added to cart" confirmation toast — shop/homepage/related card add-to-cart.
   max-width keeps it from ever exceeding a narrow viewport; #toastMsg's own
   nowrap is what actually matters for "responsive" here — without it, a
   longer product name (e.g. "Reconstitution Solution added to cart") wrapped
   mid-word into two cramped lines instead of just sizing the pill to fit one
   line, because a flex child's default min-width:auto lets the browser's
   shrink-to-fit width calculation for this position:fixed pill undershoot
   the text's actual single-line width. text-overflow/ellipsis is only a
   safety net for a name long enough to still exceed max-width. */
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,110px);background:var(--ink);color:#fff;
  padding:14px 24px;border-radius:var(--r-pill);font-size:14px;font-weight:500;z-index:90;display:flex;
  align-items:center;gap:10px;box-shadow:var(--sh-2);transition:transform .45s var(--ease);pointer-events:none;
  max-width:calc(100vw - 32px)}
.toast.on{transform:translate(-50%,0)}
.toast svg{width:16px;height:16px;stroke:#7FB6F2;stroke-width:2.8;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none}
#toastMsg{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- generic sections ---------- */
.sec{padding:clamp(58px,8vw,110px) 0}
.sec--mist{background:var(--mist);border-block:1px solid var(--line)}
.sec--dark{background:#06101E;color:#C3D2E4;position:relative;overflow:hidden}
.sec--dark::before{content:"";position:absolute;inset:0;
  background:radial-gradient(900px 460px at 18% 0%,rgba(79,168,245,.18),transparent 62%),
             radial-gradient(700px 400px at 88% 100%,rgba(31,111,208,.16),transparent 60%)}
.sec--dark>*{position:relative;z-index:1}
.sec--dark .d2,.sec--dark .d3,.sec--dark .md{color:#fff}
.sec--dark .lede,.sec--dark .small{color:#93A4BA}
.sec--dark .lab{color:#7E90A8}.sec--dark .lab--b{color:#6FB4F7}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;margin-bottom:30px}
.head h2{margin-top:10px}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;background:
  radial-gradient(1100px 620px at 78% 22%,#DDEDFD 0%,rgba(243,248,254,0) 62%),
  radial-gradient(760px 520px at 6% 78%,#EAF3FE 0%,rgba(255,255,255,0) 60%),
  linear-gradient(180deg,#F5FAFF 0%,#FFFFFF 88%)}
.hero__in{position:relative;z-index:1;padding-block:clamp(28px,4vw,52px) clamp(40px,5vw,70px)}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(24px,4vw,56px);align-items:center}
@media(max-width:940px){.hero__grid{grid-template-columns:1fr;gap:26px}}
.hero h1{margin:14px 0 20px;max-width:15ch}
.hero__p{font-size:1.06rem;line-height:1.66;color:var(--grey);max-width:52ch;margin:0}
.hero__p b{color:var(--ink);font-weight:600}
.hero__ruo{margin:18px 0 0;font-size:12.5px;font-weight:600;letter-spacing:.04em;color:var(--grey)}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
/* Same "stack full-width on mobile" convention as .news .btn / .notify —
   once the two CTAs wrap onto their own lines, stretch them to match the
   full row width instead of staying pill-sized/left-aligned. */
@media(max-width:480px){.hero__cta .btn{flex:1 1 100%}}
.hero__ticks{display:flex;gap:clamp(14px,3vw,32px);flex-wrap:wrap;margin:30px 0 0;padding:0;list-style:none}
.hero__ticks li{display:flex;align-items:center;gap:9px;font-size:11.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--navy)}
.hero__ticks svg{width:16px;height:16px;stroke:var(--blue);stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none}

.stage{position:relative;aspect-ratio:1/.94;display:grid;place-items:center;isolation:isolate}
.stage__glow{position:absolute;inset:4% 2% 8%;border-radius:50%;z-index:0;
  background:radial-gradient(closest-side,rgba(79,168,245,.34) 0%,rgba(169,213,251,.22) 46%,rgba(255,255,255,0) 76%)}
.stage img{object-fit:contain;position:relative;z-index:1;width:100%;max-width:530px;
  filter:drop-shadow(0 30px 44px rgba(0,48,107,.26));animation:bob 7s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.slab{position:absolute;z-index:2;display:flex;flex-direction:column;gap:1px;
  background:rgba(255,255,255,.93);backdrop-filter:blur(8px);border:1px solid rgba(219,230,243,.9);
  border-radius:var(--r-md);padding:11px 15px;box-shadow:0 12px 30px rgba(0,48,107,.14);
  font-size:11px;font-weight:500;color:var(--grey);line-height:1.35;white-space:nowrap;
  opacity:0;transform:translateY(8px);animation:sin .6s var(--ease) forwards}
.slab b{font-family:var(--fd);font-size:1.15rem;font-weight:600;letter-spacing:-.02em;color:var(--navy);line-height:1.1}
@keyframes sin{to{opacity:1;transform:none}}
.slab.a{top:3%;left:-2%;animation-delay:.3s}
.slab.b{top:29%;right:-3%;animation-delay:.45s}
.slab.c{bottom:23%;left:-4%;animation-delay:.6s}
.slab.d{bottom:2%;right:1%;animation-delay:.75s}
@media(max-width:1180px){.slab{padding:9px 12px;font-size:10.5px}.slab b{font-size:1rem}
  .slab.a{left:0}.slab.b{right:0}.slab.c{left:0}.slab.d{right:0}}
@media(max-width:940px){.slab.a{top:1%;left:1%}.slab.b{top:25%;right:1%}.slab.c{bottom:21%;left:1%}.slab.d{bottom:1%;right:1%}}
@media(max-width:400px){.slab.b{display:none}}

/* ---------- standard band ---------- */
.std__top{display:flex;align-items:flex-start;gap:clamp(18px,3vw,34px);flex-wrap:wrap;margin-bottom:clamp(28px,4vw,44px)}
.std__logo{flex:none;width:64px;height:64px;border-radius:var(--r-lg);background:rgba(79,168,245,.13);display:grid;place-items:center}
.std__logo svg{width:32px;height:32px;stroke:#fff;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.std{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media(max-width:900px){.std{grid-template-columns:1fr}}
.stdc{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-lg);padding:28px 28px 30px}
.stdc__i{width:42px;height:42px;border-radius:var(--r-pill);background:rgba(79,168,245,.14);display:grid;place-items:center;margin-bottom:18px}
.stdc__i svg{width:20px;height:20px;stroke:#6FB4F7;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.stdc h3{margin:0 0 9px;font-family:var(--fd);font-weight:500;font-size:1.24rem;letter-spacing:-.018em;color:#fff}
.stdc p{margin:0;font-size:.95rem;line-height:1.58;color:#93A4BA}
.sevn{display:grid;grid-template-columns:1fr 1fr;gap:8px 20px;margin:20px 0 0;padding:0;list-style:none}
.sevn li{display:flex;align-items:center;gap:9px;font-size:14px;color:#C3D2E4}
.sevn svg{width:13px;height:13px;stroke:#6FB4F7;stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none}
.std3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}
@media(max-width:820px){.std3{grid-template-columns:1fr}}
.std3 .stdc b{display:block;font-family:var(--fd);font-size:2.4rem;font-weight:500;letter-spacing:-.035em;
  color:#fff;line-height:1;margin-bottom:12px;font-variant-numeric:tabular-nums}
.std3 .stdc a{color:#6FB4F7;font-weight:600}

/* ---------- quality (stats + tabs) ---------- */
.qwrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);gap:clamp(26px,4vw,60px);align-items:center}
@media(max-width:940px){.qwrap{grid-template-columns:1fr}}
.qstats{display:flex;gap:clamp(18px,3vw,38px);flex-wrap:wrap;margin:24px 0 26px;padding:0;list-style:none}
.qstats li{display:flex;align-items:baseline;gap:9px}
.qstats b{font-family:var(--fd);font-size:1.7rem;font-weight:600;letter-spacing:-.03em;color:var(--navy)}
.qstats span{font-size:12.5px;font-weight:600;color:var(--grey);line-height:1.25;max-width:9ch}

/* CSS-only radio/label tabs — no JS required.
   Structure: .qtabs > (input+label)×n, .qpanels (sibling of the inputs,
   so the ~ general-sibling combinator below can reach it). */
.qtabs{padding:2px 0 0}
.qtabs input[type="radio"]{position:absolute;opacity:0;pointer-events:none}
.qtab{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;cursor:pointer;border:1px solid var(--line);
  border-radius:var(--r-pill);background:var(--paper);color:var(--grey);font-size:13.5px;font-weight:600;padding:10px 17px;margin:0 8px 14px 0;transition:.2s var(--ease)}
.qtab:hover{color:var(--navy);border-color:var(--line2)}
.qtabs input[type="radio"]:checked+.qtab{background:var(--ink);border-color:var(--ink);color:#fff}
.qpanels{margin-top:4px}
.qpanel{display:none;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper);padding:clamp(22px,3vw,30px);box-shadow:var(--sh-1)}
.qtabs input[type="radio"]:nth-of-type(1):checked~.qpanels .qpanel:nth-of-type(1),
.qtabs input[type="radio"]:nth-of-type(2):checked~.qpanels .qpanel:nth-of-type(2),
.qtabs input[type="radio"]:nth-of-type(3):checked~.qpanels .qpanel:nth-of-type(3),
.qtabs input[type="radio"]:nth-of-type(4):checked~.qpanels .qpanel:nth-of-type(4),
.qtabs input[type="radio"]:nth-of-type(5):checked~.qpanels .qpanel:nth-of-type(5),
.qtabs input[type="radio"]:nth-of-type(6):checked~.qpanels .qpanel:nth-of-type(6),
.qtabs input[type="radio"]:nth-of-type(7):checked~.qpanels .qpanel:nth-of-type(7){display:block}
.qpanel__h{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.qpanel h3{margin:0;font-size:1.16rem;font-weight:700;letter-spacing:-.018em}
.qpanel p{margin:0;font-size:.98rem;line-height:1.6;color:var(--grey)}
.why{margin-top:18px;padding:15px 18px;border-left:3px solid var(--blue);background:var(--mist);border-radius:0 var(--r-sm) var(--r-sm) 0}
.why b{color:var(--ink);font-weight:700}
.qvial{position:relative;border-radius:var(--r-xl);overflow:hidden;aspect-ratio:1/1;
  background:radial-gradient(closest-side,#E9F3FE,#FFFFFF)}
.qvial img{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply}
.qvial .chip{position:absolute;top:16px;right:16px;background:rgba(255,255,255,.94);color:var(--navy);box-shadow:var(--sh-1)}
.qproof{position:absolute;left:16px;bottom:16px;background:rgba(255,255,255,.94);border-radius:var(--r-md);
  padding:12px 16px;box-shadow:var(--sh-1);display:flex;align-items:center;gap:11px}
.qproof svg{width:19px;height:19px;stroke:var(--blue);stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.qproof b{display:block;font-size:13.5px;font-weight:700;color:var(--ink)}
.qproof span{font-size:11.5px;color:var(--grey)}

/* ---------- product grid (shared by homepage rail + shop archive) ----------
   WooCommerce renders products into <div class="woocommerce"><ul class="products">
   <li class="product card">…</li></ul></div> — our content-product.php puts the
   "card" class directly on the <li>, so .card below styles it wherever it appears. */
.woocommerce ul.products{display:grid!important;grid-template-columns:repeat(4,1fr);gap:18px;align-items:stretch;list-style:none;margin:0;padding:0}
/* WooCommerce's own woocommerce-layout.css still ships the old float-based
   grid (li.product{float:left;width:22.05%;margin:0 3.8%...}) at equal CSS
   specificity to the reset below — !important guarantees our grid always
   wins regardless of stylesheet registration order. */
.woocommerce ul.products li.product{width:auto!important;margin:0!important;float:none!important;clear:none!important}
/* Same root cause as above, different property: woocommerce-layout.css's
   float-grid rule (`ul.products li.product{padding:0;…}`) is MORE specific
   (2 tags + 2 classes) than our plain `.card{padding:12px 12px 20px}` (1
   class), so it silently zeroed the card's own padding — collapsing the
   gap around the image/corners and under the add-to-cart button. */
.woocommerce ul.products li.product.card{padding:12px 12px 20px!important}
/* CONFIRMED ROOT CAUSE (verified via headless-browser computed-style
   inspection) of the "first grid column empty, cards shifted right"
   bug: WooCommerce's clearfix hack — `ul.products::before,::after{
   content:" ";display:table}` — is a leftover from the old float
   layout. Because display isn't `none`, that pseudo-element generates
   a real box, which becomes the grid's literal first item (pseudo-
   elements are part of the box tree), pushing every real product card
   one cell to the right. Removing the generated content fixes it. */
.woocommerce ul.products::before,.woocommerce ul.products::after{content:none!important;display:none!important}
@media(max-width:1140px){.woocommerce ul.products{grid-template-columns:repeat(3,1fr)}}
@media(max-width:860px){.woocommerce ul.products{grid-template-columns:repeat(2,1fr);gap:14px}}
@media(max-width:520px){.woocommerce ul.products{grid-template-columns:1fr}}

/* homepage "Featured Compounds" rail: horizontal scroll on small screens
   instead of wrapping. Selector is `.woocommerce.rail ul.products` (not the
   shorter `.rail .products`) to outrank `.woocommerce ul.products{display:
   grid!important}` above (a fix for a separate WooCommerce conflict) —
   with both rules marked !important, the tie is broken by specificity, and
   the shorter selector was actually LESS specific (2 classes vs 2 classes
   + the ul element), so it never won regardless of the media query. */
.woocommerce.rail ul.products{grid-template-columns:repeat(4,1fr)}
@media(max-width:1140px){.woocommerce.rail ul.products{grid-template-columns:repeat(3,1fr)}}
@media(max-width:860px){
  .woocommerce.rail ul.products{display:flex!important;grid-template-columns:none!important;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;margin-inline:calc(var(--pad)*-1);padding:4px var(--pad) 8px}
  .woocommerce.rail ul.products::-webkit-scrollbar{display:none}
  .woocommerce.rail ul.products li.product{flex:0 0 min(78%,318px)!important;scroll-snap-align:center}}
/* "View All" slot — an extra, blank (no card background/border) <li>
   appended after the real products (render.php), riding along as the last
   stop in the mobile swipe rail instead of sitting below it. Its .railhint
   link inside is the exact same element/style as the swipe hint below the
   rail — not a lookalike copy — so the two are guaranteed to always match.
   Desktop never sees it: that view is a static grid (no swiping), where a
   trailing odd slot would look like a stray leftover — the existing
   .railcta button below the grid already covers desktop. */
li.product.aa-view-all-card{display:none!important;background:none;border:none;box-shadow:none}
@media(max-width:860px){
  .woocommerce.rail ul.products li.product.aa-view-all-card{display:flex!important;align-items:center;justify-content:center}
  /* Bigger than the shared .railhint base on purpose — this is the one
     spot in the swipe rail standing in for a whole card, so it needs more
     visual weight than the plain one-line hint below the rail uses. */
  .aa-view-all-card .railhint{margin-top:0;gap:12px;font-size:17px}
  .aa-view-all-card .railhint svg{width:24px;height:24px}
}
.railcta{display:flex;align-items:center;gap:clamp(14px,4vw,34px);margin-top:clamp(30px,4vw,44px)}
.railcta::before,.railcta::after{content:"";flex:1;height:1px;background:var(--line)}
/* ~25-30% larger than the base .btn — this "View all N products" link is
   the section's own closing CTA, not a generic button, so it's scoped here
   rather than bumping .btn sitewide. */
.railcta .btn{flex:none;font-size:19px;padding:20px 41px}
.railcta .btn svg{width:22px;height:22px}
@media(max-width:520px){.railcta::before,.railcta::after{display:none}.railcta .btn{flex:1}}
.railhint{display:none;align-items:center;gap:9px;margin-top:16px;color:var(--grey);font-size:13px;font-weight:500}
@media(max-width:860px){.railhint{display:flex}}
.railhint svg{width:16px;height:16px;stroke:var(--blue);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none;animation:ndg 1.9s var(--ease) infinite}
@keyframes ndg{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}

/* ---------- product card ---------- */
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:12px 12px 20px;
  display:flex;flex-direction:column;list-style:none;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)}
.card:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:var(--line2)}
.card__m{position:relative;display:block;border-radius:var(--r-md);overflow:hidden;aspect-ratio:1/1;
  background:radial-gradient(closest-side,#E4F0FD 10%,#F7FBFF 70%,#FFFFFF)}
.card__m img{width:100%;height:100%;object-fit:contain;padding:7%;transition:transform .6s var(--ease)}
.card:hover .card__m img{transform:scale(1.06)}
.card__p{position:absolute;top:12px;left:12px;background:rgba(255,255,255,.95);color:var(--navy);box-shadow:var(--sh-1)}
.card__p svg{stroke:var(--blue)}
.card__out{position:absolute;inset:auto 12px 12px 12px;background:rgba(8,17,31,.86);color:#fff;
  border-radius:var(--r-pill);font-size:11.5px;font-weight:700;padding:7px 12px;text-align:center}
.card__b{padding:18px 10px 0;display:flex;flex-direction:column;gap:14px;flex:1}
.card__n{font-size:1.1rem;font-weight:700;letter-spacing:-.02em;line-height:1.22;margin:0}
.card__n a:hover{color:var(--blue)}
.card__s{font-family:var(--fm);font-size:11.5px;color:var(--grey);margin:6px 0 0}
.sizes{display:flex;gap:7px;flex-wrap:wrap}
.size{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--paper);
  padding:8px 14px;font-family:var(--fm);font-size:12.5px;font-weight:500;cursor:pointer;color:var(--grey);transition:.2s var(--ease)}
.size:hover{border-color:var(--line2);color:var(--navy)}
.size[aria-pressed="true"]{border-color:var(--navy);color:#fff;background:var(--navy)}
.size[style*="cursor:default"]{cursor:default}
.size[style*="cursor:default"]:hover{border-color:var(--line);color:var(--grey)}
.card__v{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;font-weight:600;color:var(--grey)}
.card__v span{display:inline-flex;align-items:center;gap:6px}
.card__v svg{width:12px;height:12px;stroke:var(--good);stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
.card__f{margin-top:auto;display:flex;flex-direction:column;gap:12px;padding-top:14px;border-top:1px solid var(--line)}
.card__r{display:flex;justify-content:space-between;align-items:center;gap:12px}
.card__pr{font-size:1.36rem;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.card__pr del{opacity:.5;font-weight:500;font-size:1rem;margin-right:6px}
.card__pr ins{text-decoration:none}

/* WooCommerce's own woocommerce.css ships tag+class-heavy selectors
   (e.g. `ul.products li.product h3{padding:.5em 0;font-size:1em}`,
   `ul.products li.product .price{color:#958e09;font-size:.857em}`,
   `ul.products li.product a img{margin:0 0 1em}`) that are MORE
   specific than our plain `.card__n`/`.card__pr`/`.card__m img` classes,
   so they silently win on padding/font-size/color/margin. Same class of
   bug as the earlier grid conflict — !important guarantees our design
   wins here too, regardless of WooCommerce's own stylesheet. */
.woocommerce ul.products li.product .card__m img{margin:0!important;width:100%!important;height:100%!important;object-fit:contain!important}
.woocommerce ul.products li.product .card__n{padding:0!important;margin:0!important;font-size:1.1rem!important;font-weight:700!important;letter-spacing:-.02em!important;line-height:1.22!important}
.woocommerce ul.products li.product .card__pr{display:block!important;margin:0!important;font-size:1.36rem!important;font-weight:700!important;letter-spacing:-.03em!important;color:var(--ink)!important}
.woocommerce ul.products li.product .card__pr .price,
.woocommerce ul.products li.product .card__pr .woocommerce-Price-amount{font-size:inherit!important;font-weight:inherit!important;color:inherit!important;display:inline!important}
.woocommerce ul.products li.product .card__pr del{opacity:.5!important;font-weight:500!important;font-size:1rem!important;margin-right:6px!important;color:inherit!important}
.woocommerce ul.products li.product .card__pr ins{text-decoration:none!important;background:none!important}
.woocommerce ul.products li.product .card__f .button{display:inline-flex!important;align-items:center;justify-content:center;gap:.6em;
  width:100%!important;margin:0!important;font-size:15px!important;font-weight:700!important;padding:16px 32px!important;
  border:1.5px solid var(--navy)!important;background:var(--navy)!important;color:#fff!important;cursor:pointer;
  border-radius:var(--r-pill)!important;transition:background .22s var(--ease),box-shadow .22s var(--ease),transform .22s var(--ease)}
.woocommerce ul.products li.product .card__f .button:hover{background:#00408F!important;box-shadow:0 10px 26px rgba(0,48,107,.28);transform:translateY(-1px)}
.woocommerce ul.products li.product .card__f .button.loading{opacity:.6!important}
.woocommerce ul.products li.product .card__f .added_to_cart{display:block!important;margin-top:8px!important;text-align:center;font-size:12.5px!important;font-weight:600;color:var(--navy)!important}

/* ---------- shop page ---------- */
.phead{padding:clamp(24px,4vw,40px) 0 0}
.phead h1{margin:14px 0 0}
.shopbar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:space-between;
  padding:16px 0 18px;border-block:1px solid var(--line);margin-bottom:26px}
.shopbar__l{display:flex;gap:10px;flex-wrap:wrap;align-items:center;flex:1 1 320px;min-width:0}
.shopsearch{position:relative;flex:1 1 220px;min-width:0;max-width:340px}
.shopsearch input{width:100%;font-size:14.5px;padding:12px 18px 12px 42px;border:1px solid var(--line2);
  border-radius:var(--r-pill);background:var(--paper)}
.shopsearch input:focus{border-color:var(--navy);outline:none}
.shopsearch svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:15px;height:15px;
  stroke:var(--grey);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.woocommerce-result-count{font-size:12.5px;font-weight:600;color:var(--grey);margin:0}
.sortwrap{display:flex;align-items:center;gap:9px;flex:none}
.woocommerce-ordering select{font-size:14px;padding:11px 16px;border:1px solid var(--line2);border-radius:var(--r-pill);
  background:var(--paper);cursor:pointer}
.woocommerce-ordering select:focus{border-color:var(--navy);outline:none}
.woocommerce-pagination{margin-top:clamp(30px,4vw,44px);display:flex;justify-content:center}
.woocommerce-pagination ul{display:flex;gap:6px;list-style:none;margin:0;padding:0}
.woocommerce-pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;
  padding:0 10px;border:1px solid var(--line);border-radius:var(--r-pill);font-size:13.5px;font-weight:600;color:var(--grey)}
.woocommerce-pagination .page-numbers.current{background:var(--navy);border-color:var(--navy);color:#fff}
.woocommerce-pagination .page-numbers:not(.current):not(span):hover{border-color:var(--line2);color:var(--navy)}
/* WooCommerce prints wc_print_notices() as a bare child of <main> on the
   single product page (and cart/checkout) — nothing there insets it from
   the viewport edge the way archive-product.php's own explicit
   `<div class="wrap">wc_print_notices()</div>` already does on the shop
   page, so it rendered full-bleed with square corners (the border-radius
   below had no visible edge to round against). Give the wrapper the same
   max-width/centering/side-padding as .wrap by default, then cancel just
   the side-padding (not the top margin) when it's already inside a real
   .wrap — otherwise the shop page's own notices would get inset twice.
   --pad is already a clamp(), so this is responsive with no extra media
   query needed. */
.woocommerce-notices-wrapper{max-width:var(--maxw);margin:clamp(20px,3vw,32px) auto 0;padding-inline:var(--pad)}
.wrap .woocommerce-notices-wrapper{max-width:none;padding-inline:0}
.woocommerce-info,.woocommerce-message{border:1px solid var(--line);border-radius:var(--r-md);padding:16px 20px;
  background:var(--mist);color:var(--ink);font-size:14.5px;display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;margin:0 0 20px;list-style:none}
/* WooCommerce prints its own bare `.button.wc-forward` link inside these
   notices (e.g. "View cart" after an add-to-cart) — style it like the
   rest of the site's pill buttons instead of leaving WP/WC's default
   button chrome, which clashed with the card styling above.
   !important: WooCommerce's own `.woocommerce a.button{...}` rule
   (woocommerce.css) carries a `.woocommerce` class + `a` element + a
   `.button` class — 2 classes AND 1 element — which outranks a plain
   2-class selector like `.woocommerce-message .button` regardless of
   stylesheet load order (elements count in the specificity tie-break
   once the class count is equal). `float:right` from that same WC rule
   is harmless here since this parent is `display:flex`, where float has
   no effect on a flex item — only the button's own chrome (background/
   color/radius/padding) actually needs forcing. */
.woocommerce-info .button,.woocommerce-message .button,.woocommerce-error .button{
  flex:none;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;
  font-size:13.5px;font-weight:600!important;padding:10px 20px!important;border-radius:var(--r-pill)!important;
  background:var(--navy)!important;color:#fff!important;text-decoration:none;border:0!important;
  cursor:pointer;transition:.2s var(--ease)}
.woocommerce-info .button:hover,.woocommerce-message .button:hover,.woocommerce-error .button:hover{background:var(--blue)!important}
/* WC's error/notice template wraps each error in its own <li> inside a
   single <ul class="woocommerce-error">, unlike the single-<div> message/
   info templates — matched to the same soft-red "required" palette
   already used for the checkout page's .must warning box, so an error
   here reads as the same severity level as everywhere else on the site. */
.woocommerce-error{list-style:none;margin:0 0 20px;padding:6px 20px;border:1.5px solid #E8C4B8;
  border-radius:var(--r-md);background:#FDF4F0;color:#6B3A26;font-size:14.5px}
.woocommerce-error li{display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;padding:10px 0}
.woocommerce-error li:not(:last-child){border-bottom:1px solid rgba(232,196,184,.6)}
/* WC's base rule reserves 3.5em of left padding for an icon-font ::before
   glyph positioned absolutely at left:1.5em — our padding above doesn't
   reserve that space (this theme's other alert boxes, .must/.ck/.capt,
   are icon-free too), so the glyph would otherwise overlap the first
   word of text. Suppress it instead of re-adding the padding. */
.woocommerce-error::before,.woocommerce-info::before,.woocommerce-message::before{content:none!important}
.coaempty{text-align:center;padding:56px 20px;border:1px dashed var(--line2);border-radius:var(--r-lg);color:var(--grey)}

/* ---------- newsletter ---------- */
.news{border-radius:var(--r-xl);padding:clamp(34px,5vw,58px);text-align:center;position:relative;overflow:hidden;isolation:isolate;
  background:#06101E}
.news::before{content:"";position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(680px 320px at 26% 8%,rgba(79,168,245,.25),transparent 62%),
             radial-gradient(560px 300px at 82% 96%,rgba(0,48,107,.55),transparent 60%)}
.news>*{position:relative;z-index:1}
.news h2{color:#fff;margin:12px auto 12px;max-width:16ch}
.news p{color:#9FB2C9;margin:0 auto 26px;max-width:50ch}
.news form{display:flex;gap:9px;flex-wrap:wrap;max-width:520px;margin:0 auto;justify-content:center}
.news input{flex:1 1 240px;font-size:15px;padding:15px 22px;border-radius:var(--r-pill);
  border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.09);color:#fff}
.news input::placeholder{color:#8CA2BC}
.news input:focus{border-color:#fff;outline:none;background:rgba(255,255,255,.15)}
.news .btn{background:#fff;color:var(--ink);border-color:#fff}
.news .btn:hover{background:var(--sky);border-color:var(--sky);color:var(--ink)}
/* Once the input wraps to its own line on narrow screens, stretch the
   button to match its full width instead of staying pill-sized — matches
   this theme's own mobile stacking convention (e.g. .railcta .btn{flex:1}). */
@media(max-width:520px){.news .btn{flex:1 1 100%}}
.news small{display:block;margin-top:14px;font-size:12.5px;color:#7E92AB}

/* ---------- faq ---------- */
.faq{max-width:900px;display:grid;gap:11px}
.faq details{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);padding:0 24px}
.faq details[open]{border-color:var(--line2)}
.faq summary{list-style:none;cursor:pointer;padding:20px 0;display:flex;align-items:flex-start;justify-content:space-between;gap:22px;font-size:1.04rem;font-weight:600;letter-spacing:-.014em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:11px;height:11px;margin-top:7px;border-right:2px solid var(--blue);
  border-bottom:2px solid var(--blue);transform:rotate(45deg);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq p{margin:0 0 20px;max-width:70ch;color:var(--grey);font-size:.97rem;line-height:1.65}
.faq a{color:var(--blue);font-weight:600}

/* ---------- COA banner ---------- */
.coabnr{position:relative;overflow:hidden;isolation:isolate;border-radius:var(--r-xl);background:#06101E;padding:clamp(34px,5vw,58px);text-align:center}
.coabnr::before{content:"";position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(700px 320px at 30% 10%,rgba(79,168,245,.24),transparent 60%),
             radial-gradient(600px 300px at 80% 90%,rgba(0,48,107,.5),transparent 60%)}
.coabnr>*{position:relative;z-index:1}
.coabnr h2{color:#fff;margin:12px 0 12px}
.coabnr p{color:#9FB2C9;margin:0 auto 26px;max-width:52ch}
.coabnr .btn{background:#fff;color:var(--ink);border-color:#fff}
.coabnr .btn:hover{background:var(--sky);color:var(--ink);border-color:var(--sky)}

/* ---------- filter tabs (used by the COA Library's All / Latest lots) ---------- */
.tabs{display:flex;gap:9px;overflow-x:auto;scrollbar-width:none;padding:2px;margin:0 -2px 24px}
.tabs::-webkit-scrollbar{display:none}
.tab{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;cursor:pointer;border:1px solid var(--line);
  border-radius:var(--r-pill);background:var(--paper);color:var(--grey);font-size:14px;font-weight:600;padding:10px 19px;transition:.2s var(--ease)}
.tab:hover{color:var(--navy);border-color:var(--line2)}
.tab[aria-selected="true"]{background:var(--navy);border-color:var(--navy);color:#fff;box-shadow:0 6px 16px rgba(0,48,107,.2)}

/* ---------- legal pages (Terms & Conditions / Privacy Policy / Shipping Policy) ---------- */
.legal-doc[hidden]{display:none}
.legalnav{display:flex;gap:9px;flex-wrap:wrap;margin:20px 0 30px}
.legal h2{font-family:var(--fd);font-weight:500;font-size:1.35rem;letter-spacing:-.02em;margin:34px 0 12px;color:var(--navy)}
.legal h2:first-child{margin-top:0}
.legal p{font-size:.96rem;line-height:1.7;color:var(--grey);margin:0 0 14px;max-width:76ch}
.legal ul{margin:0 0 16px;padding-left:18px;max-width:76ch;list-style:none}
.legal li{font-size:.94rem;line-height:1.6;color:var(--grey);margin-bottom:6px;position:relative;padding-left:14px}
.legal li::before{content:"";position:absolute;left:0;top:.72em;width:4px;height:4px;border-radius:50%;background:var(--line2)}
.legal strong{color:var(--ink)}
.legal .caps{font-size:.9rem;letter-spacing:.01em}

/* ---------- COA library ---------- */
.coabar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:20px}
.coasearch{position:relative;flex:1 1 280px}
.coasearch input{width:100%;font-size:15px;padding:15px 20px 15px 48px;border:1px solid var(--line2);
  border-radius:var(--r-pill);background:var(--paper)}
.coasearch input:focus{border-color:var(--navy);outline:none}
.coasearch svg{position:absolute;left:19px;top:50%;transform:translateY(-50%);width:16px;height:16px;
  stroke:var(--grey);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.coalist{display:grid;gap:10px}
.coacard{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper);padding:18px 22px;
  display:grid;grid-template-columns:56px 1fr auto;gap:18px;align-items:center;transition:.25s var(--ease)}
.coacard:hover{border-color:var(--line2);box-shadow:var(--sh-1)}
.coacard__i{width:56px;height:56px;border-radius:var(--r-sm);background:radial-gradient(closest-side,#E4F0FD,#fff);overflow:hidden}
.coacard__i img{display:block;width:100%;height:100%;object-fit:contain;padding:8%}
.coacard__n{margin:0;font-size:1.04rem;font-weight:700;letter-spacing:-.018em}
.coacard__m{margin:6px 0 0;font-size:12.5px;color:var(--grey);display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.coacard__m b{font-family:var(--fm);font-weight:500;color:var(--ink)}
.coacard__r{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:flex-end}
.coacard__p{font-family:var(--fm);font-size:1.05rem;font-weight:500;color:var(--navy);font-variant-numeric:tabular-nums}
@media(max-width:760px){.coacard{grid-template-columns:56px 1fr}
  .coacard__r{grid-column:1/-1;justify-content:space-between;padding-top:14px;border-top:1px solid var(--line)}}

/* ---------- COA product detail page (variation switcher + current/previous batches) ---------- */
.coa-detail__section{margin-top:28px}
.coa-detail__section h3{margin:0 0 14px;font-family:var(--fd);font-weight:500;font-size:1.1rem;letter-spacing:-.018em}
.coa-lotcard{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper);padding:18px 22px}
.coa-lotcard__h{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.coa-qc{display:grid;grid-template-columns:repeat(2,1fr);gap:0 24px;margin:0;padding-top:14px;border-top:1px solid var(--line)}
@media(max-width:560px){.coa-qc{grid-template-columns:1fr}}
.coa-qc__r{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px dashed var(--line)}
.coa-qc__r dt{font-size:12.5px;color:var(--grey)}
.coa-qc__r dd{margin:0;font-family:var(--fm);font-size:13px;font-weight:500;color:var(--ink);text-align:right}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:#AFBDCE;padding:clamp(50px,7vw,80px) 0 0}
.foot a{color:#AFBDCE}
.foot .small{color:#7A8AA0}
.foot a:hover{color:#fff}
.foot__t{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:clamp(24px,4vw,44px)}
@media(max-width:880px){.foot__t{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.foot__t{grid-template-columns:1fr;gap:26px}}
.foot__b{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.foot__b span{font-family:var(--fd);font-weight:500;font-size:1.05rem;letter-spacing:.14em;text-transform:uppercase;color:#fff}
.foot h4{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#7A8AA0;margin:0 0 18px}
.foot ul{list-style:none;margin:0;padding:0;font-size:.94rem}
.foot li+li{margin-top:10px}
.foot__addr{font-size:.9rem;line-height:1.6;color:#7A8AA0;margin:16px 0 0}
.ruo{margin-top:44px;border-top:1px solid #1B2839;padding:24px 0 26px;background:rgba(255,255,255,.02)}
.ruo p{margin:0 auto;max-width:96ch;font-size:12.6px;line-height:1.72;color:#8496AD;text-align:center}
.ruo a{color:var(--sky);text-decoration:underline}
.foot__c{border-top:1px solid #1B2839;padding:18px var(--pad) 26px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:12.5px;color:#7A8AA0}

/* ---------- free-shipping progress bar ---------- */
.ship{margin-top:20px;border:1px solid var(--line);border-radius:var(--r-md);padding:14px 16px;background:var(--mist)}
.ship__t{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:600;margin-bottom:10px}
.ship__t svg{width:18px;height:18px;stroke:var(--blue);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.bar{height:7px;border-radius:var(--r-pill);background:var(--line);overflow:hidden}
.bar i{display:block;height:100%;border-radius:var(--r-pill);background:linear-gradient(90deg,var(--blue),var(--cyan));transition:width .5s var(--ease)}
.ship.done{background:#E4F3EB;border-color:#BFE3CE}
.ship.done .ship__t{color:var(--good)}
.ship.done .ship__t svg{stroke:var(--good)}
.ship.done .bar i{background:var(--good)}

/* ---------- scroll-reveal (sections fade/slide in as they enter view) ----------
   Toggled by IntersectionObserver in custom.js: add `rv` to a section wrapper's
   class list and it gets a one-time reveal the first time it scrolls into view. */
.rv{opacity:0;transform:translateY(10px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.rv.in{opacity:1;transform:none}
/* The reveal-on-scroll JS (custom.js) only runs on the live front end —
   it never runs inside the block editor, so .rv would sit at opacity:0
   forever there. Show content immediately in the editor canvas instead. */
.editor-styles-wrapper .rv{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0ms!important;transition-duration:.001ms!important}
  .rv,.slab{opacity:1;transform:none}
  .railhint svg,.stage img{animation:none}
}

/* ---------- block editor: full-bleed section blocks ----------
   This theme has no theme.json content-width constraint, but the block
   editor's own default canvas styles still narrow the root container.
   Every artisan-aminos/* section block declares supports.align:["full"]
   and defaults to it, which normally handles this — this is a defensive
   second layer so sections are always edge-to-edge in the editor canvas,
   matching the front end exactly, even before that class is applied. */
.editor-styles-wrapper{padding:0!important}
.editor-styles-wrapper .is-root-container{max-width:none!important;padding-left:0!important;padding-right:0!important}
.editor-styles-wrapper .is-root-container > .wp-block{max-width:none!important;margin-left:0!important;margin-right:0!important}

/* ---------- breadcrumb (used on product/about/contact/COA pages) ---------- */
.crumbs{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:13.5px;color:var(--grey);padding-top:clamp(20px,3vw,32px)}
.crumbs svg{width:12px;height:12px;stroke:var(--line2);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;transform:rotate(0)}
.crumbs a:hover{color:var(--navy)}
.crumbs b{color:var(--ink);font-weight:600}

/* ---------- about / contact / legal (image + prose split, commitment pills) ---------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(26px,5vw,64px);align-items:center}
.split>*{min-width:0}
@media(max-width:880px){.split{grid-template-columns:1fr;gap:26px}}
.split__i{border-radius:var(--r-xl);overflow:hidden;aspect-ratio:4/3;background:radial-gradient(closest-side,#E4F0FD,#fff)}
.split__i img{display:block;width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply}
.prose p{font-size:1.04rem;line-height:1.7;color:var(--grey);margin:0 0 18px;max-width:64ch}
.prose p:last-child{margin-bottom:0}
.prose strong{color:var(--ink);font-weight:600}
.pill3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:8px}
.pill3>*{min-width:0}
@media(max-width:820px){.pill3{grid-template-columns:1fr}}
.pill3 div{border:1px solid var(--line);border-radius:var(--r-lg);padding:24px 24px 26px;background:var(--paper)}
.pill3 h3{margin:0 0 8px;font-family:var(--fd);font-weight:500;font-size:1.2rem;letter-spacing:-.018em}
.pill3 p{margin:0;font-size:.94rem;line-height:1.55;color:var(--grey)}

/* ---------- contact page (form box + sidebar mini cards) ---------- */
.ctc{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(22px,3vw,36px);align-items:start}
@media(max-width:940px){.ctc{grid-template-columns:1fr}}
.box{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper);padding:clamp(22px,3vw,30px)}
.box h2{margin:0 0 6px;font-size:1.24rem;font-weight:700;letter-spacing:-.02em}
.box .sub{margin:0 0 22px;font-size:.93rem;color:var(--grey)}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:600px){.fields{grid-template-columns:1fr}}
.fl{display:flex;flex-direction:column;gap:7px}
.fl--f{grid-column:1/-1}
.fl label{font-size:12.5px;font-weight:600;color:var(--grey)}
.fl input,.fl select,.fl textarea{font-size:15px;padding:13px 16px;border:1px solid var(--line2);border-radius:var(--r-sm);background:var(--paper);transition:border-color .2s}
.fl input:focus,.fl select:focus,.fl textarea:focus{border-color:var(--navy);outline:none}
.fl input::placeholder,.fl textarea::placeholder{color:var(--grey);opacity:.5}
.mini{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper);padding:22px 24px;margin-bottom:14px}
.mini h4{margin:0 0 4px;font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--grey)}
.mini p{margin:0;font-size:15px;font-weight:600}
.mini a{color:var(--blue)}
.qa{border-top:1px solid var(--line);padding-top:14px;margin-top:14px}
.qa b{display:block;font-size:14px;font-weight:700;margin-bottom:4px}
.qa p{margin:0 0 16px;font-size:13.4px;line-height:1.55;color:var(--grey)}
.qa p:last-child{margin-bottom:0}
.qa a{color:var(--blue);font-weight:600}

/* ---------- single product page ---------- */
.pdp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(26px,4vw,58px);align-items:start;padding-top:clamp(20px,3vw,32px)}
@media(max-width:940px){.pdp{grid-template-columns:1fr;gap:26px}}
.pdp h1,.pdp .product_title{font-family:var(--fd);font-weight:500;font-size:clamp(1.8rem,3.6vw,2.6rem);line-height:1.08;letter-spacing:-.028em;margin:0 0 8px}
/* WooCommerce's own woocommerce.css ships
   `.woocommerce:where(...) div.product p.price,...span.price{color:#958e09;font-size:1.25em}`
   — the :where() wrapper contributes zero specificity, so once unwrapped
   this selector ties our own `.woocommerce div.product p.price` exactly
   (3 classes, 2 elements each). Currently our stylesheet happens to load
   after WooCommerce's and wins the coin-flip, but that's enqueue-order
   luck, not a guarantee — !important pins the design's ink-colored,
   2rem price regardless of load order. */
.pdp__pr,.woocommerce div.product p.price,.woocommerce div.product span.price{font-size:2rem!important;font-weight:700;letter-spacing:-.035em;margin:14px 0 18px;font-variant-numeric:tabular-nums;color:var(--ink)!important}
/* Variable products render TWO separate `.price` elements: WooCommerce's own
   always-visible range price ("$123 – $456", a direct child of .summary,
   from woocommerce_template_single_price() at hook priority 10) plus the
   variation-specific price inside .woocommerce-variation-price that
   assets/js/custom.js's auto-select keeps populated. The design only ever
   shows one concrete number, so the range price is hidden whenever a
   variations form is present — simple products (no .variations_form) are
   untouched and keep showing their one real .summary > p.price normally. */
.summary:has(.variations_form) > p.price{display:none}
/* Pulls the "In Testing" badge (rendered right after the price hook, see
   aa_in_testing_badge()) up snug against the price line instead of sitting
   in its own separately-spaced block. */
.summary p.price + .chip--warn{margin:-10px 0 16px;display:inline-flex}
/* Variable products hide the top p.price (above) in favour of the real
   per-variation price WooCommerce renders inside .woocommerce-variation-price
   once a size is selected — the badge's default position (right after the
   now-hidden p.price) would float oddly at the top of the summary with
   nothing next to it, so it's hidden there too; custom.js's existing
   found_variation handler moves this same element into
   .woocommerce-variation-price instead, next to the price that's actually
   showing. */
/* !important: needed to outrank the ".summary p.price + .chip--warn" rule
   above, which is more specific (it includes the "p" element) and would
   otherwise win despite coming first in the cascade. */
.summary:has(.variations_form) > .chip--warn{display:none!important}
.woocommerce-variation-price{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* gallery — skins WooCommerce's own gallery markup to match the final design's
   vial-art treatment (artisan-aminos-FINAL-v20.html: .gal__m / .gal__t). Every
   rule below is scoped under .woocommerce div.product div.images so it can
   only ever touch the single-product gallery, never shop-grid cards or any
   other img on the site.
   WooCommerce's own (legacy, pre-flexbox) woocommerce-layout.css still ships
   the old 2-column float grid: `.woocommerce div.product div.images{float:left;
   width:48%}` — the EXACT same selector as ours, an outright tie (both sides:
   3 classes — .woocommerce/.product/.images — and 2 elements — div/div), so
   it comes down to enqueue order alone for any property we don't also
   declare. Our .pdp grid makes `float` inert (grid items ignore float per
   spec), but `width:48%` is NOT inert — it was silently shrinking the
   gallery to 48% of its own grid column. Separately, plain woocommerce.css
   also ships `div.images{margin-bottom:2em}` on the same tied selector.
   !important removes the load-order dependency for all three rather than
   leaning on it. */
.woocommerce div.product div.images{max-width:480px;margin-inline:auto;width:auto!important;float:none!important;margin-bottom:0!important}
/* WooCommerce's own PhotoSwipe zoom trigger (`.woocommerce-product-gallery__trigger`,
   a hardcoded 🔍 emoji WordPress converts to an <img class="emoji">) has no
   equivalent in the reference design and no zoom feature is used here — our
   `.woocommerce div.product div.images img{width:100%!important;height:100%!important}`
   rule below also matches that unrelated emoji <img>, warping it. Hiding the
   trigger removes both the unwanted UI and the corrupted-icon rendering. */
.woocommerce-product-gallery__trigger{display:none!important}
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper,
.woocommerce div.product div.images img{border-radius:var(--r-xl)}
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper{
  overflow:hidden;aspect-ratio:1/1;background:radial-gradient(closest-side,#E4F0FD 10%,#F7FBFF 65%,#FFF)}
/* The wrapper's aspect-ratio gives IT a definite height, but the <img> sits
   two levels deeper (wrapper > .woocommerce-product-gallery__image > a >
   img) and CSS percentage heights only resolve against a DEFINITE ancestor
   height — every level in between must also have an explicit height, or the
   percentage silently computes as "auto" instead. Neither intermediate
   element had one, so despite object-fit:contain and height:100%!important
   below, the <img> fell back to its natural (272×600, very tall) aspect
   ratio and overflowed, getting clipped by the wrapper's overflow:hidden —
   confirmed via computed styles: the wrapper measured a correct 280×280,
   but the <img> measured 280×585. */
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image,
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image a{display:block;height:100%}
/* WooCommerce's own woocommerce.css ships the identically-specific
   `.woocommerce div.product div.images img{width:100%;height:auto;box-shadow:none}`
   — same selector, tied specificity — so whichever stylesheet is enqueued
   last wins the coin-flip on height. !important pins the design's
   height:100%/object-fit:contain "fill-and-contain" treatment regardless of
   stylesheet order. */
.woocommerce div.product div.images img{width:100%!important;height:100%!important;object-fit:contain!important;padding:5%!important}
.woocommerce div.product div.images .flex-control-thumbs{display:flex;gap:10px;margin-top:12px;max-width:480px;
  margin-inline:auto;flex-wrap:wrap;justify-content:center;list-style:none;padding:0}
.woocommerce div.product div.images .flex-control-thumbs li{flex:0 0 84px}
/* WooCommerce's own `.flex-control-thumbs li img{opacity:.5}` includes the
   `li` the design's thumb selector doesn't, making it MORE specific than a
   plain `.flex-control-thumbs img` rule — it wins regardless of load order
   and dims every inactive thumbnail to 50%. The final design shows thumbnails
   at full opacity, differentiated only by border/ring, so opacity is pinned
   here to match exactly. */
.woocommerce div.product div.images .flex-control-thumbs li img{border:1.5px solid transparent;border-radius:var(--r-md);
  aspect-ratio:1/1;object-fit:contain;padding:8%;background:radial-gradient(closest-side,#E4F0FD,#fff);cursor:pointer;
  opacity:1!important;margin:0!important}
.woocommerce div.product div.images .flex-control-thumbs li img.flex-active,
.woocommerce div.product div.images .flex-control-thumbs li img:hover{border-color:var(--navy);box-shadow:0 0 0 1px var(--navy) inset;opacity:1!important}

/* Per-variation thumbnail row (design: .gal__t / #pThumbs) — one thumb per
   strength, each showing that variation's own image; clicking one selects
   that size the same as its matching .size pill (assets/js/custom.js). Not
   the same thing as WooCommerce's own .flex-control-thumbs above, which
   are multiple photos of a single variation, not one photo per strength. */
.gal__t{display:flex;gap:10px;margin-top:12px;max-width:480px;margin-inline:auto;flex-wrap:wrap;justify-content:center}
.gal__t[hidden]{display:none}
.gal__t button{flex:0 0 84px;border:1.5px solid transparent;border-radius:var(--r-md);aspect-ratio:1/1;
  overflow:hidden;cursor:pointer;padding:0;background:radial-gradient(closest-side,#E4F0FD,#fff)}
.gal__t button img{width:100%;height:100%;object-fit:contain;padding:8%}
.gal__t button[aria-pressed="true"]{border-color:var(--navy);box-shadow:0 0 0 1px var(--navy) inset}

.infos{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:20px}
@media(max-width:520px){.infos{grid-template-columns:1fr}}
.info{display:flex;align-items:center;gap:11px;background:var(--mist);border:1px solid var(--line);border-radius:var(--r-md);padding:12px 14px;font-size:13px;font-weight:600}
.info svg{width:17px;height:17px;stroke:var(--blue);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none}
.lbl{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--grey);margin:0 0 10px}
/* Wraps the JS-generated .lbl + .sizes pill row that replaces WooCommerce's
   native variation <select> (assets/js/custom.js) — the real <table.variations>
   stays in the DOM (visually hidden via .sr) as the no-JS fallback. */
.aa-variation-pills{margin-bottom:20px}

/* "Bundle & save" pack tiers (settings/bundles.php) */
.packs{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
@media(max-width:560px){.packs{grid-template-columns:repeat(3,1fr)}}
.pack{border:1.5px solid var(--line);border-radius:var(--r-md);background:var(--paper);padding:12px 8px 11px;
  cursor:pointer;text-align:center;transition:.2s var(--ease);position:relative}
.pack:hover{border-color:var(--line2)}
.pack[aria-pressed="true"]{border-color:var(--navy);background:var(--mist)}
.pack.off{opacity:.45;cursor:not-allowed;background:var(--mist);border-color:var(--line)}
.pack.off:hover{border-color:var(--line)}
.pack.off b{text-decoration:line-through}
.pack s.no{color:var(--bad);font-weight:700}
.packnote{margin:10px 0 0;font-size:12.5px;font-weight:600;color:#8A5A1E}
.pack b{display:block;font-size:13px;font-weight:700;line-height:1.2}
.pack em{font-style:normal;display:block;font-size:11px;color:var(--grey);margin-top:3px}
.pack s{display:block;font-size:10.5px;color:var(--good);font-weight:700;margin-top:5px;text-decoration:none}

/* variations / add-to-cart form, skinning WooCommerce's own markup.
   WooCommerce's own woocommerce-layout.css ships the legacy 2-column float
   grid on div.summary too — `.woocommerce div.product div.summary{float:right;
   width:48%;clear:none}` — the exact same tied selector as the div.images
   fix above, so it was silently shrinking the whole right column to 48% of
   its own grid track (confirmed via computed styles: .summary measured
   280px wide inside a ~585px grid column, leaving ~300px of dead space at
   the page's right edge). woocommerce.css separately ships `.woocommerce
   div.product div.summary{margin-bottom:2em}`, tied the same way, which
   stacked an extra ~32px gap on top of the COA proof section's own top
   padding. All three cancelled unconditionally with !important rather than
   depending on selector specificity or enqueue order. */
.woocommerce div.product div.summary{margin-bottom:0!important;width:auto!important;float:none!important;clear:none!important}
.woocommerce div.product form.cart{margin-top:18px;margin-bottom:0!important}
.woocommerce div.product form.cart table.variations{width:100%;margin-bottom:14px}
.woocommerce div.product form.cart table.variations td{padding:0}
/* WooCommerce also sets `appearance:none` + a background-image chevron on
   this select; our rule overrides the background (removing the chevron)
   but never touches appearance, so the no-JS fallback select (assets/js/custom.js
   normally replaces it with clickable .size pills) was left with no visible
   dropdown indicator at all. appearance:auto restores the native arrow. */
.woocommerce div.product form.cart table.variations select{width:100%;font-size:14.5px;padding:12px 16px;
  border:1px solid var(--line2);border-radius:var(--r-pill);background:var(--paper);appearance:auto;-webkit-appearance:auto;-moz-appearance:auto}
/* WooCommerce's `.woocommerce div.product form.cart div.quantity{float:left;
   margin:0 4px 0 0}` is actually MORE specific than a bare `.quantity` on
   our side (its "div.quantity" contributes both a class and an element,
   same as the div.summary/div.images cases above) — float:none needs
   !important here, not just "we already win". Floats are inert on flex
   items anyway (.buyrow below is display:flex), so this is belt-and-braces
   rather than a visible fix, but it's unconditional now either way. */
.woocommerce div.product form.cart .quantity{display:inline-flex;align-items:center;border:1px solid var(--line);
  border-radius:var(--r-pill);overflow:hidden;margin-right:10px;float:none!important}
.woocommerce div.product form.cart .quantity .qty{width:36px;height:52px;border:0;background:none;text-align:center;
  font-family:var(--fm);font-variant-numeric:tabular-nums}
/* Native number-input spinner arrows don't exist in the design's custom
   .qty-dec/.qty-inc stepper — hidden so the input reads as plain text
   flanked by the two buttons, matching the design exactly. */
.woocommerce div.product form.cart .quantity .qty::-webkit-inner-spin-button,
.woocommerce div.product form.cart .quantity .qty::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.woocommerce div.product form.cart .quantity .qty{-moz-appearance:textfield;appearance:textfield}
.qty-dec,.qty-inc{width:44px;height:52px;border:0;background:none;cursor:pointer;font-size:18px;color:var(--navy);flex:none}
.qty-dec:hover,.qty-inc:hover{background:var(--mist)}
/* `.woocommerce div.product form.cart .button{vertical-align:middle;float:left}`
   is the EXACT same selector as ours — a true tie, decided only by enqueue
   order. !important on float removes that dependency. */
.woocommerce div.product form.cart .button,.single_add_to_cart_button{display:inline-flex;align-items:center;justify-content:center;
  gap:.6em;font-size:15px;font-weight:700;padding:16px 32px;border:1.5px solid var(--navy)!important;background:var(--navy)!important;
  color:#fff!important;cursor:pointer;border-radius:var(--r-pill)!important;transition:background .22s var(--ease),transform .22s var(--ease);
  flex:1 1 190px;float:none!important;vertical-align:top}
.woocommerce div.product form.cart .button:hover,.single_add_to_cart_button:hover{background:#00408F!important;transform:translateY(-1px)}
.buyrow{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:18px}
@media(max-width:420px){
  .qty-dec,.qty-inc{width:40px}
  .buyrow{gap:8px}
  .woocommerce div.product form.cart .button,.single_add_to_cart_button{padding:14px 22px!important;font-size:14px!important}
}

/* WooCommerce's own woocommerce.css ships `.woocommerce div.product p.stock{font-size:.92em}`
   — same selector as ours (2 classes, 2 elements each), so it ties rather
   than loses on specificity; !important removes the enqueue-order
   dependency, matching the same fix already applied to the price above. */
.stock,.woocommerce div.product p.stock{display:inline-flex;align-items:center;gap:8px;font-size:13px!important;font-weight:600;margin:14px 0 0;color:var(--good)}
.stock::before,.woocommerce div.product p.stock::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--good);flex:none}
.woocommerce div.product p.stock.out-of-stock{color:var(--bad)}
.woocommerce div.product p.stock.out-of-stock::before{background:var(--bad)}
/* Needs to outrank ".woocommerce div.product p.stock" above (2 classes + 2
   elements) — plain ".stock.low" (2 classes, 0 elements) loses that
   specificity fight and silently never overrides the green default color,
   which is exactly why this was rendering green instead of amber despite
   the "low" class being present. */
.stock.low,.woocommerce div.product p.stock.low{color:#8A5A1E}
.stock.low::before,.woocommerce div.product p.stock.low::before{background:#D9902B}

/* out-of-stock "Notify me" box (settings/woocommerce.php: aa_product_notify_form()) */
.notify{border:1px solid var(--line2);border-radius:var(--r-md);background:var(--mist);padding:18px;margin-top:18px}
.notify p{margin:0 0 12px;font-size:13.5px;line-height:1.5;color:var(--grey)}
.notify form{display:flex;gap:8px;flex-wrap:wrap}
.notify input{flex:1 1 190px;font-size:14.5px;padding:12px 16px;border:1px solid var(--line2);
  border-radius:var(--r-pill);background:var(--paper)}
.notify input:focus{border-color:var(--navy);outline:none}
/* Same "stack full-width on mobile" convention as .news .btn — the design's
   own .notify form{flex-wrap:wrap} leaves the button shrink-wrapped to its
   own small size when it drops to its own line, instead of matching the
   full-width input above it. */
@media(max-width:520px){.notify input,.notify .btn{flex:1 1 100%}}

/* "Add Reconstitution Solution" upsell (settings/woocommerce.php aa_product_recon_upsell) */
.bac{display:grid;grid-template-columns:56px 1fr auto;gap:14px;align-items:center;margin-top:18px;
  border:1px dashed var(--line2);border-radius:var(--r-md);background:var(--mist);padding:14px}
.bac__i{border-radius:var(--r-xs);overflow:hidden;aspect-ratio:1/1;background:var(--paper)}
.bac__i img{width:100%;height:100%;object-fit:contain}
.bac b{display:block;font-size:13.5px;font-weight:700}
.bac em{font-style:normal;font-size:12px;color:var(--grey)}
@media(max-width:480px){.bac{grid-template-columns:44px 1fr;gap:10px}.bac .btn{grid-column:1/-1}}

.acc{display:grid;gap:10px;margin-top:22px}
.acc details{border:1px solid var(--line);border-radius:var(--r-md);padding:0 20px;margin-bottom:10px}
.acc details:last-child{margin-bottom:16px}
.acc summary{list-style:none;cursor:pointer;padding:16px 0;display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";font-size:19px;font-weight:400;color:var(--blue)}
.acc details[open] summary::after{content:"−"}
.acc p{margin:0 0 18px;font-size:.95rem;line-height:1.6;color:var(--grey)}

.warn{border:1px solid #F0D9CF;background:#FDF4F0;border-radius:var(--r-md);padding:16px 18px;margin-top:18px}
.warn p{margin:0;font-size:12.8px;line-height:1.58;color:#7A3E28}
.warn b{color:var(--bad)}

.spec{margin-top:20px;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.spec__h{background:var(--mist);padding:11px 16px;font-size:11.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--grey);border-bottom:1px solid var(--line)}
.spec__r{display:grid;grid-template-columns:minmax(120px,.8fr) 1.2fr;gap:14px;padding:12px 16px;
  border-bottom:1px solid var(--line);font-size:13.5px;align-items:baseline}
.spec__r:last-child{border-bottom:0}
.spec__r dt{color:var(--grey);margin:0}
.spec__r dd{margin:0;font-family:var(--fm);font-weight:500;overflow-wrap:anywhere;line-height:1.5}
@media(max-width:420px){.spec__r{grid-template-columns:1fr;gap:3px}}

/* Grid items default to min-width:auto, which refuses to shrink below the
   content's intrinsic width (e.g. the batches table below) — without this,
   a grid column overflows its own container instead of the table's own
   .tw wrapper scrolling horizontally as intended. Ported from the design's
   own responsive-overflow rule set (not previously carried over here). */
.pdp>*,.ckt>*,.qwrap>*,.split>*,.ctc>*,.std>*,.std3>*,.pill3>*,
.hero__grid>*,.abt__in>*,.rail>*,.coacard>*,.sline>*,.upsell>*,.prot>*,
.infos>*,.vol__g>*,.foot__t>*,.pdpcoa>*{min-width:0}
.tw{max-width:100%}
.card,.box,.proof,.qpanel,.summ,.mini,.stdc{min-width:0;overflow-wrap:break-word}
.d1,.d2,.d3,.card__n,.coacard__n,h1,h2,h3{overflow-wrap:break-word;hyphens:none;-webkit-hyphens:none}
.num,.card__s,.prow span:last-child{overflow-wrap:anywhere}

/* ---------- PDP certificate proof + batch tables ---------- */
.pdpcoa{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:clamp(20px,3vw,36px);align-items:start}
@media(max-width:960px){.pdpcoa{grid-template-columns:1fr}}
.proof{border:1.5px solid var(--ink);border-radius:var(--r-lg);background:var(--paper);padding:24px;box-shadow:var(--sh-1)}
.proof__t{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:16px}
.proof__t span{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:5px 10px;border-radius:var(--r-pill)}
.t-l{background:var(--ink);color:#fff}.t-i{background:var(--tint);color:var(--navy)}
.t-7{background:var(--navy);color:#fff}.t-d{background:#E4F3EB;color:var(--good)}
.proof__big{text-align:center;padding:8px 0 16px;border-bottom:1px solid var(--line)}
.proof__big b{display:block;font-family:var(--fd);font-size:3rem;font-weight:600;letter-spacing:-.04em;color:var(--good);line-height:1}
.proof__big span{display:block;font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--grey);margin-top:6px}
.proof__big em{display:block;font-style:normal;font-size:13.5px;font-weight:600;color:var(--good);margin-top:9px}
.prow{display:flex;justify-content:space-between;gap:14px;padding:10px 0;font-size:13.5px;border-bottom:1px solid var(--line)}
.prow span:first-child{color:var(--grey)}
.prow span:last-child{font-family:var(--fm);font-weight:500;font-variant-numeric:tabular-nums}
.prow.g span:last-child{color:var(--good)}
.qcp{margin-top:18px;border:1px solid var(--line);border-radius:var(--r-md);padding:16px 18px;background:var(--mist)}
.qcp__h{display:flex;justify-content:space-between;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:10px}
.qcp__h b{color:var(--blue)}
.qcp .prow{border-color:rgba(219,230,243,.7);font-size:13px}
.tw{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper)}
table.dt{width:100%;border-collapse:collapse;min-width:560px}
table.dt th,table.dt td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--line);font-size:13.5px;white-space:nowrap}
table.dt tr:last-child td{border-bottom:0}
table.dt thead th{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--grey);background:var(--mist)}
table.dt td.n{font-family:var(--fm);font-variant-numeric:tabular-nums}
/* Same small outline-pill convention as .size (product page strength
   selector) — scaled down to sit inside a table row. */
.dt__coa{display:inline-flex;gap:6px}
.dt__coa a{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line2);
  border-radius:var(--r-pill);padding:6px 14px;font-size:11.5px;font-weight:600;
  color:var(--navy);background:var(--paper);text-decoration:none;white-space:nowrap;transition:.2s var(--ease)}
.dt__coa a:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
@media(max-width:420px){.proof{padding:18px}.proof__big b{font-size:2.5rem}}

/* related products ("More research compounds") — .sec.sec--mist + .head + .rail, overridden via woocommerce/single-product/related.php */