/*
Theme Name: STV Theme
Theme URI: https://strengthtrainwithval.com
Description: Custom theme for Strength Train with Val. A lean, owned replacement for Avada that carries the full brand system, WooCommerce flows, member gating (Strength Squad / 1:1), account menu, contact form, video library and transactional emails. No page-builder dependency.
Author: Lusvardi Fitness Inc
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: stv-theme
*/

/* ============================================================
   FONTS — self-hosted (replaces Avada's Google-Fonts emitter +
   the single Gazpacho @font-face). Figtree/Sora are variable
   woff2, subset to latin + latin-ext; one file per range covers
   the whole weight axis. Gazpacho is the brand display TTF.
   unicode-range lets the browser fetch only the range it needs.
   ============================================================ */

/* Figtree (body --sans), weights 400–800 */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/figtree-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/figtree-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Sora (--label / nav), weights 400–700 */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/sora-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/sora-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Gazpacho (--serif, brand display) */
@font-face {
  font-family: 'Gazpacho';
  src: url('fonts/Gazpacho-Light.ttf') format('truetype');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   BASE RESET — restores the framework base CSS the design assumed.
   Avada's PARENT theme supplied the universal border-box reset; the
   carried `.stv-*` rules were authored on top of it (padding included
   in width/height). Standalone, the browser default (content-box) made
   buttons/cards taller and spacing wrong vs the original. Restore it.
   (Caught by the spec-for-spec comparison vs stv-local.local.)
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

/* Headings: Avada's parent base kept headings tight (line-height ~1.2) and reset the
   browser's default top margin. Standalone, headings without their own line-height
   (e.g. .stv-h3 card titles) inherited the 1.65 body line-height — too tall, pushing
   cards 30–45px taller than the original — and picked up the UA top margin. Restore
   the base. The specific .stv-display / .stv-h2 / .stv-hero-content h1 / etc. rules
   set their own line-height + margins and override this (higher specificity / later). */
h1, h2, h3, h4, h5, h6 { margin-top: 0; line-height: 1.2; }

/* Paragraph spacing — Avada's parent base applied a GLOBAL paragraph margin
   (`0 0 20px`) broadly enough (≈`#wrapper p`) to override the design's own soft
   component paragraph margins (`.stv-hero-subhead:34px`, `.stv-card-desc:18px`).
   So on the LIVE site every body paragraph rendered at 20px bottom regardless of
   those component values. To preserve "zero visible change", replicate that override
   at the same `#wrapper p` specificity. Components that truly need a different
   paragraph margin use `!important` (and keep winning, exactly as on the original). */
p { margin: 0 0 20px; }
#wrapper p { margin: 0 0 20px; }

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  /* Palette */
  --bone:       #EEECE6;
  --bone-2:     #E2DBEB;
  --paper:      #FFFFFF;
  --ink:        #3E3D3A;
  --ink-soft:   #6E6863;

  /* Brand purples */
  --wine:       #4E416D;
  --wine-deep:  #362C4C;
  --clay:       #5E4D86;
  --clay-soft:  #E2DBEB;
  --sand:       #E2DBEB;

  /* CTA — swap this one variable when Val decides */
  --cta:        #5E4D86;

  /* Derived */
  --accent:     var(--wine);

  /* Borders */
  --line:       rgba(62,61,58,0.16);
  --line-soft:  rgba(62,61,58,0.09);

  /* Typography */
  --serif:      'Gazpacho', Georgia, serif;
  --sans:       'Figtree', system-ui, -apple-system, sans-serif;
  --label:      'Sora', var(--sans);

  /* Layout */
  --maxw:       1240px;
}

/* ============================================================
   BASE OVERRIDES (Avada-compatible)
   ============================================================ */
/* scroll-padding-top keeps in-page anchor jumps (#programs, #inperson, #posing,
   #contact from the nav) clear of the fixed 74px header — without it the section
   heading lands hidden under the bar and the menu link looks like it did nothing. */
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body.admin-bar { scroll-padding-top: 122px; }
body {
  background-color: var(--bone);
  color: var(--ink);
  font-family: var(--sans);
  /* Base type — Avada's parent theme set these (16px / 1.65); the carried .stv-*
     CSS assumed them, so without them body text rendered at line-height:normal
     (~1.2) and ran tighter than the original (cards/rows shorter). Restore to match
     stv-local.local exactly. Headings set their own line-height and are unaffected. */
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--clay);
  color: #fff;
}

em {
  font-family: var(--serif);
  font-style: normal;
}

.stv-wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 40px;
}

/* ============================================================
   EYEBROW LABEL
   ============================================================ */
.eyebrow {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 11px;
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: currentColor;
  display: inline-block;
  opacity: .9;
  flex-shrink: 0;
}
.eyebrow.on-dark  { color: var(--clay-soft); }
.eyebrow.center   { justify-content: center; }

/* ============================================================
   BUTTONS
   ============================================================ */
.stv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .01em;
  padding: 15px 26px;
  border-radius: 4px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform .18s ease, background .2s ease, box-shadow .2s;
  line-height: 1;
}
.stv-btn .arr { transition: transform .2s; }
.stv-btn:hover .arr { transform: translateX(4px); }

.stv-btn-primary {
  background: var(--accent); /* wine — spec .btn-primary (was clay via --cta) */
  color: #fff;
}
.stv-btn-primary:hover {
  background: var(--wine-deep);
  box-shadow: 0 12px 26px -12px rgba(78,65,109,.6);
  transform: translateY(-1px);
  color: #fff;
}
.stv-btn-clay:hover {
  box-shadow: 0 12px 26px -12px rgba(94,77,134,.6);
  transform: translateY(-1px);
  color: #fff;
}

.stv-btn-clay {
  background: var(--cta);
  color: #fff;
}

.stv-btn-outline {
  background: transparent;
  border: 1.5px solid var(--ink);
  color: var(--ink);
}
.stv-btn-outline:hover {
  background: var(--ink);
  color: var(--paper);
}

.stv-btn-ghost-light {
  background: rgba(255,255,255,.08);
  border: 1.5px solid rgba(255,255,255,.55);
  color: #fff;
  backdrop-filter: blur(4px);
}
.stv-btn-ghost-light:hover {
  background: #fff;
  color: var(--ink);
  border-color: #fff; /* spec .btn-ghost-light:hover */
}

.stv-btn-lg {
  padding: 17px 30px;
  font-size: 16px;
}

/* ============================================================
   NAVIGATION — Avada header overrides
   ============================================================ */
#wrapper #header-sticky,
#wrapper #header {
  background: rgba(244,237,227,.86) !important;
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s, box-shadow .25s;
}
#wrapper #header-sticky.scrolled-past,
body.admin-bar #header-sticky.scrolled-past {
  border-bottom: 1px solid var(--line) !important;
  box-shadow: 0 8px 24px -20px rgba(33,28,26,.6);
}

/* Nav link styles (legacy Avada menu — kept as fallback) */
#wrapper .fusion-main-menu > ul > li > a {
  font-family: var(--sans) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  opacity: .82;
  transition: opacity .2s;
}
#wrapper .fusion-main-menu > ul > li > a:hover,
#wrapper .fusion-main-menu > ul > li.current-menu-item > a {
  opacity: 1;
  color: var(--accent) !important;
}

/* ── TB HEADER (section 963) desktop nav — match design exactly:
   Sora (--label) 14px 600, ink, normal-case, 30px gap.
   Breakpoint 1201px to match the menu element's 1200px collapse: the nav is built
   for the 1240px design max-width and starts colliding with the logo well above
   980px, so the hamburger now takes over at <=1200px. ── */
@media (min-width: 1201px) {
  .fusion-tb-header .awb-menu__main-ul > li > a,
  .fusion-tb-header .awb-menu__main-ul > li > a span,
  .fusion-tb-header .awb-menu__main-ul > li > a .awb-menu__link-text {
    font-family: var(--label) !important;   /* Sora, per design */
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: var(--ink) !important;           /* ink, NOT wine */
    opacity: .82;
  }
  /* links group with even gaps (menu element forces space-evenly → override) */
  .fusion-tb-header .awb-menu__main-ul { justify-content: center !important; gap: 0 !important; }
  /* hover → opacity 1 only (spec: color stays ink, font stays Sora).
     opacity needs !important to beat the base .82 !important. */
  .fusion-tb-header .awb-menu__main-ul > li > a:hover,
  .fusion-tb-header .awb-menu__main-ul > li > a:hover span {
    color: var(--ink) !important;
    font-family: var(--label) !important;
    opacity: 1 !important;
  }
  /* Cart + CTA in one nowrap row (CTA was dropping below the cart icon) */
  .fusion-tb-header .stv-header-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    gap: 14px !important;
  }
  .fusion-tb-header .stv-header-actions .stv-cart-toggle { margin-right: 8px !important; }
  .fusion-tb-header .stv-header-actions > * { flex-shrink: 0 !important; }
  .fusion-tb-header .stv-header-actions .fusion-button-wrapper,
  .fusion-tb-header .stv-header-actions .fusion-button { margin: 0 !important; white-space: nowrap !important; }
  /* current/active items must stay uniform ink .82 — anchor links to the
     current page were rendering wine/full-opacity, making the nav uneven */
  .fusion-tb-header .awb-menu__main-ul > li.current-menu-item > a,
  .fusion-tb-header .awb-menu__main-ul > li.current-menu-item > a span,
  .fusion-tb-header .awb-menu__main-ul > li.current_page_item > a,
  .fusion-tb-header .awb-menu__main-ul > li.current_page_item > a span,
  .fusion-tb-header .awb-menu__main-ul > li.current-menu-ancestor > a,
  .fusion-tb-header .awb-menu__main-ul > li.current-menu-ancestor > a span {
    color: var(--ink) !important;
    opacity: .82 !important;
  }
  /* Hover brightens ANY link to opacity 1 (incl. the current item) — placed
     after the current-item rule so it wins the equal-specificity tiebreak. */
  .fusion-tb-header .awb-menu__main-ul > li > a:hover,
  .fusion-tb-header .awb-menu__main-ul > li > a:hover span,
  .fusion-tb-header .awb-menu__main-ul > li.current-menu-item > a:hover,
  .fusion-tb-header .awb-menu__main-ul > li.current_page_item > a:hover,
  .fusion-tb-header .awb-menu__main-ul > li.current-menu-ancestor > a:hover {
    opacity: 1 !important;
    color: var(--ink) !important;
  }
  /* 30px gap between links (design .nav-links gap:30px) */
  .fusion-tb-header .awb-menu__main-ul > li { margin: 0 15px !important; padding: 0 !important; }
  .fusion-tb-header .awb-menu__main-ul > li > a { padding-left: 0 !important; padding-right: 0 !important; }
}

/* Header CTA "Apply for 1:1 →" — design .btn: Figtree 700 15px, padding 15px 26px */
.fusion-tb-header .fusion-button {
  text-transform: none !important;
  font-family: var(--sans) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  padding: 15px 26px !important;
  border-radius: 4px !important;
  letter-spacing: .01em !important;
  /* Nav CTA = .btn-primary = wine (--accent), not clay. Per design spec. */
  background: var(--accent) !important;
  background-color: var(--accent) !important;
  background-image: none !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}
.fusion-tb-header .fusion-button:hover {
  background: var(--wine-deep) !important;
  background-color: var(--wine-deep) !important;
  border-color: var(--wine-deep) !important;
  box-shadow: 0 12px 26px -12px rgba(78,65,109,.6) !important;
  transform: translateY(-1px);
}
/* Header CTA arrow — render a real "→" via the system sans stack instead of the
   Font Awesome glyph. The fa-arrow-right (\f061) webfont tofu'd to a box whenever
   Avada's compiled CSS / FA subset went stale; the literal arrow (same one used on
   every other button) can't tofu. The existing icon <i> is kept so Avada's
   hover-slide still animates it. */
.fusion-tb-header .fusion-button .awb-button__icon.fa-arrow-right::before {
  content: "\2192" !important;          /* → */
  font-family: var(--sans) !important;
  font-weight: 700 !important;
}

/* Logo — design height 44px (imageframe max_width chokes it to 26px) */
.fusion-tb-header .fusion-imageframe img,
.fusion-tb-header .imageframe-align-center img,
.fusion-tb-header .fusion-logo img,
#wrapper .fusion-logo img {
  height: 44px !important;
  width: auto !important;
  max-width: none !important;
  max-height: 44px !important;
}
.fusion-tb-header .fusion-imageframe,
.fusion-tb-header .imageframe-align-center { max-width: none !important; }

/* Header layout — exact design spec (.nav .wrap): bar spans the viewport, 74px tall,
   logo + CTA flush to a 40px gutter on BOTH sides.
   NOTE (2026-06-26): these rules were originally keyed to `.fullwidth-box.fusion-builder-row-1`.
   Avada assigns `fusion-builder-row-N` by render order, and a Theme Builder re-save bumped the
   header box from row-1 to row-15 — silently orphaning EVERY header rule below and wrecking the
   nav on both desktop (logo/CTA drifted to the edges) and mobile (oversized logo, cart/hamburger
   collision). Keyed to `.fullwidth-box.fusion-sticky-container` instead: the header bar is the
   ONLY sticky container on the page, so this is unique and immune to row renumbering. Do not
   re-introduce a numeric row index here.
   (1) The full-bleed box used a 100vw + negative-margin breakout that left the bar
   offset ~7px and clipped the logo; pin it to the viewport edges instead so the 40px
   gutter is measured from the true edges. Applies fixed (stuck) + absolute (un-stuck). */
.fusion-tb-header .fullwidth-box.fusion-sticky-container {
  left: 0 !important;
  right: 0 !important;
  width: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* (2) Inner row: 74px tall, vertically centered, content held inside the 1240px
   design column via a RESPONSIVE side gutter (NOT a max-width cap).
   Why not max-width: Avada stamps an inline `width:104% !important; max-width:104%
   !important` on .fusion-row (its column-gutter math), and inline !important beats
   any stylesheet rule — so a max-width cap here is a silent no-op. The frosted bar
   is the box's ::before (inset:0), so the box must stay full-bleed or the frost
   shrinks. The only lever that works is the gutter: grow the side padding so the
   logo/CTA sit inside a centered 1240px column while the bar + frost stay full width.
   Below ~1240px viewport the calc collapses to the flat 40px design gutter; the
   <=600px rule further drops it to 20px. */
.fusion-tb-header .fullwidth-box.fusion-sticky-container > .fusion-row {
  padding: 0 max(40px, calc((100% - var(--maxw)) / 2 + 40px)) !important;
  box-sizing: border-box !important;
  min-height: 74px !important;
  align-items: center !important;
}
/* (3) Logo flush-left and CTA flush-right — strip the intra-column inset so they sit
   exactly on the 40px gutter (no extra inset beyond the wrap padding). */
.fusion-tb-header .fullwidth-box.fusion-sticky-container > .fusion-row > .fusion-layout-column { margin: 0 !important; }
/* Avada adds a ~44px column gutter via .fusion-column-wrapper margin-left — that was
   pushing the logo/CTA inward off the 40px gutter. Zero it inside the header. */
.fusion-tb-header .fullwidth-box.fusion-sticky-container .fusion-column-wrapper { margin-left: 0 !important; margin-right: 0 !important; }
.fusion-tb-header .fusion-logo,
.fusion-tb-header .fusion-logo a,
.fusion-tb-header .fusion-imageframe,
.fusion-tb-header .fusion-image-element { margin: 0 !important; padding: 0 !important; }

/* ============================================================
   TYPOGRAPHY UTILITIES
   ============================================================ */
.stv-display {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(46px, 7vw, 104px);
  line-height: .98;
  letter-spacing: -.02em;
}

.stv-h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(32px, 4.4vw, 56px);
  line-height: 1.05;
  letter-spacing: -.015em;
}

.stv-h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 30px;
}

.stv-price {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(34px, 4vw, 50px);
}

.stv-caption {
  font-family: var(--label);
  font-size: 12px;
  letter-spacing: .13em;
  text-transform: uppercase;
  font-weight: 600;
}

/* ============================================================
   CREDIBILITY STRIP
   ============================================================ */
.stv-cred-strip {
  background: var(--ink);
  color: #fff;
}
/* Dividers are drawn with a 1px grid gap over a line-colored grid background:
   cells sit on opaque --ink, the gap reveals the line. This always aligns the
   interior cross/lines regardless of cell height — no fragile per-cell borders. */
.stv-cred-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255,255,255,.12);
}
.stv-cred-cell {
  padding: 38px 30px;
  background: var(--ink);
}
/* wpautop appends a stray empty <p> as a 5th grid child — on the 2-col mobile grid
   it became an empty dark bar in a phantom 3rd row. Drop it. */
.stv-cred-grid > p { display: none !important; }
/* Same wpautop artifact on the Programs/Services grids — stray <p> direct
   children become phantom grid cells. Neither grid has legitimate direct
   <p> children, so drop them all (bare > p also catches the &nbsp;-only
   ones that :empty would miss). */
.stv-cards-grid > p,
.stv-service-grid > p { display: none !important; }
.stv-cred-num {
  font-family: var(--serif);
  font-size: clamp(34px, 4vw, 50px);
  color: var(--clay-soft);
  line-height: 1;
  display: block;
  margin-bottom: 8px;
}
.stv-cred-label {
  font-family: var(--label);
  font-size: 12.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(251,247,240,.72);
  line-height: 1.4;
}
@media (max-width: 700px) {
  .stv-cred-grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   PRICING CARDS
   ============================================================ */
.stv-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: start;
}
.stv-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 36px 32px;
  position: relative;
}
.stv-card.featured {
  background: var(--ink);
  color: #fff;
  transform: translateY(-10px);
  box-shadow: 0 30px 60px -34px rgba(33,28,26,.65);
}
.stv-card-ribbon {
  position: absolute;
  top: 0; left: 0; right: 0;
  background: var(--clay);
  color: #fff;
  font-family: var(--label);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: center;
  padding: 8px;
  border-radius: 10px 10px 0 0;
}
.stv-card-type {
  font-family: var(--label);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: 12px;
}
.stv-card.featured .stv-card-type { color: var(--clay-soft); }

.stv-checklist {
  list-style: none;
  padding: 0;
  margin: 20px 0 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.stv-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  line-height: 1.5;
}
.stv-check-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--clay-soft);
  flex-shrink: 0;
  display: grid;
  place-items: center;
  margin-top: 2px;
}
.stv-card.featured .stv-check-icon { background: var(--clay); }
.stv-check-icon::after {
  content: "";
  width: 6px;
  height: 4px;
  border-left: 1.5px solid var(--wine-deep);
  border-bottom: 1.5px solid var(--wine-deep);
  transform: rotate(-45deg) translateY(-1px);
}
.stv-card.featured .stv-check-icon::after {
  border-color: #fff;
}

@media (max-width: 860px) {
  .stv-cards-grid { grid-template-columns: 1fr; }
  .stv-card.featured { transform: none; }
}

/* ============================================================
   SPECIALTY SERVICE CARDS (pack selector)
   ============================================================ */
.stv-service-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.stv-service-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.stv-service-img {
  aspect-ratio: 16/10;
  background: var(--bone-2);
  overflow: hidden;
}
.stv-service-img img { width: 100%; height: 100%; object-fit: cover; }
/* Portrait variant — full-body shots (e.g. posing) shown without cropping feet. */
.stv-service-img--portrait { aspect-ratio: 4/5; }
.stv-service-img--portrait img { object-position: center top; }
.stv-service-body { padding: 30px 28px 34px; }

.stv-pack-list {
  list-style: none;
  padding: 0;
  margin: 16px 0 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.stv-pack-item {
  border: 1.5px solid var(--line);
  border-radius: 11px;
  padding: 14px 18px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: border-color .18s, box-shadow .18s;
  position: relative;
}
.stv-pack-item:hover { border-color: var(--clay); } /* spec .pack:hover */
.stv-pack-item.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(94,77,134,.12);
}
.stv-pack-item.selected:hover { border-color: var(--accent); }
.stv-pack-item input[type="radio"] { display: none; }
.stv-pack-radio {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  margin-right: 12px;
  flex-shrink: 0;
  transition: border-color .18s;
  position: relative;
}
.stv-pack-item.selected .stv-pack-radio {
  border-color: var(--accent);
  background: var(--accent);
}
.stv-pack-item.selected .stv-pack-radio::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #fff;
}
.stv-best-badge {
  font-family: var(--label);
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: var(--clay-soft);
  color: var(--wine-deep);
  padding: 3px 8px;
  border-radius: 99px;
}

@media (max-width: 760px) {
  .stv-service-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.stv-testimonials {
  background: var(--ink);
  color: #fff;
  padding: 80px 0;
}
/* Section header rhythm = design spec exactly. The headline keeps the global
   .stv-h2 size (clamp(32px,4.4vw,56px)/lh 1.05). The original "loose" look was
   the eyebrow <p>'s default bottom margin DOUBLING the h2's top margin — zero it
   so the 18px h2 margin-top is the whole gap (matches the design .sec-head). */
.stv-testimonials .eyebrow.on-dark { margin-bottom: 0; }
/* Avada adds a big default margin-bottom to the h2 that the design doesn't have,
   which alone blew the headline→intro gap to ~145px vs the design's ~79px. Zero
   it so the intro's own 20px margin-top is the whole gap. Body-scoped !important
   to beat Avada. */
body .stv-testimonials .stv-h2 { margin-bottom: 0 !important; }
/* Section intro paragraph under the h2 (design .testi .sec-head p) —
   left-aligned, readable measure. */
.stv-testimonials .stv-testi-intro {
  /* design .sec-head p spacing */
  margin: 20px 0 0;
  font-size: 18px;
  line-height: 1.6;
  color: rgba(251,247,240,.7);
  max-width: 60ch;
  text-align: left !important;
}

/* ---------- VIDEO TESTIMONIALS ---------- */
.vtest-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 52px;
}
.vtest {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  border: none;
  padding: 0;
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  background: var(--wine-deep);
  text-align: left;
  box-shadow: 0 26px 50px -30px rgba(0,0,0,.7);
  transition: transform .3s ease, box-shadow .3s ease;
}
.vtest:hover { transform: translateY(-5px); box-shadow: 0 36px 64px -28px rgba(0,0,0,.78); }
.vtest:focus-visible { outline: 3px solid var(--clay-soft); outline-offset: 3px; }
.vtest-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
  transition: transform .5s ease;
}
.vtest:hover .vtest-poster { transform: scale(1.05); }
.vtest-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(33,28,26,.74) 0%, rgba(33,28,26,.32) 26%, rgba(33,28,26,0) 54%, rgba(33,28,26,0) 100%);
}
.vtest-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  display: grid;
  place-items: center;
  transition: transform .25s ease, background .25s ease;
  box-shadow: 0 10px 30px -8px rgba(0,0,0,.5);
}
.vtest:hover .vtest-play { transform: translate(-50%, -50%) scale(1.08); background: #fff; }
.vtest-play svg { width: 22px; height: 22px; margin-left: 3px; fill: var(--wine-deep); }
.vtest-cap {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  padding: 20px 20px 22px;
}
.vtest-name {
  display: block;
  font-family: var(--serif);
  font-size: 23px;
  line-height: 1.1;
  color: #fff;
}
.vtest-role {
  display: block;
  margin-top: 6px;
  font-family: var(--label);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(251,247,240,.78);
}
@media (max-width: 820px) {
  .vtest-grid { grid-template-columns: 1fr; max-width: 380px; margin-left: auto; margin-right: auto; }
}
/* Inline mobile playback: tapping a card plays in place (no lightbox popout).
   Drop the poster overlays so native video controls are clean and tappable. */
.vtest--playing { cursor: default; }
.vtest--playing .vtest-scrim,
.vtest--playing .vtest-play,
.vtest--playing .vtest-cap { opacity: 0; pointer-events: none; }
.vtest--playing .vtest-poster { object-position: center; }

/* ---------- WRITTEN TESTIMONIALS ---------- */
.wquote-head {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 74px 0 26px;
}
.wquote-head .eyebrow { flex: none; }
.wquote-head .rule { flex: 1; height: 1px; background: rgba(255,255,255,.16); }

.wquote {
  padding: 28px 28px 26px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  background: rgba(255,255,255,.035);
  position: relative;
  margin: 0;
}
.wquote::before {
  content: "\201C";
  position: absolute;
  top: 8px;
  left: 20px;
  font-family: var(--serif);
  font-size: 60px;
  line-height: 1;
  color: rgba(226,219,235,.22);
}
.wquote blockquote {
  /* Override Avada's default blockquote (dark text + left border + bg box) */
  position: relative;
  color: rgba(251,247,240,.92) !important;
  background: transparent !important;
  border: none !important;
  border-left: none !important;
  box-shadow: none !important;
  font-family: var(--serif) !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-size: 19px !important;
  line-height: 1.42 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.wquote blockquote em { color: var(--clay-soft); font-style: italic; }
.wquote figcaption {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.12);
  font-family: var(--label);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
}
.wquote figcaption span {
  display: block;
  margin-top: 5px;
  color: rgba(251,247,240,.55);
  font-weight: 500;
  letter-spacing: .08em;
}
/* lead (featured) quote */
.wquote-lead {
  text-align: center;
  padding: 46px 8% 40px;
  background: rgba(255,255,255,.05);
  margin-bottom: 22px;
}
.wquote-lead::before { left: 50%; transform: translateX(-50%); top: 18px; }
.wquote-lead blockquote {
  font-size: clamp(22px, 2.3vw, 29px) !important;
  line-height: 1.34 !important;
  max-width: 32ch;
  margin: 18px auto 0 !important;
}
.wquote-lead figcaption { display: inline-block; border-top: none; padding-top: 0; margin-top: 22px; }
.wquote-lead figcaption span { margin-top: 6px; }
.wquotes-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}
@media (max-width: 720px) { .wquotes-grid { grid-template-columns: 1fr; } }

/* ---------- VIDEO LIGHTBOX ---------- */
.vlight {
  position: fixed;
  inset: 0;
  /* Above Avada's sticky header, the mobile sticky-apply bar (9000) and the
     cart drawer/overlay (9500–9700) so the clip is never overlapped. */
  z-index: 9800;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  background: rgba(20,16,15,.9);
  backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
.vlight.open { opacity: 1; visibility: visible; }
.vlight-stage {
  position: relative;
  width: min(440px, 90vw);
  aspect-ratio: 3 / 4;
  max-height: 86vh;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.8);
  transform: scale(.94);
  transition: transform .3s ease;
}
.vlight.open .vlight-stage { transform: scale(1); }
.vlight-stage video { width: 100%; height: 100%; object-fit: cover; background: #000; display: block; }
.vlight-soon {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  padding: 34px;
  color: rgba(251,247,240,.92);
  background:
    linear-gradient(180deg, rgba(78,65,109,.55), rgba(33,28,26,.85)),
    repeating-linear-gradient(135deg, #3a3147 0 22px, #332b40 22px 44px);
}
.vlight-soon.show { display: flex; }
.vlight-soon .vs-icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 1.5px solid rgba(226,219,235,.5);
  display: grid;
  place-items: center;
}
.vlight-soon .vs-icon svg { width: 22px; height: 22px; fill: var(--clay-soft); margin-left: 2px; }
.vlight-soon strong { font-family: var(--serif); font-weight: 400; font-size: 24px; }
.vlight-soon span { font-size: 14px; color: rgba(251,247,240,.7); max-width: 26ch; line-height: 1.5; }
.vlight-close {
  position: absolute;
  top: 18px;
  right: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.3);
  background: rgba(33,28,26,.5);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .2s;
}
.vlight-close:hover { background: rgba(33,28,26,.85); }

/* ============================================================
   FAQ ACCORDION
   ============================================================ */
.stv-faq { max-width: 860px; margin: 0 auto; }
.stv-faq-item { border-top: 1px solid var(--line); }
.stv-faq-item:last-child { border-bottom: 1px solid var(--line); }
.stv-faq-btn {
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 0;
  text-align: left;
  font-family: var(--serif);
  font-size: 21px;
  color: var(--ink);
  gap: 16px;
}
.stv-faq-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  color: var(--accent);
  flex-shrink: 0;
  display: grid;
  place-items: center;
  font-size: 20px;
  font-family: var(--sans);
  transition: transform .3s ease, background .3s, color .3s, border-color .3s;
  line-height: 1;
}
.stv-faq-item.open .stv-faq-icon {
  transform: rotate(45deg);
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.stv-faq-answer {
  overflow: hidden;
  max-height: 0;
  transition: max-height .35s ease;
}
.stv-faq-answer-inner {
  padding-bottom: 22px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-soft);
}
/* Inline links inside FAQ answers — on-brand, clearly a link (not browser-default blue). */
.stv-faq-answer-inner a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: color .15s ease;
}
.stv-faq-answer-inner a:hover,
.stv-faq-answer-inner a:focus-visible { color: var(--clay); }

/* ============================================================
   LEAD MAGNET SECTION
   ============================================================ */
.stv-lead-magnet {
  background: var(--accent);
  color: #fff;
  padding: 80px 0;
}
.stv-lead-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.stv-lead-form-wrap input[type="email"] {
  width: 100%;
  background: rgba(255,255,255,.1);
  border: 1.5px solid rgba(255,255,255,.4);
  border-radius: 4px;
  color: #fff;
  padding: 14px 18px;
  font-family: var(--sans);
  font-size: 16px;
  outline: none;
  transition: border-color .2s;
  margin-bottom: 12px;
}
.stv-lead-form-wrap input[type="email"]::placeholder { color: rgba(255,255,255,.6); }
.stv-lead-form-wrap input[type="email"]:focus { border-color: #fff; }
.stv-success-msg { display: none; font-size: 18px; }

/* Guide cover image — the DB markup nests the <img> in a grid .rv wrapper whose auto
   track otherwise sizes to the image's intrinsic width (1081px) and blows out the column.
   Pin it to the intended 320px 3:4 card (mobile shrinks via max-width). */
.stv-lead-magnet .rv > img {
  width: 320px !important;
  max-width: 100% !important;
  height: auto !important;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center;
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
  display: block;
}

@media (max-width: 760px) {
  .stv-lead-grid { grid-template-columns: 1fr; }
  .stv-lead-magnet .rv > img { margin: 4px auto 0; }
}

/* ============================================================
   CONTACT FORM SECTION
   ============================================================ */
.stv-contact-section { background: var(--bone); padding: 80px 0; }
.stv-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 60px;
  align-items: start;
}
.stv-contact-channels { display: flex; flex-direction: column; gap: 20px; margin-top: 28px; }
.stv-channel {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: var(--ink);
  font-size: 15px;
}
.stv-channel-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--paper);
  color: var(--accent);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-size: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,.07);
}
.stv-contact-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 38px;
  box-shadow: 0 30px 60px -40px rgba(33,28,26,.4);
}

