/*
Theme Name: BellaBio
Theme URI: https://bellabio.net
Description: Dark & gold luxury peptide-science WooCommerce theme for BellaBio, rebuilt as a Storefront child theme from the bellabiotest.base44.app design. Requires the free "Storefront" parent theme and WooCommerce.
Author: BellaBio
Template: storefront
Version: 1.12.0
Text Domain: bellabio
Domain Path: /languages
*/

/* ==========================================================================
   0. Design tokens
   ========================================================================== */
:root{
  --bb-bg:        #121110;
  --bb-bg-alt:    #1a1815;
  --bb-bg-card:   #1d1a17;
  --bb-bg-raised: #221e1a;
  --bb-gold-dark: #8a6f2c;
  --bb-gold:      #bc9a3f;
  --bb-gold-light:#e7cd8a;
  --bb-gold-pale: #f3e6c2;
  --bb-gradient-gold: linear-gradient(135deg, var(--bb-gold-light) 0%, var(--bb-gold) 45%, var(--bb-gold-dark) 100%);
  --bb-gradient-gold-soft: linear-gradient(180deg, rgba(188,154,63,.5), rgba(188,154,63,0));
  --bb-text:      #f6f0e4;
  --bb-text-muted:#a89c88;
  --bb-text-faint:#6f6659;
  --bb-border:    rgba(188,154,63,.22);
  --bb-border-soft: rgba(188,154,63,.12);
  --bb-radius:    1px;
  --bb-shadow-gold: 0 8px 30px -12px rgba(188,154,63,.35);
  --bb-shadow-lift: 0 22px 45px -20px rgba(0,0,0,.65);
  --bb-ease: cubic-bezier(.22,1,.36,1);
  --bb-font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --bb-font-body: 'Jost', 'Helvetica Neue', Arial, sans-serif;
}

/* ==========================================================================
   1. Base
   ========================================================================== */
html{ scroll-behavior:smooth; }
body{
  background:
    radial-gradient(ellipse 900px 600px at 15% -10%, rgba(188,154,63,.08), transparent 60%),
    radial-gradient(ellipse 800px 500px at 100% 10%, rgba(188,154,63,.05), transparent 55%),
    var(--bb-bg);
  color:var(--bb-text-muted);
  font-family:var(--bb-font-body);
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
a{ color:var(--bb-gold); transition:color .3s var(--bb-ease); }
a:hover{ color:var(--bb-gold-light); }
h1,h2,h3,h4,h5,h6{
  font-family:var(--bb-font-display);
  color:var(--bb-text);
  font-weight:600;
  letter-spacing:.01em;
}
p{ line-height:1.8; }
::selection{ background:var(--bb-gold); color:var(--bb-bg); }

/* Focus states — subtle gold ring, not the browser default blue */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:1px solid var(--bb-gold-light);
  outline-offset:3px;
}

.bb-eyebrow{
  display:flex; align-items:center; gap:.85em;
  text-transform:uppercase; letter-spacing:.32em; font-size:.7rem;
  background:var(--bb-gradient-gold);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-weight:600; margin-bottom:1.1em;
}
.bb-eyebrow::before{ content:""; width:34px; height:1px; background:var(--bb-gradient-gold); display:inline-block; flex:none; }

em, .bb-italic{
  font-family:var(--bb-font-display); font-style:italic;
  background:var(--bb-gradient-gold);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* Reusable ornamental divider — hairline / diamond / hairline */
.bb-ornament{ display:flex; align-items:center; justify-content:center; gap:.9em; margin:0 auto 2.5em; width:100%; max-width:220px; }
.bb-ornament::before, .bb-ornament::after{ content:""; flex:1; height:1px; background:linear-gradient(90deg, transparent, var(--bb-gold), transparent); }
.bb-ornament span{ width:6px; height:6px; background:var(--bb-gold); transform:rotate(45deg); flex:none; box-shadow:0 0 12px 1px rgba(188,154,63,.6); }

/* ==========================================================================
   2. Header / nav (Storefront overrides)
   ========================================================================== */
#masthead, .site-header{
  background:rgba(18,17,16,.92);
  border-bottom:1px solid var(--bb-border-soft);
  position:sticky; top:0; z-index:200;
  backdrop-filter:saturate(140%) blur(10px);
  transition:box-shadow .4s var(--bb-ease), border-color .4s var(--bb-ease);
}
#masthead.bb-scrolled{ box-shadow:0 12px 30px -18px rgba(0,0,0,.8); border-bottom-color:var(--bb-border); }
.site-header .site-branding .site-title,
.site-header .site-branding .site-title a{
  color:var(--bb-text); font-family:var(--bb-font-display); font-weight:700; letter-spacing:.02em;
}
.site-header .site-branding{ display:flex; align-items:center; }
.site-header .site-branding .custom-logo-link{ display:inline-flex; align-items:center; }
.site-header .site-branding .custom-logo{ max-height:56px; width:auto; height:auto; }
.main-navigation ul li a{
  color:var(--bb-text-muted); text-transform:uppercase; font-size:.76rem; letter-spacing:.16em; font-weight:600;
  position:relative; transition:color .3s var(--bb-ease);
}
.main-navigation ul li a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-4px; height:1px;
  background:var(--bb-gradient-gold); transition:right .35s var(--bb-ease);
}
.main-navigation ul li a:hover{ color:var(--bb-gold-light); }
.main-navigation ul li a:hover::after{ right:0; }
.site-header-cart .cart-contents{ color:var(--bb-text); letter-spacing:.04em; }
.storefront-primary-navigation{ background:transparent; }

/* ==========================================================================
   3. Buttons
   ========================================================================== */
.button, button, input[type="submit"],
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit{
  background:var(--bb-gradient-gold);
  background-size:160% 160%; background-position:0% 50%;
  border:1px solid var(--bb-gold);
  color:var(--bb-bg) !important;
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:.74rem;
  font-weight:700;
  border-radius:var(--bb-radius);
  padding:1em 2em;
  box-shadow:var(--bb-shadow-gold);
  transition:transform .35s var(--bb-ease), box-shadow .35s var(--bb-ease), background-position .5s var(--bb-ease);
}
.button:hover, .woocommerce a.button:hover, .woocommerce button.button:hover,
button:hover, input[type="submit"]:hover{
  background-position:100% 50%;
  transform:translateY(-2px);
  box-shadow:0 16px 34px -14px rgba(188,154,63,.55);
}
.button:active{ transform:translateY(0); }
.button.bb-outline{
  background:transparent !important; color:var(--bb-gold-light) !important;
  border:1px solid var(--bb-gold); box-shadow:none;
}
.button.bb-outline:hover{
  background:rgba(188,154,63,.1) !important; box-shadow:0 0 0 1px var(--bb-gold-light) inset;
}

