/* ==========================================================================
   BRAVO VALLEY - brand tokens + product page primitives
   Source: brand/BRAND-GUIDELINE.md (sections 3, 5, 6, 7, 27)
   Light-mode first. Gold is an accent, never a background system.
   ========================================================================== */

:root{
  /* Brand colors (guideline s.3 / s.27) */
  --bv-white:#FFFFFF;
  --bv-grey:#F2F2F2;
  --bv-gold:#FEBE10;
  --bv-black:#1A1A1A;

  /* Supporting, derived - kept muted and secondary to gold (s.13) */
  --bv-ink-soft:#5B5B5B;
  --bv-ink-faint:#9A9A9A;
  --bv-cream:#FDF7EE;                 /* offer / feature surfaces from the comp */
  --bv-save-bg:#E8F6EC;
  --bv-save-ink:#1E7A3C;
  --bv-hairline:rgba(26,26,26,.08);
  --bv-hairline-2:rgba(26,26,26,.14);
  --bv-gold-tint:rgba(254,190,16,.12);
  --bv-gold-tint-2:rgba(254,190,16,.28);

  /* Glass (s.5) */
  --bv-glass-bg-strong:rgba(255,255,255,.84);
  --bv-glass-border:rgba(255,255,255,.72);
  --bv-glass-highlight:rgba(255,255,255,.90);
  --bv-glass-shadow:0 12px 40px rgba(26,26,26,.08);
  --bv-glass-blur-strong:28px;

  /* Radii (s.6) */
  --bv-radius-sm:12px;
  --bv-radius-md:18px;
  --bv-radius-lg:24px;
  --bv-radius-xl:30px;

  /* Motion (s.20) - 150-250ms, no bounce */
  --bv-motion-fast:150ms;
  --bv-motion-standard:200ms;
  --bv-motion-slow:250ms;
  --bv-ease:cubic-bezier(.2,.72,.3,1);
}

/* Level 3 "Floating Glass" - the sticky purchase bar is the only surface that
   floats over the page, so it is the only one that needs the glass treatment. */
.bv-card--float{
  background:var(--bv-glass-bg-strong);
  box-shadow:0 -2px 40px rgba(26,26,26,.10),
             0 12px 40px rgba(26,26,26,.08),
             inset 0 1px 0 var(--bv-glass-highlight);
}

/* Gold rule under the product promise */
.bv-rule{ width:56px; height:3px; border-radius:2px; background:var(--bv-gold); }

/* ==========================================================================
   PER-PRODUCT EDITABLE AREAS
   Built from native Bricks elements on each product, so the copy, the numbers
   and the images are edited item by item in the builder. Only structure and
   brand skin live here; sizes, colours and icons come from the element's own
   controls wherever Bricks exposes one.
   ========================================================================== */

/* --- Review line: Bricks "Rating" + Basic Text (s.12) ------------------- */
.bv-reviewline{ gap:12px; }
.bv-reviewline .brxe-rating{ display:inline-flex; align-items:center; }
.bv-proof__meta{ color:var(--bv-black); font-weight:500; }

/* --- Lede paragraph ---------------------------------------------------- */
.bv-lede{ color:var(--bv-ink-soft); line-height:1.6; max-width:52ch; margin:0; }

/* --- Happy customers row: Bricks "Image" + Basic Text (s.12) ------------ */
.bv-happy{ gap:12px; }
/* One composite avatar strip (410x137) - the overlap is baked into the image,
   so it is sized by height to sit level with the text beside it. Bricks renders
   the Image element AS the <img> when there is no caption or wrapper tag, so
   the size has to land on .brxe-image itself, not on a descendant. */
.bv-happy .brxe-image{ height:34px; width:auto; flex:none; display:block; }
.bv-vsep{ width:1px; height:22px; flex:none; background:var(--bv-hairline-2); }
.bv-ok{ color:var(--bv-save-ink); font-weight:600; }

/* --- Benefit checklist: Bricks "List" element (s.11) -------------------- */
.bv-learn-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.bv-learn-list li{ margin:0; padding:0; }
.bv-learn-list li .content{ display:flex; align-items:flex-start; gap:12px; line-height:1.45; }
/* Disc size, gold fill and radius all come from the element's Icon controls -
   only the centring of the glyph inside the disc has no control to set it. */
.bv-learn-list li .icon{
  flex:none; display:inline-flex; align-items:center; justify-content:center;
  margin-top:1px;
}
.bv-learn-list li .title{ color:var(--bv-black); font-weight:400; }

/* --- Offer card (s.13 / s.14) ------------------------------------------
   Comp: price on the left, countdown on the right, on one warm surface. */
.bv-offer{
  display:grid; grid-template-columns:1fr auto; gap:18px 24px; align-items:start;
  background:var(--bv-cream);
  border:1px solid var(--bv-gold-tint-2);
  border-radius:var(--bv-radius-md);
  padding:16px 18px;
}
.bv-offer__col{ display:flex; flex-direction:column; gap:9px; width:auto; }
.bv-offer__label{ font-size:.85rem; color:var(--bv-ink-soft); font-weight:500; line-height:1.3; }

.bv-price{ display:flex; flex-direction:column; gap:8px; }
.bv-price__row{ display:flex; flex-direction:row; align-items:baseline; gap:12px; flex-wrap:wrap; }
.bv-price__now{
  font-size:clamp(1.7rem,1.2rem + 1.6vw,2.15rem);
  font-weight:800; line-height:1.05; letter-spacing:-.025em; color:var(--bv-black);
}
.bv-price__mrp{
  font-size:1.05rem; font-weight:600; color:var(--bv-ink-faint);
  text-decoration:line-through;
}
.bv-price__save{
  align-self:flex-start;
  background:var(--bv-save-bg); color:var(--bv-save-ink);
  border-radius:8px; padding:4px 10px; font-size:.8rem; font-weight:600;
}