@media (max-width: 760px) {
  .stv-contact-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   FOOTER  (rebuilt per footer-handoff — balanced grid, icon socials)
   ============================================================ */
.stv-footer {
  background: var(--ink);
  color: rgba(251,247,240,.72);
  padding: 64px 0 20px;
  position: relative;
}
/* Footer column had Avada's default 20px bottom margin adding extra space below the
   footer content — remove it so the bottom is tight. */
.fusion-tb-footer .fusion-layout-column { margin-bottom: 0 !important; }
/* kill stray wpautop empties/breaks inside the raw footer markup */
.stv-footer p:empty { display: none !important; }
.stv-footer br { display: none !important; }

.stv-footer-inner { max-width: 1240px; margin: 0 auto; padding: 0 40px; }

.stv-footer-top {
  display: grid;
  grid-template-columns: 1.5fr 1.1fr;
  gap: 60px;
  padding-bottom: 30px;
  border-bottom: 1px solid rgba(255,255,255,.13);
}

/* brand block */
.foot-logo { display: inline-block; }
.foot-logo img {
  height: 48px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: .94;
}
.foot-blurb {
  margin-top: 16px;
  font-size: 14.5px;
  line-height: 1.62;
  color: rgba(251,247,240,.72);
  max-width: 38ch;
  text-wrap: pretty;
}

/* social — 44px icon buttons */
.foot-social { display: flex; gap: 11px; margin-top: 22px; }
.soc {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.13);
  background: rgba(255,255,255,.04);
  display: grid;
  place-items: center;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.soc svg { width: 19px; height: 19px; fill: none; stroke: rgba(251,247,240,.82); stroke-width: 1.8; }
.soc:active { transform: scale(.93); }
@media (hover:hover) {
  .soc:hover { background: var(--clay); border-color: var(--clay); }
  .soc:hover svg { stroke: #fff; }
}

/* balanced 2-up link grid — no orphaned column */
.foot-links { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 40px; }
.foot-col h4 {
  font-family: var(--label);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 4px;
}
.foot-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.foot-col li { margin: 0; }
.foot-col a {
  display: block;
  font-size: 14.5px;
  color: rgba(251,247,240,.72);
  padding: 10px 0;
  line-height: 1.3;
  text-decoration: none;
  transition: color .15s ease, padding-left .15s ease;
}
.foot-col a:active { color: var(--clay-soft); }
@media (hover:hover) { .foot-col a:hover { color: #fff; padding-left: 5px; } }

/* bottom bar */
.foot-bottom {
  margin-top: 22px;
  padding-top: 18px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12px;
  color: rgba(251,247,240,.50);
  letter-spacing: .01em;
}
.foot-bottom .legal { display: flex; gap: 16px; }
.foot-bottom .legal a { color: inherit; text-decoration: none; transition: color .15s ease; }
.foot-bottom .legal a:active { color: var(--clay-soft); }
@media (hover:hover) { .foot-bottom .legal a:hover { color: rgba(251,247,240,.72); } }

/* ── mobile: stacked brand → balanced links → bottom bar ── */
@media (max-width: 760px) {
  .stv-footer { padding: 44px 0 calc(20px + env(safe-area-inset-bottom, 0px)); }
  /* (Footer accent hairline removed per owner — the purple line read as a stray
     sliver between the hero and footer.) */
  .stv-footer-inner { padding: 0 26px; }
  .stv-footer-top {
    grid-template-columns: 1fr;
    gap: 0;
    padding-bottom: 0;
    border-bottom: none;
  }
  .foot-logo img { height: 42px; }
  .foot-blurb { max-width: 34ch; }
  .foot-links {
    margin-top: 36px;
    padding-top: 32px;
    border-top: 1px solid rgba(255,255,255,.13);
    gap: 30px 18px;
  }
  .foot-bottom {
    margin-top: 34px;
    padding-top: 22px;
    border-top: 1px solid rgba(255,255,255,.13);
    flex-direction: column;
    justify-content: flex-start;
  }
}

/* ============================================================
   RESULTS GRID
   ============================================================ */
.stv-results-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important; /* design .results-grid */
  gap: 16px !important;
  margin-top: 48px;
}
.stv-results-grid .stv-result-photo {
  aspect-ratio: 3/4; /* design .results-grid .ph — portrait cards */
  border-radius: 8px;
  object-fit: cover;
  width: 100% !important;
  height: auto !important;
  min-width: 0;
  background: var(--bone-2);
  display: block;
}
@media (max-width: 760px) {
  .stv-results-grid { grid-template-columns: 1fr 1fr !important; }
}

/* ============================================================
   MEET VAL / TWO-COL SECTIONS
   ============================================================ */
.stv-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.stv-two-col.photo-left .stv-col-photo {
  aspect-ratio: 4/5;
  border-radius: 10px;
  object-fit: cover;
  width: 100%;
  background: var(--bone-2);
}
@media (max-width: 860px) {
  .stv-two-col { grid-template-columns: 1fr; }
}

/* ============================================================
   HERO
   ============================================================ */
.stv-hero {
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.stv-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
  background-color: var(--wine-deep);
}
.stv-hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(33,28,26,.18) 0%, rgba(33,28,26,.08) 38%, rgba(33,28,26,.78) 100%);
  z-index: 1;
}
.stv-hero-content {
  position: relative;
  z-index: 2;
  padding: 0 40px 72px;
  max-width: var(--maxw);
  margin: 0 auto;
  width: 100%;
}
.stv-hero-content .eyebrow { color: rgba(255,255,255,.85); }
.stv-hero-content .eyebrow::before { background: rgba(255,255,255,.6); }
.stv-hero-content h1 {
  /* !important on font-family + color beats Avada's later-loading global
     h1 typography (--h1_typography-color:#3e3d3a / Gazpacho) which renders
     as a muddy olive over the dark plum gradient. */
  font-family: var(--serif) !important;
  font-weight: 500;
  font-size: clamp(46px, 7vw, 104px);
  line-height: .98;
  letter-spacing: -.02em;
  /* Soft lilac watermark — --clay-soft (#E2DBEB) at ~9% — sits inside the
     plum gradient rather than competing as a second headline. */
  color: rgba(226, 219, 235, .09) !important;
  margin: 18px 0 22px;
}
/* Foreground "IFBB Pro." stays solid + crisp against the dimmed ghost. */
.stv-hero-content h1 em {
  font-family: var(--serif) !important;
  color: var(--clay-soft) !important;
}
.stv-hero-subhead {
  font-size: clamp(17px, 2vw, 21px);
  color: rgba(255,255,255,.9);
  max-width: 50ch;
  line-height: 1.55;
  margin-bottom: 34px;
}
.stv-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* ============================================================
   AVADA OVERRIDES — zero Avada's CSS-variable-driven padding
   on any page containing our full-bleed hero/sections
   ============================================================ */

/* Override the Avada CSS custom property at root level for hero pages.
   Using :has() where supported; the JS fallback handles legacy browsers. */
body:has(.stv-hero),
body.stv-hero-page {
  --main_padding-top: 0px;
  --main_padding-bottom: 0px;
}

/* Belt-and-suspenders direct override */
body:has(.stv-hero) #main,
body.stv-hero-page #main {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Fix Avada Fusion Builder container wrapping on custom sections */
.fusion-builder-row-inner { width: 100%; }

/* ============================================================
   REVEAL ANIMATION — only hide after JS adds reveal-ready
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  body.reveal-ready .rv {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
  }
  body.reveal-ready .rv.is-in {
    opacity: 1;
    transform: none;
  }
}
/* Fallback: ensure .rv is always visible without JS */
.rv { opacity: 1; transform: none; }

/* ============================================================
   CHECKOUT — 2-column override
   ============================================================ */
.stv-checkout-wrap {
  display: grid;
  grid-template-columns: 1.4fr .85fr;
  gap: 48px;
  max-width: var(--maxw);
  margin: 40px auto;
  padding: 0 40px;
  align-items: start;
}
.stv-checkout-panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 32px 34px;
  margin-bottom: 20px;
}
.stv-step-num {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-family: var(--label);
  font-size: 13px;
  font-weight: 700;
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
}
.stv-order-summary {
  position: sticky;
  top: 94px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 28px 28px 32px;
}
.stv-order-subtotal {
  font-family: var(--serif);
  font-size: 30px;
  color: var(--accent);
}
@media (max-width: 860px) {
  .stv-checkout-wrap { grid-template-columns: 1fr; }
  .stv-order-summary { position: static; }
}

/* ============================================================
   VIDEO LIBRARY — LOGIN GATE
   ============================================================ */
.stv-library-gate {
  display: grid;
  grid-template-columns: .85fr 1fr;
  gap: 0;
  min-height: 70vh;
}
.stv-login-card {
  background: var(--paper);
  padding: 60px 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.stv-library-teaser {
  background: var(--bone-2);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stv-teaser-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 12px;
  filter: blur(3px);
  opacity: .9;
  padding: 24px;
}
.stv-teaser-thumb {
  background: linear-gradient(135deg, var(--wine) 0%, var(--clay) 100%);
  border-radius: 8px;
  position: relative;
}
.stv-teaser-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0; height: 0;
  border-left: 11px solid rgba(255,255,255,.85);
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}
.stv-teaser-thumb:nth-child(2),
.stv-teaser-thumb:nth-child(4),
.stv-teaser-thumb:nth-child(9) { background: linear-gradient(135deg, var(--clay) 0%, var(--wine-deep) 100%); }
.stv-teaser-thumb:nth-child(5),
.stv-teaser-thumb:nth-child(7) { background: linear-gradient(135deg, var(--wine-deep) 0%, var(--wine) 100%); }
.stv-teaser-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: rgba(238,236,230,.55);
  backdrop-filter: blur(2px);
}
.stv-lock-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent);
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 22px;
}
@media (max-width: 760px) {
  .stv-library-gate { grid-template-columns: 1fr; }
  .stv-library-teaser { display: none; }
}

/* ============================================================
   VIDEO GRID (members)
   ============================================================ */
.stv-video-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.stv-video-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow .2s, transform .2s;
}
.stv-video-card:hover {
  box-shadow: 0 12px 32px -10px rgba(33,28,26,.15);
  transform: translateY(-2px);
}
.stv-video-thumb {
  aspect-ratio: 16/9;
  background: var(--bone-2);
  position: relative;
  overflow: hidden;
}
.stv-video-thumb img { width: 100%; height: 100%; object-fit: cover; }
.stv-video-duration {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(33,28,26,.75);
  color: #fff;
  font-family: var(--label);
  font-size: 11px;
  padding: 3px 7px;
  border-radius: 4px;
}
.stv-video-info { padding: 16px 18px 20px; }
.stv-video-category {
  font-family: var(--label);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: 6px;
}
@media (max-width: 900px) {
  .stv-video-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 500px) {
  .stv-video-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   GENERAL SECTION SPACING
   ============================================================ */
.stv-section { padding: 108px 0; }  /* design spec §4 */
.stv-section-sm { padding: 60px 0; }
@media (max-width: 760px) {
  .stv-section { padding: 60px 0; }   /* design spec mobile */
}
.stv-section-dark { background: var(--ink); color: #fff; }
.stv-section-bone { background: var(--bone); }
.stv-section-bone2 { background: var(--bone-2); }

/* ============================================================
   AVADA CONTAINER BORDER / OUTLINE REMOVAL
   Avada sets border_style="solid" by default which causes
   black outlines around containers. Kill them globally.
   ============================================================ */
.fusion-builder-container,
.fusion-fullwidth,
.fusion-layout-column,
.fusion-column-inner-bg,
.fusion-row {
  border-color: transparent !important;
  outline: none !important;
}
/* Also ensure no unwanted box-shadows from Avada defaults */
.fusion-builder-container.fusion-no-small-visibility,
.fusion-builder-container.fusion-no-medium-visibility {
  box-shadow: none;
}

/* ============================================================
   STRENGTH SQUAD LIBRARY LAYOUT (sidebar + grid)
   ============================================================ */
.stv-lib-layout {
  display: grid;
  grid-template-columns: 1fr 296px;
  gap: 48px;
  align-items: start;
  margin-top: 32px;
}
.stv-lib-main { min-width: 0; }
.stv-lib-sidebar {
  position: sticky;
  top: 90px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.stv-lib-search {
  position: relative;
}
.stv-lib-search input {
  width: 100%;
  padding: 12px 40px 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
  box-sizing: border-box;
}
.stv-lib-search input:focus { outline: none; border-color: var(--accent); }
.stv-lib-search::after {
  content: "⌕";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-soft);
  font-size: 18px;
  pointer-events: none;
}
.stv-cats-panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.stv-cats-head {
  font-family: var(--label);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--line-soft);
}
.stv-cats-panel .aiovg-categories,
.stv-cats-panel ul { list-style: none; padding: 8px; margin: 0; }
.stv-cats-panel li a {
  display: block;
  padding: 9px 12px;
  border-radius: 7px;
  font-size: 14px;
  color: var(--ink);
  text-decoration: none;
  transition: background .15s, color .15s;
}
.stv-cats-panel li a:hover { background: var(--bone-2); color: var(--accent); }
.stv-lib-cta {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.stv-lib-cta a {
  display: block;
  text-align: center;
  padding: 13px 16px;
  border-radius: 6px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
}
.stv-lib-cta a.primary {
  background: var(--accent);
  color: #fff;
}
.stv-lib-cta a.outline {
  background: transparent;
  border: 1.5px solid var(--ink);
  color: var(--ink);
}
@media (max-width: 980px) {
  .stv-lib-layout { grid-template-columns: 1fr; }
  .stv-lib-sidebar { position: static; }
}

/* ============================================================
   AIOVG SINGLE VIDEO PAGE — brand override
   ============================================================ */
.stv-video-page { background: var(--bone); min-height: 100vh; }
.stv-video-page .stv-vp-wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 40px 40px 90px;
}
.stv-vp-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--label);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
  margin-bottom: 28px;
}
.stv-vp-back:hover { color: var(--accent); }
.stv-vp-grid {
  /* Single column: the video + meta span the full content width. The right-hand
     promo/sidebar cards were removed per the design tweak. */
  display: block;
}
.stv-vp-player-col h1 {
  font-family: var(--serif);
  font-size: clamp(26px, 3.2vw, 38px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -.01em;
  margin-top: 24px;   /* title now sits below the video */
  margin-bottom: 18px;
}
/* Optional per-video coaching cue — now a full-width callout under the video
   (it used to live in the right sidebar). */
.stv-vp-cue {
  margin-top: 24px;
  padding: 16px 20px;
  background: var(--bone-2);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
}
.stv-vp-cue h4 {
  font-family: var(--label);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 8px;
}
.stv-vp-cue p {
  font-size: 15px;
  color: var(--ink);
  line-height: 1.6;
  margin: 0;
}
/* Make AIOVG player fill container */
.stv-vp-player-col .aiovg-player,
.stv-vp-player-col .aiovg-video-player,
.stv-vp-player-col .wp-video { border-radius: 12px; overflow: hidden; }

/* Mobile: the 40px gutters left the video small. Tighten the page padding and
   let the player run edge-to-edge so the video is as large as the screen.
   Only the OUTER player wrapper is pulled full-bleed (the inner .aiovg-player
   already fills it). */
/* Mobile + tablet (<900px, where the bottom nav shows): big edge-to-edge video. */
@media (max-width: 899px) {
  .stv-video-page .stv-vp-wrap { padding: 16px 16px 96px; } /* extra bottom: clear the fixed bottom nav */
  .stv-vp-back { margin-bottom: 14px; }
  .stv-vp-player-col h1 { margin-top: 18px; margin-bottom: 14px; }
  /* Full-bleed video: AIOVG sets an inline max-width:100% on the container, so
     the width override needs !important to actually reach edge-to-edge. */
  .stv-vp-player-col .aiovg-player-container {
    margin-left: -16px !important;
    margin-right: -16px !important;
    width: calc(100% + 32px) !important;
    max-width: none !important;
    border-radius: 0 !important;
  }
  .stv-vp-player-col .aiovg-player-container iframe,
  .stv-vp-player-col .aiovg-player-container .aiovg-player { border-radius: 0; }
}

/* ── Bottom nav carried onto the single-video page (static links back to the
   library). Mirrors the library app's .bottom-nav; mobile-only (hidden ≥900). ── */
.stv-video-page .bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 80;
  display: flex;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -2px 20px -8px rgba(62,61,58,.12);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.stv-video-page .bn-tab {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px;
  padding: 9px 4px; background: none; border: none; text-decoration: none;
  font-family: var(--label); font-size: 9.5px; font-weight: 600;
  letter-spacing: .04em; color: var(--ink-soft); transition: color .15s;
}
.stv-video-page .bn-tab svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.stv-video-page .bn-tab:hover { color: var(--ink); }
.stv-video-page .bn-tab.active { color: var(--accent); }
@media (min-width: 900px) { .stv-video-page .bottom-nav { display: none; } }

/* ============================================================
   WOOCOMMERCE CHECKOUT — brand override
   ============================================================ */
body.woocommerce-checkout { background: var(--bone) !important; }
/* Hide only Avada's page-title bar — NOT #main (the checkout form lives inside #main) */
body.woocommerce-checkout .fusion-page-title-bar { display: none; }
body.woocommerce-checkout #main { padding-top: 0 !important; }

/* The checkout page's Fusion container was built with a hardcoded dark
   background (#25292b). Force the whole wrapper chain to bone so no dark
   bleeds around/between the content cards, and keep notice text readable. */
body.woocommerce-checkout #main,
body.woocommerce-checkout #content,
body.woocommerce-checkout .fusion-fullwidth,
body.woocommerce-checkout .fullwidth-box,
body.woocommerce-checkout .fusion-builder-row,
body.woocommerce-checkout .fusion-row,
body.woocommerce-checkout .post-content,
body.woocommerce-checkout .fusion-column-wrapper {
  background-color: var(--bone) !important;
  background-image: none !important;
}
/* WooCommerce notices / login toggle / "logged in as" strip — readable on bone */
body.woocommerce-checkout .woocommerce-info,
body.woocommerce-checkout .woocommerce-message,
body.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info {
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  border-top: 3px solid var(--accent) !important;
  border-radius: 8px !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}
body.woocommerce-checkout .woocommerce-info::before,
body.woocommerce-checkout .woocommerce-message::before { color: var(--accent) !important; }
body.woocommerce-checkout .woocommerce-info a,
body.woocommerce-checkout .woocommerce-message a { color: var(--accent) !important; }
/* Any stray light-on-dark text in the checkout header area → ink */
body.woocommerce-checkout #main p,
body.woocommerce-checkout #main span,
body.woocommerce-checkout #main label { color: var(--ink); }
body.woocommerce-checkout #main a { color: var(--accent); }
.stv-co-page { background: var(--bone); padding: 0 0 90px; }
.stv-co-head {
  padding: 40px 0 0;
  border-bottom: 1px solid var(--line);
  margin-bottom: 40px;
}
.stv-co-head .stv-co-title {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 0 28px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.stv-co-head h1 {
  font-family: var(--serif);
  font-size: clamp(30px, 4.4vw, 52px);
  font-weight: 500;
  letter-spacing: -.015em;
  line-height: 1;
}
.stv-co-head h1 em { color: var(--accent); }
.stv-co-secure {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--label);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 8px 14px;
  border-radius: 99px;
}
/* (removed stale .stv-co-grid — collided with the checkout rebuild) */
.stv-co-panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 32px 34px;
  margin-bottom: 20px;
}
.stv-co-step-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}
.stv-co-step-no {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-family: var(--label);
  font-weight: 700;
  font-size: 13px;
  display: grid;
  place-items: center;
}
.stv-co-step-head h2 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
}
/* (removed stale .stv-co-summary card styling — collided with the rebuild's
   transparent sticky aside, drawing a double border + clipping trust/help) */
.stv-co-sum-head {
  padding: 22px 26px 18px;
  border-bottom: 1px solid var(--line);
}
.stv-co-sum-head h2 { font-family: var(--serif); font-size: 20px; font-weight: 500; }
.stv-co-sum-body { padding: 20px 26px; }
.stv-co-total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.stv-co-total-row .stv-co-total-lbl {
  font-family: var(--label);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.stv-co-total-row .stv-co-total-val {
  font-family: var(--serif);
  font-size: 32px;
  color: var(--accent);
}
/* WC field resets inside our panels */
.stv-co-panel .woocommerce-billing-fields h3,
.stv-co-panel .woocommerce-additional-fields h3 {
  display: none;
}
.stv-co-panel .form-row label {
  font-family: var(--label);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 600;
}
.stv-co-panel .form-row input,
.stv-co-panel .form-row select,
.stv-co-panel .form-row textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bone);
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink);
  box-sizing: border-box;
}
.stv-co-panel .form-row input:focus,
.stv-co-panel .form-row select:focus { outline: none; border-color: var(--accent); background: #fff; }
.stv-co-panel #place_order {
  width: 100%;
  padding: 16px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
}
.stv-co-panel #place_order:hover { background: var(--wine-deep); }
@media (max-width: 860px) {
  .stv-co-grid { grid-template-columns: 1fr; }
  .stv-co-summary { position: static; }
}

/* ============================================================
   MOBILE MENU — rebrand the TB header's awb-menu (collapse-to-button)
   The TB header (section 963) uses a [fusion_menu] element that
   renders as `.awb-menu.mobile-mode-collapse-to-button` — a full
   overlay, NOT Avada's legacy flyout. Target those real classes.
   Breakpoint: custom_breakpoint=800 on the element.
   ============================================================ */
@media (max-width: 1200px) {
  /* Right-side drawer (design spec): 84vw / max 340px, slides from the right edge.
     The FULL-screen 100vw version was clipping the link text on the left; a fixed
     340px right panel with internal padding keeps every label fully in view.
     Two box-shadows: drawer shadow + a 100vw spread that acts as the dim scrim. */
  .awb-menu.mobile-mode-collapse-to-button .awb-menu__main-ul {
    background: var(--bone) !important;
    width: 84vw !important;
    max-width: 340px !important;
    left: auto !important;             /* anchor flush to the viewport-right */
    right: 0 !important;
    padding: 18px 24px 32px !important;
    box-shadow: -30px 0 60px -20px rgba(33,28,26,.35),
                0 0 0 100vw rgba(33,28,26,.45) !important;
  }
  /* OPEN state only (.expanded). Avada caps the open panel at
     --awb-mobile-sticky-max-height (default 340px) → it stopped short of the
     bottom and forced a scrollbar. Scoping to .expanded keeps the CLOSED state's
     max-height:0 intact (so open/close still animates), while making the open
     drawer a true full-height fixed panel anchored to the right. */
  .awb-menu.mobile-mode-collapse-to-button.expanded .awb-menu__main-ul {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    /* Avada offsets the open drawer by margin-top:var(--awb-mobile-nav-trigger-bottom-margin)
       (= 48px) — combined with top:0 that left a 48px bone gap above the drawer.
       It was invisible only when logged in, because the 46px WP admin bar happened
       to fill that strip; logged-out visitors saw the gap. Zero both. */
    margin-top: 0 !important;
    --awb-mobile-nav-trigger-bottom-margin: 0px;
    height: 100dvh !important;
    max-height: 100dvh !important;
    --awb-mobile-sticky-max-height: 100dvh;
    /* The drawer's own top bar (logo + X) sits at the very top, so only clear the
       notch/status bar here — the .stv-mnav-top row supplies the rest. */
    padding-top: calc(env(safe-area-inset-top, 0px) + 12px) !important;
    /* bottom breathing room so the Follow Val / IG-YT buttons aren't clipped by the
       home indicator OR an in-app browser bottom toolbar. */
    padding-bottom: calc(52px + env(safe-area-inset-bottom, 0px)) !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
  }
  /* Logged-in admin bar adds height — extra top clearance in the open drawer. */
  body.admin-bar .awb-menu.mobile-mode-collapse-to-button.expanded .awb-menu__main-ul {
    padding-top: calc(env(safe-area-inset-top, 0px) + 58px) !important;
  }
  /* When the drawer is open, hide the sticky Apply bar so the drawer's "Follow Val"
     footer is visible at the bottom (JS toggles body.stv-menu-open). */
  body.stv-menu-open .stv-sticky-apply { display: none !important; }
  /* Also hide Avada's back-to-top button — it was overlapping the drawer's YouTube
     button while the menu is open. */
  body.stv-menu-open .to-top-container,
  body.stv-menu-open #toTop { display: none !important; }
  /* Links → Gazpacho 30px per design spec, with separator lines */
  .awb-menu.mobile-mode-collapse-to-button .awb-menu__main-ul > li > a {
    font-family: var(--serif) !important;
    font-size: 30px !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
    text-transform: none !important;
    letter-spacing: -0.01em !important;
    color: var(--ink) !important;
    border-bottom: 1px solid var(--line-soft) !important;
    padding: 10px 0 !important;
    min-height: 0 !important;
    display: block !important;
  }
  .awb-menu.mobile-mode-collapse-to-button .awb-menu__main-ul > li > a:hover {
    color: var(--accent) !important;
  }
  /* current/active items stay INK (design = uniform link color, not wine) */
  .awb-menu.mobile-mode-collapse-to-button .awb-menu__main-ul > li.current-menu-item > a,
  .awb-menu.mobile-mode-collapse-to-button .awb-menu__main-ul > li.current_page_item > a,
  .awb-menu.mobile-mode-collapse-to-button .awb-menu__main-ul > li.current-menu-ancestor > a,
  .awb-menu.mobile-mode-collapse-to-button .awb-menu__main-ul > li > a span {
    color: var(--ink) !important;
  }
  /* Design links have NO background fills — keep panel clean (separators only) */
  .awb-menu.mobile-mode-collapse-to-button .awb-menu__main-ul > li,
  .awb-menu.mobile-mode-collapse-to-button .awb-menu__main-ul > li > a,
  .awb-menu.mobile-mode-collapse-to-button .awb-menu__main-ul > li.current-menu-item > a,
  .awb-menu.mobile-mode-collapse-to-button .awb-menu__main-ul > li > a:hover {
    background: transparent !important;
  }
  /* Hamburger / close toggle color on the bone mobile header bar */
  .awb-menu__m-toggle,
  .awb-menu__m-toggle-inner,
  .awb-menu__m-toggle .awb-menu__m-toggle-text { color: var(--ink) !important; }
}

/* Mobile drawer top bar — logo + close X (injected by stv-main.js) — mobile only.
   Mirrors the design spec's .drawer-top: logo left, X right, divider beneath. */
.stv-mnav-top { display: none !important; }
@media (max-width: 1200px) {
  .awb-menu.mobile-mode-collapse-to-button .awb-menu__main-ul > li.stv-mnav-top {
    display: flex !important;
    flex-direction: row !important;   /* Avada forces column on list items; X must sit right of the logo */
    align-items: center !important;
    justify-content: space-between !important;
    list-style: none !important;
    margin: 0 0 8px !important;
    padding: 0 0 14px !important;
    border-bottom: 1px solid var(--line-soft) !important;
    background: transparent !important;
    min-height: 0 !important;
  }
  /* Full prefix so these beat the generic `> li > a` 30px link rule (same
     !important, higher specificity) — otherwise the logo anchor inherits
     display:block + border + padding and the X wraps to a second line. */
  .awb-menu.mobile-mode-collapse-to-button .awb-menu__main-ul > li.stv-mnav-top .stv-mnav-logo {
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-bottom: none !important;
    background: transparent !important;
    min-height: 0 !important;
    width: auto !important;
    flex: 0 0 auto !important;
  }
  .awb-menu.mobile-mode-collapse-to-button .awb-menu__main-ul > li.stv-mnav-top .stv-mnav-logo img {
    height: 34px !important;
    width: auto !important;
    max-width: none !important;
    display: block !important;
  }
  .awb-menu.mobile-mode-collapse-to-button .awb-menu__main-ul > li.stv-mnav-top .stv-mnav-close {
    flex: 0 0 auto !important;
    width: 42px !important;
    height: 42px !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    margin: 0 -8px 0 0 !important;   /* nudge the X to the panel's right edge */
    border: none !important;
    border-radius: 50% !important;
    background: transparent !important;
    color: var(--ink) !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent;
  }
  .awb-menu.mobile-mode-collapse-to-button .awb-menu__main-ul > li.stv-mnav-top .stv-mnav-close:active { background: rgba(62,61,58,.06) !important; }
  .awb-menu.mobile-mode-collapse-to-button .awb-menu__main-ul > li.stv-mnav-top .stv-mnav-close svg {
    width: 22px !important;
    height: 22px !important;
    stroke: currentColor !important;
    fill: none !important;
  }
}

/* Mobile drawer "Follow Val" footer (injected by stv-main.js) — mobile only */
.stv-mnav-foot { display: none !important; }
@media (max-width: 1200px) {
  .awb-menu.mobile-mode-collapse-to-button .awb-menu__main-ul > li.stv-mnav-foot {
    display: block !important;
    list-style: none;
    margin: auto 0 0 !important;        /* push to the bottom of the full-height drawer */
    padding: 22px 0 0 !important;
    border-top: 1px solid var(--line-soft);
    border-bottom: none !important;
  }
  .stv-mnav-foot .stv-mnav-foot-label {
    font-family: var(--label);
    font-size: 11px; font-weight: 700; letter-spacing: .16em;
    text-transform: uppercase; color: var(--ink-soft);
    display: block; margin-bottom: 12px;
  }
  .awb-menu.mobile-mode-collapse-to-button .awb-menu__main-ul > li.stv-mnav-foot .stv-mnav-foot-btns { display: flex !important; gap: 10px !important; }
  .awb-menu.mobile-mode-collapse-to-button .awb-menu__main-ul > li.stv-mnav-foot .stv-mnav-foot-btns a {
    flex: 1 1 0 !important; display: block !important; text-align: center !important;
    padding: 13px 8px !important; margin: 0 !important;
    border: 1.5px solid rgba(62,61,58,0.32) !important; border-radius: 6px !important;
    font-family: var(--label) !important; font-size: 12px !important; font-weight: 700 !important;
    letter-spacing: .04em !important;
    color: var(--ink) !important; text-decoration: none !important;
    background: transparent !important; line-height: 1 !important;
  }
  .awb-menu.mobile-mode-collapse-to-button .awb-menu__main-ul > li.stv-mnav-foot .stv-mnav-foot-btns a:hover { background: var(--bone-2) !important; color: var(--accent) !important; }
}

/* ============================================================
   STICKY MOBILE APPLY BAR (custom — not provided by Avada)
   Fixed bottom CTA on mobile. Hides when Final CTA/footer visible.
   ============================================================ */
.stv-sticky-apply {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 9000;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 18px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(238,236,230,.94);
  backdrop-filter: saturate(150%) blur(10px);
  border-top: 1px solid var(--line);
  transition: transform .32s cubic-bezier(.2,.7,.2,1);
}
.stv-sticky-apply.is-hidden { transform: translateY(120%); }
.stv-sticky-apply .stv-sa-label {
  font-family: var(--label);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}
.stv-sticky-apply .stv-sa-label strong { font-weight: 700; }
.stv-sticky-apply .stv-sa-btn {
  flex: none;
  background: var(--cta);
  color: #fff;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 14px;
  padding: 12px 20px;
  border-radius: 4px;
  text-decoration: none;
  white-space: nowrap;
}
/* Only show on mobile/tablet where the desktop CTA isn't visible */
@media (max-width: 1200px) {
  .stv-sticky-apply { display: flex; }
  /* Clear the bar so it doesn't cover footer content */
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
}

/* ============================================================
   CART — header icon + badge, slide-in drawer, scrim, toast
   ============================================================ */
/* Header cart icon (injected by stv-cart.js before the Apply button) */
.stv-cart-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  margin-right: 14px;
  flex: none;
  transition: box-shadow .2s, transform .2s;
}
.stv-cart-toggle:hover { box-shadow: 0 4px 14px -6px rgba(33,28,26,.4); transform: translateY(-1px); }
.stv-cart-toggle svg { width: 18px; height: 18px; }
.stv-cart-count {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: 99px;
  background: var(--cta);
  color: #fff;
  font-family: var(--label);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}
