/* ==========================================================================
   Bottle Gases — Global homepage overrides (Pets prebuilt cleanup)
   --------------------------------------------------------------------------
   Loaded LAST in the cascade (see functions.php — handle bg-global-overrides
   has every other child handle as a dependency). Scope: anything that doesn't
   belong in the more focused sheets (product-fixes / footer / brand-tokens).

   Investigation summary (see report 2026-05-10 sessions):

   • The Woodmart Pets prebuilt baked solid bright fills into the WPBakery
     element-level "custom CSS" — rendered as <style> blocks at the top of
     the page targeting `#wd-XXXXXX .wrapper-content-banner { background-
     color:#624bbd }`, `#wd-XXXXXX a { background-color:#faba5b }`, etc.
     Specificity is (0,1,1) — one ID + one class — so we either match it or
     escalate. We match the same id-chain on each rule below to keep parity
     and avoid !important where possible.

   • Hero/section/promo titles all render as `<h4 class="woodmart-title-
     container title wd-font-weight-600 wd-fontsize-l">`. Anton ships only
     at weight 400; combining it with `.wd-font-weight-600 { font-weight:
     600 !important }` triggers browser font-synthesis (fake bold), and the
     resulting heavy stroke at 84px reads as a thick rounded sans rather
     than the condensed display Anton is meant to be. Fix is to force the
     weight back to 400 on display headings — `!important` REQUIRED here
     because the source rule is already `!important`.

   • Promo card subtitles use class `.banner-title` (not `.title`) which has
     no font-family rule in the bundle, so it inherits Manrope from <body>.
     For brand voice we want those in Anton too.
   ========================================================================== */


/* ==========================================================================
   1. DISPLAY HEADINGS — defeat the synthesized-bold Anton render
   --------------------------------------------------------------------------
   Anton is a single-weight (400) condensed display face. The Pets prebuilt
   tags every hero/section title with `.wd-font-weight-600` which fires
   `font-weight:600!important` — the browser then synthesizes a bold and
   the result reads as a chunky rounded sans (the "looks like Fredoka"
   complaint). Pin these back to 400 so we get the real Anton glyphs.

   `!important` IS USED HERE — the source `.wd-font-weight-600` rule from
   Woodmart is itself `!important`, so a normal selector would lose.
   ========================================================================== */
.woodmart-title-container.wd-font-weight-100,
.woodmart-title-container.wd-font-weight-200,
.woodmart-title-container.wd-font-weight-300,
.woodmart-title-container.wd-font-weight-500,
.woodmart-title-container.wd-font-weight-600,
.woodmart-title-container.wd-font-weight-700,
.woodmart-title-container.wd-font-weight-800,
.woodmart-title-container.wd-font-weight-900,
h1.wd-font-weight-100, h2.wd-font-weight-100,
h1.wd-font-weight-200, h2.wd-font-weight-200,
h1.wd-font-weight-300, h2.wd-font-weight-300,
h1.wd-font-weight-500, h2.wd-font-weight-500,
h1.wd-font-weight-600, h2.wd-font-weight-600,
h1.wd-font-weight-700, h2.wd-font-weight-700,
h1.wd-font-weight-800, h2.wd-font-weight-800,
h1.wd-font-weight-900, h2.wd-font-weight-900,
h4.woodmart-title-container.title,
h4.woodmart-title-container.title.wd-font-weight-600 {
  /* Override .wd-font-weight-XXX !important — see note above. */
  font-weight: 400 !important;
}


/* ==========================================================================
   2. BANNER TITLES — promo-card "MIG welding gas — refill, not rent" etc.
   --------------------------------------------------------------------------
   `.banner-title` has NO font-family rule in Woodmart's bundle, so it falls
   through to body (Manrope). Lift them to Anton ALL CAPS to match the
   design system voice on the rest of the page.

   No !important — there's no competing rule on this selector chain.
   ========================================================================== */
.promo-banner .banner-title,
.promo-banner-wrapper .banner-title,
.banner-title {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: #FFFFFF;
}

/* When the promo card sits on a light background-content panel the body
   sets color via inline `color-scheme-light` → #FFF, but on hover/edge
   cases the card may reset. Make sure these stay readable on our dark
   brown panels (rule 3 below repaints the panels). */
.promo-banner.color-scheme-light .banner-title,
.promo-banner.color-scheme-light .banner-subtitle {
  color: #FFFFFF;
}