/* --- Countdown: native blocks, digits written by bv-product.js (s.14) --- */
.bv-countdown-grid{ display:flex; flex-direction:row; align-items:flex-start; gap:7px; }
.bv-cd-field{
  display:flex; flex-direction:column; align-items:center; gap:5px;
  flex:0 0 auto; width:auto;
}
.bv-cd-value{
  display:block; min-width:54px; text-align:center; padding:7px 6px;
  background:#F7E4C4; border-radius:10px;
  font-size:1.3rem; font-weight:800; line-height:1.15; color:var(--bv-black);
  font-variant-numeric:tabular-nums;
}
.bv-cd-label{
  font-size:.6rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--bv-ink-soft); line-height:1.4;
}
/* The colon lines up with the digit boxes, not with the labels beneath them. */
.bv-cd-colon{
  flex:none; line-height:42px;
  font-size:1.15rem; font-weight:700; color:var(--bv-ink-faint);
}

/* --- CTA (s.19) - gold bg, night black text, generous height ------------ */
.bv-buy{
  /* flex-direction is stated because these are native Bricks blocks now, and
     Bricks gives .brxe-block flex-direction:column. */
  display:inline-flex; flex-direction:row; align-items:center; justify-content:center; gap:10px;
  background:var(--bv-gold); color:var(--bv-black);
  border:0; border-radius:var(--bv-radius-sm);
  min-height:56px; padding:0 30px;
  font-weight:700; letter-spacing:.02em; font-size:1.05rem;
  text-decoration:none; cursor:pointer;
  box-shadow:0 6px 18px -6px rgba(254,190,16,.55);
  transition:transform var(--bv-motion-fast) var(--bv-ease),
             box-shadow var(--bv-motion-standard) var(--bv-ease),
             filter var(--bv-motion-fast) var(--bv-ease);
}
.bv-buy:hover{ transform:translateY(-1px); box-shadow:0 10px 24px -8px rgba(254,190,16,.65); }
.bv-buy:active{ transform:translateY(0) scale(.99); filter:brightness(.97); }
.bv-buy--wide{ display:flex; width:100%; min-height:62px; gap:12px; font-size:1.12rem; }
.bv-buy__ico{ width:24px; height:24px; flex:none; }

.bv-secure{
  display:block; width:100%; text-align:center;
  font-size:.82rem; color:var(--bv-ink-soft);
}

/* FluentCart's own buy section stays in the DOM - the sticky bar's cart button
   proxies its add-to-cart AJAX - but the comp shows a single CTA, so it is
   taken out of flow rather than removed. */
.bv-buysec-hidden{
  position:absolute !important;
  width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}

/* --- Trust row: four Bricks "Icon Box" elements (s.22) ------------------ */
.bv-trust{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  padding-top:4px;
}
.bv-trust__item{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:9px; padding:4px 8px;
}
.bv-trust__item + .bv-trust__item{ border-left:1px solid var(--bv-hairline); }
.bv-trust__item .icon{ display:flex; }
.bv-trust__item .icon svg{ width:26px; height:26px; color:var(--bv-black); }
.bv-trust__item .content,
.bv-trust__item .content p{
  margin:0; font-size:.66rem; font-weight:600; line-height:1.5;
  letter-spacing:.06em; text-transform:uppercase; color:var(--bv-black);
}

/* --- Feature strip ----------------------------------------------------- */
/* One line wherever the copy column is wide enough; where it is not, the
   items centre so the wrap reads as deliberate. */
.bv-feat{
  display:flex; flex-direction:row; align-items:center; justify-content:center;
  flex-wrap:wrap; gap:3px 3px;
  background:var(--bv-gold-tint); border:1px solid var(--bv-gold-tint-2);
  border-radius:var(--bv-radius-sm); padding:10px 12px;
  font-size:.8rem; color:var(--bv-black);
}
.bv-feat > *{ flex:0 0 auto; width:auto; white-space:nowrap; }
/* Works for either kind of Bricks icon: an inline SVG sizes by box, an icon
   font sizes by font-size. */
.bv-feat__ico{
  width:20px; height:20px; flex:none; margin-right:2px; color:var(--bv-gold);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:17px; line-height:1;
}

/* --- Add-to-cart on the sticky bar: icon only, never competes with BUY NOW */
.bv-atc{
  display:inline-flex; align-items:center; justify-content:center;
  width:56px; height:56px; flex:none;
  background:var(--bv-white); color:var(--bv-black);
  border:1px solid var(--bv-hairline-2); border-radius:var(--bv-radius-sm);
  box-shadow:0 2px 10px rgba(26,26,26,.06);
  cursor:pointer;
  transition:border-color var(--bv-motion-standard) var(--bv-ease),
             box-shadow var(--bv-motion-standard) var(--bv-ease);
}
.bv-atc:hover{ border-color:var(--bv-black); box-shadow:0 4px 14px rgba(26,26,26,.10); }
/* The cart glyph is a native Bricks icon element. Sizing it in em means the
   builder's own "Icon size" control - which sets font-size - drives it, for an
   inline SVG and an icon font alike. Bricks only sets min-width/min-height on a
   dimensionless SVG, which is not enough to stop it filling the button. */
.bv-atc svg{ width:1em; height:1em; flex:none; }

@media (prefers-reduced-motion:reduce){
  .bv-buy,.bv-atc{ transition:none; }
  .bv-buy:hover{ transform:none; }
}