.stv-cart-count[data-count="0"] { display: none; }

/* ── Mobile header (<=1200px): collapsed nav bar ──────────────────────────
   The Gym-Icon-Set burger glyph renders empty on some devices (icon-set CSS not
   mapping the codepoint), so force a guaranteed system glyph for the toggle, and
   show the cart (relocated next to the hamburger by stv-cart.js) in the bar. */
@media (max-width: 1200px) {
  /* Hamburger / close glyph — system font so it always draws */
  .awb-menu__m-collapse-icon-open::before,
  .awb-menu__m-collapse-icon-close::before {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif !important;
    font-weight: 400 !important;
    font-size: 26px !important;
    line-height: 1 !important;
    display: inline-block !important;
    color: var(--ink) !important;
  }
  .awb-menu__m-collapse-icon-open::before  { content: "\2630" !important; }  /* ☰ */
  .awb-menu__m-collapse-icon-close::before { content: "\2715" !important; }  /* ✕ */
  .awb-menu__m-toggle { color: var(--ink) !important; }

  /* The menu column holds [cart][hamburger] in a row, grouped at the right edge.
     stv-cart.js places the cart as a sibling of nav.awb-menu (inside the column
     wrapper) so it keeps its own circular style instead of Avada nav-link sizing. */
  .fusion-tb-header .fullwidth-box.fusion-sticky-container .fusion-builder-row
    > .fusion-layout-column:nth-child(2) .fusion-column-wrapper {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 12px;
  }
  .stv-cart--mobile { margin: 0 !important; flex: 0 0 auto !important; }
  .awb-menu__m-toggle { padding: 0 !important; flex: 0 0 auto !important; }
  /* Shrink the nav to its toggle so cart + hamburger sit adjacent at the right
     (otherwise nav fills the row and the toggle floats far from the cart). */
  .fusion-tb-header .fullwidth-box.fusion-sticky-container .fusion-builder-row
    > .fusion-layout-column:nth-child(2) .fusion-column-wrapper > nav.awb-menu {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
  }

  /* Compact single-row header on mobile (design bar height ~74px) */
  .fusion-tb-header .fullwidth-box.fusion-sticky-container .fusion-builder-row {
    flex-wrap: nowrap !important;
    align-items: center !important;
  }
}

/* ── Phone header (<=600px) ───────────────────────────────────────────────
   The full horizontal wordmark (~5.8:1) at 44px is ~255px wide; combined with
   the 40px desktop gutters it crushed the cart + hamburger against the edge.
   Pull the gutters in to 20px, shrink the logo, and even out the actions. */
@media (max-width: 600px) {
  .fusion-tb-header .fullwidth-box.fusion-sticky-container > .fusion-row {
    padding: 0 20px !important;
  }
  .fusion-tb-header .fusion-imageframe img,
  .fusion-tb-header .fusion-logo img,
  #wrapper .fusion-logo img {
    height: 36px !important;
    max-height: 36px !important;
  }
  /* Cart pill: drop the desktop right-margin so spacing is governed by the
     flex `gap` between cart and hamburger only (was margin + gap = uneven). */
  .stv-cart-toggle {
    width: 38px !important;
    height: 38px !important;
    margin-right: 0 !important;
  }
  .stv-cart-toggle svg { width: 16px !important; height: 16px !important; }
  .fusion-tb-header .fullwidth-box.fusion-sticky-container .fusion-builder-row
    > .fusion-layout-column:nth-child(2) .fusion-column-wrapper {
    gap: 16px !important;
  }
}
/* Smallest phones: shave the logo a little more so nothing clips. */
@media (max-width: 380px) {
  .fusion-tb-header .fusion-imageframe img,
  .fusion-tb-header .fusion-logo img,
  #wrapper .fusion-logo img {
    height: 32px !important;
    max-height: 32px !important;
  }
}

/* Scrim */
.stv-cart-scrim {
  position: fixed; inset: 0;
  background: rgba(33,28,26,.45);
  opacity: 0; visibility: hidden;
  transition: opacity .3s, visibility .3s;
  z-index: 9500;
}
body.stv-cart-open .stv-cart-scrim { opacity: 1; visibility: visible; }

/* Drawer */
.stv-cart-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 420px; max-width: 100vw;
  background: var(--bone);
  z-index: 9600;
  transform: translateX(100%);
  transition: transform .32s cubic-bezier(.2,.7,.2,1);
  display: flex; flex-direction: column;
  box-shadow: -20px 0 60px -30px rgba(33,28,26,.5);
}
body.stv-cart-open .stv-cart-drawer { transform: translateX(0); }
.stv-cart-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 26px;
  border-bottom: 1px solid var(--line);
}
.stv-cart-head h3 { font-family: var(--serif); font-size: 24px; font-weight: 500; margin: 0; }
.stv-cart-x {
  background: none; border: none; cursor: pointer;
  font-size: 30px; line-height: 1; color: var(--ink-soft);
}
.stv-cart-x:hover { color: var(--ink); }
.stv-cart-body { flex: 1; display: flex; flex-direction: column; overflow: hidden; padding: 0; min-height: 0; }
.stv-cart-body > .widget_shopping_cart_content,
.stv-cart-body .stv-mc { flex: 1; display: flex; flex-direction: column; min-height: 0; }
/* WooCommerce mini-cart restyle */
.stv-cart-body .woocommerce-mini-cart__empty-message { color: var(--ink-soft); font-size: 15px; }
.stv-cart-body ul.cart_list { list-style: none; margin: 0; padding: 0; }
.stv-cart-body ul.cart_list li {
  display: grid; grid-template-columns: 1fr auto; gap: 6px 12px;
  padding: 16px 0; border-bottom: 1px solid var(--line-soft);
  position: relative; font-size: 14px;
}
.stv-cart-body ul.cart_list li a:not(.remove) { color: var(--ink); font-weight: 600; text-decoration: none; }
.stv-cart-body ul.cart_list li .quantity { color: var(--ink-soft); font-size: 13px; }
.stv-cart-body ul.cart_list li a.remove {
  position: absolute; top: 16px; right: 0;
  color: var(--ink-soft) !important; font-size: 18px;
}
.stv-cart-body .woocommerce-mini-cart__total {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 18px 0; border-top: 1px solid var(--line); margin-top: 6px;
  font-family: var(--label); font-size: 13px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
}
.stv-cart-body .woocommerce-mini-cart__total .woocommerce-Price-amount {
  font-family: var(--serif); font-size: 26px; color: var(--accent); text-transform: none; letter-spacing: 0;
}
.stv-cart-body .woocommerce-mini-cart__buttons {
  display: flex; flex-direction: column; gap: 10px; margin: 18px 0 0; padding: 0;
}
.stv-cart-body .woocommerce-mini-cart__buttons a {
  display: block; text-align: center; padding: 14px;
  border-radius: 4px; font-family: var(--sans); font-weight: 700; font-size: 15px; text-decoration: none;
  margin: 0 !important; float: none !important; position: static !important;
  width: 100% !important; box-sizing: border-box; line-height: 1.2;
}
.stv-cart-body .woocommerce-mini-cart__buttons a::before { display: none !important; }
.stv-cart-body .woocommerce-mini-cart__buttons a:not(.checkout) {
  background: transparent; border: 1.5px solid var(--ink); color: var(--ink);
}
.stv-cart-body .woocommerce-mini-cart__buttons a.checkout {
  background: var(--cta); color: #fff;
}

/* Toast */
.stv-toast {
  position: fixed; left: 50%; bottom: 28px;
  transform: translateX(-50%) translateY(20px);
  background: var(--ink); color: #fff;
  font-family: var(--sans); font-size: 14px; font-weight: 600;
  padding: 13px 22px; border-radius: 6px;
  box-shadow: 0 12px 30px -12px rgba(33,28,26,.6);
  opacity: 0; visibility: hidden; transition: opacity .25s, transform .25s, visibility .25s;
  z-index: 9700;
}
.stv-toast.show { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }

@media (max-width: 560px) {
  .stv-cart-drawer { width: 100vw; }
}

/* ============================================================
   STRENGTH SQUAD LIBRARY SIDEBAR — fixes
   Force brand search input (over Avada form styles) + clean
   category list ([aiovg_categories template="list"]).
   ============================================================ */
.stv-lib-search input,
.stv-lib-search input#stv-vid-search,
.stv-lib-search input[type="text"] {
  background: var(--paper) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}
.stv-lib-search input::placeholder { color: var(--ink-soft) !important; }

/* Category list template */
.stv-cats-panel .aiovg-categories-template-list { padding: 0; }
.stv-cats-panel .aiovg-categories .aiovg-header { display: none; }
.stv-cats-panel .aiovg-categories-list {
  list-style: none; margin: 0; padding: 8px;
  display: flex; flex-direction: column; gap: 2px;
}
.stv-cats-panel .aiovg-categories-list li {
  border: none; margin: 0; padding: 0; background: none;
}
.stv-cats-panel .aiovg-categories-list li a {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 7px;
  font-family: var(--sans); font-size: 14px; color: var(--ink);
  text-decoration: none; transition: background .15s, color .15s;
}
.stv-cats-panel .aiovg-categories-list li a:hover { background: var(--bone-2); color: var(--accent); }
/* hide any category thumbnail images in the list */
.stv-cats-panel .aiovg-categories-list img,
.stv-cats-panel .aiovg-categories-list .aiovg-category-image { display: none !important; }
/* count badge */
.stv-cats-panel .aiovg-categories-list .aiovg-count {
  color: var(--ink-soft); font-size: 12px; font-family: var(--label); white-space: nowrap;
}

/* ============================================================
   CHECKOUT COUPON — Avada renders its own top coupon slab
   (form.checkout_coupon). The design puts the promo inside the
   order-summary card instead, so hide Avada's version entirely.
   ============================================================ */
body.woocommerce-checkout form.checkout_coupon,
body.woocommerce-checkout .checkout_coupon.woocommerce-content-box {
  display: none !important;
}
body.woocommerce-checkout .promo-code-heading {
  font-family: var(--serif) !important;
  font-size: 19px !important;
  font-weight: 500 !important;
  color: var(--ink) !important;
  margin: 0 0 14px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
body.woocommerce-checkout .checkout_coupon .form-row { margin-bottom: 0; }
body.woocommerce-checkout .checkout_coupon .input-text {
  border: 1px solid var(--line) !important;
  background: var(--bone) !important;
  border-radius: 8px !important;
  padding: 12px 14px !important;
  font-family: var(--sans) !important;
}
body.woocommerce-checkout .checkout_coupon button {
  background: var(--cta) !important;
  color: #fff !important;
  border-radius: 4px !important;
  font-family: var(--sans) !important;
  font-weight: 700 !important;
}

/* ============================================================
   BRAND FORM FIELDS — override Avada's grey inputs across
   front-end forms (contact, lead magnet, checkout).
   ============================================================ */
.fusion-fullwidth input[type="text"],
.fusion-fullwidth input[type="email"],
.fusion-fullwidth input[type="tel"],
.fusion-fullwidth input[type="number"],
.fusion-fullwidth input[type="search"],
.fusion-fullwidth select,
.fusion-fullwidth textarea,
.stv-contact-card input,
.stv-contact-card select,
.stv-contact-card textarea,
.stv-co-page input.input-text,
.stv-co-page select,
.stv-co-page textarea,
.woocommerce-checkout .input-text,
.woocommerce-checkout select,
.woocommerce-checkout textarea {
  background: var(--bone) !important;
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  color: var(--ink) !important;
  box-shadow: none !important;
  -webkit-appearance: none;
  appearance: none;
}
.fusion-fullwidth input::placeholder,
.stv-contact-card input::placeholder,
.stv-contact-card textarea::placeholder,
.woocommerce-checkout .input-text::placeholder { color: var(--ink-soft) !important; opacity: 1; }

.fusion-fullwidth input[type="text"]:focus,
.fusion-fullwidth input[type="email"]:focus,
.fusion-fullwidth select:focus,
.fusion-fullwidth textarea:focus,
.stv-contact-card input:focus,
.stv-contact-card textarea:focus,
.woocommerce-checkout .input-text:focus,
.woocommerce-checkout textarea:focus {
  border-color: var(--accent) !important;
  background: var(--paper) !important;
  outline: none !important;
}
/* keep the lead-magnet email (on accent bg) as its own translucent style */
.stv-lead-form input[type="email"] { background: rgba(255,255,255,.1) !important; border-color: rgba(255,255,255,.4) !important; color: #fff !important; }
.stv-lead-form input[type="email"]::placeholder { color: rgba(255,255,255,.65) !important; }

/* Checkout country/state selects (native + Select2) → brand bone */
.woocommerce-checkout select.country_select,
.woocommerce-checkout select.state_select,
.woocommerce-checkout .select2-container--default .select2-selection--single {
  background: var(--bone) !important;
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  color: var(--ink) !important;
  min-height: 46px !important;
  height: auto !important;
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--ink) !important; line-height: 44px !important; padding-left: 14px !important;
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow { height: 44px !important; }
/* Checkout "Apply coupon" button → normal case */
.woocommerce-checkout .checkout_coupon button { text-transform: none !important; }

/* Mobile pack-picker — prevent "Best value" pill / price overlap on narrow
   screens by wrapping the price group to its own right-aligned row. */
@media (max-width: 480px) {
  .stv-pack-item { flex-wrap: wrap; row-gap: 6px; }
  .stv-pack-item > div:last-child { width: 100%; justify-content: flex-end !important; }
  .stv-best-badge { flex-shrink: 0; }
}

/* Application/contact form labels */
.stv-flabel {
  display: block;
  font-family: var(--label);
  font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-soft);
  margin-bottom: 6px;
}
.stv-apply-form input, .stv-apply-form select, .stv-apply-form textarea { width: 100%; box-sizing: border-box; }
@media (max-width: 760px) {
  #apply-top .stv-two-col { grid-template-columns: 1fr !important; }
  .stv-apply-form > div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
}

/* Belt-and-suspenders: remove ALL borders/outlines on Avada builder containers
   (covers any faint container edge, incl. logged-in-admin hints). */
.fusion-builder-container, .fusion-fullwidth, .fullwidth-box, .fusion-builder-row,
.fusion-builder-row-inner, .fusion-row, .fusion-layout-column, .fusion_builder_column,
.fusion-column-wrapper, .fusion-column-inner-bg, .fusion-flex-container,
[class*="fusion-builder-column"], .fusion-builder-column-inner {
  border-width: 0 !important;
  border-style: none !important;
  outline: 0 !important;
}

/* Cart drawer buttons — robust margin-based spacing (flex gap doesn't survive
   the AJAX mini-cart re-render in all cases) */
.stv-cart-body .woocommerce-mini-cart__buttons a.button,
.stv-cart-body a.button.wc-forward,
.stv-cart-body .buttons a.button {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 0 10px !important;
  float: none !important;
  /* Avada forces height:35px + line-height:35px + padding:14px (border-box),
     which squashes the text out the bottom and makes the two buttons overlap.
     Reset to auto height with centered single-line text. */
  height: auto !important;
  min-height: 0 !important;
  line-height: 1.2 !important;
  padding: 15px 18px !important;
  text-align: center !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
}
.stv-cart-body .woocommerce-mini-cart__buttons a.button:last-child,
.stv-cart-body a.button.checkout { margin-bottom: 0 !important; }

/* ============================================================
   CART PAGE (/cart/) — brand restyle.
   Avada was rendering the cart on a dark page with default purple
   buttons and near-invisible text. Force the bone canvas + brand ink.
   ============================================================ */
body.woocommerce-cart { background: var(--bone) !important; }
body.woocommerce-cart .fusion-page-title-bar { display: none; }
body.woocommerce-cart #main,
body.woocommerce-cart #content,
body.woocommerce-cart .fusion-row,
body.woocommerce-cart .post-content { background: var(--bone) !important; }
body.woocommerce-cart #main { padding-top: 56px !important; padding-bottom: 80px !important; }

/* Page heading ("You Have N Items In Your Cart") */
body.woocommerce-cart .entry-title,
body.woocommerce-cart h1,
body.woocommerce-cart .cart_totals > h2,
body.woocommerce-cart .cart-collaterals h2 {
  font-family: var(--serif) !important;
  color: var(--ink) !important;
  font-weight: 500 !important;
  text-transform: none !important;
}

/* Table + cells */
body.woocommerce-cart table.cart,
body.woocommerce-cart .shop_table {
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  overflow: hidden;
  border-collapse: separate !important;
}
body.woocommerce-cart table.cart th,
body.woocommerce-cart .shop_table th {
  background: transparent !important;
  color: var(--ink) !important;
  font-family: var(--label) !important;
  font-size: 12px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid var(--line) !important;
}
body.woocommerce-cart table.cart td,
body.woocommerce-cart .shop_table td {
  background: transparent !important;
  color: var(--ink) !important;
  border-top: 1px solid var(--line-soft) !important;
  vertical-align: middle !important;
}
body.woocommerce-cart table.cart td a,
body.woocommerce-cart .product-name a {
  color: var(--ink) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
body.woocommerce-cart .woocommerce-Price-amount,
body.woocommerce-cart .product-subtotal,
body.woocommerce-cart .product-price { color: var(--ink) !important; }
body.woocommerce-cart .product-remove a.remove {
  color: var(--accent) !important;
  background: transparent !important;
}

/* Quantity stepper */
body.woocommerce-cart .quantity .qty,
body.woocommerce-cart .quantity input {
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  color: var(--ink) !important;
}
body.woocommerce-cart .quantity button,
body.woocommerce-cart .quantity .plus,
body.woocommerce-cart .quantity .minus {
  background: var(--bone) !important;
  border: 1px solid var(--line) !important;
  color: var(--ink) !important;
}

/* Cart totals card */
body.woocommerce-cart .cart_totals,
body.woocommerce-cart .cart-collaterals .cart_totals {
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  padding: 28px 26px !important;
}
body.woocommerce-cart .cart_totals table,
body.woocommerce-cart .cart_totals th,
body.woocommerce-cart .cart_totals td {
  background: transparent !important;
  color: var(--ink) !important;
  border-color: var(--line-soft) !important;
}
body.woocommerce-cart .cart_totals .order-total .woocommerce-Price-amount { color: var(--accent) !important; font-weight: 700 !important; }

/* Coupon card */
body.woocommerce-cart .coupon label,
body.woocommerce-cart .cart .actions { color: var(--ink) !important; }

/* All WooCommerce buttons on the cart page → brand wine, not Avada purple */
body.woocommerce-cart .button,
body.woocommerce-cart input.button,
body.woocommerce-cart button.button,
body.woocommerce-cart a.button,
body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
  background: var(--accent) !important;
  background-image: none !important;
  color: #fff !important;
  border: none !important;
  border-radius: 4px !important;
  font-family: var(--label) !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
  text-transform: none !important;
  text-shadow: none !important;
}
body.woocommerce-cart .button::before,
body.woocommerce-cart a.button::before { display: none !important; }
body.woocommerce-cart .button:hover,
body.woocommerce-cart a.button:hover { background: var(--wine-deep) !important; }
body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
  font-size: 16px !important;
  padding: 16px 24px !important;
}

/* Coupon input */
body.woocommerce-cart .coupon .input-text {
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  color: var(--ink) !important;
}

/* Empty-cart state */
body.woocommerce-cart .cart-empty,
body.woocommerce-cart .return-to-shop { color: var(--ink) !important; }

/* Checkout buttons — force brand wine over Avada's default purple gradient */
body.woocommerce-checkout #place_order,
body.woocommerce-checkout button#place_order,
body.woocommerce-checkout .checkout_coupon button,
body.woocommerce-checkout .button[name="apply_coupon"],
body.woocommerce-checkout button[type="submit"].button {
  background: var(--accent) !important;
  background-image: none !important;
  color: #fff !important;
  border: none !important;
  text-shadow: none !important;
}
body.woocommerce-checkout #place_order::before,
body.woocommerce-checkout .checkout_coupon button::before { display: none !important; }
body.woocommerce-checkout #place_order:hover,
body.woocommerce-checkout .checkout_coupon button:hover { background: var(--wine-deep) !important; }

/* ============================================================
   CART DRAWER — Image #9 fixes:
   1) "Cut off": offset the drawer below the WP admin bar (logged-in)
   2) "Color issue": force View-cart to a clean outline (Avada's gray
      button bg was winning); hide off-brand PayPal/Venmo express
      buttons inside the drawer (they belong on the cart/checkout page,
      not the slide-out).
   ============================================================ */
body.admin-bar .stv-cart-drawer { top: 32px; }
@media (max-width: 782px) { body.admin-bar .stv-cart-drawer { top: 46px; } }

/* View cart = outline (transparent bone), Checkout = solid wine — with !important
   so Avada's default .button gradient can't override the fill. */
.stv-cart-body .woocommerce-mini-cart__buttons a.button:not(.checkout),
.stv-cart-body a.button.wc-forward:not(.checkout) {
  background: transparent !important;
  background-image: none !important;
  border: 1.5px solid var(--ink) !important;
  color: var(--ink) !important;
}
.stv-cart-body .woocommerce-mini-cart__buttons a.button:not(.checkout):hover {
  background: var(--ink) !important;
  color: var(--paper) !important;
}
.stv-cart-body .woocommerce-mini-cart__buttons a.button.checkout,
.stv-cart-body a.button.checkout {
  background: var(--accent) !important;
  background-image: none !important;
  border: none !important;
  color: #fff !important;
}
.stv-cart-body .woocommerce-mini-cart__buttons a.button.checkout:hover { background: var(--wine-deep) !important; }

/* Hide express/3rd-party payment buttons injected into the mini-cart drawer */
.stv-cart-body .ppc-button-wrapper,
.stv-cart-body [id*="ppcp"],
.stv-cart-body [class*="ppcp"],
.stv-cart-body [id*="paypal"],
.stv-cart-body [class*="paypal-button"],
.stv-cart-body .wc-stripe-product-checkout-container,
.stv-cart-body #wc-stripe-express-checkout-element,
.stv-cart-body .wc-block-components-express-payment,
.stv-cart-body .woocommerce-mini-cart__express,
.stv-cart-body .smart-buttons,
.stv-cart-body .wc-proceed-to-checkout + div { display: none !important; }

/* ============================================================
   CART DRAWER — custom mini-cart matching design spec (Image #10)
   ============================================================ */
.stv-mc-list-wrap { flex: 1; overflow-y: auto; padding: 24px 28px 12px; min-height: 0; }
.stv-mc-list { list-style: none; margin: 0; padding: 0; }
.stv-mc-item {
  display: grid; grid-template-columns: 96px 1fr; gap: 20px;
  padding: 0 0 28px; margin: 0 0 28px;
  border-bottom: 1px solid var(--line-soft);
}
.stv-mc-item:last-child { border-bottom: 0; }
.stv-mc-thumb {
  width: 96px; height: 96px; border-radius: 12px;
  background: linear-gradient(150deg, var(--wine) 0%, var(--wine-deep) 100%);
  overflow: hidden; flex-shrink: 0;
}
.stv-mc-thumb.has-img { background: var(--bone-2); }
.stv-mc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stv-mc-name { font-family: var(--sans); font-weight: 700; font-size: 17px; color: var(--ink); line-height: 1.25; }
.stv-mc-desc { font-size: 14px; color: var(--ink-soft); margin-top: 4px; line-height: 1.4; }
.stv-mc-row { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; }
.stv-qty {
  display: inline-flex; align-items: center; gap: 0;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 8px; overflow: hidden;
  box-shadow: 0 1px 3px rgba(33,28,26,.06);
}
.stv-qty-btn {
  width: 38px; height: 42px; border: none; background: transparent;
  font-size: 19px; line-height: 1; color: var(--ink-soft); cursor: pointer;
  display: grid; place-items: center; transition: color .15s, background .15s;
}
.stv-qty-btn:hover { color: var(--ink); background: var(--bone); }
.stv-qty-n { min-width: 34px; text-align: center; font-family: var(--sans); font-weight: 600; font-size: 15px; color: var(--ink); }
.stv-mc-price { font-family: var(--serif); font-size: 22px; color: var(--ink); }
.stv-mc-remove {
  display: inline-block; margin-top: 12px;
  font-size: 14px; color: var(--ink-soft) !important; text-decoration: underline;
  text-underline-offset: 3px; cursor: pointer;
}
.stv-mc-remove:hover { color: var(--accent) !important; }
.stv-mc-empty { color: var(--ink-soft); font-size: 15px; padding: 8px 0; }