/* ==========================================================================
   4. Shop / product grid
   ========================================================================== */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product{
  background:linear-gradient(180deg, var(--bb-bg-raised), var(--bb-bg-card));
  border:1px solid var(--bb-border-soft);
  padding:1.6em;
  border-radius:var(--bb-radius);
  transition:transform .4s var(--bb-ease), border-color .4s var(--bb-ease), box-shadow .4s var(--bb-ease);
  overflow:hidden;
}
.woocommerce ul.products li.product:hover{
  transform:translateY(-6px);
  border-color:var(--bb-border);
  box-shadow:var(--bb-shadow-lift);
}
.woocommerce ul.products li.product img{ transition:transform .6s var(--bb-ease); }
.woocommerce ul.products li.product:hover img{ transform:scale(1.045); }
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  color:var(--bb-text); font-size:1.05rem; margin-top:1em;
}
.woocommerce ul.products li.product .price{ color:var(--bb-gold-light); font-weight:600; }
.woocommerce span.onsale{ background:var(--bb-gradient-gold); color:var(--bb-bg); box-shadow:var(--bb-shadow-gold); }
.woocommerce div.product p.price, .woocommerce div.product span.price{ color:var(--bb-gold-light); font-size:1.3rem; }
.woocommerce div.product .woocommerce-tabs ul.tabs li{ background:transparent; border-bottom:1px solid var(--bb-border-soft); }
.woocommerce div.product .woocommerce-tabs ul.tabs li a{ color:var(--bb-text-muted); text-transform:uppercase; letter-spacing:.14em; font-size:.78rem; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{ color:var(--bb-gold-light); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active{ border-bottom-color:var(--bb-gold); }
.woocommerce #content div.product div.images, .woocommerce div.product div.images{
  background:var(--bb-bg-alt); border:1px solid var(--bb-border-soft);
}
.woocommerce div.product div.images img{ border-radius:var(--bb-radius); }

/* Research-use disclaimer under Add to Cart */
.bb-research-disclaimer{
  margin:1.4em 0; padding:1em 1.2em;
  border-left:2px solid var(--bb-gold);
  background:linear-gradient(90deg, rgba(188,154,63,.08), transparent);
  color:var(--bb-text-muted); font-size:.72rem; letter-spacing:.05em; text-transform:uppercase;
}

/* Social share row */
.bb-share{
  display:flex; align-items:center; flex-wrap:wrap; gap:.6em;
  margin:1.8em 0 .4em; position:relative;
}
.bb-share-label{
  text-transform:uppercase; letter-spacing:.22em; font-size:.68rem; font-weight:600;
  color:var(--bb-text-faint); margin-right:.5em;
}
.bb-share-btn{
  width:38px; height:38px; flex:none; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--bb-border); background:transparent;
  transition:transform .3s var(--bb-ease), border-color .3s var(--bb-ease),
             background-color .3s var(--bb-ease), box-shadow .3s var(--bb-ease);
}
.bb-share-btn svg{ width:16px; height:16px; fill:var(--bb-gold); transition:fill .3s var(--bb-ease); }
.bb-share-btn:hover{
  transform:translateY(-2px);
  border-color:var(--bb-gold);
  background:rgba(188,154,63,.1);
  box-shadow:0 8px 20px -10px rgba(188,154,63,.6);
}
.bb-share-btn:hover svg{ fill:var(--bb-gold-light); }
.bb-share-toast{
  font-size:.68rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--bb-gold-light); opacity:0; transform:translateY(3px);
  transition:opacity .3s var(--bb-ease), transform .3s var(--bb-ease);
  flex-basis:100%; margin-top:.2em;
}
.bb-share-toast.is-on{ opacity:1; transform:none; }

/* Independently lab verified (COA) panel */
.bb-coa{
  /* Storefront floats the gallery and the summary, so clear both to span
     the full content width the way the source site does. */
  clear:both; width:100%;
  display:flex; align-items:center; gap:1.4em; flex-wrap:wrap;
  margin:3em 0 2.5em; padding:1.6em 1.9em;
  background:linear-gradient(120deg, rgba(34,30,26,.9), rgba(18,17,16,.9));
  border:1px solid var(--bb-border);
}
.bb-coa-icon{
  width:46px; height:46px; flex:none; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--bb-border); background:rgba(188,154,63,.07);
}
.bb-coa-icon svg{ width:22px; height:22px; fill:var(--bb-gold); }
.bb-coa-text{ flex:1 1 320px; }
.bb-coa-text h3{ margin:0 0 .3em; font-size:1.18rem; color:var(--bb-text); }
.bb-coa-text p{ margin:0; font-size:.86rem; line-height:1.65; color:var(--bb-text-muted); }
.bb-coa-batch{
  display:inline-block; margin-left:.7em; padding:.15em .7em;
  border:1px solid var(--bb-border-soft); color:var(--bb-gold-light);
  font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
}
.bb-coa-btn{
  flex:none; display:inline-block; padding:.95em 1.7em;
  border:1px solid var(--bb-gold); color:var(--bb-gold-light);
  font-size:.72rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  transition:background-color .35s var(--bb-ease), color .35s var(--bb-ease),
             transform .35s var(--bb-ease), box-shadow .35s var(--bb-ease);
}
.bb-coa-btn:hover{
  background:rgba(188,154,63,.1); color:var(--bb-gold-pale);
  transform:translateY(-2px); box-shadow:0 12px 26px -14px rgba(188,154,63,.6);
}
.bb-coa-btn-soon{
  border-style:dashed; border-color:var(--bb-border); color:var(--bb-text-faint);
  cursor:default; opacity:.75;
}
.bb-coa-btn-soon:hover{
  background:none; color:var(--bb-text-faint); transform:none; box-shadow:none;
}

@media (max-width:600px){
  .bb-coa{ padding:1.4em; gap:1em; }
  .bb-coa-btn{ width:100%; text-align:center; }
}

/* "What's Included" panel */
.bb-included{
  clear:both; width:100%;
  margin:0 0 2.5em; padding:1.9em 2em 2.1em;
  background:linear-gradient(120deg, rgba(34,30,26,.9), rgba(18,17,16,.9));
  border:1px solid var(--bb-border);
}
.bb-included-head h3{ margin:0 0 .3em; font-size:1.18rem; color:var(--bb-text); }
.bb-included-head p{ margin:0 0 1.5em; font-size:.86rem; line-height:1.65; color:var(--bb-text-muted); }
.bb-included-list{
  list-style:none; margin:0 0 1.6em; padding:0;
  display:grid; grid-template-columns:repeat(2, 1fr); gap:1.2em 1.6em;
}
.bb-included-list li{ display:flex; align-items:flex-start; gap:.8em; }
.bb-included-check{
  width:30px; height:30px; flex:none; border-radius:50%; margin-top:.1em;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--bb-border); background:rgba(188,154,63,.07);
}
.bb-included-check svg{ width:16px; height:16px; fill:var(--bb-gold); }
.bb-included-list strong{ display:block; color:var(--bb-text); font-size:.94rem; font-weight:600; margin-bottom:.15em; }
.bb-included-list span{ display:block; color:var(--bb-text-muted); font-size:.8rem; line-height:1.55; }
.bb-included-shipping{
  margin:0; padding-top:1.3em; border-top:1px solid var(--bb-border-soft);
  color:var(--bb-gold-light); font-size:.78rem; font-weight:600;
  letter-spacing:.06em; text-align:center;
}

@media (max-width:600px){
  .bb-included{ padding:1.4em; }
  .bb-included-list{ grid-template-columns:1fr; }
}

/* Cart / checkout / account forms */
.woocommerce table.shop_table{ border:1px solid var(--bb-border-soft); border-radius:var(--bb-radius); }
.woocommerce table.shop_table th{ color:var(--bb-gold-light); text-transform:uppercase; letter-spacing:.1em; font-size:.75rem; border-bottom:1px solid var(--bb-border); }
.woocommerce table.shop_table td{ border-top:1px solid var(--bb-border-soft); }
.woocommerce #content input.qty, .woocommerce input.qty,
.woocommerce input[type="text"], .woocommerce input[type="email"],
.woocommerce input[type="tel"], .woocommerce input[type="password"],
.woocommerce textarea, .woocommerce select{
  background:var(--bb-bg-alt); border:1px solid var(--bb-border-soft); color:var(--bb-text);
  border-radius:var(--bb-radius);
}
.woocommerce input:focus, .woocommerce textarea:focus, .woocommerce select:focus{
  border-color:var(--bb-gold); outline:none;
}
.woocommerce-checkout-review-order-table, .cart-collaterals .cart_totals{
  background:var(--bb-bg-card); border:1px solid var(--bb-border-soft); padding:1.5em;
}

