/* ============================================================================
   CERBERUS RESEARCH — header/footer/chrome layer for the HART-dark clone.
   File-only overlay: loads AFTER the clone's style.css (INSTALL.md), so every
   rule here is a same-or-higher-specificity retint of the owned HART chrome
   (inc/hl-header.php markup + .csf-bigfoot footer + .csf-bbar bottom bar).
   Nothing structural changes — the markup, hooks, and JS hooks are HART's.

   Token law inside this file: --bpc-primary (#08D8F0) is a FILL; text/icons/
   rules on dark use --bpc-accent (#08D8F0, AA on obsidian/charcoal).
   ========================================================================== */

/* ---- G5 header (owned bar from inc/hl-header.php) -------------------------
   Gold hairlines/hover/divider → oxblood family. The bar's black legibility
   gradient stays (it is what keeps the bar readable over the hero video). */
.hl-header__bar {
  border-bottom: 1px solid rgba(8, 216, 240, 0.30); /* oxblood hairline */
}
.hl-header__tab:hover { color: var(--bpc-accent, #08D8F0); }
.hl-header__tab .hl-header__icon { opacity: 0.92; }
.hl-header__divider { background: rgba(8, 216, 240, 0.30); }
.hl-header__action:hover { background: rgba(8, 216, 240, 0.14); }

/* The cart count chip: HART shipped near-black-on-gold. On oxblood that
   fails — the Cerberus chip is bone-on-oxblood (≈8.4:1). */
.hl-header__count {
  background: var(--bpc-primary, #08D8F0);
  color: var(--bpc-background, #0D0D0D) !important;
}

/* Focus parity with the React root's ring */
.hl-header a:focus-visible,
.hl-header button:focus-visible {
  outline: 2px solid var(--bpc-accent, #08D8F0);
  outline-offset: 3px;
}

@media (max-width: 719px) {
  .hl-header__trigger, .hl-header__cartlink { color: var(--bpc-accent, #08D8F0) !important; }
  .hl-header__trigger:hover, .hl-header__cartlink:hover { background: rgba(8, 216, 240, 0.14); }
}

/* ---- .csf-bigfoot footer --------------------------------------------------
   Same marble→colonnade swap family the React home uses: the Greek
   colonnade underlay (owned art), oxblood hairlines, accent-red column
   heads. NO logo/mark anywhere in the footer (Austin 2026-08-21 — the
   brand column is name + text only, no hound stamp). */
.csf-bigfoot::before { /* top hairline */
  background: linear-gradient(90deg, transparent, rgba(8, 216, 240, 0.55), transparent);
}
.csf-bigfoot::after {
  background: url('assets/colonnade-footer.webp') center 30% / cover no-repeat;
  opacity: 0.12;
}
.csf-bigfoot__col .csf-bigfoot__hdg { color: var(--bpc-accent, #08D8F0); }
.csf-bigfoot__col { border-left-color: rgba(8, 216, 240, 0.16); }
.csf-bigfoot__col a:hover,
.csf-bigfoot__col a:focus-visible { color: var(--bpc-accent, #08D8F0); }
.csf-bigfoot__bar { border-top-color: rgba(8, 216, 240, 0.18); }
.csf-disclaimer { border-top-color: rgba(8, 216, 240, 0.12) !important; }
@media (max-width: 899px) {
  .csf-bigfoot__col { border-top-color: rgba(8, 216, 240, 0.14); }
}

/* ---- mobile bottom bar (owned .csf-bbar, kept) ----------------------------
   The mu-plugin's fallbacks were HART gold; on Cerberus tokens the icon and
   hover color must be the AA accent red (oxblood is a fill, not text on a
   dark bar), and the cart badge flips to bone-on-oxblood. */
.csf-bbar { border-top-color: rgba(8, 216, 240, 0.28); }
.csf-bbar__i:hover,
.csf-bbar__i:focus-visible { color: var(--bpc-accent, #08D8F0); }
.csf-bbar__i:focus-visible { outline-color: var(--bpc-accent, #08D8F0); }
.csf-ic { color: var(--bpc-accent, #08D8F0); }
.csf-badge {
  background: var(--bpc-primary, #08D8F0);
  color: var(--bpc-background, #0D0D0D);
}


/* ---- Cerberus home: the header floats over the full-bleed opening (Austin 08-20) ----
   body.home only: transparent bar over the Veo frame, no hairline seam; a soft
   top scrim keeps the labels readable. Interior pages keep the solid bar. */
body.home .hl-header {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 40;
}
body.home .hl-header__bar {
  background: linear-gradient(180deg, rgba(10, 10, 10, 0.72) 0%, rgba(10, 10, 10, 0.28) 62%, rgba(10, 10, 10, 0) 100%);
  border-bottom: none;
}
/* tab type carries the bar alone (text-only tabs) */
.hl-header__tab > span { letter-spacing: 0.14em; }

/* September 6 blue/native update. Cyan on obsidian is 11.2:1; cyan controls use dark text. */
body .ct-button,body .single_add_to_cart_button,body .checkout-button,body button[type="submit"],body input[type="submit"]{color:var(--bpc-background,#0d0d0d)!important;background-color:var(--bpc-primary,#08d8f0)!important}
body.home .hl-header{position:relative;background:#000}
body.home .hl-header__bar{background:#000}
.hl-header__brand img{object-fit:contain}
.csf-bigfoot::after{filter:hue-rotate(172deg)}
.hl-header__action{min-height:44px;min-width:44px}
.hl-header__action-label{font-size:12px;white-space:nowrap}
.hl-header__mshop,.hl-header__macct{display:none}
/* Mobile header = ONE row (Merit pattern, Austin 09-07): Shop pill · lockup · Sign in + Cart. 44px+ targets. */
@media(max-width:719px){.hl-header__bar{height:auto;min-height:84px;padding:0 12px;column-gap:8px;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}.hl-header__brand{top:0}.hl-header__brand img{height:64px;width:auto;max-width:none}.hl-header__mshop{grid-area:left;justify-self:start;display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 14px 0 12px;border-radius:999px;background:#08d8f0;color:#0d0d0d;font:600 13px/1 var(--bpc-font-sans,Inter,sans-serif);text-decoration:none;white-space:nowrap}.hl-header__mshop:hover{background:#3fe3f5}.hl-header__micon{width:18px;height:18px;filter:brightness(0)}.hl-header__macct{grid-area:right;justify-self:end;display:flex;gap:2px}.hl-header__macct a{position:relative;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:48px;min-height:48px;padding:0 2px;color:#f5f2ed;font:500 11px/1 var(--bpc-font-sans,Inter,sans-serif);text-decoration:none;white-space:nowrap}.hl-header__macct a:hover{color:#08d8f0}.hl-header__macct .hl-header__icon{width:22px;height:22px}.hl-header__macct .hl-header__count{top:-2px;right:4px}}
@media(max-width:359px){.hl-header__bar{padding:0 8px;column-gap:4px}.hl-header__brand img{height:56px}.hl-header__mshop{padding:0 10px;gap:5px;font-size:12px}.hl-header__macct a{min-width:44px;font-size:10px}}


/* Interior header bands = licensed neon colonnade, all-cyan grade (Austin 09-07). inc/hl-hero-video.php prints the video
   inside .hero-section via blocksy:hero:title:before; the K3 marble plates stay as the no-video fallback. */
body:not(.home) .hero-section[data-type]{position:relative;overflow:hidden;display:grid;place-items:center;min-height:clamp(200px,22vw,320px)!important;padding-top:clamp(28px,3vw,40px)!important;padding-bottom:clamp(24px,2.6vw,36px)!important}
body:not(.home) .hero-section[data-type] .entry-header{position:static}
.hero-section[data-type="type-2"]>[class*="ct-container"]{padding:0!important;min-height:0!important}
.hl-hero-video{position:absolute;inset:0;z-index:0;background:#000 center 45%/cover no-repeat}
.hl-hero-video__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.hl-hero-video::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.42),rgba(0,0,0,.30) 45%,rgba(0,0,0,.62))}
.hero-section[data-type] .entry-header>:not(.hl-hero-video),.hero-section[data-type] .ct-container>*:not(.hl-hero-video){position:relative;z-index:1}
.hero-section[data-type] .page-title{text-shadow:0 2px 24px rgba(0,0,0,.65)}
@media(prefers-reduced-motion:reduce){.hl-hero-video__media{display:none}}
/* Shop: the printed band replaces the Elementor heading widget (csfshh1). */
body.hl-shop .elementor-element-csfshh1{display:none}
body.hl-shop .hl-band-shop{margin-bottom:clamp(12px,2vw,20px)}
/* Forms: required markers ride the accent, not red (Austin 09-07: no red left). */
.fluentform .ff-el-is-required.asterisk-right label:after,.fluentform .ff-el-is-required.asterisk-left label:before,.fluentform .fluentform-required,.fluentform span.asterisk,.woocommerce form .required{color:#08d8f0!important}

/* ---- 2026-09-09 · true-alpha vials: free-hovering, borderless, centered ----
   The 46 product renders are now real RGBA PNGs (see-through glass). Drop every
   baked-black workaround (radial masks, bottom anchoring) and let the vial float
   on the field: no box, no border, no mask, contained + centered in a fixed 1:1
   plane so all 46 sit on the same axis and baseline. */
[data-products] .product .ct-media-container,
.hl-related ul.products li.product .ct-media-container{
  aspect-ratio:1/1!important;background:transparent!important;border:0!important;
  box-shadow:none!important;border-radius:0!important;padding:0!important;overflow:visible}
[data-products] .product .ct-media-container img,
.hl-related ul.products li.product .ct-media-container img,
.hl-related ul.products li.product img{
  width:100%!important;height:100%!important;object-fit:contain!important;object-position:50% 50%!important;
  -webkit-mask-image:none!important;mask-image:none!important;
  background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important}
.single-product .woocommerce-product-gallery,
.single-product .woocommerce-product-gallery .flex-viewport,
.single-product .woocommerce-product-gallery figure,
.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image,
.single-product .woocommerce-product-gallery .woocommerce-product-gallery__wrapper{
  background:transparent!important;border:0!important;box-shadow:none!important}
.single-product .woocommerce-product-gallery img{
  -webkit-mask-image:none!important;mask-image:none!important;
  background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important;
  display:block;margin:0 auto;object-fit:contain}
.hl-qv__media,.hl-qv__media img{background:transparent!important;border:0!important;box-shadow:none!important;
  -webkit-mask-image:none!important;mask-image:none!important}
/* Quick-view pill: never parked on the vial. Hidden until the card is hovered
   or focused (keyboard), then rides the clear glass base; touch devices keep
   the "View product" button and never get the overlay. */
[data-products] .product .hl-qv-btn{opacity:0;pointer-events:none;bottom:4%;transition:opacity .25s ease,background .2s ease,color .2s ease}
[data-products] .product:hover .hl-qv-btn,[data-products] .product:focus-within .hl-qv-btn{opacity:1;pointer-events:auto}
@media (hover:none){[data-products] .product .hl-qv-btn{display:none}}
@media (prefers-reduced-motion:reduce){[data-products] .product .hl-qv-btn{transition:none}}
/* Row alignment: titles get a two-line floor so price + button sit on the same
   line across a row whether a name wraps ("Acetic Acid Solution 3 mL") or not. */
[data-products] .product .woocommerce-loop-product__title,
.hl-related ul.products li.product .woocommerce-loop-product__title{min-height:2.7em;display:flex;align-items:flex-start;justify-content:center}
/* Audit fix (Playwright, 09-09): Blocksy hands the card <img> a 3:4 aspect, which
   stretched the 1:1 plane to 295x393 and left empty bands above/below the vial
   (the SOLD OUT badge sat in that band). Pin the image square. */
[data-products] .product .ct-media-container img,
.hl-related ul.products li.product .ct-media-container img{aspect-ratio:1/1!important;height:auto!important}
/* Row alignment (Playwright-verified by injection before deploy, 09-09): the
   Elementor products grid forces the card li to display:block, so restore
   Blocksy's own flex column with !important and pin price + button to the
   bottom. Price gets a fixed 2.2em block (a range price may wrap) so every
   row's price and button sit on identical lines whether a name is 1–3 lines. */
[data-products] .product{display:flex!important;flex-direction:column!important;align-items:center!important}
[data-products] .product>figure{width:100%;margin:0}
[data-products] .product .woocommerce-loop-product__title{width:100%}
[data-products] .product .price{margin-top:auto!important;min-height:2.2em;display:flex!important;align-items:flex-end;justify-content:center;flex-wrap:wrap;gap:0 .35em}
[data-products] .product .ct-woo-card-actions{margin-top:0}