/* Pinned white footer */
.stv-mc-foot {
  background: var(--paper);
  border-top: 1px solid var(--line);
  padding: 26px 28px calc(26px + env(safe-area-inset-bottom));
  flex-shrink: 0;
}
.stv-mc-subtotal { display: flex; align-items: baseline; justify-content: space-between; }
.stv-mc-subtotal-label {
  font-family: var(--label); font-size: 13px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink);
}
.stv-mc-subtotal-amt { font-family: var(--serif); font-size: 30px; color: var(--accent); }
.stv-mc-note { font-size: 14px; color: var(--ink-soft); line-height: 1.5; margin: 12px 0 18px; }
.stv-mc-checkout {
  display: block; width: 100%; box-sizing: border-box; text-align: center;
  padding: 17px; border-radius: 8px;
  background: var(--accent); color: #fff !important; text-decoration: none;
  font-family: var(--sans); font-weight: 700; font-size: 16px;
  transition: background .18s;
}
.stv-mc-checkout:hover { background: var(--wine-deep); color: #fff !important; }
.stv-mc-continue {
  display: block; width: 100%; margin-top: 14px; padding: 4px;
  background: none; border: none; cursor: pointer;
  font-family: var(--sans); font-weight: 600; font-size: 15px; color: var(--ink-soft);
  text-align: center; transition: color .15s;
}
.stv-mc-continue:hover { color: var(--ink); }
.stv-mc-continue-btn {
  display: block; text-align: center; padding: 15px; border-radius: 8px;
  background: var(--accent); color: #fff !important; text-decoration: none; font-weight: 700;
}
/* Busy state while updating quantities */
.stv-cart-drawer.stv-mc-busy .stv-mc-list-wrap { opacity: .55; pointer-events: none; transition: opacity .15s; }

/* ============================================================
   CHECKOUT — full rebuild to design spec (Images #11/#12)
   form-checkout.php / payment.php / review-order.php overrides.
   ============================================================ */
.stv-co { background: var(--bone); }
.stv-co-wrap { max-width: var(--maxw); margin: 0 auto; padding: 46px 40px 96px; }

/* head */
.stv-co-head { padding-top: 0; }
.stv-crumb { display: flex; align-items: center; gap: 9px; font-family: var(--label); font-size: 12.5px; font-weight: 600; letter-spacing: .04em; color: var(--ink-soft); }
.stv-crumb a { text-decoration: none; color: var(--ink-soft); transition: color .2s; }
.stv-crumb a:hover { color: var(--accent); }
.stv-crumb .on { color: var(--accent); }
.stv-crumb svg { width: 13px; height: 13px; opacity: .6; }
.stv-co-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-top: 16px; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.stv-co-title h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(34px,4.6vw,54px); line-height: 1; letter-spacing: -.015em; color: var(--ink); margin: 0; }
.stv-co-title h1 em { color: var(--accent); font-style: normal; }
.stv-secure { display: inline-flex; align-items: center; gap: 9px; font-family: var(--label); font-size: 13px; font-weight: 600; color: var(--ink-soft); background: var(--paper); border: 1px solid var(--line); padding: 9px 15px; border-radius: 99px; }
.stv-secure svg { width: 15px; height: 15px; color: #3f8f5f; }

/* grid */
.stv-co-grid { display: grid; grid-template-columns: 1.4fr .85fr; gap: 48px; align-items: start; margin-top: 42px; }

/* panels */
.stv-panel { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 32px 34px; }
.stv-panel + .stv-panel { margin-top: 22px; }
.stv-panel-head { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.stv-step { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff; font-family: var(--label); font-weight: 700; font-size: 14px; display: grid; place-items: center; }
.stv-panel-head h2 { font-family: var(--serif); font-weight: 500; font-size: 24px; line-height: 1; margin: 0; color: var(--ink); }
.stv-panel-opt { margin-left: auto; font-size: 12.5px; color: var(--ink-soft); font-family: var(--label); font-weight: 600; letter-spacing: .03em; }

/* express */
.stv-express-slot { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stv-express-slot:empty { display: none; }
.stv-or-div { display: flex; align-items: center; gap: 16px; margin: 24px 0 0; color: var(--ink-soft); font-family: var(--label); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.stv-or-div::before, .stv-or-div::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* WC billing fields → design .fld look */
.stv-co-left .woocommerce-billing-fields h3,
.stv-co-left .woocommerce-additional-fields h3,
.stv-co-left #ship-to-different-address { display: none; }
.stv-co-left .woocommerce-billing-fields__field-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.stv-co-left .woocommerce-billing-fields__field-wrapper .form-row { width: auto; float: none; margin: 0 0 0; padding: 0; }
.stv-co-left .form-row-wide,
.stv-co-left #order_comments_field { grid-column: 1 / -1; }
.stv-co-left .woocommerce-billing-fields .form-row label,
.stv-co-left .woocommerce-additional-fields label {
  display: block; font-family: var(--label); font-size: 11.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-soft); font-weight: 600; margin-bottom: 7px;
}
.stv-co-left .woocommerce-billing-fields abbr.required,
.stv-co-left .required { color: var(--accent); border: none; text-decoration: none; }
.stv-co-left .input-text,
.stv-co-left textarea,
.stv-co-left select {
  width: 100%; padding: 13px 14px; border: 1px solid var(--line) !important; border-radius: 8px !important;
  background: var(--bone) !important; font-family: var(--sans); font-size: 15px; color: var(--ink) !important;
  box-sizing: border-box; transition: border-color .2s, background .2s, box-shadow .2s;
}
.stv-co-left .input-text:focus,
.stv-co-left textarea:focus,
.stv-co-left select:focus { outline: none; border-color: var(--accent) !important; background: #fff !important; box-shadow: 0 0 0 3px rgba(94,77,134,.12); }
.stv-co-left .input-text::placeholder, .stv-co-left textarea::placeholder { color: #9b958f; }
.stv-co-left textarea { resize: vertical; min-height: 80px; }
.stv-co-left .woocommerce-additional-fields { margin-top: 16px; }

/* payment methods → design .pay-opt */
.stv-payment .wc_payment_methods { list-style: none; margin: 0; padding: 0; }
.stv-payment li.wc_payment_method { border: 1px solid var(--line); border-radius: 10px; margin-bottom: 12px; overflow: hidden; transition: border-color .2s, box-shadow .2s; padding: 0; background: var(--paper); }
.stv-payment li.wc_payment_method:last-child { margin-bottom: 0; }
.stv-payment li.wc_payment_method > input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.stv-payment li.wc_payment_method > label {
  display: flex; align-items: center; gap: 13px; padding: 16px 18px; cursor: pointer;
  font-weight: 600; font-size: 15.5px; color: var(--ink); margin: 0; position: relative;
}
.stv-payment li.wc_payment_method > label::before {
  content: ""; flex: none; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--line); transition: border-color .2s; box-sizing: border-box;
}
.stv-payment li.wc_payment_method > label::after {
  content: ""; position: absolute; left: 23px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--accent); transform: scale(0); transition: transform .2s;
}
.stv-payment li.wc_payment_method > input[type="radio"]:checked + label::before { border-color: var(--accent); }
.stv-payment li.wc_payment_method > input[type="radio"]:checked + label::after { transform: scale(1); }
.stv-payment li.wc_payment_method:has(> input:checked) { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(94,77,134,.1); }
.stv-payment li.wc_payment_method > label img { margin-left: auto; height: 22px; width: auto; }
.stv-payment .payment_box { background: transparent; border: none; margin: 0; padding: 4px 18px 20px; font-size: 14px; color: var(--ink-soft); }
.stv-payment .payment_box::before { display: none; }
.stv-payment .payment_box input.input-text,
.stv-payment .payment_box .wc-stripe-elements-field,
.stv-payment .payment_box .wc-stripe-elements-styled {
  background: var(--bone); border: 1px solid var(--line); border-radius: 8px; padding: 13px 14px;
}

/* summary card */
.stv-co-summary { position: sticky; top: 96px; }
.stv-sum-card { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: 0 30px 60px -42px rgba(33,28,26,.45); }
.stv-sum-head { padding: 24px 26px 20px; border-bottom: 1px solid var(--line); }
.stv-sum-head h2 { font-family: var(--serif); font-weight: 500; font-size: 22px; margin: 0; color: var(--ink); }
.stv-sum-body { padding: 22px 26px; }
.stv-order-review { display: block; }

/* line items */
.stv-or-items { display: flex; flex-direction: column; }
.stv-li { display: flex; gap: 15px; align-items: flex-start; }
.stv-li + .stv-li { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line-soft); }
.stv-li-thumb { flex: none; width: 74px; height: 74px; border-radius: 10px; overflow: hidden; position: relative; background: radial-gradient(circle at 70% 25%, rgba(255,255,255,.16), transparent 45%), linear-gradient(150deg, var(--wine), var(--wine-deep)); }
.stv-li-thumb.has-img { background: var(--bone-2); }
.stv-li-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stv-li-qty { position: absolute; top: -7px; right: -7px; min-width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: #fff; font-family: var(--label); font-size: 12px; font-weight: 700; display: grid; place-items: center; border: 2px solid var(--paper); }
.stv-li-info { flex: 1; }
.stv-li-info h3 { font-size: 15.5px; font-weight: 700; line-height: 1.3; margin: 0; color: var(--ink); }
.stv-li-sub { font-size: 13px; color: var(--ink-soft); margin-top: 4px; }
.stv-li-edit { font-family: var(--label); font-size: 12px; font-weight: 600; color: var(--accent); text-decoration: none; margin-top: 8px; display: inline-block; }
.stv-li-edit:hover { text-decoration: underline; }
.stv-li-price { font-family: var(--serif); font-size: 20px; flex: none; color: var(--ink); }

/* coupon */
.stv-coupon { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.stv-coupon-toggle { background: none; border: none; cursor: pointer; font-family: var(--label); font-size: 13px; font-weight: 600; color: var(--accent); display: inline-flex; align-items: center; gap: 7px; padding: 0; }
.stv-coupon-toggle svg { width: 14px; height: 14px; }
.stv-coupon-form { display: none; margin-top: 14px; gap: 10px; }
.stv-coupon-form.show { display: flex; }
.stv-coupon-form input { flex: 1; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--bone); font-family: var(--sans); font-size: 14px; color: var(--ink); }
.stv-coupon-form input:focus { outline: none; border-color: var(--accent); background: #fff; }
.stv-coupon-form button { padding: 0 18px; border-radius: 8px; border: 1.5px solid var(--ink); background: none; font-family: var(--sans); font-weight: 700; font-size: 13px; cursor: pointer; color: var(--ink); transition: background .2s, color .2s; }
.stv-coupon-form button:hover { background: var(--ink); color: #fff; }

/* totals */
.stv-totals { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 11px; }
.stv-trow { display: flex; justify-content: space-between; font-size: 14.5px; color: var(--ink-soft); }
.stv-trow span { color: var(--ink-soft); }
.stv-disc, .stv-disc span { color: #3f8f5f; }
.stv-grand { margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--line); align-items: baseline; }
.stv-grand-lbl { font-family: var(--label); font-weight: 700; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink) !important; }
.stv-grand-val, .stv-grand-val .woocommerce-Price-amount { font-family: var(--serif); font-size: 34px; color: var(--accent) !important; line-height: 1; }

/* place order */
.stv-place { margin-top: 22px; }
.stv-place .stv-place-btn,
.stv-co-summary #place_order {
  width: 100% !important; font-size: 16px !important; padding: 17px !important;
  background: var(--accent) !important; background-image: none !important; color: #fff !important;
  border: none !important; border-radius: 4px !important; font-family: var(--sans) !important;
  font-weight: 700 !important; cursor: pointer; text-shadow: none !important; box-shadow: none !important;
}
.stv-co-summary #place_order::before { display: none !important; }
.stv-place .stv-place-btn:hover,
.stv-co-summary #place_order:hover { background: var(--wine-deep) !important; }
.stv-fine { margin-top: 14px; font-size: 12px; color: var(--ink-soft); line-height: 1.55; text-align: center; }
.stv-fine a { color: var(--accent); }

/* trust + help */
.stv-trust { margin-top: 18px; display: flex; flex-direction: column; gap: 11px; }
.stv-ti { display: flex; align-items: center; gap: 11px; font-size: 13.5px; color: var(--ink-soft); }
.stv-ti svg { flex: none; width: 17px; height: 17px; color: var(--accent); }
.stv-help { margin-top: 18px; background: var(--bone-2); border-radius: 12px; padding: 18px 20px; font-size: 13.5px; color: var(--ink-soft); line-height: 1.55; }
.stv-help b { color: var(--ink); display: block; font-family: var(--label); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 6px; }
.stv-help a { color: var(--accent); text-decoration: none; font-weight: 600; }

@media (max-width: 960px) {
  .stv-co-grid { grid-template-columns: 1fr; gap: 30px; }
  .stv-co-summary { position: static; }
}
@media (max-width: 600px) {
  /* NOTE: top padding here is inert — `.stv-co-wrap{padding-top:6px !important}`
     (~line 3374) wins. The fixed-header clearance is on #main, set exactly by
     stv-main.js (measures the real header, incl. the taller mobile bar). */
  .stv-co-wrap { padding: 30px 20px 70px; }
  .stv-co-left .woocommerce-billing-fields__field-wrapper { grid-template-columns: 1fr; }
  .stv-express-slot { grid-template-columns: 1fr; }
  .stv-panel { padding: 24px 22px; }
}

/* Checkout: hide the hidden country field row + the redundant express radio */
.stv-co-left #billing_country_field,
.stv-co-left .stv-hidden-field,
.stv-co-left p.form-row.stv-hidden-field { display: none !important; }
.stv-payment li.wc_payment_method.payment_method_stripe_payment_request { display: none !important; }

/* Prevent horizontal scroll from off-canvas fixed elements (cart drawer at
   translateX(100%), full-screen mobile nav, scrim). overflow-x:clip kills the
   overflow without creating a scroll container — so position:sticky still works. */
html, body { overflow-x: clip; }

/* Checkout mobile width fix: grid 1fr let children force the track wider than
   the container (min-width:auto). Use minmax(0,1fr) + min-width:0 so panels and
   the order summary shrink to the viewport instead of overflowing. */
.stv-co-grid { padding-left: 0 !important; padding-right: 0 !important; }
.stv-co-left, .stv-co-summary { min-width: 0; }
.stv-panel, .stv-sum-card, .stv-sum-body, .stv-order-review,
.stv-li, .stv-li-info, .stv-totals, .stv-coupon { min-width: 0; max-width: 100%; }
.stv-co-left .input-text,
.stv-co-left textarea,
.stv-payment iframe,
.stv-payment .wc-stripe-elements-field,
.stv-payment .StripeElement,
.stv-payment .payment_box { max-width: 100% !important; box-sizing: border-box; }
.stv-li { flex-wrap: wrap; }
.stv-li-price { white-space: nowrap; }
@media (max-width: 960px) {
  .stv-co-grid { grid-template-columns: minmax(0, 1fr) !important; }
}

/* Hide Avada's "Hello / Have Questions / View Cart" account bar on cart &
   checkout — not part of the design spec. */
body.woocommerce-checkout .avada-myaccount-user,
body.woocommerce-cart .avada-myaccount-user { display: none !important; }

/* ============================================================
   INSTAGRAM SECTION (design .ig-grid). Branded placeholder grid
   linking to @valerielusvardi — swap for Smash Balloon on staging.
   ============================================================ */
.stv-ig-section { padding: 0 0 0; }
.stv-ig-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-top: 42px; }
.stv-ig-cell {
  aspect-ratio: 1; border-radius: 6px; display: grid; place-items: center;
  color: rgba(255,255,255,.82); text-decoration: none;
  background: linear-gradient(150deg, var(--wine), var(--clay));
  transition: transform .2s ease, filter .2s ease;
}
.stv-ig-cell:nth-child(2), .stv-ig-cell:nth-child(4), .stv-ig-cell:nth-child(6) { background: linear-gradient(150deg, var(--clay), var(--wine-deep)); }
.stv-ig-cell:nth-child(3), .stv-ig-cell:nth-child(5) { background: linear-gradient(150deg, var(--wine-deep), var(--wine)); }
.stv-ig-cell:hover { transform: scale(1.03); filter: brightness(1.1); }
.stv-ig-cell svg { width: 30px; height: 30px; }
@media (max-width: 760px) { .stv-ig-grid { grid-template-columns: repeat(3, 1fr); } }

/* Live Instagram feed (Smash Balloon) — styled to match the design grid */
.stv-ig-feed { margin-top: 42px; }
.stv-ig-feed #sb_instagram { padding: 0 !important; width: 100% !important; }
.stv-ig-feed #sb_instagram .sb_instagram_header,
.stv-ig-feed #sb_instagram #sbi_load { display: none !important; }
.stv-ig-feed #sb_instagram #sbi_images {
  display: grid !important; grid-template-columns: repeat(6, 1fr);
  gap: 10px; padding: 0 !important; margin: 0 !important; width: 100% !important;
}
.stv-ig-feed #sb_instagram #sbi_images .sbi_item {
  width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important;
}
.stv-ig-feed #sb_instagram #sbi_images .sbi_item .sbi_photo,
.stv-ig-feed #sb_instagram #sbi_images .sbi_item .sbi_imgLiquid {
  border-radius: 6px; overflow: hidden; aspect-ratio: 4 / 5; display: block;
  width: 100% !important; height: auto !important; /* override SB inline px height */
  transition: transform .2s ease, filter .2s ease;
}
.stv-ig-feed #sb_instagram #sbi_images .sbi_item img {
  width: 100% !important; height: 100% !important; object-fit: cover; border-radius: 6px;
  position: absolute; inset: 0;
}
.stv-ig-feed #sb_instagram #sbi_images .sbi_item .sbi_photo { position: relative; }
.stv-ig-feed #sb_instagram #sbi_images .sbi_item .sbi_photo:hover,
.stv-ig-feed #sb_instagram #sbi_images .sbi_item:hover .sbi_imgLiquid {
  transform: scale(1.03); filter: brightness(1.08);
}
@media (max-width: 760px) {
  .stv-ig-feed { margin-top: 26px; }
  .stv-ig-feed #sb_instagram #sbi_images { grid-template-columns: repeat(3, 1fr); gap: 6px; }
}

/* ============================================================
   DESIGN-FIDELITY FIXES (v1.9.9) — from parallel design-vs-live audits.
   Appended so equal-specificity rules win via cascade order.
   ============================================================ */

/* ---- CART DRAWER: match design cart.js exact sizing ---- */
.stv-cart-head { padding: 24px 26px; }
.stv-cart-scrim { background: rgba(33,28,26,.42); backdrop-filter: blur(2px); }
.stv-mc-list-wrap { padding: 8px 26px; }
.stv-mc-item { grid-template-columns: 64px 1fr; gap: 14px; padding: 20px 0; margin: 0; }
.stv-mc-thumb { width: 64px; height: 64px; border-radius: 9px; }
.stv-mc-info { min-width: 0; }
.stv-mc-name { font-size: 15px; }
.stv-mc-desc { font-size: 13px; margin-top: 3px; }
.stv-mc-row { margin-top: 11px; }
.stv-qty { box-shadow: none; }
.stv-qty-btn { width: 30px; height: 30px; font-size: 16px; color: var(--ink); }
.stv-qty-btn:hover { background: var(--bone-2); }
.stv-qty-n { min-width: 30px; font-family: var(--label); font-size: 14px; }
.stv-mc-price { font-size: 18px; }
.stv-mc-remove { font-size: 11.5px; font-family: var(--label); font-weight: 600; letter-spacing: .04em; margin-top: 8px; }
.stv-mc-foot { padding: 22px 26px calc(22px + env(safe-area-inset-bottom)); }
.stv-mc-subtotal-label { letter-spacing: .06em; color: var(--ink-soft); }
.stv-mc-note { font-size: 12.5px; margin: 6px 0 16px; }
.stv-mc-checkout { border-radius: 4px; font-size: 15px; padding: 15px 26px; }
.stv-mc-continue { font-family: var(--label); font-size: 13px; margin-top: 12px; }
.stv-mc-continue:hover { color: var(--accent); }

/* ---- TESTIMONIALS: section rhythm to design (108px; mobile 60px) ---- */
.stv-testimonials { padding: 108px 0; }
.stv-testimonial-attr { letter-spacing: .1em; }
@media (max-width: 760px) { .stv-testimonials { padding: 60px 0; } }

/* ---- CART PAGE (/cart/): typography + card parity with checkout ---- */
body.woocommerce-cart #main { padding-top: 72px !important; }
body.woocommerce-cart .entry-title,
body.woocommerce-cart .post-content > .woocommerce > h1,
body.woocommerce-cart .woocommerce-cart-form caption {
  font-family: var(--serif) !important; font-size: clamp(30px, 4.4vw, 52px) !important;
  font-weight: 500 !important; letter-spacing: -.015em !important; line-height: 1 !important;
  color: var(--ink) !important; margin-bottom: 28px !important;
}
body.woocommerce-cart .cart_totals > h2,
body.woocommerce-cart .cart-collaterals h2,
body.woocommerce-cart .coupon > h2,
body.woocommerce-cart .actions h2 {
  font-size: 22px !important; line-height: 1.15 !important; margin-bottom: 18px !important;
}
body.woocommerce-cart table.cart, body.woocommerce-cart .shop_table,
body.woocommerce-cart .cart_totals { border-radius: 14px !important; }
body.woocommerce-cart table.cart th, body.woocommerce-cart table.cart td { padding: 18px 22px !important; }
body.woocommerce-cart .product-thumbnail img {
  width: 64px !important; height: 64px !important; object-fit: cover !important;
  border-radius: 8px !important; border: 1px solid var(--line) !important;
}
body.woocommerce-cart .cart-collaterals { gap: 28px !important; align-items: start !important; }
body.woocommerce-cart .cart-collaterals .coupon,
body.woocommerce-cart .cart .actions {
  background: var(--paper) !important; border: 1px solid var(--line) !important;
  border-radius: 14px !important; padding: 28px 26px !important;
}
body.woocommerce-cart button[name="update_cart"],
body.woocommerce-cart input[name="update_cart"] {
  background: transparent !important; color: var(--ink) !important; border: 1.5px solid var(--ink) !important;
}
body.woocommerce-cart button[name="update_cart"]:hover,
body.woocommerce-cart input[name="update_cart"]:hover { background: var(--ink) !important; color: var(--paper) !important; }
body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button { background: var(--clay) !important; }
body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover { background: var(--wine-deep) !important; }
body.woocommerce-cart .quantity { border-radius: 6px !important; overflow: hidden !important; border: 1px solid var(--line) !important; }
@media (max-width: 860px) {
  body.woocommerce-cart .cart-collaterals { flex-direction: column !important; }
  body.woocommerce-cart .cart-collaterals .coupon,
  body.woocommerce-cart .cart .actions,
  body.woocommerce-cart .cart_totals { width: 100% !important; }
}

/* ---- VIDEO LIBRARY: style AIOVG default grid output to brand cards ---- */
.stv-lib-main .aiovg-videos .aiovg-count,
.stv-vp-player-col .aiovg-videos .aiovg-count { color: var(--ink-soft); font-size: 14.5px; margin-bottom: 20px; }
.stv-lib-main .aiovg-grid { margin: 0; }
.stv-lib-main .aiovg-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 26px 22px; }
.stv-lib-main .aiovg-col, .stv-lib-main .aiovg-item-video { width: auto; padding: 0; }
.stv-lib-main .aiovg-thumbnail { margin: 0; }
.stv-lib-main .aiovg-responsive-container { padding-bottom: 68.75% !important; border-radius: 9px; overflow: hidden; }
.stv-lib-main .aiovg-responsive-element { border-radius: 9px; }
.stv-lib-main .aiovg-svg-icon-play { width:50px; height:50px; min-width:0; max-width:50px; min-height:0; max-height:50px;
  background:rgba(255,255,255,.92); border-radius:50%; padding:14px; fill:var(--accent);
  box-shadow:0 8px 20px -8px rgba(0,0,0,.5); filter:none; transition:transform .2s, background .2s; }