/* ==========================================================================
   5. Front page sections
   ========================================================================== */
.bb-section{ padding:6.5em 5%; max-width:1400px; margin:0 auto; position:relative; }
.bb-hero{ display:flex; flex-wrap:wrap; align-items:center; gap:2.2em; padding:1.6em 0 2.4em; }
.bb-hero-copy{ flex:1 1 360px; min-width:0; max-width:440px; }
.bb-hero-copy h1{ font-size:clamp(2.3rem,3.7vw,3.3rem); line-height:1.08; margin:0 0 .5em; }
.bb-hero-copy p{ max-width:46ch; margin-bottom:2.2em; font-size:1.05rem; }
.bb-hero-ctas{ display:flex; gap:1.1em; flex-wrap:wrap; margin-bottom:2.2em; }
.bb-stats{ display:flex; gap:2.8em; flex-wrap:wrap; }
.bb-stats .bb-stat-num{
  font-family:var(--bb-font-display); font-size:2.1rem; font-weight:700;
  background:var(--bb-gradient-gold); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.bb-stats .bb-stat-label{ text-transform:uppercase; letter-spacing:.14em; font-size:.68rem; color:var(--bb-text-faint); }
/* Hero showcase — three vials, centre one largest, gentle staggered float.
   Sized and arranged to mirror the reference layout: 62% / 48% / 48% of a
   square-ish stage, the outer two tilted 7deg away from the middle. */
.bb-hero-visual{
  flex:0 1 620px; min-width:0;
  display:flex; align-items:center; justify-content:center;
  padding-top:0;
}
.bb-hero-showcase{
  position:relative; width:100%; max-width:620px; aspect-ratio:1 / 1.1;
  margin-left:auto; margin-right:auto;
}
.bb-hero-ring{
  position:absolute; left:50%; top:46%; transform:translate(-50%,-50%);
  width:74%; aspect-ratio:1; border-radius:50%; pointer-events:none; z-index:1;
  background:radial-gradient(circle, rgba(188,154,63,.13) 0%, rgba(188,154,63,.04) 45%, transparent 70%);
  border:1px solid var(--bb-border-soft);
  animation:bbRing 9s ease-in-out infinite;
}
@keyframes bbRing{
  0%,100%{ transform:translate(-50%,-50%) scale(1);    opacity:.85; }
  50%    { transform:translate(-50%,-50%) scale(1.045); opacity:1; }
}

.bb-hero-vial{
  position:absolute; z-index:2; display:block; text-decoration:none; color:inherit;
  will-change:transform;
  filter:drop-shadow(0 24px 42px rgba(0,0,0,.6)) drop-shadow(0 8px 18px rgba(188,154,63,.14));
  transition:transform .5s var(--bb-ease), filter .5s var(--bb-ease);
}
.bb-hero-vial img{
  display:block; width:100%; height:auto; pointer-events:none;
  -webkit-mask-image:
    linear-gradient(to right,  transparent 6%, #000 28%, #000 72%, transparent 94%),
    linear-gradient(to bottom, transparent 1%, #000 10%, #000 89%, rgba(0,0,0,.4) 96%, transparent 100%);
          mask-image:
    linear-gradient(to right,  transparent 6%, #000 28%, #000 72%, transparent 94%),
    linear-gradient(to bottom, transparent 1%, #000 10%, #000 89%, rgba(0,0,0,.4) 96%, transparent 100%);
  -webkit-mask-repeat:no-repeat;    mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;      mask-size:100% 100%;
  -webkit-mask-composite:source-in; mask-composite:intersect;
}

/* Centre */
.bb-hero-vial--c{
  width:70%; left:50%; top:45%; z-index:4;
  transform:translate(-50%,-52%);
  animation:bbVialC 5s ease-in-out infinite;
}
@keyframes bbVialC{
  0%,100%{ transform:translate(-50%,-52%); }
  50%    { transform:translate(-50%,-55%); }
}
.bb-hero-vial--c:hover, .bb-hero-vial--c:focus-visible{
  animation-play-state:paused; z-index:10;
  transform:translate(-50%,-54%) scale(1.04);
  filter:drop-shadow(0 34px 60px rgba(0,0,0,.7)) drop-shadow(0 12px 30px rgba(188,154,63,.3));
}

/* Left */
.bb-hero-vial--l{
  width:54%; left:-10%; top:45%;
  transform:translateY(-48%) rotate(-7deg);
  animation:bbVialL 5s ease-in-out .6s infinite;
}
@keyframes bbVialL{
  0%,100%{ transform:translateY(-48%) rotate(-7deg); }
  50%    { transform:translateY(-52%) rotate(-7deg); }
}
.bb-hero-vial--l:hover, .bb-hero-vial--l:focus-visible{
  animation-play-state:paused; z-index:10;
  transform:translateY(-50%) rotate(-2deg) scale(1.05);
  filter:drop-shadow(0 28px 52px rgba(0,0,0,.65)) drop-shadow(0 10px 25px rgba(188,154,63,.24));
}

/* Right */
.bb-hero-vial--r{
  width:54%; right:-10%; top:45%;
  transform:translateY(-48%) rotate(7deg);
  animation:bbVialR 5s ease-in-out 1.2s infinite;
}
@keyframes bbVialR{
  0%,100%{ transform:translateY(-48%) rotate(7deg); }
  50%    { transform:translateY(-52%) rotate(7deg); }
}
.bb-hero-vial--r:hover, .bb-hero-vial--r:focus-visible{
  animation-play-state:paused; z-index:10;
  transform:translateY(-50%) rotate(2deg) scale(1.05);
  filter:drop-shadow(0 28px 52px rgba(0,0,0,.65)) drop-shadow(0 10px 25px rgba(188,154,63,.24));
}

/* Caption under each vial — inherits the tilt of its vial, as on the
   reference site. */
.bb-hero-vlbl{ display:block; text-align:center; margin-top:-1em; }
.bb-hero-vname{
  display:block; font-family:var(--bb-font-display); font-style:italic;
  font-size:1.02rem; font-weight:500; color:var(--bb-text);
  transition:color .3s var(--bb-ease);
}
.bb-hero-vial--l .bb-hero-vname, .bb-hero-vial--r .bb-hero-vname{ font-size:.92rem; }
.bb-hero-vinfo{
  display:block; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--bb-text-faint); margin-top:.15em;
}
.bb-hero-vprice{
  display:block; margin-top:.35em; font-size:.8rem; letter-spacing:.03em;
  color:var(--bb-gold);
}
.bb-hero-vprice .price, .bb-hero-vprice del, .bb-hero-vprice ins{
  color:inherit; font-size:inherit; text-decoration:inherit; background:none;
}
.bb-hero-vial:hover .bb-hero-vname, .bb-hero-vial:focus-visible .bb-hero-vname{ color:var(--bb-gold-light); }

@media (min-width:900px){
  .bb-hero{ flex-wrap:nowrap; }
}
@media (max-width:1100px){
  .bb-hero-vial--c{ width:62%; }
  .bb-hero-vial--l{ width:48%; left:-5%; }
  .bb-hero-vial--r{ width:48%; right:-5%; }
}
@media (max-width:900px){
  .bb-hero-showcase{ max-width:520px; margin:0 auto; }
}
@media (max-width:600px){
  .bb-hero-visual{ padding-top:0; }
  .bb-hero-showcase{ max-width:400px; }
  .bb-hero-vial--c{ width:59%; }
  .bb-hero-vial--l{ width:45%; left:-3%; }
  .bb-hero-vial--r{ width:45%; right:-3%; }
  .bb-hero-vname{ font-size:.85rem !important; }
  .bb-hero-vprice{ font-size:.72rem; }
}
@media (prefers-reduced-motion: reduce){
  .bb-hero-vial, .bb-hero-ring{ animation:none !important; }
}

.bb-badges{ display:flex; flex-wrap:wrap; border-top:1px solid var(--bb-border-soft); border-bottom:1px solid var(--bb-border-soft); }
.bb-badge{ flex:1 1 220px; padding:2.4em 1.6em; text-align:center; border-right:1px solid var(--bb-border-soft); transition:background .3s var(--bb-ease); }
.bb-badge:hover{ background:rgba(188,154,63,.04); }
.bb-badge:last-child{ border-right:none; }
.bb-badge strong{ display:block; color:var(--bb-text); text-transform:uppercase; letter-spacing:.12em; font-size:.85rem; margin-bottom:.4em; }
.bb-badge span{ font-size:.74rem; color:var(--bb-text-faint); }

.bb-section-head{ text-align:center; max-width:640px; margin:0 auto 3.5em; }
.bb-section-head h2{ font-size:clamp(1.9rem,3.6vw,2.7rem); }

.bb-why-grid, .bb-testimonial-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.75em; }
.bb-why-card{
  background:var(--bb-bg-card); border:1px solid var(--bb-border-soft); padding:2.4em 2em; text-align:center;
  transition:transform .4s var(--bb-ease), border-color .4s var(--bb-ease), box-shadow .4s var(--bb-ease);
}
.bb-why-card:hover{ transform:translateY(-6px); border-color:var(--bb-border); box-shadow:var(--bb-shadow-lift); }
.bb-why-card .bb-icon{
  width:44px; height:44px; margin:0 auto 1.1em; border:1px solid var(--bb-gold); border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:var(--bb-gold-light); font-size:1.1rem;
}

.bb-testimonial-card{
  position:relative; background:var(--bb-bg-card); border:1px solid var(--bb-border-soft); padding:2.4em 2em;
  transition:transform .4s var(--bb-ease), border-color .4s var(--bb-ease), box-shadow .4s var(--bb-ease);
}
.bb-testimonial-card:hover{ transform:translateY(-4px); border-color:var(--bb-border); box-shadow:var(--bb-shadow-lift); }
.bb-testimonial-card::before{
  content:"\201C"; position:absolute; top:.2em; left:.4em; font-family:var(--bb-font-display);
  font-size:3.5rem; line-height:1; color:var(--bb-gold); opacity:.35;
}
.bb-testimonial-card q{ display:block; margin:1.4em 0 1.6em; font-style:italic; color:var(--bb-text); quotes:none; }
.bb-testimonial-name{ color:var(--bb-text); font-weight:700; letter-spacing:.02em; }
.bb-testimonial-role{ font-size:.7rem; text-transform:uppercase; letter-spacing:.12em; color:var(--bb-text-faint); }

.bb-consult{
  position:relative; background:linear-gradient(180deg, var(--bb-bg-raised), var(--bb-bg-card));
  border:1px solid var(--bb-border); text-align:center; padding:5em 2em; overflow:hidden;
}
.bb-consult::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 500px 260px at 50% 0%, rgba(188,154,63,.12), transparent 70%);
}
.bb-consult::after{
  content:""; position:absolute; inset:0; border:1px solid var(--bb-border-soft); margin:10px; pointer-events:none;
}
.bb-consult ul{ list-style:none; display:flex; justify-content:center; gap:2.2em; flex-wrap:wrap; padding:0; margin:1.8em 0 2.4em; }
.bb-consult ul li{ font-size:.74rem; text-transform:uppercase; letter-spacing:.1em; color:var(--bb-text-faint); }

.bb-contact-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:2.2em; text-align:center; }
.bb-contact-grid > div{ padding:1.6em 1em; border:1px solid var(--bb-border-soft); transition:border-color .3s var(--bb-ease); }
.bb-contact-grid > div:hover{ border-color:var(--bb-border); }
.bb-contact-grid strong{
  display:block; text-transform:uppercase; font-size:.7rem; letter-spacing:.18em; margin-bottom:.6em;
  background:var(--bb-gradient-gold); -webkit-background-clip:text; background-clip:text; color:transparent;
}

