/*
Theme Name: Peptides Store Child
Template: astra
Version: 2.0.0
Description: Astra child theme for Atlanta Peptides. Ports the approved demo design —
             dark hero, trust marquee, research-area grid, product data strips,
             batch-verification block, RUO compliance.
*/

/* ============================================================
   1. TOKENS — Clinical Teal
   ============================================================ */
:root{
  --brand:        #14b8a6;
  --brand-hover:  #0d9488;
  --on-brand:     #04211f;

  --ink-deep:     #0c2b33;   /* dark section background */
  --ink-deep-2:   #123d47;   /* grid lines on dark */
  --ink-deep-3:   #24444c;   /* dividers on dark */
  --on-deep:      #b6c6c9;
  --on-deep-dim:  #8ca4a8;

  /* Sampled from the supplied banner photography, which is a blue-navy night
     shot. The brand dark above is a teal green; butting the two together put a
     green stripe under every photo. Anything that has to sit flush against the
     artwork uses this instead. */
  --photo-deep:   #08141d;
  --photo-mid:    #0b1e29;

  --ink:          #0c1416;
  --ink-soft:     #5b6b6e;
  --paper:        #ffffff;
  --paper-alt:    #f6f8f8;
  --line:         #e2e8e8;
  --radius:       2px;

  --font-head:    "Barlow Condensed", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --page:         1280px;
}

body,button,input,select,textarea{font-family:var(--font-body);color:var(--ink)}
h1,h2,h3,h4,h5,h6{font-family:var(--font-head);font-weight:700;letter-spacing:.03em}
.ap-wrap{max-width:var(--page);margin:0 auto;padding-inline:28px}
.ap-mono{font-family:var(--font-mono)}

/* ============================================================
   2. BUTTONS
   ============================================================ */
.woocommerce a.button,.woocommerce button.button,.woocommerce .button.alt,
.wp-block-button__link,.ast-button,.ap-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--font-head);font-weight:700;font-size:16px;letter-spacing:.14em;
  text-transform:uppercase;padding:14px 28px;border-radius:var(--radius);
  background:var(--brand);color:var(--on-brand);border:1.5px solid var(--brand);
  transition:.18s;text-decoration:none}
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce .button.alt:hover,
.wp-block-button__link:hover,.ast-button:hover,.ap-btn:hover{
  background:var(--ink-deep);border-color:var(--ink-deep);color:#fff;transform:translateY(-2px)}
.ap-btn-ghost{background:transparent;color:#fff;border-color:#3f5a60}
.ap-btn-ghost:hover{background:transparent;border-color:var(--brand);color:var(--brand);transform:none}
input,select,textarea{border-radius:var(--radius)!important}

/* ============================================================
   3. ANNOUNCEMENT BAR
   ============================================================ */
.ap-topbar{background:var(--ink-deep);color:#fff;font-size:12.5px;letter-spacing:.1em;
  text-align:center;padding:9px 16px;font-weight:500}
.ap-topbar span{color:var(--brand)}

/* ============================================================
   4. HEADER (Astra overrides to match demo)
   ============================================================ */
.ast-primary-header-bar{border-bottom:1px solid var(--line)!important}
.site-title,.site-title a{font-family:var(--font-head)!important;font-weight:700!important;
  font-size:20px!important;letter-spacing:.09em!important;text-transform:uppercase!important;
  color:var(--ink)!important}
.site-description{font-family:var(--font-body)!important;font-size:8.5px!important;
  font-weight:600!important;letter-spacing:.24em!important;text-transform:uppercase!important;
  color:var(--ink-soft)!important}
.main-header-menu .menu-link,.main-navigation .menu-link{
  font-family:var(--font-head)!important;font-size:15px!important;font-weight:600!important;
  letter-spacing:.1em!important;text-transform:uppercase!important}
.main-header-menu .menu-item{position:relative}
.main-header-menu .menu-item > .menu-link::after{content:"";position:absolute;left:0;right:100%;
  bottom:8px;height:2px;background:var(--brand);transition:right .25s}
.main-header-menu .menu-item:hover > .menu-link::after{right:0}

/* ============================================================
   5. DARK SECTION BASE (hero + COA)
   ============================================================ */
.ap-dark{position:relative;background:var(--ink-deep);color:#fff;overflow:hidden}
.ap-dark::before{content:"";position:absolute;inset:0;
  background-image:linear-gradient(var(--ink-deep-2) 1px,transparent 1px),
                   linear-gradient(90deg,var(--ink-deep-2) 1px,transparent 1px);
  background-size:56px 56px;opacity:.55;pointer-events:none}
.ap-dark > *{position:relative;z-index:2}
.ap-eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:11px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--brand);margin-bottom:20px}
.ap-eyebrow i{width:22px;height:1px;background:var(--brand);display:block}

/* ---- HERO ---- */
.ap-hero::after{content:"";position:absolute;right:-12%;top:-30%;width:62%;height:170%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--brand) 26%,transparent),transparent);
  filter:blur(10px);pointer-events:none;z-index:1}
.ap-hero-in{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;
  padding-block:88px}
.ap-hero h1{font-size:clamp(42px,5.2vw,74px);line-height:.98;text-transform:uppercase;
  color:#fff;margin:0}
.ap-hero h1 em{font-style:normal;color:var(--brand)}
.ap-hero p{margin-top:20px;max-width:46ch;color:var(--on-deep);font-size:16.5px;line-height:1.68}
.ap-cta{display:flex;gap:13px;margin-top:32px;flex-wrap:wrap}
.ap-stats{display:flex;gap:34px;margin-top:48px;padding-top:24px;border-top:1px solid var(--ink-deep-3);flex-wrap:wrap}
.ap-stats b{display:block;font-family:var(--font-head);font-size:29px;font-weight:700;color:#fff;line-height:1}
.ap-stats span{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--on-deep-dim);margin-top:6px;display:block}
.ap-chain{width:100%;max-height:420px}
@media(max-width:940px){.ap-hero-in{grid-template-columns:1fr;padding-block:56px}.ap-chain{display:none}}

/* ============================================================
   6. TRUST MARQUEE
   ============================================================ */
.ap-marquee{background:var(--paper-alt);border-block:1px solid var(--line);overflow:hidden;padding:15px 0}
.ap-marquee-track{display:flex;width:max-content;animation:ap-scroll 34s linear infinite}
.ap-marquee-i{display:flex;align-items:center;gap:11px;padding-inline:30px;white-space:nowrap;
  font-size:12.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.ap-marquee-i s{width:5px;height:5px;background:var(--brand);border-radius:50%;text-decoration:none}
@keyframes ap-scroll{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.ap-marquee-track{animation:none}}

/* ============================================================
   7. SECTION HEADINGS
   ============================================================ */
.ap-sec{padding-block:72px}
.ap-sec-h{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:32px;
  gap:20px;flex-wrap:wrap}
.ap-sec-h h2{font-size:38px;text-transform:uppercase;line-height:1;margin:0;color:var(--ink)}
.ap-sec-h h2 s{text-decoration:none;color:var(--brand)}
.ap-sec-h p{color:var(--ink-soft);font-size:14.5px;margin:8px 0 0}
.ap-more{font-family:var(--font-head);font-weight:700;font-size:15px;letter-spacing:.14em;
  text-transform:uppercase;border-bottom:2px solid var(--brand);padding-bottom:3px;
  color:var(--ink);text-decoration:none}

/* ============================================================
   8. RESEARCH-AREA GRID
   ============================================================ */
.ap-cats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line)}
.ap-cat{background:var(--paper);padding:24px 22px;transition:.2s;display:block;text-decoration:none}
.ap-cat:hover{background:var(--ink-deep)}
.ap-cat:hover .ap-cat-n,.ap-cat:hover .ap-cat-c{color:#fff}
.ap-cat b{font-family:var(--font-head);font-size:11px;font-weight:700;letter-spacing:.2em;
  color:var(--brand);display:block;margin-bottom:10px}
.ap-cat-n{font-family:var(--font-head);font-size:22px;font-weight:600;text-transform:uppercase;
  line-height:1.1;color:var(--ink);transition:.2s}
.ap-cat-c{font-size:12px;color:var(--ink-soft);margin-top:7px;transition:.2s}
@media(max-width:900px){.ap-cats{grid-template-columns:repeat(2,1fr)}}

/* ============================================================
   9. PRODUCT CARDS — data strip is the signature element
   ============================================================ */
.woocommerce ul.products{display:grid!important;gap:18px!important;margin:0!important}
.woocommerce ul.products.columns-4{grid-template-columns:repeat(4,1fr)!important}
.woocommerce ul.products.columns-5{grid-template-columns:repeat(5,1fr)!important}
.woocommerce ul.products.columns-3{grid-template-columns:repeat(3,1fr)!important}
@media(max-width:1080px){.woocommerce ul.products[class*=columns-]{grid-template-columns:repeat(3,1fr)!important}}
@media(max-width:720px){.woocommerce ul.products[class*=columns-]{grid-template-columns:repeat(2,1fr)!important}}

.woocommerce ul.products li.product{width:auto!important;margin:0!important;float:none!important;
  border:1px solid var(--line);background:var(--paper);display:flex;flex-direction:column;
  transition:.22s;overflow:hidden;text-align:left;padding:0}
.woocommerce ul.products li.product:hover{border-color:var(--ink-deep);transform:translateY(-3px);
  box-shadow:0 14px 30px -18px rgba(0,0,0,.4)}
.woocommerce ul.products li.product a img{margin:0!important;aspect-ratio:1;object-fit:cover;
  width:100%;background:var(--paper-alt);border-bottom:1px solid var(--line);border-radius:0}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--font-body)!important;font-size:16px!important;font-weight:600!important;
  text-transform:none!important;padding:0!important;margin:6px 0 0!important;
  line-height:1.25;color:var(--ink)}
.ap-card-cat{font-size:9.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--brand);padding:0;margin:0}
.ap-card-sub{font-size:12.5px;color:var(--ink-soft);padding:4px 0 0;margin:0;line-height:1.45}
.ap-strip{display:flex;margin:12px 0 0;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;background:var(--paper-alt)}
.ap-strip div{flex:1;padding:7px 6px;text-align:center;border-right:1px solid var(--line)}
.ap-strip div:last-child{border:0}
.ap-strip b{display:block;font-family:var(--font-mono);font-size:11px;font-weight:700;color:var(--ink)}
.ap-strip span{display:block;font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft);margin-top:3px}
.woocommerce ul.products li.product .price{font-family:var(--font-mono)!important;
  font-size:15.5px!important;font-weight:700!important;color:var(--ink)!important;
  padding:0!important;margin:0!important;display:block;white-space:nowrap;line-height:1.3}
