/* =============================================================================
   PRIME CORE STOREFRONT THEME (2026-11-02 redesign)
   Source of truth: docs/mockups/pcd-redesign-v7.html. Loaded on primecoredynamics.com
   only (views/partials/head.php), after storefront.css, cache-busted by asset_url().
   Inter only, self-hosted. Card themes on <html data-card>, footer themes on
   <html data-footer>, both from Settings > Brand (Storefront::cardTheme/footerTheme).
   No tan or beige surface anywhere; no serif, script or italic face.
   ============================================================================= */

@font-face{font-family:"PCD Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/inter/inter-latin-var.woff2) format("woff2")}
/* A fallback with Inter's metrics, so the swap from the system face does not move text (CLS). */
@font-face{font-family:"Inter Fallback";src:local("Arial"),local("Helvetica Neue"),local("Helvetica");size-adjust:107.12%;ascent-override:90.44%;descent-override:22.52%;line-gap-override:0%}

/* ---- Tokens ------------------------------------------------------------------ */
:root[data-card]{
  --v7-font:"PCD Inter","Inter Fallback",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --ink:#16283b; --navy:#203d5b; --green:#42946b; --green-dk:#21603f; --green-soft:#dcebe1;
  --v7-muted:#5f6b76; --v7-body:#3d4a56; --amber:#a35400; --v7-red:#a32a2a; --r:14px;
  --paper:#ffffff; --cream:#f4f6f8; --stone:#eef1f4; --stone-2:#e4e8ed; --v7-line:#e1e6eb;
  --hero-a:#f7f9fb; --hero-b:#ebeff3; --hero-c:#dfe5eb; --hero-ink:var(--ink); --hero-body:#3d4a56;
  /* storefront.css tokens, mapped onto the new palette for every page it still lays out */
  --font-ui:var(--v7-font); --font-mono:var(--v7-font); --rs-sans:var(--v7-font);
  --accent-blue:var(--navy); --accent-orange:var(--ink); --pcd-orange:var(--ink); --accent-warm:var(--amber);
  --accent-green:var(--green-dk); --link:var(--navy); --link-hover:var(--ink); --text-link:var(--navy);
  --off-white:var(--cream); --line-warm:var(--v7-line); --muted-warm:var(--v7-muted); --muted-warm-2:var(--v7-muted);
  --ink-2:var(--ink);
}
:root[data-card="mist"]{--paper:#fafbfd;--cream:#edf2f8;--stone:#e4ecf4;--stone-2:#d8e3ee;--v7-line:#d6e0ea;--hero-a:#f1f5fa;--hero-b:#dfe8f1;--hero-c:#cfdbe8}
:root[data-card="sage"]{--paper:#fbfcfb;--cream:#eef4f0;--stone:#e4eee8;--stone-2:#d7e6dc;--v7-line:#d5e1d9;--hero-a:#f2f7f3;--hero-b:#e0ece4;--hero-c:#cfe1d5}
:root[data-card="grey"]{--paper:#fafafa;--cream:#f2f2f2;--stone:#ebebeb;--stone-2:#e2e2e2;--v7-line:#dddddd;--hero-a:#f6f6f6;--hero-b:#e8e8e8;--hero-c:#dcdcdc}
:root[data-card="navy-hero"]{--paper:#ffffff;--cream:#f2f5f9;--stone:#eef1f4;--stone-2:#e4e8ed;--v7-line:#e1e6eb;--hero-a:#2a4c70;--hero-b:#203d5b;--hero-c:#16283b;--hero-ink:#ffffff;--hero-body:#dbe4ee}

/* ---- One face, upright, everywhere ---------------------------------------- */
:root[data-card] body, :root[data-card] body *{font-family:var(--v7-font)!important;font-style:normal!important}
:root[data-card] body{background:var(--paper)!important;color:var(--ink);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;font-feature-settings:"cv11","ss01"}
:root[data-card] .catalog-bg,:root[data-card] .hero-drift{display:none!important}
:root[data-card] :focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.v7-wrap{max-width:1360px;margin:0 auto;padding:0 28px;box-sizing:border-box}
.v7-k{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--v7-muted);margin-bottom:12px}
.v7-eyebrow{font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--v7-muted)}
.v7-link-u{font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;border-bottom:1.5px solid currentColor;padding-bottom:3px;display:inline-block;color:var(--ink);text-decoration:none}
.v7-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 26px;border-radius:999px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;border:1.5px solid transparent;cursor:pointer;text-decoration:none;transition:background .15s,color .15s;white-space:nowrap;box-sizing:border-box}
.v7-btn-ink{background:var(--ink);color:#fff}.v7-btn-ink:hover{background:var(--navy);color:#fff}
.v7-btn-line{border-color:var(--ink);color:var(--ink);background:transparent}.v7-btn-line:hover{background:var(--ink);color:#fff}
.v7-btn-s{min-height:40px;padding:0 16px;font-size:12.5px;letter-spacing:.02em;text-transform:none}
.v7-ok,.v7-pill-ok{display:inline-flex;align-items:center;gap:6px;color:var(--green-dk);font-weight:600;font-size:12px}
.v7-ok i,.v7-pill-ok i{width:7px;height:7px;border-radius:50%;background:var(--green);flex:none}
.v7-pill-ok{background:var(--green-soft);border-radius:999px;padding:4px 10px;width:max-content}
html.v7-locked,html.v7-locked body{overflow:hidden}

/* ---- Announcement + header ---------------------------------------------- */
.v7-announce{background:var(--ink);color:#e9eef3;text-align:center;font-size:13px;font-weight:500;padding:9px 16px;line-height:1.4}
.v7-announce-sep{color:#8fa1b3}
.v7-header{position:sticky;top:0;z-index:60;background:var(--paper);border-bottom:1px solid var(--v7-line)}
.v7-nav{display:flex;align-items:center;height:68px;gap:34px}
.v7-logo{display:flex;align-items:center;flex:none}
.v7-logo img,.v7-logo .v7-logo-img{height:42px!important;width:auto!important;max-width:none;display:block}
.v7-menu ul{display:flex;gap:28px;list-style:none;margin:0;padding:0}
.v7-menu li{display:flex;align-items:center;height:68px}
.v7-has-drop,.v7-acct{position:relative}
.v7-top{font-size:14.5px;color:var(--ink);display:inline-flex;gap:6px;align-items:center;text-decoration:none;height:100%;border-bottom:2px solid transparent;box-sizing:border-box;padding-top:2px}
.v7-top:hover,.v7-top.is-active{border-bottom-color:var(--ink)}
.v7-chev{width:10px;height:10px;transition:transform .15s}
.is-open>.v7-top .v7-chev{transform:rotate(180deg)}
.v7-right{margin-left:auto;display:flex;gap:10px;align-items:center}
.v7-iconbtn{position:relative;display:grid;place-items:center;width:44px;height:44px;border:0;background:transparent;color:var(--ink);cursor:pointer;border-radius:50%;padding:0;text-decoration:none}
.v7-iconbtn:hover{background:var(--cream)}
.v7-icon{width:21px;height:21px;stroke:var(--ink);fill:none;stroke-width:1.6}
.v7-cart i,.v7-dot{position:absolute;top:4px;right:2px;background:var(--green);color:#fff;font-style:normal;font-size:10px;font-weight:600;min-width:16px;height:16px;border-radius:999px;display:grid;place-items:center;padding:0 4px;box-sizing:border-box}
.v7-dot{min-width:9px;width:9px;height:9px;padding:0;top:9px;right:9px}
.v7-cart i[hidden]{display:none}
.v7-badge{display:inline-grid;place-items:center;min-width:18px;height:18px;border-radius:999px;background:var(--green);color:#fff;font-size:11px;font-weight:600;padding:0 5px}
.v7-burger{display:none}
.v7-acct-menu{display:none;position:absolute;right:0;top:100%;min-width:210px;background:#fff;border:1px solid var(--v7-line);border-radius:14px;box-shadow:0 24px 50px -24px rgba(22,40,59,.3);padding:8px;z-index:70}
.v7-acct-menu a{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-radius:9px;color:var(--ink);text-decoration:none;font-size:14px}
.v7-acct-menu a:hover{background:var(--cream)}
.v7-acct.is-open .v7-acct-menu{display:block}
.v7-search{border-top:1px solid var(--v7-line);background:var(--paper);padding:12px 0}
.v7-search[hidden]{display:none}
.v7-search-in{display:flex;gap:12px;align-items:center}
.v7-search-in svg{width:20px;height:20px;stroke:var(--v7-muted);fill:none;stroke-width:1.7;flex:none}
.v7-search-in input{flex:1;min-width:0;border:1.5px solid var(--v7-line);border-radius:999px;height:44px;padding:0 18px;font:inherit;font-size:15px;background:#fff;color:var(--ink)}

/* Shop mega menu */
.v7-mega{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;border-top:1px solid var(--v7-line);border-bottom:1px solid var(--v7-line);box-shadow:0 30px 60px -30px rgba(22,40,59,.28);z-index:65;cursor:default}
.v7-has-mega.is-open>.v7-mega,.v7-has-drop.is-open>.v7-drop{display:grid}
html:not(.v7-js) .v7-has-mega:hover>.v7-mega,html:not(.v7-js) .v7-has-mega:focus-within>.v7-mega,
html:not(.v7-js) .v7-has-drop:hover>.v7-drop,html:not(.v7-js) .v7-has-drop:focus-within>.v7-drop,
html:not(.v7-js) .v7-acct:hover .v7-acct-menu,html:not(.v7-js) .v7-acct:focus-within .v7-acct-menu{display:grid}
.v7-mega .v7-mg{display:grid;grid-template-columns:240px 1fr 300px;width:100%}
.v7-menu .v7-mega li{height:auto}
.v7-mg-rail{padding:28px 24px 28px 0;border-right:1px solid var(--v7-line);display:flex;flex-direction:column;gap:2px}
.v7-mr{display:flex;justify-content:space-between;align-items:center;padding:9px 12px;border-radius:10px;font-size:14.5px;font-weight:500;color:#33414e;text-decoration:none}
.v7-mr em{font-size:12px;color:var(--v7-muted);font-weight:500}
.v7-mr:hover{background:var(--cream)}
.v7-mr.is-on{background:var(--ink);color:#fff}
.v7-mr.is-on em{color:#fff}
.v7-mg-all{margin-top:14px;font-size:13.5px;font-weight:600;color:var(--green-dk);padding:0 12px;text-decoration:none}
.v7-mg-main{padding:28px;display:flex;flex-direction:column}
.v7-mg-panel[hidden]{display:none}
.v7-mg-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:16px}
.v7-mg-title{font-size:20px;letter-spacing:-.02em;font-weight:600;color:var(--ink)}
.v7-mg-viewall{font-size:13.5px;font-weight:600;color:var(--green-dk);text-decoration:none}
.v7-mg-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px}
.v7-mt{display:grid;gap:4px;text-decoration:none;color:var(--ink)}
.v7-mt-ph{background:var(--stone);border-radius:12px;aspect-ratio:1;display:grid;place-items:center;overflow:hidden;margin-bottom:6px}
.v7-mt-ph picture,.v7-mt-ph img{width:96%;height:auto;mix-blend-mode:multiply;transition:transform .3s}
.v7-mt:hover .v7-mt-ph img{transform:scale(1.05)}
.v7-mt b{font-size:14px;font-weight:600;letter-spacing:-.01em}
.v7-mt>span:last-child{font-size:13px;color:var(--v7-muted)}
.v7-mg-perks{margin-top:auto;padding-top:22px;display:flex;gap:10px 22px;flex-wrap:wrap;font-size:13px;color:#43505c;border-top:1px solid var(--v7-line)}
.v7-mg-perks span{display:inline-flex;gap:8px;align-items:center}
.v7-mg-perks i{width:6px;height:6px;border-radius:50%;background:var(--green)}
.v7-mg-coa{padding:28px 0 28px 24px;border-left:1px solid var(--v7-line);display:flex;flex-direction:column;gap:12px}
.v7-coa-mini{display:grid;grid-template-columns:86px 1fr;gap:14px;align-items:center;background:var(--cream);border-radius:12px;padding:10px;text-decoration:none}
.v7-coa-mini img{width:86px;height:auto;border-radius:6px;box-shadow:0 1px 0 var(--v7-line),0 8px 18px -10px rgba(22,40,59,.4);background:#fff}
.v7-coa-mini-t{display:grid;gap:3px;font-size:12.5px;color:var(--v7-muted)}
.v7-coa-mini-t b{font-size:14px;color:var(--ink)}
.v7-lot{display:flex;border:1px solid var(--v7-line);border-radius:999px;padding:4px 4px 4px 14px;background:#fff;margin:0}
.v7-lot input{flex:1;min-width:0;border:0;outline:0;font:inherit;font-size:13.5px;background:transparent;color:var(--ink)}
.v7-lot button{border:0;background:var(--ink);color:#fff;font:inherit;font-size:12.5px;font-weight:600;border-radius:999px;padding:9px 14px;cursor:pointer}
.v7-mg-coalink{font-size:13.5px;font-weight:600;color:var(--green-dk);display:inline-flex;gap:6px;align-items:center;text-decoration:none}
.v7-mg-coalink svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.8}

/* Lab testing dropdown */
.v7-drop{display:none;position:absolute;top:100%;left:-24px;width:620px;background:#fff;border:1px solid var(--v7-line);border-radius:14px;box-shadow:0 24px 50px -24px rgba(22,40,59,.3);padding:10px;z-index:65;grid-template-columns:1fr 250px;gap:10px;cursor:default}
.v7-dp-links{display:grid;gap:2px;align-content:start}
.v7-dp-links a{display:grid;grid-template-columns:38px 1fr;gap:12px;align-items:center;padding:10px;border-radius:10px;text-decoration:none;color:var(--ink)}
.v7-dp-links a:hover{background:var(--cream)}
.v7-dp-ic{width:38px;height:38px;border-radius:10px;background:var(--cream);display:grid;place-items:center}
.v7-dp-ic svg{width:18px;height:18px;stroke:var(--navy);fill:none;stroke-width:1.7}
.v7-dp-links b{display:block;font-size:14px;font-weight:600}
.v7-dp-links small{font-size:12.5px;color:var(--v7-muted)}
.v7-dp-latest{background:var(--cream);border-radius:10px;padding:14px;display:grid;gap:10px;align-content:start}
.v7-dp-latest .v7-k{margin-bottom:2px}
.v7-dp-latest a{display:grid;grid-template-columns:40px 1fr;gap:10px;align-items:center;text-decoration:none;color:var(--ink)}
.v7-dp-latest img{width:40px;height:auto;border-radius:4px;background:#fff;box-shadow:0 1px 0 var(--v7-line)}
.v7-dp-latest b{display:block;font-size:13px;font-weight:600}
.v7-dp-latest small{font-size:11.5px;color:var(--v7-muted)}

/* Phone drawer */
.v7-drawer{position:fixed;inset:0;z-index:110;background:#fff;overflow:auto;display:flex;flex-direction:column;overscroll-behavior:contain}
.v7-drawer[hidden]{display:none}
.v7-dr-top{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--v7-line)}
.v7-dr-top .v7-logo img{height:34px!important}
.v7-dr-x{width:44px;height:44px;border-radius:50%;border:1px solid var(--v7-line);display:grid;place-items:center;background:#fff;cursor:pointer;padding:0}
.v7-dr-x svg{width:16px;height:16px;stroke:var(--ink);stroke-width:1.8}
.v7-dr-search{margin:14px 16px 6px;display:flex;gap:8px;align-items:center;background:var(--cream);border-radius:999px;padding:0 14px;position:relative}
.v7-dr-search svg{width:17px;height:17px;stroke:var(--v7-muted);fill:none;stroke-width:1.7;flex:none}
.v7-dr-search input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:16px;height:46px;outline:0;color:var(--ink)}
.v7-dr-sugg{position:absolute;left:0;right:0;top:calc(100% + 6px);background:#fff;border:1px solid var(--v7-line);border-radius:14px;box-shadow:0 20px 40px -20px rgba(22,40,59,.35);z-index:2;padding:6px;display:grid}
.v7-dr-sugg[hidden]{display:none}
.v7-dr-sugg a{padding:11px 12px;border-radius:9px;color:var(--ink);text-decoration:none;font-size:15px}
.v7-dr-sugg a:hover,.v7-dr-sugg a:focus{background:var(--cream)}
.v7-dr-sugg small{color:var(--v7-muted);font-size:12px}
.v7-dr-list{padding:4px 16px}
.v7-dr-list details{border-bottom:1px solid var(--v7-line)}
.v7-dr-list summary{list-style:none;display:flex;justify-content:space-between;align-items:center;padding:15px 0;font-size:16px;font-weight:600;cursor:pointer;min-height:24px}
.v7-dr-list summary::-webkit-details-marker{display:none}
.v7-dr-list summary span{font-size:12px;color:var(--v7-muted);font-weight:500;margin-left:auto;margin-right:12px}
.v7-dr-list summary:after{content:"+";font-weight:400;font-size:20px;color:var(--v7-muted)}
.v7-dr-list details[open] summary:after{content:"\2212"}
.v7-dr-list ul{list-style:none;display:grid;gap:2px;padding:0 0 12px 2px;margin:0}
.v7-dr-list ul a{display:block;padding:9px 0;font-size:15px;color:#43505c;text-decoration:none}
.v7-dr-list ul a.v7-all{color:var(--green-dk);font-weight:600}
.v7-dr-links{padding:10px 16px;display:grid}
.v7-dr-links a{padding:13px 0;border-bottom:1px solid var(--v7-line);font-size:16px;font-weight:600;display:flex;justify-content:space-between;align-items:center;color:var(--ink);text-decoration:none}
.v7-dr-links a svg{width:14px;height:14px;stroke:var(--v7-muted);fill:none;stroke-width:1.8}
.v7-dr-promo{margin:16px;background:var(--navy);color:#fff;border-radius:12px;padding:16px 18px}
.v7-dr-promo b{display:block;font-size:16px}
.v7-dr-promo span{font-size:13px;color:#c9d5e1}
.v7-dr-foot{margin-top:auto;padding:14px 16px 20px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
/* Flex, not grid (fix 2026-11-03): in a grid every text run is its own grid item, so "Cart (", the count and ")" stacked on three rows. */
.v7-dr-foot a{height:48px;min-width:0;border-radius:999px;border:1.5px solid var(--ink);display:flex;align-items:center;justify-content:center;white-space:nowrap;font-size:14px;font-weight:600;color:var(--ink);text-decoration:none}
.v7-dr-foot a.v7-dk{background:var(--ink);color:#fff}
.v7-noscript{display:none;gap:16px;flex-wrap:wrap;padding:10px 16px;border-bottom:1px solid var(--v7-line)}
.v7-noscript a{color:var(--ink);font-weight:600}

/* ---- Product cards (shop, class pages, home, related) --------------------- */
:root[data-card] .pgrid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:28px 18px!important}
/* Product card v8 (2026-11-03, docs/mockups/pcd-cards-v8.html). One white card; .v7-sc is a
   one-cell grid holding .v7-sc-main and, when open, the size picker in the SAME cell, so the
   picker covers the whole card and a long size list makes the card taller, never scrolls. */
.v7-sc{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto;position:relative;min-width:0;background:#fff;border:1px solid var(--v7-line);border-radius:18px;box-shadow:0 1px 2px rgba(22,40,59,.05),0 14px 32px -20px rgba(22,40,59,.28);transition:transform .2s ease,box-shadow .2s ease;box-sizing:border-box}
@media (hover:hover) and (pointer:fine) and (min-width:821px){
  .v7-sc:hover:not(:has(.v7-picker:not([hidden]))){transform:translateY(-3px);box-shadow:0 2px 4px rgba(22,40,59,.06),0 24px 44px -22px rgba(22,40,59,.38)}
}
.v7-sc-main{grid-area:1/1;display:flex;flex-direction:column;min-width:0}
.v7-sc-ph{position:relative;margin:10px 10px 0;background:var(--stone);border-radius:12px;aspect-ratio:1/1.02;overflow:hidden;display:grid;place-items:center}
.v7-sc-img{display:grid;place-items:center;width:100%;height:100%}
.v7-sc-img picture{display:contents}
.v7-sc-img img{width:86%;height:auto;mix-blend-mode:multiply;transition:transform .35s ease}
.v7-sc:hover .v7-sc-img img{transform:scale(1.04)}
.v7-sc.is-out .v7-sc-img img{opacity:.55}
.v7-sc-info{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1;min-width:0}
.v7-tag{position:absolute;top:12px;left:12px;background:#fff;border-radius:999px;font-size:12px;padding:4px 11px;z-index:1;color:var(--ink);font-weight:500}
.v7-tag.is-out{color:var(--v7-red)}.v7-tag.is-backorder,.v7-tag.is-low{color:var(--amber)}
.v7-qa-form{margin:0}
.v7-qa{position:absolute;right:12px;bottom:12px;width:46px;height:46px;border-radius:50%;border:0;background:var(--ink);color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 8px 18px -8px rgba(22,40,59,.6);transition:transform .15s,background .15s;z-index:2;padding:0;text-decoration:none}
.v7-qa:hover{transform:scale(1.07);background:var(--navy)}
.v7-qa:disabled{opacity:.6;cursor:progress}
.v7-qa svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2}
.v7-qa.is-notify{background:#fff;border:1px solid var(--v7-line)}
.v7-qa.is-notify svg{stroke:var(--ink);stroke-width:1.7}
.v7-sc-t{display:grid;gap:4px;text-decoration:none;color:var(--ink);margin-bottom:12px}
.v7-sc-t h3,.v7-sc-t h2{font-size:16.5px;font-weight:600;letter-spacing:-.015em;margin:0;line-height:1.3;color:var(--ink)}
.v7-sc-sz{font-size:13.5px;color:var(--v7-muted)}
.v7-sc-bot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:auto;padding-top:12px;border-top:1px solid var(--v7-line);min-height:20px}
.v7-sc-pr{font-size:17px;font-weight:600;letter-spacing:-.01em;color:var(--ink);white-space:nowrap}
.v7-sc-pr small{font-size:12.5px;font-weight:500;color:var(--v7-muted);margin-right:3px;letter-spacing:0}
.v7-sc.is-out .v7-sc-pr{color:var(--v7-muted);font-size:14px;font-weight:500}
.v7-sc-lot{display:inline-flex;gap:6px;align-items:center;font-size:12px;color:var(--green-dk);font-weight:600;white-space:nowrap}
.v7-sc-lot i{width:6px;height:6px;border-radius:50%;background:var(--green)}
/* the size picker */
.v7-picker{grid-area:1/1;position:relative;z-index:3;background:#fff;border-radius:18px;padding:16px;display:flex;flex-direction:column;margin:0;box-sizing:border-box;min-width:0}
.v7-picker[hidden]{display:none}
.v7-pk-grab{display:none}
.v7-pk-top{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.v7-pk-thumb{display:none}
.v7-pk-name{flex:1;min-width:0}
.v7-pk-name b{font-size:16px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v7-pk-name small{display:none;font-size:12.5px;color:var(--green-dk);font-weight:600}
.v7-pk-x{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--cream);border:0;cursor:pointer;padding:0;flex:none}
.v7-pk-x svg{width:13px;height:13px;stroke:var(--ink);stroke-width:1.8}
.v7-pk-k{font-size:12.5px;color:var(--v7-muted);margin:0 0 12px}
.v7-pk-rows{display:grid;gap:7px}
.v7-pk-row{display:grid;grid-template-columns:16px minmax(0,1fr) auto;gap:10px;align-items:center;border:1.5px solid var(--v7-line);border-radius:11px;padding:10px 12px;cursor:pointer;font-size:14.5px;color:var(--ink)}
.v7-pk-l{white-space:nowrap;min-width:0}
.v7-pk-row:has(input:checked){border-color:var(--ink);background:var(--cream)}
.v7-pk-row input{accent-color:var(--ink);width:16px;height:16px;margin:0}
.v7-pk-row.is-off{opacity:.45;cursor:not-allowed}
.v7-pk-l em{font-size:11px;font-weight:600;margin-left:8px;color:var(--v7-red)}
.v7-pk-l em.is-b{color:var(--amber)}
.v7-pk-p{font-weight:600;white-space:nowrap}
.v7-pk-foot{display:flex;gap:8px;margin-top:auto;padding-top:12px}
.v7-pk-q{display:flex;align-items:center;border:1.5px solid var(--v7-line);border-radius:999px;height:46px;flex:none;box-sizing:border-box}
.v7-pk-q button{border:0;background:transparent;cursor:pointer;width:32px;height:100%;font-size:17px;color:var(--ink);padding:0}
.v7-pk-q input{width:20px;border:0;text-align:center;font:inherit;font-size:14px;background:transparent;color:var(--ink);-moz-appearance:textfield;padding:0}
.v7-pk-q input::-webkit-outer-spin-button,.v7-pk-q input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.v7-pk-add{flex:1;border:0;border-radius:999px;background:var(--ink);color:#fff;font:inherit;font-size:13.5px;font-weight:600;height:46px;cursor:pointer;white-space:nowrap;padding:0 10px}
.v7-pk-more{font-size:13px;color:var(--green-dk);font-weight:600;text-align:center;margin-top:10px;text-decoration:none}
.v7-sheet-dim{position:fixed;inset:0;background:rgba(13,22,32,.4);z-index:118}
.v7-sheet-dim[hidden]{display:none}

/* ---- Cart drawer --------------------------------------------------------------- */
.v7-cd-wrap{position:fixed;inset:0;z-index:120}
.v7-cd-wrap[hidden]{display:none}
.v7-cd-bg{position:absolute;inset:0;background:rgba(13,22,32,.35);opacity:0;transition:opacity .25s}
.v7-cd{position:absolute;top:0;right:0;bottom:0;width:400px;max-width:100%;background:#fff;box-shadow:-20px 0 40px -20px rgba(0,0,0,.3);transform:translateX(100%);transition:transform .25s ease;overflow:auto;outline:0}
.v7-cd-wrap.is-in .v7-cd{transform:none}.v7-cd-wrap.is-in .v7-cd-bg{opacity:1}
.v7-cd-body{padding:20px;display:flex;flex-direction:column;gap:16px;min-height:100%;box-sizing:border-box}
.v7-cd-top{display:flex;justify-content:space-between;align-items:center}
.v7-cd-top b{font-size:18px;letter-spacing:-.02em}
.v7-cd-item{display:grid;grid-template-columns:64px 1fr auto;gap:12px;align-items:center;padding-bottom:16px;border-bottom:1px solid var(--v7-line)}
.v7-cd-ph{width:64px;height:64px;border-radius:10px;background:var(--stone);display:grid;place-items:center;overflow:hidden}
.v7-cd-ph.is-sm{width:48px;height:48px}
.v7-cd-ph img{width:100%;height:auto;mix-blend-mode:multiply}
.v7-cd-n{display:grid;gap:2px;min-width:0}.v7-cd-n b{font-size:14.5px}.v7-cd-n small{font-size:12.5px;color:var(--v7-muted)}
.v7-cd-p{font-weight:600}
.v7-cd-ship{font-size:13.5px;color:var(--v7-body)}
.v7-free-bar{height:5px;background:var(--stone);border-radius:999px;margin-top:8px;overflow:hidden}
.v7-free-bar i{display:block;height:100%;background:var(--green)}
.v7-cd-up{background:var(--cream);border-radius:12px;padding:14px;display:grid;gap:10px}
.v7-cd-up .v7-k{margin-bottom:0}
.v7-cd-upi{display:grid;grid-template-columns:48px 1fr auto;gap:12px;align-items:center;margin:0}
.v7-cd-addb{border:1.5px solid var(--ink);background:#fff;border-radius:999px;padding:0 16px;height:40px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;color:var(--ink)}
.v7-cd-sub{display:flex;justify-content:space-between;font-size:16px;margin-top:auto;padding-top:14px;border-top:1px solid var(--v7-line)}
.v7-cd-btns{display:grid;grid-template-columns:1fr 1.4fr;gap:10px}
.v7-cd-note{font-size:12.5px;color:var(--v7-muted);text-align:center;margin:0}
.v7-cd-empty{color:var(--v7-muted)}

/* ---- Footer -------------------------------------------------------------- */
.v7-ft{--fb:#0f1b28;--fb2:#0b1520;--ft:#e6ebf0;--fm:#93a3b3;--fl:rgba(255,255,255,.1);--fin:rgba(255,255,255,.07);background:var(--fb);color:var(--ft);margin-top:72px;font-size:14.5px}
:root[data-footer="navy"] .v7-ft{--fb:#203d5b;--fb2:#1a3350;--ft:#e8eef4;--fm:#a9b9c9;--fl:rgba(255,255,255,.12);--fin:rgba(255,255,255,.08)}
:root[data-footer="green"] .v7-ft{--fb:#1f4a36;--fb2:#1a3f2e;--ft:#eaf3ee;--fm:#a8c6b5;--fl:rgba(255,255,255,.13);--fin:rgba(255,255,255,.08)}
:root[data-footer="light"] .v7-ft{--fb:#f3f5f7;--fb2:#eaeef2;--ft:#16283b;--fm:#5f6b76;--fl:#dfe4e9;--fin:#fff}
:root[data-footer="white"] .v7-ft{--fb:#ffffff;--fb2:#f6f8fa;--ft:#16283b;--fm:#5f6b76;--fl:#e3e7eb;--fin:#f3f5f7;border-top:1px solid #e3e7eb}
.v7-ft a{color:inherit;text-decoration:none}
.v7-ft-trust{background:var(--fb2);border-bottom:1px solid var(--fl)}
.v7-ft-trust-in{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding-top:24px;padding-bottom:24px}
.v7-ft-trust-in>div{display:flex;gap:12px;align-items:center}
.v7-ft-trust svg{width:26px;height:26px;stroke:#5cc08a;fill:none;stroke-width:1.6;flex:none}
:root[data-footer="light"] .v7-ft-trust svg,:root[data-footer="white"] .v7-ft-trust svg{stroke:var(--green)}
.v7-ft-trust b{display:block;font-size:14px;font-weight:600}
.v7-ft-trust small{display:block;font-size:12.5px;color:var(--fm)}
.v7-ft-main{display:grid;grid-template-columns:1.4fr .9fr 1.1fr 1.2fr 1.5fr;gap:36px;padding-top:48px;padding-bottom:36px}
.v7-ft-brand .v7-ft-logo,.v7-ft-brand img{height:36px!important;width:auto!important;margin-bottom:16px;display:block}
.v7-ft-brand p{color:var(--fm);font-size:14.5px;max-width:300px;margin:0 0 18px}
.v7-ft-contact{list-style:none;display:grid;gap:10px;font-size:14px;margin:0;padding:0}
.v7-ft-contact li{display:flex;gap:10px;align-items:flex-start;min-width:0;overflow-wrap:anywhere}
.v7-ft-contact address{font-style:normal}
.v7-ft-contact svg{width:17px;height:17px;stroke:var(--fm);fill:none;stroke-width:1.6;flex:none;margin-top:2px}
.v7-ft h2{font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--fm);margin:0 0 14px;line-height:1.4}
.v7-ft-col ul{list-style:none;display:grid;gap:10px;font-size:14.5px;margin:0;padding:0}
.v7-ft-col a:hover{text-decoration:underline;text-underline-offset:3px}
.v7-ft-pay{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:6px}
.v7-pm{display:flex;align-items:center;justify-content:center;height:40px;padding:0 6px;border-radius:7px;background:#fff;border:1px solid #e3e7eb;min-width:0;box-sizing:border-box}
.v7-pm img{display:block;max-width:100%;max-height:20px;width:auto;height:auto;object-fit:contain}
.v7-pm-zelle img{max-height:28px}
.v7-pm span{font-size:13px;font-weight:600;color:#16283b;white-space:nowrap}
.v7-pm.is-soon{opacity:.6}
.v7-ft-notice{border-top:1px solid var(--fl);padding:24px 0}
.v7-ft-notice h2{margin-bottom:8px}
.v7-ft-notice p{font-size:12.5px;line-height:1.6;color:var(--fm);margin:0;max-width:1100px}
.v7-ft-bot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid var(--fl);padding-top:18px;padding-bottom:26px;font-size:13px;color:var(--fm)}
.v7-ft-bot p{margin:0}
:root[data-card] .site-footer{display:none}

/* ---- Shop and class pages (existing markup, new look) --------------------- */
:root[data-card] main.pclass{max-width:1360px;margin:0 auto;padding:0 28px 30px;box-sizing:border-box;background:transparent}
:root[data-card] .pclass-crumb{font-size:13px;color:var(--v7-muted);padding:22px 0;margin:0}
:root[data-card] .pclass-crumb a{color:var(--v7-muted);text-decoration:none}
:root[data-card] .pclass-crumb a:hover{color:var(--ink)}
:root[data-card] .pclass-crumb-current{color:var(--ink)}
:root[data-card] .pclass-head{display:block;margin:0 0 18px;padding:0;background:none;border:0}
:root[data-card] .pclass-h1{font-size:clamp(34px,4vw,52px)!important;font-weight:600!important;letter-spacing:-.035em!important;line-height:1.04!important;margin:0 0 14px!important;color:var(--ink)!important;text-transform:none!important}
:root[data-card] .pclass-lead,:root[data-card] .pclass-intro p{color:var(--v7-body)!important;max-width:640px;font-size:16px!important;line-height:1.55}
:root[data-card] .shop-bar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:0 0 14px}
:root[data-card] .glass-ctl{background:none!important;box-shadow:none!important;border:0!important;backdrop-filter:none!important}
:root[data-card] .shop-seg{display:flex;background:var(--cream)!important;border-radius:999px;padding:4px!important;gap:0}
:root[data-card] .shop-seg-item{padding:8px 16px;border-radius:999px;font-size:13.5px;color:var(--ink);text-decoration:none;background:transparent;border:0;min-height:0}
:root[data-card] .shop-seg-item.is-on{background:#fff;box-shadow:0 1px 3px rgba(22,40,59,.15);font-weight:600;color:var(--ink)}
:root[data-card] .shop-sort{display:flex;align-items:center;gap:8px;border:1.5px solid var(--v7-line)!important;border-radius:999px;padding:0 6px 0 16px!important;height:44px;box-sizing:border-box;background:#fff!important}
:root[data-card] .shop-sort-label{font-size:13px;color:var(--v7-muted)}
:root[data-card] .shop-sort-select{border:0;background:transparent;font:inherit;font-size:14px;color:var(--ink);height:40px}
:root[data-card] .shop-strip{margin:0 0 20px;background:none;border:0;padding:0}
:root[data-card] .shop-strip-label{display:none}
:root[data-card] .shop-strip-row{display:flex;gap:8px;flex-wrap:wrap}
:root[data-card] .shop-strip a,:root[data-card] .pclass-siblings a{border:1px solid var(--v7-line)!important;border-radius:999px;padding:7px 14px;font-size:13.5px;background:#fff!important;color:var(--ink)!important;text-decoration:none;box-shadow:none!important}
:root[data-card] .shop-strip a.is-active,:root[data-card] .shop-strip a[aria-current],:root[data-card] .pclass-siblings a[aria-current]{background:var(--ink)!important;color:#fff!important;border-color:var(--ink)!important}
:root[data-card] .pclass-countbar,:root[data-card] .pclass-count{font-size:13px;color:var(--v7-muted);background:none;border:0;padding:0;margin:0 0 16px}
:root[data-card] .shop-pager a,:root[data-card] .shop-pager span{border-radius:999px}

/* ---- Home (views/pcd/home.php) -------------------------------------------- */
.v7-hero{padding:22px 0 0}
.v7-hero-panel{position:relative;border-radius:var(--r);overflow:hidden;background:radial-gradient(120% 90% at 70% 40%,var(--hero-a) 0%,var(--hero-b) 60%,var(--hero-c) 100%);min-height:min(560px,calc(100svh - 160px));display:grid;grid-template-columns:1.05fr 1fr;align-items:center}
.v7-hero-copy{padding:64px 0 64px 64px;position:relative;z-index:2}
.v7-hero-copy .v7-eyebrow{color:var(--hero-body)}
.v7-hero-copy h1{font-size:clamp(38px,4.8vw,66px);line-height:1.02;letter-spacing:-.035em;font-weight:600;margin:18px 0 22px;color:var(--hero-ink)}
.v7-hero-copy h1 em{color:var(--green)}
:root[data-card="navy-hero"] .v7-hero-copy h1 em{color:#7fd0a3}
.v7-hero-copy p{max-width:440px;color:var(--hero-body);font-size:17px;margin:0 0 32px}
.v7-ctas{display:grid;grid-template-columns:repeat(2,max-content);gap:12px}
:root[data-card="navy-hero"] .v7-hero .v7-btn-ink{background:#fff;color:var(--ink)}
:root[data-card="navy-hero"] .v7-hero .v7-btn-line{border-color:#fff;color:#fff}
.v7-hero-vials{position:relative;height:100%;min-height:520px}
.v7-hero-vials img{position:absolute;mix-blend-mode:multiply;filter:contrast(1.04);height:auto}
:root[data-card="navy-hero"] .v7-hero-vials img{mix-blend-mode:normal;filter:drop-shadow(0 30px 40px rgba(0,0,0,.35))}
.v7-hv1{width:58%;left:2%;bottom:2%}.v7-hv2{width:70%;left:24%;bottom:-4%;z-index:2}.v7-hv3{width:52%;right:-6%;bottom:6%}
.v7-hero-stat{position:absolute;right:28px;top:28px;background:rgba(255,255,255,.88);border-radius:12px;padding:14px 18px;z-index:3;display:flex;gap:14px;align-items:center}
.v7-hero-stat b{font-weight:600;font-size:30px;line-height:1;letter-spacing:-.035em;color:var(--ink)}
.v7-hero-stat span{font-size:12.5px;color:var(--v7-muted);line-height:1.35;white-space:nowrap}
.v7-trust-row{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--v7-line);list-style:none;margin:0;padding:0}
.v7-trust-row li{display:flex;gap:12px;align-items:center;padding:22px 8px;font-size:14px;color:#33414e;white-space:nowrap;min-width:0}
.v7-trust-row svg{width:22px;height:22px;flex:none;stroke:var(--green);fill:none;stroke-width:1.6}
.v7-cat{padding:56px 0 0}
.v7-cat-grid{display:grid;grid-template-columns:minmax(260px,1fr) 3fr;gap:22px;align-items:start}
.v7-cat-intro{align-self:stretch;background:#fff;border:1px solid var(--v7-line);border-radius:18px;box-shadow:0 1px 2px rgba(22,40,59,.05),0 14px 32px -20px rgba(22,40,59,.28);padding:32px;display:flex;flex-direction:column;box-sizing:border-box}
.v7-cat-intro h2{font-weight:600;font-size:34px;line-height:1.08;letter-spacing:-.035em;margin:14px 0 18px;color:var(--ink)}
.v7-cat-intro p{color:var(--v7-muted);font-size:15px;max-width:300px;margin:0 0 22px}
.v7-rail{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:start}
/* Category rows (2026-11-03): the CARDS set the row height. Every card in a row is the same
   natural height (name and size line one line each), and the intro takes the row's height
   without adding to it (contain:size), with its content trimmed to fit: eyebrow and title one
   line, description three, "Shop all N", one row of chips. Phones stack it at natural height. */
.v7-rail>.v7-sc{align-self:start}
.v7-rail .v7-sc-t h2,.v7-rail .v7-sc-t h3,.v7-rail .v7-sc-sz{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v7-cat-foot{margin-top:auto;padding-top:16px;border-top:1px solid var(--v7-line);display:grid;gap:10px;container-type:inline-size;container-name:catfoot;min-width:0}
.v7-cat-intro>div:first-child{min-width:0}
.v7-cat-intro .v7-eyebrow{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v7-cat-intro h2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v7-cat-intro p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
@media (min-width:821px){
  .v7-cat-intro{contain:size;align-self:stretch;overflow:hidden;padding:28px}
  .v7-cat-intro h2{font-size:30px;margin:10px 0 12px}
  .v7-cat-intro p{font-size:14px;line-height:1.5;max-width:none;margin:0 0 14px}
}
.v7-cat-k{font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--v7-muted)}
.v7-cat-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:nowrap;gap:5px;min-width:0;overflow:hidden}
.v7-cat-chips li{flex:0 1 auto;min-width:0;display:flex}
.v7-cat-chips li.v7-cm{flex:none}
.v7-cat-chips li.v7-cf1,.v7-cat-chips li.v7-cf2,.v7-cat-chips li.v7-cf3,.v7-cat-chips li.v7-cf4,.v7-cat-chips li.v7-cf5,.v7-cat-chips li.v7-cm1,.v7-cat-chips li.v7-cm2,.v7-cat-chips li.v7-cm3,.v7-cat-chips li.v7-cm4,.v7-cat-chips li.v7-cm5{display:none}
@container catfoot (min-width:230px){.v7-cat-chips li.v7-cf1,.v7-cat-chips li.v7-cm1{display:flex}.v7-cat-chips li.v7-cm0{display:none}}
@container catfoot (min-width:260px){.v7-cat-chips li.v7-cf2,.v7-cat-chips li.v7-cm2{display:flex}.v7-cat-chips li.v7-cm1{display:none}}
@container catfoot (min-width:300px){.v7-cat-chips li.v7-cf3,.v7-cat-chips li.v7-cm3{display:flex}.v7-cat-chips li.v7-cm2{display:none}}
@container catfoot (min-width:340px){.v7-cat-chips li.v7-cf4,.v7-cat-chips li.v7-cm4{display:flex}.v7-cat-chips li.v7-cm3{display:none}}
@container catfoot (min-width:600px){.v7-cat-chips li.v7-cf5,.v7-cat-chips li.v7-cm5{display:flex}.v7-cat-chips li.v7-cm4{display:none}}
.v7-cat-chips a{display:inline-flex;align-items:center;min-height:26px;padding:0 10px;border-radius:999px;border:1px solid var(--v7-line);background:var(--cream);color:var(--ink);font-size:12px;font-weight:500;text-decoration:none;white-space:nowrap;max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;display:block;line-height:26px;box-sizing:border-box}
.v7-cat-chips a:hover{border-color:var(--ink)}
.v7-cat-chips a.is-more{background:#fff;color:var(--green-dk);font-weight:600}
.v7-marquee{margin-top:64px;background:var(--ink);color:#e8edf2;overflow:hidden;white-space:nowrap;padding:15px 0}
.v7-marquee .v7-track{display:inline-flex;gap:56px;animation:v7slide 38s linear infinite;font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.v7-marquee .v7-track span:before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--green);margin-right:14px;vertical-align:middle}
@keyframes v7slide{to{transform:translateX(-50%)}}
.v7-science{padding:72px 0 0}
.v7-science-panel{background:var(--cream);border-radius:var(--r);padding:56px;display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center}
.v7-science h2{font-weight:600;letter-spacing:-.035em;font-size:clamp(30px,3.4vw,46px);line-height:1.08;margin:14px 0 18px;color:var(--ink)}
.v7-science .v7-lead{color:var(--v7-body);max-width:480px;margin:0 0 30px}
.v7-steps{display:grid;border-top:1px solid var(--v7-line);margin:0 0 30px;padding:0;list-style:none}
.v7-steps li{display:grid;grid-template-columns:46px 1fr;gap:10px;padding:16px 0;border-bottom:1px solid var(--v7-line)}
.v7-steps b{font-weight:600;font-size:12px;color:var(--green-dk);padding-top:3px}
.v7-steps h3{font-size:15.5px;font-weight:600;margin:0}
.v7-steps p{font-size:14px;color:var(--v7-muted);margin:0}
.v7-home-coa{position:relative;padding:20px 0 20px 40px}
.v7-home-coa img{width:78%;height:auto;border-radius:8px;background:#fff;box-shadow:0 30px 60px -30px rgba(22,40,59,.5);transform:rotate(-2deg)}
.v7-home-coa-chip{position:absolute;right:0;bottom:30px;background:#fff;border-radius:14px;padding:18px;display:grid;gap:6px;box-shadow:0 20px 50px -24px rgba(22,40,59,.45);font-size:13px;color:var(--v7-muted);min-width:240px}
.v7-home-coa-chip b{font-size:17px;color:var(--ink);letter-spacing:-.02em}
.v7-home-coa-chip .v7-btn{width:max-content;margin-top:6px}
.v7-classes{padding:72px 0 0}
.v7-sec-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:26px;gap:20px;flex-wrap:wrap}
.v7-sec-head h2{font-weight:600;letter-spacing:-.035em;font-size:clamp(30px,3vw,42px);line-height:1.1;margin:0;color:var(--ink)}
.v7-class-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.v7-class{background:var(--stone);border-radius:var(--r);padding:22px;min-height:168px;display:flex;flex-direction:column;justify-content:space-between;transition:background .2s;text-decoration:none;color:var(--ink);box-sizing:border-box}
.v7-class:hover{background:var(--stone-2)}
.v7-class .v7-n{font-size:11.5px;font-weight:600;color:var(--v7-muted);letter-spacing:.08em;text-transform:uppercase}
.v7-class h3{font-weight:600;font-size:21px;line-height:1.15;letter-spacing:-.02em;margin:0}
.v7-class .v7-row{display:flex;justify-content:space-between;align-items:end;gap:10px}
.v7-arrow{width:34px;height:34px;border-radius:50%;border:1px solid var(--v7-line);display:grid;place-items:center;flex:none}
.v7-arrow svg{width:14px;height:14px;stroke:var(--ink);fill:none;stroke-width:1.8}
.v7-promise{margin:72px 0 0}
.v7-promise-panel{background:var(--navy);color:#eef2f6;border-radius:var(--r);padding:52px 56px;display:grid;grid-template-columns:1fr 1.6fr;gap:40px;align-items:center}
.v7-promise h2{font-weight:600;font-size:32px;line-height:1.1;letter-spacing:-.035em;margin:0;color:#fff}
.v7-promise ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:16px 34px;font-size:15px;margin:0;padding:0}
.v7-promise li{display:flex;gap:12px}
.v7-promise li svg{width:18px;height:18px;flex:none;stroke:#8fd1ac;fill:none;stroke-width:2;margin-top:3px}
.v7-seo{padding:72px 0 0}
.v7-seo-in{max-width:860px;color:var(--v7-body);font-size:15.5px;line-height:1.7}
.v7-seo-in h2{font-size:26px;font-weight:600;letter-spacing:-.02em;color:var(--ink);margin:0 0 12px}
.v7-seo-in h3{font-size:18px;font-weight:600;color:var(--ink);margin:24px 0 8px}

/* ---- COA library (views/pcd/coa_library.php) ------------------------------ */
.v7-crumbs{font-size:13px;color:var(--v7-muted);padding:22px 0;margin:0}
.v7-crumbs a{color:var(--v7-muted);text-decoration:none}.v7-crumbs a:hover{color:var(--ink)}
.v7-cl-hero{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:end;padding:10px 0 28px;border-bottom:1px solid var(--v7-line)}
.v7-cl-h{font-size:clamp(34px,4vw,52px);font-weight:600;letter-spacing:-.035em;line-height:1.04;margin:12px 0 14px;color:var(--ink)}
.v7-cl-p{color:var(--v7-body);max-width:560px;margin:0}
.v7-cl-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0}
.v7-cl-stats div{background:var(--cream);border-radius:12px;padding:16px}
.v7-cl-stats dt{font-size:12.5px;color:var(--v7-muted)}
.v7-cl-stats dd{margin:0;font-size:26px;font-weight:600;letter-spacing:-.03em;order:-1}
.v7-cl-stats div{display:flex;flex-direction:column}
.v7-cl-search{display:flex;gap:12px;margin:24px 0 14px}
.v7-cl-in{flex:1;display:flex;gap:10px;align-items:center;border:1.5px solid var(--v7-line);border-radius:999px;padding:0 18px;height:52px;background:#fff;box-sizing:border-box}
.v7-cl-in svg{width:18px;height:18px;stroke:var(--v7-muted);fill:none;stroke-width:1.7;flex:none}
.v7-cl-in input{flex:1;border:0;outline:0;font:inherit;font-size:16px;min-width:0;background:transparent;color:var(--ink)}
.v7-cl-sort{display:flex;align-items:center;gap:8px;border:1.5px solid var(--v7-line);border-radius:999px;padding:0 10px 0 18px;font-size:14px;white-space:nowrap;height:52px;box-sizing:border-box;background:#fff}
.v7-cl-sort select{border:0;background:transparent;font:inherit;font-size:14px;color:var(--ink);height:40px}
.v7-chips{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 24px}
.v7-fchip{border:1px solid var(--v7-line);border-radius:999px;padding:7px 14px;font-size:13.5px;cursor:pointer;background:#fff;color:var(--ink);font-family:inherit;min-height:36px;text-decoration:none}
.v7-fchip.is-on{background:var(--ink);color:#fff;border-color:var(--ink)}
.v7-cl-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.v7-cc{border:1px solid var(--v7-line);border-radius:14px;overflow:hidden;background:#fff;display:flex;flex-direction:column;min-width:0}
.v7-cc[hidden]{display:none}
.v7-cc-ph{background:var(--stone);padding:18px 18px 0;display:block;height:210px;overflow:hidden;box-sizing:border-box}
.v7-cc-ph img{width:100%;height:auto;border-radius:6px 6px 0 0;box-shadow:0 10px 24px -14px rgba(22,40,59,.45);background:#fff;transition:transform .3s;display:block}
.v7-cc:hover .v7-cc-ph img{transform:translateY(-4px)}
.v7-cc-doc{display:grid;place-items:center;height:100%;color:var(--v7-muted);font-size:12px;font-weight:600;letter-spacing:.1em}
.v7-cc-b{padding:16px;display:grid;gap:10px;flex:1}
.v7-cc-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.v7-cc-top h2{font-size:15px;letter-spacing:-.01em;margin:0;font-weight:600;color:var(--ink)}
.v7-cc dl{display:grid;grid-template-columns:auto 1fr;gap:5px 12px;font-size:13px;margin:0}
.v7-cc dt{color:var(--v7-muted)}
.v7-cc dd{text-align:right;font-weight:500;font-variant-numeric:tabular-nums;margin:0;overflow-wrap:anywhere}
.v7-cc-act{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:auto}
.v7-cc-prod{font-size:13px;font-weight:600;color:var(--green-dk);text-decoration:none}
.v7-cl-none{padding:30px 0;color:var(--v7-muted)}
.v7-cl-help{margin-top:28px;background:var(--cream);border-radius:14px;padding:22px 26px;display:grid;grid-template-columns:1fr 120px 1fr;gap:24px;align-items:center}
.v7-cl-help img{width:120px;height:auto;mix-blend-mode:multiply}
.v7-cl-help b{display:block;font-size:15px;margin-bottom:4px}
.v7-cl-help span{font-size:14px;color:var(--v7-muted)}

/* ---- Product page (views/product.php markup, new look) -------------------- */
.v7-spec{border:1px solid var(--v7-line);border-radius:12px;overflow:hidden;margin:22px 0}
.v7-spec h2{font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:14px 18px;background:var(--cream);border-bottom:1px solid var(--v7-line);display:flex;justify-content:space-between;margin:0;color:var(--v7-muted)}
.v7-spec h2 a{color:var(--navy);text-transform:none;letter-spacing:.02em;font-size:13px;text-decoration:none}
.v7-spec dl{display:grid;grid-template-columns:auto 1fr;margin:0}
.v7-spec dt,.v7-spec dd{padding:12px 18px;border-bottom:1px solid var(--v7-line);font-size:14px;margin:0}
.v7-spec dt{color:var(--v7-muted)}
.v7-spec dd{text-align:right;font-weight:500;overflow-wrap:anywhere}
.v7-spec dl>*:nth-last-child(-n+2){border-bottom:0}
.v7-pdp-coa{display:grid;grid-template-columns:110px 1fr;gap:18px;align-items:center;border:1px solid var(--v7-line);border-radius:12px;padding:14px;margin:0 0 22px;background:var(--cream)}
.v7-pdp-coa img{width:110px;height:auto;border-radius:6px;background:#fff;box-shadow:0 10px 22px -14px rgba(22,40,59,.45)}
.v7-pdp-coa-t{display:grid;gap:5px;font-size:13.5px;color:var(--v7-muted);min-width:0}
.v7-pdp-coa-t b{font-size:17px;color:var(--ink);letter-spacing:-.02em}
.v7-pdp-coa-btns{display:flex;gap:14px;align-items:center;margin-top:6px;flex-wrap:wrap}
.v7-pdp-band{margin-top:80px}
.v7-how{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.v7-how div{background:var(--cream);border-radius:var(--r);padding:30px}
.v7-how .v7-num{font-size:12px;color:var(--green-dk);letter-spacing:.1em;font-weight:600}
.v7-how h3{font-weight:600;font-size:21px;letter-spacing:-.02em;margin:30px 0 8px}
.v7-how p{color:var(--v7-muted);font-size:14.5px;margin:0}

/* ---- Responsive ----------------------------------------------------------- */
@media (max-width:1180px){
  .v7-mega .v7-mg{grid-template-columns:200px 1fr}.v7-mg-coa{display:none}
  .v7-ft-main{grid-template-columns:1fr 1fr 1fr}.v7-ft-brand,.v7-ft-pay-col{grid-column:1/-1}
  .v7-ft-trust-in{grid-template-columns:1fr 1fr}
  :root[data-card] .pgrid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .v7-cl-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1080px){
  .v7-rail{grid-template-columns:repeat(2,minmax(0,1fr))}.v7-rail>.v7-sc:nth-child(3){display:none}
  .v7-class-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .v7-science-panel{grid-template-columns:1fr;padding:40px}
  .v7-promise-panel{grid-template-columns:1fr}
}
@media (max-width:1023px){
  .v7-menu,.v7-hide-m{display:none!important}
  .v7-burger{display:grid}
  .v7-nav{gap:14px}
}
@media (max-width:820px){
  .v7-wrap{padding:0 16px}
  :root[data-card] main.pclass{padding:0 16px 24px}
  .v7-nav{height:60px}
  .v7-logo img,.v7-logo .v7-logo-img{height:34px!important}
  .v7-announce{font-size:12px;padding:8px 12px}
  .v7-hero-panel{grid-template-columns:minmax(0,1fr);min-height:0}
  .v7-hero-copy{padding:36px 24px 0}
  /* Side by side when both labels fit on one line, otherwise each on its own row at full width:
     a wrapping flex row whose buttons grow, labels never wrap (2026-11-03). */
  .v7-ctas{display:flex;flex-wrap:wrap;gap:12px}
  .v7-ctas .v7-btn{flex:1 0 auto;padding:0 14px;font-size:12px;letter-spacing:.04em;white-space:nowrap}
  .v7-hero-vials{min-height:340px}
  .v7-hero-stat{top:12px;left:24px;right:auto}
  /* Phones: the three vials as one group centred in the panel (2026-11-03). Each vial is painted at
     the centre of its square image, so equal side boxes equidistant from a centred front box make the
     painted group symmetric; the sides overlap the front vial by the same amount. */
  .v7-hv2{width:64%;left:18%;right:auto;bottom:-2%}
  .v7-hv1{width:52%;left:9%;right:auto;bottom:3%}
  .v7-hv3{width:52%;right:9%;left:auto;bottom:3%}
  .v7-trust-row{grid-template-columns:1fr}
  .v7-trust-row li{padding:14px 4px;font-size:14px}
  .v7-trust-row li+li{border-top:1px solid var(--v7-line)}
  .v7-cat-grid{grid-template-columns:minmax(0,1fr)}
  .v7-cat-intro{min-width:0}
  .v7-cat-intro{min-height:0;padding:28px;align-self:start;contain:none;overflow:visible}
  .v7-rail{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .v7-science-panel{padding:28px 20px;gap:32px}
  .v7-home-coa{padding:0}.v7-home-coa img{width:85%}
  .v7-home-coa-chip{position:relative;right:auto;bottom:auto;margin:-60px 0 0 auto;min-width:0;width:85%;box-sizing:border-box}
  .v7-promise-panel{padding:34px 24px}
  .v7-promise ul{grid-template-columns:1fr}
  .v7-class-grid{gap:10px}
  .v7-class{padding:16px;min-height:140px}.v7-class h3{font-size:18px}.v7-arrow{display:none}
  :root[data-card] .pgrid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:18px 10px!important}
  .v7-qa{width:38px;height:38px;right:8px;bottom:8px}.v7-qa svg{width:17px;height:17px}
  .v7-sc-ph{margin:7px 7px 0;border-radius:10px}
  .v7-sc-info{padding:11px 11px 12px}
  .v7-sc-t{margin-bottom:8px}.v7-sc-sz{font-size:12px}.v7-sz-r{display:none}
  .v7-sc-bot{padding-top:8px}
  .v7-tag{top:8px;left:8px;font-size:11px;padding:3px 8px}
  .v7-sc-t h3,.v7-sc-t h2{font-size:14px}.v7-sc-pr{font-size:14.5px}.v7-sc-lot{display:none}
  .v7-picker.is-sheet{position:fixed;inset:auto 0 0 0;border-radius:20px 20px 0 0;padding:10px 16px 22px;z-index:121;box-shadow:0 -20px 60px rgba(13,22,32,.35);max-height:80vh;overflow-y:auto}
  .v7-picker.is-sheet .v7-pk-grab{display:block;width:40px;height:4px;border-radius:9px;background:var(--v7-line);margin:0 auto 12px}
  .v7-picker.is-sheet .v7-pk-thumb{display:grid;place-items:center;width:64px;height:64px;border-radius:10px;background:var(--stone);overflow:hidden;flex:none}
  .v7-picker.is-sheet .v7-pk-thumb img{width:100%;height:auto;mix-blend-mode:multiply}
  .v7-picker.is-sheet .v7-pk-name b{font-size:17px}
  .v7-picker.is-sheet .v7-pk-name small{display:block}
  .v7-picker.is-sheet .v7-pk-k{display:block}
  .v7-picker.is-sheet .v7-pk-rows{grid-template-columns:1fr 1fr;gap:8px}
  .v7-picker.is-sheet .v7-pk-row{padding:11px 12px;font-size:14.5px;grid-template-columns:16px 1fr;row-gap:2px}
  .v7-picker.is-sheet .v7-pk-p{grid-column:2;font-weight:500;color:var(--v7-muted)}
  .v7-picker.is-sheet .v7-pk-foot{margin-top:14px}
  .v7-ft-main{grid-template-columns:1fr 1fr;gap:28px 18px}
  .v7-ft-trust-in{grid-template-columns:1fr;gap:14px}
  .v7-ft-col:nth-of-type(4){grid-column:auto}
  .v7-cl-hero{grid-template-columns:1fr}
  .v7-cl-stats dd{font-size:22px}
  .v7-cl-grid{grid-template-columns:1fr 1fr;gap:10px}
  .v7-cc-ph{height:150px;padding:10px 10px 0}.v7-cc-b{padding:12px}.v7-cc dl{font-size:12px;grid-template-columns:1fr}.v7-cc dd{text-align:left}
  .v7-cc-act{flex-direction:column;align-items:stretch;gap:8px}.v7-cc-act .v7-btn{justify-content:center}
  .v7-cl-help{grid-template-columns:1fr}.v7-cl-help img{display:none}
  .v7-pdp-coa{grid-template-columns:84px 1fr}.v7-pdp-coa img{width:84px}
  .v7-how{grid-template-columns:1fr}
  :root[data-card] .shop-seg-item{padding:7px 11px;font-size:12.5px}
}
@media (max-width:400px){
  .v7-pm{height:36px;padding:0 4px}
  .v7-pm img{max-height:16px}.v7-pm-zelle img{max-height:24px}
}
@media (prefers-reduced-motion:reduce){
  .v7-marquee .v7-track{animation:none}
  .v7-cd,.v7-cd-bg,.v7-sc-img img,.v7-mt-ph img{transition:none!important}
}

/* ---- Fixes after the first render ------------------------------------------ */
:root[data-card] body::before,:root[data-card] body::after{background:none!important;display:none!important}
:root[data-card] .shop-strip-arr,:root[data-card] .shop-class-dot,:root[data-card] .shop-class-count,:root[data-card] .cbc-trigger,:root[data-card] .shop-classes-btn,:root[data-card] .shop-class-form{display:none!important}
:root[data-card] .shop-strip-rail{display:flex!important;flex-wrap:wrap;gap:8px;overflow:visible!important;mask:none!important;-webkit-mask:none!important;padding:0!important}
:root[data-card] .shop-strip-row{display:block!important}
:root[data-card] a.shop-class{display:inline-flex;align-items:center;border:1px solid var(--v7-line)!important;border-radius:999px!important;padding:7px 14px!important;font-size:13.5px!important;font-weight:400!important;background:#fff!important;color:var(--ink)!important;text-decoration:none;box-shadow:none!important;min-height:36px;box-sizing:border-box;white-space:nowrap}
:root[data-card] a.shop-class:hover{border-color:var(--ink)!important}
:root[data-card] a.shop-class[aria-current]{background:var(--ink)!important;color:#fff!important;border-color:var(--ink)!important}
:root[data-card] .pclass-countbar{display:block}
:root[data-card] .shop-strip-rail{flex-wrap:nowrap!important;overflow-x:auto!important;scrollbar-width:none;padding-bottom:2px!important;scroll-snap-type:x proximity}
:root[data-card] .shop-strip-rail::-webkit-scrollbar{display:none}
:root[data-card] .shop-strip-rail a.shop-class{flex:none;scroll-snap-align:start}
:root[data-card] .shop-seg-item{white-space:nowrap}
:root[data-card] .shop-bar{justify-content:space-between;flex-wrap:nowrap}
@media (max-width:820px){
  .v7-announce span:not(:first-child){display:none}
  :root[data-card] .shop-bar{gap:8px}
  :root[data-card] .shop-sort{padding:0 4px 0 12px!important;flex:none}
  :root[data-card] .shop-sort-label{display:none}
  :root[data-card] .shop-sort-select{max-width:132px;font-size:13px}
}
@media (max-width:380px){:root[data-card] .shop-seg-item{padding:7px 9px;font-size:12px}}
:root[data-card] .shop-bar{flex-direction:row!important;align-items:center!important}
:root[data-card] .shop-seg,:root[data-card] .shop-sort{margin:0!important;width:auto!important}
:root[data-card] .shop-sort{flex:0 1 auto!important;min-width:0}
@media (max-width:380px){:root[data-card] .shop-sort-select{max-width:112px}}
.v7-cd-tot{display:flex;justify-content:space-between;font-size:16px;margin-top:-8px}
.v7-cd-tot b{font-weight:600}
html.v7-locked .pchat{visibility:hidden}
:root[data-card] .v7-header a,:root[data-card] .v7-drawer a,:root[data-card] .v7-ft a{text-decoration:none}

/* Home: the indexable copy, plainer dress */
.v7-seo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.v7-seo-card{background:var(--cream);border-radius:var(--r);padding:30px}
.v7-seo-card h2{font-size:21px;font-weight:600;letter-spacing:-.02em;line-height:1.2;margin:10px 0 10px;color:var(--ink)}
.v7-seo-card p{color:var(--v7-body);font-size:14.5px;line-height:1.65;margin:0}
.v7-about,.v7-faq{padding:72px 0 0}
.v7-about-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.v7-about-card{border:1px solid var(--v7-line);border-radius:var(--r);padding:28px;background:#fff}
.v7-about-card h3{font-size:18px;font-weight:600;letter-spacing:-.01em;margin:0 0 10px;color:var(--ink)}
.v7-about-card p{color:var(--v7-body);font-size:14.5px;line-height:1.7;margin:0}
.v7-acc{border-top:1px solid var(--v7-line);max-width:900px}
.v7-acc details{border-bottom:1px solid var(--v7-line)}
.v7-acc summary{list-style:none;cursor:pointer;padding:18px 0;font-size:15.5px;font-weight:500;display:flex;justify-content:space-between;gap:16px;color:var(--ink)}
.v7-acc summary::-webkit-details-marker{display:none}
.v7-acc summary:after{content:"+";font-weight:300;font-size:22px;line-height:1;flex:none}
.v7-acc details[open] summary:after{content:"\2212"}
.v7-acc-a{color:var(--v7-body);font-size:14.5px;padding:0 0 18px;max-width:720px;line-height:1.65}
.v7-acc-a p{margin:0 0 10px}
@media (max-width:1080px){.v7-seo-grid{grid-template-columns:1fr}}
@media (max-width:820px){.v7-about-grid{grid-template-columns:1fr}.v7-seo-card,.v7-about-card{padding:22px}.v7-about,.v7-faq,.v7-seo{padding-top:56px}}
.v7-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.v7-coa-page{padding-bottom:20px}
.v7-cl-count{font-size:13px;color:var(--v7-muted);margin:-8px 0 16px}
.v7-fchip{white-space:nowrap}
:root[data-card] body > main{min-width:0;width:100%;box-sizing:border-box}

/* ---- Product page restyle: views/product.php markup, behaviour untouched ---- */
:root[data-card] .pd{max-width:1360px!important;margin:0 auto!important;padding:0 28px!important;box-sizing:border-box;background:transparent!important}
:root[data-card] .pd-crumb{font-size:13px;color:var(--v7-muted);padding:22px 0}
:root[data-card] .pd-crumb a{color:var(--v7-muted);text-decoration:none}
:root[data-card] .pd-top{gap:56px!important}
:root[data-card] .pd-gallery-card{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important}
:root[data-card] .pd-main{background:radial-gradient(90% 80% at 50% 45%,var(--hero-a),var(--hero-b))!important;border-radius:var(--r)!important;border:0!important;box-shadow:none!important}
:root[data-card] .pd-main img{mix-blend-mode:multiply}
:root[data-card="navy-hero"] .pd-main img{mix-blend-mode:normal}
/* Certificate hover on the photo (fix 2026-11-03). The multiply above is for the vial
   photo only; on the certificate it multiplied a white page into the old dark sheet
   and measured an average brightness of 26 of 255. The panel now sits on the card
   theme's own surface, the page is a plain white sheet with no blend or filter, the
   vial underneath is no longer dimmed, and the caption bar is light with the ink button. */
:root[data-card] .pd-coa-hov{background:var(--cream)!important}
:root[data-card] .pd-coa-hdoc::before{display:none}
:root[data-card] .pd-main .pd-coa-hsheet{background:#fff;border-radius:6px;box-shadow:0 0 0 1px var(--v7-line),0 24px 48px -24px rgba(22,40,59,.42)}
:root[data-card] .pd-main .pd-coa-hsheet img{mix-blend-mode:normal;filter:none}
:root[data-card] .pd-coa-hsheet .pcard-coa-skel{background:var(--stone)}
:root[data-card] .pd-coa-hsheet .pcard-coa-skel i{background:var(--stone-2)}
:root[data-card] .pd-main > img,:root[data-card] .pd-main > picture > img,:root[data-card] .pd-main > .pd-img-btn > picture > img{filter:none!important}
:root[data-card] .pd-coa-hnone{color:var(--v7-body)}
:root[data-card] .pd-coa-hbar{background:var(--paper);border-top:1px solid var(--v7-line)}
:root[data-card] .pd-coa-ht b{color:var(--ink);font-weight:600}
:root[data-card] .pd-coa-ht span{color:var(--v7-muted);font-family:inherit;font-variant-numeric:tabular-nums}
:root[data-card] .pd-coa-hbtn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;border-radius:999px;background:var(--ink);color:#fff;font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;box-sizing:border-box}
:root[data-card] .pd-coa-hbtn:hover{background:var(--navy);color:#fff}
:root[data-card] .pd-coa-h3d{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
:root[data-card] .pd-coa-h3d:hover{background:var(--cream);color:var(--ink)}
:root[data-card] .pd-main .pd-flag,:root[data-card] .pd-main [class*="lot-tag"]{background:#fff!important;color:var(--ink)!important}
:root[data-card] .pd-thumb{background:var(--stone)!important;border:1.5px solid transparent!important;border-radius:10px!important}
:root[data-card] .pd-thumb.is-active,:root[data-card] .pd-thumb[aria-current],:root[data-card] .pd-thumb[aria-selected="true"]{border-color:var(--ink)!important}
:root[data-card] .pd-title{font-size:clamp(40px,4.2vw,58px)!important;font-weight:600!important;letter-spacing:-.035em!important;line-height:1!important;color:var(--ink)!important;margin:12px 0 10px!important}
:root[data-card] .pd-subtitle{color:var(--v7-body)!important;font-size:17px!important}
:root[data-card] .pd-class,:root[data-card] .pd-class a{color:var(--v7-muted)!important;font-size:13.5px}
:root[data-card] .pd-price-row{display:flex;align-items:center;flex-wrap:wrap;gap:14px;padding:20px 0;border-top:1px solid var(--v7-line);border-bottom:1px solid var(--v7-line);margin:18px 0 20px}
:root[data-card] .pd-price-current{font-size:30px!important;font-weight:500!important;letter-spacing:-.01em;color:var(--ink)!important}
:root[data-card] .pd-stock{background:transparent!important;color:var(--green-dk)!important;font-size:13px!important;padding:0!important;border:0!important}
:root[data-card] .pd-stock-dot{background:var(--green)!important}
:root[data-card] .pd-badge{background:transparent!important;color:var(--v7-muted)!important;border:1px solid var(--v7-line)!important;border-radius:999px!important;font-size:10.5px!important;font-weight:600!important;letter-spacing:.1em;text-transform:uppercase;padding:5px 10px!important;box-shadow:none!important}
:root[data-card] .pd-badge svg{display:none}
:root[data-card] .pd-size-head,:root[data-card] .pd-pack-label,:root[data-card] .pd-bac-label{font-size:11.5px!important;font-weight:600!important;letter-spacing:.12em!important;text-transform:uppercase;color:var(--v7-muted)!important}
:root[data-card] .pd-chip{border:1.5px solid var(--v7-line)!important;border-radius:999px!important;background:var(--paper)!important;color:var(--ink)!important;box-shadow:none!important}
:root[data-card] .pd-chip:has(input:checked){border-color:var(--ink)!important;background:var(--ink)!important;color:#fff!important}
:root[data-card] .pd-chip:has(input:checked) .pd-chip-price{color:#fff!important}
:root[data-card] .pd-chip-price{color:var(--v7-muted)!important}
/* Sold-out sizes stay selectable, so they stay readable: dark text on the light chip, a dashed edge marks them (2026-11-03; was opacity .5, 3.45:1 and 2.07:1). */
:root[data-card] .pd-chip.is-out{opacity:1;border-style:dashed!important}
:root[data-card] .pd-chip.is-out:not(:has(input:checked)) .pd-chip-size{color:var(--v7-body)!important}
:root[data-card] .pd-chip.is-out:not(:has(input:checked)) .pd-chip-price{color:var(--v7-muted)!important}
:root[data-card] .pd-pack{border:1.5px solid var(--v7-line)!important;border-radius:12px!important;background:var(--paper)!important;color:var(--ink)!important;box-shadow:none!important}
:root[data-card] .pd-pack:has(input:checked){border-color:var(--ink)!important;box-shadow:inset 0 0 0 1px var(--ink)!important;background:var(--paper)!important;color:var(--ink)!important}
:root[data-card] .pd-pack-qty{font-size:15px!important;font-weight:600!important;color:var(--ink)!important}
:root[data-card] .pd-pack-unit{font-size:12.5px!important;color:var(--v7-muted)!important}
:root[data-card] .pd-pack-badge{background:var(--green)!important;color:#fff!important;border-radius:999px!important;font-weight:600!important}
:root[data-card] .pd-pack-badge-best{background:var(--navy)!important}
:root[data-card] .pd-bac{background:var(--cream)!important;border-radius:12px;padding:6px 16px!important}
:root[data-card] .pd-bac-row{background:transparent!important;color:var(--ink)!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:12px 0!important}
:root[data-card] .pd-bac-row+.pd-bac-row{border-top:1px solid var(--v7-line)!important}
:root[data-card] .pd-bac-name{color:var(--ink)!important;font-weight:600!important}
/* "Frequently added" reads as a heading, not a muted caption (2026-11-03). */
:root[data-card] .pd-bac-label{color:var(--ink)!important;font-weight:600!important}
:root[data-card] .pd-bac-was{color:var(--v7-muted)!important}
:root[data-card] .pd-bac-now{color:var(--ink)!important;font-weight:600}
:root[data-card] .pd-bac-check{accent-color:var(--ink)}
:root[data-card] .pd-bac-thumb{background:var(--stone)!important;border-radius:8px}
:root[data-card] .pd-add,:root[data-card] .pd-add-full{background:var(--ink)!important;color:#fff!important;border:0!important;border-radius:999px!important;min-height:56px;font-size:13px!important;font-weight:600!important;letter-spacing:.06em!important;text-transform:uppercase;box-shadow:none!important}
:root[data-card] .pd-add:hover{background:var(--navy)!important}
:root[data-card] .ss-btn{background:transparent!important;color:var(--ink)!important;border:1.5px solid var(--ink)!important;border-radius:999px!important;box-shadow:none!important;font-weight:600!important}
:root[data-card] .ss-btn:hover{background:var(--ink)!important;color:#fff!important}
:root[data-card] .ss-tabs{background:var(--cream)!important;border:0!important;box-shadow:none!important;border-radius:12px!important}
:root[data-card] .ss-tab{background:#fff!important;color:var(--ink)!important;border:1.5px solid var(--v7-line)!important;box-shadow:none!important}
:root[data-card] .ss-tab.is-active,:root[data-card] .ss-tab[aria-pressed="true"],:root[data-card] .ss-tab:has(input:checked){background:var(--ink)!important;color:#fff!important;border-color:var(--ink)!important}
:root[data-card] .pd-qty,:root[data-card] .pd-stepper{border:1.5px solid var(--v7-line)!important;border-radius:999px!important;background:#fff!important}
:root[data-card] .pd-coa-btn{border:1.5px solid var(--v7-line)!important;border-radius:999px!important;background:#fff!important;color:var(--ink)!important;box-shadow:none!important}
:root[data-card] .pd-coa-row{display:none!important}
:root[data-card] .pd-rsp{background:var(--cream)!important;border:0!important;border-radius:12px!important}
:root[data-card] .pd-rsp a{color:var(--navy)!important}
:root[data-card] .pd-trustcard,:root[data-card] .pd-tabs-panel,:root[data-card] .pd-accordions,:root[data-card] .pd-secs>*{background:var(--paper)!important;border:1px solid var(--v7-line)!important;border-radius:12px!important;box-shadow:none!important}
:root[data-card] .pd-trustcard svg{color:var(--green)!important}
:root[data-card] .pd-tab.is-active,:root[data-card] .pd-tab[aria-selected="true"]{border-bottom-color:var(--ink)!important;color:var(--ink)!important}
:root[data-card] .pd-disclaimer,:root[data-card] .pd-fda-notice{background:var(--cream)!important;color:var(--v7-body)!important;border:0!important;border-radius:12px!important;box-shadow:none!important}
:root[data-card] .pd-disclaimer a{color:var(--navy)!important}
:root[data-card] .pd-sec-h{color:var(--ink)!important}
:root[data-card] .pd-related-h{font-size:clamp(28px,3vw,40px)!important;font-weight:600!important;letter-spacing:-.035em!important}
.v7-pdx[hidden]{display:none}
@media (max-width:1080px){:root[data-card] .pd-top{grid-template-columns:1fr!important;gap:32px!important}}
@media (max-width:820px){:root[data-card] .pd{padding:0 16px!important}}
:root[data-card]{--surface-dark:var(--ink);--black:var(--ink);--border-dark:#2b3d52}
/* the chat widget and legal callouts in the new palette (no orange, no beige) */
:root[data-card] .pchat{--pchat-navy:var(--ink);--pchat-orange:var(--navy);--pchat-blue:var(--navy)}
:root[data-card] .legal-callout{background:var(--cream)!important;border-color:var(--v7-line)!important}
/* contrast and labels (Lighthouse, 2026-11-02) */
:root[data-card] .pd-pack-badge{background:var(--green-dk)!important}
:root[data-card] .ssx-k,:root[data-card] .ss-tabs span,:root[data-card] .ss-tabs .ss-k{color:var(--v7-muted)!important}
/* The selected cadence pill is ink, so its label is white; the muted rule above reached it too (2026-11-03). */
:root[data-card] .ss-tab:has(input:checked) span,:root[data-card] .ss-tab.is-active span,:root[data-card] .ss-tab[aria-pressed="true"] span{color:#fff!important}
.v7-sc-t h2{font-size:16.5px;font-weight:600;letter-spacing:-.015em;margin:0;line-height:1.3;color:var(--ink)}
@media (max-width:820px){
  :root[data-card] .shop-sort-label{display:block!important;position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .v7-sc-t h2{font-size:14px}
}
/* the announcement bar: the old bar's hooks (announce, announce-msg, announce-pin), the mockup's look */
:root[data-card] .announce{position:static!important;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:0 8px;height:auto;min-height:0;overflow:visible;padding:9px 16px;background:var(--ink)!important;color:#e9eef3!important;font-size:13px;font-weight:500;line-height:1.4;text-align:center}
:root[data-card] .announce .announce-msg{display:inline;padding:0;font-size:13px;font-weight:500;line-height:1.4;white-space:normal;overflow:visible}
:root[data-card] .announce .announce-pin{display:inline;padding:0;font-size:13px;font-weight:500;line-height:1.4;white-space:normal}
:root[data-card] .announce .v7-ann-line:not(:empty)+.announce-pin:before{content:"·";margin-right:8px;color:#8fa1b3}
@media (max-width:820px){
  :root[data-card] .announce{font-size:12px;padding:8px 12px}
  :root[data-card] .announce .announce-msg,:root[data-card] .announce .announce-pin{font-size:12px}
  :root[data-card] .announce .v7-ann-line .announce-msg~*,:root[data-card] .announce .v7-ann-line:not(:empty)+.announce-pin{display:none}
}
/* the cart line photo sized to its box at every width (it drew at full size between 361 and 820px at HEAD too) */
:root[data-card] .cart-line-media{overflow:hidden;min-width:0}
:root[data-card] .cart-line-media picture{display:block;width:100%}
:root[data-card] .cart-line-media img{display:block;width:100%;max-width:100%;height:auto}
/* the Zelle trademark line under the Important notice, in the notice's own style */
.v7-ft-notice:has(+.v7-ft-tm){padding-bottom:0}
.v7-ft-tm{font-size:12.5px;line-height:1.6;color:var(--fm);margin:8px 0 0;padding-bottom:24px;max-width:1100px}
/* Zelle's brand rule: the badge at no less than 53 x 31 px (its own aspect is 134:78) */
.v7-ft-pay .v7-pm-zelle img{height:31px!important;max-height:none!important;width:auto!important;max-width:none!important}
.v7-ft-pay .v7-pm-zelle{padding:0;overflow:visible}


/* ---- One content width, site-wide (2026-11-03) ------------------------------------
   Every page container of the older views takes the header's width and gutter (.v7-wrap:
   max 1360px, 28px sides, 16px at 820 and under), so page content lines up with the logo
   on the left and the last header icon on the right. Measured per route and width. */
:root[data-card] :is(.page-shell,.page-inner,.faq-page,.rs-wrap,.f-shell,.pay-wrap,.opay,.vfy){max-width:1360px!important;width:100%!important;margin-left:auto!important;margin-right:auto!important;padding-left:28px!important;padding-right:28px!important;box-sizing:border-box!important}
:root[data-card] :is(.page-shell,.page-inner,.faq-page,.rs-wrap,.f-shell,.pay-wrap,.opay,.vfy) :is(.page-shell,.page-inner,.faq-page,.rs-wrap,.f-shell,.pay-wrap,.opay,.vfy){max-width:none!important;padding-left:0!important;padding-right:0!important;margin-left:0!important;margin-right:0!important}
@media (max-width:820px){:root[data-card] :is(.page-shell,.page-inner,.faq-page,.rs-wrap,.f-shell,.pay-wrap,.opay,.vfy){padding-left:16px!important;padding-right:16px!important}}
/* Single small forms (forgot, reset) and not-found messages keep a readable column, centred
   inside the aligned container. */
:root[data-card] .page-inner.narrow>*{max-width:672px;margin-left:auto;margin-right:auto}
/* .pparent-body is also the class-tile card body in style.css; on /peptides, /compounds and
   /supplies it is the <body> class too, which padded the whole page (header and footer inset). */
:root[data-card] body.pparent-body{padding:0!important}
/* Full-bleed bands keep their color edge to edge, their content in the same column. */
:root[data-card] .announce{padding-left:max(28px,calc((100% - 1304px) / 2))!important;padding-right:max(28px,calc((100% - 1304px) / 2))!important;box-sizing:border-box}
.v7-marquee{width:min(1304px,calc(100% - 56px));margin-left:auto;margin-right:auto;box-shadow:0 0 0 100vmax var(--ink);clip-path:inset(0 -100vmax)}
@media (max-width:820px){
  :root[data-card] .announce{padding-left:16px!important;padding-right:16px!important}
  .v7-marquee{width:calc(100% - 32px)}
}

/* ---- Shop and class filters, tablets, chat button (2026-11-03) ---------------------
   Phones (under 768): row 1 the stock switch in three equal segments, row 2 "Class" and
   "Sort" side by side as two identical pills; the chip row is hidden and nothing scrolls
   sideways. 768 and up: the chips wrap onto as many rows as they need under one row of
   switch and sort. Grid: 4 columns from 1024, 3 from 768, 2 under 768. */
.v7-csel{display:none;position:relative;min-width:0}
.v7-csel>summary{list-style:none}
.v7-csel>summary::-webkit-details-marker{display:none}
.v7-csel-btn,:root[data-card] .shop-sort{display:flex;align-items:center;gap:6px;height:44px;box-sizing:border-box;border:1.5px solid var(--v7-line)!important;border-radius:999px!important;background:#fff!important;padding:0 14px!important;cursor:pointer;min-width:0}
.v7-csel-btn{font-size:14px;color:var(--ink);white-space:nowrap}
.v7-csel-k{color:var(--v7-muted);font-size:13px;flex:none}
.v7-csel-v{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.v7-csel-btn svg{width:14px;height:14px;flex:none;stroke:var(--ink);fill:none;stroke-width:2}
.v7-csel[open] .v7-csel-btn{border-color:var(--ink)!important}
.v7-csel[open] .v7-csel-btn svg{transform:rotate(180deg)}
.v7-csel-list{position:absolute;left:0;top:calc(100% + 6px);z-index:30;width:min(320px,calc(100vw - 32px));max-height:min(60vh,440px);overflow-y:auto;margin:0;padding:6px;list-style:none;background:#fff;border:1px solid var(--v7-line);border-radius:14px;box-shadow:0 18px 40px -16px rgba(22,40,59,.35);box-sizing:border-box}
.v7-csel-list a{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:44px;padding:0 12px;border-radius:10px;color:var(--ink);text-decoration:none;font-size:14.5px;white-space:nowrap}
.v7-csel-list a span{color:var(--v7-muted);font-size:13px;font-variant-numeric:tabular-nums}
.v7-csel-list a:hover{background:var(--cream)}
.v7-csel-list a[aria-current]{background:var(--ink);color:#fff}
.v7-csel-list a[aria-current] span{color:#fff}
@media (min-width:768px){
  :root[data-card] .shop-strip-rail{flex-wrap:wrap!important;overflow:visible!important;scroll-snap-type:none}
  :root[data-card] .shop-bar{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;justify-content:space-between!important;align-items:center!important}
  :root[data-card] .shop-seg{flex:none}
}
@media (min-width:1024px){:root[data-card] .pgrid{grid-template-columns:repeat(4,minmax(0,1fr))!important}}
@media (max-width:1023.98px){:root[data-card] .pgrid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:22px 14px!important}}
@media (max-width:767.98px){
  :root[data-card] .pgrid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:18px 10px!important}
  :root[data-card] .shop-strip,:root[data-card] .v7-chiprow{display:none!important}
  .v7-csel{display:block}
  :root[data-card] .shop-bar{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px!important;align-items:stretch!important}
  :root[data-card] .shop-seg{grid-column:1/-1;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));width:100%!important}
  :root[data-card] .shop-seg-item{text-align:center;padding:9px 6px!important;font-size:13.5px!important}
  :root[data-card] .shop-bar .v7-csel{grid-column:1;grid-row:2}
  :root[data-card] .shop-sort{grid-column:2;grid-row:2;width:100%!important;flex:none!important}
  :root[data-card] .shop-sort-label{display:inline!important;position:static!important;width:auto;height:auto;overflow:visible;clip:auto;font-size:13px;color:var(--v7-muted);flex:none}
  :root[data-card] .shop-sort-label::after{content:":"}
  :root[data-card] .shop-sort-select{flex:1;min-width:0;max-width:none!important;height:40px;font-size:14px!important;-webkit-appearance:none;appearance:none;padding:0 20px 0 0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316283b' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right center/14px 14px!important;text-overflow:ellipsis}
  /* Class pages have no sort: the dropdown takes the full row. */
  .v7-chiprow+.v7-csel{margin:0 0 16px}
  /* Chat button: 52px, 16px in, and the page ends with room for it. */
  .pchat{right:16px;bottom:16px}
  .pchat-launch{width:52px;height:52px}
  .pchat-launch svg{width:23px;height:23px}
  .v7-ft-bot{padding-bottom:84px}
}
@media (min-width:768px){:root[data-card] .shop-sort-select{max-width:none!important;width:auto}}
@media (max-width:767.98px){
  :root[data-card] .shop-sort,.v7-csel-btn{padding:0 12px!important;gap:5px}
  :root[data-card] .shop-sort-select{font-size:13px!important;padding-right:16px;background-size:12px 12px!important}
  .v7-csel-v{font-size:13.5px}
}
/* Tablet pass (2026-11-03): the Shop mega menu at 1024. The class rail is 224px under 1180 and
   its rows and "Shop all N compounds" stay on one line. */
.v7-mr{gap:10px;white-space:nowrap}
.v7-mg-all{display:inline-block;white-space:nowrap}
@media (max-width:1180px){.v7-mega .v7-mg{grid-template-columns:224px 1fr}}
/* Tablet portrait (600 to 820): the phone vial layout, but sized in px so the group stays under the
   copy (at 768 the 64% front vial was a 471px image in a 340px area and rose over the buttons).
   Same symmetric arrangement: sides centred 23.4% of the front vial's width either side of centre. */
@media (min-width:600px) and (max-width:820px){
  .v7-hero-vials{min-height:430px;--w2:min(64%,330px);--w1:calc(var(--w2) * .8125)}
  .v7-hv2{width:var(--w2);left:calc(50% - var(--w2) / 2);bottom:-2%}
  .v7-hv1{width:var(--w1);left:calc(50% - var(--w2) * .234 - var(--w1) / 2);bottom:3%}
  .v7-hv3{width:var(--w1);right:calc(50% - var(--w2) * .234 - var(--w1) / 2);left:auto;bottom:3%}
}
/* Tablet pass, product page: at 1024x768 the one-column layout made the photo a 968px square, taller
   than the screen, with the buy box under it. From 821 the photo and the buy box sit side by side
   (the photo sticks only from 961, where style.css already makes it sticky); at 600 to 820 the photo
   panel is capped at 520px and centred. Home category rows at 600 to 820: three cards across. */
@media (min-width:821px) and (max-width:1080px){
  :root[data-card] .pd-top{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:28px!important}
}
@media (min-width:600px) and (max-width:820px){
  :root[data-card] .pd-gallery{max-width:520px;margin-left:auto;margin-right:auto;width:100%}
  .v7-rail{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .v7-rail>.v7-sc:nth-child(3){display:grid!important}
}

/* ---- Footer spacing on phones and tablets (2026-11-03) -----------------------------
   Under 820, .v7-wrap{padding:0 16px} (a shorthand) zeroed the top and bottom padding of the
   footer's own .v7-wrap blocks: the trust strip's first item sat on its top edge and the logo
   on the strip. Spacing is restated here, after it. The gap above the footer was the footer's
   72px margin plus each page's leftover bottom padding (24 to 72px more); below 1180 the page
   adds nothing and the footer's margin is the whole gap. */
@media (max-width:1179.98px){
  :root[data-card] main{padding-bottom:0!important}
  :root[data-card] main>:last-child,:root[data-card] main>:last-child>:last-child{margin-bottom:0!important}
  :root[data-card] :is(.page-shell,.page-inner,.faq-page,.rs-wrap,.f-shell,.pay-wrap,.opay,.vfy){padding-bottom:0!important}
  .v7-ft-col,.v7-ft-col ul,.v7-ft-col li{min-width:0}
  .v7-ft-col a{overflow-wrap:anywhere}
  .v7-ft-brand,.v7-ft-pay-col{grid-column:1/-1}
}
@media (min-width:768px) and (max-width:1179.98px){
  .v7-ft{margin-top:64px}
  .v7-ft-trust-in{grid-template-columns:repeat(2,minmax(0,1fr))!important;padding-top:36px!important;padding-bottom:36px!important;gap:24px 28px!important}
  .v7-ft-main{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:36px 24px!important;padding-top:56px!important;padding-bottom:36px!important}
  .v7-ft-brand p{margin-bottom:36px}
  .v7-ft-notice{padding-top:36px}
  .v7-ft-tm{padding-bottom:36px}
  .v7-ft-bot{padding-top:24px!important;padding-bottom:calc(40px + 82px)!important}
}
@media (max-width:767.98px){
  .v7-ft{margin-top:48px}
  .v7-ft-trust-in{grid-template-columns:minmax(0,1fr)!important;padding-top:28px!important;padding-bottom:28px!important;gap:18px!important}
  .v7-ft-main{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:28px 16px!important;padding-top:40px!important;padding-bottom:28px!important}
  .v7-ft-brand p{margin-bottom:28px}
  .v7-ft-notice{padding-top:28px}
  .v7-ft-tm{padding-bottom:28px}
  /* 32px, plus the 68px the chat button occupies (52px at 16px from the bottom) */
  .v7-ft-bot{padding-top:20px!important;padding-bottom:calc(32px + 68px)!important}
}

/* ---- Certificate previews: a clean edge where the document meets the card (2026-11-03) ----
   COA library card: the preview panel ends in a 1px line, the cut-off page fades over its last
   24px into the panel color, and the card body's top border sits on that same line (one 1px
   divider, not two). The product page card, the mega menu and the Lab testing dropdown show the
   whole page as a thumbnail beside the text, nothing is cut off there, so they take the same
   window edge (hairline and soft shadow) without a fade that would hide the lab's signature. */
.v7-cc-ph{position:relative;box-shadow:inset 0 -1px 0 var(--v7-line)}
.v7-cc-ph img{box-shadow:0 6px 12px -10px rgba(22,40,59,.18),0 0 0 1px var(--v7-line)!important}
.v7-cc-ph::after{content:"";position:absolute;left:0;right:0;bottom:0;height:24px;background:linear-gradient(to bottom,transparent,var(--stone));box-shadow:inset 0 -1px 0 var(--v7-line);pointer-events:none;z-index:1}
.v7-cc-b{position:relative;border-top:1px solid var(--v7-line);margin-top:-1px}
.v7-pdp-coa img,.v7-coa-mini img,.v7-dp-latest img{box-shadow:0 0 0 1px var(--v7-line),0 6px 12px -10px rgba(22,40,59,.18)!important}
/* The nav underline marks the current page only: hover, focus and an open menu never draw it,
   so nothing is left underlined after a tap or a hover. */
.v7-top:hover,.v7-top:focus,.is-open>.v7-top{border-bottom-color:transparent}
.v7-top.is-active,.v7-top.is-active:hover,.is-open>.v7-top.is-active{border-bottom-color:var(--ink)}
/* COA library card on phones: the "Tested" pill ran past the card's right edge beside a two-line
   name; it now sits under the name. */
@media (max-width:767.98px){.v7-cc-top{flex-wrap:wrap;align-items:flex-start;row-gap:6px}.v7-cc-top h2{min-width:0;flex:1 1 100%}}

/* ==== HOME v11 (docs/mockups/pcd-home-v11.html, Option A "Bento", 2026-11-03) ==================== */
/* Sticky header group: the announcement bar and the nav stick as one block; pcd.js adds .is-barless
   (scrolled down past 60px), which slides the block up by the bar's height so only the nav shows.
   Transform only: nothing below moves, so no layout shift. */
.v7-topgroup{position:sticky;top:0;z-index:60;transition:transform .28s ease}
.v7-topgroup>.v7-header{position:relative;top:auto}
.v7-topgroup.is-barless{transform:translateY(calc(-1 * var(--pc-bar-h,0px)))}
@media (prefers-reduced-motion:reduce){.v7-topgroup{transition:none}}

/* Hero: no floating stat box; the stat row sits under the buttons. */
.v7-hero-stat{display:none}
.v7-hstats{display:flex;margin-top:40px;padding-top:24px;max-width:520px;border-top:1px solid color-mix(in srgb,var(--hero-ink,#16283b) 16%,transparent)}
.v7-hstats>div{flex:1 1 auto;min-width:0;padding-right:20px}
.v7-hstats>div+div{padding-left:20px;border-left:1px solid color-mix(in srgb,var(--hero-ink,#16283b) 16%,transparent)}
.v7-hstats>div:last-child{padding-right:0}
.v7-hstats b{display:block;font-size:30px;line-height:1.1;letter-spacing:-.03em;font-weight:600;color:var(--hero-ink,var(--ink));white-space:nowrap}
.v7-hstats span{display:block;margin-top:4px;font-size:13px;line-height:1.3;color:var(--hero-body,var(--v7-muted));white-space:nowrap}
.v7-hero-vials img{filter:drop-shadow(0 30px 30px rgba(22,40,59,.22))}
:root[data-card="navy-hero"] .v7-hero-vials img{filter:drop-shadow(0 30px 40px rgba(0,0,0,.35))}
@media (min-width:1181px){
  .v7-hero-copy{padding:64px 0 56px 72px}
  .v7-hero-vials{min-height:520px}
  .v7-hv1{width:44%;left:6%;right:auto;bottom:9%}
  .v7-hv2{width:54%;left:27%;right:auto;bottom:4%}
  .v7-hv3{width:42%;right:2%;left:auto;bottom:11%}
}
/* One column under 1181 (the mockup's tablet hero): copy, then the three vials as one group centred
   in the panel. Front vial --w2 centred; the side vials --w1 centred --o either side of the middle,
   so the painted group is symmetric (each vial is painted at the centre of its square photo). */
@media (max-width:1180px){
  .v7-hero-panel{grid-template-columns:minmax(0,1fr);min-height:0}
  .v7-hero-copy{padding:48px 40px 0}
  .v7-hero-vials{min-height:0;height:440px;--w2:30%;--w1:23.5%;--o:17%}
  .v7-hv2{width:var(--w2);left:calc(50% - var(--w2) / 2);right:auto;bottom:4%}
  .v7-hv1{width:var(--w1);left:calc(50% - var(--o) - var(--w1) / 2);right:auto;bottom:9%}
  .v7-hv3{width:var(--w1);right:calc(50% - var(--o) - var(--w1) / 2);left:auto;bottom:9%}
}
@media (max-width:820px){
  .v7-hero-copy{padding:36px 22px 0}
  .v7-hero-vials{height:400px;--w2:34%;--w1:27%;--o:21.5%}
  .v7-hstats{max-width:none}
  .v7-hstats>div{flex:1 1 0;padding-right:10px}
  .v7-hstats>div+div{padding-left:10px}
  .v7-hstats b{font-size:24px}
  .v7-hstats span{font-size:11.5px}
  .v7-ctas{display:flex;flex-direction:row;gap:12px}
  .v7-ctas .v7-btn{flex:1 1 0;min-width:0;justify-content:center;padding:0 14px}
}
@media (max-width:559.98px){
  .v7-hero-vials{height:330px;--w2:50%;--w1:39%;--o:24.5%}
  .v7-ctas{flex-direction:column}
  .v7-ctas .v7-btn{flex:none;width:100%}
  .v7-hstats>div{padding-right:8px}
  .v7-hstats>div+div{padding-left:8px}
}

/* Trust row: four separate white tiles. */
.v7-trust-row{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:22px;border-bottom:0}
.v7-trust-row li,.v7-trust-row li+li{background:#fff;border:1px solid var(--v7-line);border-radius:14px;padding:16px 18px;font-size:14.5px;font-weight:500;color:var(--ink);white-space:nowrap;box-shadow:0 1px 2px rgba(22,40,59,.04)}
@media (max-width:1180px){.v7-trust-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:820px){.v7-trust-row{gap:12px}.v7-trust-row li,.v7-trust-row li+li{padding:14px 16px}}
@media (max-width:559.98px){.v7-trust-row{grid-template-columns:minmax(0,1fr)}}

/* Shop by class: the Bento. */
.v7-eyedot{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.v7-eyedot::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green);flex:none}
.v7-bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:290px;grid-auto-flow:row dense;gap:18px}
.v7-bt{position:relative;overflow:hidden;min-width:0;box-sizing:border-box;border-radius:22px;background:linear-gradient(160deg,#fff 0%,#f2f5f8 100%);border:1px solid var(--v7-line);box-shadow:0 1px 2px rgba(22,40,59,.05),0 14px 32px -20px rgba(22,40,59,.28);padding:22px;display:flex;flex-direction:column;gap:10px;color:var(--ink);text-decoration:none;transition:transform .25s,box-shadow .25s}
@media (hover:hover){.v7-bt:hover{transform:translateY(-4px);box-shadow:0 2px 4px rgba(22,40,59,.06),0 26px 48px -24px rgba(22,40,59,.4)}.v7-bt:hover .v7-bt-go{transform:translateX(3px)}.v7-bt:hover .v7-v.is-c img{transform:translateY(-4px)}}
.v7-bt.is-big{grid-column:span 2;grid-row:span 2;padding:34px;color:#fff;border-color:#14283d;background:radial-gradient(90% 90% at 70% 90%,#2c537a 0%,#1d3a59 45%,#14283d 100%)}
.v7-bt.is-wide{grid-column:span 2;flex-direction:row;align-items:stretch;gap:12px}
.v7-bt-t{position:relative;z-index:2;min-width:0;padding-right:48px}
.v7-bt.is-wide .v7-bt-t{flex:1 1 52%;padding-right:0}
.v7-bt-c{display:inline-block;margin-bottom:8px;font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--v7-muted);white-space:nowrap}
.v7-bt.is-big .v7-bt-c{color:#9fb6cc}
.v7-bt h3{margin:0;font-size:21px;font-weight:600;letter-spacing:-.025em;line-height:1.12;color:inherit}
.v7-bt.is-big h3{font-size:44px;letter-spacing:-.04em}
.v7-bt.is-wide h3{font-size:26px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v7-bt p{margin:8px 0 0;font-size:13.5px;line-height:1.45;color:var(--v7-muted);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.v7-bt.is-big p{font-size:16px;max-width:440px;color:#c3d0dc;-webkit-line-clamp:3}
.v7-bt-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.v7-bt-chips span{font-size:12.5px;font-weight:500;padding:5px 11px;border-radius:999px;background:rgba(22,40,59,.06);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box}
.v7-bt.is-big .v7-bt-chips span{background:rgba(255,255,255,.1);color:#e6edf3}
.v7-bt-go{position:absolute;right:18px;top:18px;z-index:3;width:38px;height:38px;border-radius:50%;background:var(--ink);display:grid;place-items:center;transition:transform .2s}
.v7-bt-go svg{width:15px;height:15px;stroke:#fff;fill:none;stroke-width:2}
.v7-bt.is-big .v7-bt-go{background:#fff}.v7-bt.is-big .v7-bt-go svg{stroke:var(--ink)}
/* The stage fills what the text leaves. Its vials stand on its floor: the front vial is as tall as
   the stage allows by height AND by width (--f = the row's width in front-vial heights), the side
   vials 84% of it, overlapping slightly, the front one in front. Each .v7-v box is the painted vial
   itself (--va its aspect); the photo is offset inside it by the vial's measured bounds. */
.v7-stage{position:relative;flex:1 1 auto;min-height:0;min-width:0;display:flex;align-items:flex-end;justify-content:center;padding:4px 0 10px;container-type:size}
.v7-bt.is-wide .v7-stage{flex:1 1 48%}
.v7-stage::after{content:"";position:absolute;left:14%;right:14%;bottom:4px;height:14px;border-radius:50%;background:radial-gradient(closest-side,rgba(22,40,59,.22),rgba(22,40,59,0));z-index:0}
.v7-bt.is-big .v7-stage::after{background:radial-gradient(closest-side,rgba(0,0,0,.45),rgba(0,0,0,0))}
.v7-v{--H:min(100cqh,96cqw / var(--f,1));position:relative;display:block;flex:none;height:var(--H);aspect-ratio:var(--va,.4);z-index:1}
.v7-v.is-c{z-index:2}
.v7-v.is-s{height:calc(var(--H) * .84)}
.v7-v+.v7-v{margin-left:calc(var(--H) * -.02)}
.v7-v picture{display:contents}
.v7-v img{position:absolute;max-width:none;width:auto;height:var(--vh,100%);left:var(--vl,0);top:var(--vt,0);filter:drop-shadow(0 10px 12px rgba(22,40,59,.22));transition:transform .3s}
.v7-bt.is-big .v7-v img{filter:drop-shadow(0 14px 16px rgba(0,0,0,.45))}
@media (max-width:1180px){.v7-bento{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:280px}}
@media (max-width:820px){
  .v7-bento{grid-auto-rows:230px;gap:12px}
  .v7-bt{padding:16px;border-radius:18px}
  .v7-bt.is-big{padding:22px}
  .v7-bt.is-big h3{font-size:32px}
  .v7-bt.is-big p{font-size:14px;-webkit-line-clamp:3}
  .v7-bt.is-wide .v7-bt-t{flex:1 1 58%}
  .v7-bt.is-wide .v7-stage{flex:1 1 42%}
  .v7-bt.is-wide h3{font-size:20px}
  .v7-bt.is-wide p{font-size:12.5px;-webkit-line-clamp:3}
  .v7-bt h3{font-size:16px}
  /* the title starts below the arrow, so it can use the tile's full width */
  .v7-bt-t,.v7-bt.is-wide .v7-bt-t{padding-right:0}
  .v7-bt-c{display:block;min-height:34px;margin-bottom:0;padding-right:40px;font-size:10.5px;box-sizing:border-box}
  .v7-bt.is-big .v7-bt-c{min-height:0;margin-bottom:8px}
  .v7-bt.is-big .v7-bt-t{padding-right:44px}
  .v7-bt-go{width:32px;height:32px;right:12px;top:12px}
  .v7-bt-chips{display:none}
}

/* ---- Fix 11 (2026-11-03): phones. COA library class dropdown, stat cards, placeholder; hero stat labels.
   Each label is printed twice (long and short span); one is shown per width. The chip row is
   hidden under 768 and the shop page's Class dropdown (.v7-csel) takes its place beside Sort.
   The phone placeholder is a span shown while the box is empty; the attribute's text is hidden. */
.v7-cl-dt-s,.v7-cl-ph,.v7-hstats .v7-hs-s{display:none}
.v7-hstats .v7-hs-l,.v7-hstats .v7-hs-s{margin:0;font-size:inherit;line-height:inherit;color:inherit;white-space:inherit}
.v7-hstats .v7-hs-l{display:inline}
.v7-cl-in{position:relative}
@media (max-width:767.98px){
  .v7-coa-page .v7-chips{display:none}
  .v7-cl-search{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;margin:20px 0 14px}
  .v7-cl-in{grid-column:1/-1}
  .v7-cl-search .v7-csel{display:block;grid-column:1;grid-row:2;min-width:0}
  .v7-cl-sort{grid-column:2;grid-row:2;width:100%;height:44px;padding:0 12px;gap:5px;min-width:0}
  .v7-cl-sort .v7-sr{position:static!important;width:auto;height:auto;margin:0;padding:0;overflow:visible;clip:auto;white-space:nowrap;font-size:13px;color:var(--v7-muted);flex:none}
  .v7-cl-sort .v7-sr::after{content:":"}
  .v7-cl-sort select{flex:1;min-width:0;height:40px;font-size:13.5px;-webkit-appearance:none;appearance:none;padding:0 16px 0 0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316283b' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right center/12px 12px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
  .v7-cl-stats{gap:8px}
  .v7-cl-stats div{padding:12px 10px}
  .v7-cl-stats dd{font-size:20px}
  .v7-cl-stats dt{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .v7-cl-stats .v7-cl-dt-l{display:none}.v7-cl-stats .v7-cl-dt-s{display:inline}
  .v7-cl-in input::placeholder{color:transparent}
  .v7-cl-in input:placeholder-shown~.v7-cl-ph{display:block;position:absolute;left:46px;right:18px;top:50%;transform:translateY(-50%);pointer-events:none;color:#757575;font-size:16px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .v7-hstats .v7-hs-l{display:none}.v7-hstats .v7-hs-s{display:inline}
  .v7-hstats span{white-space:nowrap}
}