/* ==========================================================================
   3. PROMO CARD BACKGROUND COLOURS — purple/green/teal/blue Pets fills
   --------------------------------------------------------------------------
   These are the Pets prebuilt's bright accents baked into per-element
   <style> blocks at (0,1,1) specificity. We match the SAME id chain so
   the cascade resolves on source order (our sheet loads last) without
   needing !important. The brown/ink ramp keeps the promo strip on-brand
   while preserving the hover-zoom + arrow-link behaviour intact.

   Mapping rationale:
   - Bright purple/magenta → espresso (--bg-brown-700)   chunky earthy
   - Bright green/teal     → primary brown (--bg-brown-500) main brand
   - Bright blue (medium)  → dark ink (--bg-ink-700)     warm neutral
   - Bright blue (deep)    → deep brown (--bg-brown-800) blacker variant
   - Rust/red              → primary brown               consolidate accent
   - Existing #9e724b      → leave; already on-palette
   ========================================================================== */

/* IMPORTANT: the Pets bake-in <style> blocks live in the HTML <head> AFTER
   our LiteSpeed combined bundle <link>. At equal specificity (0,1,1) they
   WIN on source order. To beat them without !important we add `body` to
   each selector — that lifts our specificity to (0,1,2) — type+id+class —
   which trumps the (0,1,1) inline block regardless of order. */

/* Bright purple #624bbd → deep navy */
body #wd-689b315b700b3 .wrapper-content-banner { background-color: var(--bg-navy-700); }

/* Teal #118266 → primary navy */
body #wd-689b314d6fbd0 .wrapper-content-banner { background-color: var(--bg-navy-500); }

/* Mid-green #52a378 → primary navy */
body #wd-689b305a0c322 .wrapper-content-banner { background-color: var(--bg-navy-500); }

/* Mid-blue #5679d5 → primary navy */
body #wd-689b3087dceed .wrapper-content-banner { background-color: var(--bg-navy-500); }

/* Magenta #87184d → deep navy */
body #wd-689b32c4aaa39 .wrapper-content-banner { background-color: var(--bg-navy-700); }

/* Deep blue #1f64a5 → darker navy */
body #wd-689b32f3a18c4 .wrapper-content-banner { background-color: var(--bg-navy-800); }

/* Rust #b6431f → primary navy (consolidate to a single accent) */
body #wd-689b335be46dc .wrapper-content-banner { background-color: var(--bg-navy-500); }

/* Decorative subtitle pill #f33023 (red) → orange-600 (in-palette accent) */
body #wd-689b3ff91a1e2 .title-subtitle { background-color: var(--bg-orange-600); }

/* Decorative subtitle pill #f35c5c (coral) → orange-500 */
body #wd-689b3087dceed .banner-subtitle { background-color: var(--bg-orange-500); }


/* ==========================================================================
   4. HERO CTA & ALL "btn-shape-round" PILL CTAs — make them brown rectangles
   --------------------------------------------------------------------------
   The Pets prebuilt baked `#wd-XXXXXXX a { background-color:#faba5b }` for
   each hero CTA + uses `.btn-shape-round` (--btn-brd-radius:35px = pill).
   Brand says brown primary, 6px radius, hover one shade darker.

   Approach:
   a) Override the per-id orange backgrounds at matching specificity (0,1,1)
      so we win on source order, NOT !important.
   b) Squash `.btn-shape-round` site-wide to 6px — it's a Pets-era choice
      and the brand wants rectangular buttons. This is a single targeted
      rule on `.btn-shape-round`; no !important needed because nothing
      else competes once `--btn-brd-radius` is reset.
   c) Force readable button text colour — the markup carries inline
      `style="--btn-color:#333"` on the hero CTAs, which against dark brown
      is too low contrast. The inline custom prop wins, so we need
      !important on the literal `color`.
   ========================================================================== */

/* a) Repaint each baked-orange CTA in brand brown. The Pets <style> block
      lives later in the document head than our bundle <link>, so we add
      `body` to bump specificity to (0,1,2) and win regardless of order.
      The Pets rule itself uses `border-color:#faba5b !important` — to beat
      that we use !important too on border-color (documented). */
/* Hero CTAs are PRIMARY actions → yellow accent (matches sitewide
   .add_to_cart_button + .wd-slider .btn). Dark navy text gives readable
   contrast on the yellow. */
body #wd-689b277612267 a,
body #wd-689b3f8c87f3c a,
body #wd-68b99867ebaa0 a {
  background-color: var(--bg-yellow);
  color: var(--bg-navy-900) !important;
  /* override of !important inline-style border-color baked by Pets prebuilt */
  border-color: var(--bg-yellow) !important;
}
body #wd-689b277612267 a:hover,
body #wd-689b3f8c87f3c a:hover,
body #wd-68b99867ebaa0 a:hover {
  background-color: var(--bg-yellow-hover);
  color: var(--bg-navy-900) !important;
  /* override of !important inline-style border-color baked by Pets prebuilt */
  border-color: var(--bg-yellow-hover) !important;
}