.stv-lib-main .aiovg-item-video:hover .aiovg-svg-icon-play { transform:scale(1.08); background:#fff; }
.stv-lib-main .aiovg-duration { right:8px; bottom:8px; background:rgba(33,28,26,.84); border-radius:4px;
  font-family:var(--label); font-size:11px; font-weight:600; padding:3px 7px; }
.stv-lib-main .aiovg-caption { padding-top:13px; }
.stv-lib-main .aiovg-title { font-size:1em; }
.stv-lib-main .aiovg-link-title { font-family:var(--sans); font-weight:700; font-size:16.5px; line-height:1.25;
  color:var(--ink); text-decoration:none; transition:color .2s; }
.stv-lib-main .aiovg-item-video:hover .aiovg-link-title { color: var(--accent); }
.stv-lib-main .aiovg-category, .stv-lib-main .aiovg-tag { color:var(--ink-soft); font-size:13px; }
.stv-lib-main .aiovg-category > svg, .stv-lib-main .aiovg-tag > svg { display:none; }
.stv-lib-main .aiovg-link-category, .stv-lib-main .aiovg-link-tag { color:var(--ink-soft); text-decoration:none; }
.stv-lib-main .aiovg-pagination { margin-top:48px; }
.stv-lib-main .aiovg-pagination-links .page-numbers { min-width:40px; height:40px; display:inline-flex; align-items:center;
  justify-content:center; border:1px solid var(--line); border-radius:8px; font-family:var(--label); font-weight:600;
  color:var(--ink); padding:0 12px; text-decoration:none; }
.stv-lib-main .aiovg-pagination-links a:hover, .stv-lib-main .aiovg-pagination-links .current {
  background:var(--accent); border-color:var(--accent); color:#fff; }
.stv-lib-main .aiovg-pagination-info { color:var(--ink-soft); font-size:13px; }
/* single-video player rounding */
.stv-vp-player-col .aiovg-player-container { background:#1a1620; border-radius:12px; overflow:hidden; }
.stv-vp-player-col .aiovg-player-container iframe { border-radius:12px; }
@media(max-width:980px){ .stv-lib-main .aiovg-row{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .stv-lib-main .aiovg-row{ grid-template-columns:1fr; } }

/* ROOT-CAUSE FIX: wpautop injects <br> after each <img> inside fusion_code,
   and those <br>s become grid items, pushing images into alternating columns
   (the "2-column with gaps" bug). Remove them from the results grid. */
.stv-results-grid br { display: none !important; }

/* Remaining checkout fidelity deltas (design spec) */
.stv-or-div { margin: 24px 0 4px !important; }            /* design .or-div bottom 4px */
@media (max-width: 520px) {                               /* design collapses field rows at 520, not 600 */
  .stv-co-left .woocommerce-billing-fields__field-wrapper { grid-template-columns: 1fr !important; }
  .stv-express-slot { grid-template-columns: 1fr !important; }
}
/* Transformations: bias the 3:4 crop toward the top so faces/upper bodies show */
.stv-results-grid .stv-result-photo { object-position: center top; }

/* Logged-in admin bar + the absolute/sticky Theme-Builder header.
   This header is an Avada absolute-position sticky container. When STUCK
   (class .fusion-container-stuck) Avada's own JS sets position:fixed; top:32px
   inline — it already clears the admin bar, so we must NOT override it.
   When NOT stuck it is position:absolute inside #wrapper, which the admin bar
   already pushes down 32px, so it needs top:0 (the previous rule forced 32px
   here → the header sat 32px low and the dark hero showed in the gap above it). */
body.admin-bar .fusion-tb-header .fullwidth-box.fusion-sticky-container:not(.fusion-container-stuck) { top: 0 !important; }

/* AIOVG / Strength Squad library + single video + category pages: the content
   starts at the very top, so the fixed header was clipping the heading/eyebrow.
   Add top clearance for the fixed header (+ admin bar when logged in). */
body.page-id-2149 #main,
body.single-aiovg_videos #main,
body.post-type-archive-aiovg_videos #main,
body.tax-aiovg_categories #main,
body.tax-aiovg_tags #main { padding-top: 96px !important; }
body.admin-bar.page-id-2149 #main,
body.admin-bar.single-aiovg_videos #main,
body.admin-bar.post-type-archive-aiovg_videos #main,
body.admin-bar.tax-aiovg_categories #main,
body.admin-bar.tax-aiovg_tags #main { padding-top: 128px !important; }
@media (max-width: 782px) {
  body.admin-bar.page-id-2149 #main,
  body.admin-bar.single-aiovg_videos #main,
  body.admin-bar.tax-aiovg_categories #main { padding-top: 120px !important; }
}

/* ============================================================
   ACCURACY-PASS FIXES (parallel design-vs-live audit, v2.1.0)
   ============================================================ */
/* Design uses CLAY (#5E4D86 .btn-clay) for the checkout-flow CTAs, not wine.
   Make Place Order + drawer Checkout match (cart page already correct). */
.stv-place .stv-place-btn,
.stv-co-summary #place_order { background: var(--clay) !important; }
.stv-place .stv-place-btn:hover,
.stv-co-summary #place_order:hover { background: var(--wine-deep) !important; }
.stv-mc-checkout { background: var(--clay) !important; }
.stv-mc-checkout:hover { background: var(--wine-deep) !important; }

/* FAQ toggle icon ring → neutral --line (design .faq .ic), not wine */
.stv-faq-icon { border-color: var(--line) !important; }

/* Section vertical rhythm to design (section.sec = 108px; .final = 140px) */
#results.stv-section-sm, .stv-results-section.stv-section-sm { padding-top: 108px !important; padding-bottom: 108px !important; }
.stv-lead-magnet { padding: 108px 0 !important; }
.stv-contact-section { padding: 108px 0 !important; }

/* Contact grid ratio → design .9fr 1.1fr (live was 1fr 1.4fr — form too wide) */
.stv-contact-grid { grid-template-columns: .9fr 1.1fr !important; }

/* Featured program card lift → design -10px (was computing -4.4px).
   DESKTOP ONLY: on mobile the cards stack single-column, and the lift shifted the
   flagship card up 10px — shrinking the gap above it and growing the gap below, so
   the spacing around it looked unequal. Capped to >860px (the cards' stack
   breakpoint) so stacked gaps stay symmetric. This `!important` rule was also
   overriding the `transform:none` reset at line ~547 because it was unscoped. */
@media (min-width: 861px) {
  .stv-card.featured { transform: translateY(-10px) !important; }
}

/* Hero eyebrow → white (design .hero .eyebrow{color:#fff}) */
.stv-hero-content .eyebrow,
.stv-hero .eyebrow { color: #fff !important; }

/* Category/Tag archives lacked the .stv-lib-main wrapper so AIOVG rendered its
   default BLUE play button + unstyled grid. Re-apply the brand grid there. */
body.tax-aiovg_categories .aiovg-row,
body.tax-aiovg_tags .aiovg-row,
body.post-type-archive-aiovg_videos .aiovg-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 26px 22px; }
body.tax-aiovg_categories .aiovg-svg-icon-play,
body.tax-aiovg_tags .aiovg-svg-icon-play,
body.post-type-archive-aiovg_videos .aiovg-svg-icon-play {
  width:50px;height:50px;min-width:0;max-width:50px;min-height:0;max-height:50px;
  background:rgba(255,255,255,.92);border-radius:50%;padding:14px;fill:var(--accent) !important;filter:none;box-shadow:0 8px 20px -8px rgba(0,0,0,.5);
}
body.tax-aiovg_categories .aiovg-responsive-container,
body.tax-aiovg_tags .aiovg-responsive-container,
body.post-type-archive-aiovg_videos .aiovg-responsive-container { border-radius:9px; overflow:hidden; }
body.tax-aiovg_categories .aiovg-link-title,
body.tax-aiovg_tags .aiovg-link-title,
body.post-type-archive-aiovg_videos .aiovg-link-title { font-family:var(--sans); font-weight:700; font-size:16.5px; color:var(--ink); text-decoration:none; }
body.tax-aiovg_categories .aiovg-pagination-links .page-numbers,
body.tax-aiovg_tags .aiovg-pagination-links .page-numbers,
body.post-type-archive-aiovg_videos .aiovg-pagination-links .page-numbers { border:1px solid var(--line); border-radius:8px; color:var(--ink); }
body.tax-aiovg_categories .aiovg-pagination-links .current,
body.tax-aiovg_tags .aiovg-pagination-links .current,
body.post-type-archive-aiovg_videos .aiovg-pagination-links .current { background:var(--accent); border-color:var(--accent); color:#fff; }

/* ============================================================
   v2.2.0 — PROGRAM/SERVICE CARD DESCRIPTIONS (copy interview)
   ============================================================ */
.stv-card-desc{font-size:15px;color:var(--ink-soft);line-height:1.6;margin:0 0 18px;}
.stv-card.featured .stv-card-desc,
.stv-card.stv-card.featured .stv-card-desc{color:rgba(255,255,255,.8);}

/* ============================================================
   v2.3.0 — CART/CHECKOUT AUDIT FIXES
   ============================================================ */
/* Clear the fixed sticky header so the page H1 isn't clipped at the top
   (cart + checkout have no hero to provide the offset). */
body.woocommerce-cart #main,
body.woocommerce-checkout #main { padding-top: 100px !important; }
body.admin-bar.woocommerce-cart #main,
body.admin-bar.woocommerce-checkout #main { padding-top: 132px !important; }
@media (max-width: 782px) {
  body.admin-bar.woocommerce-cart #main,
  body.admin-bar.woocommerce-checkout #main { padding-top: 150px !important; }
}
/* Mobile fallback (pre-JS / JS-disabled): the collapsed mobile bar is TALLER than
   the 100px desktop clearance above, so the breadcrumb clipped under it. stv-main.js
   refines #main to the exact measured header height; this is just the safety net. */
@media (max-width: 600px) {
  body.woocommerce-cart #main,
  body.woocommerce-checkout #main { padding-top: 124px !important; }
}
/* #main now provides the header clearance; trim the wrap's own top pad. */
.stv-co-wrap { padding-top: 6px !important; }

/* Line-item subtitle (cart drawer + checkout summary): keep to 2 clean lines. */
.stv-mc-desc,
.stv-order-review .stv-li-sub {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============================================================
   v2.4.0 — VIDEO LIBRARY ARCHIVE POLISH
   ============================================================ */
/* Hide AIOVG's default unstyled breadcrumb on category/tag archives —
   the "← Back to full library" link already covers navigation, and the
   breadcrumb isn't part of the design spec. */
.stv-lib-main .aiovg-breadcrumbs { display: none !important; }

/* ============================================================
   v2.5.0 — VIDEO LIBRARY: consistent play buttons, watch meta,
            tag pills, sidebar "My Profile" button
   ============================================================ */
/* Standardize the "You may also like" grid on the watch page to the SAME
   branded play button as the library/archive grids (wine disc, light cutout). */
.stv-vp-player-col .aiovg-svg-icon-play {
  width:50px; height:50px; min-width:0; max-width:50px; min-height:0; max-height:50px;
  background:rgba(255,255,255,.92); border-radius:50%; padding:14px; fill:var(--accent) !important;
  box-shadow:0 8px 20px -8px rgba(0,0,0,.5); filter:none; transition:transform .2s, background .2s;
}
.stv-vp-player-col .aiovg-item-video:hover .aiovg-svg-icon-play { transform:scale(1.08); background:#fff; }
.stv-vp-player-col .aiovg-duration { right:8px; bottom:8px; background:rgba(33,28,26,.84); border-radius:4px;
  font-family:var(--label); font-size:11px; font-weight:600; padding:3px 7px; }
.stv-vp-player-col .aiovg-link-title { font-family:var(--sans); font-weight:700; font-size:15.5px; color:var(--ink); text-decoration:none; }
.stv-vp-player-col .aiovg-item-video:hover .aiovg-link-title { color:var(--accent); }
/* related-grid category/tag meta: match the library styling (.stv-lib-main) — the
   plugin's default blue underlined links were leaking through in this scope */
.stv-vp-player-col .aiovg-caption { padding-top:13px; }
.stv-vp-player-col .aiovg-category, .stv-vp-player-col .aiovg-tag { color:var(--ink-soft); font-size:13px; }
.stv-vp-player-col .aiovg-category > svg, .stv-vp-player-col .aiovg-tag > svg { display:none; }
.stv-vp-player-col .aiovg-link-category, .stv-vp-player-col .aiovg-link-tag { color:var(--ink-soft); text-decoration:none; }
.stv-vp-player-col .aiovg-link-category:hover, .stv-vp-player-col .aiovg-link-tag:hover { color:var(--accent); }

/* Watch page: meta row (views · category · duration) + tag pills under the player. */
.stv-vp-meta { display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:18px; color:var(--ink-soft); font-size:14px; }
.stv-vp-meta .mi { display:inline-flex; align-items:center; gap:7px; }
.stv-vp-meta .mi svg { width:15px; height:15px; opacity:.7; flex:none; }
.stv-vp-meta .mi a { color:var(--ink-soft); text-decoration:none; }
.stv-vp-meta .mi a:hover { color:var(--accent); }
.stv-vp-tags { display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; }
.stv-vp-tags a { font-family:var(--label); font-size:12px; font-weight:600; letter-spacing:.03em;
  background:var(--bone-2); color:var(--wine-deep); padding:6px 13px; border-radius:99px; text-decoration:none; transition:background .2s; }
.stv-vp-tags a:hover { background:var(--clay-soft); }

/* Library sidebar: "My Profile" button (account / password change). */
.stv-lib-profile { display:flex; align-items:center; justify-content:center; gap:10px; width:100%;
  background:var(--clay); color:#fff !important; border-radius:8px; padding:13px 18px; font-family:var(--sans);
  font-weight:700; font-size:14.5px; text-decoration:none; margin-bottom:16px; transition:background .2s; }
.stv-lib-profile:hover { background:var(--wine-deep); color:#fff !important; }
.stv-lib-profile svg { width:17px; height:17px; flex:none; }

/* v2.5.x — service-card note line (design: small note under Add to cart) */
.stv-service-note { font-size: 13px; color: var(--ink-soft); line-height: 1.5; margin: 14px 0 0; }

/* ============================================================
   v2.6.0 — FULL-BLEED SECTIONS + SPACING FIXES
   ============================================================ */
/* Full-width Avada containers must reach the viewport edges at wide widths.
   (Avada's breakout left a ~10px frame that showed the content background —
   visible as a light/dark border around dark sections like the hero & CTA.) */
html, body { overflow-x: clip !important; }
.fusion-fullwidth.fullwidth-box,
#content .fusion-fullwidth,
#main .fusion-fullwidth {
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  width: 100vw !important;
  max-width: 100vw !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
#wrapper, #boxed-wrapper { max-width: 100% !important; box-shadow: none !important; }

/* ── v2.8.0 — kill the 15px right/bottom "frame" strip on desktop ──
   The strip appears only when the OS shows scrollbars always: the page scrolls
   on <body> (body{overflow-y:scroll}), so the body scrollbar steals 15px from
   #wrapper, and the full-bleed dark sections (clipped at body's reduced content
   box) fall 15px short → page background shows through as a bone frame.
   Fix: on desktop, move the page scroll to <html> so the scrollbar gutter sits
   OUTSIDE the content wrapper (no theft → sections reach the true edge). Keep the
   horizontal clip on <body> only (it still contains the 100vw breakout); <html>
   must NOT be overflow:clip or it stops being a scroll container (clip ≠ scroll).
   Scoped to >=981px: below that there is the off-canvas mobile nav (needs the
   base html clip) and overlay scrollbars (0px gutter → no strip anyway). */
@media (min-width: 981px) {
  html { overflow-x: visible !important; overflow-y: auto !important; }
  body { overflow-x: clip !important; overflow-y: visible !important; }
}

/* ── v2.9.0 — Frosted-glass header + hero background video ── */

/* Header: frosted glass over the hero — applied via a ::before pseudo-element, NOT
   on the header element itself. CRITICAL: backdrop-filter on the header would make it
   a containing block for position:fixed descendants — and the mobile drawer lives
   inside the header, so it got positioned relative to the header (32px below the
   viewport under the admin bar, drifting on scroll, footer cut off). A ::before is a
   leaf node that frosts the bar without containing the menu.
   Design .nav: background:rgba(244,237,227,.86); backdrop-filter:saturate(150%) blur(10px). */
.fusion-tb-header .fullwidth-box.fusion-sticky-container {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: transparent !important;        /* tint moves to ::before */
  background-color: transparent !important;
}
.fusion-tb-header .fullwidth-box.fusion-sticky-container::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(244, 237, 227, 0.86);
  -webkit-backdrop-filter: saturate(150%) blur(10px);
  backdrop-filter: saturate(150%) blur(10px);
  z-index: 0;
  pointer-events: none;
}
.fusion-tb-header .fullwidth-box.fusion-sticky-container > * {
  position: relative;
  z-index: 1;                                 /* header content sits above the frost */
}

/* Mobile hero: the big serif headline was clipping under the fixed header because the
   bottom-aligned content (align-items:flex-end) overflowed upward. On mobile, top-align
   the content and give it clearance below the header (design .hero .ph has padding-top:104px). */
@media (max-width: 780px) {
  .stv-hero { align-items: flex-start !important; }
  .stv-hero > div:not(.stv-hero-bg) {
    padding-top: 144px !important;   /* fallback; stv-main.js refines to real header height + 64 */
    padding-bottom: 56px !important;
  }
}
/* Logged-in admin bar adds ~46px on mobile — extra top clearance so it doesn't clip. */
@media (max-width: 782px) {
  body.admin-bar .stv-hero > div:not(.stv-hero-bg) { padding-top: 164px !important; }
}

/* Avada's default 20px column bottom-margin showed a light line at the seam of dark
   full-bleed sections: under the hero (bone showed) and under the final CTA (the
   section's lighter solid #362C4C showed below its dark gradient, above the footer).
   Remove it on those columns so the dark sections meet the next section cleanly.
   NOTE: key the CTA off its #362C4C background, NOT the Fusion row number
   (.fusion-builder-row-N). Those positional classes renumber whenever the page is
   re-saved, which is why this fix used to "sneak back" — the old .fusion-builder-row-14
   selector drifted onto a different section. The background color is stable. */
.fusion-layout-column:has(.stv-hero),
.fusion-fullwidth[style*="#362C4C"] .fusion-layout-column { margin-bottom: 0 !important; }

/* Hero background video — sits inside .stv-hero-bg, above the solid fallback color
   and BELOW the gradient .stv-hero-scrim (which keeps the headline readable). */
.stv-hero-bg { overflow: hidden; }
.stv-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;            /* above the bg color, below the scrim (later in DOM) */
  pointer-events: none;
  display: block;
}

/* Service cards: don't stretch to equal height (was leaving bottom whitespace). */
.stv-service-grid { align-items: start; }
.stv-service-body { padding-bottom: 30px; }

/* Library sidebar: My Profile button shouldn't add margin on top of the flex gap. */
.stv-lib-profile { margin-bottom: 0 !important; }

/* ── v2.10.0 — Strength Squad library: collapse wpautop's empty paragraphs ──
   WP's wpautop wraps the raw HTML in this Fusion column with stray empty <p>
   tags (after the header, after My Profile, after the category list, etc.).
   Each one carried the theme's default <p> margin, blowing the vertical
   rhythm wide open — the gap between the category panel and the CTA buttons,
   and between the header and the grid. Hide them so the flex `gap` controls
   spacing, then align gaps to the design spec (sidebar 20px, CTA 12px). */
.stv-lib-page p:empty { display: none !important; margin: 0 !important; }
/* The sidebar markup has no real paragraphs — only the profile link, search
   box, category panel and CTAs. Any <p> in here is a wpautop artifact (one
   sits between the panel heading and the category list with whitespace, so
   :empty above can't catch it). Hide them all. */
.stv-lib-sidebar p { display: none !important; margin: 0 !important; }
/* wpautop also turns the newline between the two CTA links into a <br>, which
   adds a phantom line of space between "Trainerize App" and "Book a Squad Call".
   The sidebar has no intentional line breaks, so drop them all. */
.stv-lib-sidebar br { display: none !important; }
.stv-lib-sidebar { gap: 20px; }
.stv-lib-cta { gap: 12px; }
.stv-lib-layout { margin-top: 30px; }

/* Library title was rendering ~90px because Avada's "Responsive Typography"
   (.fusion-responsive-typography-calculated → font-size: calc(...)!important)
   overrides .stv-h2. Re-assert the design-spec size with body-scoped !important
   (same approach as the checkout title at v2.9.2). Spec: clamp(34px,4.4vw,52px). */
.stv-lib-page h1.stv-h2 {
  font-size: clamp(34px, 4.4vw, 52px) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.015em !important;
}

/* ── v2.11.0 — Library polish (stv-library.js): thumbnail category badges
   + sidebar "All Videos" row, right-aligned counts & active highlight. ── */

/* Color-coded category label badge, top-left of each video thumbnail. */
.stv-lib-main .aiovg-responsive-container,
.stv-lib-main .aiovg-thumbnail,
body.tax-aiovg_categories .aiovg-responsive-container,
body.tax-aiovg_tags .aiovg-responsive-container,
body.post-type-archive-aiovg_videos .aiovg-responsive-container { position: relative; }
.stv-vcat {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  font-family: var(--label);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  padding: 4px 9px;
  border-radius: 5px;
  background: var(--accent);
  box-shadow: 0 2px 8px -2px rgba(33,28,26,.55);
  pointer-events: none;
}
.stv-vcat--violet { background: #6b5392; }
.stv-vcat--plum   { background: #4f3f68; }
.stv-vcat--blue   { background: #4a5c86; }
.stv-vcat--clay   { background: #8a6248; }
.stv-vcat--teal   { background: #3f6f6a; }
.stv-vcat--slate  { background: #5d5770; }

/* Sidebar counts: right-aligned bare number (the link is already a flex row
   with justify-content:space-between). */
.stv-cats-panel .aiovg-categories-list .stv-cat-count {
  color: var(--ink-soft);
  font-family: var(--label);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}
/* Active category + "All Videos" row: filled accent, like the design. */
.stv-cats-panel .aiovg-categories-list li a.is-active {
  background: var(--accent);
  color: #fff;
}
.stv-cats-panel .aiovg-categories-list li a.is-active:hover { color: #fff; }
.stv-cats-panel .aiovg-categories-list li a.is-active .stv-cat-count {
  color: rgba(255,255,255,.78);
}
/* "All Videos" sits at the top, slightly separated from the term list. */
.stv-cats-panel .aiovg-categories-list .stv-all-videos {
  margin-bottom: 4px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line-soft);
}

/* ── Mobile (≤980px): hoist the controls above the video grid and turn the
   category list into a compact, swipeable chip strip so members land on the
   profile/CTA buttons + category picker (not a wall of videos) after login.
   The base library media query (grid→1fr, sidebar static) lives at the top of
   this file; this block adds the reorder + chip styling and wins by source
   order. (Search box was removed from the page — it did nothing.) ── */
@media (max-width: 980px) {
  /* Buttons + categories first, video grid second. */
  .stv-lib-sidebar { order: -1; gap: 14px; margin-bottom: 4px; }
  .stv-lib-main    { order: 0; }

  /* Buttons stack full-width (My Profile + the two CTAs) — predictable, no
     awkward label wrap on narrow phones. */
  .stv-lib-cta { gap: 10px; }

  /* Category selector → one-row horizontal chip scroller. */
  .stv-cats-head { padding: 12px 14px 0; border-bottom: none; }
  .stv-cats-panel .aiovg-categories-list {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    padding: 12px 14px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .stv-cats-panel .aiovg-categories-list::-webkit-scrollbar { display: none; }
  .stv-cats-panel .aiovg-categories-list li { flex: 0 0 auto; }
  .stv-cats-panel .aiovg-categories-list li a {
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 8px 14px;
    gap: 7px;
    white-space: nowrap;
  }
  /* "All Videos" chip: drop the vertical-list divider; it's just a chip here. */
  .stv-cats-panel .aiovg-categories-list .stv-all-videos {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
  }
  .stv-cats-panel .aiovg-categories-list li a.is-active { border-color: var(--accent); }
}

/* v2.6.x — checkout: force the 2-column layout (design spec). Something in
   Avada/WooCommerce was overriding display:grid on the form, collapsing it. */
.woocommerce-checkout form.checkout.stv-co-grid,
body.woocommerce-checkout form.checkout.stv-co-grid {
  display: grid !important;
  grid-template-columns: 1.4fr .85fr !important;
  gap: 48px !important;
  align-items: start !important;
  float: none !important;
}
@media (max-width: 960px) {
  .woocommerce-checkout form.checkout.stv-co-grid,
  body.woocommerce-checkout form.checkout.stv-co-grid { grid-template-columns: 1fr !important; }
}
/* kill any stray dark wrapper border around the checkout panels */
.stv-co-left, .stv-co-left > *, .stv-payment, #payment.stv-payment { border-color: var(--line) !important; }

/* v2.6.x — checkout grid, bulletproof (not body-scoped; beats WC/Avada form display) */
form.checkout.stv-co-grid {
  display: grid !important;
  grid-template-columns: 1.4fr .85fr !important;
  gap: 48px !important;
  align-items: start !important;
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
}
@media (max-width: 960px) { form.checkout.stv-co-grid { grid-template-columns: 1fr !important; } }
/* checkout page container should use the full content width for the 2-col layout */
body.woocommerce-checkout .stv-co .fusion-text,
body.woocommerce-checkout .stv-co { width: 100% !important; max-width: 100% !important; }


/* v2.7.0 — checkout 2-column, robust: explicitly pin both columns to row 1 so
   any stray WooCommerce/PPCP-injected direct child of the form can't push the
   order summary onto a new row (which made it appear stacked). */
form.checkout.stv-co-grid {
  display: grid !important;
  grid-template-columns: 1.4fr .85fr !important;
  gap: 48px !important;
  align-items: start !important;
}
form.checkout.stv-co-grid > .stv-co-left    { grid-column: 1 !important; grid-row: 1 !important; min-width: 0; }
form.checkout.stv-co-grid > .stv-co-summary { grid-column: 2 !important; grid-row: 1 !important; min-width: 0; }
@media (max-width: 960px) {
  form.checkout.stv-co-grid { grid-template-columns: 1fr !important; }
  form.checkout.stv-co-grid > .stv-co-left,
  form.checkout.stv-co-grid > .stv-co-summary { grid-column: 1 !important; grid-row: auto !important; }
}

form.checkout.stv-co-grid > .stv-co-summary { grid-column: 2 !important; grid-row: 1 !important; }

/* v2.7.1 — checkout layout via wrapper grid + display:contents form.
   The form no longer generates a box, so .stv-co-left/.stv-co-summary become
   grid items of .stv-co-grid (the wrapper DIV) — robust even if a browser/
   gateway ejects the summary out of the <form> during parsing. */
.stv-co-form { display: contents !important; }
.stv-co-grid { display: grid !important; grid-template-columns: 1.4fr .85fr !important; gap: 48px !important; align-items: start !important; margin-top: 42px; }
.stv-co-grid > .stv-co-form > .stv-co-left,
.stv-co-grid > .stv-co-left    { grid-column: 1 !important; grid-row: 1 !important; min-width: 0; }
.stv-co-grid > .stv-co-form > .stv-co-summary,
.stv-co-grid > .stv-co-summary { grid-column: 2 !important; grid-row: 1 !important; min-width: 0; }
@media (max-width: 960px) {
  .stv-co-grid { grid-template-columns: 1fr !important; }
  .stv-co-grid > .stv-co-form > .stv-co-left,
  .stv-co-grid > .stv-co-left,
  .stv-co-grid > .stv-co-form > .stv-co-summary,
  .stv-co-grid > .stv-co-summary { grid-column: 1 !important; grid-row: auto !important; }
}

/* Desktop-only re-assert of the summary's right column. MUST stay inside this
   min-width query — a bare version of this rule here previously ran AFTER the
   mobile collapse and forced the summary into a non-existent column 2 on phones,
   creating an implicit 2nd track and overlapping the two cards. */
@media (min-width: 961px) {
  .stv-co-grid > .stv-co-form > .stv-co-summary,
  .stv-co-grid > .stv-co-summary { grid-column: 2 !important; grid-row: 1 !important; }
}

/* ============================================================
   v2.9.2 — Checkout typography: defeat Avada "Responsive Typography".
   Avada tags every heading with .fusion-responsive-typography-calculated +
   an inline `--fontSize` and sizes it via `font-size: calc(...) !important`
   (assets/css/media/max-main.css). That blew the checkout title/section
   headings/product name up to hero scale (h1 ~90px, h2/h3 ~56px). Re-assert
   the design-spec sizes (stv-handover/designs/Checkout*.html) with !important
   + body-scoped specificity so they actually render.
   ============================================================ */
body.woocommerce-checkout .stv-co-title h1 {
  font-family: var(--serif) !important;
  font-weight: 500 !important;
  font-size: clamp(34px, 4.6vw, 54px) !important;
  line-height: 1 !important;
  letter-spacing: -0.015em !important;
}
body.woocommerce-checkout .stv-co-title h1 em {
  color: var(--accent) !important;
  font-style: normal !important;
}
body.woocommerce-checkout .stv-panel-head h2 {
  font-family: var(--serif) !important;
  font-weight: 500 !important;
  font-size: 24px !important;
  line-height: 1 !important;
}
body.woocommerce-checkout .stv-sum-head h2 {
  font-family: var(--serif) !important;
  font-weight: 500 !important;
  font-size: 22px !important;
  line-height: 1 !important;
}
body.woocommerce-checkout .stv-li-info h3 {
  font-family: var(--sans) !important;
  font-weight: 700 !important;
  font-size: 15.5px !important;
  line-height: 1.3 !important;
  color: var(--ink) !important;
  margin: 0 !important;
}

/* ============================================================
   v2.9.3 — Checkout polish: Avada zeroes vertical padding on inputs &
   payment labels and overrides the step-badge text color. Re-assert with
   !important. Inputs sized a touch larger than spec per owner request.
   ============================================================ */
/* Step number "1/2/3" must be white on the wine circle (Avada forced it to ink) */
body.woocommerce-checkout .stv-panel-head .stv-step { color: #fff !important; }

/* Form fields — bigger, comfortable boxes (Avada had collapsed vertical padding to 0) */
body.woocommerce-checkout .stv-co-left .input-text,
body.woocommerce-checkout .stv-co-left input[type="text"],
body.woocommerce-checkout .stv-co-left input[type="email"],
body.woocommerce-checkout .stv-co-left input[type="tel"],
body.woocommerce-checkout .stv-co-left select {
  padding: 15px 16px !important;
  height: auto !important;
  line-height: 1.3 !important;
  font-size: 15px !important;
}
body.woocommerce-checkout .stv-co-left textarea {
  padding: 15px 16px !important;
  min-height: 104px !important;
  line-height: 1.4 !important;
  font-size: 15px !important;
}

/* Payment method rows — restore the 16px/18px clickable padding (was 0 vertical) */
body.woocommerce-checkout .stv-payment li.wc_payment_method > label {
  padding: 17px 18px !important;
}
body.woocommerce-checkout .stv-payment .payment_box { padding: 4px 18px 20px !important; }

/* v2.9.3 — kill the redundant double gap between the title divider and the
   cards: .stv-co-head already supplies margin-bottom:40px, so the grid's own
   42px top margin stacked to ~82px (the "spacing issue"). Zero the grid margin. */
body.woocommerce-checkout .stv-co-grid { margin-top: 0 !important; }

/* The hidden Express panel still contributes its 22px sibling margin to the
   first visible panel; trim the head margin so the divider→card gap lands at
   ~42px (design) instead of 62px. */
body.woocommerce-checkout .stv-co-head { margin-bottom: 42px !important; }

/* ============================================================
   v2.9.4 — two more Avada overrides on checkout:
   1. ul.wc_payment_methods gets a 40px top margin from Avada/WC defaults,
      pushing the methods away from the "Payment" header (should be the 24px
      panel-head margin only).
   2. The qty badge number was forced to ink color on an ink background by
      Avada (invisible) — restore white, same fix as the step badge.
   ============================================================ */
body.woocommerce-checkout .stv-payment ul.wc_payment_methods { margin: 0 !important; }
body.woocommerce-checkout .stv-li-qty { color: #fff !important; }

/* ============================================================
   v2.9.5 — checkout alignment & polish
   ============================================================ */
/* Align the two top cards: the hidden Express panel still hands its 22px
   sibling-margin to the first VISIBLE left panel, pushing "Your details" 22px
   below "Your order". When Express is hidden, zero that margin so both card
   tops line up (head margin now supplies the 42px divider→card gap for both). */
body.woocommerce-checkout #stv-express-panel[style*="none"] + .stv-panel { margin-top: 0 !important; }

/* Qty badge: was at top:-7/right:-7 OUTSIDE the thumb, which has overflow:hidden
   → it got clipped. Move it INSIDE the top-left corner so it's fully visible. */
body.woocommerce-checkout .stv-li-thumb .stv-li-qty {
  top: 6px !important; left: 6px !important; right: auto !important;
}

/* Payment options: Avada zeroed the 12px row gap — restore a little breathing
   room between the Credit Card and PayPal boxes. */
body.woocommerce-checkout .stv-payment li.wc_payment_method { margin-bottom: 12px !important; }
body.woocommerce-checkout .stv-payment li.wc_payment_method:last-child { margin-bottom: 0 !important; }

/* ============================================================
   v2.9.6 — name fields + PayPal box
   ============================================================ */
/* First/Last name only filled 47% of their grid column (WooCommerce's default
   .form-row-first/.form-row-last width:47% float). Make them fill the cell so
   they match Email/Phone below. */
body.woocommerce-checkout .stv-co-left .woocommerce-billing-fields__field-wrapper .form-row-first,
body.woocommerce-checkout .stv-co-left .woocommerce-billing-fields__field-wrapper .form-row-last {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
}

/* PayPal (PPCP) payment box rendered with a dark gray background (rgb(62,62,62))
   — the "black box". Force it transparent so the description sits cleanly on the
   white payment row (the PayPal/Venmo buttons render below it unaffected). */
body.woocommerce-checkout #payment .payment_box.payment_method_ppcp-gateway,
body.woocommerce-checkout #payment .payment_box {
  background: transparent !important;
  color: var(--ink-soft) !important;
}
body.woocommerce-checkout #payment .payment_box.payment_method_ppcp-gateway * {
  background: transparent !important;
}

/* ============================================================
   v2.9.7 — Stripe card field shading + Place Order total color
   ============================================================ */
/* The Stripe inline card Element (#wc-stripe-card-element / .StripeElement) had
   a white bg and no border → invisible on the white panel, so it wasn't obvious
   where to type. Give it the same bone field styling as the other inputs. */
body.woocommerce-checkout .stv-payment .StripeElement,
body.woocommerce-checkout .stv-payment #wc-stripe-card-element {
  background: var(--bone) !important;
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  padding: 14px 14px !important;
}
body.woocommerce-checkout .stv-payment .StripeElement--focus {
  border-color: var(--accent) !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(94,77,134,.12) !important;
}
body.woocommerce-checkout .stv-payment .StripeElement--invalid { border-color: #b94a48 !important; }

/* Place Order button: the "· $50.00" total was dark ink on the wine button
   (unreadable). Force it white to match "PLACE ORDER". */
body.woocommerce-checkout .stv-place-btn,
body.woocommerce-checkout .stv-place-btn .stv-place-total,
body.woocommerce-checkout .stv-place-btn .stv-place-total * {
  color: #fff !important;
}

/* ============================================================
   v2.9.8 — Place Order button: bulletproof visibility.
   It was relying on JS (syncPlace) to REMOVE a display:none that PPCP/Stripe can
   add — if that JS hiccups (or the gateway state is odd) the button vanishes.
   Force it visible by default with pure CSS, and hide it ONLY when PayPal is the
   selected method (PayPal uses its own Smart Buttons). No JS dependency.
   ============================================================ */
body.woocommerce-checkout .stv-place #place_order { display: flex !important; }
body.woocommerce-checkout form.checkout:has(#payment_method_ppcp-gateway:checked) .stv-place #place_order { display: none !important; }

/* ============================================================================
   v2.11.0 — MOBILE HOMEPAGE POLISH (iPhone ~390px)
   Per-section audit vs the Homepage Mobile spec. Closes recurring gaps:
   over-wide 40px inline gutters, 108px section padding leaking onto mobile,
   Avada calc() heading inflation, form inputs <16px (iOS focus-zoom),
   un-collapsed 2-col grids, and sub-44px tap targets.
   ============================================================================ */

/* (A) Tighten the 12 hardcoded `padding:0 40px` inline gutters to the spec's
   20px on phones (the hero's `padding:0 40px 72px` matches too — sides only). */
@media (max-width: 480px) {
  body [style*="padding:0 40px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* (B) Comfortable tap target on every button site-wide */
.stv-btn { min-height: 48px; }

/* ---- HERO ---- */
@media (max-width: 780px) {
  body .stv-hero h1,
  body .stv-hero .stv-display {
    font-size: 46px !important; line-height: 1.0 !important; letter-spacing: -0.02em !important;
  }
  .stv-hero-subhead { font-size: 16px; line-height: 1.5; }
  .stv-hero-ctas { flex-direction: column !important; gap: 10px !important; }
  .stv-hero-ctas .stv-btn { width: 100% !important; min-height: 48px !important; }
}
@media (max-width: 480px) {
  body .stv-hero h1,
  body .stv-hero .stv-display { font-size: 40px !important; }
}

/* ---- CREDIBILITY STRIP — tighter cells on the 2-col grid.
   Dividers come from the grid gap (see .stv-cred-grid), not per-cell borders. ---- */
@media (max-width: 480px) {
  .stv-cred-num { font-size: 30px; }
  .stv-cred-cell { padding: 26px 18px; }
}

/* ---- PHILOSOPHY (#method) — strip Avada's default blockquote box ---- */
#method blockquote {
  color: var(--ink) !important;
  background: transparent !important;
  border: none !important;
  border-left: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  font-style: normal !important;
}
#method blockquote em { color: var(--accent); font-style: italic; }

/* ---- PHILOSOPHY (#method) — collapse the inline 2-col grid ---- */
@media (max-width: 780px) {
  #method [style*="grid-template-columns:0.85fr"] {
    grid-template-columns: 1fr !important; gap: 28px !important;
  }
  /* keep the stacked photo from dominating the viewport */
  #method img[src*="val1"] { max-height: 420px; object-fit: cover; object-position: top; }
}

/* ---- PROGRAMS / coaching cards ---- */
@media (max-width: 480px) {
  /* Cards stack vertically here — give them more separation than the desktop
     3-up gap (16px read as cramped between full-width stacked cards). */
  .stv-cards-grid { gap: 28px; }
  .stv-card { padding: 28px 22px; }
  .stv-checklist li { font-size: 16px; line-height: 1.5; }
  .stv-card-desc { font-size: 16px; line-height: 1.6; }
  .stv-card .stv-btn { min-height: 48px; width: 100%; padding: 15px 22px; }
  body .stv-card .stv-h3 { font-size: 24px !important; line-height: 1.1 !important; }
}

/* ---- SPECIALTY SERVICES ---- */
@media (max-width: 780px) {
  body .stv-service-body h3.stv-h3 { font-size: 26px !important; line-height: 1.05 !important; }
  .stv-service-cta { min-height: 48px; }
  .stv-pack-item { min-height: 48px; }
}

/* ---- MEET VAL (#about) — tighten stacked image→story gap ---- */
@media (max-width: 860px) {
  #about .stv-two-col { gap: 26px; }
}

/* ---- TESTIMONIALS — tighten section + intro on mobile ---- */
@media (max-width: 760px) {
  .stv-testi-intro { font-size: 16px; }
  .vtest-grid { margin-top: 36px; }
  .wquote-head { margin: 52px 0 22px; }
  .wquote-lead { padding: 36px 6% 32px; }
}

/* ---- RESULTS (#results) — trim 108px padding, tighten grid ---- */
@media (max-width: 780px) {
  #results.stv-section-sm { padding-top: 60px !important; padding-bottom: 60px !important; }
  .stv-results-grid { gap: 10px !important; margin-top: 30px !important; }
}

/* ---- LEAD MAGNET — trim 108px padding, guard form tap targets ---- */
@media (max-width: 780px) {
  .stv-lead-magnet { padding: 64px 0 !important; }
  .stv-lead-form input[type="email"], .stv-lead-form .stv-btn { min-height: 48px; }
}
@media (max-width: 760px) {
  .stv-lead-grid { gap: 28px; }
}

/* ---- FAQ — larger tap rows + readable answers ---- */
@media (max-width: 480px) {
  .stv-faq-btn { font-size: 18px !important; line-height: 1.25; padding: 20px 2px; gap: 14px; }
  .stv-faq-btn > span:first-child { min-width: 0; overflow-wrap: anywhere; }
  .stv-faq-answer-inner { font-size: 16px; line-height: 1.65; padding-bottom: 20px; padding-right: 2px; }
}

/* ---- INSTAGRAM — 3-col grid, restore vertical rhythm ---- */
@media (max-width: 780px) {
  .stv-ig-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 26px; }
  .stv-ig-section { padding: 44px 0 8px; }
}

/* ---- CONTACT FORM — 16px inputs (no iOS zoom), stack names, 46px targets ---- */
@media (max-width: 780px) {
  .stv-contact-card input,
  .stv-contact-card select,
  .stv-contact-card textarea {
    font-size: 16px !important; min-height: 46px !important;
    padding: 13px 14px !important; box-sizing: border-box !important;
  }
  .stv-contact-card textarea { min-height: 100px !important; }
}
@media (max-width: 480px) {
  .stv-contact-card [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important; gap: 12px !important;
  }
  .stv-contact-card { padding: 24px 20px !important; }
}
@media (max-width: 760px) {
  /* Desktop rule (~line 2796) sets `.9fr 1.1fr !important`, which blocked the
     existing collapse — re-assert single column with !important on mobile. */
  .stv-contact-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
}

/* ---- FINAL CTA — defeat calc() inflation, full-width button ---- */
/* Mobile-scoped: unscoped these leaked onto desktop (headline capped at 42px,
   button stretched to 320px). Desktop falls back to normal .stv-h2 sizing.
   Keyed to the section's stable #362C4C background (same hook as line ~3503),
   NOT a numeric .fusion-builder-row-N — Avada renumbers rows on every re-save,
   which had already drifted the old `row-14` off this section (rules orphaned). */
@media (max-width: 780px) {
  body .fusion-fullwidth[style*="#362C4C"] .stv-h2 {
    font-size: clamp(30px, 7vw, 42px) !important; line-height: 1.05 !important; letter-spacing: -0.015em !important;
  }
  .fusion-fullwidth[style*="#362C4C"] .stv-btn-clay {
    min-height: 48px; width: 100%; max-width: 320px; margin-left: auto; margin-right: auto;
  }
}
@media (max-width: 480px) {
  body .fusion-fullwidth[style*="#362C4C"] .stv-h2 { font-size: 32px !important; }
  .fusion-fullwidth[style*="#362C4C"] .rv { padding: 64px 22px !important; }
}

/* ============================================================
   v2.11.3 — CHECKOUT mobile field sizing (iOS Safari auto-zoom fix).
   Checkout inputs were 15px (our desktop `.stv-co-left .input-text{font-size:15px
   !important}` also applied on mobile) → iOS zooms on focus. The other mobile
   field rule targets the homepage `.stv-contact-card`, not checkout. Force 16px
   here with matching specificity, last in file so it wins at ≤780px.
   ============================================================ */
@media (max-width: 780px) {
  body.woocommerce-checkout .stv-co-left .input-text,
  body.woocommerce-checkout .stv-co-left input[type="text"],
  body.woocommerce-checkout .stv-co-left input[type="email"],
  body.woocommerce-checkout .stv-co-left input[type="tel"],
  body.woocommerce-checkout .stv-co-left select,
  body.woocommerce-checkout .stv-co-left textarea {
    font-size: 16px !important;
    min-height: 46px !important;
  }
  body.woocommerce-checkout .stv-co-left textarea { min-height: 96px !important; }
  /* Place Order: full-width, comfortable tap target on phones */
  body.woocommerce-checkout .stv-place #place_order { width: 100% !important; min-height: 48px !important; }
}

/* ============================================================
   v2.12 — CONTACT FORM card refresh (spec: "Revise the Contact Form")
   Shared hook = .cform on the <form>. Used by the homepage #contact
   card (.stv-contact-card) and the standalone Contact page card.
   Placed LAST so that at equal specificity it wins over the generic
   `.stv-contact-card input/select/textarea` !important rules above.
   Goals: every row full-width, real uppercase label per field, name
   row a 50/50 grid that stacks ≤560px, brand-drawn select chevron.
   ============================================================ */
.cform .field { margin-bottom: 16px; }
.cform .field:last-child { margin-bottom: 0; }
.cform .field > label {
  display: block;
  font-family: var(--label);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
/* Name row — two equal columns, 14px gutter */
.cform-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.cform-row .field { margin-bottom: 0; }
/* Shared field styling (background-color longhand so the select keeps its
   chevron background-image — a `background` shorthand would clobber it) */
.cform input,
.cform select,
.cform textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 15px 16px !important;
  border-radius: 8px !important;
  background-color: var(--bone) !important;
  border: 1px solid transparent !important;
  font-family: var(--sans) !important;
  font-size: 15px;            /* not !important: lets the ≤780px 16px anti-zoom rule win on mobile */
  line-height: 1.4;
  color: var(--ink) !important;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
}
.cform input:focus,
.cform select:focus,
.cform textarea:focus {
  border-color: var(--accent) !important;
  background-color: #fff !important;
  outline: none !important;
  box-shadow: none !important;
}
.cform input::placeholder,
.cform textarea::placeholder { color: #9a948e !important; opacity: 1; }
.cform textarea {
  min-height: 130px;
  resize: vertical;
}
/* Curated select — native arrow hidden, brand chevron drawn via inline SVG */
.cform select {
  cursor: pointer;
  height: auto !important;          /* override Avada's bare select rule */
  line-height: 1.4 !important;      /* match inputs so the value isn't vertically clipped */
  padding-right: 44px !important;
  /* Percent-encoded data-URI (NOT `;utf8,<svg>`): the raw form is silently
     rejected by Chromium, which is why the chevron didn't paint. */
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='8'%20viewBox='0%200%2012%208'%3E%3Cpath%20d='M1%201l5%205%205-5'%20fill='none'%20stroke='%234E416D'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 18px center !important;
}
/* Disabled placeholder option reads muted until a real choice is made */
.cform select:invalid { color: #9a948e; }
/* Full-width submit + centered reply-time hint below it */
.cform .cform-submit { width: 100%; justify-content: center; }
.cform .cform-hint {
  text-align: center;
  font-size: 12.5px;
  color: var(--ink-soft);
  margin: 12px 0 0;
}
@media (max-width: 560px) {
  .cform-row { grid-template-columns: 1fr; gap: 0; }
  .cform-row .field { margin-bottom: 16px; }
}

/* ============================================================
   CART PAGE v3.0.0 — custom template (woocommerce/cart/cart.php)
   built to the Claude Design spec. All rules scoped to
   body.woocommerce-cart so they never touch the checkout, which
   shares some class names (.stv-sum-card, .stv-trust, etc.).
   ============================================================ */
body.woocommerce-cart .stv-ct-wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 40px; }

/* head */
body.woocommerce-cart .stv-ct-head { padding: 8px 0 0; }
body.woocommerce-cart .stv-ct-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-top: 18px; padding-bottom: 30px; border-bottom: 1px solid var(--line); }
body.woocommerce-cart .stv-ct-title h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(40px, 5.4vw, 68px); line-height: 1; letter-spacing: -0.015em; color: var(--ink); margin: 0; }
body.woocommerce-cart .stv-ct-title h1 em { color: var(--accent); font-style: normal; }
body.woocommerce-cart .stv-ct-count { display: inline-flex; align-items: center; gap: 9px; font-family: var(--label); font-size: 13px; font-weight: 600; color: var(--ink-soft); background: var(--paper); border: 1px solid var(--line); padding: 9px 15px; border-radius: 99px; }
body.woocommerce-cart .stv-ct-count b { color: var(--accent); font-weight: 700; }

/* stepper */
body.woocommerce-cart .stv-stepper { display: flex; align-items: center; gap: 18px; margin-top: 24px; font-family: var(--label); font-size: 12.5px; font-weight: 600; color: var(--ink-soft); letter-spacing: .04em; flex-wrap: wrap; }
body.woocommerce-cart .stv-stepper .sp { display: inline-flex; align-items: center; gap: 9px; }
body.woocommerce-cart .stv-stepper .dot { width: 22px; height: 22px; border-radius: 50%; background: var(--bone-2); color: var(--ink-soft); display: grid; place-items: center; font-weight: 700; font-size: 12px; }
body.woocommerce-cart .stv-stepper .sp.on .dot { background: var(--accent); color: #fff; }
body.woocommerce-cart .stv-stepper .sp.done .dot { background: var(--ink); color: #fff; }
body.woocommerce-cart .stv-stepper .sp.on, body.woocommerce-cart .stv-stepper .sp.done { color: var(--ink); }
body.woocommerce-cart .stv-stepper .bar { flex: 0 0 36px; height: 1px; background: var(--line); }

/* layout */
body.woocommerce-cart .stv-ct { padding: 38px 0 96px; }
body.woocommerce-cart .stv-ct-grid { display: grid; grid-template-columns: 1.5fr .75fr; gap: 42px; align-items: start; }
body.woocommerce-cart .stv-ct-left { min-width: 0; }

/* panels (cart-specific, distinct from checkout .stv-panel) */
body.woocommerce-cart .stv-cpanel { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
body.woocommerce-cart .stv-cpanel + .stv-cpanel { margin-top: 22px; }
body.woocommerce-cart .stv-cpanel-head { padding: 22px 28px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 0; }
body.woocommerce-cart .stv-cpanel-head h2 { font-family: var(--serif); font-weight: 500; font-size: 22px; line-height: 1; margin: 0; color: var(--ink); }
body.woocommerce-cart .stv-cpanel-head .meta { font-family: var(--label); font-size: 12.5px; color: var(--ink-soft); font-weight: 600; }

/* column header row */
body.woocommerce-cart .stv-col-head { display: grid; grid-template-columns: 88px 1fr auto auto auto; gap: 22px; padding: 14px 28px; border-bottom: 1px solid var(--line); background: var(--bone); font-family: var(--label); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--ink-soft); }
body.woocommerce-cart .stv-col-head .a { grid-column: 1 / 3; }
body.woocommerce-cart .stv-col-head .b, body.woocommerce-cart .stv-col-head .c { text-align: right; }
body.woocommerce-cart .stv-col-head .d { width: 34px; }

/* item rows */
body.woocommerce-cart .stv-ci-table { padding: 8px 28px 14px; }
body.woocommerce-cart .stv-ci-row { display: grid; grid-template-columns: 88px 1fr auto auto auto; gap: 22px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--line-soft); }
body.woocommerce-cart .stv-ci-row:last-child { border-bottom: none; }
body.woocommerce-cart .stv-ci-thumb { width: 88px; height: 88px; border-radius: 10px; position: relative; overflow: hidden; }
body.woocommerce-cart .stv-ci-thumb .stv-thumb-tint { position: absolute; inset: 0; }
body.woocommerce-cart .stv-ci-thumb .stv-thumb-glyph { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,.22); }
body.woocommerce-cart .stv-ci-thumb .stv-thumb-glyph svg { width: 48%; height: 48%; }
body.woocommerce-cart .stv-ci-thumb .stv-thumb-img { width: 100%; height: 100%; object-fit: cover; }
body.woocommerce-cart .stv-ci-info h3 { font-family: var(--serif); font-weight: 500; font-size: 20px; line-height: 1.15; letter-spacing: -0.005em; margin: 0; color: var(--ink); }
body.woocommerce-cart .stv-ci-info h3 a { color: inherit; text-decoration: none; }
body.woocommerce-cart .stv-ci-info h3 a:hover { color: var(--accent); }
body.woocommerce-cart .stv-ci-var { font-size: 13.5px; color: var(--ink-soft); margin-top: 5px; }
body.woocommerce-cart .stv-ci-edit { font-family: var(--label); font-size: 12px; font-weight: 700; color: var(--accent); text-decoration: none; letter-spacing: .04em; display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; }
body.woocommerce-cart .stv-ci-edit:hover { text-decoration: underline; }
body.woocommerce-cart .stv-ci-edit svg { width: 11px; height: 11px; }

/* qty stepper */
body.woocommerce-cart .stv-qty-step { display: inline-flex; align-items: center; border: 1.5px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--paper); }
body.woocommerce-cart .stv-qty-step button { width: 36px; height: 42px; border: none; background: none; cursor: pointer; font-size: 16px; color: var(--ink); transition: background .15s; line-height: 1; }
body.woocommerce-cart .stv-qty-step button:hover { background: var(--bone-2); }
body.woocommerce-cart .stv-qty-step .n { min-width: 38px; text-align: center; font-family: var(--label); font-weight: 700; font-size: 14.5px; }
body.woocommerce-cart .stv-qty-step .stv-qty-native { display: none; }

body.woocommerce-cart .stv-ci-sub { font-family: var(--serif); font-size: 22px; color: var(--ink); min-width: 74px; text-align: right; }
body.woocommerce-cart .stv-ci-sub .woocommerce-Price-amount { font-family: var(--serif); }
body.woocommerce-cart .stv-ci-x { appearance: none; background: none; border: none; cursor: pointer; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-soft); transition: background .15s, color .2s; padding: 0; }
body.woocommerce-cart .stv-ci-x:hover { background: rgba(62,61,58,.08); color: var(--accent); }
body.woocommerce-cart .stv-ci-x svg { width: 16px; height: 16px; }

/* table foot */
body.woocommerce-cart .stv-tbl-foot { padding: 18px 28px; background: var(--bone); border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
body.woocommerce-cart .stv-tbl-foot a, body.woocommerce-cart .stv-tbl-foot button { text-decoration: none; font-family: var(--label); font-size: 13px; font-weight: 600; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 7px; transition: color .2s; background: none; border: none; cursor: pointer; padding: 0; }
body.woocommerce-cart .stv-tbl-foot a:hover, body.woocommerce-cart .stv-tbl-foot button:hover { color: var(--accent); }
body.woocommerce-cart .stv-tbl-foot svg { width: 14px; height: 14px; }

/* empty */
body.woocommerce-cart .stv-ci-empty { padding: 64px 28px; text-align: center; color: var(--ink-soft); }
body.woocommerce-cart .stv-ci-empty svg { width: 54px; height: 54px; opacity: .35; margin: 0 auto 18px; display: block; }
body.woocommerce-cart .stv-ci-empty h3 { font-family: var(--serif); font-weight: 500; font-size: 26px; color: var(--ink); margin-bottom: 8px; }
body.woocommerce-cart .stv-ci-empty p { font-size: 15px; line-height: 1.55; max-width: 42ch; margin: 0 auto 22px; }
body.woocommerce-cart .stv-ct-empty .stv-cpanel { max-width: 720px; margin: 38px auto 0; }

/* coupon */
body.woocommerce-cart .stv-coupon-pn { padding: 22px 28px; }
body.woocommerce-cart .stv-coupon-row { display: flex; gap: 12px; align-items: stretch; flex-wrap: wrap; }
body.woocommerce-cart .stv-coupon-row label { flex: 1 1 240px; display: flex; flex-direction: column; gap: 6px; margin: 0; }
body.woocommerce-cart .stv-coupon-row label span { font-family: var(--label); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--ink-soft); }
body.woocommerce-cart .stv-coupon-row input { padding: 13px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--bone); font-family: var(--sans); font-size: 15px; color: var(--ink); transition: border-color .2s, background .2s, box-shadow .2s; width: 100%; }
body.woocommerce-cart .stv-coupon-row input:focus { outline: none; border-color: var(--accent); background: #fff; box-shadow: 0 0 0 3px rgba(78,65,109,.12); }
body.woocommerce-cart .stv-coupon-apply { align-self: flex-end; padding: 0 22px; height: 48px; border-radius: 8px; border: 1.5px solid var(--ink); background: none; font-family: var(--sans); font-weight: 700; font-size: 14px; cursor: pointer; color: var(--ink); transition: background .2s, color .2s; }
body.woocommerce-cart .stv-coupon-apply:hover { background: var(--ink); color: #fff; }

/* summary */
body.woocommerce-cart .stv-ct-summary { position: sticky; top: 96px; }
body.woocommerce-cart .stv-sum-card { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: 0 30px 60px -42px rgba(33,28,26,.45); }
body.woocommerce-cart .stv-sum-head { padding: 22px 26px; border-bottom: 1px solid var(--line); }
body.woocommerce-cart .stv-sum-head h2 { font-family: var(--serif); font-weight: 500; font-size: 22px; margin: 0; color: var(--ink); }
body.woocommerce-cart .stv-sum-body { padding: 22px 26px; }
body.woocommerce-cart .stv-sum-body .trow { display: flex; justify-content: space-between; font-size: 14.5px; color: var(--ink-soft); padding: 6px 0; }
body.woocommerce-cart .stv-sum-body .trow .woocommerce-Price-amount { color: inherit; }
body.woocommerce-cart .stv-sum-body .trow.disc { color: #3f8f5f; }
body.woocommerce-cart .stv-sum-body .trow.grand { margin-top: 8px; padding-top: 18px; border-top: 1px solid var(--line); align-items: baseline; }
body.woocommerce-cart .stv-sum-body .trow.grand .lbl { font-family: var(--label); font-weight: 700; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); }
body.woocommerce-cart .stv-sum-body .trow.grand .val { font-family: var(--serif); font-size: 36px; color: var(--accent); line-height: 1; }
body.woocommerce-cart .stv-sum-body .trow.grand .val .woocommerce-Price-amount { font-family: var(--serif); color: var(--accent); }
body.woocommerce-cart .stv-sum-foot { padding: 0 26px 26px; }
body.woocommerce-cart .stv-sum-foot .stv-checkout-btn { width: 100%; font-size: 16px; padding: 17px; }

/* trust (reuse global .stv-trust flex; add card chrome) */
body.woocommerce-cart .stv-trust { margin-top: 18px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; }
body.woocommerce-cart .stv-trust .ti { display: flex; align-items: center; gap: 11px; font-size: 13.5px; color: var(--ink); }
body.woocommerce-cart .stv-trust .ti svg { flex: none; width: 16px; height: 16px; color: var(--accent); }
body.woocommerce-cart .stv-trust .ti b { font-weight: 700; }

/* upsell */
body.woocommerce-cart .stv-upsell { margin-top: 88px; padding-top: 50px; border-top: 1px solid var(--line); }
body.woocommerce-cart .stv-upsell h2 { font-family: var(--serif); font-weight: 500; font-size: 30px; line-height: 1; letter-spacing: -0.01em; margin: 0; color: var(--ink); }
body.woocommerce-cart .stv-upsell h2 em { color: var(--accent); font-style: normal; }
body.woocommerce-cart .stv-up-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 26px; }
body.woocommerce-cart .stv-up { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; text-decoration: none; color: inherit; display: flex; gap: 14px; align-items: center; padding: 14px; transition: transform .2s, box-shadow .2s, border-color .2s; }
body.woocommerce-cart .stv-up:hover { transform: translateY(-2px); box-shadow: 0 22px 40px -30px rgba(33,28,26,.45); border-color: rgba(78,65,109,.4); }
body.woocommerce-cart .stv-up-thumb { flex: none; width: 62px; height: 62px; border-radius: 9px; position: relative; overflow: hidden; }
body.woocommerce-cart .stv-up-thumb .stv-thumb-tint { position: absolute; inset: 0; }
body.woocommerce-cart .stv-up-thumb .stv-thumb-glyph { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,.22); }
body.woocommerce-cart .stv-up-thumb .stv-thumb-glyph svg { width: 46%; height: 46%; }
body.woocommerce-cart .stv-up-thumb .stv-thumb-img { width: 100%; height: 100%; object-fit: cover; }
body.woocommerce-cart .stv-up-info { flex: 1; min-width: 0; }
body.woocommerce-cart .stv-up-info h4 { font-family: var(--serif); font-weight: 500; font-size: 17px; line-height: 1.2; letter-spacing: -0.005em; margin: 0; color: var(--ink); }
body.woocommerce-cart .stv-up-info .stv-up-price { font-family: var(--label); font-size: 12px; font-weight: 600; color: var(--accent); margin-top: 3px; }
body.woocommerce-cart .stv-up-info .stv-up-price .woocommerce-Price-amount { color: var(--accent); }

/* loading state during AJAX qty/remove */
body.woocommerce-cart .stv-ct-loading .stv-ci-table,
body.woocommerce-cart .stv-ct-loading .stv-sum-body { opacity: .55; transition: opacity .15s; pointer-events: none; }

/* mobile sticky checkout bar (mobile only) */
.stv-cart-sticky { display: none; }

@media (max-width: 1000px) {
  body.woocommerce-cart .stv-ct-grid { grid-template-columns: 1fr; gap: 30px; }
  body.woocommerce-cart .stv-ct-summary { position: static; }
  body.woocommerce-cart .stv-up-grid { grid-template-columns: 1fr 1fr; }
}
/* F9: mobile cart — stacked white item cards under an uppercase Sora label,
   summary/trust as separate blocks, upsell on a bone-2 band (spec: Cart Mobile .ci) */
@media (max-width: 760px) {
  body.woocommerce-cart .stv-ct-wrap { padding: 0 20px; }
  body.woocommerce-cart .stv-col-head { display: none; }
  /* items panel → unboxed section with an uppercase Sora heading (spec .items h2) */
  body.woocommerce-cart .stv-ct-left .stv-cpanel:not(#stv-coupon-panel) { background: none; border: none; border-radius: 0; overflow: visible; }
  body.woocommerce-cart .stv-ct-left .stv-cpanel:not(#stv-coupon-panel) .stv-cpanel-head { padding: 0 0 14px; border-bottom: none; }
  body.woocommerce-cart .stv-ct-left .stv-cpanel:not(#stv-coupon-panel) .stv-cpanel-head h2 { font-family: var(--label) !important; font-size: 11px !important; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); line-height: 1.3 !important; }
  body.woocommerce-cart .stv-ct-left .stv-cpanel:not(#stv-coupon-panel) .stv-cpanel-head .meta { display: none; }
  /* each item → individual white card (12px radius, 14px pad, 64px thumb) */
  body.woocommerce-cart .stv-ci-table { padding: 0; }
  body.woocommerce-cart .stv-ci-row,
  body.woocommerce-cart .stv-ci-row:last-child { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin-bottom: 12px; }
  body.woocommerce-cart .stv-ci-row { grid-template-columns: 64px 1fr 28px; grid-template-areas: "th info x" "qty qty sub"; column-gap: 14px; row-gap: 12px; align-items: start; }
  body.woocommerce-cart .stv-ci-row:last-child { margin-bottom: 0; }
  body.woocommerce-cart .stv-ci-thumb { grid-area: th; width: 64px; height: 64px; border-radius: 9px; }
  body.woocommerce-cart .stv-ci-info { grid-area: info; }
  body.woocommerce-cart .stv-ci-info h3 { font-size: 18px; line-height: 1.1; }
  body.woocommerce-cart .stv-ci-var { font-size: 12.5px; margin-top: 4px; line-height: 1.4; }
  body.woocommerce-cart .stv-ci-edit { font-size: 11px; }
  body.woocommerce-cart .stv-qty-step { grid-area: qty; justify-self: start; align-self: center; border-radius: 9px; }
  body.woocommerce-cart .stv-qty-step button { width: 32px; height: 38px; font-size: 15px; }
  body.woocommerce-cart .stv-qty-step .n { min-width: 32px; font-size: 14px; }
  body.woocommerce-cart .stv-ci-sub { grid-area: sub; justify-self: end; align-self: center; font-size: 20px; min-width: 0; text-align: right; }
  body.woocommerce-cart .stv-ci-x { grid-area: x; justify-self: end; width: 28px; height: 28px; margin: -4px -4px 0 0; }
  body.woocommerce-cart .stv-ci-x svg { width: 14px; height: 14px; }
  /* table foot → quiet centered links (spec .keep-shopping) */
  body.woocommerce-cart .stv-tbl-foot { background: none; border-top: none; padding: 14px 0 0; justify-content: center; gap: 28px; }
  body.woocommerce-cart .stv-tbl-foot a, body.woocommerce-cart .stv-tbl-foot button { font-size: 12.5px; letter-spacing: .04em; }
  /* coupon → compact card (spec .coupon-pn) */
  body.woocommerce-cart #stv-coupon-panel { border-radius: 12px; }
  body.woocommerce-cart #stv-coupon-panel .stv-cpanel-head { padding: 16px 18px 0; border-bottom: none; }
  body.woocommerce-cart #stv-coupon-panel .stv-cpanel-head h2 { font-family: var(--label) !important; font-size: 11px !important; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); line-height: 1.3 !important; }
  body.woocommerce-cart .stv-coupon-pn { padding: 10px 18px 16px; }
  /* summary → standalone card (spec .sum) */
  body.woocommerce-cart .stv-sum-card { border-radius: 12px; box-shadow: none; }
  body.woocommerce-cart .stv-sum-head { padding: 18px 20px 0; border-bottom: none; }
  body.woocommerce-cart .stv-sum-head h2 { font-size: 20px !important; }
  body.woocommerce-cart .stv-sum-body { padding: 12px 20px 18px; }
  body.woocommerce-cart .stv-sum-body .trow { font-size: 14px; padding: 5px 0; }
  body.woocommerce-cart .stv-sum-body .trow.grand { margin-top: 6px; padding-top: 14px; }
  body.woocommerce-cart .stv-sum-body .trow.grand .lbl { font-size: 13px; }
  body.woocommerce-cart .stv-sum-body .trow.grand .val { font-size: 30px; }
  body.woocommerce-cart .stv-sum-foot { padding: 0 20px 20px; }
  /* trust → bone-2 block, no border (spec .trust) */
  body.woocommerce-cart .stv-trust { margin-top: 14px; background: var(--bone-2); border: none; border-radius: 12px; padding: 14px 18px; gap: 9px; }
  body.woocommerce-cart .stv-trust .ti { font-size: 12.5px; gap: 10px; line-height: 1.35; }
  body.woocommerce-cart .stv-trust .ti svg { width: 15px; height: 15px; }
  /* upsell → full-width bone-2 band (spec .upsell) */
  body.woocommerce-cart .stv-upsell { margin: 30px -20px 0; padding: 24px 20px; background: var(--bone-2); border-top: none; }
  body.woocommerce-cart .stv-upsell h2 { font-size: 24px !important; line-height: 1.1 !important; }
  body.woocommerce-cart .stv-up-grid { gap: 10px; margin-top: 16px; grid-template-columns: 1fr; }
  body.woocommerce-cart .stv-up { border-radius: 10px; padding: 10px; gap: 12px; }
  body.woocommerce-cart .stv-up-thumb { width: 54px; height: 54px; border-radius: 8px; }
  body.woocommerce-cart .stv-ct { padding-bottom: 120px; }
  /* sticky checkout bar */
  .stv-cart-sticky { display: flex; align-items: center; justify-content: space-between; gap: 14px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: rgba(255,255,255,.96); backdrop-filter: blur(10px); border-top: 1px solid var(--line); padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); box-shadow: 0 -10px 30px -18px rgba(33,28,26,.4); }
  .stv-cart-sticky .stv-cs-total { display: flex; flex-direction: column; line-height: 1.1; }
  .stv-cart-sticky .stv-cs-label { font-family: var(--label); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); font-weight: 700; }
  .stv-cart-sticky .stv-cs-amt { font-family: var(--serif); font-size: 22px; color: var(--accent); }
  .stv-cart-sticky .stv-cs-amt .woocommerce-Price-amount { color: var(--accent); font-family: var(--serif); }
  .stv-cart-sticky .stv-btn { flex: 0 0 auto; padding: 14px 22px; }
}

/* ============================================================
   SHARED PRODUCT MEDIA FALLBACK (gradient tint + glyph)
   Used on shop cards, cart/upsell thumbs and the product gallery
   wherever a real WooCommerce image isn't set yet.
   ============================================================ */
.stv-pmedia-tint { position: absolute; inset: 0; }
.stv-pmedia-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stv-pmedia-label { position: absolute; left: 18px; top: 18px; font-family: var(--label); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: #fff; padding: 7px 11px; border-radius: 99px; background: rgba(255,255,255,.18); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.28); z-index: 1; }
.stv-pmedia-glyph { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,.18); }
.stv-pmedia-glyph svg { width: 42%; height: 42%; }

/* ============================================================
   SHOP ARCHIVE v3.0.0 — custom template (woocommerce/archive-product.php)
   Scoped to the shop + product-category archives.
   ============================================================ */
body.woocommerce-shop .fusion-page-title-bar,
body.tax-product_cat .fusion-page-title-bar,
body.woocommerce-shop .woocommerce-breadcrumb,
body.tax-product_cat .woocommerce-breadcrumb,
body.woocommerce-shop .woocommerce-products-header,
body.tax-product_cat .woocommerce-products-header { display: none !important; }

body.woocommerce-shop #main,
body.tax-product_cat #main { background: var(--bone); padding-top: 64px !important; padding-bottom: 0 !important; }
body.woocommerce-shop #content,
body.tax-product_cat #content { width: 100% !important; float: none !important; margin: 0 !important; }
body.woocommerce-shop .fusion-sidebar,
body.tax-product_cat .fusion-sidebar,
body.woocommerce-shop #sidebar,
body.tax-product_cat #sidebar { display: none !important; }

.stv-shop-wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 40px; }

/* head */
.stv-sh-head { padding: 6px 0 0; }
.stv-sh-title { display: grid; grid-template-columns: 1.3fr .9fr; gap: 48px; align-items: end; margin-top: 18px; padding-bottom: 34px; border-bottom: 1px solid var(--line); }
.stv-sh-title h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(40px, 5.4vw, 68px); line-height: 1; letter-spacing: -0.015em; margin: 0; color: var(--ink); }
.stv-sh-title h1 em { color: var(--accent); font-style: normal; }
.stv-sh-title .lede { font-size: 16px; line-height: 1.65; color: var(--ink-soft); max-width: 46ch; padding-bottom: 10px; }

/* toolbar */
.stv-toolbar { margin-top: 28px; display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.stv-filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.stv-filt { font-family: var(--label); font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--ink); background: var(--paper); border: 1px solid var(--line); padding: 10px 16px; border-radius: 99px; cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
.stv-filt:hover { border-color: var(--accent); color: var(--accent); }
.stv-filt.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.stv-sort { display: inline-flex; align-items: center; gap: 9px; font-family: var(--label); font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.stv-sort select { font-family: var(--label); font-size: 13px; font-weight: 600; color: var(--ink); background: var(--paper); border: 1px solid var(--line); padding: 10px 36px 10px 14px; border-radius: 99px; cursor: pointer; appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233E3D3A' stroke-width='2'><path d='m6 9 6 6 6-6'/></svg>"); background-repeat: no-repeat; background-position: right 12px center; background-size: 14px; }
.stv-sort select:focus { outline: none; border-color: var(--accent); }

/* grid */
.stv-shop { padding-bottom: 96px; }
.stv-prods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 32px; }
.stv-prod { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; transition: transform .25s, box-shadow .25s, border-color .25s; position: relative; text-decoration: none; color: inherit; }
.stv-prod:hover { transform: translateY(-3px); box-shadow: 0 30px 50px -36px rgba(33,28,26,.5); border-color: rgba(78,65,109,.4); }
.stv-prod-media { aspect-ratio: 4/3; position: relative; overflow: hidden; }
.stv-prod-body { padding: 24px 24px 26px; display: flex; flex-direction: column; flex: 1; gap: 14px; }
.stv-prod-cat { font-family: var(--label); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--ink-soft); }
.stv-prod-name { font-family: var(--serif); font-weight: 500; font-size: 24px; line-height: 1.1; letter-spacing: -0.005em; color: var(--ink); margin: 0; }
.stv-prod-desc { font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); margin: 0; }
.stv-prod-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line-soft); }
.stv-prod-price { font-family: var(--serif); font-size: 24px; color: var(--accent); line-height: 1; }
.stv-prod-price .from { font-family: var(--label); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); display: block; margin-bottom: 2px; }
.stv-prod-cta { font-family: var(--sans); font-weight: 700; font-size: 13.5px; color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border-radius: 8px; border: 1.5px solid var(--ink); transition: background .2s, color .2s, transform .15s; white-space: nowrap; }
.stv-prod:hover .stv-prod-cta { background: var(--ink); color: #fff; }
.stv-prod-cta .arr { transition: transform .2s; }
.stv-prod:hover .stv-prod-cta .arr { transform: translateX(3px); }

/* badges */
.stv-badge { position: absolute; right: 16px; top: 16px; font-family: var(--label); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: #fff; background: var(--clay); padding: 6px 11px; border-radius: 99px; z-index: 2; }
.stv-badge.ink { background: var(--ink); }
.stv-badge + .stv-badge { top: 48px; }

/* bottom strip */
.stv-shop-strip { margin-top: 80px; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 34px 40px; display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.stv-shop-strip .stv-strip-copy { flex: 1; min-width: 260px; }
.stv-shop-strip h3 { font-family: var(--serif); font-weight: 500; font-size: 26px; line-height: 1.2; letter-spacing: -0.01em; margin: 0; color: var(--ink); }
.stv-shop-strip h3 em { color: var(--accent); font-style: normal; }
.stv-shop-strip p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.5; margin: 4px 0 0; max-width: 48ch; }
.stv-shop-none { padding: 40px 0; color: var(--ink-soft); }

@media (max-width: 1040px) {
  .stv-prods { grid-template-columns: repeat(2, 1fr); }
  .stv-sh-title { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 640px) {
  .stv-prods { grid-template-columns: 1fr 1fr; gap: 16px; }
  .stv-shop-wrap { padding: 0 20px; }
  .stv-prod-body { padding: 16px 16px 18px; gap: 10px; }
  .stv-prod-name { font-size: 18px; }
  .stv-prod-desc { display: none; }
  .stv-prod-foot { padding-top: 14px; flex-wrap: wrap; gap: 10px; }
  .stv-shop-strip { padding: 24px; }
  /* mobile filter chips: horizontal scroll rail with right fade + 44px sort button
     (F10 — spec: Shop Mobile .toolbar/.sort-btn) */
  .stv-toolbar { flex-wrap: nowrap; align-items: center; gap: 10px; }
  .stv-filters { flex: 1; min-width: 0; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); padding-bottom: 2px; }
  .stv-filters::-webkit-scrollbar { display: none; }
  .stv-filt { flex: 0 0 auto; }
  .stv-sort-btn { display: grid; }
  /* select stays in the DOM (sorting logic lives on its change event) but is
     visually hidden — the bottom sheet proxies back to it */
  .stv-sort { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}

/* F10: sort bottom sheet (spec: Shop Mobile .sheet — markup built client-side
   in archive-product.php; opens only via the <=640px sort button) */
.stv-sort-btn { display: none; flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; background: var(--paper); border: 1px solid var(--line); place-items: center; color: var(--ink); cursor: pointer; padding: 0; }
.stv-sort-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.stv-sheet-scrim { position: fixed; inset: 0; background: rgba(33,28,26,.4); opacity: 0; pointer-events: none; transition: opacity .25s; z-index: 80; }
.stv-sort-sheet { position: fixed; left: 0; right: 0; bottom: 0; background: var(--paper); border-radius: 18px 18px 0 0; z-index: 81; transform: translateY(100%); transition: transform .3s cubic-bezier(.2,.7,.2,1); padding: 18px 22px calc(28px + env(safe-area-inset-bottom)); box-shadow: 0 -20px 50px -20px rgba(33,28,26,.4); }
body.stv-sheet-open .stv-sort-sheet { transform: none; }
body.stv-sheet-open .stv-sheet-scrim { opacity: 1; pointer-events: auto; }
body.stv-sheet-open { overflow: hidden; }
.stv-sort-sheet .grab { width: 42px; height: 4px; background: rgba(62,61,58,.18); border-radius: 99px; margin: 2px auto 18px; }
body .stv-sort-sheet h4 { font-family: var(--serif); font-weight: 500; font-size: 22px !important; line-height: 1.2 !important; margin: 0 0 10px; color: var(--ink); }
.stv-sort-sheet .opt { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-top: 1px solid var(--line-soft); font-size: 15px; font-weight: 600; color: var(--ink); cursor: pointer; }
.stv-sort-sheet .opt:first-of-type { border-top: none; }
.stv-sort-sheet .opt.sel { color: var(--accent); }
.stv-sort-sheet .opt .ck { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; }
.stv-sort-sheet .opt.sel .ck { border-color: var(--accent); }
.stv-sort-sheet .opt.sel .ck::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }

/* ============================================================
   SINGLE PRODUCT v3.0.0 — custom template (woocommerce/single-product.php)
   Scoped to body.single-product.
   ============================================================ */
body.single-product .fusion-page-title-bar,
body.single-product .woocommerce-breadcrumb,
body.single-product .related.products,
body.single-product .up-sells { display: none !important; }
body.single-product #main { background: var(--bone); padding-top: 96px !important; padding-bottom: 0 !important; }
/* When the WP admin bar is showing, the 74px fixed header sits 32px lower, so
   add that 32px back or the breadcrumb's top clips under the header. */
body.admin-bar.single-product #main { padding-top: 128px !important; }
body.single-product #content { width: 100% !important; float: none !important; margin: 0 !important; }
body.single-product .fusion-sidebar, body.single-product #sidebar { display: none !important; }

.stv-pd-wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 40px; }
.stv-pd-head { padding-top: 0; }

/* layout */
.stv-pd { padding-bottom: 90px; }
.stv-pd-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 60px; align-items: start; margin-top: 28px; }

/* gallery */
.stv-gallery { position: sticky; top: 96px; }
/* Main gallery image: 2:3 portrait — matches the 2:3 competition photos exactly
   (zero crop) and keeps the 4:5 featured photo full head-to-feet (only the sides
   trim). 9:16 was too tall: it over-cropped the sides and left dead headroom.
   Verified on a real iPhone — full body, no head/feet clipping on any catalog
   photo. object-fit:cover keeps any non-portrait image graceful. */
.stv-hero-img { position: relative; aspect-ratio: 2/3; border-radius: 14px; overflow: hidden; background: var(--bone-2); }
/* Desktop: cap the stage to the viewport (a 2:3 frame at column width was ~870px
   tall — taller than a laptop screen) and letterbox with object-fit:contain so no
   body part is ever cropped regardless of source ratio (4:5 / 2:3 photos, 9:16
   video). The bone-2 stage shows as slim side mats on narrower media. Mobile
   (≤960px) keeps the iPhone-verified full-bleed 2:3 cover behavior. */
@media (min-width: 961px) {
  .stv-hero-img { aspect-ratio: 4/5; height: min(620px, calc(100vh - 170px)); width: auto; max-width: 100%; margin-inline: auto; }
  .stv-hero-slide .stv-pmedia-img { object-fit: contain; }
}
.stv-hero-img .stv-pmedia-glyph { color: rgba(255,255,255,.16); pointer-events: none; }
.stv-hero-img .stv-pmedia-glyph svg { width: 36%; height: 36%; }
.stv-hero-img .stv-pmedia-label { pointer-events: none; }
/* slide track: desktop stacks slides and shows the .on one (thumb click-swap) */
.stv-hero-track { position: absolute; inset: 0; }
.stv-hero-slide { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.stv-hero-slide.on { opacity: 1; pointer-events: auto; }
.stv-hero-slide .stv-pmedia-img { width: 100%; height: 100%; }
.stv-gal-dots { display: none; }
.stv-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 12px; }
/* Portrait (2:3) gallery thumbs — matches the full-body competition photos so the
   whole figure shows (head + feet); object-fit:cover crops only the sides on any
   wider image. (Was 9:16, which over-cropped and rendered too tall/skinny.) */
.stv-thumb { aspect-ratio: 2/3; border-radius: 9px; overflow: hidden; cursor: pointer; border: 2px solid transparent; transition: border-color .2s, transform .15s; position: relative; padding: 0; background: var(--bone-2); }
.stv-thumb:hover { transform: translateY(-1px); }
.stv-thumb.sel { border-color: var(--accent); }
.stv-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stv-thumb .stv-pmedia-tint { position: absolute; inset: 0; }
.stv-thumb-video .stv-thumb-play { position: absolute; inset: 0; margin: auto; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: rgba(0,0,0,.5); color: #fff; pointer-events: none; }
.stv-thumb-video .stv-thumb-play svg { width: 14px; height: 14px; margin-left: 1px; }
/* Desktop: thumbs shrink to sit under the capped stage — strip width = the
   stage's rendered width (stage height × 4/5), thumbs take the stage's 4:5
   proportion, and object-fit:contain letterboxes 2:3 photos on bone-2 instead
   of cropping heads/feet. Must live AFTER the base .stv-thumb rules (equal
   specificity — the later rule wins). Mobile keeps the 2:3 cover thumbs. */
@media (min-width: 961px) {
  .stv-thumbs { max-width: calc(min(620px, 100vh - 170px) * 4 / 5); margin-inline: auto; }
  .stv-thumb { aspect-ratio: 4/5; }
  .stv-thumb img { object-fit: contain; }
}
.stv-hero-video video { background: #000; object-fit: contain; }

/* details */
.stv-pcat { font-family: var(--label); font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: var(--accent); margin-bottom: 14px; display: inline-flex; align-items: center; gap: 11px; }
.stv-pcat::before { content: ""; width: 24px; height: 2px; background: currentColor; display: inline-block; }
.stv-pname { font-family: var(--serif); font-weight: 500; font-size: clamp(34px, 4.4vw, 52px); line-height: 1.02; letter-spacing: -0.015em; margin: 0; color: var(--ink); }
.stv-pname em { color: var(--accent); font-style: normal; }
.stv-prating { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-family: var(--label); font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.stv-prating .stv-stars { color: #c69a4f; display: inline-flex; gap: 1px; }
.stv-prating .stv-stars svg { width: 15px; height: 15px; }
.stv-pblurb { margin-top: 18px; font-size: 16px; line-height: 1.65; color: var(--ink-soft); }
.stv-pblurb p { margin: 0 0 10px; }
.stv-pblurb p:last-child { margin-bottom: 0; }

.stv-pprice { margin-top: 24px; display: flex; align-items: baseline; gap: 14px; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stv-pprice .from { font-family: var(--label); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.stv-pprice .amt { font-family: var(--serif); font-size: 46px; color: var(--accent); line-height: 1; letter-spacing: -0.01em; }
.stv-pprice .per { font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--ink-soft); margin-left: -4px; }

.stv-picklbl { font-family: var(--label); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--ink-soft); margin: 22px 0 12px; }

/* variant packs */
.stv-packs { display: flex; flex-direction: column; gap: 10px; }
.stv-pack { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 18px; background: var(--paper); border: 1.5px solid var(--line); border-radius: 10px; cursor: pointer; transition: border-color .2s, box-shadow .2s; }
.stv-pack:hover { border-color: rgba(78,65,109,.45); }
.stv-pack.sel { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(78,65,109,.10); }
.stv-pk-left { display: flex; align-items: center; gap: 13px; }
.stv-pk-radio { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; transition: border-color .2s; }
.stv-pack.sel .stv-pk-radio { border-color: var(--accent); }
.stv-pk-radio::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); transform: scale(0); transition: transform .2s; }
.stv-pack.sel .stv-pk-radio::after { transform: scale(1); }
.stv-pk-name { font-weight: 700; font-size: 15.5px; line-height: 1.25; color: var(--ink); }
.stv-pk-name small { display: block; font-family: var(--sans); font-weight: 500; font-size: 13px; color: var(--ink-soft); margin-top: 2px; }
.stv-pk-name .stv-pk-best { display: inline-block; background: var(--clay); color: #fff; font-family: var(--label); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 3px 7px; border-radius: 99px; margin-left: 8px; vertical-align: middle; }
.stv-pk-price { font-family: var(--serif); font-size: 22px; color: var(--ink); }

/* qty + add */
.stv-qty-row { margin-top: 22px; display: flex; align-items: stretch; gap: 12px; }
body.single-product .stv-qty-step, .stv-pd-sticky .stv-qty-step { display: inline-flex; align-items: center; border: 1.5px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--paper); }
body.single-product .stv-qty-step button, .stv-pd-sticky .stv-qty-step button { width: 44px; height: 54px; border: none; background: none; cursor: pointer; font-size: 18px; color: var(--ink); transition: background .15s; line-height: 1; }
body.single-product .stv-qty-step button:hover, .stv-pd-sticky .stv-qty-step button:hover { background: var(--bone-2); }
body.single-product .stv-qty-step .n, .stv-pd-sticky .stv-qty-step .n { min-width: 44px; text-align: center; font-family: var(--label); font-weight: 700; font-size: 16px; }
.stv-qty-row .stv-add { flex: 1; font-size: 16px; padding: 0 22px; height: 54px; }
.stv-qty-row .stv-add[disabled] { opacity: .5; cursor: not-allowed; }

/* trust */
body.single-product .stv-trust { margin-top: 24px; display: flex; flex-direction: column; gap: 11px; padding: 18px 20px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; }
body.single-product .stv-trust .ti { display: flex; align-items: center; gap: 11px; font-size: 13.5px; color: var(--ink); }
body.single-product .stv-trust .ti svg { flex: none; width: 17px; height: 17px; color: var(--accent); }
body.single-product .stv-trust .ti b { font-weight: 700; }

/* meta */
.stv-pmeta { margin-top: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--ink-soft); }
.stv-pmeta b { font-family: var(--label); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); font-weight: 700; display: inline-block; min-width: 88px; }
.stv-pmeta a { color: var(--accent); text-decoration: none; font-weight: 600; }

/* tabs / accordions */
.stv-pd-info { margin-top: 80px; border-top: 1px solid var(--line); padding-top: 54px; }
.stv-tabs { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: 34px; }
.stv-tab { appearance: none; background: none; border: none; cursor: pointer; font-family: var(--label); font-size: 13.5px; font-weight: 700; letter-spacing: .04em; color: var(--ink-soft); padding: 14px 22px; position: relative; transition: color .2s; }
.stv-tab:hover { color: var(--ink); }
.stv-tab.on { color: var(--ink); }
.stv-tab.on::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 2px; background: var(--accent); }
.stv-acc-btn { appearance: none; background: none; border: none; cursor: pointer; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px; font-family: var(--sans); font-weight: 700; font-size: 16px; color: var(--ink); text-align: left; padding: 18px 0; }
.stv-acc-btn .stv-ic { font-size: 22px; color: var(--accent); line-height: 1; transition: transform .2s; }
.stv-tabpanel.open > .stv-acc-btn .stv-ic { transform: rotate(45deg); }

.stv-desc-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 60px; }
.stv-desc-prose h3 { font-family: var(--serif); font-weight: 500; font-size: 28px; line-height: 1.15; margin-bottom: 14px; letter-spacing: -0.01em; color: var(--ink); }
.stv-desc-prose h3 em { color: var(--accent); font-style: normal; }
.stv-desc-prose p { font-size: 15.5px; line-height: 1.7; color: var(--ink); margin-bottom: 18px; }
.stv-desc-prose p:last-child { margin-bottom: 0; }
.stv-desc-prose ul { list-style: none; display: grid; gap: 11px; margin: 18px 0 6px; padding: 0; }
.stv-desc-prose li { display: flex; gap: 11px; align-items: flex-start; font-size: 15px; line-height: 1.55; }
.stv-desc-side { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 26px 28px; align-self: start; }
.stv-desc-side h4 { font-family: var(--label); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--ink-soft); margin-bottom: 14px; }
.stv-incl { list-style: none; display: grid; gap: 11px; margin: 0; padding: 0; }
.stv-incl li { display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px; line-height: 1.55; color: var(--ink); }
.stv-incl li .tick { flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--clay-soft); color: var(--accent); display: grid; place-items: center; font-weight: 800; font-size: 12px; margin-top: 1px; }
.stv-tl-step { display: flex; gap: 13px; padding: 14px 0; border-top: 1px solid var(--line-soft); }
.stv-tl-step:first-of-type { border-top: none; padding-top: 0; }
.stv-tl-step .num { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: #fff; font-family: var(--label); font-weight: 700; font-size: 13px; display: grid; place-items: center; }
.stv-tl-step .ttl { font-weight: 700; font-size: 14.5px; line-height: 1.3; color: var(--ink); }
.stv-tl-step .sb { font-size: 13.5px; color: var(--ink-soft); margin-top: 2px; line-height: 1.5; }

.stv-faqs { max-width: 760px; }
.stv-faq { padding: 18px 0; border-bottom: 1px solid var(--line); }
.stv-faq:last-of-type { border-bottom: none; }
.stv-faq > button { appearance: none; background: none; border: none; cursor: pointer; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px; font-family: var(--sans); font-weight: 700; font-size: 16px; color: var(--ink); text-align: left; padding: 0; }
.stv-faq .stv-ic { font-size: 20px; color: var(--accent); transition: transform .2s; }
.stv-faq.open .stv-ic { transform: rotate(45deg); }
/* Accordion/FAQ toggle icon: keep it a clean glyph (no Avada button/box bleed) */
.stv-ic { background: none !important; border: none !important; box-shadow: none !important; width: auto !important; height: auto !important; min-width: 0 !important; min-height: 0 !important; padding: 0 !important; border-radius: 0 !important; display: inline-block; }
.stv-faq .ans { display: none; padding-top: 14px; font-size: 15px; line-height: 1.6; color: var(--ink-soft); max-width: 64ch; }
.stv-faq.open .ans { display: block; }
.stv-faq .ans p { margin: 0; }

/* related */
.stv-related { margin-top: 84px; }
.stv-related h2 { font-family: var(--serif); font-weight: 500; font-size: 32px; line-height: 1; letter-spacing: -0.01em; margin: 0; color: var(--ink); }
.stv-related h2 em { color: var(--accent); font-style: normal; }
.stv-rel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 30px; }
.stv-rel { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; text-decoration: none; color: inherit; transition: transform .25s, box-shadow .25s, border-color .25s; display: flex; flex-direction: column; }
.stv-rel:hover { transform: translateY(-3px); box-shadow: 0 26px 46px -34px rgba(33,28,26,.5); border-color: rgba(78,65,109,.4); }
.stv-rel-media { aspect-ratio: 4/3; position: relative; }
.stv-rel-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 6px; }
.stv-rel-cat { font-family: var(--label); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--ink-soft); }
.stv-rel-name { font-family: var(--serif); font-weight: 500; font-size: 20px; line-height: 1.15; letter-spacing: -0.005em; color: var(--ink); }
.stv-rel-price { font-family: var(--label); font-size: 13px; font-weight: 600; color: var(--accent); margin-top: 4px; }
.stv-rel-price .from { color: var(--ink-soft); font-weight: 600; }

