/* ==========================================================================
   CleanPeptide — Design System
   Single source of truth for the WordPress block theme AND the static preview.
   Ported faithfully from the approved front-end prototype + brand board v1.0.
   Compliance: claim-free. Purity / documentation / batch traceability language only.
   ========================================================================== */

/* ---- Design tokens (also mirrored in theme.json for the WP editor) ---- */
:root{
  --ink:#1C2326; --teal:#0B3B45; --signal:#16B8A6; --paper:#F5F7F7; --white:#FFFFFF;
  --line:rgba(28,35,38,0.10); --line-strong:rgba(28,35,38,0.18);
  --muted:#5C6A6E; --signal-deep:#0E8A7E;
  --r:10px; --rs:6px;
  --display:'Inter',sans-serif; --body:'Inter',sans-serif; --mono:'JetBrains Mono',monospace;
}

/* ---- Base ---- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--body);background:var(--paper);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
h1,h2,h3{font-family:var(--display);font-weight:500;letter-spacing:-0.02em;line-height:1.1}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:0.04em;text-transform:uppercase}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- Utility bar ---- */
.util{background:var(--teal);color:#cfe9e4;font-size:12px}
.util .wrap{display:flex;justify-content:center;align-items:center;min-height:34px;gap:16px;flex-wrap:wrap;padding-top:5px;padding-bottom:5px;text-align:center}
.util strong{color:#fff;font-weight:500}
.util .dot{width:5px;height:5px;border-radius:50%;background:var(--signal);display:inline-block;margin:0 9px;vertical-align:middle;position:relative;top:-1px}

/* ---- Header ---- */
/* The header sits in a template-part wrapper div; display:contents lets the
   sticky header use the page root as its containing block so it stays pinned
   for the whole scroll (otherwise it un-sticks past the short wrapper). */
.cp-header-part{display:contents}
/* The offer-page CSS snippet injects `html,body{overflow-x:hidden!important}`
   site-wide. overflow-x:hidden turns body into a scroll container, which kills
   position:sticky — the header stops following on scroll. overflow-x:clip
   prevents the same sideways scroll WITHOUT creating a scroll container.
   Selectors are deliberately more specific than `html,body` so this wins over
   the snippet's !important despite loading earlier. */
html:root,body[class]{overflow-x:clip!important}

.site-header{position:sticky;top:0;z-index:40;background:rgba(245,247,247,0.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line);transition:box-shadow .2s ease,background .2s ease}
/* Once scrolled, solid background + subtle shadow keeps it legible over content. */
.site-header.is-stuck{background:var(--paper);box-shadow:0 8px 28px -18px rgba(11,59,69,.55)}
.site-header .wrap{display:flex;align-items:center;min-height:68px;gap:28px}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:500;font-size:21px;letter-spacing:-0.03em;color:var(--teal)}
.logo .node{width:14px;height:14px;background:var(--signal);border-radius:4px;transform:rotate(45deg);position:relative;flex:none}
.logo .node::after{content:"";position:absolute;inset:4px;background:var(--paper);border-radius:1px}
/* Image logo (header, mobile menu, footer). flex:none + max-width:none keep it
   from collapsing inside the flex .logo container (vs the global img reset). */
.logo img{height:34px;width:auto;max-width:none;flex:none;display:block}
/* footer logo is a white + teal-dot asset (footer-logo-white.png) — no filter needed */
nav.main{display:flex;gap:22px;margin-left:8px;flex:1}
nav.main a{font-size:14px;color:var(--ink);padding:6px 0;border-bottom:2px solid transparent;transition:.18s;white-space:nowrap}
nav.main a:hover,nav.main a:focus-visible{color:var(--signal-deep);border-color:var(--signal)}
.hbtns{display:flex;align-items:center;gap:14px;margin-left:auto}
.icbtn{width:38px;height:38px;border:1px solid var(--line-strong);border-radius:var(--rs);display:grid;place-items:center;background:var(--white);cursor:pointer;transition:.18s;color:var(--ink)}
.icbtn:hover,.icbtn:focus-visible{border-color:var(--signal);color:var(--signal-deep)}
.cart-btn{position:relative;overflow:visible}
.cartcount{position:absolute;top:-6px;right:-6px;background:var(--signal);color:var(--teal);font-family:var(--mono);font-size:10px;font-weight:500;line-height:16px;height:16px;min-width:16px;border-radius:20px;padding:0 4px;text-align:center;box-shadow:0 0 0 2px var(--paper)}

/* ---- Hero ---- */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.hero .wrap{display:grid;grid-template-columns:1.1fr 0.9fr;gap:40px;align-items:center;padding:74px 24px 84px}
.hero h1{font-size:54px;color:var(--teal)}
.hero h1 em{font-style:normal;color:var(--signal-deep)}
.hero p.lead{font-size:18px;color:var(--muted);margin:22px 0 30px;max-width:480px}
.cta-row{display:flex;gap:14px;flex-wrap:wrap}
.hero-props{display:flex;gap:24px;margin-top:34px;flex-wrap:wrap}
.hero-props div{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink)}
.hero-props svg{color:var(--signal-deep);flex:none}
.hero-art{position:relative;height:420px}
.hero-art svg{width:100%;height:100%}
.hero-art img{width:100%;height:100%;object-fit:cover;border-radius:var(--rl);border:1px solid var(--line);display:block}