.woocommerce ul.products li.product .price .woocommerce-Price-amount{white-space:nowrap}
.woocommerce ul.products li.product .price del{opacity:.5;font-size:.8em}
.woocommerce ul.products li.product .button{font-family:var(--font-head)!important;
  font-size:13.5px!important;font-weight:700!important;letter-spacing:.12em!important;
  padding:9px 15px!important;margin:0!important;background:transparent!important;
  color:var(--ink)!important;border:1.5px solid var(--ink)!important;width:auto!important;
  border-radius:var(--radius)!important;transform:none!important;white-space:nowrap;flex:none}
.woocommerce ul.products li.product:hover .button{background:var(--brand)!important;
  border-color:var(--brand)!important;color:var(--on-brand)!important}

/* Astra emits the summary children in its own order; flex `order` puts them
   back in the demo's sequence, and the price/button footer is pinned bottom. */
.woocommerce ul.products li.product .astra-shop-summary-wrap{
  display:flex!important;flex-direction:column;flex:1 1 auto;width:100%;
  padding:15px 15px 17px}
.woocommerce ul.products li.product .astra-shop-summary-wrap > .ap-card-cat{order:1}
.woocommerce ul.products li.product .astra-shop-summary-wrap > .ast-loop-product__link,
.woocommerce ul.products li.product .astra-shop-summary-wrap > .woocommerce-loop-product__title{order:2}
.woocommerce ul.products li.product .astra-shop-summary-wrap > .ap-card-sub{order:3}
.woocommerce ul.products li.product .astra-shop-summary-wrap > .ap-strip{order:4}
.woocommerce ul.products li.product .astra-shop-summary-wrap > .ap-card-f{order:5}
.ap-card-f{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:auto;padding-top:14px}
.woocommerce ul.products li.product .astra-shop-summary-wrap > .screen-reader-text,
.woocommerce ul.products li.product .ast-woo-product-category,
.woocommerce ul.products li.product .ast-on-card-button,
.woocommerce ul.products li.product .star-rating,
.woocommerce ul.products li.product .woocommerce-product-rating{display:none!important}
.woocommerce ul.products li.product .ast-loop-product__link{text-decoration:none!important}
.astra-shop-thumbnail-wrap .ap-card-cat,
.astra-shop-thumbnail-wrap .ap-card-sub,
.astra-shop-thumbnail-wrap .ap-strip{display:none!important}