/* sticky add bar (mobile only) */
.stv-pd-sticky { display: none; }

/* desktop tabs vs mobile accordions */
@media (min-width: 961px) {
  .stv-acc-btn { display: none; }
  .stv-tabpanel { display: none; }
  .stv-tabpanel.on { display: block; }
}
@media (max-width: 960px) {
  .stv-pd-grid { grid-template-columns: 1fr; gap: 36px; }
  .stv-gallery { position: static; }
  .stv-desc-grid { grid-template-columns: 1fr; gap: 30px; }
  .stv-rel-grid { grid-template-columns: 1fr 1fr; }
  .stv-tabs { display: none; }
  .stv-tabpanel { display: block; border-top: 1px solid var(--line); }
  .stv-tabpanel:last-of-type { border-bottom: 1px solid var(--line); }
  .stv-pd-info { padding-top: 30px; margin-top: 50px; }
  .stv-tab-inner { display: none; padding-bottom: 22px; }
  .stv-tabpanel.open .stv-tab-inner { display: block; }
  .stv-acc-btn { display: flex; }
  /* sticky add bar */
  body.single-product { padding-bottom: 86px; }
  .stv-pd-sticky { display: flex; align-items: center; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; background: rgba(255,255,255,.96); backdrop-filter: saturate(150%) blur(14px); border-top: 1px solid var(--line); padding: 10px 20px calc(10px + env(safe-area-inset-bottom)); }
  .stv-pd-sticky .stv-add { flex: 1; height: 48px; padding: 0 18px; font-size: 15px; }
  .stv-pd-sticky .stv-qty-step button { height: 48px; width: 36px; }
  /* hide the inline (main) add row on mobile — the sticky bar takes over */
  .stv-qty-row { display: none; }
}
/* F8: mobile gallery — full-bleed swipeable hero + dots + 64px thumb strip
   (spec: Product Mobile .hero / .gal-dots / .thumbs) */