.bb-faq details{ border-bottom:1px solid var(--bb-border-soft); padding:1.4em 0; transition:border-color .3s var(--bb-ease); }
.bb-faq details[open]{ border-bottom-color:var(--bb-border); }
.bb-faq summary{ cursor:pointer; color:var(--bb-text); font-weight:600; list-style:none; letter-spacing:.01em; }
.bb-faq summary::-webkit-details-marker{ display:none; }
.bb-faq summary::after{ content:"+"; float:right; color:var(--bb-gold); transition:transform .3s var(--bb-ease); }
.bb-faq details[open] summary::after{ content:"\2212"; }
.bb-faq p{ margin-top:1.1em; }

/* ==========================================================================
   6. Footer legal disclaimer
   ========================================================================== */
.bb-legal-footer{ background:var(--bb-bg-alt); border-top:1px solid var(--bb-gold); padding:3.5em 5%; }
.bb-legal-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:2.4em; max-width:1400px; margin:0 auto; }
.bb-legal-grid h4{ color:var(--bb-gold-light); font-size:.76rem; text-transform:uppercase; letter-spacing:.14em; margin-bottom:.7em; }
.bb-legal-grid p{ font-size:.76rem; line-height:1.7; color:var(--bb-text-faint); }
#colophon, .site-footer{ background:var(--bb-bg); border-top:1px solid var(--bb-border-soft); }
.site-footer .widget-title{ color:var(--bb-gold-light); }

@media (max-width:600px){
  .bb-badge{ border-right:none; border-bottom:1px solid var(--bb-border-soft); }
  .bb-section{ padding:4em 6%; }
}

/* ==========================================================================
   7. Age verification gate
   ========================================================================== */
html.bb-age-open, html.bb-age-open body{ overflow:hidden !important; }