/* ---- Buttons ---- */
.btn{font-family:var(--display);font-weight:500;font-size:15px;padding:13px 24px;border-radius:var(--rs);cursor:pointer;border:1px solid transparent;transition:.18s;display:inline-flex;align-items:center;gap:9px;text-align:center}
.btn-primary{background:var(--teal);color:#fff}
.btn-primary:hover,.btn-primary:focus-visible{background:#0a2e36}
.btn-ghost{background:transparent;color:var(--teal);border-color:var(--line-strong)}
.btn-ghost:hover,.btn-ghost:focus-visible{border-color:var(--signal);color:var(--signal-deep)}
.btn-signal{background:var(--signal);color:var(--teal)}
.btn-signal:hover,.btn-signal:focus-visible{background:var(--signal-deep);color:#fff}

/* ---- Trust strip ---- */
.trust{background:var(--white);border-bottom:1px solid var(--line)}
.trust .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.trust .item{padding:24px 22px;border-left:1px solid var(--line);display:flex;gap:13px;align-items:flex-start}
.trust .item:first-child{border-left:none;padding-left:0}
.trust .item svg{color:var(--signal-deep);flex:none;margin-top:2px}
.trust .item h3{font-size:14px;font-family:var(--display);margin-bottom:2px}
.trust .item p{font-size:12.5px;color:var(--muted);line-height:1.45}

/* ---- Sections ---- */
section.block{padding:72px 0}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:34px;gap:20px;flex-wrap:wrap}
.sec-head .mono{color:var(--signal-deep);margin-bottom:10px;display:block}
.sec-head h2{font-size:32px;color:var(--teal)}
.sec-head p{color:var(--muted);font-size:15px;max-width:420px;margin-top:8px}
.link-arrow{font-family:var(--display);font-weight:500;font-size:14px;color:var(--signal-deep);display:inline-flex;gap:6px;align-items:center}

/* ---- Category grid ---- */
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.cat{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:20px;transition:.2s;cursor:pointer;position:relative;overflow:hidden;display:block}
.cat:hover{border-color:var(--signal);transform:translateY(-3px)}
.cat .mono{color:var(--muted)}
.cat h3{font-size:17px;margin:10px 0 4px;font-family:var(--display)}
.cat span{font-size:12.5px;color:var(--muted)}
.cat .chev{position:absolute;right:16px;top:18px;color:var(--line-strong);transition:.2s}
.cat:hover .chev{color:var(--signal);transform:translateX(3px)}

/* ---- Product cards ---- */
.prods{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:.2s;display:flex;flex-direction:column}
.card:hover{border-color:var(--line-strong);transform:translateY(-3px);box-shadow:0 10px 30px -18px rgba(11,59,69,0.5)}
.card .ph{background:linear-gradient(160deg,#eef3f3,#e3ecec);aspect-ratio:1/1;display:grid;place-items:center;position:relative;border-bottom:1px solid var(--line)}
.card .ruo{position:absolute;top:10px;left:10px;background:rgba(11,59,69,0.06);color:var(--teal);font-family:var(--mono);font-size:9px;letter-spacing:0.05em;padding:4px 7px;border-radius:4px;text-transform:uppercase}
.card .coa{position:absolute;top:10px;right:10px;background:var(--signal);color:var(--teal);font-family:var(--mono);font-size:9px;letter-spacing:0.05em;padding:4px 7px;border-radius:4px;display:flex;align-items:center;gap:4px}
.card .body{padding:15px 16px 17px;display:flex;flex-direction:column;flex:1}
.card .body .mono{color:var(--muted)}
.card h3{font-size:16px;font-family:var(--display);margin:7px 0 3px}
.card .sizes{display:flex;gap:5px;margin:9px 0 13px;flex-wrap:wrap}
.card .sizes span{font-family:var(--mono);font-size:10px;border:1px solid var(--line-strong);border-radius:4px;padding:3px 7px;color:var(--muted)}
.card .foot{display:flex;justify-content:space-between;align-items:center;margin-top:auto}
.card .price{font-family:var(--display);font-weight:500;font-size:19px;color:var(--teal)}
.card .price .from{font-size:11px;color:var(--muted);font-family:var(--body)}
.card .add{width:36px;height:36px;border-radius:var(--rs);background:var(--teal);color:#fff;border:none;display:grid;place-items:center;cursor:pointer;transition:.18s}
.card .add:hover,.card .add:focus-visible{background:var(--signal-deep)}
/* Product-card buy controls: selectable size chips + inline add-to-cart. */
.card .cp-card-buy{display:flex;flex-direction:column;margin-top:auto}
.card .cp-card-buy .sizes{margin:9px 0 10px}
.card .sizes .cp-size{font-family:var(--mono);font-size:10px;line-height:1;border:1px solid var(--line-strong);border-radius:4px;padding:4px 8px;color:var(--muted);background:transparent;cursor:pointer;transition:.15s}
.card .sizes .cp-size:hover{border-color:var(--teal);color:var(--teal)}
.card .sizes .cp-size.is-active{border-color:var(--teal);background:var(--teal);color:#fff}
.card .sizes .cp-size.is-oos{opacity:.45;text-decoration:line-through;cursor:not-allowed}
.card .cp-card-buy .foot{justify-content:flex-start;margin:0 0 11px}
.card .cp-card-add{width:100%;display:block;border:none;border-radius:var(--rs);background:var(--teal);color:#fff;font-family:var(--body);font-weight:600;font-size:13px;letter-spacing:.02em;text-align:center;padding:11px 14px;cursor:pointer;transition:.18s}
.card .cp-card-add:hover,.card .cp-card-add:focus-visible{background:var(--signal-deep)}
.card .cp-card-add.loading{opacity:.7;pointer-events:none}
.card .cp-card-add.is-oos{background:var(--line);color:var(--muted);cursor:not-allowed}
.card .cp-card-more{display:block;text-align:center;margin-top:8px;font-family:var(--body);font-size:12.5px;color:var(--muted);text-decoration:none;transition:.15s}
.card .cp-card-more:hover,.card .cp-card-more:focus-visible{color:var(--signal-deep);text-decoration:underline}
/* PDP size selector rendered as pills (progressive enhancement over the select) */
.cp-vselect-hidden{display:none !important}
.variations_form .reset_variations{display:none !important}
.cp-vpills{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0}
.cp-vpill{font-family:var(--mono);font-size:12px;line-height:1;letter-spacing:.02em;border:1px solid var(--line-strong);border-radius:var(--rs);padding:10px 15px;background:transparent;color:var(--muted);cursor:pointer;transition:.15s}
.cp-vpill:hover{border-color:var(--teal);color:var(--teal)}
.cp-vpill.is-active{border-color:var(--teal);background:var(--teal);color:#fff}
.cp-vpill:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
/* Bulk / quantity pricing — selectable quantity-break selector (PDP) */
.cp-bulk{margin:0 0 18px;border:1px solid rgba(22,184,166,.28);border-radius:var(--r);background:rgba(22,184,166,.07);overflow:hidden}
.cp-bulk-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;border-bottom:1px solid rgba(22,184,166,.18)}
.cp-bulk-title{display:inline-flex;align-items:center;gap:7px;font-family:var(--display);font-weight:500;font-size:14px;color:var(--teal)}
.cp-bulk-title svg{flex:none;color:var(--signal-deep)}
.cp-bulk-note{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--muted)}
.cp-bulk-note svg{flex:none;color:var(--signal-deep)}
.cp-bulk-tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:14px}
.cp-bulk-tier{position:relative;text-align:left;background:var(--white);border:1.5px solid var(--line-strong);border-radius:var(--rs);padding:13px 12px;cursor:pointer;transition:.15s;font-family:var(--body)}
.cp-bulk-tier:hover{border-color:var(--signal)}
.cp-bulk-tier[aria-pressed="true"]{border-color:var(--teal);background:rgba(11,59,69,.045)}
.cp-bulk-tier:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.cp-bulk-tier.is-best{border-color:var(--signal-deep)}
.cp-bulk-tier.is-best[aria-pressed="true"]{border-color:var(--teal)}
.cp-bulk-check{position:absolute;top:11px;right:11px;width:16px;height:16px;border:1.5px solid var(--line-strong);border-radius:50%;transition:.15s}
.cp-bulk-tier[aria-pressed="true"] .cp-bulk-check{border-color:var(--teal);background:var(--teal)}
.cp-bulk-tier[aria-pressed="true"] .cp-bulk-check::after{content:"";position:absolute;left:50%;top:47%;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:translate(-50%,-50%) rotate(45deg)}
.cp-bulk-pct{display:inline-block;background:var(--signal);color:var(--teal);font-family:var(--mono);font-size:10px;letter-spacing:.03em;text-transform:uppercase;padding:3px 7px;border-radius:4px}
.cp-bulk-tier[aria-pressed="true"] .cp-bulk-pct{background:var(--signal-deep);color:#fff}
.cp-bulk-qty{display:block;font-family:var(--display);font-weight:500;font-size:13.5px;color:var(--teal);margin:9px 0 2px}
.cp-bulk-price{display:block;font-family:var(--mono);font-size:11.5px;color:var(--muted)}
.cp-bulk-amt{font-weight:500;color:var(--ink)}
.cp-bulk-tag{position:absolute;top:-8px;left:10px;background:var(--teal);color:#fff;font-family:var(--mono);font-size:8px;letter-spacing:.05em;text-transform:uppercase;padding:2px 6px;border-radius:3px}
.cp-bulk-saved{display:flex;align-items:center;gap:6px;margin:0 0 12px;color:var(--signal-deep);font-size:11px}
/* PDP selling-point / trust strip (2×2) */
.pdp-trust{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:11px 18px;margin:0 0 20px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r);background:rgba(22,184,166,.05)}
.pdp-trust li{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--teal);line-height:1.2}
.pdp-trust svg{width:18px;height:18px;flex:none;color:var(--signal-deep)}
@media(max-width:560px){.pdp-trust{gap:10px 12px}}
/* Frequently bought together (PDP) */
/* Grid and flex items default to min-width:auto, so they refuse to shrink below
   their content's min-content width. A long related-product name is nowrap, so its
   262px min-content propagated up through .cp-fbt-card and .pdp-info and forced the
   whole product column to 432px — wider than a 370px phone. The ellipsis on the name
   only applies once the box is allowed to be narrower than the text. */
.pdp-grid>*{min-width:0}
.cp-fbt-grid,.cp-fbt-card,.cp-fbt-info{min-width:0}
.cp-fbt{margin:18px 0 0;padding-top:18px;border-top:1px solid var(--line)}
.cp-fbt-h{margin:0 0 12px;font-size:12px}
.cp-fbt-h .mono{color:var(--signal-deep)}
.cp-fbt-grid{list-style:none;display:flex;flex-direction:column;gap:8px;margin:0;padding:0}
.cp-fbt-card{display:flex;align-items:center;gap:12px;background:var(--white);border:1px solid var(--line);border-radius:var(--rs);padding:8px 10px;transition:.16s}
.cp-fbt-card:hover{border-color:var(--line-strong)}
.cp-fbt-media{flex:none;width:54px;height:54px;border-radius:6px;overflow:hidden;background:linear-gradient(160deg,#eef3f3,#e3ecec);display:block}
.cp-fbt-media img{width:100%;height:100%;object-fit:cover;display:block}
.cp-fbt-info{flex:1;min-width:0}
.cp-fbt-name{display:block;font-family:var(--display);font-weight:500;font-size:13.5px;color:var(--teal);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cp-fbt-name:hover{color:var(--signal-deep)}
.cp-fbt-price{display:block;font-family:var(--mono);font-size:12px;color:var(--ink);margin-top:3px}
.cp-fbt-from{color:var(--muted);font-size:10px}
.cp-fbt-add{flex:none;display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line-strong);background:transparent;color:var(--teal);font-family:var(--display);font-weight:500;font-size:12.5px;border-radius:var(--rs);padding:8px 12px;cursor:pointer;transition:.16s}
.cp-fbt-add:hover,.cp-fbt-add:focus-visible{background:var(--signal);border-color:var(--signal);color:var(--teal)}
.cp-fbt-add svg{flex:none}
@media(max-width:560px){
  .cp-bulk-tiers{grid-template-columns:1fr;gap:8px}
  .cp-bulk-tier{display:flex;align-items:center;gap:9px;padding:11px 12px}
  .cp-bulk-tag{display:none}
  .cp-bulk-check{position:relative;top:auto;right:auto;flex:none}
  .cp-bulk-qty{order:1;margin:0;font-size:13px}
  .cp-bulk-pct{order:2;flex:none}
  .cp-bulk-price{order:3;margin-left:auto;font-size:12px;white-space:nowrap}
  .cp-bulk-head{padding:10px 12px}
}

/* ---- Quality / COA band ---- */
.quality{background:var(--teal);color:#dbeeea}
.quality .wrap{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.quality h2{color:#fff;font-size:30px;margin-bottom:16px}
.quality p{font-size:15px;color:#a9ccc6;margin-bottom:24px;max-width:440px}
.qa-stats{display:flex;gap:36px;flex-wrap:wrap}
.qa-stats .n{font-family:var(--display);font-weight:500;font-size:34px;color:var(--signal)}
.qa-stats .l{font-size:12.5px;color:#a9ccc6;margin-top:2px}
.coa-card{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.14);border-radius:var(--r);padding:22px}
.coa-card .row{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid rgba(255,255,255,0.1);font-size:13.5px}
.coa-card .row:last-child{border:none}
.coa-card .row span:first-child{color:#a9ccc6}
.coa-card .row .v{font-family:var(--mono);color:#fff}
.coa-card .pass{color:var(--signal)}

/* ---- FAQ ---- */
.faq-list{max-width:760px;margin:0 auto}
#faq .sec-head{display:block;text-align:center}
.faq{background:var(--white);border:1px solid var(--line);border-radius:var(--r);margin-bottom:10px;overflow:hidden}
.faq summary{padding:18px 20px;font-family:var(--display);font-weight:500;font-size:16px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;color:var(--teal)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .plus{color:var(--signal-deep);transition:.2s;font-size:20px;line-height:1}
.faq[open] summary .plus{transform:rotate(45deg)}
.faq .ans{padding:0 20px 18px;color:var(--muted);font-size:14.5px}
/* FAQ block on the product page */

.pdp-faq-h{font-family:var(--display);font-weight:500;color:var(--teal);font-size:24px;margin:0 0 20px;text-align:center}
.pdp-faq-h .mono{display:block;color:var(--signal-deep);margin-bottom:7px}

/* ---- Newsletter ---- */
.news{background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.news .wrap{padding:56px 24px;text-align:center}
.news h2{font-size:26px;color:var(--teal);margin-bottom:8px}
.news p{color:var(--muted);margin-bottom:22px}
.news form{display:flex;gap:10px;max-width:440px;margin:0 auto}
.news input{flex:1;padding:13px 16px;border:1px solid var(--line-strong);border-radius:var(--rs);font-family:var(--body);font-size:14px;background:var(--paper)}
.news input:focus{outline:none;border-color:var(--signal)}

/* ---- Footer ---- */
.site-footer{background:#0C6988;color:#cfe6ec;padding:56px 0 26px}
.site-footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,0.12)}
.site-footer .logo{color:#fff;margin-bottom:14px}
.site-footer .blurb{font-size:13px;line-height:1.6;max-width:280px}
.site-footer .footer-addr{font-style:normal;font-size:13px;line-height:1.7;margin-top:14px;color:#d4ebf0}
.site-footer h4{color:#fff;font-family:var(--display);font-weight:500;font-size:13px;letter-spacing:0.04em;text-transform:uppercase;margin-bottom:14px}
.site-footer ul{list-style:none}
.site-footer ul li{margin-bottom:9px}
.site-footer ul a{font-size:13.5px;transition:.15s}
.site-footer ul a:hover,.site-footer ul a:focus-visible{color:var(--signal)}
.footer-legal{padding-top:24px;display:flex;flex-direction:column;gap:14px;font-size:12px;color:#bcdde5}
.footer-legal .ruo{max-width:820px;line-height:1.6}
.footer-cards{display:flex;gap:8px;flex-wrap:wrap}
.footer-cards .pay{border:1px solid rgba(255,255,255,0.18);border-radius:4px;display:block}
.footer-copy{color:#6f968f;margin-top:2px}

/* ---- Age gate ---- */
.gate{position:fixed;inset:0;z-index:90;background:rgba(11,59,69,0.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:grid;place-items:center;padding:20px}
.gate[hidden]{display:none}
.gate-box{background:var(--white);border-radius:14px;max-width:420px;padding:34px;text-align:center}
.gate-box .node{width:18px;height:18px;background:var(--signal);border-radius:5px;transform:rotate(45deg);margin:0 auto 18px}
.gate-box h2{font-size:22px;color:var(--teal);margin-bottom:10px}
.gate-box p{font-size:14px;color:var(--muted);margin-bottom:22px}
.gate-box .btn{width:100%;justify-content:center;margin-bottom:10px}
.gate-box small{font-size:11.5px;color:var(--muted)}

/* ---- Reveal-on-scroll ---- */
.reveal{opacity:0;transform:translateY(16px);transition:.6s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}
/* Site Editor: the reveal-on-scroll animation needs front-end JS that the editor
   doesn't run, which would leave sections invisible on the canvas. Force them
   visible inside the editor only — the live site keeps the animation. */
.editor-styles-wrapper .reveal{opacity:1 !important;transform:none !important}

/* ==========================================================================
   Native-block (Site Editor) compatibility
   Lets each homepage section be built from core WP blocks (click-to-edit)
   while keeping the exact prototype look. Core blocks add wrapper classes
   like .wp-block-group / .wp-block-buttons — we neutralize and re-skin them.
   ========================================================================== */

/* Core group/columns wrappers should be transparent layout boxes — our own
   section classes (.hero/.trust/.wrap/etc.) do all the work. */
.wp-block-group{min-width:0}
.wp-block-columns{margin-bottom:0}
.hero .wp-block-group,
.trust .wp-block-group,
.cats .wp-block-group,
.quality .wp-block-group{background:transparent}

/* Headings rendered by the block editor carry .wp-block-heading. */
.hero h1.wp-block-heading{font-size:54px;color:var(--teal);margin:0}
.hero .mono{color:var(--signal-deep);display:block}

/* Eyebrow / mono paragraphs shouldn't inherit body paragraph spacing. */
section.block p,.hero p,.quality p{margin-top:0}

/* Buttons: core renders .wp-block-button > a.wp-block-button__link. Re-skin to
   match .btn. Use helper classes cp-primary / cp-ghost / cp-signal on the button. */
.hero .wp-block-button__link,
.quality .wp-block-button__link{
  font-family:var(--display);font-weight:500;font-size:15px;line-height:1.2;
  padding:13px 24px;border-radius:var(--rs);border:1px solid transparent;transition:.18s;
}
.wp-block-button.cp-primary>.wp-block-button__link{background:var(--teal);color:#fff}
.wp-block-button.cp-primary>.wp-block-button__link:hover{background:#0a2e36}
.wp-block-button.cp-ghost>.wp-block-button__link{background:transparent;color:var(--teal);border:1px solid var(--line-strong)}
.wp-block-button.cp-ghost>.wp-block-button__link:hover{border-color:var(--signal);color:var(--signal-deep)}
.wp-block-button.cp-signal>.wp-block-button__link{background:var(--signal);color:var(--teal)}
.wp-block-button.cp-signal>.wp-block-button__link:hover{background:var(--signal-deep);color:#fff}
.wp-block-button.cp-arrow>.wp-block-button__link::after{content:"→";margin-left:9px}
/* Our flex row controls the gap, not core's default. */
.cta-row.wp-block-buttons{display:flex;gap:14px;flex-wrap:wrap}

/* Trust items: svg (html) + editable heading/paragraph group sit in a flex row. */
.trust .item>.wp-block-group{display:block}
.trust .item :is(h3,p){margin:0}
.trust .item h3{margin-bottom:2px}

/* Quality band native copy. */
.quality .mono{color:var(--signal)}
.quality h2.wp-block-heading{color:#fff;font-size:30px;margin:12px 0 16px}
.quality .reveal>p{color:#a9ccc6;margin-bottom:24px}

/* Category cards as native groups (editable text). */
.cat h3.wp-block-heading{font-size:17px;margin:10px 0 4px}
.cat p.cat-count{margin:0}
.cat p.cat-desc{font-size:12.5px;color:var(--muted);margin:0}

/* FAQ via the core Details block: <details class="wp-block-details faq">. */
.faq.wp-block-details{background:var(--white);border:1px solid var(--line);border-radius:var(--r);margin-bottom:10px;padding:0;overflow:hidden}
.faq.wp-block-details summary{padding:18px 20px;font-family:var(--display);font-weight:500;font-size:16px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;color:var(--teal);list-style:none}
.faq.wp-block-details summary::-webkit-details-marker{display:none}
.faq.wp-block-details summary::marker{content:""}
.faq.wp-block-details summary::after{content:"+";color:var(--signal-deep);font-size:20px;line-height:1;margin-left:16px;transition:.2s}
.faq.wp-block-details[open] summary::after{transform:rotate(45deg)}
.faq.wp-block-details>:not(summary){padding:0 20px 18px;color:var(--muted);font-size:14.5px;margin:0}

/* Newsletter native heading/paragraph keep their centered styling. */
.news .wp-block-group{background:transparent}

/* ==========================================================================
   Single product (PDP) + WooCommerce loop cards
   ========================================================================== */
.pdp{padding:12px 0 84px}
.pdp .wrap{max-width:1180px}
.pdp-crumb{display:flex;align-items:center;gap:8px;color:var(--muted);margin-bottom:24px;flex-wrap:wrap}
.pdp-crumb a{color:var(--signal-deep)}
.pdp-crumb a:hover{color:var(--teal)}

.pdp-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.pdp-media{position:sticky;top:88px;align-self:start}
.pdp-stage{position:relative;background:linear-gradient(160deg,#eef3f3,#e3ecec);border:1px solid var(--line);border-radius:var(--r);aspect-ratio:1/1;display:grid;place-items:center;overflow:hidden}
.pdp-thumbs{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.pdp-thumb{flex:0 0 auto;width:66px;height:66px;padding:4px;background:var(--white);border:1px solid var(--line);border-radius:10px;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.pdp-thumb img{width:100%;height:100%;object-fit:contain;display:block}
.pdp-thumb:hover{border-color:var(--teal)}
.pdp-thumb.is-active{border-color:var(--teal);box-shadow:0 0 0 1px var(--teal)}
.pdp-media .ruo{position:absolute;top:14px;left:14px;background:rgba(11,59,69,0.06);color:var(--teal);font-family:var(--mono);font-size:10px;letter-spacing:0.05em;padding:5px 9px;border-radius:5px;text-transform:uppercase}
.pdp-media .coa{position:absolute;top:14px;right:14px;background:var(--signal);color:var(--teal);font-family:var(--mono);font-size:10px;letter-spacing:0.05em;padding:5px 9px;border-radius:5px}
.pdp-media .pdp-vial{transform:scale(2.6)}
.pdp-media .pdp-img{width:100%;height:100%;object-fit:contain;display:block}

.pdp-cat{color:var(--signal-deep)}
.pdp-title{font-size:34px;color:var(--teal);margin:8px 0 12px;font-family:var(--display);line-height:1.08}
.pdp-spec-inline{display:flex;gap:18px;flex-wrap:wrap;color:var(--muted);margin-bottom:18px}
.pdp-spec-inline b{color:var(--ink)}
.pdp-price{font-family:var(--display);font-weight:500;font-size:20px;color:var(--teal);margin:2px 0 12px}
.pdp-price .price{font-size:20px;color:var(--teal)}
.pdp-price del{color:var(--muted);font-weight:400;font-size:15px;margin-right:8px}
.pdp-price ins{text-decoration:none}

/* WooCommerce add-to-cart + variations, re-skinned */
.pdp-cart{margin-bottom:24px}
.pdp .variations{width:100%;border-collapse:collapse;margin:0 0 16px}
.pdp .variations th.label{text-align:left;font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);padding:6px 14px 6px 0;vertical-align:middle;white-space:nowrap}
.pdp .variations td.value{padding:6px 0}
.pdp .variations select{padding:11px 14px;border:1px solid var(--line-strong);border-radius:var(--rs);font-family:var(--body);font-size:14px;background:var(--white);min-width:170px;color:var(--ink)}
.pdp .reset_variations{font-size:12px;margin-left:12px;color:var(--muted)}
.pdp .single_variation .price{display:none}
.pdp form.cart:not(.variations_form),.pdp .woocommerce-variation-add-to-cart{display:flex;gap:12px;align-items:center;flex-wrap:nowrap;margin:0}
.pdp .single_variation_wrap,.pdp .single_variation{width:100%}
/* Quantity stepper — − [number] + (buttons rendered server-side via hooks) */
.pdp .quantity{display:inline-flex !important;align-items:center;width:auto !important;flex:none;border:1px solid var(--line-strong);border-radius:var(--rs);overflow:hidden;height:50px;background:var(--white);vertical-align:middle}
.cp-qty-btn{width:42px;height:50px;flex:none;padding:0;border:none;background:transparent;color:var(--teal);font-size:20px;line-height:1;cursor:pointer;display:grid;place-items:center;transition:.15s;font-family:var(--body)}
.cp-qty-btn:hover{background:var(--paper);color:var(--signal-deep)}
.pdp .quantity .qty{width:64px;height:48px;flex:none;padding:0 4px;border:none;border-left:1px solid var(--line);border-right:1px solid var(--line);border-radius:0;text-align:center;font-family:var(--body);font-size:15px;color:var(--ink);background:transparent;box-shadow:none;appearance:textfield;-moz-appearance:textfield}
.pdp .quantity .qty::-webkit-outer-spin-button,.pdp .quantity .qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pdp .single_add_to_cart_button{flex:1 1 auto;justify-content:center;font-family:var(--display);font-weight:500;font-size:16px;letter-spacing:.01em;height:50px;padding:0 28px;display:inline-flex;align-items:center;border-radius:var(--rs);background:var(--signal);color:var(--teal);border:1px solid transparent;cursor:pointer;transition:.18s;box-shadow:0 10px 22px -10px rgba(22,184,166,.75)}
.pdp .single_add_to_cart_button:hover{background:var(--signal-deep);color:#fff}
.pdp .single_add_to_cart_button.disabled{opacity:.5;cursor:not-allowed}
.pdp .single_add_to_cart_button.loading{opacity:.75;pointer-events:none}
.pdp .single_add_to_cart_button.added{background:var(--signal-deep)}
/* The slide-out drawer is the add confirmation — drop Woo's "View cart" link. */
.pdp .added_to_cart{display:none !important}
/* Mobile: keep the stepper fixed, let Add to cart fill the rest of the content column */
@media(max-width:768px){
  .pdp form.cart,.pdp .woocommerce-variation-add-to-cart{width:100%;flex-wrap:nowrap}
  .pdp .quantity{flex:0 0 auto}
  .pdp .single_add_to_cart_button{flex:1 1 auto;width:auto;padding:0 16px;justify-content:center}
}

.pdp-coa{margin:6px 0 0;background:linear-gradient(157deg,#0d4554,#0a313b 70%);border:1px solid rgba(255,255,255,.14);box-shadow:0 24px 50px -30px rgba(11,59,69,.5)}
.pdp-coa-link{display:inline-flex;align-items:center;gap:6px;margin:14px 0 18px;font-family:var(--display);font-weight:500;font-size:13px;color:var(--signal-deep)}
.pdp-coa-link:hover{color:var(--teal)}
.pdp-coa-link svg{width:14px;height:14px}
/* COA "View certificate" button + inline document popup (PDP) */
.pdp-coa-btn{display:inline-flex;align-items:center;gap:8px;margin:12px 0 18px;background:var(--signal);color:var(--teal);border:none;border-radius:var(--rs);font-family:var(--display);font-weight:500;font-size:14px;padding:12px 18px;cursor:pointer;transition:.18s}
.pdp-coa-btn:hover,.pdp-coa-btn:focus-visible{background:var(--signal-deep);color:#fff}
.pdp-coa-btn svg{flex:none}
.cp-coa-modal{position:fixed;inset:0;z-index:120;display:none}
.cp-coa-modal.open{display:block}
.cp-coa-overlay{position:absolute;inset:0;width:100%;height:100%;background:rgba(8,30,36,.62);border:none;cursor:pointer}
.cp-coa-dialog{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;width:min(680px,calc(100vw - 28px));max-height:calc(100vh - 56px);max-height:calc(100dvh - 56px);background:var(--white);border-radius:var(--r);overflow:hidden;box-shadow:0 40px 90px -30px rgba(11,59,69,.7)}
.cp-coa-mhead{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line)}
.cp-coa-mheadtext{display:flex;flex-direction:column;gap:2px;min-width:0}
.cp-coa-mtitle{font-family:var(--display);font-weight:500;font-size:16px;color:var(--teal)}
.cp-coa-msub{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cp-coa-x{flex:none;width:36px;height:36px;border-radius:var(--rs);border:1px solid var(--line-strong);background:transparent;color:var(--teal);display:grid;place-items:center;cursor:pointer;transition:.18s}
.cp-coa-x:hover,.cp-coa-x:focus-visible{border-color:var(--signal);color:var(--signal-deep)}
.cp-coa-mbody{flex:1;min-height:0;background:var(--paper);overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.cp-coa-mbody:focus-visible{outline:2px solid var(--signal);outline-offset:-2px}
.cp-coa-mbody iframe{display:block;width:100%;height:72vh;border:0;background:#fff}
.cp-coa-mbody img{display:block;width:100%;height:auto}
.cp-coa-note{margin:0;padding:48px 18px;text-align:center;color:var(--muted);font-size:14px}
.cp-coa-mfoot{display:flex;gap:10px;padding:12px 16px;padding-bottom:max(12px,env(safe-area-inset-bottom));border-top:1px solid var(--line)}
.cp-coa-mfoot .btn{flex:1;justify-content:center;font-size:13px;padding:11px 14px}
@media(max-width:560px){
  .cp-coa-dialog{width:100vw;height:100%;height:100dvh;max-height:100%;max-height:100dvh;border-radius:0;top:0;left:0;transform:none}
  .cp-coa-mbody iframe{height:100%}
}

/* WooCommerce breadcrumb — align to the content grid, more space above, tight below */
.woocommerce-breadcrumb{max-width:1180px;margin:0 auto !important;padding:38px 24px 0 !important;font-family:var(--mono);font-size:11px;letter-spacing:.03em;text-transform:uppercase;color:var(--muted)}
.woocommerce-breadcrumb a{color:var(--signal-deep)}
.woocommerce-breadcrumb a:hover{color:var(--teal)}
.coa-card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.pdp-coa-btn{width:100%;justify-content:center;margin-top:14px}
.pdp-ruo{font-size:11.5px;line-height:1.6;color:var(--muted);border-top:1px solid var(--line);padding-top:16px;margin-top:4px}

.pdp-detail{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:52px;padding-top:40px;border-top:1px solid var(--line)}
.pdp-detail .mono{display:block;margin-bottom:14px}
.spec-table{width:100%;border-collapse:collapse;font-size:14px}
.spec-table th{text-align:left;font-weight:500;color:var(--muted);font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.04em;padding:12px 0;border-bottom:1px solid var(--line);width:42%;vertical-align:top}
.spec-table td{padding:12px 0;border-bottom:1px solid var(--line);color:var(--ink);vertical-align:top}
.pdp-desc{font-size:14.5px;color:var(--ink);line-height:1.7}
.pdp-desc p{margin-bottom:12px}
.draft{background:rgba(22,184,166,.06);border-left:3px solid var(--signal);border-radius:6px;padding:14px 16px;font-size:14px;color:var(--muted)}
.draft-tag{font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--signal-deep);font-weight:600;margin-right:8px;text-transform:uppercase}

/* Related products + any product loop */

.related.products > h2{font-family:var(--display);font-weight:500;font-size:24px;color:var(--teal);margin-bottom:24px;letter-spacing:-0.02em}
ul.products{display:grid !important;grid-template-columns:repeat(4,1fr);gap:16px;list-style:none;margin:0;padding:0}
ul.products::before,ul.products::after,.woocommerce ul.products::before,.woocommerce ul.products::after{content:none !important;display:none !important}
ul.products li.product,ul.products li.card{margin:0 !important;padding:0;width:auto !important;max-width:none !important;min-width:0;float:none !important;clear:none !important}
.card-media.ph{display:grid}
.card-media .card-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.card-titlelink{display:block}
.card-titlelink h3{color:var(--teal)}
.card .foot .button,.card .foot .added_to_cart{width:36px;height:36px;min-width:36px;padding:0;margin:0;border-radius:var(--rs);background:var(--teal);border:none;position:relative;font-size:0;line-height:36px;display:inline-flex !important;align-items:center;justify-content:center;cursor:pointer;transition:.18s;color:transparent;overflow:hidden}
.card .foot .button::after{content:"+";display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px;line-height:1;font-family:var(--body)}
.card .foot .button:hover{background:var(--signal-deep)}
.card .foot .added_to_cart::after{content:"\2713";color:#fff;font-size:14px}

/* WooCommerce notices, lightly branded */
.woocommerce-message,.woocommerce-info,.woocommerce-error{list-style:none;font-size:14px;padding:12px 16px;border-radius:var(--rs);margin:0 0 16px;border:1px solid var(--line)}
.woocommerce-message{background:rgba(22,184,166,.08);border-color:rgba(22,184,166,.35);color:var(--teal)}
.woocommerce-info{background:var(--white)}
.woocommerce-error{background:#fdeceb;border-color:#f3c2bd;color:#8a2b22}

/* ---- Shop / catalog archive ---- */
.woocommerce-products-header{margin:0;padding:0}
.shop-head-wrap{padding-top:18px;padding-bottom:0}
@media(min-width:761px){.shop-head-wrap{padding-top:40px}}
.shop-wrap{padding:6px 24px 60px}
.shop-empty-wrap{padding:0 24px}
.shop-head{margin-bottom:10px}
.shop-head .mono{color:var(--signal-deep);display:block;margin-bottom:8px}
.shop-title{font-family:var(--display);font-weight:500;font-size:32px;color:var(--teal);letter-spacing:-.02em}
.shop-desc{color:var(--muted);font-size:15px;margin-top:10px;max-width:640px}
.shop-filter{display:flex;gap:8px;align-items:center;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-bottom:24px;padding:10px 0;border-bottom:1px solid var(--line)}
.shop-filter::-webkit-scrollbar{display:none}
.shop-filter .chip{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;font-family:var(--display);font-weight:500;font-size:13px;padding:8px 14px;border:1px solid var(--line-strong);border-radius:30px;color:var(--ink);background:var(--white);transition:.15s;white-space:nowrap}
.shop-filter .chip:hover{border-color:var(--signal);color:var(--signal-deep)}
.shop-filter .chip.active{background:var(--teal);color:#fff;border-color:var(--teal)}
.shop-filter .chip .chip-n{font-family:var(--mono);font-size:10px;font-weight:400;opacity:.55}
.shop-filter .chip.active .chip-n{opacity:.85}
/* Sticky category bar — JS toggles .is-stuck so it follows on scroll and the
   shopper can always switch category. Centered to the content grid. */
.shop-filter.is-stuck{position:fixed;top:69px;left:0;right:0;margin:0;padding:11px max(24px,calc((100% - 1180px)/2 + 24px));background:rgba(245,247,247,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line);box-shadow:0 8px 22px -16px rgba(11,59,69,.45);z-index:30}
.shop-filter-spacer{height:0}
/* Scroll affordance: chevron buttons pinned to the edges, shown when more
   categories sit off-screen; click to scroll the row. */
.shop-filter-nav{position:sticky;flex:0 0 auto;display:none;place-items:center;width:30px;height:30px;padding:0;border:1px solid var(--line-strong);border-radius:50%;background:var(--white);color:var(--teal);cursor:pointer;box-shadow:0 1px 5px rgba(11,59,69,.22)}
.shop-filter-nav svg{width:15px;height:15px;display:block}
.shop-filter-nav.prev{left:0}
.shop-filter-nav.next{right:0}
.shop-filter.can-prev .shop-filter-nav.prev{display:grid}
.shop-filter.can-next .shop-filter-nav.next{display:grid}
@media(max-width:760px){
  .shop-wrap{padding:4px 16px 30px}
  .shop-head-wrap{padding-left:16px;padding-right:16px}
  .shop-filter.is-stuck{padding-left:16px;padding-right:16px}
}
.woocommerce-result-count{float:left;color:var(--muted);font-size:12px;margin:7px 0 18px;font-family:var(--mono);letter-spacing:.03em;text-transform:uppercase}
.woocommerce-ordering{float:right;margin:0 0 18px}
.woocommerce-ordering select{padding:10px 14px;border:1px solid var(--line-strong);border-radius:var(--rs);font-family:var(--body);font-size:13px;background:var(--white);color:var(--ink)}
ul.products{clear:both}
.woocommerce-pagination{margin-top:36px;clear:both}
.woocommerce-pagination ul{display:flex;gap:6px;list-style:none;padding:0;margin:0;justify-content:center}
.woocommerce-pagination ul li{margin:0}
.woocommerce-pagination a,.woocommerce-pagination span{display:grid;place-items:center;min-width:40px;height:40px;border:1px solid var(--line-strong);border-radius:var(--rs);color:var(--ink);font-family:var(--body);font-size:14px;background:var(--white)}
.woocommerce-pagination a:hover{border-color:var(--signal);color:var(--signal-deep)}
.woocommerce-pagination .current{background:var(--teal);color:#fff;border-color:var(--teal)}
.woocommerce-info.woocommerce-no-products-found,.woocommerce-no-products-found{clear:both;padding:32px 0;color:var(--muted)}
.shop-empty{clear:both;text-align:center;padding:90px 20px}
.shop-empty p{margin:0 auto;max-width:480px;font-size:16px;color:var(--muted)}
@media(max-width:600px){
  .shop-empty{padding:22px 16px 56px}
}

/* ---- Generic page ---- */
.page-main{padding:48px 0 84px}
.page-title{font-family:var(--display);font-weight:500;font-size:clamp(28px,4vw,38px);color:var(--teal);letter-spacing:-.02em;margin-bottom:24px}
.page-main :where(p,ul,ol){margin-bottom:14px;color:var(--ink)}
.page-main ul,.page-main ol{padding-left:20px}
.page-main h2{font-family:var(--display);font-weight:500;color:var(--teal);font-size:24px;margin:30px 0 12px}
.page-main h3{font-family:var(--display);font-weight:500;color:var(--teal);font-size:18px;margin:22px 0 8px}
.page-main a{color:var(--signal-deep)}
.page-main a:hover{color:var(--teal)}

/* ---- RUO reminder (cart/checkout) ---- */
.ruo-reminder{background:rgba(11,59,69,.05);border:1px solid var(--line);border-left:3px solid var(--signal);border-radius:var(--rs);padding:14px 16px;font-size:13.5px;color:var(--muted);margin-bottom:24px}
.ruo-reminder strong{color:var(--teal)}
/* Checkout: required "Research affiliation" selector */
.cp-affiliation{background:var(--paper);border:1px solid var(--line);border-radius:var(--rs);padding:18px 20px 6px;margin-bottom:24px}
.cp-affiliation-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.woocommerce-checkout .cp-affiliation-head h3{margin:0}
/* inline-flex + line-height:1 so the label sits dead-centre in the pill;
   text-indent offsets the trailing space letter-spacing adds after the last
   character, which otherwise reads as shifted left. */
.cp-affiliation-head .cp-affiliation-req{display:inline-flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:11px;line-height:1;letter-spacing:.06em;text-indent:.06em;text-transform:uppercase;color:var(--teal);background:rgba(12,109,137,.09);border-radius:999px;padding:6px 11px;white-space:nowrap}
.cp-affiliation select{width:100%}

/* ---- Buttons (cart/checkout/account) ---- */
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.woocommerce #place_order,button.checkout-button{font-family:var(--display);font-weight:500;font-size:15px;padding:14px 26px;border-radius:var(--rs);background:var(--teal);color:#fff;border:1px solid transparent;cursor:pointer;transition:.18s;line-height:1.2;display:inline-block;text-align:center}
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover,.woocommerce #place_order:hover{background:#0a2e36;color:#fff}
.checkout-button,#place_order{width:100%}

/* ---- Cart ---- */
.woocommerce-cart-form table.cart{width:100%;border-collapse:collapse;margin-bottom:24px}
table.cart th{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);text-align:left;padding:12px 10px;border-bottom:1px solid var(--line)}
table.cart td{padding:16px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
table.cart .product-thumbnail img{width:60px;height:60px;object-fit:cover;border-radius:var(--rs);border:1px solid var(--line)}
table.cart .product-name a{color:var(--teal);font-family:var(--display);font-weight:500}
table.cart .product-remove a{color:var(--muted);font-size:18px;text-decoration:none}
.cart_totals{max-width:420px;margin-left:auto}
.cart_totals h2{font-family:var(--display);font-weight:500;color:var(--teal);font-size:20px;margin-bottom:12px}
.cart_totals table{width:100%;border-collapse:collapse}
.cart_totals th,.cart_totals td{padding:12px 0;border-bottom:1px solid var(--line);text-align:left}
.cart_totals .order-total .amount{font-family:var(--display);font-weight:500;font-size:18px;color:var(--teal)}
.wc-proceed-to-checkout{margin-top:18px}

/* ---- Checkout ---- */
.woocommerce form .form-row{margin-bottom:14px}
.woocommerce form .form-row label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,.woocommerce form .form-row select,.woocommerce-checkout .input-text,.select2-container .select2-selection{width:100%;padding:12px 14px;border:1px solid var(--line-strong);border-radius:var(--rs);font-family:var(--body);font-size:14px;background:var(--white);color:var(--ink)}
.woocommerce-checkout h3,.woocommerce-checkout #order_review_heading{font-family:var(--display);font-weight:500;color:var(--teal);font-size:20px;margin:0 0 14px}
#order_review{border:1px solid var(--line);border-radius:var(--r);padding:22px;background:var(--white)}
.woocommerce-checkout-review-order-table{width:100%;border-collapse:collapse;font-size:14px}
.woocommerce-checkout-review-order-table th,.woocommerce-checkout-review-order-table td{padding:12px 0;border-bottom:1px solid var(--line);text-align:left}
.woocommerce-checkout-review-order-table .order-total .amount{font-family:var(--display);font-weight:500;font-size:18px;color:var(--teal)}
/* Checkout trust row (under the Place order button) */
.cp-co-trust{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.cp-co-pay{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:12px}
.cp-co-pay .pay{border:1px solid var(--line-strong);border-radius:4px;display:block}
.cp-co-points{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.cp-co-points li{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--muted);margin:0}
.cp-co-points svg{width:16px;height:16px;flex:none;color:var(--signal-deep)}
.wc_payment_methods{list-style:none;margin:0 0 16px;padding:0}
.wc_payment_method label{display:inline;font-size:14px;color:var(--ink)}
.woocommerce-terms-and-conditions-wrapper{margin:16px 0;padding:14px;background:var(--paper);border:1px solid var(--line);border-radius:var(--rs)}
.woocommerce-terms-and-conditions-wrapper label{font-size:13.5px;color:var(--muted)}
.woocommerce-form__label-for-checkbox input{margin-right:8px}
@media(min-width:861px){
  .woocommerce-checkout .cp-checkout-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:start}
  .woocommerce-checkout #customer_details{margin-bottom:0}
  .woocommerce-checkout .cp-order-col #order_review_heading{margin-top:0}
}
/* No separate shipping address — stack billing, then order notes below it. */
.woocommerce-checkout #customer_details .col2-set{display:block}
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2{width:100%;float:none;padding:0}
.woocommerce-checkout #customer_details .col-2{margin-top:8px}
/* Content gutter so the checkout form doesn't run to the screen edges. */
.woocommerce-checkout .page-main{padding-left:24px;padding-right:24px}
@media(max-width:560px){
  .woocommerce-checkout .page-main{padding-left:15px;padding-right:15px}
}

/* ---- COA library + batch lookup (/coa) ---- */
.coa-page{max-width:900px}
/* The content (.coa-page) is centered at 900px by the constrained layout, so
   center the post-title to the same column (it otherwise spans the full width
   and starts left of the sections). Plus the site gutter (24px / 15px mobile)
   so nothing runs edge-to-edge — consistent with the other pages. */
.cp-coa-page .page-title{max-width:900px;margin-left:auto;margin-right:auto}
.cp-coa-page .page-main{padding-left:24px;padding-right:24px}
@media(max-width:560px){
  .cp-coa-page .page-main{padding-left:15px;padding-right:15px}
}
.coa-intro{font-size:16px;color:var(--muted);max-width:660px;margin-bottom:26px;line-height:1.6}
.coa-form{display:flex;gap:10px;margin-bottom:20px;flex-wrap:wrap}
.coa-form input{flex:1;min-width:240px;padding:14px 16px;border:1px solid var(--line-strong);border-radius:var(--rs);font-family:var(--mono);font-size:14px;background:var(--white);color:var(--ink);text-transform:uppercase;letter-spacing:.04em}
.coa-form input:focus{outline:none;border-color:var(--signal)}
.coa-form .btn{flex:none}
.coa-result{max-width:460px;margin-top:6px;background:linear-gradient(157deg,#0d4554,#0a313b 70%);border:1px solid rgba(255,255,255,.14);box-shadow:0 24px 50px -30px rgba(11,59,69,.5)}
.coa-empty{color:var(--muted);background:var(--paper);border:1px solid var(--line);border-radius:var(--rs);padding:16px 18px;font-size:14px;max-width:460px}
.coa-methods,.coa-library{margin-top:48px;padding-top:36px;border-top:1px solid var(--line)}
.coa-methods h2,.coa-library h2{font-family:var(--display);font-weight:500;color:var(--teal);font-size:24px;margin-bottom:20px;letter-spacing:-.02em}
.coa-methods-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.coa-method{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.coa-method .mono{color:var(--signal-deep);display:block;margin-bottom:10px;font-size:12px}
.coa-method h3{font-family:var(--display);font-weight:500;color:var(--teal);font-size:15px;margin-bottom:8px;line-height:1.25}
.coa-method p{font-size:13.5px;color:var(--muted);line-height:1.55;margin:0}
.coa-table{width:100%;border-collapse:collapse;font-size:14px}
.coa-table th{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);text-align:left;padding:12px 10px;border-bottom:1px solid var(--line)}
.coa-table td{padding:14px 10px;border-bottom:1px solid var(--line)}
.coa-table td a{color:var(--signal-deep);font-family:var(--mono)}
.coa-table .coa-status{color:var(--signal-deep)}
.coa-note{margin-top:14px;font-size:13px;color:var(--muted)}
@media(max-width:700px){.coa-methods-grid{grid-template-columns:1fr}}

/* ---- Cart drawer (off-canvas) ---- */
.cp-cart-drawer{position:fixed;inset:0;z-index:95;visibility:hidden;opacity:0;transition:opacity .2s ease}
.cp-cart-drawer.open{visibility:visible;opacity:1}
.cp-cart-overlay{position:absolute;inset:0;border:none;padding:0;margin:0;background:rgba(11,59,69,.5);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);cursor:pointer}
.cp-cart-panel{position:absolute;top:0;right:0;bottom:0;width:420px;max-width:94vw;background:var(--paper);box-shadow:-14px 0 54px -22px rgba(11,59,69,.6);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .28s cubic-bezier(.2,.7,.2,1)}
.cp-cart-drawer.open .cp-cart-panel{transform:none}
.cp-cart-drawer.cp-busy .cp-cart-body{opacity:.55;pointer-events:none;transition:opacity .12s}
.cp-cart-head{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;border-bottom:1px solid var(--line);background:var(--white)}
.cp-cart-title{font-family:var(--display);font-weight:500;font-size:18px;color:var(--teal)}
.cp-cart-count{color:var(--muted);font-size:14px;font-family:var(--body)}
.cp-cart-x{width:36px;height:36px;flex:none;border:1px solid var(--line-strong);border-radius:var(--rs);background:var(--white);display:grid;place-items:center;cursor:pointer;color:var(--ink);transition:.18s}
.cp-cart-x:hover{border-color:var(--signal);color:var(--signal-deep)}
.cp-cart-body{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column}

/* empty */
.cp-cart-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:16px;padding:40px 28px}
.cp-cart-empty svg{color:var(--line-strong)}
.cp-cart-empty p{color:var(--muted);font-size:15px}

/* lines — the only scrollable region; grows to fill, scrolls internally */
.cp-cart-lines{flex:1;min-height:0;overflow-y:auto;padding:4px 22px}
.cp-line{display:flex;gap:14px;padding:18px 0;border-bottom:1px solid var(--line)}
.cp-line-media{width:64px;height:64px;flex:none;background:linear-gradient(160deg,#eef3f3,#e3ecec);border:1px solid var(--line);border-radius:var(--rs);display:grid;place-items:center;overflow:hidden}
.cp-line-media img{width:100%;height:100%;object-fit:cover}
.cp-line-media .cp-vial{transform:scale(.8)}
.cp-line-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.cp-line-name{font-family:var(--display);font-weight:500;font-size:14px;color:var(--teal);line-height:1.25}
.cp-line-size{color:var(--muted)}
.cp-line-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:9px;gap:10px}
.cp-qtybox{display:inline-flex;align-items:center;border:1px solid var(--line-strong);border-radius:var(--rs);height:34px;background:var(--white)}
.cp-qtybox button{width:30px;height:32px;border:none;background:transparent;color:var(--teal);cursor:pointer;font-size:16px;line-height:1;display:grid;place-items:center;font-family:var(--body)}
.cp-qtybox button:hover{color:var(--signal-deep)}
.cp-qtybox .cp-qty{min-width:30px;text-align:center;font-size:13px;color:var(--ink);border-left:1px solid var(--line);border-right:1px solid var(--line);align-self:stretch;display:grid;place-items:center}
.cp-line-price{font-family:var(--display);font-weight:500;color:var(--teal);font-size:14px;white-space:nowrap}
.cp-line-price del{color:var(--muted);font-weight:400;font-size:12px;margin-right:5px}
.cp-line-price ins{text-decoration:none}
.cp-line-remove{background:none;border:none;color:var(--muted);cursor:pointer;align-self:flex-start;padding:2px;line-height:0;transition:.15s}
.cp-line-remove:hover{color:#b3402f}

/* foot — pinned to the bottom of the panel, always visible */
.cp-cart-foot{flex:none;border-top:1px solid var(--line);padding:18px 22px 20px;background:var(--white)}
.cp-coupon{display:flex;gap:8px;margin-bottom:8px}
.cp-coupon input{flex:1;min-width:0;padding:11px 12px;border:1px solid var(--line-strong);border-radius:var(--rs);font-family:var(--body);font-size:13px;background:var(--paper)}
.cp-coupon input:focus{outline:none;border-color:var(--signal)}
.cp-coupon .btn{flex:none;padding:11px 16px;font-size:14px}
.cp-coupon-msg{font-size:12px;color:#b3402f;margin-bottom:8px;min-height:0}
.cp-coupon-msg:empty{display:none}
.cp-applied-coupon{display:flex;justify-content:space-between;align-items:center;background:rgba(22,184,166,.08);border:1px solid rgba(22,184,166,.3);border-radius:var(--rs);padding:8px 12px;margin-bottom:10px;font-size:12px;color:var(--teal)}
.cp-coupon-remove{background:none;border:none;color:var(--muted);font-size:18px;line-height:1;cursor:pointer}
.cp-coupon-remove:hover{color:var(--teal)}
.cp-cart-totals{margin:6px 0 14px}
.cp-total-row{display:flex;justify-content:space-between;padding:6px 0;font-size:14px;color:var(--ink)}
.cp-total-row.cp-discount{color:var(--signal-deep)}
.cp-total-row.cp-grand{font-family:var(--display);font-weight:500;font-size:18px;color:var(--teal);border-top:1px solid var(--line);padding-top:12px;margin-top:6px}
.cp-checkout{width:100%;justify-content:center}
.cp-cart-ruo{margin-top:12px;font-size:10px;color:var(--muted);text-align:center;letter-spacing:.03em}

/* Cart upsells — horizontal slider between the lines and the footer. */
.cp-up{flex:none;border-top:1px solid var(--line);padding:14px 22px 6px}
.cp-empty-up{margin-top:8px;text-align:left}
.cp-up-head{display:block;color:var(--signal-deep);margin-bottom:11px}
.cp-up-track{display:flex;gap:10px;overflow-x:auto;padding-bottom:10px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.cp-up-track::-webkit-scrollbar{height:5px}
.cp-up-track::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:3px}
.cp-up-card{flex:0 0 104px;scroll-snap-align:start;background:var(--white);border:1px solid var(--line);border-radius:var(--rs);overflow:hidden;display:flex;flex-direction:column}
.cp-up-media{display:block;aspect-ratio:1/1;background:linear-gradient(160deg,#eef3f3,#e3ecec);overflow:hidden}
.cp-up-media img{width:100%;height:100%;object-fit:contain;display:block}
.cp-up-media .cp-vial{transform:scale(.42)}
.cp-up-name{display:block;font-family:var(--display);font-weight:500;font-size:12px;color:var(--teal);line-height:1.25;padding:8px 9px 0;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cp-up-foot{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:6px 9px 9px;margin-top:auto}
.cp-up-price{font-family:var(--display);font-weight:500;font-size:12px;color:var(--teal);white-space:nowrap}
.cp-up-add{flex:none;width:26px;height:26px;border-radius:var(--rs);background:var(--teal);color:#fff;border:none;cursor:pointer;font-size:16px;line-height:1;display:grid;place-items:center;transition:.15s}
.cp-ship-note{font-size:11px;color:var(--muted);text-align:right;margin-top:3px}
.cp-up-add:hover{background:var(--signal-deep)}

@media(max-width:560px){
  .cp-cart-panel{width:100vw;max-width:100vw}
}

/* ---- Account: login + registration ---- */
/* Login auth block fills the content grid; register stays a narrow centered card. */
.cp-auth{max-width:none}
.cp-auth-narrow{max-width:480px;margin-inline:auto}
/* Two equal-width columns; align-items:stretch makes the boxes equal height. */
.cp-auth-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:stretch}
.cp-auth-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:30px 30px 26px}
.cp-auth-new{background:linear-gradient(168deg,#f3f8f7,#eaf2f1);border-color:var(--line-strong)}
.cp-auth-kicker{color:var(--signal-deep);display:block;margin-bottom:8px}
.cp-auth-h{font-family:var(--display);font-weight:500;font-size:23px;color:var(--teal);letter-spacing:-.01em;margin:0 0 6px}
.cp-auth-sub{color:var(--muted);font-size:14px;line-height:1.55;margin:0 0 18px}
.cp-auth-list{list-style:none;padding:0;margin:0 0 22px}
.cp-auth-list li{position:relative;padding-left:24px;margin-bottom:9px;color:var(--ink);font-size:14px}
.cp-auth-list li::before{content:"";position:absolute;left:0;top:6px;width:14px;height:8px;border-left:2px solid var(--signal);border-bottom:2px solid var(--signal);transform:rotate(-45deg)}
.cp-auth-submit{width:100%;justify-content:center;margin-top:4px}
.cp-auth-ruo{margin-top:14px;font-size:10px;color:var(--muted);text-align:center;letter-spacing:.03em}

/* shared auth form fields */
.cp-form{display:flex;flex-direction:column}
.cp-form label:not(.cp-check){font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:14px 0 6px}
.cp-form label:not(.cp-check):first-of-type{margin-top:0}
.cp-form .req{color:var(--signal-deep)}
.cp-form input[type=text],.cp-form input[type=email],.cp-form input[type=password]{padding:12px 14px;border:1px solid var(--line-strong);border-radius:var(--rs);font-family:var(--body);font-size:15px;background:var(--paper);color:var(--ink);width:100%}
.cp-form input:focus{outline:none;border-color:var(--signal);box-shadow:0 0 0 3px rgba(22,184,166,.12)}
.cp-field-hint{font-size:12px;color:var(--muted);margin-top:6px}
.cp-form-split{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:16px 0 6px;flex-wrap:wrap}
.cp-check{display:flex;align-items:flex-start;gap:9px;cursor:pointer;font-size:13px;color:var(--ink);line-height:1.5}
.cp-check input{margin-top:2px;flex:none;width:16px;height:16px;accent-color:var(--signal-deep)}
.cp-check-inline{align-items:center}
.cp-ruo-check{margin:18px 0 4px;background:var(--paper);border:1px solid var(--line);border-radius:var(--rs);padding:13px 14px}
.cp-lost{font-size:13px;color:var(--signal-deep)}
.cp-lost:hover{color:var(--teal)}
.cp-auth-errors{background:rgba(179,64,47,.06);border:1px solid rgba(179,64,47,.28);border-radius:var(--rs);padding:12px 14px;margin-bottom:18px}
.cp-auth-errors p{color:#a23725;font-size:13px;margin:0 0 4px}
.cp-auth-errors p:last-child{margin-bottom:0}
.cp-auth-single{text-align:center}
/* Register page: centered post-title (matches the centered card) + centered
   heading block inside the card (form fields stay left-aligned). */
.cp-register-page .page-title{text-align:center}
.cp-auth-narrow .cp-auth-kicker,
.cp-auth-narrow .cp-auth-h,
.cp-auth-narrow .cp-auth-sub{text-align:center}

/* Desktop: inset the login grid by the site gutter so its left/right edges
   match the other pages' .wrap content (the .woocommerce wrapper aligns to the
   .wrap outer edge; this 24px adds the same inner gutter). Only above the grid
   breakpoint — on mobile the single column relies on the page-main gutter. */
@media(min-width:721px){
  .woocommerce-account .cp-auth{padding-left:24px;padding-right:24px}
}

@media(max-width:720px){
  .cp-auth-grid{grid-template-columns:1fr}
}

/* ---- My Account: align to the site content grid ----
   The theme uses 0 root padding, so the constrained page content ran
   edge-to-edge on the account page (dashboard nav, login/register, details,
   orders). Give it the same gutter as .wrap (24px desktop, 15px mobile) so it
   lines up with the rest of the site. Desktop content stays centered at the
   1180px content size, so wide screens are visually unchanged. */
.woocommerce-account .page-main{padding-left:24px;padding-right:24px}
.woocommerce-account .page-main .woocommerce{max-width:1180px;margin-inline:auto}
@media(max-width:560px){
  .woocommerce-account .page-main{padding-left:15px;padding-right:15px}
  /* Stack nav above content with breathing room and keep tables in-gutter. */
  .woocommerce-account .woocommerce-MyAccount-navigation{margin-bottom:22px}
  .woocommerce-account .woocommerce-MyAccount-content{width:100%}
  /* Standalone /register/ page (not a woocommerce-account body) — same gutter,
     without double-padding the account page which already gets it above. */
  body:not(.woocommerce-account) .cp-auth{padding-left:15px;padding-right:15px}
}

/* =====================================================================
   About page
   ===================================================================== */
/* Shared image placeholder */
.img-ph{position:relative;background:linear-gradient(160deg,#eef3f3,#e3ecec);border:1px dashed var(--line-strong);border-radius:var(--r);min-height:300px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;text-align:center;padding:24px}
.img-ph-tag{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--signal-deep);text-transform:uppercase}
.img-ph-note{font-size:12px;color:var(--muted)}
.img-ph svg{color:var(--line-strong)}

/* 1. Hero */
.about-hero{border-bottom:1px solid var(--line);background:var(--white)}
.about-hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;padding-top:64px;padding-bottom:64px}
.about-hero h1{font-size:clamp(30px,4.4vw,44px);color:var(--teal);margin:14px 0 0}
.about-hero .lead{font-size:18px;color:var(--muted);margin:20px 0 0;max-width:520px;line-height:1.6}
.about-hero-media{aspect-ratio:5/4;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:linear-gradient(160deg,#eef3f3,#e3ecec)}
.about-hero-media img{width:100%;height:100%;object-fit:cover;display:block}

/* 2 & 3. Split sections (image one side, copy the other) */
.about-split .wrap{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.about-split-media{min-height:340px;align-self:stretch}
.about-split-media img{width:100%;height:100%;object-fit:cover;display:block;border:1px solid var(--line);border-radius:var(--r)}
.about-imgleft .about-split-media{order:-1}            /* image on the left */
.about-split-copy .mono{color:var(--signal-deep);display:block;margin-bottom:10px}
.about-split-copy h2{font-size:30px;color:var(--teal);margin:0 0 14px}
.about-split-copy p{color:var(--muted);font-size:15.5px;line-height:1.7;margin:0}
.about-shop{margin-top:24px}
.about-checks{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:13px}
.about-checks li{display:flex;align-items:flex-start;gap:12px;color:var(--ink);font-size:15px;line-height:1.4}
.about-checks li svg{flex:none;color:var(--signal-deep);margin-top:1px}

/* 4. Process — 3-step row */
.about-process{background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.about-process .about-head{text-align:center;margin-bottom:40px}
.about-process .about-head .mono{color:var(--signal-deep);display:block;margin-bottom:10px}
.about-process .about-head h2{font-size:30px;color:var(--teal)}
.about-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.about-step{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:28px 24px}
.about-step-ic{width:48px;height:48px;border-radius:var(--rs);background:rgba(22,184,166,.1);color:var(--signal-deep);display:grid;place-items:center;margin-bottom:16px}
.about-step-n{position:absolute;top:22px;right:24px;font-family:var(--mono);font-size:12px;color:var(--line-strong)}
.about-step h3{font-size:18px;color:var(--teal);margin:0 0 7px}
.about-step p{font-size:14px;color:var(--muted);line-height:1.55;margin:0}
.about-step-arrow{display:none}

/* 5. Compliance — calm panel (not an error box) */
.about-compliance{background:linear-gradient(168deg,#f3f8f7,#eaf2f1);border:1px solid rgba(22,184,166,.28);border-radius:var(--r);padding:36px 38px;display:flex;gap:22px;align-items:flex-start}
.about-compliance-ic{width:46px;height:46px;flex:none;border-radius:var(--rs);background:var(--white);border:1px solid rgba(22,184,166,.3);color:var(--signal-deep);display:grid;place-items:center}
.about-compliance .mono{color:var(--signal-deep);display:block;margin-bottom:8px}
.about-compliance h2{font-size:24px;color:var(--teal);margin:0 0 10px}
.about-compliance p{color:var(--muted);font-size:15px;line-height:1.7;margin:0;max-width:760px}

/* 6. CTA band */
.about-cta{background:var(--teal);color:#dbeeea}
.about-cta .wrap{display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap;padding-top:52px;padding-bottom:52px}
.about-cta .mono{color:var(--signal);display:block;margin-bottom:10px}
.about-cta h2{color:#fff;font-size:28px;margin:0 0 8px}
.about-cta p{color:#a9ccc6;font-size:15px;margin:0;max-width:480px}
.about-cta-actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.about-cta-actions .link-arrow{color:#bfe9e2}
.about-cta-actions .link-arrow:hover{color:#fff}

@media(max-width:840px){
  .about-hero .wrap{grid-template-columns:1fr;gap:28px;padding-top:44px;padding-bottom:44px}
  .about-split .wrap{grid-template-columns:1fr;gap:26px}
  .about-imgleft .about-split-media{order:0}            /* mobile: copy first */
  .about-hero-media,.about-split-media{min-height:230px}
  .about-steps{grid-template-columns:1fr;gap:14px}
  .about-compliance{flex-direction:column;gap:16px;padding:26px 22px}
  .about-cta .wrap{flex-direction:column;align-items:flex-start;gap:22px}
}

/* =====================================================================
   Policy / legal pages (Research-Use Policy, Terms, Privacy, …)
   Readable single column, generous line-height, numbered headings.
   ===================================================================== */
.policy-main{padding:46px 0 84px}
.policy-wrap{max-width:820px}
.policy-banner{display:flex;gap:13px;align-items:flex-start;background:#fdf6e4;border:1px solid #e6d28f;border-radius:var(--rs);padding:14px 18px;margin-bottom:32px}
.policy-banner svg{color:#b07d12;flex:none;margin-top:1px}
.policy-banner strong{display:block;font-family:var(--display);font-weight:600;font-size:14px;color:#7c5e15;letter-spacing:.01em}
.policy-banner span{display:block;color:#8a7330;font-size:13px;line-height:1.5;margin-top:3px}
.policy-head{margin-bottom:32px;padding-bottom:24px;border-bottom:1px solid var(--line)}
.policy-head .mono{color:var(--signal-deep);display:block;margin-bottom:10px}
.policy-title{font-size:clamp(28px,4vw,38px);color:var(--teal);margin:0}
.policy-updated{margin:14px 0 0;font-size:12.5px;color:var(--muted);font-family:var(--mono);letter-spacing:.02em}
.policy-main .ph{color:var(--signal-deep);font-weight:600}
.policy-section{margin-bottom:26px}
.policy-section h2{font-size:19px;color:var(--teal);margin:0 0 10px;display:flex;gap:10px;align-items:baseline}
.policy-num{color:var(--signal-deep);font-family:var(--mono);font-size:14px;flex:none}
.policy-section p{color:var(--ink);font-size:15.5px;line-height:1.85;margin:0}
.policy-section ul{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:11px}
.policy-section li{position:relative;padding-left:20px;color:var(--ink);font-size:15.5px;line-height:1.7}
.policy-section li::before{content:"";position:absolute;left:2px;top:10px;width:6px;height:6px;border-radius:50%;background:var(--signal)}
.policy-section li b,.policy-section li strong{color:var(--teal);font-weight:600}
.policy-section a{color:var(--signal-deep)}
.policy-section a:hover{color:var(--teal)}
.policy-related{margin-top:40px;padding-top:26px;border-top:1px solid var(--line)}
.policy-related .mono{color:var(--signal-deep);display:block;margin-bottom:8px}
.policy-related p{color:var(--muted);font-size:14.5px;line-height:1.7;margin:0}
.policy-related a{color:var(--signal-deep)}
.policy-related a:hover{color:var(--teal)}
@media(max-width:560px){
  .policy-main{padding:34px 0 64px}
  .policy-section h2{font-size:18px}
}

/* =====================================================================
   Contact page
   ===================================================================== */
.block.contact-head-sec{padding-top:clamp(20px,4vw,44px);padding-bottom:24px}
.contact-h1{font-size:clamp(28px,4vw,40px);color:var(--teal);margin:14px 0 0}
.contact-intro{font-size:17px;color:var(--muted);margin:22px 0 0;max-width:560px;line-height:1.6}
.contact-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:34px;align-items:start}
.contact-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:30px}

/* shared form fields (reuses .cp-form) + textarea + optional tag */
.cp-form textarea{padding:12px 14px;border:1px solid var(--line-strong);border-radius:var(--rs);font-family:var(--body);font-size:15px;background:var(--paper);color:var(--ink);width:100%;resize:vertical;min-height:132px;line-height:1.6}
.cp-form textarea:focus{outline:none;border-color:var(--signal);box-shadow:0 0 0 3px rgba(22,184,166,.12)}
.cp-form .opt{color:var(--muted);font-weight:400;text-transform:none;letter-spacing:0;font-family:var(--body);font-size:12px}
.contact-submit{margin-top:22px;width:100%;justify-content:center}
.contact-formnote{margin-top:12px;font-size:10px;color:var(--muted);letter-spacing:.03em;text-align:center}
.cp-hp{position:absolute !important;left:-9999px;width:1px;height:1px;overflow:hidden}

/* contact details (right) */
.contact-details-h{font-size:19px;color:var(--teal);margin:0 0 16px}
.contact-detail{display:flex;gap:13px;align-items:flex-start;padding:15px 0;border-top:1px solid var(--line)}
.contact-detail:first-of-type{border-top:none;padding-top:0}
.contact-detail-ic{width:38px;height:38px;flex:none;border-radius:var(--rs);background:rgba(22,184,166,.1);color:var(--signal-deep);display:grid;place-items:center}
.contact-detail-label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.contact-detail-val{display:block;color:var(--ink);font-size:14px;line-height:1.5}

/* success state */
.contact-success{text-align:center;padding:20px 6px}
.contact-success-ic{width:56px;height:56px;border-radius:50%;background:rgba(22,184,166,.12);color:var(--signal-deep);display:inline-grid;place-items:center;margin-bottom:16px}
.contact-success h2{font-size:22px;color:var(--teal);margin:0 0 10px}
.contact-success p{color:var(--muted);font-size:15px;line-height:1.6;margin:0 auto 20px;max-width:430px}

/* support / FAQ strip */
.contact-faq{background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.contact-faq .wrap{padding-top:24px;padding-bottom:24px}
.contact-faq-inner{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.contact-faq-inner svg{color:var(--signal-deep);flex:none}
.contact-faq-inner p{margin:0;color:var(--ink);font-size:15px;flex:1;min-width:240px}
.contact-faq-inner .link-arrow{flex:none}

/* calm research-use note (not an error box) */
.contact-ruo{color:var(--muted);font-size:13px;line-height:1.65;text-align:center;max-width:700px;margin:0 auto;padding:15px 20px;background:rgba(22,184,166,.05);border:1px solid var(--line);border-radius:var(--rs)}

@media(max-width:840px){
  .contact-grid{grid-template-columns:1fr;gap:20px}
  .contact-card{padding:24px}
  .contact-faq-inner{gap:10px}
}

/* ---- Post-add "View cart" link: hidden on mobile (drawer + badge suffice) ---- */
@media(max-width:768px){
  .woocommerce a.added_to_cart,
  .card .foot .added_to_cart{display:none !important}
}

/* ---- PDP sticky add-to-cart bar ---- */
.pdp-sticky{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--white);border-top:1px solid var(--line-strong);box-shadow:0 -8px 30px -18px rgba(11,59,69,.55);transform:translateY(115%);transition:transform .26s cubic-bezier(.2,.7,.2,1);visibility:hidden}
.pdp-sticky.show{transform:none;visibility:visible}
.pdp-sticky .wrap{display:flex;align-items:center;gap:16px;min-height:66px;padding-top:10px;padding-bottom:10px}
.pdp-sticky-info{display:flex;flex-direction:column;min-width:0;flex:1;gap:1px}
.pdp-sticky-name{font-family:var(--display);font-weight:500;color:var(--teal);font-size:15px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pdp-sticky-price{font-size:13px;color:var(--ink)}
.pdp-sticky-price .amount{font-weight:500}
.pdp-sticky-price del{color:var(--muted);font-weight:400;margin-right:5px;font-size:12px}
.pdp-sticky-price ins{text-decoration:none}
.pdp-sticky-actions{display:flex;align-items:center;gap:10px;flex:none}
.pdp-sticky-size{height:44px;border:1px solid var(--line-strong);border-radius:var(--rs);padding:0 32px 0 13px;font-family:var(--body);font-size:14px;color:var(--ink);background:var(--white) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230B3B45' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 11px center;-webkit-appearance:none;appearance:none;cursor:pointer;max-width:160px}
.pdp-sticky-size:focus{outline:none;border-color:var(--signal)}
.pdp-sticky-add{white-space:nowrap}
.pdp-sticky-add[disabled]{opacity:.55;cursor:not-allowed}
@media(max-width:560px){
  .pdp-sticky .wrap{gap:10px;min-height:60px;padding-left:15px;padding-right:15px}
  .pdp-sticky-name{font-size:14px}
  .pdp-sticky-price{font-size:12px}
  .pdp-sticky-size{max-width:108px;font-size:13px;padding:0 28px 0 11px}
  .pdp-sticky-add{padding:12px 16px;font-size:14px}
}

/* =====================================================================
   Product search — desktop header dropdown + mobile /search/ page
   ===================================================================== */
/* Desktop dropdown (anchored under the header; JS sets panel/overlay top) */
.cp-search{position:fixed;inset:0;z-index:90;visibility:hidden;opacity:0;transition:opacity .16s ease}
.cp-search.open{visibility:visible;opacity:1}
.cp-search-overlay{position:fixed;left:0;right:0;bottom:0;top:0;border:none;margin:0;padding:0;background:rgba(11,59,69,.4);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);cursor:pointer}
.cp-search-panel{position:fixed;left:0;right:0;top:0;background:var(--white);border-bottom:1px solid var(--line);box-shadow:0 20px 44px -26px rgba(11,59,69,.55);transform:translateY(-14px);transition:transform .2s cubic-bezier(.2,.7,.2,1)}
.cp-search.open .cp-search-panel{transform:none}
.cp-search-inner{max-width:760px;padding-top:18px;padding-bottom:20px}

/* Search field (shared by dropdown + page) */
.cp-search-form{display:flex;align-items:center;gap:12px;border:1px solid var(--line-strong);border-radius:var(--rs);padding:0 14px;background:var(--paper);height:52px}
.cp-search-form:focus-within{border-color:var(--signal);box-shadow:0 0 0 3px rgba(22,184,166,.12)}
.cp-search-ic{color:var(--muted);flex:none}
.cp-search-input{flex:1;min-width:0;border:none;background:transparent;font-family:var(--body);font-size:16px;color:var(--ink);outline:none;height:100%;-webkit-appearance:none;appearance:none}
.cp-search-input::placeholder{color:var(--muted)}
.cp-search-input::-webkit-search-cancel-button{-webkit-appearance:none}
.cp-search-x{flex:none;border:none;background:transparent;color:var(--muted);cursor:pointer;padding:4px;line-height:0}
.cp-search-x:hover{color:var(--teal)}

/* Results list + states */
.cp-search-results{margin-top:10px;max-height:62vh;overflow-y:auto}
.cp-search-results:empty{display:none}
.cp-search-hint{margin-top:12px;font-size:10px;color:var(--muted);letter-spacing:.04em}
.cp-search.open .cp-search-results:not(:empty)+.cp-search-hint{display:none}
.cp-search-empty{padding:18px 6px;color:var(--muted);font-size:14px}

/* Suggestion / result row */
.cp-sresult{display:flex;align-items:center;gap:14px;padding:11px 8px;border-radius:var(--rs);text-decoration:none;transition:background .12s}
.cp-sresult:hover,.cp-sresult:focus-visible{background:rgba(22,184,166,.07)}
.cp-sr-media{width:46px;height:46px;flex:none;background:linear-gradient(160deg,#eef3f3,#e3ecec);border:1px solid var(--line);border-radius:var(--rs);display:grid;place-items:center;overflow:hidden}
.cp-sr-media img{width:100%;height:100%;object-fit:cover}
.cp-sr-media .cp-vial{transform:scale(.5)}
.cp-sr-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.cp-sr-cat{color:var(--muted);font-size:10px}
.cp-sr-name{font-family:var(--display);font-weight:500;color:var(--teal);font-size:14px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cp-sr-size{color:var(--muted);font-size:10px}
.cp-sr-price{font-family:var(--display);font-weight:500;color:var(--teal);font-size:14px;white-space:nowrap;flex:none}

/* Mobile /search/ page */
.cp-searchpage{padding:38px 0 70px}
.cp-searchpage .wrap{max-width:820px}
.cp-searchpage-h{font-size:clamp(24px,5vw,32px);color:var(--teal);margin:12px 0 20px}
.cp-searchpage-form{height:54px}
.cp-searchpage-results{margin-top:14px;max-height:none;overflow:visible}
.cp-popular{margin-top:30px}
.cp-searchpage.has-query .cp-popular{display:none}
.cp-popular-kicker{color:var(--signal-deep);display:block;margin-bottom:16px}
/* Full /shop product cards in the search page's narrower column: 3 across,
   dropping to 2 like the shop archive on smaller screens. */
.cp-popular ul.products{grid-template-columns:repeat(3,1fr)}
@media(max-width:680px){
  .cp-popular ul.products{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:560px){
  .cp-search-inner{padding-left:15px;padding-right:15px}
  .cp-sr-name{font-size:13.5px}
}

/* ---- Mobile menu (hamburger + slide-in drawer) ---- */
.menu-toggle{display:none;width:38px;height:38px;flex:none;border:1px solid var(--line-strong);border-radius:var(--rs);background:var(--white);color:var(--ink);place-items:center;cursor:pointer;transition:.18s}
.menu-toggle:hover,.menu-toggle:focus-visible{border-color:var(--signal);color:var(--signal-deep)}
.mobile-nav{position:fixed;inset:0;z-index:80;visibility:hidden;opacity:0;transition:opacity .2s ease}
.mobile-nav.open{visibility:visible;opacity:1}
.m-overlay{position:absolute;inset:0;z-index:1;border:none;padding:0;margin:0;background:rgba(11,59,69,0.5);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);cursor:pointer}
.m-panel{position:absolute;top:0;left:0;bottom:0;z-index:2;width:84%;max-width:330px;background:var(--paper);box-shadow:8px 0 44px -12px rgba(11,59,69,.55);display:flex;flex-direction:column;padding:20px 22px 26px;transform:translateX(-100%);transition:transform .26s cubic-bezier(.2,.7,.2,1);overflow-y:auto}
.mobile-nav.open .m-panel{transform:none}
.m-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.m-head .logo{font-size:19px}
.m-close{width:36px;height:36px;flex:none;border:1px solid var(--line-strong);border-radius:var(--rs);background:var(--white);display:grid;place-items:center;cursor:pointer;color:var(--ink);transition:.18s}
.m-close:hover,.m-close:focus-visible{border-color:var(--signal);color:var(--signal-deep)}
.m-links{display:flex;flex-direction:column}
.m-links a{font-family:var(--display);font-weight:500;font-size:19px;color:var(--teal);padding:13px 2px;border-bottom:1px solid var(--line)}
.m-links a:hover,.m-links a:focus-visible{color:var(--signal-deep)}
.m-sub{display:flex;flex-direction:column;margin-top:16px}
.m-sub a{font-size:14px;color:var(--muted);padding:8px 2px}
.m-sub a:hover{color:var(--signal-deep)}
.m-ruo{margin-top:auto;padding-top:22px;font-family:var(--mono);font-size:10px;letter-spacing:0.03em;text-transform:uppercase;color:var(--muted);line-height:1.6}

/* ---- Responsive ---- */
@media(max-width:900px){
  .hero .wrap{grid-template-columns:1fr;padding:54px 24px 60px}
  .hero h1{font-size:40px}.hero-art{height:280px}.hero-art svg{display:none}
  .trust .wrap{grid-template-columns:1fr 1fr}
  .trust .item{border-left:none;border-top:1px solid var(--line);padding-left:0}
  .trust .item:nth-child(2){border-left:1px solid var(--line);padding-left:22px}
  .cats,.prods,ul.products{grid-template-columns:repeat(2,1fr)}
  .pdp-grid{grid-template-columns:1fr;gap:30px}
  .pdp-media{min-height:0;position:static}
  .woocommerce-breadcrumb{display:none}
  .pdp-title{margin:4px 0 6px}
  .pdp-price{margin-bottom:10px}
  .quantity .qty{width:38px}
  .cp-qty-btn{width:32px}
  .pdp-detail{grid-template-columns:1fr;gap:30px;margin-top:38px}
  .quality .wrap{grid-template-columns:1fr;gap:30px}
  nav.main{display:none}
  .site-footer .cols{grid-template-columns:1fr 1fr}
  /* Mobile header: hamburger left, logo centered, cart right (search + account move into the menu) */
  .menu-toggle{display:grid}
  .site-header .logo{flex:1 1 auto;justify-content:center}
  .search-btn,.account-btn{display:none}
}
@media(max-width:560px){
  .prods{grid-template-columns:1fr 1fr}
  .hero h1{font-size:33px}
  .news form{flex-direction:column}
  .wrap{padding-left:15px;padding-right:15px}
  .util .wrap{justify-content:center;gap:0;text-align:center}
}

/* ============================================================
   Checkout Select2 fields (Country / State) — match input height
   ============================================================ */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce-checkout .input-text,
.woocommerce form .form-row .select2-container .select2-selection--single{min-height:48px;box-sizing:border-box}
.woocommerce form .form-row .select2-container .select2-selection--single{display:flex;align-items:center;padding:0 14px;line-height:normal}
.select2-container--default .select2-selection--single .select2-selection__rendered{line-height:normal;padding:0;color:var(--ink)}
.select2-container--default .select2-selection--single .select2-selection__arrow{height:46px;right:10px}
.select2-dropdown{border-color:var(--line-strong)}

/* ============================================================
   404 page
   ============================================================ */
.error-main{padding:0}
.error-wrap{max-width:680px;margin:0 auto;text-align:center;padding-top:96px;padding-bottom:110px}
.error-code{color:var(--signal-deep)}
.error-title{font-family:var(--display);font-weight:500;color:var(--teal);font-size:clamp(30px,5vw,44px);letter-spacing:-.02em;margin:14px 0 0}
.error-lead{font-size:18px;color:var(--muted);margin:18px auto 30px;max-width:520px}
.error-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.error-links{margin-top:48px;padding-top:26px;border-top:1px solid var(--line)}
.error-links .mono{display:block;color:var(--muted);margin-bottom:14px}
.error-links ul{list-style:none;padding:0;margin:0;display:flex;gap:10px 26px;justify-content:center;flex-wrap:wrap}
.error-links a{color:var(--signal-deep);font-weight:600}
.error-links a:hover{color:var(--teal)}

/* ============================================================
   Order received / thank-you page
   ============================================================ */
.cp-thankyou-page .page-main{padding-left:24px;padding-right:24px}
.cp-thankyou-page .page-title{margin-bottom:6px}
.cp-thankyou{max-width:860px}
.cp-thankyou-lead{font-size:18px;color:var(--muted);margin:0 0 30px}
/* Order summary — a clearly-divided card grid that stands off the page */
.cp-order-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;padding:0;background:var(--line);border:1px solid var(--line-strong);border-radius:var(--rl);overflow:hidden;margin:0 0 40px;box-shadow:0 22px 46px -30px rgba(11,59,69,.5)}
.cp-meta-item{display:flex;flex-direction:column;gap:7px;min-width:0;background:var(--white);padding:18px 20px}
.cp-meta-label{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.cp-meta-value{font-family:var(--display);font-weight:500;font-size:15px;color:var(--teal);word-break:break-word}
.cp-thankyou .woocommerce-order-details,
.cp-thankyou .woocommerce-customer-details{margin-top:42px}
.cp-thankyou h2{font-family:var(--display);font-weight:500;color:var(--teal);font-size:20px;margin:0 0 16px}
.cp-thankyou table.woocommerce-table,
.cp-thankyou .woocommerce-table--order-details,
.cp-thankyou table.shop_table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--line-strong);border-radius:var(--rl);overflow:hidden;background:var(--white);box-shadow:0 22px 46px -32px rgba(11,59,69,.45)}
.cp-thankyou .woocommerce-table thead th{background:var(--paper);font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:500}
.cp-thankyou .woocommerce-table th,
.cp-thankyou .woocommerce-table td,
.cp-thankyou table.shop_table th,
.cp-thankyou table.shop_table td{padding:14px 18px;border-bottom:1px solid var(--line);text-align:left;font-size:14px;color:var(--ink)}
.cp-thankyou .woocommerce-table tfoot th{font-weight:500;color:var(--muted)}
.cp-thankyou .woocommerce-table tfoot td{font-weight:600;color:var(--teal)}
.cp-thankyou .woocommerce-table tfoot tr:last-child th,
.cp-thankyou .woocommerce-table tfoot tr:last-child td{font-size:16px}
.cp-thankyou .woocommerce-table tr:last-child td,
.cp-thankyou .woocommerce-table tfoot tr:last-child th,
.cp-thankyou .woocommerce-table tfoot tr:last-child td{border-bottom:0}
.cp-thankyou td.product-total,
.cp-thankyou th.product-total,
.cp-thankyou .woocommerce-table td:last-child,
.cp-thankyou .woocommerce-table th:last-child{text-align:right}
.cp-thankyou .woocommerce-customer-details address{font-style:normal;line-height:1.7;padding:18px 20px;background:var(--white);border:1px solid var(--line-strong);border-radius:var(--rl);color:var(--ink);box-shadow:0 22px 46px -32px rgba(11,59,69,.45)}
.cp-thankyou-foot{margin-top:38px;padding-top:30px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.cp-thankyou-ruo{font-family:var(--mono);font-size:11px;letter-spacing:.03em;text-transform:uppercase;color:var(--muted);line-height:1.6;margin:0}
@media(max-width:860px){
  .cp-thankyou-page .page-main{padding-left:15px;padding-right:15px}
  .cp-order-meta{grid-template-columns:1fr 1fr}
}
@media(max-width:460px){
  .cp-order-meta{grid-template-columns:1fr}
}

/* Block-based Order Confirmation (the live thank-you page on this FSE theme) */
.cp-thankyou-page .cp-oc{max-width:880px;margin:0 auto;padding:10px 24px 64px}
.cp-thankyou-page .wc-block-order-confirmation-status{font-family:var(--display);font-weight:500;font-size:18px;color:var(--muted);margin:0 0 28px}
.cp-thankyou-page h2,.cp-oc h2{font-family:var(--display);font-weight:500;color:var(--teal);font-size:20px;margin:36px 0 14px}
/* Summary -> divided card grid */
.wc-block-order-confirmation-summary{margin:0 0 8px}
.wc-block-order-confirmation-summary-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line);border:1px solid var(--line-strong);border-radius:var(--rl);overflow:hidden;box-shadow:0 22px 46px -30px rgba(11,59,69,.5)}
.wc-block-order-confirmation-summary-list-item{background:var(--white);margin:0;padding:18px 20px;display:flex;flex-direction:column;gap:7px}
.wc-block-order-confirmation-summary-list-item__key{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.wc-block-order-confirmation-summary-list-item__value{font-family:var(--display);font-weight:500;font-size:15px;color:var(--teal)}
/* Totals table */
.wc-block-order-confirmation-totals table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--line-strong);border-radius:var(--rl);overflow:hidden;background:var(--white);box-shadow:0 22px 46px -32px rgba(11,59,69,.45)}
.wc-block-order-confirmation-totals th,.wc-block-order-confirmation-totals td{padding:14px 18px;border-bottom:1px solid var(--line);text-align:left;font-size:14px;color:var(--ink)}
.wc-block-order-confirmation-totals thead th{background:var(--paper);font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:500}
.wc-block-order-confirmation-totals td:last-child,.wc-block-order-confirmation-totals th:last-child{text-align:right}
.wc-block-order-confirmation-totals tfoot th{color:var(--muted);font-weight:500}
.wc-block-order-confirmation-totals tfoot td{color:var(--teal);font-weight:600}
.wc-block-order-confirmation-totals tfoot tr:last-child th,.wc-block-order-confirmation-totals tfoot tr:last-child td{font-size:16px}
.wc-block-order-confirmation-totals tr:last-child td,.wc-block-order-confirmation-totals tr:last-child th{border-bottom:0}
/* Address cards */
.wc-block-order-confirmation-address-wrapper{gap:20px;margin-top:40px}
.wc-block-order-confirmation-shipping-address,.wc-block-order-confirmation-billing-address{padding:16px 18px;background:var(--white);border:1px solid var(--line-strong);border-radius:var(--rl);line-height:1.7;color:var(--ink);box-shadow:0 22px 46px -32px rgba(11,59,69,.45);font-style:normal}
.cp-thankyou-page .cp-thankyou-foot{margin-top:38px;padding-top:30px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:16px;align-items:flex-start}
@media(max-width:560px){.wc-block-order-confirmation-summary-list{grid-template-columns:1fr 1fr}}

/* ============================================================
 * BLUE ACCENT THEME (light layout). Retints the teal brand family
 * to blue while keeping the original light design. Delete this
 * block, or `git checkout backup/teal-design`, to revert.
 * ============================================================ */
:root{
  --teal:#12305C; --signal:#2E6FF2; --signal-deep:#1E58D0;
}
.util{color:#d6e4f7}
.cp-bulk{background:rgba(46,111,242,.055);border-color:rgba(46,111,242,.26)}
.pdp .single_add_to_cart_button{box-shadow:0 10px 22px -10px rgba(46,111,242,.5)}
.pdp-coa{background:linear-gradient(157deg,#173a6b,#0f2648 70%)}
.btn-primary:hover,.btn-primary:focus-visible,.checkout-button:hover,.card .add:hover,.card .cp-card-add:hover,.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover,.woocommerce #place_order:hover,.wp-block-button.cp-primary>.wp-block-button__link:hover{background:#0e2a54}
.btn-signal{color:#fff}
.cp-bulk-pct,.pdp-coa-btn{color:#fff}
/* ===== Card upgrades: tighter spacing, image slider, COA popup badge ===== */
.card .body{padding:8px 14px 10px}
.card h3{margin:1px 0 1px;line-height:1.15}
.card .cp-card-buy .sizes{margin:3px 0 6px}
.card .cp-card-buy .foot{margin:0 0 4px}
.card .cp-card-add{padding:8px 14px}
.card .cp-card-more{margin-top:5px}
.card-media-link{position:absolute;inset:0;display:grid;place-items:center;z-index:1}
.card-media .card-img{opacity:0;transition:opacity .3s}
.card-media .card-img.is-active{opacity:1}
.card-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:28px;height:28px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.9);color:var(--teal);display:grid;place-items:center;cursor:pointer;font-size:20px;line-height:1;padding:0;opacity:0;transition:opacity .15s,background .15s;box-shadow:0 2px 8px rgba(11,59,69,.18)}
.card:hover .card-arrow,.card-arrow:focus-visible{opacity:1}
.card-prev{left:8px}
.card-next{right:8px}
.card-arrow:hover{background:#fff}
.card .coa{z-index:4;cursor:pointer;border:none;color:#fff;font-family:var(--mono)}
.card .coa:hover{background:var(--signal-deep)}
@media (hover:none){.card-arrow{opacity:.92}}
.card .body .mono{line-height:1.2;margin:0;display:block}
.card-titlelink{padding:3px 0 0}
.card .cp-card-buy{margin-top:0}
.card .cp-card-buy .foot .price{margin-bottom:0}
/* Beat WooCommerce's default `li.product h3{padding:.5em 0}` (higher specificity) */
.woocommerce ul.products li.product .card-titlelink h3,.woocommerce ul.products li.product.card h3{margin:0;padding:3px 0 0;line-height:1.15}
/* Beat WooCommerce's default li.product .price{margin-bottom:.5em} */
.woocommerce ul.products li.product .foot .price{margin:0}
.card-arrow svg{width:15px;height:15px;display:block}
.sec-head h2{margin:0 0 8px}
/* Match Lovable: extra-bold headings */
h1,h2,.pdp-title{font-weight:800}
.card h3,.cat h3{font-weight:700}
.card-media:not(:has(.card-img.is-active)) .card-img{opacity:1}
/* Hero background — client-supplied art-directed crops, one per breakpoint.
   Each file is @2x for its named width (e.g. hero-1440 is 3024px wide), so it
   stays sharp on retina. Mobile-first ladder: each image applies from its own
   breakpoint up to the next. Heading sits over the light left area. */
.hero{background-image:url(https://cleanpeptide.com/wp-content/uploads/2026/08/hero/hero-640.webp);background-size:cover;background-position:center right;background-repeat:no-repeat}
@media(min-width:680px){.hero{background-image:url(https://cleanpeptide.com/wp-content/uploads/2026/08/hero/hero-680.webp)}}
@media(min-width:700px){.hero{background-image:url(https://cleanpeptide.com/wp-content/uploads/2026/08/hero/hero-700.webp)}}
@media(min-width:730px){.hero{background-image:url(https://cleanpeptide.com/wp-content/uploads/2026/08/hero/hero-730.webp)}}
@media(min-width:770px){.hero{background-image:url(https://cleanpeptide.com/wp-content/uploads/2026/08/hero/hero-770.webp)}}
@media(min-width:860px){.hero{background-image:url(https://cleanpeptide.com/wp-content/uploads/2026/08/hero/hero-860.webp)}}
@media(min-width:940px){.hero{background-image:url(https://cleanpeptide.com/wp-content/uploads/2026/08/hero/hero-940.webp)}}
@media(min-width:1000px){.hero{background-image:url(https://cleanpeptide.com/wp-content/uploads/2026/08/hero/hero-1000.webp)}}
@media(min-width:1024px){.hero{background-image:url(https://cleanpeptide.com/wp-content/uploads/2026/08/hero/hero-1024.webp)}}
@media(min-width:1060px){.hero{background-image:url(https://cleanpeptide.com/wp-content/uploads/2026/08/hero/hero-1060.webp)}}
@media(min-width:1100px){.hero{background-image:url(https://cleanpeptide.com/wp-content/uploads/2026/08/hero/hero-1100.webp)}}
@media(min-width:1280px){.hero{background-image:url(https://cleanpeptide.com/wp-content/uploads/2026/08/hero/hero-1280.webp)}}
@media(min-width:1340px){.hero{background-image:url(https://cleanpeptide.com/wp-content/uploads/2026/08/hero/hero-1340.webp)}}
@media(min-width:1440px){.hero{background-image:url(https://cleanpeptide.com/wp-content/uploads/2026/08/hero/hero-1440.webp)}}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(244,247,251,.95) 0%,rgba(244,247,251,.62) 38%,rgba(244,247,251,0) 62%);z-index:0}
.hero .wrap{grid-template-columns:1fr;position:relative;z-index:1;min-height:clamp(470px,42vw,640px);align-content:center}
.hero-copy{max-width:560px}
/* Mobile hero: Figma image as a full-bleed background (vial bottom-right), copy overlaid */
.hero-mobile-img{display:none}
@media(max-width:760px){
  /* image comes from the breakpoint ladder above — only the overlay/spacing differ here */
  .hero::before{display:none}
  .hero .wrap{align-content:start;padding-top:26px;padding-bottom:26px}
  .hero-copy{max-width:none}
}
/* Phones (<640px): the supplied artwork set starts at 640px and every crop is
   landscape, but the hero box is portrait at this width — `cover` would scale
   the image to ~2x the viewport and push the vial straight over the copy.
   Until a true portrait crop exists, lay the artwork full-width along the
   bottom and fill the space above with a gradient matched to its top edge. */
@media(max-width:639px){
  .hero{
    background-image:url(https://cleanpeptide.com/wp-content/uploads/2026/08/hero/hero-640.webp),
                     linear-gradient(150deg,#fafcfd 0%,#f2f6f9 45%,#e3eef5 100%);
    background-size:100% auto,cover;
    background-position:center bottom,center;
    background-repeat:no-repeat,no-repeat;
  }
}
/* ===== Buttons only: navy #12305C -> teal #0C6D89 (headings/footer/prices stay navy) ===== */
.btn-primary,
.wp-block-button.cp-primary>.wp-block-button__link,
.card .add,
.card .cp-card-add,
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.woocommerce #place_order,button.checkout-button{background:#0C6D89}
.btn-primary:hover,.btn-primary:focus-visible,
.wp-block-button.cp-primary>.wp-block-button__link:hover,
.card .add:hover,.card .add:focus-visible,
.card .cp-card-add:hover,.card .cp-card-add:focus-visible,
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover,.woocommerce #place_order:hover,button.checkout-button:hover{background:#0A5A70}
/* ===== Homepage catalog: category filter bar + horizontal product slider ===== */
.home-filter{display:flex;gap:8px;align-items:center;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:6px 0 18px;padding:2px 0}
.home-filter::-webkit-scrollbar{display:none}
.home-filter .chip{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;font-family:var(--display);font-weight:500;font-size:13px;padding:8px 14px;border:1px solid var(--line-strong);border-radius:30px;color:var(--ink);background:var(--white);cursor:pointer;transition:.15s;white-space:nowrap}
.home-filter .chip:hover{border-color:var(--signal);color:var(--signal-deep)}
.home-filter .chip.active{background:var(--teal);color:#fff;border-color:var(--teal)}
.home-filter .chip .chip-n{font-family:var(--mono);font-size:10px;font-weight:400;opacity:.55}
.home-filter .chip.active .chip-n{opacity:.85}
.prod-slider-wrap{position:relative}
.prod-slider.products{display:flex !important;gap:18px;list-style:none;margin:0;padding:4px 2px 10px;overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.prod-slider.products::-webkit-scrollbar{display:none}
.prod-slider.products::before,.prod-slider.products::after{content:none!important;display:none!important}
.prod-slider.products>li.product{flex:0 0 clamp(240px,74vw,275px);width:clamp(240px,74vw,275px);margin:0!important;padding:0;scroll-snap-align:start}
.prod-slider.products>li.product[hidden]{display:none}
.prod-slider-empty{color:var(--muted);padding:20px 0}
.prod-nav{position:absolute;top:42%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;border:1px solid var(--line-strong);background:var(--white);color:var(--teal);display:none;place-items:center;cursor:pointer;box-shadow:0 6px 18px -8px rgba(11,59,69,.42);z-index:6;transition:.15s}
.prod-nav:hover{border-color:var(--signal);color:var(--signal-deep)}
.prod-nav svg{width:18px;height:18px;display:block}
.prod-nav.prev{left:-12px}
.prod-nav.next{right:-12px}
.prod-slider-wrap.can-prev .prod-nav.prev{display:grid}
.prod-slider-wrap.can-next .prod-nav.next{display:grid}
@media(max-width:820px){.prod-nav{display:none!important}}
/* ===== Card "View COA" button (against the price) + modal certificate tabs ===== */
.card .cp-card-buy .foot{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
/* These carry display:inline-flex, which outranks the UA sheet's [hidden] rule.
   Without this the buttons stay visible and clickable on sizes with no certificate. */
.cp-coa-chip[hidden],.pdp-coa-btn[hidden],.pdp-coa-none[hidden],.pdp-stage .coa[hidden],.pdp-spec-inline span[hidden]{display:none!important}
.cp-coa-tabs{display:none;gap:6px;padding:10px 20px 14px;flex-wrap:wrap}
.cp-coa-tabs.has-2{display:flex}
.cp-coa-tab{font-family:var(--display);font-weight:500;font-size:13px;padding:7px 15px;border:1px solid var(--line-strong);border-radius:30px;background:var(--white);color:var(--ink);cursor:pointer;transition:.15s}
.cp-coa-tab:hover{border-color:var(--signal);color:var(--signal-deep)}
.cp-coa-tab.active{background:var(--teal);color:#fff;border-color:var(--teal)}
/* ===== White page background (was paper gray #F5F7F7) ===== */
body{background:var(--white)}
.site-header{background:rgba(255,255,255,.88)}
.site-header.is-stuck{background:var(--white)}
/* ===== Trust badges overlaid on product images (card + product page) ===== */
.card-media,.card .ph,.pdp-stage{position:relative}
.cp-prod-badges{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;align-items:flex-end;justify-content:center;gap:5px;padding:7px 7px 8px;pointer-events:none}
.cp-badge{height:52px;width:auto;display:block;flex:0 0 auto;filter:drop-shadow(0 2px 5px rgba(11,59,69,.2))}
.pdp-stage .cp-prod-badges{gap:12px;padding:12px 14px 14px;justify-content:space-evenly}
.pdp-stage .cp-badge{height:88px}
@media(max-width:600px){
  .cp-prod-badges{gap:3px;padding:6px 4px 6px}
  .cp-badge{height:40px}
  .pdp-stage .cp-badge{height:64px}
}
/* ===== Cards: badges 2 stacked top-left + 2 stacked top-right (PDP stays a bottom row) ===== */
.card-media .cp-prod-badges{top:8px;left:8px;right:8px;bottom:auto;display:grid;grid-auto-flow:column;grid-template-rows:auto auto;justify-content:space-between;align-content:start;gap:6px;padding:0}
.card-media .cp-badge{height:44px}
.card .ruo{top:auto;bottom:10px;left:10px}
@media(max-width:600px){.card-media .cp-badge{height:36px}.card-media .cp-prod-badges{top:6px;left:6px;right:6px;gap:5px}}
/* ===== Card badges: a bit bigger, no drop-shadow ===== */
.cp-badge{filter:none}
.card-media .cp-badge{height:54px}
@media(max-width:600px){.card-media .cp-badge{height:44px}}
/* ===== Trust badges: cropped icon (SVG) + real text label in the theme font ===== */
.cp-badge{display:flex;flex-direction:column;align-items:center;gap:3px;height:auto!important;width:auto;filter:none;text-align:center;line-height:1}
.cp-badge-ico{display:block;flex:0 0 auto;filter:none}
.cp-badge-txt{font-family:var(--mono);font-weight:500;text-transform:uppercase;letter-spacing:.01em;color:var(--teal);line-height:1.12;display:block;text-shadow:0 1px 1px rgba(255,255,255,.6)}
.card-media .cp-badge-ico{height:44px}
.card-media .cp-badge-txt{font-size:7.5px;max-width:74px}
.pdp-stage .cp-badge-ico{height:70px}
.pdp-stage .cp-badge-txt{font-size:11px;max-width:104px;letter-spacing:.03em}
@media(max-width:600px){
  .card-media .cp-badge-ico{height:38px}
  .card-media .cp-badge-txt{font-size:6.5px;max-width:62px}
  .pdp-stage .cp-badge-ico{height:54px}
  .pdp-stage .cp-badge-txt{font-size:9px}
}
/* ===== Product page: badges in the BOTTOM corners (top holds RUO/COA) — 2 stacked each side ===== */
.pdp-stage .cp-prod-badges{top:auto;bottom:14px;left:14px;right:14px;display:grid;grid-auto-flow:column;grid-template-rows:auto auto;justify-content:space-between;align-content:end;gap:10px;padding:0}
.pdp-stage .cp-badge-ico{height:56px}
.pdp-stage .cp-badge-txt{font-size:10px;max-width:84px}
@media(max-width:600px){
  .pdp-stage .cp-prod-badges{bottom:8px;left:8px;right:8px;gap:6px}
  .pdp-stage .cp-badge-ico{height:44px}
  .pdp-stage .cp-badge-txt{font-size:8px;max-width:66px}
}
/* Product-page "✓ COA" corner badge: white text (was dark navy) */
.pdp-media .coa{color:#fff}
/* ===== "Documentation first" band: sample COA card as a link ===== */
.coa-card{display:block;text-decoration:none;color:inherit;transition:border-color .2s,transform .2s,box-shadow .2s}
.coa-card:hover,.coa-card:focus-visible{border-color:rgba(255,255,255,.3);transform:translateY(-2px);box-shadow:0 20px 44px -24px rgba(0,0,0,.65)}
.coa-sample{font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--signal);background:rgba(46,111,242,.16);border:1px solid rgba(46,111,242,.42);border-radius:4px;padding:3px 8px;line-height:1;white-space:nowrap}
.coa-card-note{font-size:11px;color:#a9ccc6;opacity:.72;letter-spacing:.03em;margin:-2px 0 14px}
.coa-card-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.1);font-family:var(--mono);font-size:11px;letter-spacing:.03em;color:var(--signal);text-transform:uppercase}
.coa-card-foot svg{flex:0 0 auto;transition:transform .2s}
.coa-card:hover .coa-card-foot svg{transform:translateX(3px)}
/* ===== Hero: trust badges (from the product page) replace the inline props ===== */
.hero-badges{gap:30px;align-items:flex-start}
.hero-badges .cp-badge{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:inherit}
/* Desktop: icons at 2x (client request) */
.hero-badges .cp-badge-ico{height:92px}
.hero-badges .cp-badge-txt{font-size:11px;max-width:96px}
@media(max-width:600px){
  /* Trust badges: prominent 2x2 grid, big icons, bold labels (client: these are ultra-important) */
  .hero-badges{display:grid;grid-template-columns:auto auto;justify-content:start;justify-items:start;gap:24px 22px;margin-top:26px}
  .hero-badges .cp-badge{gap:9px}
  .hero-badges .cp-badge-ico{height:74px}
  .hero-badges .cp-badge-txt{font-size:12.5px;font-weight:700;max-width:140px;letter-spacing:.02em;line-height:1.15}
}
@media(max-width:424px){
  .hero-badges .cp-badge-ico{height:50px}
  .hero-props.hero-badges{max-width:50%}
}
/* Hero heading fits on 2 lines on desktop (second line needs ~605px) */
@media(min-width:761px){
  .hero-copy{max-width:680px}
  .hero-copy .lead{max-width:520px}
}
/* ===== Product images: 976x1104 (portrait) ratio — cards + PDP ===== */
.card .ph,.card-media.ph{aspect-ratio:976/1104}
.pdp-stage{aspect-ratio:976/1104}
.pdp-thumb{width:60px;height:68px}
/* PDP: trust badges show only on the primary image, not other gallery images */
.pdp-stage.pdp-alt-img .cp-prod-badges{display:none}
/* ===== Cards: 4 trust badges stacked in the BOTTOM-RIGHT corner (icons only) ===== */
.card-media .cp-prod-badges{top:auto;bottom:10px;left:auto;right:10px;display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-end;gap:6px;padding:0}
.card-media .cp-badge-txt{display:none}
.card-media .cp-badge-ico{height:40px}
@media(max-width:600px){.card-media .cp-badge-ico{height:32px}.card-media .cp-prod-badges{bottom:8px;right:8px;gap:5px}}
/* Cards: trust badges show only on the primary image, not other gallery images */
.card-media.cp-alt-img .cp-prod-badges{display:none}
/* Cart-count badge number: white (was navy) */
.cartcount{color:#fff}
/* Trust badges are now <img> PNGs — size by height, keep aspect */
.cp-badge-ico{width:auto;max-width:none}
/* Product page (mobile): larger, readable trust-badge labels (icons unchanged) */
@media(max-width:600px){
  .pdp-stage .cp-badge-txt{font-size:11px;max-width:92px;letter-spacing:.01em;line-height:1.16}
  .pdp-stage .cp-prod-badges{gap:8px}
}
/* Main brand color changed to teal #0C6D89 (was navy #12305C) */
:root{--teal:#0C6D89}
/* Secondary accent recolored into the teal family (brighter, still pops) */
:root{--signal:#0E9CC0;--signal-deep:#0A5A70}
/* White-text CTAs/badges on light backgrounds keep the darker main teal for contrast */
.pdp .single_add_to_cart_button{background:var(--teal);color:#fff}
.pdp .single_add_to_cart_button:hover,.pdp .single_add_to_cart_button.added{background:#0a5a70;color:#fff}
.cartcount{background:var(--teal)}
.cp-bulk-pct{background:var(--teal)}
/* Accent-deep -> bright teal so 'verify', eyebrows and links pop (hovers are set explicitly elsewhere) */
:root{--signal-deep:#0E9CC0}
.btn-signal:hover,.btn-signal:focus-visible,.wp-block-button.cp-signal>.wp-block-button__link:hover{background:#0a5a70;color:#fff}
/* Teal band ("Documentation first") + footer: light, readable text on teal */
.quality p,.quality .reveal>p,.qa-stats .l{color:#d4ebf0}
.quality .mono{color:#a9dceb}
.qa-stats .n{color:#eaf7fa}
.quality .coa-card .row span:first-child{color:#c8e5ed}
.quality .coa-card .row .v{color:#ffffff}
.quality .coa-card .pass{color:#8fe3d6}
.quality .coa-card-head .mono{color:#a9dceb}
.quality .coa-card-note{color:#c8e5ed;opacity:.92}
.quality .coa-card-foot{color:#bfe4ec;border-top-color:rgba(255,255,255,.16)}
.quality .coa-sample{color:#eaf7fa;background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.42)}
.site-footer{color:#d4ebf0}
.site-footer .blurb,.site-footer ul a,.site-footer .footer-copy{color:#d4ebf0}
.site-footer ul a:hover,.site-footer ul a:focus-visible{color:#ffffff}
/* eyebrows in the teal band use an inline color:var(--signal) — force light */
.quality .mono{color:#a9dceb!important}
/* Checkout payment icons: give SVGs an explicit size so flexbox can't collapse them */
.cp-co-pay .pay{width:40px;height:26px;flex:0 0 auto}
/* Checkout payment-icon row: force full width so the icons sit in a row, not a column */
.cp-co-pay{width:100%}
/* Checkout: the Place order button ships as float:right, which pulled the trust row (payment
   icons + points) up underneath it so the icons kissed the button's bottom edge. Unfloat the
   button so normal flow resumes; the trust row then sits cleanly below with real breathing room. */
#place_order{float:none!important;width:100%}
.cp-co-trust{clear:both;margin-top:22px;padding-top:0;border-top:0}
.cp-co-pay{margin-top:0}
/* ===== Hero trust badges + PDP tweaks (client batch) ===== */
/* Breathing room under the trust badges, before the CTA (desktop + mobile) */
.hero .cta-row{margin-top:30px}
/* Trust-badge labels in near-black for contrast */
.hero-badges .cp-badge-txt{color:#141414}
/* PDP: 'Shop all products' back-to-shop button before the FAQ */
.pdp-shopall{text-align:center;margin-top:44px}
/* Shop filters on mobile: wrap to a max of 2 rows; if they can't fit in 2 rows,
   JS adds .cp-scroll2 to lay them out as a 2-row grid that scrolls horizontally
   (staying 2 rows, rather than collapsing to a single scrolling row). */
@media(max-width:760px){
  .shop-filter{flex-wrap:wrap;overflow-x:visible;row-gap:10px}
  .shop-filter.is-stuck{flex-wrap:wrap}
  .shop-filter-nav{display:none!important}
  .shop-filter .chip{font-size:11px;padding:6px 10px;gap:5px}
  .shop-filter.cp-scroll2{display:grid;grid-auto-flow:row;grid-template-columns:repeat(var(--cols,4),max-content);grid-template-rows:auto auto;justify-content:start;column-gap:8px;row-gap:10px;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .shop-filter.cp-scroll2::-webkit-scrollbar{display:none}
}

/* ===== COA viewer: loading state =====
   The certificate is fetched when the dialog opens, so without this the panel
   is simply blank while it downloads — which reads as broken rather than busy.
   The declared width/height on the img keeps the ratio reserved, so nothing
   jumps when it lands. */
.cp-coa-mbody{position:relative}
.cp-coa-mbody.is-loading::after{
  content:"";position:absolute;top:50%;left:50%;width:34px;height:34px;margin:-17px 0 0 -17px;
  border:3px solid rgba(11,59,69,.15);border-top-color:var(--teal);border-radius:50%;
  animation:cp-coa-spin .7s linear infinite;z-index:2}
.cp-coa-mbody.is-loading img{opacity:0}
.cp-coa-mbody img{opacity:1;transition:opacity .18s ease}
@keyframes cp-coa-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .cp-coa-mbody.is-loading::after{animation-duration:1.6s}
}
.cp-coa-mbody.is-loading{min-height:320px}

/* =========================================================================
   REVIEWS
   Store-wide ratings: the same score on every card, on the PDP, the homepage
   strip and the /reviews/ page. Everything here renders only when reviews are
   live (or for an admin previewing them) — see includes/reviews.php.
   ========================================================================= */

:root{--cp-star-on:#f5a623;--cp-star-off:#d8dee6}

/* ---- Star row ---------------------------------------------------------- */
.cp-stars{display:inline-block;line-height:0;flex:0 0 auto}
.cp-stars svg{display:block;height:auto}
.cp-stars-sm svg{width:66px}
.cp-stars-md svg{width:92px}
.cp-stars-lg svg{width:120px}

/* ---- Compact summary (cards, PDP title) -------------------------------- */
.cp-rev-summary{display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:inherit}
a.cp-rev-summary:hover .cp-rev-n,a.cp-rev-summary:focus-visible .cp-rev-n{color:var(--signal-deep);text-decoration:underline}
.cp-rev-avg{font-weight:600;font-size:13px;color:var(--ink)}
.cp-rev-n{font-family:var(--mono);font-size:11px;color:var(--muted)}
.cp-rev-card-sum{margin:2px 0 0}
.cp-rev-pdp-sum{margin:10px 0 0}
.cp-rev-pdp-sum .cp-rev-avg{font-size:15px}
.cp-rev-pdp-sum .cp-rev-n{font-size:12px}

/* ---- Admin preview banner ---------------------------------------------- */
.cp-rev-preview{background:#fcf9e8;border:1px solid #dba617;border-left-width:4px;border-radius:var(--rs);
  padding:9px 12px;margin:0 0 18px;font-size:13px;color:#6b5200}
.cp-rev-preview b{color:#5a4500}

/* ---- Review card -------------------------------------------------------- */
.cp-rev-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:16px 17px 15px;display:flex;flex-direction:column;gap:9px;min-width:0}
.cp-rev-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cp-rev-vf{display:inline-flex;align-items:center;gap:4px;font-family:var(--mono);font-size:9px;
  letter-spacing:.04em;text-transform:uppercase;color:var(--signal-deep);
  background:rgba(14,156,192,.09);border-radius:4px;padding:3px 6px}
.cp-rev-demo{font-family:var(--mono);font-size:9px;letter-spacing:.04em;text-transform:uppercase;
  color:#8a6d00;background:#fcf3d4;border:1px solid #e3c766;border-radius:4px;padding:2px 6px}
.cp-rev-title{font-family:var(--display);font-size:15px;font-weight:600;margin:0;color:var(--ink);line-height:1.35}
.cp-rev-body{margin:0;font-size:14px;line-height:1.6;color:var(--muted);flex:1}
.cp-rev-foot{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding-top:10px;
  border-top:1px solid var(--line);margin-top:2px}
.cp-rev-who{font-size:13px;font-weight:600;color:var(--ink)}
.cp-rev-when{font-size:11px;color:var(--muted)}
.cp-rev-prod{font-size:10px;color:var(--teal);background:rgba(12,109,137,.07);
  border-radius:4px;padding:3px 7px;margin-left:auto}
.cp-rev-card.is-demo{border-style:dashed;border-color:#e3c766}

/* ---- Score panel -------------------------------------------------------- */
.cp-rev-score{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0}
.cp-rev-big{font-family:var(--display);font-size:52px;font-weight:700;line-height:1;color:var(--ink)}
.cp-rev-count{margin:0;font-size:13px;color:var(--muted)}
.cp-rev-bars{display:flex;flex-direction:column;gap:5px;width:100%;margin-top:6px}
.cp-rev-bar{display:flex;align-items:center;gap:9px;text-decoration:none;color:inherit;padding:1px 0}
.cp-rev-bar:hover .cp-rev-bar-f{background:var(--signal-deep)}
.cp-rev-bar-l{font-size:11px;color:var(--muted);width:26px;flex:0 0 auto}
.cp-rev-bar-t{flex:1;height:7px;background:var(--paper);border-radius:99px;overflow:hidden;min-width:0}
.cp-rev-bar-f{display:block;height:100%;background:var(--cp-star-on);border-radius:99px;transition:background .15s}
.cp-rev-bar-n{font-size:11px;color:var(--muted);width:28px;text-align:right;flex:0 0 auto}
.cp-rev-all{margin-top:12px;font-size:13px;font-weight:600;color:var(--signal-deep);text-decoration:none}
.cp-rev-all:hover{text-decoration:underline}

/* ---- PDP section -------------------------------------------------------- */

.cp-rev-h{font-family:var(--display);font-size:26px;margin:0 0 22px;color:var(--ink);line-height:1.25}
.cp-rev-h .mono{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--signal-deep);margin-bottom:6px;font-weight:500}
.cp-rev-layout{display:grid;grid-template-columns:210px minmax(0,1fr);gap:34px;align-items:start}

/* ---- Carousel ----------------------------------------------------------- */
.cp-rev-carousel{position:relative;min-width:0}
.cp-rev-track{display:flex;gap:14px;overflow-x:auto;scroll-behavior:smooth;
  scroll-snap-type:x mandatory;padding:2px 2px 14px;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
.cp-rev-track::-webkit-scrollbar{height:6px}
.cp-rev-track::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:99px}
.cp-rev-track::-webkit-scrollbar-track{background:transparent}
.cp-rev-track>.cp-rev-card{flex:0 0 300px;scroll-snap-align:start}
.cp-rev-arrow{position:absolute;top:38%;transform:translateY(-50%);width:36px;height:36px;
  border-radius:50%;border:1px solid var(--line-strong);background:var(--white);color:var(--teal);
  display:grid;place-items:center;cursor:pointer;z-index:2;transition:.15s;
  box-shadow:0 4px 14px -6px rgba(11,59,69,.35)}
.cp-rev-arrow svg{width:17px;height:17px}
.cp-rev-arrow:hover{border-color:var(--teal);background:var(--teal);color:#fff}
.cp-rev-arrow[disabled]{opacity:0;pointer-events:none}
.cp-rev-prev{left:-16px}
.cp-rev-next{right:-16px}

/* ---- Homepage strip ------------------------------------------------------ */
.cp-rev-strip{padding:52px 0;background:var(--paper);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)}
.cp-rev-strip-head{display:flex;align-items:center;justify-content:space-between;gap:18px;
  flex-wrap:wrap;margin-bottom:22px}
.cp-rev-strip-score{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.cp-rev-strip-avg{font-family:var(--display);font-size:19px;font-weight:700;color:var(--ink)}
.cp-rev-strip-n{font-size:12px;color:var(--muted)}
.cp-rev-strip-link{font-size:13px;font-weight:600;color:var(--signal-deep);text-decoration:none}
.cp-rev-strip-link:hover{text-decoration:underline}
.cp-rev-strip-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}

/* ---- /reviews/ page ------------------------------------------------------ */
.cp-rev-page{padding:8px 0 20px}
.cp-rev-page-head{margin-bottom:26px;padding-bottom:24px;border-bottom:1px solid var(--line)}
.cp-rev-page-head .cp-rev-score{max-width:320px}
.cp-rev-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.cp-rev-pill{font-size:13px;padding:7px 13px;border:1px solid var(--line-strong);border-radius:99px;
  text-decoration:none;color:var(--muted);background:var(--white);transition:.15s;white-space:nowrap}
.cp-rev-pill:hover{border-color:var(--teal);color:var(--teal)}
.cp-rev-pill.is-on{background:var(--teal);border-color:var(--teal);color:#fff}
.cp-rev-pill.is-on .mono{color:rgba(255,255,255,.8)}
.cp-rev-pill .mono{font-size:11px;color:var(--muted)}
.cp-rev-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.cp-rev-pager{display:flex;gap:6px;flex-wrap:wrap;margin-top:28px;justify-content:center}
.cp-rev-pnum{min-width:36px;height:36px;display:grid;place-items:center;padding:0 9px;
  border:1px solid var(--line-strong);border-radius:var(--rs);text-decoration:none;
  color:var(--muted);font-size:13px;background:var(--white);transition:.15s}
.cp-rev-pnum:hover{border-color:var(--teal);color:var(--teal)}
.cp-rev-pnum.is-on{background:var(--teal);border-color:var(--teal);color:#fff}
.cp-rev-empty{color:var(--muted);font-size:14px}

/* ---- Responsive ---------------------------------------------------------- */
@media(max-width:960px){
  .cp-rev-layout{grid-template-columns:1fr;gap:24px}
  .cp-rev-score{flex-direction:row;flex-wrap:wrap;align-items:center;gap:14px}
  .cp-rev-bars{max-width:320px}
  .cp-rev-strip-grid,.cp-rev-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cp-rev-prev{left:-8px}
  .cp-rev-next{right:-8px}
}
@media(max-width:640px){
  .cp-rev-strip-grid,.cp-rev-grid{grid-template-columns:1fr}
  .cp-rev-big{font-size:42px}
  .cp-rev-h{font-size:22px}
  .cp-rev-track>.cp-rev-card{flex-basis:82vw}
  .cp-rev-arrow{display:none}
}
.cp-rev-preview-off{margin-left:8px;color:#6b5200;text-decoration:underline;font-weight:600}
.cp-rev-preview-off:hover{color:#3f3000}

/* Reviews page: .page-main has no horizontal padding of its own, so the page
   opts into the standard gutter the same way /coa/ and the account pages do —
   24px, dropping to 15px to match .wrap at the small breakpoint. */
.cp-reviews-page .page-main{padding-left:24px;padding-right:24px}
.cp-reviews-page .page-main>*{max-width:1180px;margin-left:auto;margin-right:auto}
@media(max-width:560px){
  .cp-reviews-page .page-main{padding-left:15px;padding-right:15px}
}

/* ---- Stacked product-page sections: FAQ, related products, reviews --------
   Each of these previously set its own border-top PLUS margin-top PLUS an
   asymmetric padding (52/40, 48/52, 44/46-8), so the gaps between them all
   differed and none matched its own bottom. Spacing is now defined once:
   padding alone sets it, top and bottom, with no margin to double-count. */
.pdp-faq,
.related.products,.products.related,
.woocommerce div.product .related.products,
.cp-rev-section{
  border-top:1px solid var(--line);
  margin-top:0;
  padding:52px 0;
}
@media(max-width:640px){
  .pdp-faq,
  .related.products,.products.related,
  .woocommerce div.product .related.products,
  .cp-rev-section{padding:36px 0}
}
/* The .related.products selector above is repeated with WooCommerce's own
   specificity (.woocommerce div.product .related.products{margin-top:5em} in
   woocommerce-blocktheme.css), which otherwise wins and reinstates a 75px
   margin above the row. */

/* .pdp carried padding-bottom:84px, which fell between the related row (inside
   .pdp) and the review section (rendered after it, since the WooCommerce hook
   fires outside the template). Each section now owns its own spacing, so the
   wrapper adds none. */
.pdp{padding-bottom:0}

/* The last FAQ item's own margin extended that section's bottom gap past the
   52px the others use. */
.pdp-faq .faq-list>:last-child{margin-bottom:0}
/* WooCommerce's stylesheet puts margin-bottom:15px on ul.products; inside the
   related row that added to the padding and skewed the bottom gap. */
.related.products ul.products,.products.related ul.products{margin-bottom:0}

/* ---- Certificate chip on the product card image --------------------------
   Sits bottom-left over the photo: tick, "View COA", chevron. z-index clears
   .card-media-link, which covers the whole image to make the card clickable.
   Sized to read as a real control against the photo rather than a caption. */
.cp-coa-chip{position:absolute;bottom:10px;left:10px;z-index:10;
  display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 9px 0 12px;
  border-radius:999px;background:#fff;border:1px solid var(--line-strong);
  font-family:var(--body);font-size:13px;font-weight:600;line-height:1;color:var(--ink);
  cursor:pointer;box-shadow:0 4px 14px -3px rgba(28,35,38,.30);
  transition:border-color .15s,box-shadow .15s,transform .1s}
.cp-coa-chip:hover,.cp-coa-chip:focus-visible{border-color:var(--teal);
  box-shadow:0 8px 22px -5px rgba(28,35,38,.38)}
.cp-coa-chip:active{transform:scale(.96)}
.cp-coa-chip-tick{width:15px;height:15px;flex:0 0 auto;color:#16a34a}
.cp-coa-chip-label{text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--line-strong);white-space:nowrap}
.cp-coa-chip-chev{width:14px;height:14px;flex:0 0 auto;color:var(--muted)}
@media(max-width:560px){
  .cp-coa-chip{height:30px;font-size:12px;bottom:8px;left:8px;gap:5px;padding:0 7px 0 10px}
  .cp-coa-chip-tick{width:13px;height:13px}
  .cp-coa-chip-chev{width:12px;height:12px}
}


/* =========================================================================
   V2 DESIGN LAYER  (promoted from design preview, 2026-08-27, signed off)

   These rules were built and reviewed behind the tokenised ?cp_design=
   preview and are now the live design. They keep their .cp-v2 scope class,
   which cleanpeptides_body_class() adds to every page, ON PURPOSE: every
   specificity relationship in here was tested against the rules above with
   that extra class present. Stripping it would silently reshuffle the
   cascade against 128KB of existing CSS. The class is the seam, not decor.

   Covers: button + shape + elevation system, the rebuilt About page, the
   PDP feature tiles, the Bundle & save ladder, the certificate card, and
   the two-column product header.

   New visual work still goes to design-preview.css first; this block is
   where it lands once it is approved.
   ========================================================================= */

:root{
  /* Shape system, one documented rule (Amino's, applied to our tokens):
     interactive controls are pills, panels are 14px, inputs are 8px. */
  --cp-r-pill:999px;
  --cp-r-panel:14px;
  --cp-r-input:8px;

  /* Elevation, tinted with the brand teal (#0C6D89 = 12,109,137) so shadows
     sit in the same colour family as the page instead of muddying it. */
  --cp-lift-1:0 1px 2px rgba(12,109,137,.08), 0 4px 12px -4px rgba(12,109,137,.18);
  --cp-lift-2:0 2px 4px rgba(12,109,137,.10), 0 12px 28px -8px rgba(12,109,137,.28);
  --cp-lift-3:0 20px 60px -20px rgba(12,109,137,.34);

  --cp-ease:cubic-bezier(.4,0,.2,1);
}

/* -------------------------------------------------------------------------
   1. BUTTONS
   The single biggest lift. Pill radius, real elevation, a lift on hover and a
   press on active. Every button on the site is listed so none is left behind
   looking like the old system.
   ------------------------------------------------------------------------- */
.cp-v2 .btn,
.cp-v2 .cp-card-add,
.cp-v2 .card .add,
.cp-v2 .checkout-button,
.cp-v2 .single_add_to_cart_button,
.cp-v2 .woocommerce a.button,
.cp-v2 .woocommerce button.button,
.cp-v2 .woocommerce input.button,
.cp-v2 .woocommerce #place_order,
.cp-v2 .wp-block-button__link{
  border-radius:var(--cp-r-pill);
  box-shadow:var(--cp-lift-1);
  transition:background-color .15s var(--cp-ease),
             box-shadow .15s var(--cp-ease),
             transform .15s var(--cp-ease),
             border-color .15s var(--cp-ease);
  will-change:transform;
}

.cp-v2 .btn:hover,
.cp-v2 .btn:focus-visible,
.cp-v2 .cp-card-add:hover,
.cp-v2 .card .add:hover,
.cp-v2 .checkout-button:hover,
.cp-v2 .single_add_to_cart_button:hover,
.cp-v2 .woocommerce a.button:hover,
.cp-v2 .woocommerce button.button:hover,
.cp-v2 .woocommerce input.button:hover,
.cp-v2 .woocommerce #place_order:hover,
.cp-v2 .wp-block-button__link:hover{
  box-shadow:var(--cp-lift-2);
  transform:translateY(-1px);
}

/* The press. Amino uses scale(.95); at our button sizes that overshoots, so
   the button settles back to its resting plane instead. */
.cp-v2 .btn:active,
.cp-v2 .cp-card-add:active,
.cp-v2 .card .add:active,
.cp-v2 .checkout-button:active,
.cp-v2 .single_add_to_cart_button:active,
.cp-v2 .woocommerce a.button:active,
.cp-v2 .woocommerce button.button:active,
.cp-v2 .woocommerce input.button:active,
.cp-v2 .woocommerce #place_order:active,
.cp-v2 .wp-block-button__link:active{
  transform:translateY(0) scale(.985);
  box-shadow:var(--cp-lift-1);
}

/* Primary CTAs carry a touch more weight, being the thing we want clicked. */
.cp-v2 .btn-primary,
.cp-v2 .single_add_to_cart_button,
.cp-v2 .cp-card-add,
.cp-v2 .checkout-button,
.cp-v2 .woocommerce #place_order{
  box-shadow:var(--cp-lift-2);
  font-weight:600;
  letter-spacing:.005em;
}
.cp-v2 .btn-primary:hover,
.cp-v2 .single_add_to_cart_button:hover,
.cp-v2 .cp-card-add:hover,
.cp-v2 .checkout-button:hover,
.cp-v2 .woocommerce #place_order:hover{
  box-shadow:var(--cp-lift-3);
}

/* Keyboard users get the same affordance, plus a visible ring. */
.cp-v2 .btn:focus-visible,
.cp-v2 .cp-card-add:focus-visible,
.cp-v2 .single_add_to_cart_button:focus-visible,
.cp-v2 .wp-block-button__link:focus-visible{
  outline:2px solid var(--signal-deep);
  outline-offset:3px;
}

/* Out of stock is not a button. It should not lift, press or invite a click. */
.cp-v2 .cp-card-add.is-oos{
  box-shadow:none;
  transform:none;
}

/* -------------------------------------------------------------------------
   2. SHAPE SYSTEM
   Applied consistently so the page reads as one system rather than a mix of
   6px, 10px and pill.
   ------------------------------------------------------------------------- */
.cp-v2 .card,
.cp-v2 .cp-rev-card,
.cp-v2 .about-hero-media,
.cp-v2 .about-split-media img,
.cp-v2 .coa-card,
.cp-v2 .cat,
.cp-v2 .faq,
.cp-v2 .cp-fbt-card{
  border-radius:var(--cp-r-panel);
}

.cp-v2 input[type=text],
.cp-v2 input[type=email],
.cp-v2 input[type=search],
.cp-v2 input[type=tel],
.cp-v2 input[type=number],
.cp-v2 select,
.cp-v2 textarea{
  border-radius:var(--cp-r-input);
}

/* Small controls that already read as pills keep doing so. */
.cp-v2 .cp-size,
.cp-v2 .chip,
.cp-v2 .cp-rev-pill,
.cp-v2 .cp-bulk-tier{
  border-radius:var(--cp-r-pill);
}

/* -------------------------------------------------------------------------
   3. CARD ELEVATION
   The product card is the unit that repeats most, so it sets the tone.
   ------------------------------------------------------------------------- */
.cp-v2 .card{
  box-shadow:var(--cp-lift-1);
  transition:transform .18s var(--cp-ease), box-shadow .18s var(--cp-ease), border-color .18s var(--cp-ease);
}
.cp-v2 .card:hover{
  transform:translateY(-3px);
  box-shadow:var(--cp-lift-3);
}

/* The certificate chip is the one control sitting on photography, so it needs
   more separation from what is behind it than a chip on a flat panel would. */
.cp-v2 .cp-coa-chip{
  box-shadow:0 2px 6px rgba(12,109,137,.16), 0 10px 24px -8px rgba(12,109,137,.34);
}
.cp-v2 .cp-coa-chip:hover,
.cp-v2 .cp-coa-chip:focus-visible{
  box-shadow:0 4px 10px rgba(12,109,137,.20), 0 16px 34px -10px rgba(12,109,137,.44);
  transform:translateY(-1px);
}
.cp-v2 .cp-coa-chip:active{transform:translateY(0) scale(.97)}

/* -------------------------------------------------------------------------
   4. REDUCED MOTION
   Every transform above collapses. Elevation is kept, because a shadow is not
   motion and still communicates hierarchy.
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .cp-v2 .btn,
  .cp-v2 .card,
  .cp-v2 .cp-coa-chip,
  .cp-v2 .cp-card-add,
  .cp-v2 .single_add_to_cart_button,
  .cp-v2 .wp-block-button__link{
    transition:none;
  }
  .cp-v2 .btn:hover,
  .cp-v2 .card:hover,
  .cp-v2 .cp-coa-chip:hover,
  .cp-v2 .cp-card-add:hover,
  .cp-v2 .single_add_to_cart_button:hover,
  .cp-v2 .wp-block-button__link:hover{
    transform:none;
  }
}

/* The previous About design's stylesheet lived here and has been removed.
   It styled sections that page no longer has (ab2-lab, ab2-coa, ab2-lookup,
   the old flow and the index table), but it also styled .ab2-flow, a class
   the current page reuses, and a leftover background:var(--paper) plus a
   border-left were bleeding through onto the new operations band: pale strip,
   white text on it, unreadable. Superseded rules that share a class name with
   live markup are not harmless, so they are gone rather than left to rot.
   The one rule still in use from that block is kept below. */
.cp-v2 .ab2-eyebrow{
  display:block;font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--signal-deep);margin-bottom:14px}


/* -------------------------------------------------------------------------
   PDP TRUST STRIP v2 + ACCEPTED-CARD MARKS
   The strip's four facts each get their own softly-tinted icon chip, so the
   block reads at a glance instead of as one teal mass. Tints are functional
   (verified / documents / delivery / security), muted to sit beside the teal
   accent without competing with the Add-to-cart button.
   Shape note: chips use the input tier (8px); the card micro-marks use 5px,
   half the input tier, documented here as the rule for elements < 24px tall.
   ------------------------------------------------------------------------- */
.cp-v2 .pdp-trust2{
  grid-template-columns:1fr 1fr;gap:14px 16px;padding:16px;
  background:var(--white);border:1px solid var(--line);border-radius:var(--cp-r-panel)}
.cp-v2 .pdp-trust2 li{
  align-items:flex-start;gap:11px;font-family:Inter,sans-serif;
  text-transform:none;letter-spacing:0;line-height:1.3;color:var(--ink)}
.cp-v2 .pdp-trust2 .cp-tico{
  width:38px;height:38px;border-radius:var(--cp-r-input);flex:none;
  display:flex;align-items:center;justify-content:center}
.cp-v2 .pdp-trust2 .cp-tico svg{width:19px;height:19px;color:currentColor}
.cp-v2 .cp-tico-green{background:#E7F4EC;color:#1B8451}
.cp-v2 .cp-tico-blue{background:#E9F1FB;color:#2460C8}
.cp-v2 .cp-tico-amber{background:#FAF1E0;color:#A85E0A}
.cp-v2 .cp-tico-violet{background:#EFEDFA;color:#6350BE}
.cp-v2 .cp-ttxt{display:flex;flex-direction:column;gap:3px;min-width:0}
.cp-v2 .cp-ttxt b{font-weight:600;font-size:13px;color:var(--ink)}
.cp-v2 .cp-ttxt small{font-size:12px;color:var(--muted)}
@media(max-width:560px){
  .cp-v2 .pdp-trust2{gap:12px;padding:13px}
  .cp-v2 .pdp-trust2 .cp-tico{width:34px;height:34px}
}

/* Accepted-card marks: Mastercard is geometry (SVG); Visa and Amex are
   typographic chips - crisper at 21px than any hand-traced wordmark. */
.cp-v2 .cp-paymarks{display:inline-flex;gap:5px;align-items:center}
.cp-v2 .cp-paymark{
  display:inline-flex;align-items:center;justify-content:center;
  height:21px;min-width:33px;padding:0 5px;border-radius:5px;
  background:var(--white);border:1px solid var(--line-strong);
  font:800 9px/1 Inter,sans-serif}
.cp-v2 .cp-paymark-visa{color:#1434CB;font-style:italic;letter-spacing:.02em}
.cp-v2 .cp-paymark-mc svg{width:23px;height:15px;display:block}
.cp-v2 .cp-paymark-amex{
  background:#2E77BC;border-color:#2E77BC;color:#fff;letter-spacing:.06em}

/* Drawer: reassurance directly under the Checkout button. */
.cp-v2 .cp-payrow{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin-top:10px;font-size:11.5px;color:var(--muted)}
.cp-v2 .cp-payrow svg{width:13px;height:13px;flex:none;color:var(--signal-deep)}

/* -------------------------------------------------------------------------
   BUNDLE AND SAVE  +  CERTIFICATE CARD

   Shape-system note: the rule at the top of this file puts interactive
   controls on the pill tier, which is right for chips and buttons. A bundle
   row is 60px tall and carries photography, a price and a badge - it is a
   card that happens to be selectable, so it takes the PANEL tier instead.
   Same reasoning for the certificate card. Small parts inside them (the
   photo, the percent pill) stay on the input tier.

   Colour note: the complaint was that everything reads as one teal. The
   savings green here is the same green already used by the verified tile in
   the trust strip, so the page gains variety from a functional palette
   rather than from decoration.
   ------------------------------------------------------------------------- */
.cp-v2 .cp-bundle{
  background:var(--white);border:1px solid var(--line);
  border-radius:var(--cp-r-panel);overflow:hidden}
.cp-v2 .cp-bundle-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 14px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(22,184,166,.06),rgba(22,184,166,.02))}
.cp-v2 .cp-bundle-title{
  font-family:var(--display);font-weight:600;font-size:14.5px;color:var(--teal)}
.cp-v2 .cp-bundle-note{
  display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--muted)}
.cp-v2 .cp-bundle-note svg{flex:none;color:#1B8451}

/* Rows. Override the 3-up grid and the <=560px flex reflow from main.css. */
.cp-v2 .cp-bundle-tiers{
  display:grid;grid-template-columns:1fr;gap:8px;padding:10px}
.cp-v2 .cp-bundle-tier{
  display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;
  gap:12px;width:100%;padding:10px 12px;text-align:left;
  background:var(--white);border:1.5px solid var(--line-strong);
  border-radius:var(--cp-r-panel);cursor:pointer;
  transition:border-color .15s var(--cp-ease), box-shadow .15s var(--cp-ease),
             background-color .15s var(--cp-ease), transform .15s var(--cp-ease)}
.cp-v2 .cp-bundle-tier:hover{
  border-color:var(--signal);box-shadow:var(--cp-lift-1)}
.cp-v2 .cp-bundle-tier:active{transform:scale(.995)}
.cp-v2 .cp-bundle-tier:focus-visible{
  outline:2px solid var(--signal);outline-offset:2px}
.cp-v2 .cp-bundle-tier[aria-pressed="true"]{
  border-color:var(--teal);background:rgba(11,59,69,.035);box-shadow:var(--cp-lift-1)}

/* The vial stack: one photo per vial, capped at three, overlapped so three
   still fit the row without shrinking the photo to a dot. */
.cp-v2 .cp-bundle-vials{display:flex;align-items:center;flex:none}
.cp-v2 .cp-bundle-vial{
  width:34px;height:34px;object-fit:contain;flex:none;
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--cp-r-input);padding:2px}
.cp-v2 .cp-bundle-vial + .cp-bundle-vial{margin-left:-11px}
.cp-v2 .cp-bundle-vial:nth-child(2){z-index:1}
.cp-v2 .cp-bundle-vial:nth-child(3){z-index:2}
.cp-v2 .cp-bundle-vial-ph{
  display:flex;align-items:center;justify-content:center}
.cp-v2 .cp-bundle-vial-ph svg{width:20px;height:26px}

.cp-v2 .cp-bundle-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.cp-v2 .cp-bundle-qty{
  font-family:var(--display);font-weight:600;font-size:14px;color:var(--ink)}
.cp-v2 .cp-bundle-price{font-size:12px;color:var(--muted)}
.cp-v2 .cp-bundle-price .cp-bulk-amt{font-weight:600;color:var(--ink)}

.cp-v2 .cp-bundle-right{
  display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:none}
.cp-v2 .cp-bundle-off{
  background:#E7F4EC;color:#1B8451;font-weight:700;font-size:11px;
  letter-spacing:.01em;padding:4px 8px;border-radius:var(--cp-r-input);white-space:nowrap}
.cp-v2 .cp-bundle-badge{
  background:var(--teal);color:#fff;font-family:var(--mono);font-size:8.5px;
  letter-spacing:.06em;text-transform:uppercase;padding:3px 6px;
  border-radius:4px;white-space:nowrap}

/* Radio. main.css absolutely positions this one; here it is a row cell. */
.cp-v2 .cp-bundle-check{
  position:static;width:18px;height:18px;flex:none;
  border:1.5px solid var(--line-strong);border-radius:50%;
  transition:border-color .15s var(--cp-ease), background-color .15s var(--cp-ease)}
.cp-v2 .cp-bundle-tier[aria-pressed="true"] .cp-bundle-check{
  border-color:var(--teal);background:var(--teal);position:relative}

@media(max-width:560px){
  .cp-v2 .cp-bundle-tier{gap:10px;padding:9px 10px}
  .cp-v2 .cp-bundle-vial{width:30px;height:30px}
  .cp-v2 .cp-bundle-vial + .cp-bundle-vial{margin-left:-10px}
  .cp-v2 .cp-bundle-qty{font-size:13.5px}
  .cp-v2 .cp-bundle-badge{display:none}
}

/* ---- Certificate card ---------------------------------------------------
   Replaces the flat full-width teal button. The document is the strongest
   trust asset this page owns, so it is shown rather than described. */
.cp-v2 .pdp-coa-doc{
  display:grid;grid-template-columns:auto 1fr;align-items:center;gap:13px;
  width:100%;margin:12px 0 18px;padding:11px;text-align:left;
  background:var(--white);border:1px solid var(--line-strong);
  border-radius:var(--cp-r-panel);cursor:pointer;
  box-shadow:var(--cp-lift-1);
  transition:border-color .18s var(--cp-ease), box-shadow .18s var(--cp-ease),
             transform .18s var(--cp-ease)}
.cp-v2 .pdp-coa-doc:hover,
.cp-v2 .pdp-coa-doc:focus-visible{
  border-color:var(--signal);box-shadow:var(--cp-lift-2);transform:translateY(-2px);
  background:var(--white)}
.cp-v2 .pdp-coa-doc:active{transform:translateY(0) scale(.995)}
.cp-v2 .pdp-coa-doc:focus-visible{outline:2px solid var(--signal);outline-offset:2px}

.cp-v2 .cp-coa-doc-thumb{
  position:relative;width:62px;height:76px;flex:none;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--cp-r-input)}
.cp-v2 .cp-coa-doc-thumb img{
  width:100%;height:100%;object-fit:cover;object-position:top center}
.cp-v2 .cp-coa-doc-thumb > svg{width:26px;height:26px;color:var(--muted)}
/* Magnifier badge: says it opens larger without spending a word of copy. */
.cp-v2 .cp-coa-doc-zoom{
  position:absolute;right:4px;bottom:4px;width:20px;height:20px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(28,35,38,.78);border-radius:50%}
.cp-v2 .cp-coa-doc-zoom svg{width:12px;height:12px;color:#fff}

.cp-v2 .cp-coa-doc-body{display:flex;flex-direction:column;gap:4px;min-width:0}
.cp-v2 .cp-coa-doc-top{display:flex;align-items:center;gap:6px}
.cp-v2 .cp-coa-doc-tick{width:14px;height:14px;flex:none;color:#1B8451}
.cp-v2 .cp-coa-doc-title{
  font-family:var(--display);font-weight:600;font-size:14px;color:var(--ink)}
.cp-v2 .cp-coa-doc-covers{
  font-size:12px;color:var(--muted);line-height:1.35}
.cp-v2 .cp-coa-doc-facts{
  display:flex;flex-wrap:wrap;gap:5px;margin-top:1px}
.cp-v2 .cp-coa-doc-facts[hidden]{display:none}
.cp-v2 .cp-coa-doc-fact{
  font-size:10px;letter-spacing:.03em;color:var(--muted);
  background:var(--paper);border:1px solid var(--line);
  border-radius:4px;padding:2px 6px}
.cp-v2 .cp-coa-doc-fact b{color:var(--ink);font-weight:600}
.cp-v2 .cp-coa-doc-cta{
  display:inline-flex;align-items:center;gap:4px;margin-top:3px;
  font-family:var(--display);font-weight:600;font-size:12.5px;color:var(--signal-deep)}
.cp-v2 .cp-coa-doc-cta svg{width:12px;height:12px;transition:transform .18s var(--cp-ease)}
.cp-v2 .pdp-coa-doc:hover .cp-coa-doc-cta svg{transform:translateX(2px)}

@media(prefers-reduced-motion:reduce){
  .cp-v2 .pdp-coa-doc,
  .cp-v2 .cp-bundle-tier,
  .cp-v2 .cp-coa-doc-cta svg{transition:none}
  .cp-v2 .pdp-coa-doc:hover{transform:none}
}

@media(max-width:560px){
  .cp-v2 .pdp-coa-doc{gap:11px;padding:10px}
  .cp-v2 .cp-coa-doc-thumb{width:54px;height:66px}
}

/* -------------------------------------------------------------------------
   REFINEMENT PASS
   1. the selection tick jumping off centre
   2. tightening the header block above the buy box
   3. depth: the page was flat as well as monochrome
   ------------------------------------------------------------------------- */

/* ---- 1. The tick must not move -----------------------------------------
   main.css lays this radio out absolutely (top:11px;right:11px) because in
   the live 3-up grid it sits in the tile corner. Here it is a row cell, so
   it was set to position:static - but the selected state then switched it to
   position:relative, which turns those same two offsets into a live nudge:
   11px down and 11px left, exactly the jump that was visible. It now stays
   relative in BOTH states, with the inherited offsets neutralised, so the
   tick lands dead centre of the circle it replaces. */
.cp-v2 .cp-bundle-check{
  position:relative;
  top:auto;right:auto;bottom:auto;left:auto}
.cp-v2 .cp-bundle-tier[aria-pressed="true"] .cp-bundle-check{
  border-color:var(--teal);background:var(--teal)}

/* ---- 2. Header block: less air, more hierarchy --------------------------
   The eyebrow, title, rating, spec line, price and size row were each
   carrying their own generous margins, so the buy box started ~277px down.
   Rather than only removing space, the price takes some of it back: it is
   the fact the eye should land on after the title. */
.cp-v2 .pdp-cat{padding-top:0}
.cp-v2 .pdp-title{
  margin-top:2px;margin-bottom:6px;letter-spacing:-.025em}
.cp-v2 .cp-rev-pdp-sum{margin-top:6px}
.cp-v2 .pdp-spec-inline{padding-top:6px;margin-bottom:10px}
.cp-v2 .pdp-price{margin-top:0;margin-bottom:10px}
.cp-v2 .pdp-price,
.cp-v2 .pdp-price .price,
.cp-v2 .pdp-price .amount{
  font-size:29px;font-weight:700;letter-spacing:-.022em;color:var(--teal)}
.cp-v2 .pdp-price del,
.cp-v2 .pdp-price del .amount{
  font-size:17px;font-weight:500;color:var(--muted)}
.cp-v2 .variations{margin-bottom:10px}
.cp-v2 .cp-vpills{margin-top:2px;margin-bottom:2px}

/* ---- 3. Depth ----------------------------------------------------------
   Everything sat on the same plane, which is half of why the page read as
   flat and "one colour". These are the same tinted-elevation tokens used
   everywhere else in this file - depth, not glow. */

/* The product shot is the largest object on the page and had no elevation
   at all. Lifting it off the paper does more than any colour change. */
.cp-v2 .pdp-stage{
  border-radius:var(--cp-r-panel);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65), var(--cp-lift-2)}

/* Primary CTA: a deep gradient that bottoms out near-black teal. This is the
   darkest element on the page by design - it should be unmistakably the
   thing to press. White on #0A5064 is ~8.9:1, well past AA. */
.cp-v2 .pdp form.cart .single_add_to_cart_button,
.cp-v2 .pdp .single_add_to_cart_button{
  background:linear-gradient(180deg,#0E7C9B 0%,#0A5064 100%);
  border:none;color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), var(--cp-lift-2)}
.cp-v2 .pdp form.cart .single_add_to_cart_button:hover,
.cp-v2 .pdp .single_add_to_cart_button:hover,
.cp-v2 .pdp form.cart .single_add_to_cart_button:focus-visible{
  background:linear-gradient(180deg,#1290B2 0%,#0C6076 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2), var(--cp-lift-3)}

/* Selected bundle row: a drawn ring rather than a wash, so the choice reads
   at a glance from across the block. */
.cp-v2 .cp-bundle-tier[aria-pressed="true"]{
  border-color:var(--teal);
  background:linear-gradient(180deg,rgba(12,109,137,.07) 0%,rgba(12,109,137,.02) 100%);
  box-shadow:inset 0 0 0 1px var(--teal), var(--cp-lift-1)}

/* Best value: the one badge on the page, so it gets the deep treatment. */
.cp-v2 .cp-bundle-badge{
  background:linear-gradient(180deg,#12414C 0%,#0A2A32 100%);
  box-shadow:0 1px 2px rgba(10,42,50,.35)}

/* The certificate card catches a little more light along its top edge. */
.cp-v2 .pdp-coa-doc{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), var(--cp-lift-1)}
.cp-v2 .pdp-coa-doc:hover,
.cp-v2 .pdp-coa-doc:focus-visible{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), var(--cp-lift-2)}

/* The assurance strip sits between two elevated objects, so it stays flat on
   purpose - it is context, not a control. A hairline keeps it grouped. */
.cp-v2 .pdp-trust2{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}

@media (prefers-reduced-motion: reduce){
  .cp-v2 .pdp form.cart .single_add_to_cart_button,
  .cp-v2 .pdp .single_add_to_cart_button{transition:none}
}

@media(max-width:760px){
  .cp-v2 .pdp-price,
  .cp-v2 .pdp-price .price,
  .cp-v2 .pdp-price .amount{font-size:25px}
  .cp-v2 .pdp-stage{box-shadow:var(--cp-lift-1)}
}

/* Accessibility fix: the savings pill is TEXT on the mint chip, and the first
   green (#1B8451) measured 4.15:1 against it - under the 4.5 AA floor for
   normal-size text. #17784A measures 4.85:1 and is visually the same green.
   The icon greens keep the lighter value: as non-text they only owe 3:1. */
.cp-v2 .cp-bundle-off{color:#17784A}
.cp-v2 .cp-coa-doc-tick,
.cp-v2 .cp-bundle-note svg{color:#17784A}

/* The assurance strip is the last big gap in the column; the buy box and its
   assurances are one thought and do not need 30px between them. */
.cp-v2 .pdp-trust2{margin-top:0}
.cp-v2 .pdp-cart{margin-bottom:8px}

/* -------------------------------------------------------------------------
   HEADER: TWO COLUMNS, END TO END
   Identity on the left (category, name), verification on the right (rating,
   MS-confirmed). Four stacked rows become two, which is worth about 45px of
   column before the buy box starts.

   Done with grid placement on the existing children rather than a wrapper,
   so the markup, the rating link and the per-size spec swap all stay as they
   are. Column 1 is minmax(0,1fr) for the same reason .pdp-grid>* carries
   min-width:0 - a long product name must wrap, not force the column wide.
   ------------------------------------------------------------------------- */
@media(min-width:761px){
  .cp-v2 .pdp-info{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    column-gap:20px;
    align-content:start}
  /* Everything that is not part of the header keeps the full width. */
  .cp-v2 .pdp-info > *{grid-column:1 / -1}
  .cp-v2 .pdp-cat{
    grid-column:1;grid-row:1;align-self:center;padding-top:0}
  .cp-v2 .pdp-title{
    grid-column:1;grid-row:2;align-self:center;margin-top:0;margin-bottom:0}
  .cp-v2 .cp-rev-pdp-sum{
    grid-column:2;grid-row:1;justify-self:end;align-self:center;margin-top:0}
  .cp-v2 .pdp-spec-inline{
    grid-column:2;grid-row:2;justify-self:end;align-self:center;
    justify-content:flex-end;padding-top:0;margin-bottom:0;text-align:right}
  /* The header rows now set their own height, so the price carries the gap. */
  .cp-v2 .pdp-price{margin-top:14px}
}

/* -------------------------------------------------------------------------
   MOBILE: THE PRICE TRAVELS WITH THE BUTTON
   On a phone the ladder sits between the headline price and Add to cart, so
   they are never on screen together. WooCommerce already renders the price
   for the chosen size inside the form, immediately above the button - it is
   just hidden (main.css:402) because the headline price says the same thing.
   On mobile it is revealed instead of inventing a second number: Woo keeps it
   correct on every size change, so it cannot drift from what the cart charges.
   The headline price stays where it is for scanning; the two are a full
   ladder apart and never share a viewport.
   ------------------------------------------------------------------------- */
@media(max-width:760px){
  .cp-v2 .pdp-info{display:block}
  .cp-v2 .single_variation .woocommerce-variation-price{
    display:block;margin:0 0 10px}
  .cp-v2 .pdp .single_variation .woocommerce-variation-price .price,
  .cp-v2 .single_variation .woocommerce-variation-price .price{
    display:block;font-size:23px;font-weight:700;
    letter-spacing:-.02em;color:var(--teal);line-height:1.15}
  .cp-v2 .single_variation .woocommerce-variation-price del,
  .cp-v2 .single_variation .woocommerce-variation-price del .amount{
    font-size:15px;font-weight:500;color:var(--muted)}
}

/* -------------------------------------------------------------------------
   LOWER PRODUCT PAGE: batch panel, specification, compound facts, records

   The specification used to be a hairline table of eight rows, which is the
   laziest way to present a spec sheet and read as filler next to the buy box.
   It is now a two-tone definition list where the value carries the weight,
   fronted by a panel that leads with the one number a researcher is looking
   for. Same tinted-elevation and panel-radius system as the rest of v2.
   ------------------------------------------------------------------------- */

/* ---- Batch panel -------------------------------------------------------- */
.cp-v2 .cp-batch{
  margin:52px 0 0;padding:20px;
  background:var(--white);border:1px solid var(--line);
  border-radius:var(--cp-r-panel);box-shadow:var(--cp-lift-1)}
.cp-v2 .cp-batch-head{display:flex;align-items:flex-start;gap:11px;margin:0 0 18px}
.cp-v2 .cp-batch-tick{
  width:30px;height:30px;flex:none;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#E7F4EC;color:#17784A}
.cp-v2 .cp-batch-tick svg{width:16px;height:16px}
.cp-v2 .cp-batch-headtext{display:flex;flex-direction:column;gap:3px;min-width:0}
.cp-v2 .cp-batch-headtext b{
  font-family:var(--display);font-weight:600;font-size:16px;color:var(--ink)}
.cp-v2 .cp-batch-headtext small{
  font-size:12.5px;color:var(--muted);line-height:1.5;max-width:70ch}

/* Flex, not a 3-column grid. The grid assumed all three children were
   present; on a size with no recorded purity the figure is hidden, the button
   fell into the 1fr column and stretched the whole width of the panel - which
   is exactly the over-long button that was reported. Flex sizes each child to
   its content and pushes the button to the end regardless of how many of them
   are on show. */
.cp-v2 .cp-batch-facts{
  display:flex;flex-wrap:wrap;align-items:center;gap:22px}
.cp-v2 .cp-batch-fig{
  display:flex;flex-direction:column;gap:2px;padding:14px 20px;flex:none;
  background:linear-gradient(180deg,rgba(23,120,74,.09),rgba(23,120,74,.03));
  border:1px solid rgba(23,120,74,.20);border-radius:var(--cp-r-input)}
.cp-v2 .cp-batch-fig[hidden]{display:none}
.cp-v2 .cp-batch-fignum{
  display:flex;align-items:baseline;gap:1px;
  font-family:var(--display);color:#14663F;letter-spacing:-.03em;line-height:1}
.cp-v2 .cp-batch-fignum b{font-weight:700;font-size:34px}
.cp-v2 .cp-batch-fignum i{font-style:normal;font-weight:600;font-size:17px}
.cp-v2 .cp-batch-figlab{
  font-size:11px;letter-spacing:.03em;color:#17784A;font-weight:600}

.cp-v2 .cp-batch-dl{margin:0;min-width:220px;flex:1 1 220px}

/* The certificate itself: cropped to its head, which is where the lab mark
   and the compound sit, so it is recognisable at this size. */
.cp-v2 .cp-batch-doc{
  width:104px;height:132px;flex:none;overflow:hidden;display:block;
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--cp-r-input);box-shadow:var(--cp-lift-1)}
.cp-v2 .cp-batch-doc img{
  width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.cp-v2 .cp-batch-row{
  display:grid;grid-template-columns:118px minmax(0,1fr);gap:12px;
  padding:7px 0;border-bottom:1px solid var(--line)}
.cp-v2 .cp-batch-row:last-child{border-bottom:0}
.cp-v2 .cp-batch-row[hidden]{display:none}
.cp-v2 .cp-batch-row dt{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted);margin:0}
.cp-v2 .cp-batch-row dd{margin:0;font-size:13.5px;color:var(--ink);word-break:break-word}
.cp-v2 .cp-batch-open{
  flex:none;white-space:nowrap;align-self:center;margin-left:auto;
  width:auto;min-width:0}
.cp-v2 .cp-batch-open svg{width:13px;height:13px;margin-left:2px}

@media(max-width:860px){
  .cp-v2 .cp-batch-facts{gap:16px}
  .cp-v2 .cp-batch-doc{width:84px;height:106px}
  .cp-v2 .cp-batch-open{margin-left:0;width:100%;justify-content:center}
}

/* ---- Specification ------------------------------------------------------ */
.cp-v2 .cp-detail-label{
  display:block;margin-bottom:14px;color:var(--signal-deep);
  font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.cp-v2 .cp-spec{margin:0}
.cp-v2 .cp-spec-row{
  display:grid;grid-template-columns:132px minmax(0,1fr);gap:14px;
  padding:11px 12px;border-radius:var(--cp-r-input);align-items:baseline}
/* Zebra instead of a rule under every row: the eye tracks the pair, and eight
   hairlines in a column this narrow was most of what made it read as filler. */
.cp-v2 .cp-spec-row:nth-child(odd){background:var(--paper)}
.cp-v2 .cp-spec-row dt{
  margin:0;font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted)}
.cp-v2 .cp-spec-row dd{margin:0;font-size:14px;color:var(--ink);line-height:1.45}
.cp-v2 .cp-spec-row dd b{font-weight:600}
.cp-v2 .cp-spec-fallback{color:var(--muted)}
.cp-v2 .cp-spec-fallback[hidden],.cp-v2 [data-spec-purity][hidden],
.cp-v2 [data-spec-batch][hidden]{display:none}

/* ---- Compound facts ----------------------------------------------------- */
.cp-v2 .cp-compound{margin-top:26px}
.cp-v2 .cp-compound-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0}
.cp-v2 .cp-compound-grid > div{
  padding:11px 13px;background:var(--white);
  border:1px solid var(--line);border-radius:var(--cp-r-input)}
.cp-v2 .cp-compound-grid dt{
  margin:0 0 3px;font-family:var(--mono);font-size:10px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted)}
.cp-v2 .cp-compound-grid dd{
  margin:0;font-size:14px;font-weight:600;color:var(--ink);word-break:break-word}
.cp-v2 .cp-compound-src{
  display:inline-flex;align-items:center;gap:5px;margin-top:11px;
  font-size:12px;color:var(--signal-deep);font-weight:600}
.cp-v2 .cp-compound-src svg{width:12px;height:12px}
@media(max-width:520px){
  .cp-v2 .cp-compound-grid{grid-template-columns:1fr}
}

/* ---- Description -------------------------------------------------------- */
.cp-v2 .pdp-desc{font-size:15px;line-height:1.75;color:var(--ink);max-width:68ch}
.cp-v2 .pdp-desc p{margin-bottom:14px}
.cp-v2 .pdp-desc p:first-of-type{
  font-size:16.5px;line-height:1.65;color:var(--teal);font-weight:500}
.cp-v2 .pdp-desc p:last-child{margin-bottom:0}

/* ---- Every size on record ----------------------------------------------- */
.cp-v2 .cp-records{margin-top:48px;padding-top:36px;border-top:1px solid var(--line)}
.cp-v2 .cp-records-head{margin-bottom:20px}
.cp-v2 .cp-records-head h2{
  font-family:var(--display);font-weight:600;font-size:22px;
  letter-spacing:-.02em;color:var(--teal);margin:0 0 6px}
.cp-v2 .cp-records-head p{
  margin:0;font-size:13.5px;color:var(--muted);max-width:64ch;line-height:1.55}
.cp-v2 .cp-records-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:12px}
.cp-v2 .cp-rec{
  display:flex;flex-direction:column;gap:7px;padding:15px;text-align:left;
  background:var(--white);border:1px solid var(--line-strong);
  border-radius:var(--cp-r-panel);cursor:pointer;box-shadow:var(--cp-lift-1);
  transition:border-color .18s var(--cp-ease), box-shadow .18s var(--cp-ease),
             transform .18s var(--cp-ease)}
.cp-v2 .cp-rec:hover,.cp-v2 .cp-rec:focus-visible{
  border-color:var(--signal);box-shadow:var(--cp-lift-2);transform:translateY(-2px)}
.cp-v2 .cp-rec:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.cp-v2 .cp-rec:active{transform:translateY(0) scale(.995)}
.cp-v2 .cp-rec-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.cp-v2 .cp-rec-size{
  font-family:var(--display);font-weight:600;font-size:15px;color:var(--ink)}
.cp-v2 .cp-rec-pur{font-size:12px;color:#17784A;font-weight:600;white-space:nowrap}
.cp-v2 .cp-rec-pur b{font-size:15px;font-weight:700}
.cp-v2 .cp-rec-lot{font-size:10.5px;letter-spacing:.04em;color:var(--muted)}
.cp-v2 .cp-rec-cov{font-size:12.5px;color:var(--muted);line-height:1.4}
.cp-v2 .cp-rec-cta{
  display:inline-flex;align-items:center;gap:4px;margin-top:2px;
  font-family:var(--display);font-weight:600;font-size:12.5px;color:var(--signal-deep)}
.cp-v2 .cp-rec-cta svg{width:12px;height:12px;transition:transform .18s var(--cp-ease)}
.cp-v2 .cp-rec:hover .cp-rec-cta svg{transform:translateX(2px)}

@media (prefers-reduced-motion: reduce){
  .cp-v2 .cp-rec,.cp-v2 .cp-rec-cta svg{transition:none}
  .cp-v2 .cp-rec:hover{transform:none}
}

/* Labelled vs measured content, and where the certificate came from. Both are
   quoted from the document, so both disappear when it does not state them. */
.cp-v2 .cp-batch-pair{
  display:flex;align-items:center;gap:10px;flex:none;padding:12px 16px;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--cp-r-input)}
.cp-v2 .cp-batch-pair[hidden]{display:none}
.cp-v2 .cp-batch-pairitem{display:flex;flex-direction:column;gap:1px}
.cp-v2 .cp-batch-pairitem b{
  font-family:var(--display);font-weight:700;font-size:15px;color:var(--ink);white-space:nowrap}
.cp-v2 .cp-batch-pairitem small{
  font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.cp-v2 .cp-batch-pairarrow{color:var(--muted);font-size:13px}
.cp-v2 .cp-batch-prov{
  display:flex;flex-wrap:wrap;gap:6px 14px;margin:16px 0 0;padding-top:14px;
  border-top:1px solid var(--line);font-size:11px;color:var(--muted);letter-spacing:.02em}
.cp-v2 .cp-batch-prov[hidden],.cp-v2 .cp-batch-prov span[hidden]{display:none}
.cp-v2 .cp-batch-prov span:first-child{color:var(--ink);font-weight:600}

/* -------------------------------------------------------------------------
   SPECIFICATION, GROUPED
   Was eight equally-weighted rows with a hairline under each - the laziest
   spec-sheet layout, and it gave a figure measured for this batch the same
   emphasis as a sentence identical on all eighteen products. Three groups
   now, one rule per GROUP rather than per row, so the section can be scanned
   instead of read.
   ------------------------------------------------------------------------- */
.cp-v2 .pdp-detail{
  display:block;margin-top:44px;padding-top:36px;border-top:1px solid var(--line)}
.cp-v2 .pdp-lead{
  font-family:var(--display);font-weight:500;
  font-size:clamp(17px,2vw,21px);line-height:1.5;letter-spacing:-.012em;
  color:var(--teal);max-width:62ch;margin:0 0 30px}

.cp-v2 .cp-specgrid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.cp-v2 .cp-specgroup{
  padding:16px 18px;background:var(--white);
  border:1px solid var(--line);border-radius:var(--cp-r-panel)}
.cp-v2 .cp-specgroup-h{
  margin:0 0 12px;padding-bottom:10px;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--signal-deep);font-weight:500}
.cp-v2 .cp-specgroup dl{margin:0}
.cp-v2 .cp-specrow{display:flex;flex-direction:column;gap:2px;padding:7px 0}
.cp-v2 .cp-specrow + .cp-specrow{border-top:1px dashed var(--line)}
.cp-v2 .cp-specrow dt{
  margin:0;font-family:var(--mono);font-size:10px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted)}
.cp-v2 .cp-specrow dd{
  margin:0;font-size:14px;line-height:1.45;color:var(--ink)}
.cp-v2 .cp-specrow dd b{font-weight:600}
.cp-v2 .cp-specrow .cp-spec-fallback{color:var(--muted);font-size:13px}

.cp-v2 .pdp-detail .cp-compound-src{margin-top:16px}
.cp-v2 .pdp-detail .pdp-desc{margin-top:26px;max-width:66ch}

@media(max-width:900px){
  .cp-v2 .cp-specgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
  .cp-v2 .cp-specgrid{grid-template-columns:1fr;gap:10px}
  .cp-v2 .cp-specgroup{padding:14px 15px}
}

/* -------------------------------------------------------------------------
   TECHNICAL SPECIFICATION - the section, not just the list

   The previous pass fixed the ORDER but left the section with no presence: a
   10px mono word, then three white boxes on a white page. Three changes give
   it character without decoration.

   1. It sits on its own tinted ground with the cards in white on top, so the
      block reads as a place you have arrived at rather than more page.
   2. Each group carries an icon in a tinted chip, from the same functional
      palette as the assurance tiles (green verified, blue material, amber
      handling). Three identical white boxes is what made it feel flat.
   3. The compound line gets a card of its own with a real question as its
      heading, so the one genuinely product-specific sentence on the page
      stops looking like a stray caption.
   ------------------------------------------------------------------------- */
.cp-v2 .cp-tech{
  margin:48px 0 0;padding:34px 30px;border-top:0;
  background:linear-gradient(180deg,var(--paper),rgba(245,247,247,.45));
  border:1px solid var(--line);border-radius:var(--cp-r-panel)}

.cp-v2 .cp-tech-head{margin:0 0 22px}
.cp-v2 .cp-tech-head h2{
  margin:0 0 5px;font-family:var(--display);font-weight:600;
  font-size:clamp(21px,2.4vw,26px);letter-spacing:-.022em;color:var(--teal)}
.cp-v2 .cp-tech-head p{
  margin:0;font-size:13.5px;color:var(--muted);max-width:60ch}

/* ---- What is X? --------------------------------------------------------- */
.cp-v2 .cp-whatis{
  margin:0 0 16px;padding:22px 24px;background:var(--white);
  border:1px solid var(--line);border-radius:var(--cp-r-panel);
  box-shadow:var(--cp-lift-1);
  border-left:3px solid var(--signal)}
.cp-v2 .cp-whatis h3{
  margin:0 0 10px;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--signal-deep);font-weight:500}
.cp-v2 .cp-whatis .pdp-lead{
  margin:0;font-family:var(--display);font-weight:500;
  font-size:clamp(16.5px,1.9vw,20px);line-height:1.5;letter-spacing:-.012em;
  color:var(--teal);max-width:64ch}
.cp-v2 .cp-whatis p + p{
  margin:12px 0 0;font-family:var(--body);font-weight:400;font-size:14.5px;
  line-height:1.7;color:var(--ink);letter-spacing:0;max-width:66ch}

/* ---- The three groups --------------------------------------------------- */
.cp-v2 .cp-tech .cp-specgrid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.cp-v2 .cp-tech .cp-specgroup{
  padding:18px 20px;background:var(--white);
  border:1px solid var(--line);border-radius:var(--cp-r-panel);
  box-shadow:var(--cp-lift-1);
  transition:box-shadow .18s var(--cp-ease), transform .18s var(--cp-ease)}
.cp-v2 .cp-tech .cp-specgroup:hover{
  box-shadow:var(--cp-lift-2);transform:translateY(-2px)}

.cp-v2 .cp-specgroup-h{
  display:flex;align-items:center;gap:9px;
  margin:0 0 14px;padding-bottom:13px;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;font-weight:500;color:var(--ink)}
.cp-v2 .cp-specgroup-ico{
  width:30px;height:30px;flex:none;border-radius:var(--cp-r-input);
  display:flex;align-items:center;justify-content:center}
.cp-v2 .cp-specgroup-ico svg{width:16px;height:16px}
.cp-v2 .cp-specgroup-blue  .cp-specgroup-ico{background:#E9F1FB;color:#2460C8}
.cp-v2 .cp-specgroup-green .cp-specgroup-ico{background:#E7F4EC;color:#17784A}
.cp-v2 .cp-specgroup-amber .cp-specgroup-ico{background:#FAF1E0;color:#A85E0A}

.cp-v2 .cp-tech .cp-specrow{display:flex;flex-direction:column;gap:3px;padding:9px 0}
.cp-v2 .cp-tech .cp-specrow + .cp-specrow{border-top:1px dashed var(--line)}
.cp-v2 .cp-tech .cp-specrow dt{
  margin:0;font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}
.cp-v2 .cp-tech .cp-specrow dd{
  margin:0;font-size:14.5px;line-height:1.45;color:var(--ink);font-weight:500}
.cp-v2 .cp-tech .cp-specrow dd b{font-weight:700}
.cp-v2 .cp-tech .cp-specrow .cp-spec-fallback{
  color:var(--muted);font-size:13px;font-weight:400}

.cp-v2 .cp-tech .cp-compound-src{margin-top:18px}

@media (prefers-reduced-motion: reduce){
  .cp-v2 .cp-tech .cp-specgroup{transition:none}
  .cp-v2 .cp-tech .cp-specgroup:hover{transform:none}
}
@media(max-width:900px){
  .cp-v2 .cp-tech .cp-specgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:620px){
  .cp-v2 .cp-tech{padding:24px 18px;margin-top:36px}
  .cp-v2 .cp-tech .cp-specgrid{grid-template-columns:1fr;gap:10px}
  .cp-v2 .cp-whatis{padding:18px}
}

/* -------------------------------------------------------------------------
   OUTRO - the band between the page and the footer

   A statement, a way into the catalogue, and a way to hear about new
   documentation, on the deepest ground on the site. The vials sit in the
   background at low opacity and are decorative only: they carry no alt text
   and are not links, so nothing is lost when they are not rendered.

   The glow here is a soft radial wash INSIDE a dark panel, not a neon halo
   around a light one - the same restraint noted at the top of this file.
   ------------------------------------------------------------------------- */
.cp-v2 .cp-outro{
  position:relative;isolation:isolate;overflow:hidden;
  padding:74px 0 78px;
  background:
    radial-gradient(120% 140% at 8% 0%, #14586A 0%, transparent 55%),
    linear-gradient(160deg, #0E4A5A 0%, #0A3340 58%, #072831 100%)}

/* Fine grid, barely there, to stop the gradient reading as flat colour. */
.cp-v2 .cp-outro::before{
  content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size:64px 64px}
/* Top edge catches a little light, the way the cards above do. */
.cp-v2 .cp-outro::after{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;z-index:-1;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent)}

.cp-v2 .cp-outro-bg{position:absolute;inset:0;z-index:-2;pointer-events:none}
.cp-v2 .cp-outro-glow{position:absolute;border-radius:50%;filter:blur(70px)}
.cp-v2 .cp-outro-glow-a{
  width:520px;height:520px;left:-120px;bottom:-220px;
  background:radial-gradient(circle,rgba(22,184,166,.30),transparent 70%)}
.cp-v2 .cp-outro-glow-b{
  width:460px;height:460px;right:-100px;top:-200px;
  background:radial-gradient(circle,rgba(14,156,192,.26),transparent 70%)}

/* The vials. Placed off the reading column so they never sit behind text. */
.cp-v2 .cp-outro-vial{
  position:absolute;height:150px;width:auto;opacity:.16;
  filter:saturate(.65) brightness(1.15);
  transform-origin:center;pointer-events:none;user-select:none}
.cp-v2 .cp-outro-vial.v1{left:2%;top:8%;transform:rotate(-14deg)}
.cp-v2 .cp-outro-vial.v2{left:12%;bottom:-6%;height:130px;transform:rotate(9deg);opacity:.12}
.cp-v2 .cp-outro-vial.v3{right:3%;top:-4%;height:172px;transform:rotate(12deg)}
.cp-v2 .cp-outro-vial.v4{right:13%;bottom:2%;height:120px;transform:rotate(-8deg);opacity:.11}
.cp-v2 .cp-outro-vial.v5{left:44%;top:-16%;height:112px;transform:rotate(4deg);opacity:.08}

.cp-v2 .cp-outro-inner{
  position:relative;display:grid;grid-template-columns:1.15fr .85fr;
  gap:52px;align-items:center}

.cp-v2 .cp-outro-lead h2{
  margin:0 0 14px;color:#fff;font-family:var(--display);font-weight:600;
  font-size:clamp(26px,3.4vw,40px);line-height:1.14;letter-spacing:-.028em;
  max-width:17ch}
.cp-v2 .cp-outro-lead p{
  margin:0 0 26px;color:rgba(255,255,255,.72);font-size:15.5px;
  line-height:1.62;max-width:52ch}
/* White on the dark band: the highest-contrast thing available, so the one
   action in this section is unmistakably the brightest object in it.
   Measured in place: the button's teal ink on white is 5.89:1, past AA. */
.cp-v2 .cp-outro-cta{
  background:#fff;color:var(--teal);border:none;
  padding:15px 28px;font-size:15px;font-weight:600;
  box-shadow:0 10px 30px -12px rgba(0,0,0,.5)}
.cp-v2 .cp-outro-cta:hover,.cp-v2 .cp-outro-cta:focus-visible{
  background:#fff;color:#062b36;
  box-shadow:0 18px 44px -14px rgba(0,0,0,.6)}
.cp-v2 .cp-outro-cta:focus-visible{outline:2px solid #fff;outline-offset:3px}
.cp-v2 .cp-outro-cta svg{margin-left:3px}

/* The signup panel: frosted, with a solid fallback where transparency is
   reduced or backdrop-filter is unsupported. */
.cp-v2 .cp-outro-news{
  padding:28px;border-radius:var(--cp-r-panel);
  background:rgba(255,255,255,.075);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 24px 60px -30px rgba(0,0,0,.65);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%)}
.cp-v2 .cp-outro-news h3{
  margin:0 0 7px;color:#fff;font-family:var(--display);
  font-weight:600;font-size:18px;letter-spacing:-.014em}
.cp-v2 .cp-outro-news > p{
  margin:0 0 18px;color:rgba(255,255,255,.68);font-size:13.5px;line-height:1.55}

.cp-v2 .cp-news-form{display:flex;gap:9px}
.cp-v2 .cp-news-form input[type=email]{
  flex:1 1 auto;min-width:0;height:46px;padding:0 15px;
  border-radius:var(--cp-r-input);
  background:rgba(255,255,255,.94);border:1px solid rgba(255,255,255,.28);
  color:var(--ink);font-size:14.5px}
.cp-v2 .cp-news-form input[type=email]::placeholder{color:#7b8a8e}
.cp-v2 .cp-news-form input[type=email]:focus{
  outline:2px solid var(--signal);outline-offset:2px;background:#fff}
.cp-v2 .cp-news-form button{
  flex:none;height:46px;padding:0 22px;font-size:14.5px;font-weight:600;
  background:var(--signal);color:var(--teal);border:none}
.cp-v2 .cp-news-form button:hover{background:#3ed4c3;color:var(--teal)}
.cp-v2 .cp-news-form button[disabled]{opacity:.6;cursor:default}

.cp-v2 .cp-news-msg{
  margin:12px 0 0;font-size:13px;color:#8ee6d8;line-height:1.45}
.cp-v2 .cp-news-msg[hidden]{display:none}
.cp-v2 .cp-news-msg.is-error{color:#ffc4b8}
.cp-v2 .cp-news-fine{
  display:block;margin-top:14px;font-size:11.5px;color:rgba(255,255,255,.48)}

@media(max-width:960px){
  .cp-v2 .cp-outro-inner{grid-template-columns:1fr;gap:34px}
  .cp-v2 .cp-outro-vial.v5,.cp-v2 .cp-outro-vial.v4{display:none}
}
@media(max-width:620px){
  .cp-v2 .cp-outro{padding:54px 0 58px}
  .cp-v2 .cp-outro-vial{height:106px !important}
  .cp-v2 .cp-outro-vial.v2,.cp-v2 .cp-outro-vial.v3{opacity:.09}
  .cp-v2 .cp-outro-news{padding:22px}
  .cp-v2 .cp-news-form{flex-direction:column}
  .cp-v2 .cp-news-form button{width:100%}
}
@media (prefers-reduced-transparency: reduce){
  .cp-v2 .cp-outro-news{
    background:rgba(8,44,54,.96);backdrop-filter:none;-webkit-backdrop-filter:none}
}

/* The catalogue button sits between two hairline section borders, and it was
   8px above the one below it while every other block on the page clears its
   border by 48px or more (cp-batch 52, pdp-detail 48, cp-records 48). Matched
   to that rhythm on both sides so the button reads as its own block rather
   than as something attached to the related products below it. */
.cp-v2 .pdp-shopall{margin-top:48px;margin-bottom:48px;padding-bottom:0}

/* =========================================================================
   ABOUT: THE OPEN FILE

   The page's argument is that a stranger can check everything, so the design
   gets out of the way of documents and figures. Layout families are used once
   each: split hero, divided figure row, asymmetric lab panel, media plus
   ordered list, data index, colour-break grid, quote strip, notice, close.

   Every count on this page is generated (includes/about-evidence.php). None
   is typed, so none can go stale.
   ========================================================================= */

/* ---- 1. Hero ------------------------------------------------------------ */
.cp-v2 .ab2-hero .wrap{
  display:grid;grid-template-columns:1.06fr .94fr;gap:56px;align-items:center;
  padding-top:64px;padding-bottom:64px}
.cp-v2 .ab2-hero h1{
  font-family:var(--display);font-weight:700;
  font-size:clamp(30px,4.4vw,52px);line-height:1.08;letter-spacing:-.032em;
  color:var(--teal);margin:10px 0 16px;max-width:16ch}
.cp-v2 .ab2-hero .ab2-lead{
  font-size:clamp(15.5px,1.7vw,17.5px);line-height:1.62;color:var(--muted);
  max-width:52ch;margin:0 0 26px}
.cp-v2 .ab2-hero-actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.cp-v2 .ab2-link{
  font-family:var(--display);font-weight:600;font-size:14.5px;
  color:var(--signal-deep);border-bottom:1px solid rgba(14,156,192,.35);
  padding-bottom:2px}
.cp-v2 .ab2-link:hover{border-bottom-color:var(--signal-deep)}/* ---- 2. Figure bar ------------------------------------------------------ */
.cp-v2 .ab2-figs{background:var(--paper);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);padding:34px 0}
.cp-v2 .ab2-figs-row{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.cp-v2 .ab2-fig{padding:0 24px;border-left:1px solid var(--line)}
.cp-v2 .ab2-fig:first-child{padding-left:0;border-left:0}
.cp-v2 .ab2-fig-n{
  display:block;font-size:clamp(26px,3.2vw,38px);font-weight:500;
  letter-spacing:-.02em;color:var(--teal);line-height:1.05;
  font-variant-numeric:tabular-nums}
.cp-v2 .ab2-fig-l{
  display:block;margin-top:7px;font-size:12.5px;line-height:1.4;color:var(--muted)}
.cp-v2 .ab2-figs-note{
  margin:24px 0 0;font-size:12px;line-height:1.55;color:var(--muted);max-width:88ch}

/* ---- 3. Two laboratories ------------------------------------------------ */
.cp-v2 .ab2-labs{padding:64px 0;background:var(--white)}
.cp-v2 .ab2-labs-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:start}
.cp-v2 .ab2-labs-lead h2{
  font-family:var(--display);font-weight:600;font-size:clamp(24px,3vw,34px);
  letter-spacing:-.026em;color:var(--teal);margin:0 0 16px;max-width:16ch}
.cp-v2 .ab2-labs-lead p{font-size:16px;line-height:1.68;color:var(--ink);max-width:58ch;margin:0 0 14px}
.cp-v2 .ab2-labs-pull{
  margin-top:20px !important;padding-left:16px;border-left:3px solid var(--signal);
  font-family:var(--display);font-weight:600;font-size:17px;color:var(--teal)}

.cp-v2 .ab2-labs-panels{display:flex;flex-direction:column;gap:12px}
.cp-v2 .ab2-lab-panel{
  padding:18px 20px;background:var(--white);border:1px solid var(--line-strong);
  border-radius:var(--cp-r-panel);box-shadow:var(--cp-lift-1)}
.cp-v2 .ab2-lab-panel.is-accredited{border-left:3px solid #17784A}
.cp-v2 .ab2-lab-panel-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.cp-v2 .ab2-lab-panel h3{
  margin:0;font-family:var(--display);font-weight:600;font-size:16px;color:var(--ink)}
.cp-v2 .ab2-lab-count{font-size:11px;color:var(--muted);white-space:nowrap}
.cp-v2 .ab2-lab-place{margin:3px 0 0;font-size:12.5px;color:var(--muted)}
.cp-v2 .ab2-lab-body{margin:10px 0 0;font-size:13.5px;line-height:1.6;color:var(--ink)}
.cp-v2 .ab2-lab-note-card{
  padding:18px 20px;background:var(--paper);border:1px dashed var(--line-strong);
  border-radius:var(--cp-r-panel)}
.cp-v2 .ab2-lab-note-card p{margin:0 0 10px;font-size:13.5px;line-height:1.6;color:var(--ink)}
.cp-v2 .ab2-lab-note-card p:last-child{margin-bottom:0}

/* ---- 4. How to read one ------------------------------------------------- */
.cp-v2 .ab2-anat{padding:64px 0;background:var(--paper);border-top:1px solid var(--line)}
.cp-v2 .ab2-anat-head{max-width:62ch;margin:0 0 32px}
.cp-v2 .ab2-anat-head h2{
  font-family:var(--display);font-weight:600;font-size:clamp(23px,2.9vw,32px);
  letter-spacing:-.024em;color:var(--teal);margin:8px 0 10px}
.cp-v2 .ab2-anat-head p{margin:0;font-size:15.5px;line-height:1.6;color:var(--muted)}
.cp-v2 .ab2-anat-grid{display:grid;grid-template-columns:.82fr 1fr;gap:44px;align-items:start}
.cp-v2 .ab2-anat-doc{
  margin:0;position:sticky;top:92px;overflow:hidden;
  background:var(--white);border:1px solid var(--line);
  border-radius:var(--cp-r-panel);box-shadow:var(--cp-lift-2)}
.cp-v2 .ab2-anat-doc img{width:100%;height:auto;display:block}
.cp-v2 .ab2-anat-list{margin:0;padding:0;list-style:none;counter-reset:anat}
.cp-v2 .ab2-anat-list li{
  counter-increment:anat;position:relative;padding:0 0 20px 44px;margin-bottom:20px;
  border-bottom:1px solid var(--line)}
.cp-v2 .ab2-anat-list li:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.cp-v2 .ab2-anat-list li::before{
  content:counter(anat);position:absolute;left:0;top:-2px;
  width:29px;height:29px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--teal);color:#fff;
  font-family:var(--mono);font-size:12px;font-weight:500}
.cp-v2 .ab2-anat-list h3{
  margin:0 0 5px;font-family:var(--display);font-weight:600;font-size:16.5px;color:var(--ink)}
.cp-v2 .ab2-anat-list p{margin:0;font-size:14.5px;line-height:1.62;color:var(--muted);max-width:56ch}.cp-v2 .ab2-index-chips{display:flex;flex-wrap:wrap;gap:7px;justify-content:flex-end}
.cp-v2 .ab2-chip{
  padding:7px 13px;border-radius:var(--cp-r-pill);
  border:1px solid var(--line-strong);background:var(--white);
  font-size:12px;font-weight:600;color:var(--muted);cursor:pointer;
  transition:border-color .15s var(--cp-ease), color .15s var(--cp-ease),
             background-color .15s var(--cp-ease)}
.cp-v2 .ab2-chip:hover{border-color:var(--signal);color:var(--signal-deep)}
.cp-v2 .ab2-chip.is-active{background:var(--teal);border-color:var(--teal);color:#fff}
.cp-v2 .ab2-chip:focus-visible{outline:2px solid var(--signal);outline-offset:2px}/* ---- 6. Operations ------------------------------------------------------ */
.cp-v2 .ab2-ops{padding:64px 0;background:var(--teal);color:#fff}

/* Asymmetric on purpose. The argument sits on the left and stops; the terms
   sit on the right as a single object you could print. Four equal tiles put
   the four facts at the same weight as each other and at the same weight as
   every other grid on the page, which is how the section went flat. */
.cp-v2 .ab2-ops-grid{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:44px;align-items:start}
.cp-v2 .ab2-ops-copy{position:sticky;top:96px}
/* The shared eyebrow is --signal-deep, which is a mid tone made for white
   grounds. On the teal it needs to come up to 4.86:1 rather than sit at 1.4. */
.cp-v2 .ab2-ops .ab2-eyebrow{color:#CFF0F9}
.cp-v2 .ab2-ops-copy h2{
  font-family:var(--display);font-weight:600;font-size:clamp(24px,3vw,34px);
  letter-spacing:-.026em;color:#fff;margin:0 0 12px;max-width:16ch}
.cp-v2 .ab2-ops-copy>p{margin:0;font-size:15.5px;line-height:1.62;color:#d4ebf0;max-width:44ch}
.cp-v2 .ab2-ops-copy p.ab2-ops-note{margin:20px 0 0;font-size:13px;line-height:1.6;color:#D2ECF4}
.cp-v2 .ab2-ops-note a{color:#fff;border-bottom:1px solid rgba(255,255,255,.45)}
.cp-v2 .ab2-ops-note a:hover{border-bottom-color:#fff}

/* ---- The dispatch slip -------------------------------------------------- */
.cp-v2 .ab2-slip{
  position:relative;background:var(--white);color:var(--ink);
  border-radius:var(--cp-r-panel);overflow:hidden;
  box-shadow:0 30px 70px -28px rgba(0,0,0,.45)}
.cp-v2 .ab2-slip-head{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:13px 22px;background:var(--paper);border-bottom:1px solid var(--line-strong);
  font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.cp-v2 .ab2-slip-head span:last-child{color:var(--teal)}

.cp-v2 .ab2-slip-rows{list-style:none;margin:0;padding:0}
.cp-v2 .ab2-slip-row{
  display:grid;grid-template-columns:112px minmax(0,1fr);align-items:center;
  padding:20px 22px}
.cp-v2 .ab2-slip-row+.ab2-slip-row{border-top:1px solid var(--line)}
/* Right-aligned against a rule, so the four figures read as one column of
   numbers rather than four unrelated headings. */
.cp-v2 .ab2-slip-fig{
  padding-right:20px;text-align:right;
  font-size:clamp(22px,2.4vw,29px);font-weight:500;letter-spacing:-.03em;
  color:var(--teal);line-height:1;font-variant-numeric:tabular-nums}
.cp-v2 .ab2-slip-body{padding-left:20px;border-left:1px solid var(--line-strong)}
.cp-v2 .ab2-slip-body h3{
  margin:0 0 3px;font-family:var(--display);font-weight:600;font-size:15px;
  letter-spacing:-.012em;color:var(--ink)}
.cp-v2 .ab2-slip-body p{margin:0;font-size:13.5px;line-height:1.55;color:var(--muted)}

/* A tear line, because the thing above it is a set of terms and the thing
   below it is an offer of help. Different register, so it gets a seam. */
.cp-v2 .ab2-slip-foot{position:relative;padding:16px 22px;background:var(--paper)}
.cp-v2 .ab2-slip-perf{
  position:absolute;left:0;right:0;top:-1px;height:2px;
  background:repeating-linear-gradient(90deg,
    var(--line-strong) 0 6px, transparent 6px 12px)}
.cp-v2 .ab2-slip-foot p{margin:0;font-size:12.5px;line-height:1.55;color:var(--muted)}
.cp-v2 .ab2-slip-foot a{color:var(--teal);font-weight:600;border-bottom:1px solid rgba(12,109,137,.42)}
.cp-v2 .ab2-slip-foot a:hover{border-bottom-color:var(--teal)}

@media(max-width:1000px){
  .cp-v2 .ab2-ops-grid{grid-template-columns:1fr;gap:30px}
  .cp-v2 .ab2-ops-copy{position:static}
  .cp-v2 .ab2-ops-copy h2{max-width:20ch}
}
@media(max-width:560px){
  .cp-v2 .ab2-ops{padding:48px 0}
  .cp-v2 .ab2-slip-row{grid-template-columns:1fr;gap:8px;padding:17px 18px}
  .cp-v2 .ab2-slip-fig{text-align:left;padding-right:0;font-size:26px}
  .cp-v2 .ab2-slip-body{padding-left:0;border-left:0}
  .cp-v2 .ab2-slip-head,.cp-v2 .ab2-slip-foot{padding-left:18px;padding-right:18px}
}

/* ---- 7. Reviews lead-in ------------------------------------------------- */
.cp-v2 .ab2-said{padding:56px 0 0;background:var(--white)}
.cp-v2 .ab2-said h2{
  font-family:var(--display);font-weight:600;font-size:clamp(23px,2.9vw,32px);
  letter-spacing:-.024em;color:var(--teal);margin:0 0 10px}
.cp-v2 .ab2-said p{margin:0;font-size:15.5px;line-height:1.6;color:var(--muted);max-width:56ch}

/* ---- 8. What we do not claim ------------------------------------------- */
.cp-v2 .ab2-ruo{padding:56px 0;background:var(--white)}
.cp-v2 .ab2-ruo .wrap{
  display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;
  max-width:1000px;padding:26px 28px;
  border:1px solid var(--line-strong);border-radius:var(--cp-r-panel)}
.cp-v2 .ab2-ruo-ic{
  width:52px;height:52px;flex:none;border-radius:var(--cp-r-input);
  display:flex;align-items:center;justify-content:center;
  background:rgba(14,156,192,.09);color:var(--signal-deep)}
.cp-v2 .ab2-ruo-ic svg{width:24px;height:24px}
.cp-v2 .ab2-ruo h2{
  font-family:var(--display);font-weight:600;font-size:22px;color:var(--teal);margin:0 0 10px}
.cp-v2 .ab2-ruo p{font-size:15px;line-height:1.68;color:var(--muted);margin:0 0 10px;max-width:72ch}
.cp-v2 .ab2-ruo p:last-child{margin-bottom:0}

/* ---- 9. Close ----------------------------------------------------------- */
.cp-v2 .ab2-cta{
  padding:56px 0 64px;background:var(--paper);border-top:1px solid var(--line);text-align:center}
.cp-v2 .ab2-cta h2{
  font-family:var(--display);font-weight:600;font-size:clamp(24px,3vw,34px);
  letter-spacing:-.024em;color:var(--teal);margin:0 0 10px}
.cp-v2 .ab2-cta p{margin:0 auto 26px;font-size:16.5px;color:var(--muted);max-width:56ch}

/* ---- Motion ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .cp-v2 .ab2-chip{transition:none}
  .cp-v2 .ab2-anat-doc{position:static}
}

/* ---- Mobile ------------------------------------------------------------- */
@media(max-width:1000px){
  .cp-v2 .ab2-labs-grid,.cp-v2 .ab2-anat-grid{grid-template-columns:1fr;gap:32px}
  .cp-v2 .ab2-anat-doc{position:static;max-width:520px}  .cp-v2 .ab2-index-chips{justify-content:flex-start}
}
@media(max-width:860px){
  .cp-v2 .ab2-hero .wrap{grid-template-columns:1fr;gap:32px;padding-top:40px;padding-bottom:48px}
  /* Headline before the document on a phone: cold traffic must not open on a
     cropped page of dense paper. Overrides the inherited order:-1. */
  .cp-v2 .ab2-hero-media{order:0}  .cp-v2 .ab2-figs-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 0}
  .cp-v2 .ab2-fig{padding:0 18px}
  .cp-v2 .ab2-fig:nth-child(3){padding-left:0;border-left:0}
}
@media(max-width:620px){  .cp-v2 .ab2-ruo .wrap{grid-template-columns:1fr;padding:22px}}

/* wpautop leaves an empty paragraph at the end of shortcode output. */
.cp-v2 .ab2-lab-note-card p:empty{display:none}

/* -------------------------------------------------------------------------
   OFFER PRICING IN THE PRODUCT PAGE PRICE SLOT

   The DISCOUNT30 flow (Code Snippets, "offer page PHP hook v2") replaces the
   price html with .price-new / .price-old / .price-badge. Those spans land
   inside .pdp-price, where the v2 rule sizes every .amount at 29px, so the
   struck-through old price rendered at the same 25px bold as the new one and
   the two competed instead of one supporting the other. The currency symbol
   was left at its inherited 16px against a 25px number, which is why the
   dollar sign read as detached.

   Sizes are set on the wrapper AND on the inner .amount and currency symbol,
   because WooCommerce nests all three and the middle one carries the v2 rule.
   ------------------------------------------------------------------------- */
/* WooCommerce wraps price html in <span class="price">, which is display:inline,
   and the offer snippet returns a <div> inside it. A block-level flex container
   inside an inline parent resolves to zero width, which put the new price, the
   old price and the badge on three separate rows. Making the span a block gives
   the flex container a containing block with a real width. */
.cp-v2 .pdp-price .price{display:block;width:100%}
.cp-v2 .pdp-price .custom-price-under-title{
  display:flex;width:100%;align-items:baseline;gap:11px;flex-wrap:wrap}

.cp-v2 .pdp-price .price-new,
.cp-v2 .pdp-price .price-new .woocommerce-Price-amount,
.cp-v2 .pdp-price .price-new .amount,
.cp-v2 .pdp-price .price-new .woocommerce-Price-currencySymbol{
  font-size:clamp(25px,3.1vw,29px);font-weight:700;line-height:1.1;
  letter-spacing:-.022em;color:var(--teal)}

/* Secondary by size and weight, not only by a strike. Muted rather than the
   near-white #D3D3D3 it was, which failed contrast against white anyway. */
.cp-v2 .pdp-price .price-old,
.cp-v2 .pdp-price .price-old .woocommerce-Price-amount,
.cp-v2 .pdp-price .price-old .amount,
.cp-v2 .pdp-price .price-old .woocommerce-Price-currencySymbol{
  font-size:17px;font-weight:500;line-height:1.2;letter-spacing:0;color:var(--muted)}
.cp-v2 .pdp-price .price-old{
  text-decoration:line-through;text-decoration-thickness:1px;
  text-decoration-color:rgba(92,106,110,.6)}

/* Symmetric padding, centred against the big figure, and a red that sits with
   the teal instead of vibrating against it. */
/* The offer stylesheet forces padding-left:5px and padding-right:10px with
   !important on .single span.price-badge, which sits the label visibly left of
   centre. Overridden in kind, since !important can only be answered with
   !important. The right side is a hair tighter than the left on purpose: the
   letter-spacing below adds a trailing gap after the final letter, so equal
   padding reads right-heavy. Editing that snippet would be the cleaner fix
   than two stylesheets arguing. */
.cp-v2 .pdp-price span.price-badge,
.cp-v2.single .pdp-price span.price-badge{
  align-self:center;white-space:nowrap;
  font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;border-radius:5px;
  background:#C0362B;color:#fff;
  padding-top:4px !important;padding-bottom:4px !important;
  padding-left:8px !important;padding-right:7px !important}

/* The sticky buy bar shows the same markup on a smaller scale. */
.cp-v2 .pdp-sticky-price .custom-price-under-title{gap:8px}
.cp-v2 .pdp-sticky-price .price-new,
.cp-v2 .pdp-sticky-price .price-new .amount,
.cp-v2 .pdp-sticky-price .price-new .woocommerce-Price-currencySymbol{
  font-size:17px;font-weight:700;color:var(--teal)}
.cp-v2 .pdp-sticky-price .price-old,
.cp-v2 .pdp-sticky-price .price-old .amount,
.cp-v2 .pdp-sticky-price .price-old .woocommerce-Price-currencySymbol{
  font-size:13px;font-weight:500;color:var(--muted)}
.cp-v2 .pdp-sticky-price .price-badge{font-size:9px;padding:3px 6px}

/* =========================================================================
   ABOUT, SECOND PASS
   Standards banner in the hero, the certificate wall replacing the index
   table, the operations timeline, and the reviews band joined to its lead-in.
   ========================================================================= */


/* ---- The certificate wall ---------------------------------------------- */
.cp-v2 .ab2-wall{padding:64px 0;background:var(--white);border-top:1px solid var(--line)}
.cp-v2 .ab2-wall-head{
  display:grid;grid-template-columns:1fr auto;gap:28px;align-items:end;margin:0 0 26px}
.cp-v2 .ab2-wall-head h2{
  font-family:var(--display);font-weight:600;font-size:clamp(23px,2.9vw,32px);
  letter-spacing:-.024em;color:var(--teal);margin:8px 0 10px;max-width:20ch}
.cp-v2 .ab2-wall-head p{margin:0;font-size:15px;line-height:1.6;color:var(--muted);max-width:58ch}

.cp-v2 .ab2-wall-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.cp-v2 .ab2-doc{
  display:flex;flex-direction:column;gap:0;padding:0;text-align:left;
  background:var(--white);border:1px solid var(--line-strong);
  border-radius:var(--cp-r-panel);overflow:hidden;cursor:pointer;
  box-shadow:var(--cp-lift-1);
  transition:transform .18s var(--cp-ease), box-shadow .18s var(--cp-ease),
             border-color .18s var(--cp-ease)}
.cp-v2 .ab2-doc:hover{
  transform:translateY(-3px);box-shadow:var(--cp-lift-3);border-color:var(--signal)}
.cp-v2 .ab2-doc:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.cp-v2 .ab2-doc:active{transform:translateY(-1px)}
.cp-v2 .ab2-doc[hidden]{display:none}

/* The scan, cropped to its head where the letterhead and the summary sit. */
.cp-v2 .ab2-doc-shot{
  position:relative;display:block;aspect-ratio:4/3;overflow:hidden;
  background:var(--paper);border-bottom:1px solid var(--line)}
.cp-v2 .ab2-doc-shot img{
  width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.cp-v2 .ab2-doc-noimg{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--muted)}
.cp-v2 .ab2-doc-noimg svg{width:30px;height:30px}
.cp-v2 .ab2-doc-pur{
  position:absolute;right:8px;bottom:8px;
  padding:3px 7px;border-radius:5px;
  background:rgba(23,120,74,.94);color:#fff;
  font-size:10.5px;font-weight:600;letter-spacing:.02em}
.cp-v2 .ab2-doc-meta{display:flex;flex-direction:column;gap:2px;padding:11px 13px 13px}
.cp-v2 .ab2-doc-name{
  font-family:var(--display);font-size:13.5px;color:var(--muted);line-height:1.3}
.cp-v2 .ab2-doc-name b{font-weight:600;color:var(--ink)}
.cp-v2 .ab2-doc-lab{font-size:11.5px;color:var(--muted)}

.cp-v2 .ab2-wall-more{margin-top:22px;text-align:center}

/* ---- Reviews band joined to its lead-in --------------------------------
   The strip ships with a --paper ground and its own top border for the
   homepage, where it is a standalone band. Here it continues the white
   "What buyers said" block directly above it, and the seam between two
   different greys was reading as a mistake. */
.cp-v2 .ab2-said + .cp-rev-strip{
  background:var(--white);border-top:0;padding-top:24px}

@media (prefers-reduced-motion: reduce){
  .cp-v2 .ab2-doc{transition:none}
  .cp-v2 .ab2-doc:hover{transform:none}
}
@media(max-width:1000px){
  .cp-v2 .ab2-wall-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cp-v2 .ab2-wall-head{grid-template-columns:1fr;align-items:start}
}
@media(max-width:620px){
  .cp-v2 .ab2-wall-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
}

/* -------------------------------------------------------------------------
   ABOUT HERO STAGE

   Built entirely from assets the store owns: two of its own branded vials and
   one real certificate. The vial label already carries "Lab Tested, in USA"
   alongside the identity and purity marks, so the origin claim is made by the
   product rather than by a flag laid over it, and the certificate behind the
   vials is the same document the wall further down opens.

   The vials carry a real alpha matte now, cut from the studio white and
   trimmed to the silhouette, so they are addressed by height: their aspect is
   the bottle's rather than the old 600x679 frame's, and every width percentage
   measured against that frame is void. That is also why no generated vial
   belongs here: an unbranded stock bottle would be a product this shop does
   not sell, sitting at the top of the page that argues you can verify what it
   sells.
   ------------------------------------------------------------------------- */
.cp-v2 .ab2-stage{
  position:relative;isolation:isolate;
  aspect-ratio:4/3.35;width:100%;
  border-radius:var(--cp-r-panel);overflow:hidden;
  background:
    radial-gradient(120% 100% at 78% 8%, #EAF3F5 0%, transparent 58%),
    linear-gradient(168deg, #F7FAFA 0%, #EDF3F4 100%);
  border:1px solid var(--line);
  box-shadow:var(--cp-lift-2)}

.cp-v2 .ab2-stage-glow{
  position:absolute;z-index:0;width:62%;aspect-ratio:1;left:-12%;bottom:-18%;
  border-radius:50%;filter:blur(58px);
  background:radial-gradient(circle, rgba(14,156,192,.16), transparent 70%)}

/* Six bars, low contrast, held to the top-right corner. A motif of origin,
   not bunting: at this weight it reads as a texture behind the product. */
.cp-v2 .ab2-stage-stripes{
  position:absolute;z-index:0;top:0;right:0;width:46%;height:52%;
  background:repeating-linear-gradient(180deg,
    rgba(178,34,52,.11) 0 7px, transparent 7px 14px);
  -webkit-mask-image:linear-gradient(215deg,#000,transparent 72%);
  mask-image:linear-gradient(215deg,#000,transparent 72%)}

/* The certificate sits back and slightly turned, so it reads as the paper
   behind the product rather than as a second subject competing with it. */
.cp-v2 .ab2-stage-doc{
  position:absolute;z-index:1;margin:0;
  top:7%;right:5%;width:47%;aspect-ratio:1/1.30;
  overflow:hidden;background:#fff;
  border:1px solid var(--line);border-radius:10px;
  box-shadow:0 22px 34px -20px rgba(12,109,137,.42);
  transform:rotate(3.2deg)}
.cp-v2 .ab2-stage-doc img{
  width:100%;height:100%;object-fit:cover;object-position:top center;display:block}

.cp-v2 .ab2-stage-vial{
  position:absolute;z-index:2;width:auto;
  filter:drop-shadow(0 2px 2px rgba(12,109,137,.26))
         drop-shadow(0 14px 18px rgba(12,109,137,.18))}
/* opacity:.96 is gone: on an opaque box it did nothing, on a matte it ghosts
   the glow and the stripe texture straight through the glass. */
.cp-v2 .ab2-stage-vial.is-back{
  height:64%;left:9%;bottom:8%;transform:rotate(-5deg);z-index:2}
.cp-v2 .ab2-stage-vial.is-front{
  height:78%;left:25%;bottom:2%;z-index:3}

/* The claim, stated where the product makes it. */
.cp-v2 .ab2-stage-chip{
  position:absolute;z-index:4;left:6%;top:7%;
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 13px;border-radius:var(--cp-r-panel);
  background:rgba(255,255,255,.93);
  border:1px solid var(--line);
  box-shadow:var(--cp-lift-1);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.cp-v2 .ab2-stage-chip img{flex:none;width:26px;height:26px}
.cp-v2 .ab2-stage-chip span{display:flex;flex-direction:column;gap:1px}
.cp-v2 .ab2-stage-chip b{
  font-family:var(--display);font-weight:600;font-size:13px;color:var(--teal);
  letter-spacing:-.01em;line-height:1.15}
.cp-v2 .ab2-stage-chip small{font-size:10.5px;color:var(--muted);line-height:1.15}

@media (prefers-reduced-transparency: reduce){
  .cp-v2 .ab2-stage-chip{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}
}
@media(max-width:860px){
  .cp-v2 .ab2-stage{aspect-ratio:4/3}
  .cp-v2 .ab2-stage-chip{left:5%;top:5%;padding:7px 11px}
  .cp-v2 .ab2-stage-chip b{font-size:12px}
  .cp-v2 .ab2-stage-chip small{display:none}
}
@media(max-width:480px){
  .cp-v2 .ab2-stage{aspect-ratio:1/1}
  .cp-v2 .ab2-stage-vial.is-back{display:none}
  .cp-v2 .ab2-stage-vial.is-front{height:76%;left:14%}
  .cp-v2 .ab2-stage-doc{width:52%;right:4%}
}