@media (max-width: 960px) {
  .stv-hero-img { aspect-ratio: 2/3; border-radius: 0; margin: 0 -40px; }
  .stv-hero-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -ms-overflow-style: none; scrollbar-width: none; }
  .stv-hero-track::-webkit-scrollbar { display: none; }
  .stv-hero-slide { position: relative; inset: auto; flex: 0 0 100%; width: 100%; opacity: 1; pointer-events: auto; scroll-snap-align: start; scroll-snap-stop: always; }
  .stv-gal-dots { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; gap: 6px; justify-content: center; z-index: 2; pointer-events: none; }
  .stv-gal-dots span { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.5); transition: background .2s, width .2s; }
  .stv-gal-dots span.on { background: #fff; width: 22px; border-radius: 99px; }
  .stv-thumbs { display: flex; gap: 8px; margin-top: 14px; overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; }
  .stv-thumbs::-webkit-scrollbar { display: none; }
  .stv-thumb { flex: 0 0 64px; border-radius: 8px; }
  .stv-thumb:hover { transform: none; }
}
@media (max-width: 560px) {
  .stv-pd-wrap { padding: 0 20px; }
  .stv-hero-img { margin: 0 -20px; }
  .stv-rel-grid { grid-template-columns: 1fr; }
  .stv-pprice .amt { font-size: 38px; }
}

/* ============================================================
   EXPRESS CHECKOUT SLOT (Product + Cart) — real gateway buttons
   in the design's 2-up shell; the wrap is [hidden] until a button renders.
   ============================================================ */
.stv-express-wrap[hidden] { display: none !important; }
.stv-express-wrap { margin-top: 16px; }
.stv-ex-or { display: flex; align-items: center; gap: 12px; margin: 8px 0 12px; color: var(--ink-soft); font-family: var(--label); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.stv-ex-or::before, .stv-ex-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.stv-express-slot { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stv-express-slot > * { min-width: 0; }
/* Let gateway buttons fill their grid cell + match the design's button height. */
.stv-express-slot .button,
.stv-express-slot a.button,
.stv-express-slot .paypal-button,
.stv-express-slot .wc-stripe-product-checkout-container,
.stv-express-slot .wc-stripe-express-checkout-element,
.stv-express-slot iframe { width: 100% !important; min-height: 48px; }
/* single full-width fallback when only one gateway shows */
.stv-express-slot:has(> *:only-child) { grid-template-columns: 1fr; }
@media (max-width: 560px) { .stv-express-slot { grid-template-columns: 1fr; } }

/* ============================================================
   WOO PAGES — title sizing + mobile polish (must come last)
   ------------------------------------------------------------
   Avada's responsive typography rewrites custom h1-h6 font-size via
   calc()!important, shrinking our hero titles on small screens. Re-assert
   the design sizes with a body-scoped !important so they win on every width.
   ============================================================ */
body .stv-sh-title h1,
body .stv-ct-title h1 { font-size: clamp(40px, 12vw, 68px) !important; line-height: 1 !important; }
body .stv-pname { font-size: clamp(34px, 10vw, 52px) !important; line-height: 1.02 !important; }
body .stv-related h2,
body .stv-upsell h2 { font-size: clamp(26px, 7vw, 32px) !important; line-height: 1.05 !important; }
body .stv-shop-strip h3 { font-size: clamp(22px, 6vw, 26px) !important; }
body .stv-cpanel-head h2,
body .stv-sum-head h2 { font-size: 22px !important; line-height: 1 !important; }

/* Shop card CTA: full label on desktop, short "View" on mobile */
.stv-cta-short { display: none; }

/* Safety net: neutralize any Avada cart content-box wrapper + duplicate heading */
body.woocommerce-cart .woocommerce-content-box.full-width { padding: 0 !important; margin: 0 !important; background: none !important; border: none !important; box-shadow: none !important; width: auto !important; }
body.woocommerce-cart .woocommerce-content-box.full-width > h2 { display: none !important; }

/* Mobile shop cards → match the mobile design (square-ish media, plain "View" CTA) */
@media (max-width: 640px) {
  .stv-prods { grid-template-columns: 1fr 1fr; gap: 14px; }
  .stv-prod-media { aspect-ratio: 1 / 1.05; }
  .stv-prod-body { padding: 14px 14px 16px; gap: 8px; }
  .stv-prod-name { font-size: 18px !important; line-height: 1.1 !important; }
  .stv-prod-foot { align-items: baseline; padding-top: 10px; gap: 6px; }
  .stv-prod-price { font-size: 18px; }
  .stv-prod-price .from { font-size: 9px; }
  .stv-prod-cta { border: none !important; padding: 0 !important; background: none !important; color: var(--ink) !important; font-family: var(--label); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; transform: none !important; }
  .stv-prod:hover .stv-prod-cta { background: none !important; color: var(--ink) !important; }
  .stv-prod-cta .arr { font-size: 12px; }
  .stv-cta-full { display: none; }
  .stv-cta-short { display: inline; }
  .stv-pmedia-label { left: 10px; top: 10px; font-size: 9px; padding: 5px 8px; }
}

/* ============================================================
   CONTACT v4.1 — shared contact system (spec: "Fix the Contact Page")
   The channel rail + form card are now rendered by the
   [stv_contact_channels] / [stv_contact_form] shortcodes (single
   source of truth) so the /contact/ PAGE and the homepage #contact
   SECTION always mirror. Therefore the COMPONENT styles below are
   un-scoped (work anywhere); only the page CHROME (.ctc-wrap,
   breadcrumb, FAQ strip) stays under .stv-contact-page.
   Form input rules use !important to beat Avada's global form
   styling; heading font-sizes use !important to beat Avada's
   responsive-typography calc() inflation. ONE breakpoint @860px.
   ============================================================ */
.stv-contact-page { background: var(--bone); color: var(--ink); font-family: var(--sans); }
.stv-contact-page *, .stv-contact-page *::before,
.ctc-form *, .channels-rail * { box-sizing: border-box; }
.stv-contact-page .ctc-wrap { max-width: var(--maxw); margin: 0 auto; padding: 56px 64px 70px; }

/* homepage embed wrapper (mirrors the page's .ctc-wrap width/gutters) */
.stv-contact-section .stv-contact-embed { max-width: var(--maxw); margin: 0 auto; padding: 0 40px; }

/* component eyebrow — spec sizing (11.5px / .22em / 24px dash) */
.ctc-hero .eyebrow, .ctc-form .form-head .eyebrow { font-family: var(--label); font-weight: 700; font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: 11px; margin: 0; }
.ctc-hero .eyebrow::before, .ctc-form .form-head .eyebrow::before { content: ""; width: 24px; height: 2px; background: currentColor; display: inline-block; opacity: .95; flex: none; }

/* A. breadcrumb (page only) */
.stv-contact-page .crumb { font-family: var(--label); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); display: flex; gap: 8px; align-items: center; margin-bottom: 28px; }
.stv-contact-page .crumb a { text-decoration: none; opacity: .85; color: var(--ink-soft); }
.stv-contact-page .crumb a:hover { opacity: 1; color: var(--accent); }
.stv-contact-page .crumb .sep { opacity: .5; }
.stv-contact-page .crumb .cur { color: var(--ink); }

/* B. hero — title left, lede bottom-aligned right (desktop) */
.ctc-hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 60px; align-items: end; padding-bottom: 44px; border-bottom: 1px solid var(--line-soft); }
.ctc-hero .lede .eyebrow { margin-bottom: 14px; }
.ctc-hero h1, .ctc-hero h2 { font-family: var(--serif) !important; font-weight: 500; font-size: 74px !important; letter-spacing: -0.018em; line-height: 1.02; color: var(--ink); margin: 14px 0 0; }
.ctc-hero h1 em, .ctc-hero h2 em { color: var(--accent); font-style: normal; font-family: var(--serif); }
.ctc-hero p { color: var(--ink-soft); font-size: 17px; line-height: 1.65; max-width: 54ch; margin: 0; padding-bottom: 6px; }

/* C. two-column body */
.ctc-grid { margin-top: 48px; display: grid; grid-template-columns: .85fr 1.15fr; gap: 56px; align-items: start; }