.bb-age-gate{
  position:fixed; inset:0; z-index:2147483000;
  display:flex; align-items:center; justify-content:center;
  padding:2.2em 1.4em; overflow-y:auto;
  background:
    radial-gradient(700px 480px at 50% 32%, rgba(188,154,63,.11), transparent 70%),
    radial-gradient(900px 700px at 50% 118%, rgba(138,111,44,.09), transparent 72%),
    #0a0908;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
html.bb-age-ok .bb-age-gate{ display:none; }

.bb-age-panel{
  position:relative; width:100%; max-width:560px; margin:auto; text-align:center;
  padding:3.4em 2.9em 2.8em;
  background:linear-gradient(165deg, rgba(34,30,26,.97) 0%, rgba(18,17,16,.99) 100%);
  border:1px solid var(--bb-border);
  box-shadow:var(--bb-shadow-lift), 0 0 80px -34px rgba(188,154,63,.55);
  animation:bbAgeIn .75s var(--bb-ease) both;
}
.bb-age-panel::before{
  content:""; position:absolute; inset:9px; border:1px solid var(--bb-border-soft); pointer-events:none;
}
@keyframes bbAgeIn{ from{ opacity:0; transform:translateY(20px) scale(.985); } to{ opacity:1; transform:none; } }

.bb-age-logo{
  display:block; width:150px; height:auto; margin:0 auto 1.5em;
  filter:drop-shadow(0 10px 26px rgba(188,154,63,.28));
  animation:bbAgeLogo .9s var(--bb-ease) both;
}
@keyframes bbAgeLogo{ from{ opacity:0; transform:scale(.9); } to{ opacity:1; transform:none; } }

.bb-age-wordmark{
  font-family:var(--bb-font-display); font-size:2.5rem; line-height:1;
  margin:0 auto 1.1em; letter-spacing:.01em;
  background:var(--bb-gradient-gold); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

.bb-age-panel .bb-eyebrow{ justify-content:center; margin-bottom:1.1em; }
.bb-age-panel .bb-ornament{ margin-bottom:1.8em; max-width:190px; }

.bb-age-title{
  font-family:var(--bb-font-display); font-size:2rem; line-height:1.2;
  color:var(--bb-text); margin:0 0 .7em;
}
.bb-age-title em{ font-style:italic; }

.bb-age-copy{
  font-size:.94rem; line-height:1.75; color:var(--bb-text-muted);
  max-width:400px; margin:0 auto 2.2em;
}

.bb-age-actions{ display:flex; flex-direction:column; gap:.85em; margin-bottom:1.9em; }

.bb-age-btn{
  display:block; width:100%; cursor:pointer; font-family:var(--bb-font-body);
  font-size:.78rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  padding:1.15em 1.4em; border:1px solid transparent; border-radius:0;
  transition:transform .35s var(--bb-ease), box-shadow .35s var(--bb-ease),
             background-color .35s var(--bb-ease), color .35s var(--bb-ease);
}
/* The global button rule in section 3 sets `color` with !important, so the
   gate's own button colours have to match that weight to win. */
.bb-age-gate .bb-age-btn-yes{
  background:var(--bb-gradient-gold) !important;
  background-size:160% 160%; background-position:0% 50%;
  color:#17140e !important;
  border-color:transparent;
  box-shadow:var(--bb-shadow-gold);
}
.bb-age-gate .bb-age-btn-yes:hover{
  background-position:100% 50%;
  transform:translateY(-2px);
  box-shadow:0 16px 40px -14px rgba(188,154,63,.65);
}
.bb-age-gate .bb-age-btn-no{
  background:transparent !important;
  color:var(--bb-text-muted) !important;
  border-color:var(--bb-border);
  box-shadow:none;
}
.bb-age-gate .bb-age-btn-no:hover{
  color:var(--bb-gold-light) !important;
  border-color:var(--bb-gold);
  background:rgba(188,154,63,.07) !important;
}
.bb-age-btn:focus-visible{ outline:1px solid var(--bb-gold-light); outline-offset:2px; }

.bb-age-fineprint{
  font-size:.68rem; line-height:1.7; letter-spacing:.05em;
  color:var(--bb-text-faint); max-width:420px; margin:0 auto;
  padding-top:1.6em; border-top:1px solid var(--bb-border-soft);
}

@media (max-width:600px){
  .bb-age-panel{ padding:2.6em 1.5em 2.2em; }
  .bb-age-panel::before{ inset:7px; }
  .bb-age-logo{ width:118px; }
  .bb-age-wordmark{ font-size:2rem; }
  .bb-age-title{ font-size:1.6rem; }
  .bb-age-copy{ font-size:.88rem; margin-bottom:1.8em; }
}

/* ==========================================================================
   8. Market / country selector
   ========================================================================== */
.bb-market-gate{
  position:fixed; inset:0; z-index:2147483100;
  display:none; align-items:center; justify-content:center;
  padding:2.2em 1.4em; overflow-y:auto;
  background:
    radial-gradient(700px 480px at 50% 32%, rgba(188,154,63,.11), transparent 70%),
    radial-gradient(900px 700px at 50% 118%, rgba(138,111,44,.09), transparent 72%),
    #0a0908;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
html.bb-market-unset .bb-market-gate{ display:flex; }
html.bb-market-unset .bb-age-gate{ display:none; }

.bb-market-title{
  font-family:var(--bb-font-display); font-size:1.55rem; line-height:1.3;
  color:var(--bb-text); margin:0 0 .6em;
}
.bb-market-copy{ margin-bottom:2em; font-size:.88rem; }

.bb-market-options{ display:flex; flex-direction:column; gap:.7em; margin-bottom:1.9em; }
.bb-market-option{
  display:flex; align-items:center; gap:.9em; width:100%; cursor:pointer;
  padding:1.05em 1.3em; text-align:left;
  background:transparent !important;
  border:1px solid var(--bb-border-soft);
  color:var(--bb-text-muted) !important;
  box-shadow:none;
  transition:border-color .3s var(--bb-ease), background-color .3s var(--bb-ease), color .3s var(--bb-ease);
}
.bb-market-option:hover{ border-color:var(--bb-border); background:rgba(188,154,63,.05) !important; }
.bb-market-option.is-selected{
  border-color:var(--bb-gold);
  background:rgba(188,154,63,.08) !important;
  color:var(--bb-gold-light) !important;
}
.bb-market-flag{ font-size:1.2rem; line-height:1; flex:none; }
.bb-market-name{
  flex:1; font-family:var(--bb-font-body); font-size:.95rem;
  letter-spacing:.02em; text-transform:none;
}
.bb-market-cur{
  font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--bb-text-faint); flex:none;
}
.bb-market-option.is-selected .bb-market-cur{ color:var(--bb-gold); }

/* Header region chip */
.bb-market-chip{
  display:inline-flex; align-items:center; gap:.5em; cursor:pointer;
  margin-top:.6em; padding:.45em .9em;
  background:transparent !important;
  border:1px solid var(--bb-border-soft);
  color:var(--bb-text-muted) !important;
  font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600;
  box-shadow:none;
  transition:border-color .3s var(--bb-ease), color .3s var(--bb-ease), background-color .3s var(--bb-ease);
}
.bb-market-chip:hover{
  border-color:var(--bb-gold); color:var(--bb-gold-light) !important;
  background:rgba(188,154,63,.07) !important; transform:none;
}

/* Products with no peso price yet */
.bb-price-request{
  color:var(--bb-text-faint); font-style:italic;
  font-size:.9rem; letter-spacing:.03em;
}

@media (max-width:600px){
  .bb-market-title{ font-size:1.3rem; }
  .bb-market-option{ padding:.9em 1em; }
}

/* ==========================================================================
   9. Distributor signup form ([bellabio_distributor_signup])
   ========================================================================== */
.bb-distributor-form{
  max-width:560px; margin:0 auto; padding:2.4em 2.2em;
  background:linear-gradient(180deg, var(--bb-bg-raised), var(--bb-bg-card));
  border:1px solid var(--bb-border-soft);
}
.bb-distributor-form label{
  display:block; margin-bottom:.4em; color:var(--bb-text-muted);
  text-transform:uppercase; letter-spacing:.1em; font-size:.72rem; font-weight:600;
}
.bb-distributor-form input[type="text"],
.bb-distributor-form input[type="email"],
.bb-distributor-form input[type="password"],
.bb-distributor-form textarea{
  width:100%; padding:.85em 1em; margin-top:.3em;
  background:var(--bb-bg); border:1px solid var(--bb-border-soft); color:var(--bb-text);
  font-family:var(--bb-font-body); font-size:.95rem;
}
.bb-distributor-form input:focus, .bb-distributor-form textarea:focus{
  outline:none; border-color:var(--bb-gold);
}
.bb-distributor-form p{ margin-bottom:1.2em; }
.bb-distributor-notice{
  padding:1em 1.2em; margin-bottom:1.6em; border:1px solid var(--bb-border);
  font-size:.9rem; line-height:1.6;
}
.bb-distributor-notice-success{ color:var(--bb-gold-light); border-color:var(--bb-gold); }
.bb-distributor-notice-error{ color:#e29a9a; border-color:#7a3a3a; }

/* ==========================================================================
   10. Affiliate signup page ([bellabio_affiliate_signup])
   ========================================================================== */
.bb-affiliate-page{ max-width:720px; margin:0 auto; }

.bb-affiliate-admin-login{
  display:flex; align-items:center; justify-content:flex-end; gap:.8em;
  margin-bottom:1.6em; font-size:.8rem; color:var(--bb-text-faint);
  letter-spacing:.04em;
}
.bb-affiliate-admin-login .button{ padding:.6em 1.4em; font-size:.68rem; }

.bb-affiliate-benefits{
  display:flex; flex-wrap:wrap; gap:1px; margin-bottom:1.8em;
  background:var(--bb-border-soft);
  border:1px solid var(--bb-border-soft);
}
.bb-affiliate-benefit{
  flex:1 1 180px; text-align:center; padding:1.8em 1.2em;
  background:linear-gradient(180deg, var(--bb-bg-raised), var(--bb-bg-card));
}
.bb-affiliate-benefit-num{
  display:block; font-family:var(--bb-font-display); font-size:2.1rem;
  color:var(--bb-gold-light); margin-bottom:.3em; line-height:1;
}
.bb-affiliate-benefit-label{
  display:block; color:var(--bb-text-muted); font-size:.78rem;
  letter-spacing:.03em; line-height:1.5;
}

.bb-affiliate-intro{
  text-align:center; color:var(--bb-text-muted); line-height:1.7;
  max-width:560px; margin:0 auto 2.2em; font-size:.95rem;
}

.bb-affiliate-form{
  max-width:560px; margin:0 auto; padding:2.4em 2.2em;
  background:linear-gradient(180deg, var(--bb-bg-raised), var(--bb-bg-card));
  border:1px solid var(--bb-border-soft);
}
.bb-affiliate-form label{
  display:block; margin-bottom:.4em; color:var(--bb-text-muted);
  text-transform:uppercase; letter-spacing:.1em; font-size:.72rem; font-weight:600;
}
.bb-affiliate-form input[type="text"],
.bb-affiliate-form input[type="email"],
.bb-affiliate-form textarea{
  width:100%; padding:.85em 1em; margin-top:.3em;
  background:var(--bb-bg); border:1px solid var(--bb-border-soft); color:var(--bb-text);
  font-family:var(--bb-font-body); font-size:.95rem;
}
.bb-affiliate-form input:focus, .bb-affiliate-form textarea:focus{
  outline:none; border-color:var(--bb-gold);
}
.bb-affiliate-form p{ margin-bottom:1.2em; }

.bb-affiliate-notice{
  max-width:560px; margin:0 auto 1.6em; padding:1em 1.2em;
  border:1px solid var(--bb-border); font-size:.9rem; line-height:1.6;
}
.bb-affiliate-notice-success{ color:var(--bb-gold-light); border-color:var(--bb-gold); }
.bb-affiliate-notice-error{ color:#e29a9a; border-color:#7a3a3a; }

@media (max-width:600px){
  .bb-affiliate-admin-login{ justify-content:center; text-align:center; flex-wrap:wrap; }
}

/* ==========================================================================
   11. Scrolling announcement ticker
   ========================================================================== */
.bb-ticker{
  position:relative; overflow:hidden;
  background:linear-gradient(90deg, var(--bb-gold-dark), var(--bb-gold) 45%, var(--bb-gold-dark));
  border-bottom:1px solid rgba(0,0,0,.35);
  padding:.62em 0;
}
/* Soft fade at both ends so items enter and leave rather than pop. */
.bb-ticker::before, .bb-ticker::after{
  content:""; position:absolute; top:0; bottom:0; width:60px; z-index:2; pointer-events:none;
}
.bb-ticker::before{ left:0;  background:linear-gradient(90deg, rgba(160,128,52,1), rgba(160,128,52,0)); }
.bb-ticker::after { right:0; background:linear-gradient(270deg, rgba(160,128,52,1), rgba(160,128,52,0)); }

.bb-ticker-track{
  display:flex; width:max-content;
  animation:bbTicker 60s linear infinite;
}
.bb-ticker-group{ display:flex; flex:none; }
.bb-ticker-item{
  display:inline-flex; align-items:center; flex:none;
  padding:0 2.6em;
  color:#1a150a; font-size:.74rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; white-space:nowrap;
}
.bb-ticker-item::after{
  content:""; width:5px; height:5px; margin-left:2.6em;
  background:rgba(26,21,10,.55); transform:rotate(45deg); flex:none;
}
@keyframes bbTicker{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.bb-ticker:hover .bb-ticker-track{ animation-play-state:paused; }

@media (max-width:600px){
  .bb-ticker-item{ padding:0 1.5em; font-size:.66rem; letter-spacing:.14em; }
  .bb-ticker-item::after{ margin-left:1.5em; }
  .bb-ticker-track{ animation-duration:42s; }
}
@media (prefers-reduced-motion: reduce){
  .bb-ticker-track{ animation:none; }
  .bb-ticker{ overflow-x:auto; }
}

/* ==========================================================================
   12. Header — one row: logo · navigation · actions
   ========================================================================== */
#masthead .col-full{
  display:flex; align-items:center; gap:1.6em;
  padding-top:.7em; padding-bottom:.7em;
}
#masthead .site-branding{ flex:0 0 auto; margin:0; padding:0; width:auto; float:none; }
#masthead .site-branding .logo, #masthead .site-branding .site-title{ margin:0; }

#masthead .main-navigation{
  flex:1 1 auto; min-width:0; width:auto; float:none; margin:0; padding:0;
  display:flex; justify-content:center;
}
#masthead .main-navigation .primary-navigation{ width:100%; }
#masthead .main-navigation > div > ul.menu,
#masthead .main-navigation > div > ul.nav-menu{
  display:flex; justify-content:center; flex-wrap:wrap; margin:0; padding:0;
}
#masthead .main-navigation ul li{ float:none; margin:0; }
#masthead .main-navigation ul li a{ padding:1.1em .95em; display:block; }

/* Right-hand cluster */
.bb-header-actions{
  flex:0 0 auto; margin-left:auto;
  display:flex; align-items:center; gap:.55em;
}
.bb-icon-btn{
  width:38px; height:38px; flex:none; border-radius:50%; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent !important; border:1px solid var(--bb-border-soft);
  box-shadow:none; cursor:pointer;
  transition:border-color .3s var(--bb-ease), background-color .3s var(--bb-ease);
}
.bb-icon-btn svg{ width:18px; height:18px; fill:var(--bb-gold); transition:fill .3s var(--bb-ease); }
.bb-icon-btn:hover{ border-color:var(--bb-gold); background:rgba(188,154,63,.09) !important; transform:none; }
.bb-icon-btn:hover svg{ fill:var(--bb-gold-light); }

.bb-header-search{ position:relative; }
.bb-search-panel{
  position:absolute; right:0; top:calc(100% + .85em); z-index:220; width:min(360px, 78vw);
  padding:1.1em; background:var(--bb-bg-card);
  border:1px solid var(--bb-border); box-shadow:var(--bb-shadow-lift);
}
.bb-search-panel[hidden]{ display:none; }
.bb-search-panel .site-search{ margin:0; padding:0; width:100%; float:none; }
.bb-search-panel input[type="search"], .bb-search-panel input[type="text"]{
  width:100%; background:var(--bb-bg); border:1px solid var(--bb-border-soft); color:var(--bb-text);
}

#masthead .bb-market-chip{ margin-top:0; }
#masthead .site-header-cart{
  display:flex; align-items:center; margin:0; padding:0; float:none; width:auto; list-style:none;
}
#masthead .site-header-cart li{ float:none; margin:0; }
#masthead .site-header-cart .cart-contents{ padding:.5em .8em; display:inline-flex; align-items:center; gap:.5em; }

/* Dropdowns */
#masthead .main-navigation ul.menu ul, #masthead .main-navigation ul.nav-menu ul{
  position:absolute; left:0; top:100%; z-index:230;
  display:block; min-width:230px; padding:.5em 0; margin:0;
  background:var(--bb-bg-card); border:1px solid var(--bb-border);
  box-shadow:var(--bb-shadow-lift);
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .25s var(--bb-ease), transform .25s var(--bb-ease), visibility .25s;
}
#masthead .main-navigation li.menu-item-has-children{ position:relative; }
#masthead .main-navigation li.menu-item-has-children > a::before{
  content:""; position:absolute; right:.1em; top:50%; margin-top:-2px;
  border:4px solid transparent; border-top-color:currentColor; opacity:.6;
}
#masthead .main-navigation li.menu-item-has-children > a{ padding-right:1.5em; }
#masthead .main-navigation li:hover > ul,
#masthead .main-navigation li.bb-open > ul{ opacity:1; visibility:visible; transform:translateY(0); }
#masthead .main-navigation ul ul li a{
  padding:.7em 1.3em; font-size:.72rem; letter-spacing:.12em; white-space:nowrap;
}
#masthead .main-navigation ul ul li a::after{ display:none; }
#masthead .main-navigation ul ul li a:hover{ background:rgba(188,154,63,.08); color:var(--bb-gold-light); }
/* Keep the last dropdown from running off the right edge. */
#masthead .main-navigation > div > ul > li:last-child ul{ left:auto; right:0; }