/* image area: drawn vial on a graph-paper field, like the demo */
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap{position:relative}
.ap-vialbox{aspect-ratio:1;display:grid;place-items:center;background:var(--paper-alt);
  border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.ap-vialbox:before{content:"";position:absolute;inset:0;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:26px 26px;opacity:.65}
.ap-vial{position:relative;z-index:2;transition:transform .3s}
.woocommerce ul.products li.product:hover .ap-vial{transform:scale(1.06) translateY(-3px)}
/* The badge is emitted inside the summary wrap and lifted onto the image
   corner from here, anchored to the card rather than the thumbnail. Keeping it
   out of the image in the markup is what lets the phone breakpoint below drop
   it back into the text flow. */
.woocommerce ul.products li.product{position:relative}
.ap-badge{position:absolute;top:10px;left:10px;z-index:3;background:var(--ink-deep);color:#fff;
  font-family:var(--font-head);font-size:10px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;padding:5px 9px;border-radius:var(--radius)}
.ap-badge.a{background:var(--brand);color:var(--on-brand)}

/* ============================================================
   10. BATCH VERIFICATION BLOCK
   ============================================================ */
.ap-coa-in{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center;padding-block:72px}
.ap-coa-in h2{font-size:42px;text-transform:uppercase;line-height:1.02;color:#fff;margin:0}
.ap-coa-in h2 s{text-decoration:none;color:var(--brand)}
.ap-coa-in p{color:var(--on-deep);margin-top:16px;font-size:16px;line-height:1.7;max-width:48ch}
.ap-lookup{display:flex;margin-top:26px;border:1.5px solid var(--ink-deep-3);
  border-radius:var(--radius);overflow:hidden;max-width:520px}
.ap-lookup input{flex:1;background:transparent;border:0!important;padding:14px 17px;color:#fff;
  font-family:var(--font-mono);font-size:14px;outline:none}
.ap-lookup input::placeholder{color:#6d878c}
.ap-lookup button{background:var(--brand);color:var(--on-brand);border:0;cursor:pointer;
  font-family:var(--font-head);font-weight:700;font-size:15px;letter-spacing:.14em;
  text-transform:uppercase;padding-inline:24px}
.ap-coa-card{background:rgba(255,255,255,.05);border:1px solid var(--ink-deep-3);
  border-radius:3px;padding:24px}
.ap-coa-row{display:flex;justify-content:space-between;gap:14px;padding:11px 0;
  border-bottom:1px solid var(--ink-deep-3);font-size:13.5px}
.ap-coa-row:last-child{border:0}
.ap-coa-row span{color:var(--on-deep-dim);letter-spacing:.06em;text-transform:uppercase;
  font-size:10.5px;font-weight:600;padding-top:2px;white-space:nowrap}
.ap-coa-row b{font-family:var(--font-mono);font-weight:500;text-align:right;color:#fff}
.ap-pass{color:var(--brand)}
.ap-miss{color:#ff8f8f}
@media(max-width:940px){.ap-coa-in{grid-template-columns:1fr;gap:34px}}

/* ============================================================
   11. COMMITMENT BAND
   ============================================================ */
.ap-commit{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line)}
.ap-cm{background:var(--paper);padding:32px 28px}
.ap-cm .num{font-family:var(--font-mono);font-size:11px;color:var(--brand);font-weight:700;letter-spacing:.1em}
.ap-cm h3{font-size:23px;font-weight:600;text-transform:uppercase;margin:13px 0 9px;color:var(--ink)}
.ap-cm p{font-size:14px;color:var(--ink-soft);line-height:1.65;margin:0}
@media(max-width:860px){.ap-commit{grid-template-columns:1fr}}

/* ============================================================
   12. PDP
   ============================================================ */
.woocommerce div.product .product_title{font-family:var(--font-head);font-size:44px;
  font-weight:700;text-transform:uppercase;line-height:1.02}
.woocommerce div.product p.price{font-family:var(--font-mono);font-size:30px;font-weight:700;color:var(--ink)}
.woocommerce-tabs ul.tabs{border-bottom:1px solid var(--line)!important;padding:0!important;margin-bottom:24px!important}
.woocommerce-tabs ul.tabs li{background:transparent!important;border:0!important;
  border-bottom:2px solid transparent!important;border-radius:0!important;margin:0!important}
.woocommerce-tabs ul.tabs li a{font-family:var(--font-body)!important;font-weight:600!important;
  font-size:15px!important;color:var(--ink-soft)!important;padding:14px 26px!important;text-transform:none!important}
.woocommerce-tabs ul.tabs li.active{border-bottom-color:var(--ink)!important}
.woocommerce-tabs ul.tabs li.active a{color:var(--ink)!important}
.woocommerce-tabs ul.tabs li::before,.woocommerce-tabs ul.tabs li::after{display:none!important}

.ap-spec{width:100%;border-collapse:collapse;margin:6px 0}
.ap-spec th,.ap-spec td{padding:11px 16px;border:1px solid var(--line);text-align:left;vertical-align:top;font-size:14px}
.ap-spec th{background:var(--paper-alt);width:30%;font-weight:600;font-family:var(--font-body);color:var(--ink)}
.ap-spec td{font-family:var(--font-mono);font-size:13px;color:var(--ink);word-break:break-word}
@media(max-width:600px){.ap-spec th{width:42%}}

.ap-coalink{display:inline-flex;align-items:center;gap:9px;margin:16px 0 0;padding:11px 18px;
  border:1.5px solid var(--brand);color:var(--brand);font-family:var(--font-head);font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;border-radius:var(--radius);transition:.18s;
  font-size:14px;text-decoration:none}
.ap-coalink:hover{background:var(--brand);color:var(--on-brand)}
.ap-ruo{border:1px solid #d9534f;background:rgba(217,83,79,.06);padding:12px 15px;margin-top:18px;
  font-size:12.8px;line-height:1.6;color:#8a2b28;border-radius:var(--radius)}
.ap-ruo b{display:block;text-transform:uppercase;letter-spacing:.08em;margin-bottom:2px;font-size:11px}
.ap-trustrow{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:22px}
.ap-trustrow div{background:var(--paper);padding:14px 12px;text-align:center}
.ap-trustrow b{display:block;font-family:var(--font-head);font-size:15px;text-transform:uppercase;color:var(--ink)}
.ap-trustrow span{font-size:10.5px;color:var(--ink-soft);letter-spacing:.06em}

/* variation swatches: equal-width buttons, dark when selected */
.wvs-style-squared .variable-item{border-radius:var(--radius)!important;min-width:96px!important}
.variable-items-wrapper .variable-item.selected,
.variable-items-wrapper .variable-item[aria-checked=true]{
  background:var(--ink)!important;color:#fff!important;box-shadow:none!important;border-color:var(--ink)!important}

/* ============================================================
   13. CART CONSENT GATE (Tagada redirects checkout — gate lives here)
   ============================================================ */
.ap-consent{border:1px solid var(--line);background:var(--paper-alt);padding:13px 15px;
  margin:0 0 14px;border-radius:var(--radius);transition:border-color .2s}
.ap-consent label{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.55;
  color:var(--ink-soft);cursor:pointer}
.ap-consent input[type=checkbox]{margin-top:2px;flex:none;accent-color:var(--brand)}
.ap-consent.ap-shake{border-color:#d9534f;background:rgba(217,83,79,.06);animation:ap-shake .4s}
@keyframes ap-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.wc-proceed-to-checkout .ap-disabled{opacity:.45;pointer-events:none}

/* ============================================================
   14. FOOTER
   ============================================================ */
.ap-ruo-footer{background:var(--paper-alt);border-top:1px solid var(--line);padding:20px 16px;
  text-align:center;font-size:12px;color:var(--ink-soft);line-height:1.7}
.ap-ruo-footer b{display:block;color:var(--ink);letter-spacing:.1em;text-transform:uppercase;
  font-size:11px;margin-bottom:4px}


/* ============================================================
   15. FULL-BLEED — beat Astra's .entry-content > * content-width rule
   ============================================================ */
.entry-content > .ap-dark,
.entry-content > .ap-marquee,
.entry-content > .ap-sec,
.ap-dark,.ap-marquee,.ap-sec{
  width:100vw!important;max-width:100vw!important;
  margin-left:calc(50% - 50vw)!important;
  margin-right:calc(50% - 50vw)!important}

.home .site-content .ast-container{max-width:100%!important;padding-left:0!important;padding-right:0!important}
.home .entry-content{margin-block:0!important}
.home .site-content{padding-block:0!important}
.home #primary,.home .site-main{margin-block:0!important;padding-block:0!important}
.home .entry-content > *:first-child{margin-top:0!important}

/* links inside our components never get theme underlines */
.ap-btn,.ap-more,.ap-cat,.ap-coalink,.ap-hero a,.ap-sec a,.ap-dark a{text-decoration:none!important}
.ap-btn:hover,.ap-more:hover,.ap-coalink:hover{text-decoration:none!important}

/* header spacing */
.ast-site-identity{padding-block:12px}


/* ============================================================
   16. SITE CHROME — custom header, mobile nav, search, footer
   Astra's own header/footer are hidden rather than unhooked, so a
   parent-theme change can only over-render, never under-render.
   ============================================================ */
#masthead.site-header,
.site-header .main-header-bar-wrap,
.ast-mobile-header-wrap,
.site-footer,
.ast-above-header-wrap,
.ast-below-header-wrap{display:none!important}

.ap-topbar{background:var(--ink-deep);color:#fff;font-size:12.5px;letter-spacing:.1em;
  text-align:center;padding:9px 16px;font-weight:500}
.ap-topbar span{color:var(--brand)}

.ap-header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.93);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.admin-bar .ap-header{top:32px}
@media(max-width:782px){.admin-bar .ap-header{top:46px}}

.ap-nav{display:flex;align-items:center;justify-content:space-between;height:72px;gap:20px}
/* Centre the menu on the page, not in the gap. `space-between` alone puts it
   midway between the logo and the icon cluster, and the icon cluster is far
   wider than the logo — so the menu sat about 60px left of centre and looked
   like a mistake. Equal flex bases on the two outer items make the middle one
   land on the page centre exactly, at any width. */
@media(min-width:901px){
  .ap-nav > .ap-logo{flex:1 1 0;min-width:0}
  .ap-nav > .ap-menu{flex:none}
  .ap-nav > .ap-navr{flex:1 1 0;min-width:0;justify-content:flex-end}
}
.ap-logo{display:flex;align-items:center;gap:11px;color:var(--ink);text-decoration:none!important}
/* The mark is now the client's badge logo, which is wider than it is tall and
   carries its own wordmark — so it is sized by height and the old text lockup
   beside it is gone. */
.ap-logo .ap-mark{width:auto;height:50px;flex:none;display:block}
/* Scoped to .ap-logo on purpose: WooCommerce ships `.woocommerce img{height:auto}`,
   which at (0,1,1) outranks a bare `.ap-mark` and blew the logo up to full size
   on every shop page. */
.ap-logo-t{font-family:var(--font-head),sans-serif;font-weight:700;font-size:20px;
  letter-spacing:.09em;line-height:1;text-transform:uppercase}
.ap-logo-t small{display:block;font-family:var(--font-body),sans-serif;font-size:8.5px;
  font-weight:600;letter-spacing:.24em;color:var(--ink-soft);margin-top:3px}

.ap-menu{display:flex;gap:30px;font-family:var(--font-head),sans-serif;font-size:15px;
  font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.ap-menu a{position:relative;padding-block:6px;color:var(--ink);text-decoration:none!important}
.ap-menu a:after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:var(--brand);transition:right .25s}
.ap-menu a:hover:after,.ap-menu a.on:after{right:0}

.ap-navr{display:flex;gap:18px;align-items:center;color:var(--ink-soft)}
.ap-navr button,.ap-navr a{display:grid;place-items:center;background:none;border:0;
  padding:0;color:inherit;cursor:pointer;text-decoration:none!important}
.ap-navr svg{display:block}
.ap-cartn{position:relative}
.ap-cart-count{position:absolute;top:-6px;right:-8px;background:var(--brand);color:var(--on-brand);
  font-size:10px;font-weight:700;font-style:normal;min-width:16px;height:16px;border-radius:9px;
  display:grid;place-items:center;padding:0 4px;line-height:1}

.ap-burger{display:none;flex-direction:column;gap:4px;width:22px}
.ap-burger span{display:block;height:2px;background:currentColor;width:100%}
.ap-mobnav{display:none;border-top:1px solid var(--line);background:var(--paper)}
.ap-mobnav a{display:block;padding:13px 0;border-bottom:1px solid var(--line);
  font-family:var(--font-head),sans-serif;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink);text-decoration:none!important}
body.ap-nav-open .ap-mobnav{display:block}
@media(max-width:900px){.ap-menu{display:none}.ap-burger{display:flex}}

.ap-searchbar{display:none;border-top:1px solid var(--line);background:var(--paper);padding:14px 0}
body.ap-search-open .ap-searchbar{display:block}
.ap-searchbar form{display:flex;border:1.5px solid var(--line);border-radius:var(--radius);overflow:hidden}
.ap-searchbar input[type=search]{flex:1;border:0;padding:13px 16px;font-size:14px;outline:none;
  background:var(--paper);color:var(--ink)}
.ap-searchbar button{background:var(--ink-deep);color:#fff;border:0;padding:0 26px;cursor:pointer;
  font-family:var(--font-head),sans-serif;font-weight:700;letter-spacing:.14em;text-transform:uppercase}

.ap-footer{background:var(--ink-deep);color:#fff;padding-top:60px}
.ap-fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px;padding-bottom:44px}
.ap-fgrid h4{font-family:var(--font-head),sans-serif;font-size:13px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--brand);margin-bottom:14px}
.ap-fgrid a{display:block;color:#a8bcc0;font-size:14px;padding:5px 0;text-decoration:none!important}
.ap-fgrid a:hover{color:#fff}
/* Contact block in the footer's brand column: phone and support address.
   Kept slightly brighter than the nav links because it is information, not
   navigation, and it has to be readable at a glance. */
.ap-fcontact{margin-top:14px}
.ap-fcontact a{display:inline-block;color:#d3e2e5;font-size:14px;padding:3px 0;
  text-decoration:none!important;letter-spacing:.01em}
.ap-fcontact a:first-child{font-family:var(--font-head),sans-serif;font-size:15px;
  letter-spacing:.04em;color:#fff}
.ap-fcontact a:hover{color:#fff;text-decoration:underline!important}
.ap-fgrid p{color:#a8bcc0;font-size:14px;line-height:1.7;max-width:34ch;margin-top:12px}
.ap-logo-d,.ap-logo-d .ap-logo-t{color:#fff}
.ap-logo-d .ap-logo-t small{color:var(--on-deep-dim)}
.ap-ruof{border-top:1px solid var(--ink-deep-3);padding:20px 0;font-size:12px;color:#7e979c;
  line-height:1.7;text-align:center}
.ap-ruof b{color:var(--on-deep);letter-spacing:.1em;text-transform:uppercase;font-size:11px}
.ap-fbot{border-top:1px solid var(--ink-deep-3);padding:17px 0;display:flex;
  justify-content:space-between;font-size:12px;color:#7e979c;flex-wrap:wrap;gap:10px}
@media(max-width:860px){.ap-fgrid{grid-template-columns:1fr 1fr}}


/* ============================================================
   17. CART DRAWER
   ============================================================ */
.ap-scrim{position:fixed;inset:0;background:rgba(6,14,16,.5);opacity:0;pointer-events:none;
  transition:.25s;z-index:80}
body.ap-cart-open .ap-scrim{opacity:1;pointer-events:auto}
.ap-drawer{position:fixed;top:0;right:0;bottom:0;width:400px;max-width:92vw;background:var(--paper);
  z-index:90;transform:translateX(100%);transition:transform .28s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column}
body.ap-cart-open .ap-drawer{transform:none}
.ap-dwrap{flex:1;display:flex;flex-direction:column;min-height:0}
.ap-dhead{display:flex;justify-content:space-between;align-items:center;padding:20px 22px;
  border-bottom:1px solid var(--line)}
.ap-dhead h3{font-family:var(--font-head),sans-serif;font-size:20px;text-transform:uppercase;
  letter-spacing:.1em;margin:0}
.ap-dhead button{background:none;border:0;cursor:pointer;color:var(--ink)}
.ap-dbody{flex:1;overflow-y:auto;padding:8px 22px}
.ap-ci{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--line);align-items:center}
.ap-ci-i{width:60px;height:60px;background:var(--paper-alt);border:1px solid var(--line);
  display:grid;place-items:center;flex:none;overflow:hidden}
.ap-ci-i img{width:100%;height:100%;object-fit:cover;margin:0}
.ap-ci-b{flex:1;min-width:0}
.ap-ci-b b{font-size:14.5px;display:block}
.ap-ci-b span{font-size:12px;color:var(--ink-soft);font-family:var(--font-mono),monospace}
.ap-rm{font-size:11.5px;color:var(--ink-soft);text-decoration:underline;margin-top:5px;display:inline-block}
.ap-ci-p{font-family:var(--font-mono),monospace;font-weight:700;font-size:14px}
.ap-dfoot{border-top:1px solid var(--line);padding:20px 22px}
.ap-drow{display:flex;justify-content:space-between;font-size:14px;color:var(--ink-soft);padding:5px 0}
.ap-drow.ap-tot{color:var(--ink);font-weight:700;font-size:17px;font-family:var(--font-mono),monospace;
  padding-top:12px;margin-top:8px;border-top:1px solid var(--line)}
.ap-dfoot .ap-btn{margin-top:14px}
.ap-dnote{font-size:11.5px;color:var(--ink-soft);text-align:center;margin-top:10px}
.ap-empty{text-align:center;padding:60px 20px;color:var(--ink-soft);font-size:14.5px}
.ap-full{width:100%}
.ap-toast{position:fixed;bottom:26px;left:50%;transform:translate(-50%,20px);background:var(--ink-deep);
  color:#fff;padding:13px 22px;border-radius:var(--radius);font-size:14px;z-index:95;opacity:0;
  transition:.25s;pointer-events:none}
.ap-toast.on{opacity:1;transform:translate(-50%,0)}


/* ============================================================
   18. PAGE HEADER (dark banner) — shop, category, PDP, COA
   ============================================================ */
.ap-phead{background:var(--ink-deep);color:#fff;position:relative;overflow:hidden;
  width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
/* When a supplied banner is behind the header, the artwork carries the visual
   weight — the scrim only has to keep the breadcrumb and h1 readable over it. */
/* Scrim in the photograph's own navy, not the brand teal. Teal over a blue
   night-skyline shot turned the whole band a muddy green — the artwork looked
   dirty rather than dark. Left-weighted so the type has a solid field to sit
   on and the vial on the right stays visible. */
.ap-phead.has-bg{background-size:cover;background-position:center;background-repeat:no-repeat;
  background-color:#071119;
  /* The banners are composed at 1800x430 for this band. Holding that ratio
     means the browser never crops them, so the product on the shop header
     keeps its cap and its base — a letterboxed crop of a standing vial was
     what made these headers unreadable in the first place. Content still wins
     if it is taller, which is what keeps narrow windows from clipping the h1. */
  aspect-ratio:1800/430;min-height:210px;display:flex;align-items:center}
.ap-phead.has-bg > .ap-wrap{width:100%}
/* Belt and braces with the the_content filter: a whitespace-only paragraph
   is not :empty, but a genuinely empty one is, and either way it has no
   business reserving 25px above a full-bleed banner. */
.entry-content > p:empty{display:none}
@media(max-width:700px){.ap-phead.has-bg{aspect-ratio:auto;min-height:0;display:block}}
.ap-phead.has-bg:before{background:linear-gradient(90deg,rgba(5,14,21,.92) 0%,rgba(5,14,21,.74) 42%,rgba(5,14,21,.26) 100%)!important;opacity:1!important}
@media(max-width:700px){
  .ap-phead.has-bg:before{background:rgba(5,14,21,.80)!important}
}

.ap-phead:before{content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:44px 44px}
.ap-phead-in{position:relative;z-index:2;padding-block:52px}
.ap-phead-in.tight{padding-block:26px}
.ap-phead h1{font-family:var(--font-head),sans-serif;font-size:46px;font-weight:700;
  text-transform:uppercase;line-height:1.03;color:#fff;margin:0}
.ap-phead p{color:var(--on-deep-dim);margin-top:10px;font-size:15px}
.ap-crumb{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--on-deep-dim);margin-bottom:14px}
.ap-phead-in.tight .ap-crumb{margin-bottom:0}
.ap-crumb a{color:inherit;text-decoration:none!important}
.ap-crumb a:hover{color:var(--brand)}

/* Pages whose content opens with the full-bleed banner: pull it up under the
   navigation, the way the shop archive already sits.
   The 24px is Astra's container spacing. It is applied as a negative margin
   rather than by zeroing a padding because there is no padding to zero — with
   padding, border and every descendant margin forced to 0 the gap survived, so
   it is a margin collapsing through from somewhere in Astra's wrapper chain and
   landing on .site-content's box. :has() keeps this off pages that legitimately
   want the breathing room. */
.site-content:has(> .ast-container .entry-content > .ap-phead) > .ast-container{margin-top:-24px}

/* archive/product pages: kill Astra's inner padding so the banner sits flush */
.woocommerce.archive .site-content .ast-container,
.woocommerce.single-product .site-content .ast-container,
.page .site-content .ast-container{max-width:100%!important;padding-inline:0!important}
.woocommerce.archive .site-content,
.woocommerce.single-product .site-content{padding-top:0!important}
.woocommerce.archive #primary,
.woocommerce.single-product #primary,
.page #primary{margin-block:0!important;padding-block:0!important;width:100%!important}
.woocommerce.archive #secondary,
.woocommerce.single-product #secondary{display:none!important}


/* ============================================================
   19. SHOP ARCHIVE — sidebar filter + toolbar
   ============================================================ */
.ap-shop{display:grid;grid-template-columns:236px 1fr;gap:36px;align-items:start;
  max-width:var(--page);margin:0 auto;padding:44px 28px 60px}
@media(max-width:900px){.ap-shop{grid-template-columns:1fr;gap:26px}}
.ap-sideblock+.ap-sideblock{margin-top:28px}
.ap-sideblock h4{font-family:var(--font-head),sans-serif;font-size:13px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink);padding-bottom:11px;margin-bottom:6px;
  border-bottom:1px solid var(--line)}
.ap-sideblock p{font-size:13px;color:var(--ink-soft);line-height:1.6;padding-top:4px}
.ap-sideblock p b{color:var(--ink)}
.ap-fbtn{position:relative;display:flex;justify-content:space-between;align-items:center;
  width:100%;padding:8px 0 8px 12px;font-size:14px;color:var(--ink-soft);
  text-decoration:none!important;transition:.15s}
.ap-fbtn:hover{color:var(--ink)}
.ap-fbtn.on{color:var(--ink);font-weight:600}
.ap-fbtn.on:before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:14px;background:var(--brand)}
.ap-fbtn i{font-style:normal;font-family:var(--font-mono),monospace;font-size:11px;color:var(--ink-soft)}
.ap-sideblock .ap-more{display:inline-block;margin-top:12px;font-size:13px;color:var(--brand)}

.ap-shopmain{min-width:0}
.woocommerce .ap-shopmain .woocommerce-result-count{float:none;margin:0;font-size:13px;color:var(--ink-soft)}
.woocommerce .ap-shopmain .woocommerce-ordering{float:none;margin:0}
.woocommerce .ap-shopmain .woocommerce-ordering select{border:1px solid var(--line);padding:9px 12px;
  border-radius:var(--radius);font-size:13.5px;background:var(--paper);color:var(--ink)}
.ap-shopmain>.woocommerce-result-count,
.ap-shopmain>.woocommerce-ordering{display:inline-block;vertical-align:middle}
.ap-shopmain{position:relative}
.ap-shopmain>form.woocommerce-ordering{float:right}
.ap-shopmain>.woocommerce-result-count{padding-top:10px}
.ap-shopmain>ul.products{clear:both;padding-top:16px;border-top:1px solid var(--line);margin-top:16px!important}
.woocommerce nav.woocommerce-pagination{margin-top:36px}
.woocommerce nav.woocommerce-pagination ul{border:0;gap:6px;display:flex}
.woocommerce nav.woocommerce-pagination ul li{border:1px solid var(--line);border-radius:var(--radius)}
.woocommerce nav.woocommerce-pagination ul li .page-numbers.current{background:var(--ink-deep);color:#fff}


/* ============================================================
   20. PRODUCT PAGE
   ============================================================ */
.single-product div.product{max-width:var(--page);margin:0 auto!important;padding:44px 28px 20px;
  display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:start}
@media(max-width:900px){.single-product div.product{grid-template-columns:1fr;gap:30px}}
.single-product div.product .woocommerce-product-gallery{width:100%!important;float:none!important;
  margin:0!important;border:1px solid var(--line);background:var(--paper-alt)}
.single-product div.product .summary{width:100%!important;float:none!important;margin:0!important;
  display:flex;flex-direction:column}
.single-product div.product .woocommerce-tabs,
.single-product div.product .related,
.single-product div.product .up-sells{grid-column:1/-1}

.ap-pdp-cat{font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--brand);margin-bottom:2px}
.single-product div.product .product_title{font-family:var(--font-head),sans-serif!important;
  font-size:44px!important;font-weight:700!important;text-transform:uppercase;line-height:1.02;
  margin:6px 0 0!important;color:var(--ink)}
.single-product div.product .woocommerce-product-details__short-description{
  color:var(--ink-soft);font-size:15.5px;line-height:1.65;margin-top:10px}
.single-product div.product p.price,
.single-product div.product .price{font-family:var(--font-mono),monospace!important;
  font-size:30px!important;font-weight:700!important;color:var(--ink)!important;margin:20px 0 4px!important}
.single-product div.product .price del{opacity:.5;font-size:.7em}
.ap-instock{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-soft)}
.ap-instock s{width:7px;height:7px;background:var(--brand);border-radius:50%;text-decoration:none}
.ap-optlab{font-family:var(--font-head),sans-serif;font-size:13px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-soft);margin:24px 0 10px}

.single-product table.variations{margin:0!important;border:0}
.single-product table.variations th,
.single-product table.variations td{border:0!important;padding:0!important;display:block}
.single-product table.variations label{display:none}
.single-product table.variations select{display:none}
.single-product .reset_variations{font-size:12px;color:var(--ink-soft)}
.ap-swatches{display:flex;gap:9px;flex-wrap:wrap}
.ap-sw{min-width:96px;text-align:center;padding:12px 16px;border:1px solid var(--line);
  background:var(--paper);border-radius:var(--radius);transition:.15s;font-size:14px;
  cursor:pointer;font-family:var(--font-body),sans-serif;color:var(--ink)}
.ap-sw:hover{background:var(--paper-alt)}
.ap-sw.on{background:var(--ink-deep);color:#fff;border-color:var(--ink-deep)}

.single-product form.cart{display:flex;gap:12px;margin-top:22px!important;align-items:stretch;flex-wrap:wrap}
.single-product form.variations_form{display:block}
.single-product .woocommerce-variation-add-to-cart{display:flex;gap:12px;align-items:stretch;margin-top:22px}
.single-product form.cart .quantity{display:flex;border:1px solid var(--line);border-radius:var(--radius)}
.single-product form.cart .quantity input{width:64px;border:0;text-align:center;
  font-family:var(--font-mono),monospace;font-weight:700;background:transparent}
.single-product form.cart button.single_add_to_cart_button{flex:1;background:var(--ink-deep)!important;
  color:#fff!important;border:0!important;font-family:var(--font-head),sans-serif!important;
  font-weight:700!important;letter-spacing:.13em!important;text-transform:uppercase!important;
  font-size:15px!important;padding:14px 26px!important;border-radius:var(--radius)!important}
.single-product form.cart button.single_add_to_cart_button:hover{background:var(--brand)!important;
  color:var(--on-brand)!important}

.ap-trustrow{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:22px}
.ap-trustrow div{background:var(--paper);padding:14px 12px;text-align:center}
.ap-trustrow b{display:block;font-family:var(--font-head),sans-serif;font-size:15px;text-transform:uppercase}
.ap-trustrow span{font-size:10.5px;color:var(--ink-soft);letter-spacing:.06em}

/* tabs */
.woocommerce-tabs{padding-top:26px}
.woocommerce div.product .woocommerce-tabs ul.tabs{padding:0!important;margin:0 0 24px!important;
  border-bottom:1px solid var(--line);display:flex;gap:0;flex-wrap:wrap}
.woocommerce div.product .woocommerce-tabs ul.tabs:before{display:none}
.woocommerce div.product .woocommerce-tabs ul.tabs li{background:none!important;border:0!important;
  border-radius:0!important;margin:0!important;padding:0!important}
.woocommerce div.product .woocommerce-tabs ul.tabs li:before,
.woocommerce div.product .woocommerce-tabs ul.tabs li:after{display:none!important}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{padding:14px 26px!important;font-weight:600;
  font-size:15px;color:var(--ink-soft)!important;border-bottom:2px solid transparent;
  margin-bottom:-1px;display:block;text-decoration:none!important}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:var(--ink)!important;
  border-bottom-color:var(--ink)}
.woocommerce div.product .woocommerce-tabs .panel{max-width:900px;color:var(--ink-soft);
  line-height:1.75;font-size:15px;margin:0}
.woocommerce div.product .woocommerce-tabs .panel h2{display:none}

.woocommerce div.product .related>h2,
.woocommerce div.product .up-sells>h2{font-family:var(--font-head),sans-serif;font-weight:700;
  font-size:38px;text-transform:uppercase;letter-spacing:-.01em;margin-bottom:26px;color:var(--ink)}


/* ============================================================
   21. COA REGISTER PAGE
   ============================================================ */
.ap-coapage{padding:44px 28px 64px}
.ap-searchbig{display:flex;border:1.5px solid var(--line);border-radius:var(--radius);
  overflow:hidden;max-width:560px}
.ap-searchbig input{flex:1;border:0;padding:15px 18px;font-family:var(--font-mono),monospace;
  font-size:14px;outline:none;background:var(--paper);color:var(--ink)}
.ap-searchbig button{background:var(--ink-deep);color:#fff;border:0;padding:0 26px;cursor:pointer;
  font-family:var(--font-head),sans-serif;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.ap-coanote{font-size:13.5px;color:var(--ink-soft);margin-top:12px}
.ap-coanote b{color:var(--ink)}
.ap-tablewrap{overflow-x:auto;margin-top:28px}
.ap-coatable{width:100%;border-collapse:collapse;font-size:14px}
.ap-coatable th{text-align:left;padding:12px 14px;background:var(--paper-alt);
  border:1px solid var(--line);font-family:var(--font-head),sans-serif;font-size:12.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.ap-coatable td{padding:13px 14px;border:1px solid var(--line);
  font-family:var(--font-mono),monospace;font-size:13px;color:var(--ink)}
.ap-coatable tr:hover td{background:var(--paper-alt)}
.ap-coatable .nm{font-family:var(--font-body),sans-serif;font-weight:600}
.ap-coatable .nm a{color:var(--ink);text-decoration:none!important}
.ap-coatable .nm a:hover{color:var(--brand)}
.ap-coatable .pur{color:var(--brand);font-weight:700}
.ap-dl{color:var(--brand);font-weight:700;text-decoration:none!important}
.ap-pending{color:#9aa3a6;font-weight:600;font-style:italic;font-family:var(--font-mono),monospace;font-size:12px}

/* --- COA register: filters, two-line product cell, summary strip ---------- */
.ap-coafilters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:22px 0 14px}
.ap-chip{font-family:var(--font-head),sans-serif;font-size:13px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;padding:8px 15px;border-radius:999px;
  border:1.5px solid var(--line);background:#fff;color:var(--ink-soft);cursor:pointer;
  transition:.15s}
.ap-chip:hover{border-color:var(--brand);color:var(--ink)}
.ap-chip.on{background:var(--ink-deep);border-color:var(--ink-deep);color:#fff}
.ap-coacount{margin-left:auto;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft)}

.ap-coaname{display:flex;align-items:baseline;gap:9px;font-weight:600}
.ap-coatable .pur{font-family:var(--font-mono),monospace;font-size:12.5px;font-weight:700}
/* The lab line is reference detail — present, checkable, and not competing with
   the compound name for attention. */
.ap-coameta{display:block;margin-top:3px;font-size:12px;color:var(--ink-soft);
  font-family:var(--font-mono),monospace;letter-spacing:-.01em}
.ap-coacat{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft)}

.ap-coastats{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.ap-coastats > div{flex:1 1 180px;border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 22px;background:var(--paper-alt)}
.ap-coastats b{display:block;font-family:var(--font-head),sans-serif;font-size:30px;
  font-weight:700;line-height:1;color:var(--ink)}
.ap-coastats span{display:block;margin-top:7px;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft)}
.ap-coanote-sm{font-size:12px;margin-top:14px}
@media(max-width:700px){
  .ap-coacount{margin-left:0;width:100%}
  .ap-coastats b{font-size:25px}
}
.ap-noresult{text-align:center;padding:34px;color:var(--ink-soft)}


/* ============================================================
   22. CONTENT PAGES — policies, about, learn, contact
   ============================================================ */
.ap-page{max-width:860px;margin:0 auto;padding:48px 28px 64px;font-size:15.5px;
  line-height:1.75;color:var(--ink-soft)}
.ap-page h2{font-family:var(--font-head),sans-serif;font-size:28px;font-weight:700;
  text-transform:uppercase;color:var(--ink);margin:34px 0 12px;letter-spacing:.01em}
.ap-page h3{font-size:17px;font-weight:700;color:var(--ink);margin:22px 0 8px}
.ap-page p{margin-bottom:14px}
.ap-page ul{margin:0 0 16px 20px}
.ap-page li{margin-bottom:7px}
.ap-page a{color:var(--brand)}
.ap-page table{width:100%;border-collapse:collapse;margin:8px 0 20px}
.ap-page th,.ap-page td{border:1px solid var(--line);padding:11px 15px;text-align:left;font-size:14.5px}
.ap-page th{background:var(--paper-alt);color:var(--ink);font-weight:600;width:32%}

/* WooCommerce account/cart/checkout keep a reading column of their own */
.woocommerce-cart .entry-content,
.woocommerce-checkout .entry-content,
.woocommerce-account .entry-content,
.search .entry-content,
.error404 .entry-content{max-width:var(--page);margin:0 auto!important;padding:44px 28px 64px}


/* ============================================================
   23. ARCHIVE / SINGLE CONTAINER RESET
   Astra makes .ast-container a flex row (content + sidebar). Our
   full-bleed banner has to be a block-level sibling, not a flex item.
   ============================================================ */
.woocommerce.archive .site-content .ast-container,
.woocommerce.single-product .site-content .ast-container,
.page .site-content .ast-container,
.search .site-content .ast-container,
.error404 .site-content .ast-container{display:block!important}
.woocommerce.archive #primary,
.woocommerce.single-product #primary,
.page #primary,.search #primary{max-width:100%!important;float:none!important}
.woocommerce.archive .site-main,
.woocommerce.single-product .site-main,
.page .site-main{margin:0!important;padding:0!important}
.woocommerce.archive .ast-woocommerce-container{padding:0!important}
.woocommerce .woocommerce-breadcrumb{display:none!important}
.woocommerce.archive .site-content > .ast-container > .ast-row{display:block!important}

/* term description, if any, sits under the banner in the reading column */
.woocommerce .term-description{max-width:var(--page);margin:0 auto;padding:26px 28px 0;
  color:var(--ink-soft);font-size:15px}

/* shop toolbar: count left, sort hard right */
.ap-shopmain{display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:16px}
.ap-shopmain > *{grid-column:1/-1}
.ap-shopmain > .woocommerce-result-count{grid-column:1;margin:0!important}
.ap-shopmain > .woocommerce-ordering{grid-column:2;justify-self:end;margin:0!important}
.ap-shopmain > ul.products{margin-top:16px!important}


/* ============================================================
   24. CONTACT
   ============================================================ */
.ap-contact{max-width:860px;margin:0 auto;padding:48px 28px 70px}
.ap-contact-details h2{font-family:var(--font-head);font-size:30px;font-weight:700;
  text-transform:uppercase;color:var(--ink);margin:0 0 14px;letter-spacing:.01em}
.ap-cbig{font-family:var(--font-head);font-size:24px;font-weight:700;letter-spacing:.04em;margin:0 0 8px}
.ap-cbig a{color:var(--ink);text-decoration:none!important}
.ap-cmail{font-size:16px;font-weight:600;letter-spacing:.04em;margin:0 0 16px}
.ap-cmail a{color:var(--brand);text-decoration:none!important}
.ap-caddr{color:var(--ink-soft);font-size:15.5px;line-height:1.7;margin:0 0 16px}
.ap-chours{color:var(--ink-soft);font-size:14px;line-height:1.7;margin:0}

.ap-notice{margin-top:26px;padding:14px 18px;border-radius:var(--radius);font-size:14.5px}
.ap-notice.ok{border:1px solid var(--brand);background:rgba(20,184,166,.08);color:var(--ink)}
.ap-notice.bad{border:1px solid #d9534f;background:rgba(217,83,79,.07);color:#8a2b28}

.ap-form{margin-top:34px;display:flex;flex-direction:column;gap:14px}
.ap-frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:600px){.ap-frow{grid-template-columns:1fr}}
.ap-form input[type=text],.ap-form input[type=email],.ap-form input[type=tel],
.ap-form textarea{width:100%;border:1px solid var(--line)!important;background:var(--paper-alt);
  padding:15px 17px;font-size:15px;color:var(--ink);border-radius:var(--radius)!important;
  font-family:var(--font-body)}
.ap-form input:focus,.ap-form textarea:focus{outline:none;border-color:var(--ink-deep)!important;
  background:var(--paper)}
.ap-form textarea{resize:vertical;min-height:180px;line-height:1.6}
.ap-form button{align-self:flex-start;margin-top:6px;cursor:pointer}
.ap-fnote{font-size:12.5px;color:var(--ink-soft);line-height:1.65;margin-top:4px}
.ap-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}


/* ============================================================
   25. PRODUCT PAGE — order and cleanup
   Astra emits summary children in its own sequence; flex `order`
   restores the demo's: category → title → lede → price → stock →
   size → cart → COA → RUO → trust.
   ============================================================ */
.single-product div.product .summary > .ap-pdp-cat{order:1}
.single-product div.product .summary > .product_title{order:2}
.single-product div.product .summary > .woocommerce-product-details__short-description{order:3}
.single-product div.product .summary > .price{order:4}
.single-product div.product .summary > .ap-instock{order:5}
.single-product div.product .summary > .ap-optlab,
.single-product div.product .summary > .ap-swatches{order:6}
.single-product div.product .summary > form.cart,
.single-product div.product .summary > .variations_form,
.single-product div.product .summary > .stock{order:7}
.single-product div.product .summary > .ap-coalink{order:8}
.single-product div.product .summary > .ap-ruo{order:9}
.single-product div.product .summary > .ap-trustrow{order:10}

/* Astra/WooCommerce furniture the demo doesn't have */
.single-product .summary > .woocommerce-breadcrumb,
.single-product .summary .single-product-category,
.single-product .summary .product_meta,
.single-product .ast-stock-detail,
.single-product .summary > .stock,
.single-product .woocommerce-product-rating,
.single-product .summary .woocommerce-variation-price,
.single-product .summary .woocommerce-variation-availability{display:none!important}
.single-product .summary > .ap-trustrow ~ .ap-trustrow{display:none!important}

/* size block */
.single-product .summary > .ap-optlab{margin:24px 0 10px}
.ap-sw small{display:block;font-family:var(--font-mono),monospace;font-size:11px;
  opacity:.7;margin-top:3px}
.ap-sw small .amount,.ap-sw small bdi{color:inherit!important;font-size:inherit!important;font-weight:400!important}
span.ap-sw{display:inline-block;cursor:default}

/* the drawn vial in the gallery frame */
.ap-gal{aspect-ratio:1;display:grid;place-items:center;position:relative;overflow:hidden;
  background:var(--paper-alt)}
.ap-gal:before{content:"";position:absolute;inset:0;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:32px 32px;opacity:.6}
.ap-gal .ap-vial{position:relative;z-index:2}
.single-product .woocommerce-product-gallery__trigger{display:none}

/* Astra page title band on ordinary pages duplicates our banner */
.page .entry-title,
.page .ast-single-entry-banner,
.page .ast-archive-description{display:none!important}

/* Variation Swatches plugin, restyled to the demo's size chips */
.single-product .woo-variation-swatches .variable-items-wrapper{display:flex!important;gap:9px;
  flex-wrap:wrap;padding:0!important;margin:0!important;list-style:none}
.single-product .variable-items-wrapper li.variable-item{margin:0!important;padding:0!important;
  box-shadow:none!important;border:0!important;background:none!important;min-width:0!important;
  width:auto!important;height:auto!important;border-radius:0!important}
.single-product .variable-items-wrapper li.variable-item .variable-item-span{
  display:block;min-width:96px;text-align:center;padding:12px 16px;
  border:1px solid var(--line);background:var(--paper);border-radius:var(--radius);
  transition:.15s;font-size:14px;line-height:1.2;color:var(--ink);font-weight:500;
  height:auto!important;width:auto!important;margin:0!important}
.single-product .variable-items-wrapper li.variable-item:hover .variable-item-span{background:var(--paper-alt)}
.single-product .variable-items-wrapper li.variable-item.selected .variable-item-span,
.single-product .variable-items-wrapper li.variable-item[aria-checked=true] .variable-item-span{
  background:var(--ink-deep);color:#fff;border-color:var(--ink-deep)}
.single-product .variable-items-wrapper li.variable-item.radio-variable-item:before,
.single-product .variable-items-wrapper li.variable-item input{display:none!important}
.ap-swprice{display:block;font-family:var(--font-mono),monospace;font-size:11px;
  opacity:.7;margin-top:3px;font-weight:400}

/* the plugin's own attribute label, restyled as the demo's eyebrow */
.single-product table.variations th.label label,
.single-product table.variations .label{font-family:var(--font-head),sans-serif!important;
  font-size:13px!important;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft)!important;font-weight:600!important;display:block!important;
  margin:0 0 10px!important}
.single-product table.variations .woo-selected-variation-item-name{display:none!important}
.single-product table.variations select{display:none!important}

/* size chips carry the size only — price lives in the price line */
.ap-sw small,.ap-swprice{display:none!important}
.single-product .reset_variations,
.single-product table.variations a.reset_variations{display:none!important}
.single-product .variable-items-wrapper li.variable-item.selected .variable-item-span,
.single-product .variable-items-wrapper li.variable-item[aria-checked="true"] .variable-item-span,
.single-product .variable-items-wrapper li.variable-item.selected span,
.single-product .variable-items-wrapper li.variable-item[class*="selected"] span{
  background:var(--ink-deep)!important;color:#fff!important;border-color:var(--ink-deep)!important;
  opacity:1!important}
.single-product .variable-items-wrapper li.variable-item{opacity:1!important}

/* chip sizing has to beat the plugin's inline dimensions */
.single-product .variable-items-wrapper li.variable-item .variable-item-span{
  min-width:96px!important;padding:12px 16px!important;font-size:14px!important;
  line-height:1.2!important;display:block!important}
.single-product .woocommerce-variation-price{display:none!important}

/* Size chips keep the demo's footprint even without the price line under them. */
.single-product .variable-items-wrapper li.variable-item .variable-item-span,
.ap-swatches .ap-sw{
  min-width:96px!important;min-height:62px!important;height:auto!important;
  padding:12px 18px!important;font-size:15px!important;line-height:1.2!important;
  display:flex!important;align-items:center;justify-content:center;
  box-sizing:border-box}
.single-product .variable-items-wrapper li.variable-item{min-height:62px}

/* a price range plus a button has to survive a 235px card */
.ap-card-f .price{flex:1 1 auto;min-width:0;font-size:14.5px!important;
  overflow:hidden;text-overflow:ellipsis}
.ap-card-f .button{flex:0 0 auto}

/* Buy It Now — full width, own line, same colour as Add to Cart */
.ap-buynow{flex:0 0 100%;width:100%;order:9;margin-top:12px;cursor:pointer;
  background:var(--ink-deep);color:#fff;border:1.5px solid var(--ink-deep);
  font-family:var(--font-head),sans-serif;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;font-size:15px;padding:14px 26px;border-radius:var(--radius);
  transition:.18s}
.ap-buynow:hover{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.single-product form.cart,
.single-product .woocommerce-variation-add-to-cart{flex-wrap:wrap}

/* COA link matches Buy It Now: full width, centred */
.single-product .summary > .ap-coalink{display:flex;width:100%;justify-content:center;
  align-items:center;gap:9px;text-align:center;padding:14px 26px;margin-top:16px}


/* ============================================================
   26. CART / CHECKOUT (classic shortcode — the block cart has no
   hook for the compliance gate, so we run the shortcode version)
   ============================================================ */
.ap-cartwrap{max-width:var(--page);margin:0 auto;padding:44px 28px 64px}
.woocommerce-cart .entry-content,
.woocommerce-checkout .entry-content{max-width:100%!important;padding:0!important;margin:0!important}

.woocommerce table.shop_table{border:1px solid var(--line);border-radius:var(--radius);
  border-collapse:collapse;width:100%}
.woocommerce table.shop_table th{background:var(--paper-alt);border-bottom:1px solid var(--line);
  font-family:var(--font-head),sans-serif;font-size:12.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);padding:14px 16px;text-align:left}
.woocommerce table.shop_table td{border-top:1px solid var(--line);padding:16px;vertical-align:middle}
.woocommerce table.shop_table .product-name a{color:var(--ink);font-weight:600;text-decoration:none!important}
.woocommerce table.shop_table .product-price,
.woocommerce table.shop_table .product-subtotal,
.woocommerce table.shop_table .amount{font-family:var(--font-mono),monospace}
.woocommerce table.shop_table img{width:64px;border:1px solid var(--line)}
.woocommerce .cart-collaterals{margin-top:34px}
.woocommerce .cart_totals h2,
.woocommerce-checkout h3,
.woocommerce-billing-fields h3{font-family:var(--font-head),sans-serif;font-size:22px;
  text-transform:uppercase;letter-spacing:.04em;color:var(--ink)}
.woocommerce .cart_totals table{border:1px solid var(--line)}
.woocommerce .checkout-button,
.woocommerce #place_order{width:100%;background:var(--ink-deep)!important;color:#fff!important;
  border:1.5px solid var(--ink-deep)!important}
.woocommerce .checkout-button:hover,
.woocommerce #place_order:hover{background:var(--brand)!important;border-color:var(--brand)!important;
  color:var(--on-brand)!important}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select{border:1px solid var(--line)!important;padding:13px 15px;
  background:var(--paper-alt);border-radius:var(--radius)!important}
.woocommerce-message,.woocommerce-info{border-top-color:var(--brand)!important}
.woocommerce-message::before,.woocommerce-info::before{color:var(--brand)!important}

/* the 18+ / research-use gate */
.ap-consent{display:flex;gap:11px;align-items:flex-start;font-size:13px;color:var(--ink-soft);
  line-height:1.55;background:var(--paper-alt);border:1px solid var(--line);
  padding:14px 16px;margin:0 0 14px;border-radius:var(--radius)}
.ap-consent input{margin-top:2px;accent-color:var(--brand);flex:none}
.ap-consent.err{border-color:#d9534f;background:rgba(217,83,79,.06);color:#8a2b28}
.wc-proceed-to-checkout .checkout-button.ap-disabled,
.wc-proceed-to-checkout a.button.ap-disabled{opacity:.4;cursor:not-allowed}
.ap-consent.ap-shake{animation:ap-shake .45s;border-color:#d9534f;background:rgba(217,83,79,.07)}
@keyframes ap-shake{
  0%,100%{transform:translateX(0)}
  20%,60%{transform:translateX(-5px)}
  40%,80%{transform:translateX(5px)}}
@media(prefers-reduced-motion:reduce){.ap-consent.ap-shake{animation:none}}


/* ============================================================
   27. ACCEPTED PAYMENT MARKS
   ============================================================ */
.ap-payrow{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;align-items:center;
  padding:22px 0;border-top:1px solid var(--ink-deep-3)}
.ap-pay{display:inline-flex;align-items:center;justify-content:center;gap:3px;
  height:34px;min-width:56px;padding:0 11px;border-radius:4px;background:#fff;
  font-family:var(--font-body),sans-serif;font-size:13px;font-weight:800;
  letter-spacing:.02em;line-height:1}
.ap-pay svg{display:block;height:20px;width:auto}
.ap-pay-visa{color:#1a1f71;font-style:italic;letter-spacing:.06em}
.ap-pay-mc{padding:0 8px}
.ap-pay-mc svg{height:22px}
.ap-pay-amex{background:#1f72cd;color:#fff;letter-spacing:.04em}
.ap-pay-apple{background:#000;color:#fff;font-weight:600;letter-spacing:0}
.ap-pay-apple .ap-apple{height:15px;margin-right:1px}
.ap-pay-ach{background:transparent;color:#cfe0e2;border:1.5px solid #4a6b70;letter-spacing:.08em}
@media(max-width:520px){.ap-payrow{gap:8px}.ap-pay{height:30px;min-width:48px;font-size:12px}}


/* ============================================================
   28. AGE GATE — our own card, not the plugin's default panel
   Dark, gridded, molecule mark on top: the same language as the
   hero, so the first thing a visitor sees already looks like us.
   ============================================================ */
.age-gate,
.age-gate__background{background:none!important;box-shadow:none!important;
  padding:0!important;border:0!important;max-width:none!important;width:auto!important}
.age-gate__background-color{backdrop-filter:blur(9px)}

.age-gate__form{position:relative;overflow:hidden;
  background:var(--ink-deep)!important;color:#fff;
  border:1px solid var(--ink-deep-3)!important;border-radius:3px!important;
  padding:44px 46px 34px!important;max-width:520px!important;width:calc(100vw - 40px);
  margin:0 auto!important;text-align:center;
  box-shadow:0 40px 100px -30px rgba(0,0,0,.75)!important}
.age-gate__form:before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--ink-deep-2) 1px,transparent 1px),
                   linear-gradient(90deg,var(--ink-deep-2) 1px,transparent 1px);
  background-size:44px 44px;opacity:.5}
.age-gate__form > *{position:relative;z-index:2}

.ap-gate-mark{display:flex;justify-content:center;margin-bottom:20px}
.ap-gate-mark .ap-mark{width:auto;height:62px}

.age-gate__heading:empty{display:none}
.age-gate__headline{font-family:var(--font-head),sans-serif!important;font-size:32px;
  font-weight:700;text-transform:uppercase;color:#fff;margin:0 0 16px;line-height:1.05;
  letter-spacing:.02em}
.age-gate__headline:before{content:"— Atlanta Peptides —";display:block;
  font-family:var(--font-mono),monospace;font-size:10px;font-weight:700;
  letter-spacing:.28em;text-transform:uppercase;color:var(--brand);margin-bottom:16px}
.age-gate__subheadline{display:none}
.age-gate__challenge{font-size:15px;line-height:1.7;color:var(--on-deep);
  margin:0 auto 28px;max-width:40ch}

.age-gate__buttons{display:flex;gap:11px;justify-content:center;flex-wrap:wrap}
.age-gate__submit{font-family:var(--font-head),sans-serif;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;font-size:14.5px;padding:15px 26px;
  border-radius:var(--radius);cursor:pointer;border:1.5px solid transparent;
  transition:.18s;line-height:1}
.age-gate__submit--yes{background:var(--brand)!important;color:var(--on-brand)!important;
  border-color:var(--brand)!important;order:1}
.age-gate__submit--yes:hover{background:#fff!important;border-color:#fff!important;
  color:var(--ink-deep)!important;transform:translateY(-2px)}
.age-gate__submit--no{background:transparent!important;color:var(--on-deep-dim)!important;
  border-color:#3f5a60!important;order:2}
.age-gate__submit--no:hover{border-color:var(--on-deep)!important;color:#fff!important}

.age-gate__remember-wrapper{margin-top:20px;font-size:12px;color:var(--on-deep-dim)}
.age-gate__remember{display:inline-flex;gap:8px;align-items:center;cursor:pointer}
.age-gate__remember-field{accent-color:var(--brand)}
.age-gate__errors{color:#ff8f8f;font-size:13.5px;margin-top:14px}

.age-gate__form:after{content:"For research use only · Not for human or veterinary consumption";
  display:block;margin-top:26px;padding-top:18px;border-top:1px solid var(--ink-deep-3);
  font-family:var(--font-mono),monospace;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:#7e979c;line-height:1.7}

@media(max-width:520px){
  .age-gate__form{padding:34px 24px 28px!important}
  .age-gate__headline{font-size:25px}
  .age-gate__submit{width:100%}}

/* the plugin's stylesheet wins on these three, so raise specificity */
.age-gate__form{
  background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSI+PGNpcmNsZSBjeD0iMTMiIGN5PSIxNCIgcj0iMy40IiBmaWxsPSIjMTRiOGE2Ii8+PGNpcmNsZSBjeD0iMjciIGN5PSIxNCIgcj0iMy40IiBzdHJva2U9IiMxNGI4YTYiIHN0cm9rZS13aWR0aD0iMS42Ii8+PGNpcmNsZSBjeD0iMjAiIGN5PSIyNyIgcj0iMy40IiBzdHJva2U9IiMxNGI4YTYiIHN0cm9rZS13aWR0aD0iMS42Ii8+PHBhdGggZD0iTTEzIDE0aDE0TTEzIDE0bDcgMTNNMjcgMTRsLTcgMTMiIHN0cm9rZT0iIzE0YjhhNiIgc3Ryb2tlLXdpZHRoPSIxLjMiIG9wYWNpdHk9Ii42NSIvPjwvc3ZnPg=="),
    linear-gradient(var(--ink-deep-2) 1px,transparent 1px),
    linear-gradient(90deg,var(--ink-deep-2) 1px,transparent 1px)!important;
  background-repeat:no-repeat,repeat,repeat!important;
  background-position:center 40px,0 0,0 0!important;
  background-size:46px 46px,44px 44px,44px 44px!important;
  padding-top:104px!important}
.age-gate__form:before{display:none}
.age-gate__form .age-gate__headline:before{
  content:"\2014\00a0 Atlanta Peptides \00a0\2014"!important;display:block!important;
  font-family:var(--font-mono),monospace!important;font-size:10px!important;
  font-weight:700!important;letter-spacing:.28em!important;text-transform:uppercase!important;
  color:var(--brand)!important;margin-bottom:16px!important}
.age-gate__form .age-gate__remember-text,
.age-gate__form .age-gate__remember{color:var(--on-deep-dim)!important;font-size:12px!important}
.age-gate__form .age-gate__challenge{color:var(--on-deep)!important}
.age-gate__form .age-gate__headline{color:#fff!important}


/* ============================================================
   29. BLOG
   ============================================================ */
.blog .ast-container,.single-post .ast-container,.archive.category .ast-container{
  display:block!important;max-width:100%!important;padding-inline:0!important}
.blog #primary,.single-post #primary,.archive.category #primary{
  max-width:100%!important;width:100%!important;margin:0!important;padding:0!important}
.blog #secondary,.single-post #secondary,.archive.category #secondary{display:none!important}
.blog .site-content,.single-post .site-content{padding-top:0!important}
.blog .ast-single-entry-banner,.single-post .ast-single-entry-banner{display:none!important}

.blog .site-main,.archive.category .site-main{max-width:var(--page);margin:0 auto!important;
  padding:48px 28px 64px!important}
.blog .ast-row,.archive.category .ast-row{display:grid!important;
  grid-template-columns:repeat(3,1fr);gap:22px;margin:0!important}
@media(max-width:1000px){.blog .ast-row,.archive.category .ast-row{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.blog .ast-row,.archive.category .ast-row{grid-template-columns:1fr}}
.blog .ast-article-post,.archive.category .ast-article-post{
  border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);
  padding:26px 24px!important;margin:0!important;width:auto!important;transition:.2s;
  box-shadow:none!important}
.blog .ast-article-post:hover,.archive.category .ast-article-post:hover{
  border-color:var(--ink-deep);transform:translateY(-3px);
  box-shadow:0 14px 30px -18px rgba(0,0,0,.35)}
.blog .ast-blog-featured-section,.archive .ast-blog-featured-section{display:none}
.blog .entry-title,.archive.category .entry-title{font-family:var(--font-head),sans-serif!important;
  font-size:22px!important;line-height:1.15;text-transform:uppercase;letter-spacing:.01em}
.blog .entry-title a,.archive.category .entry-title a{color:var(--ink);text-decoration:none!important}
.blog .entry-title a:hover,.archive.category .entry-title a:hover{color:var(--brand)}
.blog .ast-taxonomy-container a,.archive .ast-taxonomy-container a{
  font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--brand)!important;text-decoration:none!important}
.blog .entry-meta,.blog .post-meta,.archive .entry-meta,
.blog .ast-blog-meta-container,.archive .ast-blog-meta-container{
  font-family:var(--font-mono),monospace;font-size:11px!important;
  letter-spacing:.04em;color:var(--ink-soft)!important;text-transform:uppercase}
.blog .entry-meta a,.archive .entry-meta a,
.blog .ast-blog-meta-container a,.archive .ast-blog-meta-container a{
  color:var(--ink-soft)!important;text-decoration:none!important}
.blog .entry-content p,.archive.category .entry-content p{font-size:14.5px;color:var(--ink-soft);
  line-height:1.6}
.blog .ast-blog-single-element.ast-blog-featured-section img{border-radius:0}

/* single post: the reading column */
.single-post .site-main{max-width:820px;margin:0 auto!important;padding:48px 28px 64px!important}
.single-post .entry-content{font-size:16.5px;line-height:1.8;color:var(--ink-soft)}
.single-post .entry-content h2{font-family:var(--font-head),sans-serif;font-size:28px;
  font-weight:700;text-transform:uppercase;color:var(--ink);margin:38px 0 14px;letter-spacing:.01em}
.single-post .entry-content p{margin-bottom:18px}
.single-post .entry-content a{color:var(--brand)}
.single-post .entry-content table{width:100%;border-collapse:collapse;margin:8px 0 24px}
.single-post .entry-content th,.single-post .entry-content td{border:1px solid var(--line);
  padding:12px 15px;text-align:left;font-size:14.5px;vertical-align:top}
.single-post .entry-content th{background:var(--paper-alt);color:var(--ink);font-weight:600;width:32%}
.single-post .post-navigation,.single-post .ast-single-related-posts-container{
  max-width:820px;margin:0 auto;padding-inline:28px}

/* Astra's default page background and link colour don't belong here */
body.blog,body.single-post,body.archive.category,body.archive.author{
  background:var(--paper)!important}
.blog .site-content,.single-post .site-content,.archive.category .site-content{
  background:var(--paper)}
.single-post .ast-article-single{background:none!important;box-shadow:none!important;
  border:0!important;padding:0!important;margin:0!important}
.blog .entry-meta a,.blog .entry-meta,
.single-post .entry-meta a,.single-post .entry-meta,
.archive .entry-meta a,.archive .entry-meta,
.blog .posted-by a,.single-post .posted-by a,.archive .posted-by a,
.blog .posted-on a,.single-post .posted-on a,.archive .posted-on a{
  color:var(--ink-soft)!important;text-decoration:none!important;
  font-family:var(--font-mono),monospace;font-size:11.5px;letter-spacing:.04em;
  text-transform:uppercase}
.single-post .entry-meta{padding-bottom:22px;margin-bottom:26px;
  border-bottom:1px solid var(--line)}
.single-post .entry-content > p:first-of-type{font-size:18px;color:var(--ink);line-height:1.7}

/* The answer is remembered for a year and the box is pre-ticked, so the gate
   is genuinely a first-visit-only interruption. Showing an unticked-able
   checkbox would only let a visitor opt back into seeing it on every page. */
.age-gate__remember-wrapper{display:none!important}


/* ============================================================
   30. MOBILE — touch targets and density
   The icons stay the same size; the tappable box around them grows.
   iOS and Android both want ~44px, and a 19px cart icon is the kind
   of thing that quietly costs conversions on a phone.
   ============================================================ */
.ap-navr > button,
.ap-navr > a{min-width:44px;min-height:44px;margin:0 -6px}
.ap-burger{min-width:44px;min-height:44px;justify-content:center;align-items:center}
.ap-burger span{width:22px}
.ap-cart-count{top:2px;right:2px}

@media(max-width:900px){
  .ap-nav{height:64px;gap:8px}
  .ap-navr{gap:2px}
  .ap-logo{gap:9px}
  .ap-logo-t{font-size:17px;letter-spacing:.06em;white-space:nowrap}
  .ap-logo-t small{font-size:7.5px;letter-spacing:.2em}
  .ap-logo .ap-mark{height:40px}
  .ap-topbar{font-size:11px;letter-spacing:.06em;padding:8px 12px}
}
@media(max-width:400px){
  .ap-logo-t{font-size:15px}
  .ap-logo-t small{font-size:7px;letter-spacing:.16em}
}

/* card button: a comfortable thumb target */
@media(max-width:900px){
  .woocommerce ul.products li.product .button{padding:12px 18px!important;min-height:44px;
    display:inline-flex;align-items:center}
  .ap-card-f{gap:8px}
}

/* ---- COA register: table on desktop, stacked cards on a phone ---- */
@media(max-width:720px){
  .ap-tablewrap{overflow-x:visible}
  .ap-coatable,.ap-coatable tbody,.ap-coatable tr,.ap-coatable td{display:block;width:100%}
  .ap-coatable thead{display:none}
  .ap-coatable tr{border:1px solid var(--line);border-radius:var(--radius);
    margin-bottom:12px;padding:14px 16px;background:var(--paper)}
  .ap-coatable tr:hover td{background:none}
  .ap-coatable td{border:0;padding:4px 0;display:flex;justify-content:space-between;
    align-items:baseline;gap:14px;font-size:13.5px}
  .ap-coatable td:before{content:attr(data-label);flex:none;
    font-family:var(--font-head),sans-serif;font-size:11px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--ink-soft)}
  .ap-coatable td.nm{padding-bottom:10px;margin-bottom:8px;
    border-bottom:1px solid var(--line);font-size:16px}
  .ap-coatable td.nm:before{display:none}
  .ap-coatable td.nm a{font-weight:700}
  .ap-coatable .ap-dl{min-height:32px;display:inline-flex;align-items:center}
  .ap-searchbig{max-width:100%}
  .ap-searchbig input{font-size:16px}   /* 16px stops iOS zooming on focus */
}

/* iOS zooms any input under 16px on focus — that reflow looks like a bug.
   `input:not([type])` matters: an input with no type attribute still behaves as
   a text field, but [type=text] matches the *attribute*, not the property, so a
   bare <input> slips past the guard. The batch lookup on the homepage did
   exactly that and kept zooming on iPhone. */
@media(max-width:720px){
  input:not([type]),
  input[type=text],input[type=email],input[type=tel],input[type=search],
  input[type=number],input[type=password],textarea,select{font-size:16px!important}
}

/* Phone-only: the product card drops to ~156px wide at 390px, where an 80px
   corner badge covers most of the vial (measured: badge x10–90, vial x34–122
   — 56px of overlap, right across the cap). Below 600px the badge leaves the
   image entirely and sits above the category label instead, so the product art
   is never obscured. Desktop and tablet keep the demo's corner badge. */
@media(max-width:600px){
  .woocommerce ul.products li.product .astra-shop-summary-wrap > .ap-badge{
    position:static;order:0;align-self:flex-start;
    margin:0 0 7px;font-size:9px;letter-spacing:.08em;padding:4px 7px}
}

/* Phone-only card footer and data strip.
   At 390px the card is 158px wide, leaving 126px inside the summary padding.
   The footer used to sit price and button on one row: the button takes 62px
   and the gap 10px, so the price got 54px — about 5.8 characters of the 15.5px
   mono face. Every one of the 28 prices is longer than that, and the five
   variable products carry a range ("$50.00 – $275.00", 16 characters) that had
   no chance. Stacking hands the price the full width, lets a range wrap
   instead of clipping, and turns the button into a 126x40 target — it was
   62x36, under the 44px minimum for a thumb.
   The strip's three cells leave 30px for a label, but "VERIFIED" needs ~50px
   at the desktop tracking and "PENDING" ~44px, so the word every product page
   is meant to advertise was the one getting cut. Tightening the tracking and
   padding fits it whole rather than abbreviating or dropping it. */
@media(max-width:600px){
  .woocommerce ul.products li.product .ap-card-f{
    flex-direction:column;align-items:stretch;gap:9px}
  .woocommerce ul.products li.product .ap-card-f .price{
    font-size:16px!important;white-space:normal!important}
  .woocommerce ul.products li.product .ap-card-f .button{
    width:100%!important;text-align:center;padding:11px 15px!important}

  .ap-strip div{padding:7px 3px}
  .ap-strip b{font-size:10.5px}
  .ap-strip span{font-size:8px;letter-spacing:.02em}
}


/* ---------------------------------------------------------------------------
   Supplied brand photography
   --------------------------------------------------------------------------- */

/* Hero: the banner runs edge to edge, because it already carries the headline
   and the claims. The h1 stays in the markup but off-screen — search engines
   and screen readers still get it, and it isn't printed twice for everyone
   else. Buttons and stats sit under the image as real markup so they remain
   clickable and selectable. */
.ap-hero-band{padding:0;
  /* The artwork is a deep navy-blue photograph and the site's dark tone is a
     teal green, so butting one against the other put a green stripe under the
     picture that read as a mistake. The strip takes the photograph's own colour
     instead. */
  background:var(--photo-deep)}
/* The teal glow blob from .ap-hero::after has no business over a photograph. */
.ap-hero-band:after{display:none}
.ap-hero-band-fig{position:relative;margin:0;line-height:0;z-index:2}
/* Anchored to the foot of the picture, not to a height computed in CSS: the
   rendered height moves with the window, and a fade pinned to a guess landed
   on empty rock at one size and dissolved the artwork's claims strip at
   another. 60px is enough — the cropped image now ends on its own near-black
   bottom row, so the fade is closing a couple of levels, not a gulf. */
.ap-hero-band-fig:after{content:"";position:absolute;left:0;right:0;bottom:0;
  height:60px;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,20,29,0),var(--photo-deep))}
/* No grid overlay under a photograph — the teal rules showed through the strip
   and fought the image's own texture. */
.ap-hero-band:before{display:none}
/* Cap the band's height. At full bleed the artwork is 1.6:1, so on a wide
   monitor "height:auto" made it ~1500px tall and pushed the buttons off screen
   entirely. A fixed height plus object-fit crops the top and bottom of the
   backdrop instead, which is empty gradient, and keeps the vials centred. */
/* Natural height, so the whole banner shows — the client asked for the full
   picture and a fixed height cannot give it on a 2:1 image. The max-height is
   only a guard for very wide windows, and at the sizes people actually browse
   at (1280-1920 wide) it never bites. */
.ap-hero-band-img{display:block;width:100%;height:auto;
  max-height:min(92vh,940px);object-fit:cover;object-position:center 12%}
@media(max-width:940px){.ap-hero-band-img{max-height:none}}
/* One line of copy on the left, the two buttons on the right. The four-figure
   stat row that used to sit here has gone: the banner above already prints
   ~99% purity, third-party tested and >90% fill volume, and the marquee below
   prints them a third time. Three of the four numbers were pure repetition. */
.ap-hero-under{display:flex;align-items:center;justify-content:space-between;
  gap:30px;flex-wrap:wrap;padding-block:30px 34px}
.ap-hero-under .ap-cta{margin-top:0;flex:none}
.ap-hero-lede{margin:0;max-width:44ch;color:var(--on-deep);font-size:16px;line-height:1.62}
.ap-hero-lede b{color:#fff;font-weight:600}
@media(max-width:760px){
  .ap-hero-under{padding-block:26px 30px;gap:20px}
  .ap-hero-lede{font-size:15px}
  .ap-hero-under .ap-cta{width:100%}
  .ap-hero-under .ap-btn{flex:1 1 auto;justify-content:center}
}
.ap-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Commitment: artwork on one side, prose on the other.
   The first version put a white photo card next to a panel of full-strength
   brand teal on a white page — three unrelated colour fields in one block, and
   the teal fought the navy in the photograph rather than agreeing with it. The
   section is now one dark field sampled from the artwork itself, the picture
   dissolves into it instead of sitting on it, and teal is spent only on the
   eyebrow and the rule. One colour family, one accent. */
.ap-commit-sec{background:var(--photo-deep);color:#fff;padding-block:0;overflow:hidden}
/* The picture runs to the window's left edge. Held inside the page container it
   left a band of bare dark to its left, which read as a gap rather than a
   margin. The wrap is opened out and the prose panel takes over the job of
   keeping the right-hand edge lined up with every other section: its right
   padding is the container gutter plus whatever the window has spare. */
.ap-commit-sec > .ap-wrap{max-width:none;padding:0}
.ap-commit2{display:grid;grid-template-columns:1.1fr 1fr;gap:0;align-items:center}
/* Past ~1560px the proportional split makes the picture column so wide that the
   artwork's natural height runs past the cap and object-fit starts trimming it,
   which shrinks the vials in frame. Freezing the picture at the width it has on
   a 1440 screen keeps the block looking the same on every desktop instead of
   quietly re-composing itself as the window grows. */
@media(min-width:1560px){
  .ap-commit2{grid-template-columns:minmax(0,800px) minmax(0,1fr)}
  .ap-commit2-panel p{max-width:60ch}
}
/* Capped: the figure otherwise takes the artwork's natural height at whatever
   the column happens to be, so a 2560px window got an 880px-tall band for a
   paragraph of prose. Past the cap object-fit trims top and bottom, which is
   splash and rock. */
.ap-commit2-img{position:relative;margin:0;align-self:stretch;min-height:340px;max-height:560px}
/* Anchored right. The artwork's left edge is empty sky, its right edge is the
   fourth vial — so when the column is narrower than the picture, the pixels
   to give up are on the left. Anchored left, as it was, the crop sliced the
   last vial in half against the prose. */
.ap-commit2-img img{width:100%;height:100%;object-fit:cover;object-position:right center;display:block}
/* Fade the right edge into the section colour so the picture dissolves into
   the prose instead of ending on a hard vertical seam. */
.ap-commit2-img:after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,transparent 54%,rgba(8,20,29,.55) 80%,var(--photo-deep) 100%)}
.ap-commit2-panel{background:none;color:#fff;display:flex;flex-direction:column;
  justify-content:center;
  padding:64px max(28px,calc((100vw - var(--page)) / 2 + 28px)) 64px 52px}
.ap-commit2-panel h2{font-family:var(--font-head),sans-serif;font-size:36px;line-height:1.1;
  text-transform:uppercase;letter-spacing:.02em;margin:0 0 20px;color:#fff}
.ap-commit2-panel h2:after{content:"";display:block;width:54px;height:2px;
  background:var(--brand);margin-top:18px}
.ap-commit2-panel p{font-size:16px;line-height:1.78;margin:0;color:var(--on-deep)}
.ap-commit-eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:11px;
  font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--brand);
  margin-bottom:18px}
.ap-commit-eyebrow i{width:22px;height:1px;background:var(--brand);display:block}
@media(max-width:940px){
  .ap-commit2{grid-template-columns:1fr}
  .ap-commit2-img{min-height:0;margin-top:44px}
  .ap-commit2-img img{height:auto}
  .ap-commit2-img:after{background:linear-gradient(180deg,transparent 60%,var(--photo-deep) 100%)}
  /* Stacked, the panel is the only thing holding the reading margin. */
  .ap-commit2-panel{padding:30px 28px 48px}
  .ap-commit2-panel h2{font-size:28px}
}

.ap-hero-art img{width:100%;height:auto;display:block;border-radius:var(--radius);
  filter:drop-shadow(0 26px 46px rgba(0,0,0,.42))}
.ap-band{margin:0 0 38px;border-radius:var(--radius);overflow:hidden;
  box-shadow:0 18px 40px rgba(8,30,36,.14)}
.ap-band img{width:100%;height:auto;display:block}
@media(max-width:940px){.ap-band{margin-bottom:26px}}