/* b) Kill the pill globally — Pets default of 35px → brand default 6px.
      Resetting --btn-brd-radius is enough because .btn reads
      `border-radius:var(--btn-default-brd-radius)` which falls back to
      --btn-brd-radius. */
.btn-shape-round,
.btn.btn-shape-round,
a.btn.btn-shape-round {
  --btn-brd-radius: var(--r-md);
  border-radius: var(--r-md);
}

/* c) Force white CTA text. The inline-style custom property
      `--btn-color:#333` on the hero anchors leaks through; the !important
      here is documented: it overrides an inline style attribute, the only
      cascade level above us. */
#wd-689b277612267 a,
#wd-689b3f8c87f3c a,
#wd-68b99867ebaa0 a {
  /* override of inline-style: `--btn-color:#333` baked in by Pets prebuilt */
  color: #FFFFFF !important;
}


/* ==========================================================================
   5. TITLE-SUBTITLE EYEBROW — "font-alt" used by the hero subtitle
   --------------------------------------------------------------------------
   `.title-subtitle.font-alt` falls through to `--wd-secondary-font` which
   we've already pointed at Anton in brand-tokens.css. This block tightens
   the case + tracking so the eyebrow reads as a poster-style label, not
   the previous loose lower-case look.
   ========================================================================== */
.title-subtitle.font-alt,
.title-subtitle.subtitle-style-background {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 400;
}


/* ==========================================================================
   6. TAB-STYLE SECTION TITLE — "What's popular now"
   --------------------------------------------------------------------------
   Rendered as `<span class="tabs-text">` inside `.tabs-name.title`.
   Default font-family inherits from body (Manrope), which is fine for the
   tab labels but the *section heading* should be Anton. Apply just to the
   tabs-name element so the inactive/active tab labels stay Manrope.
   ========================================================================== */
.wd-tabs .wd-tabs-header .tabs-name.title,
.wd-tabs .wd-tabs-header .tabs-name.title .tabs-text {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-weight: 400;
  color: var(--bg-navy-900);
}

/* The "Recently viewed" / "Bestselling cylinders" carousel section titles
   render as `<h4 class="wd-el-title title slider-title element-title">`.
   Pull them onto the same display voice. */
.wd-products-element > .wd-el-title.title,
.wd-products-element > h4.wd-el-title,
h4.slider-title.element-title {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-weight: 400;
  color: var(--bg-navy-900);
}


/* ==========================================================================
   7. NEAR-WHITE TITLE COLOUR FALLOUT
   --------------------------------------------------------------------------
   brand-tokens.css has the rule:
     `.woodmart-title-container * { color: var(--bg-brown-50) !important }`
   which paints EVERYTHING inside a title container near-white. That works
   in the dark hero slider but breaks every section title elsewhere on the
   page (they vanish onto the cream body bg). Restore dark colour in the
   default (non-slide, non-footer) case.

   Specificity: equal to the existing brand-tokens rule (one class + one
   universal). We rely on source order — this sheet loads last.
   ========================================================================== */
:not(.wd-slider) > * > * > .woodmart-title-container,
:not(.wd-slider) > * > * > * > .woodmart-title-container,
.wd-tabs .woodmart-title-container,
.wd-products-element .woodmart-title-container,
body:not(.has-dark-section) .vc_row:not([class*="dark"]) .woodmart-title-container {
  color: var(--bg-navy-900) !important;
}
:not(.wd-slider) > * > * > .woodmart-title-container *,
:not(.wd-slider) > * > * > * > .woodmart-title-container *,
.wd-tabs .woodmart-title-container *,
.wd-products-element .woodmart-title-container *,
body:not(.has-dark-section) .vc_row:not([class*="dark"]) .woodmart-title-container * {
  /* counter the !important rule in brand-tokens.css */
  color: var(--bg-navy-900) !important;
}

/* Slider keeps cream — re-affirm so cascade order doesn't flip it. */
.wd-slider .wd-slide .woodmart-title-container,
.wd-slider .wd-slide .woodmart-title-container * {
  color: #FFFFFF !important;
}

/* Promo cards: the title sits on a coloured panel — keep cream/white. */
.promo-banner .woodmart-title-container,
.promo-banner .woodmart-title-container *,
.promo-banner .banner-title,
.promo-banner .banner-subtitle {
  color: #FFFFFF !important;
}