/* Handheld: fall back to Storefront's stacked toggle menu. */
@media (max-width:768px){
  #masthead .col-full{ flex-wrap:wrap; gap:.8em; }
  #masthead .main-navigation{ order:3; flex:1 1 100%; display:block; }
  #masthead .main-navigation > div > ul.menu,
  #masthead .main-navigation > div > ul.nav-menu{ display:block; }
  #masthead .main-navigation ul.menu ul, #masthead .main-navigation ul.nav-menu ul{
    position:static; opacity:1; visibility:visible; transform:none;
    border:none; box-shadow:none; background:transparent; padding-left:1.2em;
  }
  #masthead .main-navigation li.menu-item-has-children > a::before{ display:none; }
  .bb-header-actions{ margin-left:auto; }
}

/* ==========================================================================
   13. Learn — Learning Hub, Journal, FAQs, Contact pages
   ========================================================================== */
.bb-learn, .bb-journal, .bb-faq-page, .bb-contact-page{ max-width:900px; margin:0 auto; }
.bb-learn-head p{ font-size:1rem; }

.bb-learn-controls{
  display:flex; align-items:center; justify-content:center; gap:.7em;
  margin:0 0 2em; color:var(--bb-text-faint);
}
.bb-learn-ctl{
  background:transparent !important; border:none; box-shadow:none; padding:.2em .1em;
  color:var(--bb-text-muted) !important; cursor:pointer;
  font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; font-weight:600;
  transition:color .3s var(--bb-ease);
}
.bb-learn-ctl:hover{ color:var(--bb-gold-light) !important; transform:none; box-shadow:none; }