/* C.1 channels rail */
.channels-rail h3 { font-family: var(--serif); font-weight: 500; font-size: 26px !important; letter-spacing: -0.01em; color: var(--ink); margin: 0; }
.channels-rail .rail-blurb { margin: 8px 0 0; font-size: 14.5px; color: var(--ink-soft); line-height: 1.6; max-width: 36ch; }
.ch-list { margin-top: 22px; display: flex; flex-direction: column; gap: 10px; }
.ch-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--paper); border: 1px solid var(--line-soft); border-radius: 12px; text-decoration: none; color: var(--ink); transition: border-color .18s, transform .18s, box-shadow .18s; }
.ch-row:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: 0 18px 36px -28px rgba(78,65,109,.55); }
.ch-ico { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--bone-2); display: grid; place-items: center; color: var(--accent); }
.ch-ico svg { width: 18px; height: 18px; display: block; }
.ch-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ch-label { font-family: var(--label); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); font-weight: 700; }
.ch-handle { font-weight: 600; font-size: 15px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-arr { margin-left: auto; color: var(--ink-soft); font-size: 18px; line-height: 1; opacity: .55; transition: transform .2s, opacity .2s, color .2s; }
.ch-row:hover .ch-arr { transform: translateX(3px); opacity: 1; color: var(--accent); }

/* C.1a "Already a client?" info card */
.info-card { margin-top: 18px; padding: 20px 22px; background: var(--bone-2); border-radius: 14px; }
.info-card h4 { font-family: var(--serif); font-weight: 500; font-size: 18px; color: var(--ink) !important; margin: 0; }
.info-card p { margin: 6px 0 0; font-size: 13.5px; color: var(--ink-soft); line-height: 1.55; }
.info-card .link { margin-top: 12px; display: inline-flex; align-items: center; gap: 6px; font-family: var(--label); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); font-weight: 700; text-decoration: none; }
.info-card .link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* C.2 form card */
.ctc-form { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 30px 60px -42px rgba(33,28,26,.4); }
.ctc-form .form-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 34px 38px 0; }
.ctc-form .form-head .reply { font-family: var(--label); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.ctc-form .form-head .reply .dot { width: 7px; height: 7px; border-radius: 50%; background: #3FA86A; box-shadow: 0 0 0 3px rgba(63,168,106,.18); flex: none; }
.ctc-form form { padding: 26px 38px 36px; margin: 0; }
.ctc-form .frow { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ctc-form .field { margin-bottom: 14px; }
.ctc-form .field > label { display: block; font-family: var(--label); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); font-weight: 700; margin-bottom: 7px; }

/* inputs — !important beats Avada's global form theming. background-color
   longhand (not shorthand) so the select keeps its chevron image. */
.ctc-form input,
.ctc-form select,
.ctc-form textarea {
  width: 100% !important;
  padding: 14px 16px !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  background-color: var(--bone) !important;
  background-image: none;
  font-family: var(--sans) !important;
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink) !important;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.ctc-form input::placeholder,
.ctc-form textarea::placeholder { color: #9a948e !important; opacity: 1; }
.ctc-form input:focus,
.ctc-form select:focus,
.ctc-form textarea:focus {
  border-color: var(--accent) !important;
  background-color: #fff !important;
  box-shadow: 0 0 0 4px rgba(78,65,109,.10) !important;
  outline: none !important;
}
.ctc-form textarea { min-height: 128px !important; resize: vertical; line-height: 1.55; }
.ctc-form select {
  cursor: pointer;
  height: auto !important;
  line-height: 1.45 !important;
  padding-right: 44px !important;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='8'%20viewBox='0%200%2012%208'%3E%3Cpath%20d='M1%201l5%205%205-5'%20fill='none'%20stroke='%234E416D'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 18px center !important;
}
.ctc-form select:invalid { color: #9a948e; }

/* inline validation errors (spec §5) */
.ctc-form .field.has-error input,
.ctc-form .field.has-error select,
.ctc-form .field.has-error textarea { border-color: #B4412F !important; }
.ctc-form .field-error { display: block; margin-top: 6px; font-family: var(--sans); font-size: 12.5px; color: #B4412F; line-height: 1.4; }
.ctc-form .form-error { margin: 0 0 14px; font-size: 13px; color: #B4412F; line-height: 1.5; }

/* submit + privacy */
.ctc-form .send-btn { width: 100%; justify-content: center; padding: 16px 22px; font-family: var(--sans); font-size: 15px; font-weight: 700; background: var(--clay); color: #fff; border: none; border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; transition: transform .18s ease, box-shadow .2s; }
.ctc-form .send-btn:hover { box-shadow: 0 12px 26px -12px rgba(94,77,134,.6); transform: translateY(-1px); }
.ctc-form .send-btn:disabled { opacity: .7; cursor: default; transform: none; box-shadow: none; }

/* ── Fluent Forms (contact form id 1) — restyle FF's structure to match .ctc-form. FF's controls are
   plain <input>/<select>/<textarea>.ff-el-form-control inside .ctc-form, so the .ctc-form input/select/
   textarea rules above already style them; these match the FF-specific structure (real FF 6.x classes). ── */
.ctc-form--ff .frm-fluent-form { padding: 26px 38px 36px; margin: 0; }
.ctc-form--ff .ff-el-group { margin: 0 0 14px; }
.ctc-form--ff .ff-el-group:last-child { margin-bottom: 0; }
.ctc-form--ff .ff-el-input--content { margin: 0; }
.ctc-form--ff .ff-el-input--label label {
  display: block; font-family: var(--label); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-soft); font-weight: 700; margin: 0 0 7px; padding: 0; line-height: 1.3;
}
/* hide FF's required asterisk (fields stay required; the original showed none) */
.ctc-form--ff .ff-el-is-required.asterisk-right label:after,
.ctc-form--ff .ff-el-is-required.asterisk-left label:before { display: none; }
/* name field → 2-col grid like .frow */
.ctc-form--ff .ff-name-field-wrapper .ff-t-container { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0; }
.ctc-form--ff .ff-name-field-wrapper .ff-t-cell { padding: 0; width: auto; float: none; }
/* submit → match .send-btn */
.ctc-form--ff .ff_submit_btn_wrapper { margin: 4px 0 0; }
.ctc-form--ff .ff-btn-submit {
  width: 100%; justify-content: center; padding: 16px 22px; font-family: var(--sans); font-size: 15px;
  font-weight: 700; background: var(--clay); color: #fff; border: none; border-radius: 6px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 10px; line-height: 1.2; height: auto; margin: 0;
  transition: transform .18s ease, box-shadow .2s;
}
.ctc-form--ff .ff-btn-submit::after { content: "\2192"; font-size: 16px; }
.ctc-form--ff .ff-btn-submit:hover { box-shadow: 0 12px 26px -12px rgba(94,77,134,.6); transform: translateY(-1px); }
/* validation errors → match .field-error */
.ctc-form--ff .ff-el-form-control.has-error,
.ctc-form--ff .error .ff-el-form-control { border-color: #B4412F !important; }
.ctc-form--ff .text-danger,
.ctc-form--ff .error_text,
.ctc-form--ff .ff-el-is-error .error { display: block; margin-top: 6px; font-family: var(--sans); font-size: 12.5px; color: #B4412F; line-height: 1.4; }
/* success / after-submit message */
.ctc-form--ff .ff-message-success { font-family: var(--sans); color: var(--ink); font-size: 15px; line-height: 1.6; padding: 8px 2px; }
.ctc-form .send-btn .arr { transition: transform .2s; }
.ctc-form .send-btn:hover .arr { transform: translateX(4px); }
.ctc-form .privacy { margin: 14px 0 0; font-size: 12px; color: var(--ink-soft); text-align: center; line-height: 1.55; }
.ctc-form .privacy a { color: var(--ink-soft); text-decoration: underline; text-decoration-color: rgba(110,104,99,.4); text-underline-offset: 2px; }

/* success state — keeps the card chrome, swaps the form body (spec §5) */
.ctc-form .ctc-success { padding: 40px 38px 44px; }
.ctc-form .ctc-success p { font-family: var(--serif); font-weight: 500; font-size: 20px; line-height: 1.5; color: var(--accent); margin: 0; }

/* D. FAQ teaser strip (page only, desktop only) */
.stv-contact-page .faq-strip { margin-top: 60px; padding: 32px 36px; background: var(--bone-2); border-radius: 18px; display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center; }
.stv-contact-page .faq-strip .ftext { display: flex; flex-direction: column; gap: 6px; }
.stv-contact-page .faq-strip .ftext h4 { font-family: var(--serif); font-weight: 500; font-size: 24px; color: var(--ink); letter-spacing: -0.01em; margin: 0; }
.stv-contact-page .faq-strip .ftext p { font-size: 14.5px; color: var(--ink-soft); max-width: 60ch; margin: 0; }
.stv-contact-page .faq-strip a.btn-out { font-family: var(--label); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; text-decoration: none; padding: 14px 22px; border-radius: 6px; border: 1.5px solid var(--ink); color: var(--ink); white-space: nowrap; transition: background .2s, color .2s; }
.stv-contact-page .faq-strip a.btn-out:hover { background: var(--ink); color: #fff; }

/* ---------- MOBILE: single breakpoint at 860px ---------- */
@media (max-width: 860px) {
  .stv-contact-page .ctc-wrap { padding: 28px 22px 40px; }
  .stv-contact-section .stv-contact-embed { padding: 0 22px; }
  .stv-contact-page .crumb { margin-bottom: 22px; font-size: 10.5px; letter-spacing: .16em; }
  .ctc-hero { grid-template-columns: 1fr; gap: 0; padding-bottom: 26px; }
  .ctc-hero h1, .ctc-hero h2 { font-size: 42px !important; letter-spacing: -0.02em; }
  .ctc-hero .eyebrow { margin-bottom: 12px; font-size: 10.5px; }
  .ctc-hero p { margin-top: 14px; font-size: 15.5px; line-height: 1.6; padding-bottom: 0; }

  /* single column; FORM FIRST, channels second (spec §7) */
  .ctc-grid { grid-template-columns: 1fr; gap: 0; margin-top: 28px; }
  .ctc-grid .ctc-form { order: 1; }
  .ctc-grid .channels-rail { order: 2; margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--line-soft); }

  .ctc-form .form-head { padding: 22px 22px 0; }
  .ctc-form form { padding: 18px 22px 26px; }
  .ctc-form .frow { gap: 10px; }
  /* 16px keeps iOS from zooming the field on focus (site anti-zoom convention) */
  .ctc-form input,
  .ctc-form select,
  .ctc-form textarea { padding: 13px 14px !important; font-size: 16px; }
  .ctc-form .ctc-success { padding: 26px 22px 30px; }

  .channels-rail h3 { font-size: 22px !important; }
  .ch-row { padding: 13px 14px; }
  .ch-ico { width: 38px; height: 38px; }

  /* hide desktop-only off-ramps on the long mobile stack */
  .info-card { display: none; }
  .stv-contact-page .faq-strip { display: none; }
}

/* ============================================================
   v2.9.0 — ACCOUNT MENU (signed-in avatar + dropdown in nav)
   ============================================================ */
.stv-acct { position: relative; display: inline-flex; flex: 0 0 auto; }
.stv-acct[hidden] { display: none; }

.stv-avatar-btn {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--wine); color: #fff;
  font-family: var(--label); font-weight: 700; font-size: 14px; letter-spacing: .02em;
  display: grid; place-items: center; line-height: 1; padding: 0; border: none; cursor: pointer;
  box-shadow: 0 4px 12px -6px rgba(78,65,109,.5);
  position: relative; transition: transform .15s;
}
.stv-avatar-btn:hover { transform: translateY(-1px); }
/* Active-membership ring dot — only rendered (has-dot) for active members. */
.stv-avatar-btn.has-dot::after {
  content: ""; position: absolute; bottom: 1px; right: 1px;
  width: 10px; height: 10px; border-radius: 50%;
  background: #22B36B; border: 2px solid var(--bone);
}

.stv-acct-menu {
  position: absolute; top: calc(100% + 12px); right: 0; width: 260px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 24px 50px -20px rgba(33,28,26,.35);
  padding: 6px; z-index: 2010; text-align: left;
}
.stv-acct-menu[hidden] { display: none; }
.stv-acct-menu .who { padding: 14px 14px 12px; border-bottom: 1px solid var(--line-soft); margin-bottom: 6px; }
.stv-acct-menu .who .name { font-family: var(--sans); font-weight: 700; font-size: 14.5px; color: var(--ink); }
.stv-acct-menu .who .email { font-family: var(--sans); font-size: 12.5px; color: var(--ink-soft); margin-top: 2px; }
.stv-acct-menu .who .mship {
  margin-top: 8px; display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--label); font-size: 10.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--accent);
}
.stv-acct-menu .who .mship .dot { width: 6px; height: 6px; border-radius: 50%; background: #22B36B; flex: none; }
.stv-acct-menu a[role="menuitem"] {
  display: flex; align-items: center; gap: 11px; width: 100%; box-sizing: border-box;
  padding: 11px 12px; border-radius: 8px; text-decoration: none;
  color: var(--ink); font-family: var(--sans); font-size: 14px; font-weight: 500;
  background: transparent; transition: background .15s;
}
.stv-acct-menu a[role="menuitem"]:hover,
.stv-acct-menu a[role="menuitem"]:focus-visible { background: var(--bone); color: var(--ink); }
.stv-acct-menu svg { width: 16px; height: 16px; color: var(--ink-soft); flex: none; }
.stv-acct-menu .acct-meta { margin: 0 0 0 auto; display: inline; font-size: 11px; color: var(--ink-soft); font-weight: 500; }
.stv-acct-menu .divider { height: 1px; background: var(--line-soft); margin: 6px 0; }
.stv-acct-menu a.signout { color: var(--ink-soft); }
.stv-acct-menu a.signout:hover, .stv-acct-menu a.signout:focus-visible { color: var(--ink-soft); }

/* Header cluster: avatar sits between cart and the Apply CTA. */
.fusion-tb-header .stv-header-actions .stv-acct { margin-right: 8px !important; }

/* Collapsed nav (≤1200px): avatar rides beside the cart by the hamburger. */
.stv-acct--mobile { margin: 0 6px 0 0 !important; flex: 0 0 auto !important; }
.stv-acct--mobile .stv-acct-menu { right: -52px; }
@media (max-width: 480px) {
  .stv-acct--mobile .stv-acct-menu { position: fixed; top: 70px; right: 12px; left: auto; }
}

/* ─────────────────────────────────────────
   Full-bleed colored sections sit flush (no exposed #main bar)
   ─────────────────────────────────────────
   Our full-width <section class="stv-*"> bands live inside Avada columns
   that carry a default 20px bottom margin (--awb-margin-bottom-large:20px).
   That margin leaves a 20px strip of the #main content background showing
   between sections, which rendered as a dark/black bar (e.g. between the
   library strip and the purple lead-magnet section). Zero it so the bands
   butt directly against each other. Scoped to <section> tags only, so inline
   stv components (e.g. .stv-pricing-card in multi-column rows) keep spacing. */
.fusion-layout-column:has(> .fusion-column-wrapper > section[class*="stv-"]) {
  margin-bottom: 0 !important;
}

/* ─────────────────────────────────────────
   HOMEPAGE — "Latest from the library" strip
   ([stv_wl_strip], between #results and #lead)
───────────────────────────────────────── */
.stv-wl-strip {
  background: var(--bone);
  padding: 64px 0 68px;
}
.stv-wl-strip .wls-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 18px;
}
.stv-wl-strip .wls-eyebrow {
  font-family: var(--label);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 11px;
}
.stv-wl-strip .wls-eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: currentColor;
  display: inline-block;
}
body .stv-wl-strip h2 {
  font-family: var(--serif) !important;
  font-weight: 500 !important;
  font-size: clamp(28px, 3.4vw, 38px) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 12px 0 0;
}
.stv-wl-strip .wls-head p {
  margin: 8px 0 0;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink-soft);
  max-width: 520px;
}
.stv-wl-strip .wls-row {
  margin-top: 26px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px 14px;
}
.stv-wl-strip .wls-tile {
  display: block;
  text-decoration: none;
  min-width: 0;
}
.stv-wl-strip .wls-art {
  position: relative;
  display: block;
  aspect-ratio: 1/1;
  border-radius: 9px;
  overflow: hidden;
  background:
    radial-gradient(circle at 70% 22%, rgba(255,255,255,.18), transparent 42%),
    linear-gradient(150deg, #4E416D 0%, #2C2440 100%);
}
.stv-wl-strip .wls-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.stv-wl-strip .wls-art::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(20,16,28,.35) 0%, rgba(20,16,28,0) 36%);
}
.stv-wl-strip .wls-rib {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  font-family: var(--label);
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  padding: 3px 7px;
  border-radius: 99px;
}
.stv-wl-strip .wls-rib--pod { background: #22B36B; }
.stv-wl-strip .wls-rib--yt  { background: #D94B3C; }
.stv-wl-strip .wls-play {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 2;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255,255,255,.94);
  display: grid;
  place-items: center;
  transition: transform .18s ease;
}
.stv-wl-strip .wls-play svg {
  width: 10px;
  height: 10px;
  margin-left: 1px;
  fill: var(--accent);
}
.stv-wl-strip .wls-tile:hover .wls-play { transform: scale(1.12); }
.stv-wl-strip .wls-dur {
  position: absolute;
  left: 8px;
  bottom: 9px;
  z-index: 2;
  background: rgba(20,16,28,.82);
  color: #fff;
  font-family: var(--label);
  font-size: 9px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
}
.stv-wl-strip .wls-t {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 9px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--ink);
  transition: color .18s ease;
}
.stv-wl-strip .wls-tile:hover .wls-t { color: var(--accent); }
.stv-wl-strip .wls-all {
  display: inline-block;
  margin-top: 24px;
  font-family: var(--label);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--accent);
  text-decoration: none;
}
.stv-wl-strip .wls-all:hover { text-decoration: underline; }

/* Tablet: 3-up (two rows). */
@media (max-width: 980px) {
  .stv-wl-strip .wls-row { grid-template-columns: repeat(3, 1fr); }
}
/* Mobile: horizontal scroll rail. */
@media (max-width: 560px) {
  .stv-wl-strip { padding: 48px 0 52px; }
  .stv-wl-strip .wls-row {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 12px;
    margin-right: -18px;
    padding-right: 18px;
  }
  .stv-wl-strip .wls-row::-webkit-scrollbar { display: none; }
  .stv-wl-strip .wls-tile { flex: 0 0 150px; }
}

/* ============================================================
   v3.0 — physical products: shipping address at checkout
   (merch shirts / posing robes; fields render only when the
   cart holds a "Physical product" item — see functions.php)
   ============================================================ */
/* Shipping fields inherit the billing-fields grid + label look. */
.stv-co-left .woocommerce-shipping-fields h3 { display: none; }
.stv-co-left .woocommerce-shipping-fields__field-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.stv-co-left .woocommerce-shipping-fields__field-wrapper .form-row { width: auto; float: none; margin: 0; padding: 0; }
.stv-co-left .woocommerce-shipping-fields .form-row label {
  display: block; font-family: var(--label); font-size: 11.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-soft); font-weight: 600; margin-bottom: 7px;
}
.stv-co-left .woocommerce-shipping-fields abbr.required { color: var(--accent); border: none; text-decoration: none; }
body.woocommerce-checkout .stv-co-left .woocommerce-shipping-fields__field-wrapper .form-row-first,
body.woocommerce-checkout .stv-co-left .woocommerce-shipping-fields__field-wrapper .form-row-last {
  width: auto !important; float: none !important; margin: 0 !important;
}
@media (max-width: 600px) {
  .stv-co-left .woocommerce-shipping-fields__field-wrapper { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .stv-co-left .woocommerce-shipping-fields__field-wrapper { grid-template-columns: 1fr !important; }
}
/* "Shipping address" divider heading between contact fields and the address. */
.stv-co-left .stv-ship-head {
  margin: 26px 0 16px; padding-top: 22px; border-top: 1px solid var(--line);
  font-family: var(--label); font-size: 12px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-soft);
}
/* The State dropdown gets enhanced by selectWoo (select2) — match the inputs. */
.stv-co-left .select2-container .select2-selection--single {
  height: auto; padding: 13px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--bone);
}
.stv-co-left .select2-container .select2-selection--single .select2-selection__rendered {
  line-height: 1.4; padding: 0; font-family: var(--sans); font-size: 15px; color: var(--ink);
}
.stv-co-left .select2-container .select2-selection--single .select2-selection__arrow { height: 100%; right: 12px; }
.stv-co-left .select2-container--focus .select2-selection--single,
.stv-co-left .select2-container--open .select2-selection--single {
  border-color: var(--accent); background: #fff; box-shadow: 0 0 0 3px rgba(94,77,134,.12);
}

/* ============================================================
   HEADER + NAV STRUCTURAL RESTORE  (custom theme — was Avada core)
   Avada's framework CSS made `.fusion-row` a flex row, sized the
   header columns, and drove the awb-menu collapse mechanics
   (desktop horizontal row ⇆ mobile slide-in drawer). That base CSS
   left with Avada; the carried `.stv-*` rebrand rules above (frosted
   bar, Sora links, 30px drawer links, Follow-Val footer, ☰/✕ glyphs)
   sit ON TOP of it. Reproduce only what the header bar needs, scoped
   to `.fusion-tb-header` / `.awb-menu` so nothing else is touched.
   Appended last so it underpins (and where needed wins over) the base.
   ============================================================ */

/* Header bar = flex row: [logo] [nav] [CTA]. (.fusion-row already gets the
   74px height + side-gutter padding from the .fusion-sticky-container rules.) */
.fusion-tb-header .fusion-row {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  max-width: 100% !important;
}
.fusion-tb-header .fusion-row > .fusion-layout-column { float: none !important; width: auto !important; }
.fusion-tb-header .fusion-column-wrapper { width: 100%; }
.fusion-tb-header .stv-col-logo { flex: 0 0 auto; }
.fusion-tb-header .stv-col-nav  { flex: 1 1 auto; min-width: 0; }
.fusion-tb-header .stv-col-cta  { flex: 0 0 auto; }
.fusion-tb-header .stv-col-nav .awb-menu { display: flex; width: 100%; align-items: center; justify-content: center; }

/* Menu list + link resets (Avada base) */
.fusion-tb-header .awb-menu__main-ul { list-style: none; margin: 0; padding: 0; }
.fusion-tb-header .awb-menu__main-ul a { text-decoration: none; }
.fusion-tb-header .awb-menu__main-ul > li { position: relative; }

/* Toggle button base (Avada base): a transparent centred icon box */
.awb-menu__m-toggle {
  background: transparent; border: 0; cursor: pointer; padding: 0;
  align-items: center; justify-content: center;
  width: 44px; height: 44px; line-height: 1;
}
.awb-menu__m-toggle-inner,
.awb-menu__m-collapse-icon { display: inline-flex; align-items: center; justify-content: center; }

/* ---- Desktop (≥1201px): horizontal nav, hamburger hidden ---- */
@media (min-width: 1201px) {
  .fusion-tb-header .awb-menu__main-ul { display: flex !important; align-items: center; flex-wrap: nowrap; }
  .awb-menu__m-toggle { display: none !important; }
  /* the mobile-only rows stv-main.js injects into the shared <ul> stay hidden here */
  .awb-menu__main-ul > li.stv-mnav-top,
  .awb-menu__main-ul > li.stv-mnav-foot { display: none !important; }
}

/* ---- Mobile (≤1200px): hamburger shows; links collapse to a slide-in drawer ---- */
@media (max-width: 1200px) {
  .awb-menu__m-toggle { display: inline-flex !important; }
  /* CLOSED drawer: fully hidden + out of flow. The carried `.stv-*` rules style the
     OPEN `.expanded` panel (84vw right panel, full-height, scrim); this is the base
     they ride on. visibility:hidden also suppresses the scrim box-shadow when closed. */
  .awb-menu.mobile-mode-collapse-to-button .awb-menu__main-ul {
    position: fixed; top: 0; right: 0; bottom: 0; left: auto;
    margin: 0;
    visibility: hidden; opacity: 0; pointer-events: none;
    transform: translateX(14px);
    transition: opacity .26s ease, visibility .26s ease, transform .26s ease;
    z-index: 100000;
  }
  .awb-menu.mobile-mode-collapse-to-button.expanded .awb-menu__main-ul {
    visibility: visible !important; opacity: 1 !important; pointer-events: auto !important;
    transform: none !important;
  }
  /* show the matching glyph for the toggle state (☰ closed, ✕ open) */
  .awb-menu.mobile-mode-collapse-to-button .awb-menu__m-collapse-icon-close { display: none; }
  .awb-menu.mobile-mode-collapse-to-button.expanded .awb-menu__m-collapse-icon-open { display: none; }
  .awb-menu.mobile-mode-collapse-to-button.expanded .awb-menu__m-collapse-icon-close { display: inline-flex; }
  /* desktop CTA column hidden on mobile (cart relocates to the bar via stv-cart.js) */
  .fusion-tb-header .stv-col-cta { display: none !important; }
}

/* ---- Header as a FIXED frosted overlay (Avada made it an absolute→fixed sticky
   container via `absolute="on"` + its own JS; that left with Avada). Pin it to the
   viewport top so the frosted bar floats over the full-bleed hero, exactly like the
   reference. CRITICAL: the frost's backdrop-filter must live ONLY on the ::before
   leaf (style.css ~3531), NEVER on #header-sticky itself — a backdrop-filter ancestor
   becomes a containing block for position:fixed descendants, which would trap the
   mobile drawer (it lives inside the header) to the header box instead of the
   viewport. Rule ~229 (#wrapper #header-sticky, id-specificity) was applying the
   filter to the element; override it here at higher specificity. ---- */
#wrapper #header-sticky.fusion-sticky-container {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: auto !important;
  z-index: 2005 !important;
  background: transparent !important;          /* frost is the ::before */
  background-color: transparent !important;
  -webkit-backdrop-filter: none !important;    /* keep filter off the ancestor */
  backdrop-filter: none !important;
}
body.admin-bar #wrapper #header-sticky.fusion-sticky-container { top: 32px !important; }
@media (max-width: 782px) {
  body.admin-bar #wrapper #header-sticky.fusion-sticky-container { top: 46px !important; }
}

/* ---- Fusion base-CSS the theme now supplies itself ----
   Avada's framework stylesheet reset `.fusion-button` link decoration. With Avada
   gone, the `<a class="fusion-button">` CTA fell back to the browser default
   underline (caught by deactivating fusion-builder/core). Restore the reset.
   (Caught by the Block-7 dependency test; do NOT rely on Avada base CSS.) ---- */
.fusion-button,
.fusion-button:hover,
.fusion-button:focus {
  text-decoration: none !important;
}

/* Default content clearance for the fixed header on plain pages (no hero). Hero
   pages (style.css ~1353) and cart/checkout/video (their own rules) override this
   with !important, so it only applies where nothing else does. */
#main { padding-top: 74px; }
body.admin-bar #main { padding-top: 106px; }

/* ============================================================
   MY ACCOUNT — LOGIN form (logged-out). Avada's WooCommerce styling rendered this
   as a centered branded card; that left with Avada (0 woocommerce-account rules in
   the carried CSS), leaving the bare full-width default form. Restore the card to
   match stv-local.local. Scoped with :has() to the login form so the LOGGED-IN
   dashboard (same body.woocommerce-account) is untouched.
   ============================================================ */
.woocommerce-account .woocommerce:has(form.woocommerce-form-login) {
  max-width: 460px;
  margin: 56px auto 80px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 38px 40px 34px;
  box-shadow: 0 20px 56px -30px rgba(33, 28, 26, 0.3);
}
.woocommerce-account .woocommerce:has(form.woocommerce-form-login) > h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 34px;
  line-height: 1.1;
  margin: 0 0 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}
.woocommerce-account .woocommerce form.woocommerce-form-login { margin: 0; border: 0; padding: 0; } /* beat WC's .woocommerce form.login border */
form.woocommerce-form-login .form-row { margin: 0 0 18px; padding: 0; }
form.woocommerce-form-login > .form-row label:not(.woocommerce-form-login__rememberme) {
  display: block;
  font-family: var(--label);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 8px;
}
form.woocommerce-form-login input.input-text,
form.woocommerce-form-login input[type="text"],
form.woocommerce-form-login input[type="password"] {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bone);
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink);
}
form.woocommerce-form-login .password-input { display: block; position: relative; }
/* The remember-me label + submit button share one .form-row — stack them with the
   button on top (matches the original). */
form.woocommerce-form-login .form-row:has(.woocommerce-form-login__rememberme) {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 4px;
}
form.woocommerce-form-login .woocommerce-form-login__submit {
  order: -1;
  width: 100%;
  padding: 15px 26px;
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: 4px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: .04em;
  cursor: pointer;
  transition: background .15s;
}
form.woocommerce-form-login .woocommerce-form-login__submit:hover { background: var(--wine-deep); }
form.woocommerce-form-login .woocommerce-form-login__rememberme {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--label);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0;
}
form.woocommerce-form-login .woocommerce-form-login__rememberme input { margin: 0; width: auto; }
.woocommerce-account .woocommerce:has(form.woocommerce-form-login) .lost_password { margin: 16px 0 0; }
.woocommerce-account .woocommerce:has(form.woocommerce-form-login) .lost_password a {
  color: var(--ink-soft); text-decoration: underline; font-size: 14px;
}

/* ── Lost-password + Reset-password forms ──────────────────────────────────────
   Same WooCommerce account area as the login above, but these use a different form
   class (woocommerce-ResetPassword), so they missed the branded card and rendered as
   the bare default form. Give them the identical treatment. WooCommerce reuses this
   class for BOTH the "enter your email" step and the "set a new password" step (the
   page members land on from the welcome email), so this brands both. */
.woocommerce-account .woocommerce:has(form.woocommerce-ResetPassword) {
  max-width: 460px;
  margin: 56px auto 80px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 38px 40px 34px;
  box-shadow: 0 20px 56px -30px rgba(33, 28, 26, 0.3);
}
.woocommerce-account .woocommerce:has(form.woocommerce-ResetPassword) > h2 {
  font-family: var(--serif); font-weight: 500; font-size: 34px; line-height: 1.1;
  margin: 0 0 22px; padding-bottom: 16px; border-bottom: 1px solid var(--line); color: var(--ink);
}
form.woocommerce-ResetPassword { margin: 0; border: 0; padding: 0; }
form.woocommerce-ResetPassword > p:not([class]) {
  font-family: var(--sans); font-size: 15px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 24px;
}
form.woocommerce-ResetPassword .form-row { margin: 0 0 18px; padding: 0; }
form.woocommerce-ResetPassword label {
  display: block; font-family: var(--label); font-size: 12px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 8px;
}
form.woocommerce-ResetPassword input.input-text,
form.woocommerce-ResetPassword input[type="text"],
form.woocommerce-ResetPassword input[type="password"] {
  width: 100%; padding: 14px 16px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--bone); font-family: var(--sans); font-size: 15px; color: var(--ink); box-sizing: border-box;
}
form.woocommerce-ResetPassword .password-input { display: block; position: relative; }
form.woocommerce-ResetPassword .woocommerce-Button,
form.woocommerce-ResetPassword button[type="submit"],
form.woocommerce-ResetPassword input[type="submit"] {
  width: 100%; padding: 15px 26px; background: var(--accent); color: #fff; border: 0; border-radius: 4px;
  font-family: var(--sans); font-weight: 700; font-size: 15px; text-transform: uppercase;
  letter-spacing: .04em; cursor: pointer; transition: background .15s; margin-top: 4px;
}
form.woocommerce-ResetPassword .woocommerce-Button:hover,
form.woocommerce-ResetPassword button[type="submit"]:hover,
form.woocommerce-ResetPassword input[type="submit"]:hover { background: var(--wine-deep); }

/* ── Logged-in mobile header fit ──────────────────────────────────────────────
   When signed in, the account avatar joins the cart + hamburger in the header
   actions. On a phone that extra ~48px pushed the cart on top of the wordmark
   (measured: 18px overlap @393px, 28px @360px). Fix: let the logo column SHRINK
   to whatever space the actions leave (the actions never shrink), and cap the
   wordmark by max-width so it scales down a few px instead of overlapping. The
   logo keeps its full max-height when there's room (logged-out is unaffected —
   it only shrinks when the row is actually tight). padding-right keeps a
   consistent gap before the cart. Overrides the fixed-height mobile logo rules
   above (later + equal specificity). ── */
@media (max-width: 600px) {
  .fusion-tb-header .fullwidth-box.fusion-sticky-container .fusion-builder-row > .fusion-layout-column:first-child {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding-right: 12px !important;
  }
  .fusion-tb-header .fullwidth-box.fusion-sticky-container .fusion-builder-row > .fusion-layout-column:not(:first-child) {
    flex: 0 0 auto !important;
    min-width: 0 !important;
  }
  .fusion-tb-header .fusion-logo,
  .fusion-tb-header .fusion-logo a { max-width: 100% !important; display: inline-block !important; }
  .fusion-tb-header .fusion-logo img,
  #wrapper .fusion-logo img {
    height: auto !important;
    width: auto !important;
    max-height: 36px !important;
    max-width: 100% !important;
  }
}
@media (max-width: 380px) {
  .fusion-tb-header .fusion-logo img,
  #wrapper .fusion-logo img { max-height: 32px !important; }
}

/* ── Mobile main gallery image: contain + size down ───────────────────────────
   The 9:16 main image was full-bleed and screen-dominating on phones, AND the
   gallery column was overflowing the viewport: its grid item lacked min-width:0,
   so the flex slide-track blew it past the screen (clipped by overflow-x). Fix:
   min-width:0 lets the column shrink to the viewport, then size the hero to ~78%
   and center it so it sits comfortably on the screen while keeping the 9:16
   proportion (owner: "about 70-80% that size for my iPhone screen"). ── */
@media (max-width: 960px) {
  .stv-gallery { min-width: 0; }
}
@media (max-width: 600px) {
  .stv-hero-img { width: 78% !important; max-width: 78% !important; margin: 14px auto !important; border-radius: 14px !important; }
}

/* Checkout: breathing room above the PayPal/Venmo smart buttons, which the PayPal
   plugin renders directly below the payment-methods box with no gap. */
body.woocommerce-checkout .woocommerce-checkout-payment + .ppc-button-wrapper,
body.woocommerce-checkout .stv-payment + .ppc-button-wrapper { margin-top: 18px !important; }

/* express-button disclaimer (shown only when the express panel reveals). */
.stv-express-fine { text-align: center; margin-top: 10px; }
/* Express checkout wallet buttons: full-width Apple Pay, hide the Stripe banner's
   own "Express Checkout" legend/divider (our panel provides the heading). Moved
   here from an inline <style> in form-checkout.php that sat BETWEEN the express
   panel and the details panel and broke the `.stv-panel + .stv-panel` 22px gap
   (the two cards were touching). */
.stv-express-slot .apple-pay-button,
.stv-express-slot [class*="applepay"] button { width: 100% !important; min-height: 48px; }
.stv-express-slot .wc-stripe-banner-checkout legend,
.stv-express-slot .banner-divider { display: none !important; }
.stv-express-slot .wc-stripe-banner-checkout { border: 0; padding: 0; margin: 0; }

/* ============================================================
   PRODUCT GALLERY — natural aspect ratios, no letterbox (2026-07-03)
   ------------------------------------------------------------
   Catalog photos are MIXED portrait + landscape, so the fixed
   4:5 (desktop) / 2:3 (mobile) frame with the bone-2 lavender fill
   letterboxed wide photos (big top/bottom bands) and cropped tall
   ones. For galleries with real images (.stv-hero-img.has-img) the
   frame now hugs each image at its OWN natural ratio: no bands, no
   crop, same behavior on desktop and mobile. Placeholder (no-image)
   gradient galleries keep the old fixed frame — their tint slides
   have no intrinsic size and would collapse at height:auto.
   Thumbs become a uniform square (1:1 cover) grid everywhere.
   ============================================================ */

/* frame: drop the forced ratio + lavender fill; hug the media */
.stv-hero-img.has-img {
  aspect-ratio: auto;
  height: auto;
  background: transparent;
}
/* the track must size the frame (base rule is position:absolute; inset:0,
   which needs a pre-sized frame and collapses an auto-height one) */
.stv-hero-img.has-img .stv-hero-track { position: static; inset: auto; }

/* media at its natural ratio — never stretched, squeezed, or cropped */
.stv-hero-img.has-img .stv-pmedia-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: unset;
}

/* desktop click-swap: hidden slides fully removed so the ACTIVE slide
   sets the frame height; frame shrink-wraps + centers in the column,
   media capped to the viewport (width shrinks with it — ratio kept) */
@media (min-width: 961px) {
  .stv-hero-img.has-img { width: fit-content; max-width: 100%; margin-inline: auto; }
  .stv-hero-img.has-img .stv-hero-slide { position: static; display: none; opacity: 1; pointer-events: auto; }
  .stv-hero-img.has-img .stv-hero-slide.on { display: block; }
  .stv-hero-img.has-img .stv-pmedia-img {
    width: auto;
    max-width: 100%;
    max-height: min(620px, calc(100vh - 170px));
    margin-inline: auto;
  }
  /* thumbs strip was width-matched to the old fixed 4:5 stage */
  .stv-gallery:has(.stv-hero-img.has-img) .stv-thumbs { max-width: none; margin-inline: 0; }
}

/* mobile swipe carousel: keep the scroll-snap strip, natural-height
   slides (track = tallest image), shorter images vertically centered */
@media (max-width: 960px) {
  .stv-hero-img.has-img .stv-hero-slide { display: flex; align-items: center; justify-content: center; }
}

/* thumbnails: tidy uniform squares, image fills the tile (cover) */
.stv-thumb { aspect-ratio: 1 / 1; background: transparent; }
.stv-thumb img { object-fit: cover; }