.bb-learn-grid{ display:grid; gap:1.1em; }
.bb-learn-module{
  background:linear-gradient(180deg, var(--bb-bg-raised), var(--bb-bg-card));
  border:1px solid var(--bb-border-soft);
  transition:border-color .35s var(--bb-ease), box-shadow .35s var(--bb-ease);
}
.bb-learn-module[open], .bb-learn-module:hover{ border-color:var(--bb-border); box-shadow:var(--bb-shadow-lift); }
.bb-learn-module summary{
  display:grid; grid-template-columns:auto 1fr auto; gap:.35em 1em; align-items:center;
  cursor:pointer; list-style:none; padding:1.6em 1.9em;
}
.bb-learn-module summary::-webkit-details-marker{ display:none; }
.bb-learn-tag{
  grid-column:1; justify-self:start; align-self:center;
  padding:.3em .85em; border:1px solid var(--bb-border);
  font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; font-weight:600;
  background:var(--bb-gradient-gold); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.bb-learn-title{
  grid-column:2; font-family:var(--bb-font-display); font-size:1.15rem; color:var(--bb-text);
}
.bb-learn-time{
  grid-column:3; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--bb-text-faint);
  white-space:nowrap;
}
.bb-learn-summary{ grid-column:2; font-size:.88rem; color:var(--bb-text-muted); }
.bb-learn-cta{
  grid-column:3; justify-self:end;
  font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600;
  color:var(--bb-gold); white-space:nowrap;
}
.bb-learn-module[open] .bb-learn-cta{ opacity:.45; }

.bb-learn-body{ padding:0 1.9em 1.9em; border-top:1px solid var(--bb-border-soft); margin-top:0; }
.bb-learn-points{
  list-style:none; margin:1.6em 0 1.6em; padding:1.2em 1.4em;
  background:rgba(188,154,63,.05); border-left:2px solid var(--bb-gold);
}
.bb-learn-points li{ position:relative; padding-left:1.3em; margin-bottom:.55em; font-size:.86rem; color:var(--bb-text); }
.bb-learn-points li:last-child{ margin-bottom:0; }
.bb-learn-points li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:5px; height:5px; background:var(--bb-gold); transform:rotate(45deg);
}
.bb-learn-body p{ margin:0 0 1.1em; font-size:.94rem; }
.bb-learn-body p:last-child{ margin-bottom:0; }

.bb-learn-disclaimer{
  margin:2.4em 0 0; padding:1em 1.2em;
  border-left:2px solid var(--bb-gold);
  background:linear-gradient(90deg, rgba(188,154,63,.08), transparent);
  color:var(--bb-text-muted); font-size:.72rem; letter-spacing:.05em; text-transform:uppercase;
}
.bb-learn-next{ display:flex; gap:1.1em; flex-wrap:wrap; justify-content:center; margin-top:2.6em; }

@media (max-width:600px){
  .bb-learn-module summary{ grid-template-columns:1fr; padding:1.3em 1.3em; gap:.5em; }
  .bb-learn-tag, .bb-learn-title, .bb-learn-time, .bb-learn-summary, .bb-learn-cta{ grid-column:1; justify-self:start; }
  .bb-learn-body{ padding:0 1.3em 1.4em; }
}

/* Journal */
.bb-journal-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.5em; }
.bb-journal-card{
  display:block; padding:2em 1.8em; text-decoration:none; color:inherit;
  background:var(--bb-bg-card); border:1px solid var(--bb-border-soft);
  transition:transform .4s var(--bb-ease), border-color .4s var(--bb-ease), box-shadow .4s var(--bb-ease);
}
.bb-journal-card:hover{ transform:translateY(-5px); border-color:var(--bb-border); box-shadow:var(--bb-shadow-lift); color:inherit; }
.bb-journal-date{ font-size:.65rem; letter-spacing:.18em; text-transform:uppercase; color:var(--bb-text-faint); }
.bb-journal-card h3{ margin:.6em 0 .5em; font-size:1.12rem; }
.bb-journal-card p{ font-size:.88rem; color:var(--bb-text-muted); margin:0 0 1.1em; }
.bb-journal-more{ font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600; color:var(--bb-gold); }

/* FAQ + contact pages reuse the homepage section styles. */
.bb-faq-page details{ border-bottom:1px solid var(--bb-border-soft); padding:1.4em 0; }
.bb-contact-page .bb-contact-grid{ margin-top:1em; }

/* --- 12b. Header refinements ------------------------------------------- */
/* Three tracks so the navigation sits at the true centre of the header
   rather than centred in whatever space the logo and actions leave over. */
#masthead .col-full{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:1.2em;
}
#masthead .site-branding{ grid-column:1; justify-self:start; }
#masthead .main-navigation{ grid-column:2; justify-self:center; }
.bb-header-actions{ grid-column:3; justify-self:end; margin-left:0; }

/* Storefront renders its own caret through ::after, which collides with the
   gold hover underline this theme puts there. For parent items ::after
   becomes the caret; the underline is dropped on those. */
#masthead .main-navigation li.menu-item-has-children > a::before{ display:none !important; }
#masthead .main-navigation li.menu-item-has-children > a::after,
#masthead .main-navigation li.menu-item-has-children > a:hover::after{
  content:""; left:auto; right:.5em; bottom:auto; top:50%; margin-top:-2px;
  width:0; height:0; background:none; opacity:.55;
  border:4px solid transparent; border-top-color:currentColor;
  transition:opacity .3s var(--bb-ease), transform .3s var(--bb-ease);
}
#masthead .main-navigation li.menu-item-has-children:hover > a::after{ opacity:1; transform:rotate(180deg); }
#masthead .main-navigation li.menu-item-has-children ul li a::after{ display:none; }

/* Compact bar. The reference header is ~130px tall including its announcement
   strip; ours was 209px, which pushed the hero vials off the first screen.
   The two skip links were also landing as real grid items, adding a phantom
   row plus the grid gap. */
#masthead{ padding-top:1em; padding-bottom:0; }
.home #masthead{ margin-bottom:0; }
#masthead .col-full{ padding-top:.55em; padding-bottom:.55em; row-gap:0; }
#masthead .col-full > .skip-link{ position:absolute !important; }
.site-header .site-branding .custom-logo{ max-height:46px; }

/* Compact cart: basket plus a count badge, no running total in the bar. */
#masthead .site-header-cart .cart-contents{
  position:relative; padding:.45em .55em; font-size:0; line-height:1;
}
#masthead .site-header-cart .cart-contents .amount{ display:none; }
#masthead .site-header-cart .cart-contents .count{
  position:absolute; top:-2px; right:-6px; min-width:17px; height:17px; padding:0 4px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:9px; background:var(--bb-gold); color:var(--bb-bg);
  font-size:.6rem; font-weight:700; letter-spacing:0; line-height:1;
}
#masthead .site-header-cart .cart-contents::before{ font-size:1.15rem; color:var(--bb-gold); }

@media (max-width:768px){
  #masthead .col-full{ display:flex; flex-wrap:wrap; }
  #masthead .site-branding{ justify-self:auto; }
  #masthead .main-navigation{ justify-self:auto; }
  .bb-header-actions{ margin-left:auto; }
}

/* --- 12c. Cart + hero ring corrections --------------------------------- */
/* Storefront's count reads "2 items", so it sits beside the basket rather
   than in a badge — a badge would clip the words and collide with the
   account icon. */
#masthead .site-header-cart .cart-contents{
  position:static; padding:.45em .7em; font-size:.66rem; line-height:1;
  letter-spacing:.12em; text-transform:uppercase; color:var(--bb-text-muted);
  display:inline-flex; align-items:center; gap:.5em; white-space:nowrap;
}
#masthead .site-header-cart .cart-contents:hover{ color:var(--bb-gold-light); }
#masthead .site-header-cart .cart-contents .count{
  position:static; background:none; color:inherit; border-radius:0;
  min-width:0; height:auto; padding:0; font-size:.66rem; font-weight:600; letter-spacing:.12em;
}

/* The ring is a glow, not a drawn circle — the outline read as a stray arc
   behind the vial captions. */
.bb-hero-ring{ border:none; }

/* --- 12d / 13b. Final trims -------------------------------------------- */
#masthead .bb-market-chip{ white-space:nowrap; }
/* A fixed first track keeps every module title on the same left edge,
   whatever the length of its category tag. */
@media (min-width:601px){
  .bb-learn-module summary{ grid-template-columns:130px 1fr auto; }
}
/* The whole journal card is a link, so suppress Storefront's content-link
   underline on everything inside it. */
.bb-journal-card, .bb-journal-card:hover,
.bb-journal-card h3, .bb-journal-card p,
.bb-journal-card .bb-journal-date, .bb-journal-card .bb-journal-more{
  text-decoration:none !important; box-shadow:none;
}
.bb-journal-card h3{ color:var(--bb-text); transition:color .3s var(--bb-ease); }
.bb-journal-card:hover h3{ color:var(--bb-gold-light); }
/* Nothing in the actions cluster should be squeezed narrower than its
   content — the region chip was clipping its own currency label. */
.bb-header-actions > *{ flex:0 0 auto; }

/* --- Sample Payment Cart button ---------------------------------------- */
/* Outlined rather than solid: it sits beside the search and account icons,
   and a filled gold button there would out-shout the real cart. */
.bb-sample-cart-btn{
  display:inline-flex; align-items:center; gap:.55em;
  padding:.62em 1.05em; border:1px solid var(--bb-border);
  border-radius:2px; text-decoration:none; white-space:nowrap;
  color:var(--bb-gold-light); background:rgba(188,154,63,.06);
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600;
  transition:background .3s var(--bb-ease), border-color .3s var(--bb-ease), color .3s var(--bb-ease);
}
.bb-sample-cart-btn svg{ width:15px; height:15px; fill:currentColor; flex:none; }
.bb-sample-cart-btn:hover,
.bb-sample-cart-btn:focus-visible{
  background:rgba(188,154,63,.14); border-color:var(--bb-gold); color:var(--bb-gold-pale);
}
/* Storefront prints a page-list fallback for the handheld menu location,
   which is unassigned here. It renders as a sibling of the real navigation
   rather than inside .handheld-navigation, so nothing was hiding it: on
   desktop it was claiming 215px of header width and overlapping the logo,
   and duplicating every link for screen readers. It still carries the
   handheld menu on small screens, so it is only hidden from the wide layout. */
@media (min-width:768px){
  #masthead .main-navigation > div.menu{ display:none; }
}

/* Wide screens have room for the full label beside the logo, nav and cart;
   the header bar alone stretches to suit, page content keeps its own width. */
@media (min-width:1300px){
  #masthead .col-full{ max-width:1240px; }
}
/* Narrower than that, the icon carries the button on its own so the actions
   cluster never wraps onto a second row. */
@media (max-width:1299px){
  .bb-sample-cart-btn span{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
  .bb-sample-cart-btn{ padding:.62em .7em; }
}
#masthead .bb-market-chip{ width:auto; max-width:none; }
/* Storefront prints the handheld menu inside the same <nav> as the primary
   one and relies on its own wrapper's CSS to show one or the other. That
   wrapper is gone, so the primary menu serves every width. */
#masthead .main-navigation .handheld-navigation{ display:none !important; }
@media (max-width:768px){
  /* The primary menu now does the handheld job, so it follows the toggle. */
  #masthead .main-navigation .primary-navigation{ display:none; }
  #masthead .main-navigation.toggled .primary-navigation{ display:block; padding-bottom:.6em; }
  #masthead .main-navigation.toggled ul.menu,
  #masthead .main-navigation.toggled ul.nav-menu{ display:block; }
  #masthead .main-navigation ul li a{ padding:.85em 0; }
  #masthead .main-navigation ul ul li a{ padding:.6em 0 .6em 1.2em; }
  #masthead .main-navigation .dropdown-toggle{ display:none; }
}
/* The centre grid track is sized to the menu's min-content. While the menu
   was allowed to wrap, that min-content was just the widest single item, so
   the track collapsed and the nav stacked into three rows. Keeping the row
   unwrapped makes the track ask for the width it actually needs. */
@media (min-width:769px){
  #masthead .main-navigation > div > ul.menu,
  #masthead .main-navigation > div > ul.nav-menu{ flex-wrap:nowrap; }
  #masthead .main-navigation > div > ul > li > a{ white-space:nowrap; }
}
@media (min-width:769px) and (max-width:1150px){
  #masthead .col-full{ gap:.8em; }
  #masthead .main-navigation ul li a{ padding:1.1em .6em; font-size:.7rem; letter-spacing:.12em; }
  #masthead .bb-market-chip{ font-size:.6rem; padding:.4em .6em; }
}