/** Shopify CDN: Minification failed

Line 3789:1 Expected identifier but found whitespace
Line 5328:16 Unexpected "{"
Line 5328:21 Expected ":"
Line 5334:16 Unexpected "{"
Line 5334:21 Expected ":"
Line 5344:16 Unexpected "{"
Line 5344:21 Expected ":"

**/
/* =============================================================
   BIMMERPLUG PALETTE UTILITIES
   Tailwind-like color utility system — strict 7-color palette
   Colors: #FAF8F3 · #F0EDE6 · #E6E2DA · #0066FF · #C8C4BC · #8A8680 · #0F0F0F
   ============================================================= */

/* ─── CSS Custom Properties ─── */
:root {
  /* Hex values */
  --tone-canvas-base:     #FAF8F3; /* off-white cream   */
  --tone-canvas-muted:    #F0EDE6; /* warm sand         */
  --tone-surface-subtle:  #E6E2DA; /* beige / taupe     */
  --tone-accent-primary:  #0066FF; /* bright blue       */
  --tone-border-soft:     #C8C4BC; /* stone / warm grey */
  --tone-text-muted:      #8A8680; /* muted brown-grey  */
  --tone-ink-strong:      #0F0F0F; /* near-black        */

  /* RGB triplets — use inside rgba() for opacity control */
  --tone-canvas-base-rgb:    250, 248, 243;
  --tone-canvas-muted-rgb:   240, 237, 230;
  --tone-surface-subtle-rgb: 230, 226, 218;
  --tone-accent-primary-rgb: 0, 102, 255;
  --tone-border-soft-rgb:    200, 196, 188;
  --tone-text-muted-rgb:     138, 134, 128;
  --tone-ink-strong-rgb:     15, 15, 15;

  /* Brand gradient — use as background-image */
  --tone-gradient-brand: linear-gradient(
    135deg,
    var(--tone-text-muted)    0%,
    var(--tone-text-muted)    22%,
    var(--tone-accent-primary) 42%,
    var(--tone-ink-strong)    68%,
    var(--tone-ink-strong)    100%
  );
 --tone-status-hot: #E53935;        /* sale red */
  --tone-status-hot-rgb: 229, 57, 53;
  --tone-status-new: #16A34A;        /* fresh green */
  --tone-status-new-rgb: 22, 163, 74;
  /* Overlay rgba shorthands */
  --tone-overlay-ink-60:    rgba(var(--tone-ink-strong-rgb), 0.60);
  --tone-overlay-ink-40:    rgba(var(--tone-ink-strong-rgb), 0.40);
  --tone-overlay-ink-20:    rgba(var(--tone-ink-strong-rgb), 0.20);
  --tone-overlay-ink-08:    rgba(var(--tone-ink-strong-rgb), 0.08);
  --tone-overlay-cream-85:  rgba(var(--tone-canvas-base-rgb), 0.85);
  --tone-overlay-cream-70:  rgba(var(--tone-canvas-base-rgb), 0.70);
  --tone-overlay-blue-35:   rgba(var(--tone-accent-primary-rgb), 0.35);
  --tone-overlay-blue-12:   rgba(var(--tone-accent-primary-rgb), 0.12);
  --tone-overlay-stone-35:  rgba(var(--tone-border-soft-rgb), 0.35);
  --tone-overlay-gray-45:   rgba(var(--tone-text-muted-rgb), 0.45);

  /* Shadows built from palette */
  --tone-shadow-sm:   0 2px 8px rgba(var(--tone-ink-strong-rgb), 0.05);
  --tone-shadow-md:   0 5px 20px rgba(var(--tone-ink-strong-rgb), 0.08);
  --tone-shadow-lg:   0 14px 40px rgba(var(--tone-ink-strong-rgb), 0.12);
  --tone-shadow-xl:   0 25px 80px rgba(var(--tone-ink-strong-rgb), 0.20);
  --tone-shadow-blue: 0 10px 30px rgba(var(--tone-accent-primary-rgb), 0.25);
  --tone-shadow-stone:0 10px 30px rgba(var(--tone-border-soft-rgb), 0.40);
  --tone-glow-blue:   0 0 40px  rgba(var(--tone-accent-primary-rgb), 0.30);
  --tone-glow-gray:   0 0 40px  rgba(var(--tone-text-muted-rgb), 0.35);

  /* ── Gradient derivatives (formerly in christmas-landing.css) ── */
  --gradient-hero:
    radial-gradient(circle at 20% 20%, rgba(var(--tone-border-soft-rgb), 0.25), transparent 55%),
    radial-gradient(circle at 80% 30%, rgba(var(--tone-text-muted-rgb), 0.22), transparent 60%),
    linear-gradient(125deg, rgba(var(--tone-ink-strong-rgb), 0.70), rgba(var(--tone-ink-strong-rgb), 0.25));
  --gradient-forest:
    linear-gradient(135deg, rgba(var(--tone-ink-strong-rgb), 0.92), rgba(var(--tone-ink-strong-rgb), 0.85));
  --gradient-ruby:
    radial-gradient(circle, rgba(var(--tone-accent-primary-rgb), 0.35), transparent 70%);
  --gradient-countdown:
    linear-gradient(135deg,
      rgba(var(--tone-ink-strong-rgb), 0.08),
      rgba(var(--tone-accent-primary-rgb), 0.06),
      rgba(var(--tone-border-soft-rgb), 0.12));

  /* ── Christmas section aliases (formerly in christmas-landing.css :root) ── */
  --xmas-cream:      var(--tone-canvas-muted);
  --xmas-cloud:      var(--tone-canvas-base);
  --xmas-ink:        var(--tone-ink-strong);
  --xmas-night:      var(--tone-ink-strong);
  --xmas-forest:     var(--tone-gradient-brand);
  --xmas-midnight:   var(--tone-ink-strong);
  --xmas-berry:      var(--tone-accent-primary);
  --xmas-ruby:       var(--tone-text-muted);
  --xmas-gold:       var(--tone-accent-primary);
  --xmas-gold-soft:  rgba(var(--tone-border-soft-rgb), 0.35);
  --xmas-glass:      rgba(var(--tone-canvas-base-rgb), 0.08);
  --xmas-ink-muted:  rgba(var(--tone-ink-strong-rgb), 0.72);
  --xmas-cream-soft: rgba(var(--tone-canvas-base-rgb), 0.85);

  /* christmas-bimmer-basket.liquid section aliases */
  --cranberry:     var(--tone-accent-primary);
  --cranberry-rgb: var(--tone-accent-primary-rgb);
  --ivory:         var(--tone-canvas-base);
  --forest:        var(--tone-gradient-brand);
  --gold:          var(--tone-accent-primary);
  --gold-rgb:      var(--tone-border-soft-rgb);

  /* ── Semantic functional colors (outside the 7-tone palette) ── */
  --bp-sale:    #0066FF;   /* sale / compare-at price red */
  --bp-success: #8A8680;   /* success / checkmark green  */

  /* ── BimmerPlug component aliases (formerly in product-page.css :root) ── */
  --bp-crimson:        var(--tone-accent-primary);
  --bp-ivory:          var(--tone-canvas-base);
  --bp-forest:         var(--tone-gradient-brand);
  --bp-charcoal:       var(--tone-ink-strong);
  --bp-sand:           var(--tone-canvas-muted);
  --bp-border:         var(--tone-surface-subtle);
  --bp-text-primary:   var(--tone-ink-strong);
  --bp-text-secondary: rgba(var(--tone-ink-strong-rgb), 0.72);
  --bp-surface:        var(--tone-canvas-muted);
  --bp-muted:          rgba(var(--tone-ink-strong-rgb), 0.08);
  --bp-overlay-dark:   rgba(var(--tone-ink-strong-rgb), 0.75);
  --bp-overlay-light:  rgba(var(--tone-border-soft-rgb), 0.40);

  /* ── Cart-drawer section aliases (formerly in cart-drawer.liquid :root) ── */
  --bp-bg:       var(--tone-canvas-muted);
  --bp-mist:     var(--tone-surface-subtle);
  --bp-slate:    var(--tone-text-muted);
  --bp-steel:    var(--tone-text-muted);
  --bp-navy:     var(--tone-ink-strong);
  --bp-ice:      var(--tone-accent-primary);
  --bp-midnight: var(--tone-ink-strong);

  /* ── bimmer.css button alias ── */
  --btn-bg: var(--tone-gradient-brand);

  /* ── product-modal.liquid aliases (bpm = BimmerPlug Modal) ── */
  --bpm-snow:     var(--tone-canvas-base);
  --bpm-frost:    var(--tone-canvas-muted);
  --bpm-mist:     var(--tone-surface-subtle);
  --bpm-navy:     var(--tone-ink-strong);
  --bpm-midnight: var(--tone-ink-strong);
  --bpm-steel:    var(--tone-text-muted);
  --bpm-slate:    var(--tone-border-soft);
  --bpm-ice:      var(--tone-accent-primary);

  /* ── Christmas layout tokens (formerly in christmas-landing.css :root) ── */
  --xmas-shell:       min(1320px, 100%);
  --xmas-shell-tight: min(1040px, 100%);
  --border-subtle:    1px solid rgba(var(--tone-border-soft-rgb), 0.35);
  --shadow-soft:      0 30px 80px rgba(var(--tone-ink-strong-rgb), 0.25);
  --shadow-hard:      0 25px 120px rgba(var(--tone-ink-strong-rgb), 0.45);
  --glow:             0 10px 45px rgba(var(--tone-text-muted-rgb), 0.45);
}


/* ─────────────────────────────────────────────────────────────
   TEXT COLOR
───────────────────────────────────────────────────────────── */
.bp-text-cream  { color: var(--tone-canvas-base); }
.bp-text-sand   { color: var(--tone-canvas-muted); }
.bp-text-beige  { color: var(--tone-surface-subtle); }
.bp-text-blue   { color: var(--tone-accent-primary); }
.bp-text-stone  { color: var(--tone-border-soft); }
.bp-text-gray   { color: var(--tone-text-muted); }
.bp-text-black  { color: var(--tone-ink-strong); }


/* ─────────────────────────────────────────────────────────────
   BACKGROUND COLOR
───────────────────────────────────────────────────────────── */
.bp-bg-cream  { background-color: var(--tone-canvas-base); }
.bp-bg-sand   { background-color: var(--tone-canvas-muted); }
.bp-bg-beige  { background-color: var(--tone-surface-subtle); }
.bp-bg-blue   { background-color: var(--tone-accent-primary); }
.bp-bg-stone  { background-color: var(--tone-border-soft); }
.bp-bg-gray   { background-color: var(--tone-text-muted); }
.bp-bg-black  { background-color: var(--tone-ink-strong); }

/* Semi-transparent backgrounds */
.bp-bg-cream\/85  { background-color: rgba(var(--tone-canvas-base-rgb), 0.85); }
.bp-bg-cream\/70  { background-color: rgba(var(--tone-canvas-base-rgb), 0.70); }
.bp-bg-cream\/50  { background-color: rgba(var(--tone-canvas-base-rgb), 0.50); }
.bp-bg-black\/80  { background-color: rgba(var(--tone-ink-strong-rgb), 0.80); }
.bp-bg-black\/60  { background-color: rgba(var(--tone-ink-strong-rgb), 0.60); }
.bp-bg-black\/40  { background-color: rgba(var(--tone-ink-strong-rgb), 0.40); }
.bp-bg-black\/20  { background-color: rgba(var(--tone-ink-strong-rgb), 0.20); }
.bp-bg-black\/08  { background-color: rgba(var(--tone-ink-strong-rgb), 0.08); }
.bp-bg-blue\/35   { background-color: rgba(var(--tone-accent-primary-rgb), 0.35); }
.bp-bg-blue\/12   { background-color: rgba(var(--tone-accent-primary-rgb), 0.12); }
.bp-bg-stone\/35  { background-color: rgba(var(--tone-border-soft-rgb), 0.35); }
.bp-bg-gray\/45   { background-color: rgba(var(--tone-text-muted-rgb), 0.45); }

/* Brand gradient as background */
.bp-bg-gradient   { background-image: var(--tone-gradient-brand); }
.bp-bg-forest-gradient { background-image: var(--gradient-forest); }


/* ─────────────────────────────────────────────────────────────
   BORDER COLOR
───────────────────────────────────────────────────────────── */
.bp-border-cream  { border: 1px solid; border-color: var(--tone-canvas-base); }
.bp-border-sand   {  border: 1px solid;border-color: var(--tone-canvas-muted); }
.bp-border-beige  {  border: 1px solid;border-color: var(--tone-surface-subtle); }
.bp-border-blue   {  border: 1px solid;border-color: var(--tone-accent-primary); }
.bp-border-stone  {  border: 1px solid;border-color: var(--tone-border-soft); }
.bp-border-gray   {  border: 1px solid;border-color: var(--tone-text-muted); }
.bp-border-black  { border: 1px solid; border-color: var(--tone-ink-strong); }

/* Transparent borders */
.bp-border-stone\/35 { border-color: rgba(var(--tone-border-soft-rgb), 0.35); }
.bp-border-black\/15 { border-color: rgba(var(--tone-ink-strong-rgb), 0.15); }
.bp-border-cream\/50 { border-color: rgba(var(--tone-canvas-base-rgb), 0.50); }
.bp-border-blue\/25  { border-color: rgba(var(--tone-accent-primary-rgb), 0.25); }


/* ─────────────────────────────────────────────────────────────
   OUTLINE
───────────────────────────────────────────────────────────── */
.bp-outline-cream  { outline-color: var(--tone-canvas-base); }
.bp-outline-sand   { outline-color: var(--tone-canvas-muted); }
.bp-outline-beige  { outline-color: var(--tone-surface-subtle); }
.bp-outline-blue   { outline-color: var(--tone-accent-primary); }
.bp-outline-stone  { outline-color: var(--tone-border-soft); }
.bp-outline-gray   { outline-color: var(--tone-text-muted); }
.bp-outline-black  { outline-color: var(--tone-ink-strong); }


/* ─────────────────────────────────────────────────────────────
   SVG FILL / STROKE
───────────────────────────────────────────────────────────── */
.bp-fill-cream  { fill: var(--tone-canvas-base); }
.bp-fill-sand   { fill: var(--tone-canvas-muted); }
.bp-fill-beige  { fill: var(--tone-surface-subtle); }
.bp-fill-blue   { fill: var(--tone-accent-primary); }
.bp-fill-stone  { fill: var(--tone-border-soft); }
.bp-fill-gray   { fill: var(--tone-text-muted); }
.bp-fill-black  { fill: var(--tone-ink-strong); }

.bp-stroke-cream  { stroke: var(--tone-canvas-base); }
.bp-stroke-sand   { stroke: var(--tone-canvas-muted); }
.bp-stroke-beige  { stroke: var(--tone-surface-subtle); }
.bp-stroke-blue   { stroke: var(--tone-accent-primary); }
.bp-stroke-stone  { stroke: var(--tone-border-soft); }
.bp-stroke-gray   { stroke: var(--tone-text-muted); }
.bp-stroke-black  { stroke: var(--tone-ink-strong); }


/* ─────────────────────────────────────────────────────────────
   EXTENDED COLOR PROPERTIES
───────────────────────────────────────────────────────────── */
.bp-caret-cream  { caret-color: var(--tone-canvas-base); }
.bp-caret-blue   { caret-color: var(--tone-accent-primary); }
.bp-caret-black  { caret-color: var(--tone-ink-strong); }

.bp-accent-blue   { accent-color: var(--tone-accent-primary); }
.bp-accent-black  { accent-color: var(--tone-ink-strong); }

.bp-decoration-blue   { text-decoration-color: var(--tone-accent-primary); }
.bp-decoration-black  { text-decoration-color: var(--tone-ink-strong); }
.bp-decoration-gray   { text-decoration-color: var(--tone-text-muted); }
.bp-decoration-stone  { text-decoration-color: var(--tone-border-soft); }

.bp-column-rule-stone { column-rule-color: var(--tone-border-soft); }
.bp-column-rule-beige { column-rule-color: var(--tone-surface-subtle); }


/* ─────────────────────────────────────────────────────────────
   RINGS (focus-ring style box-shadows)
───────────────────────────────────────────────────────────── */
.bp-ring-cream  { box-shadow: 0 0 0 1px var(--tone-canvas-base); }
.bp-ring-sand   { box-shadow: 0 0 0 1px var(--tone-canvas-muted); }
.bp-ring-beige  { box-shadow: 0 0 0 1px var(--tone-surface-subtle); }
.bp-ring-blue   { box-shadow: 0 0 0 1px var(--tone-accent-primary); }
.bp-ring-stone  { box-shadow: 0 0 0 1px var(--tone-border-soft); }
.bp-ring-gray   { box-shadow: 0 0 0 1px var(--tone-text-muted); }
.bp-ring-black  { box-shadow: 0 0 0 1px var(--tone-ink-strong); }

.bp-ring-2-blue  { box-shadow: 0 0 0 2px var(--tone-accent-primary); }
.bp-ring-2-black { box-shadow: 0 0 0 2px var(--tone-ink-strong); }


/* ─────────────────────────────────────────────────────────────
   SHADOWS
───────────────────────────────────────────────────────────── */
.bp-shadow-sm    { box-shadow: var(--tone-shadow-sm); }
.bp-shadow-md    { box-shadow: var(--tone-shadow-md); }
.bp-shadow-lg    { box-shadow: var(--tone-shadow-lg); }
.bp-shadow-xl    { box-shadow: var(--tone-shadow-xl); }
.bp-shadow-blue  { box-shadow: var(--tone-shadow-blue); }
.bp-shadow-stone { box-shadow: var(--tone-shadow-stone); }
.bp-glow-blue    { box-shadow: var(--tone-glow-blue); }
.bp-glow-gray    { box-shadow: var(--tone-glow-gray); }

/* Legacy named shadows */
.bp-shadow-cream { box-shadow: 0 10px 30px var(--tone-canvas-base); }
.bp-shadow-sand  { box-shadow: 0 10px 30px var(--tone-canvas-muted); }
.bp-shadow-beige { box-shadow: 0 10px 30px var(--tone-surface-subtle); }
.bp-shadow-gray  { box-shadow: 0 10px 30px var(--tone-text-muted); }
.bp-shadow-black { box-shadow: 0 10px 30px var(--tone-ink-strong); }


/* ─────────────────────────────────────────────────────────────
   OVERLAY HELPERS
   Apply .bp-overlay to parent, then one modifier for the color
───────────────────────────────────────────────────────────── */
.bp-overlay {
  position: relative;
}
.bp-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.bp-overlay-cream::before  { background-color: var(--tone-canvas-base); }
.bp-overlay-sand::before   { background-color: var(--tone-canvas-muted); }
.bp-overlay-beige::before  { background-color: var(--tone-surface-subtle); }
.bp-overlay-blue::before   { background-color: var(--tone-accent-primary); }
.bp-overlay-stone::before  { background-color: var(--tone-border-soft); }
.bp-overlay-gray::before   { background-color: var(--tone-text-muted); }
.bp-overlay-black::before  { background-color: var(--tone-ink-strong); }

/* Opacity-keyed overlays */
.bp-overlay-dark-60::before  { background-color: rgba(var(--tone-ink-strong-rgb), 0.60); }
.bp-overlay-dark-40::before  { background-color: rgba(var(--tone-ink-strong-rgb), 0.40); }
.bp-overlay-dark-20::before  { background-color: rgba(var(--tone-ink-strong-rgb), 0.20); }
.bp-overlay-cream-85::before { background-color: rgba(var(--tone-canvas-base-rgb), 0.85); }
.bp-overlay-cream-70::before { background-color: rgba(var(--tone-canvas-base-rgb), 0.70); }
.bp-overlay-blue-35::before  { background-color: rgba(var(--tone-accent-primary-rgb), 0.35); }
.bp-overlay-blue-12::before  { background-color: rgba(var(--tone-accent-primary-rgb), 0.12); }
.bp-overlay-stone-35::before { background-color: rgba(var(--tone-border-soft-rgb), 0.35); }

/* Gradient overlay */
.bp-overlay-gradient::before {
  background-image: var(--tone-gradient-brand);
}


/* ─────────────────────────────────────────────────────────────
   COMPONENT GRADIENT BACKGROUNDS
   Named radial/linear gradients used in specific sections
───────────────────────────────────────────────────────────── */
/* christmas-bimmer-basket — placeholder image slot */
.bp-bg-xmas-product-placeholder {
  background: linear-gradient(135deg,
    rgba(var(--tone-accent-primary-rgb), 0.10),
    rgba(var(--tone-border-soft-rgb), 0.05));
}

/* christmassteeringwheelcta — full-section gradient */
.bp-bg-sw-cta {
  background: linear-gradient(225deg,
    var(--sw-bg, var(--tone-ink-strong)) 0%,
    var(--tone-gradient-brand) 50%,
    var(--sw-bg, var(--tone-ink-strong)) 100%);
}

/* wheel-customizer — 400px masking border trick */
.bp-border-b-400-cream { border-bottom: 400px solid var(--tone-canvas-base); }

/* product-info — fitment header gradient */
.bp-bg-fitment-header { background: linear-gradient(to right, var(--tone-accent-primary), var(--tone-ink-strong)); }

/* ForgedWheel finish swatches */
.bp-bg-swatch-gloss-black    { background: var(--tone-ink-strong); }
.bp-bg-swatch-matte-black    { background: var(--tone-text-muted); }
.bp-bg-swatch-brushed-silver { background: linear-gradient(135deg, var(--tone-border-soft), var(--tone-canvas-muted)); }
.bp-bg-swatch-satin-bronze   { background: linear-gradient(135deg, var(--tone-accent-primary), var(--tone-border-soft)); }
.bp-bg-swatch-space-grey     { background: linear-gradient(135deg, var(--tone-text-muted), var(--tone-border-soft)); }
.bp-bg-swatch-diamond-cut    { background: linear-gradient(135deg, var(--tone-border-soft), var(--tone-canvas-base)); }

/* christmassteeringwheelcta — bokeh particles */
.bp-bg-bokeh-stone-25 { background: radial-gradient(circle, rgba(var(--tone-border-soft-rgb), 0.25), transparent); }
.bp-bg-bokeh-gray-12  { background: radial-gradient(circle, rgba(var(--tone-text-muted-rgb), 0.12), transparent); }
.bp-bg-bokeh-black-15 { background: radial-gradient(circle, rgba(var(--tone-ink-strong-rgb), 0.15), transparent); }

/* customInstagramSocial — embed card shadow */
.bp-shadow-instagram { box-shadow: 0 0 1px 0 rgba(var(--tone-ink-strong-rgb), 0.5), 0 1px 10px 0 rgba(var(--tone-ink-strong-rgb), 0.15); }

/* collection-hub-dynamic — filter dropdown shadow */
.bp-shadow-dropdown { box-shadow: 0 15px 35px rgba(var(--tone-ink-strong-rgb), 0.15); }


/* ─────────────────────────────────────────────────────────────
   OPACITY HELPERS
───────────────────────────────────────────────────────────── */
.bp-opacity-0   { opacity: 0; }
.bp-opacity-5   { opacity: 0.05; }
.bp-opacity-10  { opacity: 0.1; }
.bp-opacity-20  { opacity: 0.2; }
.bp-opacity-25  { opacity: 0.25; }
.bp-opacity-30  { opacity: 0.3; }
.bp-opacity-35  { opacity: 0.35; }
.bp-opacity-40  { opacity: 0.4; }
.bp-opacity-50  { opacity: 0.5; }
.bp-opacity-60  { opacity: 0.6; }
.bp-opacity-70  { opacity: 0.7; }
.bp-opacity-75  { opacity: 0.75; }
.bp-opacity-80  { opacity: 0.8; }
.bp-opacity-85  { opacity: 0.85; }
.bp-opacity-90  { opacity: 0.9; }
.bp-opacity-100 { opacity: 1; }


/* ─────────────────────────────────────────────────────────────
   PSEUDO-ELEMENT COLORS  (::before / ::after)
───────────────────────────────────────────────────────────── */
.bp-before\:content-empty::before,
.bp-after\:content-empty::after {
  content: "";
}

/* Text */
.bp-before\:text-cream::before  { color: var(--tone-canvas-base); }
.bp-before\:text-blue::before   { color: var(--tone-accent-primary); }
.bp-before\:text-black::before  { color: var(--tone-ink-strong); }
.bp-after\:text-cream::after    { color: var(--tone-canvas-base); }
.bp-after\:text-blue::after     { color: var(--tone-accent-primary); }
.bp-after\:text-black::after    { color: var(--tone-ink-strong); }

/* Background */
.bp-before\:bg-cream::before  { background-color: var(--tone-canvas-base); }
.bp-before\:bg-sand::before   { background-color: var(--tone-canvas-muted); }
.bp-before\:bg-beige::before  { background-color: var(--tone-surface-subtle); }
.bp-before\:bg-blue::before   { background-color: var(--tone-accent-primary); }
.bp-before\:bg-stone::before  { background-color: var(--tone-border-soft); }
.bp-before\:bg-gray::before   { background-color: var(--tone-text-muted); }
.bp-before\:bg-black::before  { background-color: var(--tone-ink-strong); }

.bp-after\:bg-cream::after    { background-color: var(--tone-canvas-base); }
.bp-after\:bg-sand::after     { background-color: var(--tone-canvas-muted); }
.bp-after\:bg-beige::after    { background-color: var(--tone-surface-subtle); }
.bp-after\:bg-blue::after     { background-color: var(--tone-accent-primary); }
.bp-after\:bg-stone::after    { background-color: var(--tone-border-soft); }
.bp-after\:bg-gray::after     { background-color: var(--tone-text-muted); }
.bp-after\:bg-black::after    { background-color: var(--tone-ink-strong); }

.bp-before\:bg-gradient::before { background-image: var(--tone-gradient-brand); }
.bp-after\:bg-gradient::after   { background-image: var(--tone-gradient-brand); }

/* Border */
.bp-before\:border-blue::before  { border-color: var(--tone-accent-primary); }
.bp-before\:border-stone::before { border-color: var(--tone-border-soft); }
.bp-before\:border-black::before { border-color: var(--tone-ink-strong); }
.bp-after\:border-blue::after    { border-color: var(--tone-accent-primary); }
.bp-after\:border-stone::after   { border-color: var(--tone-border-soft); }
.bp-after\:border-black::after   { border-color: var(--tone-ink-strong); }


/* Backgrounds */
.bp-bg-status-hot   { background-color: var(--tone-status-hot); }
.bp-bg-status-new   { background-color: var(--tone-status-new); }
 
/* Text / icon colors */
.bp-text-status-hot     { color: var(--tone-status-hot); }
.bp-text-status-new     { color: var(--tone-status-new); }
.bp-text-status-success { color: var(--tone-status-new); }   /* alias for stock indicators */
 
/* Hover variants */
.bp-hover\:bg-status-hot:hover  { background-color: var(--tone-status-hot); }
.bp-hover\:bg-status-new:hover  { background-color: var(--tone-status-new); }
 
/* ═════════════════════════════════════════════════════════════════════
   DIRECTIONAL BORDER UTILITIES
   ─────────────────────────────────────────────────────────────────────
   The existing `bp-border-*` classes set all 4 sides via shorthand,
   which causes unintended box-borders when only one side is wanted.
   These directional variants set the color on a single edge only and
   leave the other edges untouched. Pair with structural `border-width`
   in the section CSS, OR use them standalone (they include 1px solid).
   ═══════════════════════════════════════════════════════════════════ */
 
.bp-border-t-stone { border-top:    1px solid var(--tone-border-soft); }
.bp-border-r-stone { border-right:  1px solid var(--tone-border-soft); }
.bp-border-b-stone { border-bottom: 1px solid var(--tone-border-soft); }
.bp-border-l-stone { border-left:   1px solid var(--tone-border-soft); }
 
.bp-border-t-beige { border-top:    1px solid var(--tone-surface-subtle); }
.bp-border-r-beige { border-right:  1px solid var(--tone-surface-subtle); }
.bp-border-b-beige { border-bottom: 1px solid var(--tone-surface-subtle); }
.bp-border-l-beige { border-left:   1px solid var(--tone-surface-subtle); }
 
.bp-border-t-blue  { border-top:    1px solid var(--tone-accent-primary); }
.bp-border-r-blue  { border-right:  1px solid var(--tone-accent-primary); }
.bp-border-b-blue  { border-bottom: 1px solid var(--tone-accent-primary); }
.bp-border-l-blue  { border-left:   1px solid var(--tone-accent-primary); }
 
.bp-border-t-black { border-top:    1px solid var(--tone-ink-strong); }
.bp-border-r-black { border-right:  1px solid var(--tone-ink-strong); }
.bp-border-b-black { border-bottom: 1px solid var(--tone-ink-strong); }
.bp-border-l-black { border-left:   1px solid var(--tone-ink-strong); }
/* ─────────────────────────────────────────────────────────────
   HOVER STATE VARIANTS
───────────────────────────────────────────────────────────── */
/* Text */
.bp-hover\:text-cream:hover  { color: var(--tone-canvas-base); }
.bp-hover\:text-sand:hover   { color: var(--tone-canvas-muted); }
.bp-hover\:text-beige:hover  { color: var(--tone-surface-subtle); }
.bp-hover\:text-blue:hover   { color: var(--tone-accent-primary); }
.bp-hover\:text-stone:hover  { color: var(--tone-border-soft); }
.bp-hover\:text-gray:hover   { color: var(--tone-text-muted); }
.bp-hover\:text-black:hover  { color: var(--tone-ink-strong); }

/* Background */
.bp-hover\:bg-cream:hover   { background-color: var(--tone-canvas-base); }
.bp-hover\:bg-sand:hover    { background-color: var(--tone-canvas-muted); }
.bp-hover\:bg-beige:hover   { background-color: var(--tone-surface-subtle); }
.bp-hover\:bg-blue:hover    { background-color: var(--tone-accent-primary); }
.bp-hover\:bg-stone:hover   { background-color: var(--tone-border-soft); }
.bp-hover\:bg-gray:hover    { background-color: var(--tone-text-muted); }
.bp-hover\:bg-black:hover   { background-color: var(--tone-ink-strong); }
.bp-hover\:bg-gradient:hover { background-image: var(--tone-gradient-brand); }

/* Border */
.bp-hover\:border-cream:hover  { border-color: var(--tone-canvas-base); }
.bp-hover\:border-blue:hover   { border-color: var(--tone-accent-primary); }
.bp-hover\:border-stone:hover  { border-color: var(--tone-border-soft); }
.bp-hover\:border-gray:hover   { border-color: var(--tone-text-muted); }
.bp-hover\:border-black:hover  { border-color: var(--tone-ink-strong); }

/* Shadow */
.bp-hover\:shadow-blue:hover   { box-shadow: var(--tone-shadow-blue); }
.bp-hover\:shadow-lg:hover     { box-shadow: var(--tone-shadow-lg); }
.bp-hover\:glow-blue:hover     { box-shadow: var(--tone-glow-blue); }


/* ─────────────────────────────────────────────────────────────
   FOCUS-VISIBLE VARIANTS
───────────────────────────────────────────────────────────── */
.bp-focus-visible\:ring-blue:focus-visible  { box-shadow: 0 0 0 2px var(--tone-accent-primary); outline: none; }
.bp-focus-visible\:ring-black:focus-visible { box-shadow: 0 0 0 2px var(--tone-ink-strong); outline: none; }
.bp-focus-visible\:ring-stone:focus-visible { box-shadow: 0 0 0 2px var(--tone-border-soft); outline: none; }


/* ─────────────────────────────────────────────────────────────
   ACTIVE VARIANTS
───────────────────────────────────────────────────────────── */
.bp-active\:text-cream:active  { color: var(--tone-canvas-base); }
.bp-active\:text-blue:active   { color: var(--tone-accent-primary); }
.bp-active\:text-black:active  { color: var(--tone-ink-strong); }
.bp-active\:bg-gray:active     { background-color: var(--tone-text-muted); }
.bp-active\:bg-black:active    { background-color: var(--tone-ink-strong); }
.bp-active\:bg-blue:active     { background-color: var(--tone-accent-primary); }


/* ─────────────────────────────────────────────────────────────
   DISABLED VARIANTS
───────────────────────────────────────────────────────────── */
.bp-disabled\:text-gray:disabled   { color: var(--tone-text-muted); }
.bp-disabled\:text-stone:disabled  { color: var(--tone-border-soft); }
.bp-disabled\:bg-sand:disabled     { background-color: var(--tone-canvas-muted); }
.bp-disabled\:bg-beige:disabled    { background-color: var(--tone-surface-subtle); }
.bp-disabled\:border-stone:disabled { border-color: var(--tone-border-soft); }
.bp-disabled\:opacity-50:disabled  { opacity: 0.5; }


/* ─────────────────────────────────────────────────────────────
   PLACEHOLDER / SELECTION
───────────────────────────────────────────────────────────── */
.bp-placeholder\:gray::placeholder  { color: var(--tone-text-muted); }
.bp-placeholder\:stone::placeholder { color: var(--tone-border-soft); }

.bp-selection\:cream::selection        { color: var(--tone-canvas-base); }
.bp-selection\:black::selection        { color: var(--tone-ink-strong); }
.bp-selection-bg\:blue::selection      { background-color: var(--tone-accent-primary); }
.bp-selection-bg\:sand::selection      { background-color: var(--tone-canvas-muted); }


/* ─────────────────────────────────────────────────────────────
   TRANSITION HELPERS (color properties)
───────────────────────────────────────────────────────────── */
.bp-transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, box-shadow;
  transition-timing-function: cubic-bezier(0.14, 0.7, 0.3, 1);
  transition-duration: 200ms;
}
.bp-transition-colors-slow {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, box-shadow;
  transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  transition-duration: 360ms;
}


/* =============================================================
   COMPONENT COLOR RULES — govedia.css
   (selectors with color properties, consolidated here so
    govedia.css stays color-free)
   ============================================================= */

a.go-btn.gv-btn-search.button:hover span.button-start {
    color: var(--tone-ink-strong) !important;
}

.gvbar_outer-wrap {
    
}

.gv_bar_text {
    color: var(--tone-canvas-base);
}

.gv_bar_text h2 {
    text-shadow: 0px 4px 9px rgba(var(--tone-ink-strong-rgb), .25);
    color: var(--tone-canvas-base) !important;
}

.gv_bar_text p {
    text-shadow: 0px 4px 9px rgba(var(--tone-ink-strong-rgb), .25);
}

.gv-mmy-bar .mmy-tab select {
}


.gv-mmy-bar .mmy-tab .gv-btn-search .button-start {
    color: var(--tone-canvas-base);
}

.gv-mmy-bar .mmy-tab .gv-btn-clear {
    color: var(--tone-canvas-base);
}

.template-index header#section-header.Header--transparent .HorizontalList__Item a {
    color: var(--tone-canvas-base);
}



/* ================================================================
   COLOR COMPONENT RULES FROM: bimmer.css
   ================================================================ */

.shopify-pc__banner__dialog p{
  color:var(--tone-ink-strong) !important;
}

@media only screen and (max-width: 767px) {
  #loader-container {
    background: url("/cdn/shop/files/Mobile_-_7.png?v=1767819411") 50% 50% no-repeat var(--tone-gradient-brand);
  }
}

.template-index .header { /*just for home page header*/
	background-color: transparent;
}

.template-index nav.header__secondary-nav span{
  color: var(--tone-ink-strong);
}

.template-index nav.header__secondary-nav .relative button[type=submit] span{
  color: var(--tone-ink-strong);
}

.template-index button.md\:hidden, .template-index .containerdev form input.header-search__input::placeholder {  /* This part of the code determines the mobile version of the left side of header where used can see the 3 bar/line to select navigation */
	color: var(--tone-canvas-base);
}

.template-index .header.scrolled{ 
  background-color: var(--tone-canvas-base);
}

.template-index .header.scrolled nav.header__secondary-nav .icon {
	color: var(--tone-ink-strong);
}

.template-index .header.scrolled .containerdev form input.header-search__input::placeholder {  
	color: var(--tone-canvas-base);
}

.template-index .header-sidebar__back-button.is-divided.link-faded.text-with-icon.h6.md\:hidden {
  color: var(--tone-text-muted);
}

.template-index .header.scrolled .header__primary-nav {
  color: var(--tone-canvas-base);
}

.kqsiVA9Jf8LJAbxw8Bau {
    background: linear-gradient(to right, var(--tone-ink-strong), var(--tone-gradient-brand), var(--tone-gradient-brand) 40%, var(--tone-accent-primary), var(--tone-accent-primary) 70%, var(--tone-accent-primary));
    color: var(--tone-ink-strong);
}

.header {
    color: inherit;
}



h2 {
  color: var(--tone-ink-strong);
}

.announcement-bar.color-scheme.color-scheme--scheme-1 {
  background-color: var(--tone-gradient-brand);
}







a.go-btn.gv-btn-search.button:hover span.button-start {
    color: var(--tone-ink-strong);
}

.footer .footer__block p.h6 {
  color: var(--tone-ink-strong);
}

.template-list-collections main#main {
  background: var(--tone-canvas-muted);
}

.announcement-bar p {
  background: none;
  color: var(--tone-canvas-base);
}

.affiliate_banner .prose p.h6 {
  color: var(--tone-canvas-base);;
}

.affiliate_banner p.h1 {
  color: var(--tone-canvas-base);
}

.ButtonGroup__Item:after {
  background-color: var(--tone-accent-primary);
}
a.link {
  color: var(--tone-canvas-base);
}

button.link {
  color: var(--tone-canvas-base);
}

.car-play-banner a.button:hover {
   color: var(--tone-canvas-base);
}

a.button:hover {
  color: var(--tone-ink-strong);
}

button.link:hover {
  color: var(--tone-ink-strong);
}

.ButtonGroup__Item:hover:before{
  border-color: var(--tone-accent-primary);
}

a.link:after {
  background: linear-gradient(to right, var(--tone-ink-strong) 0%, var(--tone-gradient-brand) 20%, var(--tone-gradient-brand) 40%, var(--tone-accent-primary) 55%, var(--tone-accent-primary) 70%, var(--tone-accent-primary) 100%);
}

a.link:before {
  border-top-color: var(--tone-canvas-base)80;
  border-bottom-color: var(--tone-canvas-base)80;
  background: transparent;
}

a.button {
    color: var(--tone-canvas-base);
}

button.link:after {
	background: linear-gradient(to right, var(--tone-ink-strong) 0%, var(--tone-gradient-brand) 20%, var(--tone-gradient-brand) 40%, var(--tone-accent-primary) 55%, var(--tone-accent-primary) 70%, var(--tone-accent-primary) 100%);
	color: var(--tone-ink-strong);
}

.shopify-payment-button button {
  background: linear-gradient(to right, var(--tone-ink-strong) 0%, var(--tone-gradient-brand) 20%, var(--tone-gradient-brand) 40%, var(--tone-accent-primary) 55%, var(--tone-accent-primary) 70%, var(--tone-accent-primary) 100%);
}

.shopify-payment-button__button--unbranded:hover:not([disabled]) {
  background-color: var(--tone-ink-strong);
  color: var(--tone-canvas-base);
}

a.link.ButtonGroup__Item.Button {
  background: transparent;
}

.button {
  background:   var(--tone-ink-strong);
  color: var(--tone-canvas-base);
}

.complementary-products__product-list button{
  background: var(--tone-accent-primary) !important;
  color: var(--tone-canvas-base);
}

@supports (height: 1lh) {
  :is(.link, .prose a:not(.h1,.h2,.h3,.h4,.h5,.h6,.button,.link-faded,.link-faded-reverse)) {
    background: revert;

  }
}

@supports (height: 1lh) {
  cart-drawer#cart-drawer button, cart-drawer#cart-drawer button.link, cart-drawer#cart-drawer a.link {
    background: var(--btn-bg);
  }
}

.jdgm-star {
  color: var(--tone-accent-primary);
}

.jdgm-carousel-item__review-title {
  color: var(--tone-ink-strong);
}

safe-sticky.product-info .product-info__block-item a.vendor.h6.link-faded {
  color: var(--tone-ink-strong);
}

safe-sticky.product-info .product-info__block-item a.vendor.h6.link-faded {
  color: var(--tone-ink-strong);
}

safe-sticky.product-info sale-price.h4.text-subdued {
  color: var(--tone-ink-strong);
}

.text-subdued span {
  color: var(--tone-accent-primary) !important;
}

.ymq_item_price {
  color: var(--tone-accent-primary) !important;
}

.list-logo.text-list .img-text p {
    color: var(--tone-ink-strong);
}

.template-cart a.link {
  color: var(--tone-ink-strong);
}

a.quick-buy-modal__view-more {
    background: transparent;
    color: var(--tone-ink-strong);
}

.template-blog .prose.place-self-end-start h2.h2 {
  color: var(--tone-canvas-base);
}

.template-blog .blog-post-card__info p a.blog-post-card__title.h4 {
  color: var(--tone-ink-strong);
}

.shopify-payment-button .shopify-payment-button__more-options {
  background: transparent;
}

.rk-widget-container .glide__arrows button {
  background-color: transparent;
}

details.accordion.custom-accordion1.group span.text-with-icon.gap-4 {
    color: var(--tone-canvas-base);
}

details.accordion.custom-accordion1 .accordion__content {
    background: var(--tone-canvas-base);
}

.template-product safe-sticky.product-info .product-info__block-list .product-info__block-item:nth-child(2) badge-list.badge-list on-sale-badge.badge.badge--on-sale {
    background: linear-gradient(to right, var(--tone-ink-strong) 0%, var(--tone-ink-strong) 20%, var(--tone-ink-strong) 40%, var(--tone-text-muted) 55%, var(--tone-text-muted) 70%, var(--tone-text-muted) 100%);
    color: var(--tone-canvas-base);
}

.shop-now p.h1 {
    color: var(--tone-ink-strong);
}

form.cart-drawer__footer {
  background:var(--tone-accent-primary);

}

p.free-ship.ship span:nth-child(2) {
    color: var(--tone-gradient-brand);
}

p.free-ship.ship span:nth-child(2) {
    color: var(--tone-gradient-brand);
}

.hp-collection-list .h3 {
  color: var(--tone-canvas-base);
}

.home_featured {
  background-color: var(--tone-canvas-base);
}

.home_featured .product-card {
  background: var(--tone-canvas-base);
}

.hp-featured-product .bordered-section {
  border-color: var(--tone-ink-strong);
}

.hp-contact {
  background: var(--tone-surface-subtle); 
  color: var(--tone-ink-strong); 
}

.template-collection .collection__main compare-at-price, .template-collection .collection__main .text-subdued {
  color: var(--tone-ink-strong);
}

.shopify-section--main-product .product-info, .shopify-section--featured-product .product-info__block-list {
  background: var(--tone-surface-subtle);
  box-shadow: 0px 0px 1px var(--tone-surface-subtle), inset 0px 0px 4px var(--tone-surface-subtle);
}

.product-info__block-item[data-block-id="price"] compare-at-price {
  color: var(--tone-ink-strong);
}

.shopify-section--main-product more-payment-options-link > a, .shopify-section--featured-product more-payment-options-link > a {
  background: var(--tone-canvas-base);
}

.shopify-section--main-product more-payment-options-link:hover > a, .shopify-section--featured-product more-payment-options-link:hover > a {
  background: var(--tone-surface-subtle);
}

.shopify-section--main-product .custom-accordion1, .quick-buy-modal__content .custom-accordion1 {
  background: var(--tone-ink-strong);
  box-shadow: 0px 0px 0px 1px var(--tone-surface-subtle);
}

.shopify-section--main-product .select , .shopify-section--featured-product .select{
  background: var(--tone-ink-strong);
  color: var(--tone-canvas-base);
  box-shadow: 0px;
}

.shopify-section--main-product hr, .shopify-section--featured-product hr {
  border-color: var(--tone-ink-strong);
}

.product-card__quick-add-button {
  background: var(--tone-ink-strong) !important;
  color: var(--tone-canvas-base) !important;
}

.custom-text-field {
  background-color: var(--tone-canvas-base);
  color: var(--tone-ink-strong);
}

.custom-text-field:focus {
  border-color: var(--tone-ink-strong);
  box-shadow: 0 0 0 1px var(--tone-ink-strong);
}

.custom-text-field::placeholder {
  color:var(--tone-ink-strong);
}

.timeline-item__wrapper{
  background:var(--tone-canvas-base) !important;
}

.pp_timeline:before{
  background:var(--tone-accent-primary) !important;
}

.timeline-item__wrapper:before{
  border-color:transparent var(--tone-accent-primary) transparent transparent !important;
}

.PP-TextField__Input  {
  color:var(--tone-ink-strong) !important;
}
/* ================================================================
   COLOR COMPONENT RULES FROM: christmas-landing.css
   ================================================================ */

body.christmas-landing {
	background: var(--xmas-cream);
	color: var(--xmas-ink);
}

a {
	color: inherit;
}

button, input, textarea, select {
	color: inherit;
}

.christmas_page_christmas_landing_page {
	background: var(--xmas-cream);
}



.christmas_global_btn_secondary_outline {
	box-shadow: none;
}

.christmas_global_btn_secondary_outline:hover {
	background: rgba(var(--tone-border-soft-rgb), 0.12);
	color: var(--tone-canvas-base);
}

.christmas_countdown_btn_glow {
	box-shadow: 0 0 40px rgba(var(--tone-text-muted-rgb), 0.4);
}

.christmas_countdown_btn_glow:hover {
	box-shadow: 0 0 55px rgba(var(--tone-text-muted-rgb), 0.6);
}

.christmas_gift_guide_btn_guide {
	color: var(--tone-canvas-base);
	box-shadow: 0 12px 30px var(--tone-ink-strong);
}

.christmas_gift_guide_btn_guide:hover {
	box-shadow: 0 20px 45px var(--tone-ink-strong);
}

.christmas_global_section_title {
	color: var(--xmas-ink);
}

.christmas_global_section_description {
	color: var(--tone-ink-strong) !important;
}

.christmas_global_divider_line {
	background: var(--tone-ink-strong) !important;
}

.christmas_global_divider_dot_large {
	background: var(--tone-ink-strong) !important;
	box-shadow: 0 0 15px rgba(var(--tone-border-soft-rgb), 0.7);
}

.christmas_hero_section {
	background: var(--xmas-night);
	color: var(--tone-canvas-base);
}

.christmas_hero_overlay {
}

.christmas_hero_bokeh_glow {
	background: rgba(var(--tone-border-soft-rgb), 0.18);
}

.snowflake-particle {
	background: var(--xmas-gold);
	box-shadow: 0 0 12px rgba(var(--tone-border-soft-rgb), 0.65);
}

.christmas_hero_corner_ornament {
	background: var(--xmas-gold);
	box-shadow: 0 0 17px rgba(var(--tone-border-soft-rgb), 0.9);
}

.christmas_hero_title {
	text-shadow: 0 20px 80px rgba(var(--tone-ink-strong-rgb), 0.45);
}

.christmas_hero_subtitle {
	color: rgba(var(--tone-canvas-base-rgb), 0.88);
}

.christmas_hero_ribbon_line {
	background: linear-gradient(90deg, transparent, var(--xmas-gold));
}

.christmas_hero_ribbon_right {
	background: linear-gradient(90deg, var(--xmas-gold), transparent);
}

.christmas_hero_ribbon_dot {
	background: var(--xmas-gold);
	box-shadow: 0 0 14px var(--xmas-gold);
}

.christmas_hero_bottom_fade {
	background: linear-gradient(180deg, transparent, var(--xmas-cream));
}

.christmas_featured_collection_section {
	background: var(--xmas-cream);
}

.christmas_featured_collection_product_card_inner {
	background: var(--xmas-ink);
}

.christmas_featured_collection_product_card_inner:hover {
	box-shadow: 0 30px 90px rgba(var(--tone-ink-strong-rgb), 0.35);
}

.christmas_featured_collection_product_card_inner:hover .christmas_featured_collection_product_border {
	border-color: rgba(var(--tone-border-soft-rgb), 0.6);
}

.christmas_featured_collection_product_glow {
	background: transparent;
}

.christmas_featured_collection_product_card_inner:hover .christmas_featured_collection_product_glow {
	background: rgba(var(--tone-text-muted-rgb), 0.08);
}

.christmas_featured_collection_product_image_overlay {
	background: linear-gradient(180deg, rgba(var(--tone-ink-strong-rgb), 0.55), transparent 30%);
}

.christmas_featured_collection_product_content {
	color: var(--tone-canvas-base);
}

.christmas_featured_collection_product_category {
	color: rgba(var(--tone-border-soft-rgb), 0.9);
}

.christmas_featured_collection_product_price {
	color: var(--xmas-gold);
}

.christmas_featured_collection_product_underline {
	background: rgba(var(--tone-border-soft-rgb), 0.4);
}


.christmas_benefits_strip_benefits_accent_lines::after {
	background: linear-gradient(180deg, transparent, var(--xmas-gold), transparent);
}

.christmas_benefits_strip_benefit_icon_glow {
	background: rgba(var(--tone-border-soft-rgb), 0.12);
}




.christmas_benefits_strip_benefit_underline {
	background: var(--xmas-gold);
}

.christmas_bimmer_basket_section {
	background: linear-gradient(145deg, rgba(var(--tone-ink-strong-rgb), 0.95), rgba(var(--tone-ink-strong-rgb), 0.98));
	color: var(--tone-canvas-base);
}

.christmas_bimmer_basket_section::before {
	background: radial-gradient(circle at 20% 15%, rgba(var(--tone-text-muted-rgb), 0.2), transparent 55%),
}

.christmas_bimmer_basket_bg {
	background: radial-gradient(circle at 15% 20%, rgba(var(--tone-border-soft-rgb), 0.25), transparent 55%),
}

.christmas_bimmer_basket_basket_title_wrapper {
	color: var(--xmas-gold);
}

.christmas_bimmer_basket_basket_title {
	color: var(--tone-canvas-base);
}

.christmas_bimmer_basket_selector_cluster {
	background: rgba(var(--tone-ink-strong-rgb), 0.35);
	box-shadow: 0 35px 80px rgba(var(--tone-ink-strong-rgb), 0.45);
}

.christmas_bimmer_basket_selector_eyebrow {
	color: var(--basket-muted);
}

.christmas_bimmer_basket_selector_active strong {
	color: var(--basket-ink);
}

.christmas_bimmer_basket_selector_hint {
	color: var(--basket-muted);
}

.christmas_bimmer_basket_model_chip {
	background: var(--basket-chip-bg);
	color: var(--basket-ink);
}

.christmas_bimmer_basket_model_chip.is-active {
	background: rgba(var(--tone-text-muted-rgb), 0.35);
	border-color: var(--xmas-gold);
	color: var(--tone-canvas-base);
}

.christmas_bimmer_basket_model_chip_meta {
	color: var(--basket-muted);
}

.christmas_bimmer_basket_selector_native_control {
	background: rgba(var(--tone-ink-strong-rgb), 0.3);
	color: var(--basket-ink);
}

.christmas_bimmer_basket_suite_stage {
	background: rgba(var(--tone-ink-strong-rgb), 0.4);
	box-shadow: inset 0 0 60px rgba(var(--tone-ink-strong-rgb), 0.45);
	color: var(--basket-ink);
}

.christmas_bimmer_basket_suite_media_placeholder {
	background: linear-gradient(135deg, rgba(var(--tone-border-soft-rgb), 0.25), rgba(var(--tone-text-muted-rgb), 0.25));
}

.christmas_bimmer_basket_suite_label {
	color: var(--basket-muted);
}

.christmas_bimmer_basket_suite_desc {
	color: var(--basket-muted);
}

.christmas_bimmer_basket_suite_badge {
	color: var(--basket-muted);
}

.christmas_bimmer_basket_suite_product {
	background: rgba(var(--tone-ink-strong-rgb), 0.35);
	box-shadow: 0 20px 60px rgba(var(--tone-ink-strong-rgb), 0.4);
}

.christmas_bimmer_basket_suite_product_media_placeholder {
	background: rgba(var(--tone-canvas-base-rgb), 0.08);
}

.christmas_bimmer_basket_suite_product_price {
	color: var(--xmas-gold);
}

.christmas_bimmer_basket_suite_product_status {
	color: var(--basket-muted);
}

.christmas_bimmer_basket_suite_empty {
	color: var(--basket-muted);
}

.christmas_bimmer_basket_workshop_card {
	background: rgba(var(--tone-ink-strong-rgb), 0.45);
	box-shadow: 0 35px 90px rgba(var(--tone-ink-strong-rgb), 0.45);
}

.christmas_bimmer_basket_workshop_text {
	color: var(--basket-muted);
}

.christmas_bimmer_basket_workshop_metric {
	background: rgba(var(--tone-ink-strong-rgb), 0.35);
}

.christmas_bimmer_basket_workshop_metric_label {
	color: var(--basket-muted);
}

.christmas_bimmer_basket_workshop_step {
	background: rgba(var(--tone-ink-strong-rgb), 0.3);
}

.christmas_bimmer_basket_workshop_step_label {
	color: var(--basket-muted);
}

.christmas_bimmer_basket_workshop_illustration {
	background: rgba(var(--tone-ink-strong-rgb), 0.35);
}

.christmas_bimmer_basket_compare_subtitle {
	color: var(--basket-muted);
}

.christmas_bimmer_basket_compare_card {
	background: rgba(var(--tone-ink-strong-rgb), 0.35);
	color: var(--basket-ink);
}

.christmas_bimmer_basket_compare_card.is-active {
	border-color: var(--xmas-gold);
	box-shadow: 0 25px 60px rgba(var(--tone-text-muted-rgb), 0.25);
}

.christmas_bimmer_basket_compare_card_placeholder {
	background: rgba(var(--tone-canvas-base-rgb), 0.08);
}

.christmas_bimmer_basket_compare_card_meta {
	color: var(--basket-muted);
}

.christmas_bimmer_basket_compare_card_products {
	color: var(--basket-muted);
}

.christmas_bimmer_basket_compare_card_empty {
	color: var(--basket-muted);
}

.christmas_bimmer_basket_compare_card.is-active .christmas_bimmer_basket_compare_card_indicator {
	background: var(--xmas-gold);
}

.christmas_countdown_section {
	background: var(--gradient-countdown), var(--xmas-cream);
	color: var(--xmas-ink);
}

.christmas_countdown_glow {
	background: radial-gradient(circle at 20% 20%, rgba(var(--tone-text-muted-rgb), 0.16), transparent 55%),
}

.christmas_countdown_icon_wrapper {
	background: rgba(var(--tone-text-muted-rgb), 0.08);
	color: var(--xmas-berry);
}

.christmas_countdown_title_accent {
	color: var(--xmas-berry);
	text-shadow: 0 6px 24px rgba(var(--tone-text-muted-rgb), 0.25);
}

.christmas_countdown_timer_block {
	background: linear-gradient(160deg, rgba(var(--tone-ink-strong-rgb), 0.95), rgba(var(--tone-ink-strong-rgb), 0.9));
	color: var(--xmas-cream);
	box-shadow: 0 25px 60px rgba(var(--tone-ink-strong-rgb), 0.35);
}

.christmas_countdown_timer_glow {
	background: radial-gradient(circle at 25% 25%, rgba(var(--tone-text-muted-rgb), 0.35), transparent 55%),
}

.christmas_countdown_timer_value {
	text-shadow: 0 12px 30px rgba(var(--tone-ink-strong-rgb), 0.55);
}

.christmas_countdown_timer_label {
	color: rgba(var(--tone-canvas-base-rgb), 0.75);
}

.christmas_countdown_visual_frame {
	background: linear-gradient(135deg, rgba(var(--tone-ink-strong-rgb), 0.85), rgba(var(--tone-ink-strong-rgb), 0.85));
	box-shadow: var(--shadow-soft);
}

.christmas_countdown_visual_caption {
	color: rgba(var(--tone-ink-strong-rgb), 0.65);
}

.christmas_countdown_snowflake::after {
	background: rgba(var(--tone-canvas-base-rgb), 0.9);
}

.christmas_luxury_carousel_section {
	background: var(--xmas-forest);
	color: var(--tone-canvas-base);
}

.christmas_luxury_carousel_carousel_gradient_right {
	background: linear-gradient(90deg, rgba(var(--tone-ink-strong-rgb), 0.92), transparent);
}

.christmas_luxury_carousel_carousel_wrapper {
	background: rgba(var(--tone-ink-strong-rgb), 0.35);
}

.christmas_luxury_carousel_carousel_overlay {
	background: linear-gradient(120deg, rgba(var(--tone-ink-strong-rgb), 0.8), rgba(var(--tone-ink-strong-rgb), 0.2));
}

.christmas_luxury_carousel_carousel_subtitle {
	color: var(--xmas-gold);
}

.christmas_luxury_carousel_carousel_underline {
	background: var(--xmas-gold);
}

.christmas_luxury_carousel_carousel_nav {
	background: rgba(var(--tone-ink-strong-rgb), 0.35);
	color: var(--tone-canvas-base);
}

.christmas_luxury_carousel_carousel_indicator {
	background: transparent;
}

.christmas_holiday_bestsellers_section {
	background: var(--xmas-cream);
}

.christmas_holiday_bestsellers_snowflake_decor {
	color: rgba(var(--tone-text-muted-rgb), 0.12);
}

.christmas_holiday_bestsellers_bestseller_card_inner {
	background: var(--xmas-ink);
	color: var(--xmas-cream);
}

.christmas_holiday_bestsellers_bestseller_card_inner:hover {
	box-shadow: 0 40px 120px rgba(var(--tone-ink-strong-rgb), 0.35);
}

.christmas_holiday_bestsellers_bestseller_card_inner:hover .christmas_holiday_bestsellers_bestseller_border {
	border-color: rgba(var(--tone-border-soft-rgb), 0.45);
}

.christmas_holiday_bestsellers_trending_badge {
	background: rgba(var(--tone-text-muted-rgb), 0.2);
	color: var(--xmas-gold);
}

.christmas_holiday_bestsellers_bestseller_category {
	color: rgba(var(--tone-border-soft-rgb), 0.65);
}

.christmas_holiday_bestsellers_bestseller_underline {
	background: var(--xmas-gold);
}

.christmas_holiday_offers_section {
	
	color: var(--tone-canvas-base);
}

.christmas_holiday_offers_offer_card {
	
}

.christmas_holiday_offers_offer_glow {
	background: var(--gradient-ruby);
}

.christmas_holiday_offers_detail_bullet {
	background: var(--xmas-gold);
}

.christmas_gift_guide_section {
	background: linear-gradient(135deg, var(--tone-canvas-base) 0%, rgba(var(--tone-canvas-base-rgb), 0.85) 35%, rgba(var(--tone-border-soft-rgb), 0.35) 70%, rgba(var(--tone-ink-strong-rgb), 0.08) 100%);
}

.christmas_gift_guide_guide_accent_bottom {
	background: radial-gradient(circle, rgba(var(--tone-text-muted-rgb), 0.32), transparent 65%);
}

.christmas_gift_guide_guide_accent_bottom {
	background: radial-gradient(circle, rgba(var(--tone-ink-strong-rgb), 0.35), transparent 65%);
}

.christmas_gift_guide_guide_card {
	background: linear-gradient(180deg, rgba(var(--tone-canvas-base-rgb), 0.98), rgba(var(--tone-border-soft-rgb), 0.18));
	box-shadow: 0 30px 80px rgba(var(--tone-ink-strong-rgb), 0.2);
}

.christmas_gift_guide_guide_image_overlay {
	background: linear-gradient(210deg, rgba(var(--tone-ink-strong-rgb), 0.75), rgba(var(--tone-ink-strong-rgb), 0.15));
}

.christmas_gift_guide_guide_icon_badge {
	background: var(--tone-ink-strong);
	color: var(--tone-canvas-base);
	box-shadow: 0 12px 30px var(--tone-ink-strong);
}

.christmas_gift_guide_snowflake {
	background: radial-gradient(circle, rgba(var(--tone-canvas-base-rgb), 0.95), rgba(var(--tone-text-muted-rgb), 0));
}

.christmas_gift_guide_snowflake::after {
	background: rgba(var(--tone-border-soft-rgb), 0.9);
}

.christmas_gift_guide_guide_category_title {
	color: var(--tone-gradient-brand);
}

.christmas_gift_guide_guide_category_desc {
	color: var(--tone-ink-strong) !important;
}

.christmas_gift_guide_guide_list_item {
	color: rgba(var(--tone-ink-strong-rgb), 0.9);
}

.christmas_gift_guide_list_bullet {
	background: linear-gradient(135deg, var(--tone-accent-primary), var(--tone-accent-primary));
	box-shadow: 0 0 8px rgba(var(--tone-text-muted-rgb), 0.45);
}

.christmas_social_proof_section {
	background: var(--tone-ink-strong);
	color: var(--tone-canvas-base);
}

.christmas_social_proof_glow {
	background: radial-gradient(circle, rgba(var(--tone-border-soft-rgb), 0.25), transparent 70%);
}

.christmas_social_proof_trust_badge {
	color: var(--xmas-gold);
}

.christmas_social_proof_star_rating {
	color: var(--xmas-gold);
}

.christmas_social_proof_testimonial_card {
	background: rgba(var(--tone-ink-strong-rgb), 0.35);
}

.christmas_social_proof_testimonial_stars {
	color: var(--xmas-gold);
}


.christmas_quiz_form_wrapper {
	background: var(--tone-canvas-muted);
	box-shadow: 0 30px 80px rgba(var(--tone-ink-strong-rgb), 0.12);
}

.christmas_quiz_form_wrapper::before {
	background: radial-gradient(circle, rgba(var(--tone-border-soft-rgb), 0.35), transparent 65%);
}

.christmas_quiz_field_card {
	background: var(--tone-canvas-base);
	box-shadow: 0 18px 40px rgba(var(--tone-ink-strong-rgb), 0.08);
}

.christmas_quiz_field_card:hover {
	border-color: rgba(var(--tone-border-soft-rgb), 0.65);
}

.christmas_quiz_field_badge {
	background: var(--tone-ink-strong);
	color: var(--tone-canvas-base);
}

.christmas_quiz_field_label {
	color: var(--tone-ink-strong) !important;
}

.christmas_quiz_field_hint {
	color: var(--tone-ink-strong) !important;
}

.christmas_quiz_select {
	background: var(--tone-canvas-base);
}

.christmas_quiz_select:disabled {
	color: rgba(var(--tone-ink-strong-rgb), 0.4);
	background-color: rgba(var(--tone-ink-strong-rgb), 0.04);
}

.christmas_quiz_choice_field {
	background: var(--tone-canvas-base);
}

.christmas_quiz_choice_option:hover {
	border-color: rgba(var(--tone-border-soft-rgb), 0.6);
}

.christmas_quiz_choice_option span {
	color: var(--xmas-forest);
}

.christmas_quiz_choice_option input:checked + span {
	color: var(--xmas-berry);
}

.christmas_quiz_choice_option input:checked + span::before {
	border-color: var(--xmas-berry);
	background: var(--xmas-berry);
	box-shadow: inset 0 0 0 3px var(--tone-canvas-base);
}



.christmas_quiz_result_highlight {
	color: var(--xmas-gold);
}


.christmas_quiz_submit_btn.is-loading::after {
	border-top-color: transparent;
}


.christmas_quiz_step_card {
	background: rgba(var(--tone-canvas-base-rgb), 0.95);
	box-shadow: 0 20px 60px rgba(var(--tone-ink-strong-rgb), 0.08);
}

.christmas_quiz_step_badge {
	background: var(--xmas-forest);
	color: var(--tone-canvas-base);
}

.christmas_quiz_step_connector {
	background: rgba(var(--tone-ink-strong-rgb), 0.2);
}

.christmas_quiz_description {
	color: var(--tone-canvas-base) !important;
}


.christmas_mega_cta_spotlight {
	background: linear-gradient(145deg, var(--tone-ink-strong) 0%, var(--tone-ink-strong) 60%, var(--tone-ink-strong) 100%);
}

.christmas_mega_cta_cta_line_bottom {
	background: linear-gradient(90deg, transparent, rgba(var(--tone-border-soft-rgb), 0.6), transparent);
}




.christmas_mega_cta_text {
	color: rgba(var(--tone-canvas-base-rgb), 0.85);
}

.christmas_mega_cta_trust_indicators {
	
}


.christmas_mega_cta_trust_dot {
	background: linear-gradient(135deg, var(--tone-accent-primary), var(--tone-accent-primary));
	box-shadow: 0 0 12px rgba(var(--tone-text-muted-rgb), 0.65);
}

.christmas_holiday_footer_footer {
	background: linear-gradient(145deg, var(--tone-ink-strong) 0%, var(--tone-ink-strong) 60%, var(--tone-ink-strong) 100%);
	color: var(--xmas-cream);
}

.christmas_holiday_footer_footer_line_top {
	background: linear-gradient(90deg, transparent, var(--xmas-gold), transparent);
}

.christmas_holiday_footer_footer_accent_snowflake {
	color: rgba(var(--tone-border-soft-rgb), 0.15);
}

.christmas_holiday_footer_footer_heading {
	color: var(--xmas-gold);
}

.christmas_holiday_footer_footer_links a {
	color: rgba(var(--tone-canvas-base-rgb), 0.72);
}

.christmas_holiday_footer_footer_bottom {
	color: rgba(var(--tone-canvas-base-rgb), 0.65);
}

.christmas_holiday_footer_footer_dec_line {
	background: rgba(var(--tone-border-soft-rgb), 0.35);
}

.christmas_holiday_footer_footer_dec_dot {
	background: var(--xmas-gold);
}
/* ================================================================
   COLOR COMPONENT RULES FROM: product-page.css
   ================================================================ */

.bmw-product-page {
	background: linear-gradient(to bottom right, var(--tone-canvas-muted), var(--tone-canvas-base));
}

.productinfo-gallery__main-display {
	background: linear-gradient(to bottom right, var(--tone-ink-strong), var(--tone-ink-strong), var(--tone-ink-strong));
	box-shadow: 0 25px 50px -12px rgba(var(--tone-ink-strong-rgb), 0.25);
}

.productinfo-gallery__overlay {
	background: linear-gradient(to top, rgba(var(--tone-ink-strong-rgb), 0.4), transparent, rgba(var(--tone-ink-strong-rgb), 0.2));
}

.productinfo-gallery__expand-button {
	background-color: rgba(var(--tone-ink-strong-rgb), 0.8);
	color: var(--tone-canvas-base);
	box-shadow: 0 10px 15px -3px rgba(var(--tone-ink-strong-rgb), 0.1);
}

.productinfo-gallery__expand-button:hover {
	background-color: rgba(var(--tone-ink-strong-rgb), 0.9);
}

.productinfo-gallery__nav-button {
	background-color: rgba(var(--tone-ink-strong-rgb), 0.6);
	color: var(--tone-canvas-base);
	box-shadow: 0 10px 15px -3px rgba(var(--tone-ink-strong-rgb), 0.1);
}

.productinfo-gallery__nav-button:hover {
	background-color: rgba(var(--tone-ink-strong-rgb), 0.8);
}

.productinfo-gallery__counter {
	background-color: rgba(var(--tone-ink-strong-rgb), 0.8);
	color: var(--tone-canvas-base);
	box-shadow: 0 10px 15px -3px rgba(var(--tone-ink-strong-rgb), 0.1);
}

.productinfo-gallery__thumbnail:hover {
	border-color: var(--tone-text-muted);
}


.productinfo-gallery__thumbnail-icon {
	color: var(--tone-canvas-base);
	box-shadow: 0 10px 15px -3px rgba(var(--tone-ink-strong-rgb), 0.1);
}

.productinfo-gallery__thumbnail-icon--video {
	background-color: var(--tone-ink-strong);
}

.productinfo-gallery__thumbnail-icon--360 {
	background-color: var(--tone-ink-strong);
}

.productinfo-gallery__thumbnail-icon--image {
	background-color: var(--tone-text-muted);
}

.productinfo-gallery__thumbnail-overlay {
	background-color: rgba(var(--tone-ink-strong-rgb), 0.2);
}

.productinfo-gallery__indicator {
	background-color: var(--tone-border-soft);
}

.productinfo-gallery__indicator:hover {
	background-color: var(--tone-text-muted);
}

.productinfo-gallery__indicator--active {
	background-color: var(--tone-ink-strong);
}

.product-info__badge--brand {
	color: var(--tone-ink-strong);
	background-color: transparent;
}

.product-info__badge--brand:hover {
	background-color: var(--tone-canvas-muted);
}

.product-info__badge--series {
	background: linear-gradient(to right, var(--tone-ink-strong), var(--tone-ink-strong));
	color: var(--tone-canvas-base);
}

.product-info__title {
	color: var(--tone-ink-strong);
}

.product-info__description {
	color: var(--tone-text-muted);
	/* max-width: 32rem; */
}

.product-info__price {
	color: var(--tone-ink-strong);
}

.product-info__compare-price {
	color: var(--tone-text-muted);
}

.product-info__discount-badge {
	color: var(--bp-ivory);
	background-color: var(--tone-ink-strong);
	color: var(--tone-canvas-base);
}

.product-info__discount-badge:hover {
	background: var(--tone-ink-strong);
}

.product-info__stars {
	color: var(--tone-border-soft);
}

.product-info__star {
	fill: currentColor;
}

.product-info__rating-score {
	color: var(--tone-ink-strong);
}

.product-info__rating-count {
	color: var(--tone-text-muted);
}

.product-info__highlight {
	color: var(--tone-ink-strong);
}

.product-info__separator {
	background-color: var(--tone-surface-subtle);
}

.product-info__variant-title {
	color: var(--tone-ink-strong);
}

.product-info__variant-option {
	background-color: var(--tone-canvas-base);
}

.product-info__variant-option:hover {
	border-color: var(--bp-sand);
	background-color: var(--bp-surface);
}


.product-info__variant-color {
	box-shadow: 0 1px 2px 0 rgba(var(--tone-ink-strong-rgb), 0.05);
}

.product-info__variant-color-overlay {
	background-color: rgba(var(--tone-ink-strong-rgb), 0.2);
}

.product-info__variant-option:hover .product-info__variant-name {
	color: var(--tone-ink-strong);
}

.product-info__variant-stock {
	color: var(--tone-text-muted);
}

.product-info__variant-price {
	color: var(--tone-ink-strong);
}

.product-info__variant-price-diff {
	color: var(--tone-text-muted);
}

.product-info__quantity-button {
	background-color: transparent;
}

.product-info__quantity-button:hover {
	background-color: var(--tone-canvas-muted);
}

.product-info__total {
	color: var(--tone-text-muted);
}

.product-info__total-price {
	color: var(--tone-ink-strong);
}

.product-info__add-to-cart-button {
	background-color: var(--tone-ink-strong);
	color: var(--tone-canvas-base);
	box-shadow: 0 10px 15px -3px var(--tone-ink-strong) !important;
}

.product-info__add-to-cart-button:hover {
	background-color: var(--tone-ink-strong) !important;
	box-shadow: 0 20px 25px -5px rgba(var(--tone-ink-strong-rgb), 0.1);
}

.product-info__buy-now-button {
	color: var(--tone-ink-strong);
	background-color: transparent;
}

.product-info__buy-now-button:hover {
	background-color: var(--tone-ink-strong) !important;
	color: var(--tone-canvas-base);
}

.product-badge--bestseller {
	background-color: var(--tone-canvas-muted);
	color: var(--tone-ink-strong);
}

.product-badge--low-stock {
	background-color: var(--tone-canvas-muted);
	color: var(--tone-ink-strong);
}

.product-badge--out-of-stock {
	background-color: var(--tone-surface-subtle);
	color: var(--tone-accent-primary);
}

.product-info__cta-trust-signals {
	background: linear-gradient(135deg, var(--tone-canvas-muted) 0%, var(--tone-canvas-base) 100%);
}

.product-info__trust-signal-icon {
	background-color: rgba(var(--tone-accent-primary-rgb), 0.1);
	color: var(--tone-ink-strong);
}

.product-info__trust-signal-icon svg {
	fill: currentColor;
}

.product-info__trust-signal-label {
	color: var(--tone-ink-strong);
}

.product-info__trust-signal-subtext {
	color: var(--tone-text-muted);
}

.product-info__return-policy-callout {
	background-color: rgba(var(--tone-accent-primary-rgb), 0.05);
}

.product-info__return-policy-icon {
	color: var(--tone-ink-strong);
}

.product-info__return-policy-icon svg {
	fill: currentColor;
}

.product-info__return-policy-title {
	color: var(--tone-ink-strong);
}

.product-info__return-policy-desc {
	color: var(--tone-text-muted);
}

.product-info__payment-title {
	color: var(--tone-ink-strong);
}

.product-info__payment-card {
	background: linear-gradient(to right, var(--tone-canvas-muted), var(--tone-canvas-base));
}

.product-info__payment-card--alt {
	background: linear-gradient(to right, var(--tone-canvas-base), var(--tone-canvas-muted));
}

.product-info__payment-name {
	color: var(--tone-ink-strong);
}

.product-info__payment-icon {
	color: var(--tone-ink-strong);
}

.product-info__payment-icon--apple {
	background-color: var(--tone-ink-strong);
	color: var(--tone-canvas-base);
}

.product-info__payment-amount {
	color: var(--tone-ink-strong);
}

.product-info__payment-subtitle {
	color: var(--tone-ink-strong);
}

.product-info__payment-description {
	color: var(--tone-text-muted);
}

.product-info__trust-title {
	color: var(--tone-ink-strong);
}

.product-info__trust-badge {
	background: linear-gradient(to bottom right, var(--tone-canvas-base), var(--tone-canvas-base));
}

.product-info__trust-badge:hover {
	border-color: var(--tone-surface-subtle);
	box-shadow: 0 10px 15px -3px rgba(var(--tone-ink-strong-rgb), 0.1);
}

.product-info__trust-badge--alt {
	background: linear-gradient(to bottom right, var(--tone-canvas-base), var(--tone-canvas-muted));
}

.product-info__trust-icon-wrapper {
	background-color: var(--tone-ink-strong);
	box-shadow: 0 1px 2px 0 rgba(var(--tone-ink-strong-rgb), 0.05);
}

.product-info__trust-icon-wrapper--gray {
	background-color: var(--tone-ink-strong);
}

.product-info__trust-icon-wrapper--light-gray {
	background-color: var(--tone-text-muted);
}

.product-info__trust-icon {
	color: var(--tone-canvas-base);
}

.product-info__trust-label {
	color: var(--tone-ink-strong);
}

.product-info__trust-sublabel {
	color: var(--tone-text-muted);
}

.product-info__benefit {
	color: var(--tone-text-muted);
}

.product-info__benefit ul li strong {
	color: var(--tone-text-muted);
}

.product-offer-section {
	background: var(--tone-canvas-muted);
}

.product-offer__title {
	color: var(--tone-ink-strong);
}

.product-offer__description {
	color: var(--tone-ink-strong) !important;
}

.product-offer__trust-badge {
	background: linear-gradient(to bottom right, var(--tone-canvas-base), var(--tone-canvas-base));
}

.product-offer__trust-badge:hover {
	border-color: var(--tone-border-soft);
}

.product-offer__trust-badge--alt {
	background: linear-gradient(to bottom right, var(--tone-canvas-base), var(--tone-canvas-base));
}

.product-offer__trust-icon-wrapper {
	background-color: var(--tone-ink-strong);
	box-shadow: 0 1px 2px 0 rgba(var(--tone-ink-strong-rgb), 0.05);
}

.product-offer__trust-icon-wrapper--gray {
	background-color: var(--tone-ink-strong);
}

.product-offer__trust-icon-wrapper--light-gray {
	background-color: var(--tone-ink-strong);
}

.product-offer__trust-icon {
	color: var(--tone-canvas-base);
}

.product-offer__trust-label_direct {
	color: var(--tone-ink-strong);
}

.product-offer__trust-label p {
	color: var(--tone-ink-strong);
}

.product-offer__trust-sublabel {
	color: var(--tone-ink-strong) !important;
}

@media (max-width: 500px) {
	.product-offer__trust-icon-wrapper {
	}

	.product-offer__trust-icon {
		color: var(--tone-canvas-base);
	}

	.product-offer__trust-icon-wrapper img {
	}

	.product-offer__trust-label_direct {
	}

	.product-offer__trust-label p {
	}
	.product-offer__trust-sublabel {
	}

	.product-offer__title {
		color: var(--tone-ink-strong);
	}
	.product-offer__description {
		color: var(--tone-ink-strong);
	}
	.product-offer__trust-grid {
	}
}

.product-features_section {
	color: var(--tone-ink-strong);
}

.product-features_divider {
	background: linear-gradient(to right, var(--tone-border-soft), var(--tone-ink-strong), var(--tone-border-soft));
}

.product-features_subheading {
	color: var(--tone-text-muted);
}

label[for="product-features_tab-btn-included"] {
	background: var(--tone-ink-strong);
	color: var(--tone-canvas-base);
	box-shadow: 0 1px 4px rgba(var(--tone-ink-strong-rgb), 0.1);
}

.product-features_card {
	background: var(--tone-canvas-base);
}

.product-features_card:hover {
	box-shadow: 0 2px 10px rgba(var(--tone-ink-strong-rgb), 0.1);
}

.product-features_card--highlight {
	background: linear-gradient(to bottom right, var(--tone-canvas-base), var(--tone-canvas-base));
	border-color: var(--tone-ink-strong) !important;
}

.product-features_icon-container {
	background: var(--tone-ink-strong);
}



.product-features_icon {
	color: var(--tone-canvas-base);
}

.product-features_badge {
	background: var(--tone-ink-strong);
	color: var(--tone-canvas-base);
}

.product-features_card-text p {
	color: var(--tone-text-muted);
}

.product-features_specs-box {
	background: var(--tone-canvas-base);
}

.product-features_specs-subtitle {
	color: var(--tone-text-muted);
}

.product-features_spec-row {
	background: var(--tone-canvas-muted);
}

.product-features_spec-row--highlight {
	background: var(--tone-ink-strong);
	color: var(--tone-canvas-base);
}

.product-features_included-section {
	background: var(--tone-canvas-base);
}

.product-features_included-subtitle {
	color: var(--tone-text-muted);
}

.product-features_included-item {
	background: var(--tone-canvas-muted);
}

.product-features_included-highlight {
	background: var(--tone-ink-strong);
	color: var(--tone-canvas-base);
}

.product-features_included-highlight-title {
	color: var(--tone-ink-strong) !important;
}

.product-features_included-highlight-text {
	color: var(--tone-ink-strong) !important;
}

.fitment-guide_container {
	color: var(--tone-ink-strong);
}

.fitment-guide_divider {
	background: linear-gradient(to right, var(--tone-border-soft), var(--tone-ink-strong), var(--tone-border-soft));
}

.fitment-guide_description {
	color: var(--tone-text-muted);
}

.fitment-guide_section {
	background: var(--tone-canvas-base);
}

.fitment-guide_summary {
	background: var(--tone-ink-strong) !important;
	color: var(--tone-canvas-base) !important;
}

.fitment-guide_section[open] .fitment-guide_summary {
	background: var(--tone-surface-subtle);
}

.fitment-guide_content {
	color: var(--tone-ink-strong);
}

.fitment-guide_table {
	background: var(--tone-canvas-base);
}

.fitment-guide_table th {
	background: var(--tone-surface-subtle);
}

.fitment-guide_note {
	color: var(--tone-ink-strong);
}

.product-review_reviews {
	color: var(--tone-ink-strong);
}

.product-review_reviews-badge {
	background: linear-gradient(to right, var(--tone-ink-strong), var(--tone-ink-strong));
	color: var(--tone-ink-strong);
}

.product-review_reviews-divider {
	background: linear-gradient(to right, var(--tone-border-soft), var(--tone-ink-strong), var(--tone-border-soft));
}

.product-review_rating-summary {
	background: linear-gradient(to right, var(--tone-canvas-base), var(--tone-canvas-base));
}

.product-review_rating-stars svg {
	fill: var(--tone-border-soft);
}

.product-review_rating-bar span:first-child {
	color: var(--tone-ink-strong);
}

.product-review_bar-track {
	background: var(--tone-surface-subtle);
}

.product-review_bar-fill {
	background: linear-gradient(to right, var(--tone-border-soft), var(--tone-accent-primary));
}

.product-review_verified {
	color: var(--tone-text-muted);
}

.product-review_review {
	background: var(--tone-canvas-base);
	box-shadow: 0 2px 8px rgba(var(--tone-ink-strong-rgb), 0.05);
}

.product-review_review-avatar {
	background: var(--tone-canvas-muted);
	color: var(--tone-accent-primary);
}

.product-review_review-location {
	color: var(--tone-text-muted);
}

.product-review_review-text {
	color: var(--tone-ink-strong);
}

.product-review_trust-banner {
	background: var(--tone-ink-strong);
}

.product_review_banner_heading {
	color: var(--tone-canvas-base);
}

.product_review_banner_text {
	color: var(--tone-canvas-base);
}

.complete-build {
	background: var(--tone-canvas-base);
}

.complete-build__accent-bottom {
	background: var(--tone-canvas-base);
	box-shadow: 0 0 20px rgba(var(--tone-text-muted-rgb), 0.5);
}

.hero-section__badge {
	background: rgba(var(--tone-ink-strong-rgb), 1);
	color: var(--tone-canvas-base);
}

.hero-section__badge:hover {
	background: rgba(var(--tone-canvas-base-rgb), 0.15);
	color: var(--tone-ink-strong);
	border-color: rgba(var(--tone-ink-strong-rgb), 0.5);
}

.hero-section__badge:hover > .hero-section__badge-text {
	color: var(--tone-ink-strong);
}

.hero-section__badge-icon {
	color: var(--tone-text-muted);
}

.hero-section__badge-text {
	color: var(--tone-canvas-base);
}

.hero-section__title {
	color: var(--tone-ink-strong);
}

.hero-section__title-highlight {
	background: linear-gradient(135deg, var(--tone-ink-strong) 0%, var(--tone-ink-strong) 100%);
	color: var(--tone-accent-primary) !important;
}

.hero-section__description {
	color: var(--tone-ink-strong);
}

.featured-product {
	background: linear-gradient(135deg, var(--tone-canvas-muted) 0%, var(--tone-canvas-base) 100%);
	box-shadow: 0 10px 25px rgba(var(--tone-ink-strong-rgb), 0.3);
}



.featured-product__image-container {
	background: var(--tone-ink-strong);
}

.featured-product__image-overlay {
	background: linear-gradient(180deg, transparent 0%, rgba(var(--tone-ink-strong-rgb), 0.8) 100%);
}

.featured-product__placeholder {
	background: var(--tone-ink-strong);
}

.featured-product__placeholder-icon {
	color: var(--tone-text-muted);
}



.featured-product__rating {
	background: rgba(var(--tone-ink-strong-rgb), 0.6);
}

.featured-product__star {
	fill: var(--tone-border-soft);
	color: var(--tone-border-soft);
}

.featured-product__title {
	color: var(--tone-ink-strong);
}

.featured-product__description {
	color: var(--tone-text-muted);
}

.featured-product__price {
	color: var(--tone-ink-strong);
}

.featured-product__compare-price {
	color: var(--tone-text-muted);
}

.featured-product__savings {
	color: var(--tone-ink-strong);
}

.featured-product__cta {
	background: var(--tone-ink-strong) !important;
	color: var(--tone-canvas-base) !important;
	box-shadow: 0 4px 12px rgba(var(--tone-accent-primary-rgb), 0.3);
}

.featured-product__cta:hover {
	background: var(--tone-canvas-base) !important;
	color: var(--tone-ink-strong) !important;
	box-shadow: 0 8px 20px rgba(var(--tone-ink-strong-rgb), 0.4);
}

.product-grid-section__title {
	color: var(--tone-ink-strong);
}

.product-grid-section__subtitle {
	color: var(--tone-ink-strong);
}

.product-grid-item {
	background: var(--tone-canvas-base);
}

.product-grid-item:hover {
	outline-color: rgba(var(--tone-canvas-base-rgb), 0.4);
	box-shadow: 0 20px 35px rgba(var(--tone-ink-strong-rgb), 0.4);
}

.product-grid-item__image-container {
	background: var(--tone-ink-strong);
}

.product-grid-item__image-overlay {
	background: rgba(var(--tone-ink-strong-rgb), 0.4);
}

.product-grid-item:hover .product-grid-item__image-overlay {
	background: rgba(var(--tone-ink-strong-rgb), 0.2);
}

.product-grid-item__placeholder {
	background: var(--tone-ink-strong);
}

.product-grid-item__placeholder-icon {
	color: var(--tone-text-muted);
}

.product-grid-item__badge {
	background: var(--tone-canvas-base);
	color: var(--tone-ink-strong);
}

.product-grid-item__cta-button {
	background: var(--tone-canvas-base);
	color: var(--tone-ink-strong);
	box-shadow: 0 10px 25px rgba(var(--tone-ink-strong-rgb), 0.3);
}

.product-grid-item__cta-button:hover {
	background: var(--tone-canvas-muted);
}

.product-grid-item__details {
	background: rgba(var(--tone-canvas-base-rgb), 0.9);
	color: inherit;
}

.product-grid-item__details:hover {
	color: inherit;
}

.product-grid-item__title {
	color: var(--tone-ink-strong);
}

.product-grid-item__price {
	color: var(--tone-ink-strong);
}

.product-grid-item__title-link {
	color: inherit;
}

.product-grid-item__title-link:hover {
	color: var(--tone-text-muted);
}

.product-grid-item__view-link {
	color: var(--tone-text-muted);
}

.product-grid-item__view-link:hover {
	color: var(--tone-ink-strong);
}

.installation-fitment-specs-section {
	background: linear-gradient(135deg, var(--tone-canvas-muted) 0%, var(--tone-canvas-base) 100%);
}

.installation-fitment-specs-section .decision-engine-section {
	background: transparent;
}

.fitment-logic-section {
	background: linear-gradient(135deg, var(--tone-canvas-muted) 0%, var(--tone-canvas-base) 100%);
}

.fitment-logic__title {
	color: var(--tone-ink-strong);
}

.fitment-logic__subtitle {
	color: var(--tone-text-muted);
}

.fitment-logic__label {
	color: var(--tone-text-muted);
}

.fitment-logic__select {
	background-color: var(--tone-canvas-base);
	color: var(--tone-ink-strong);
}

.fitment-logic__select:hover {
	border-color: var(--tone-text-muted);
}

.fitment-logic__select:focus {
	border-color: var(--tone-accent-primary);
	box-shadow: 0 0 0 3px rgba(var(--tone-accent-primary-rgb), 0.1);
}

.install-reality-section {
	background: transparent;
}

.install-reality__title {
	color: var(--tone-ink-strong);
}

.install-reality__description {
	color: var(--tone-text-muted);
}

.install-reality__highlight-label {
	color: var(--tone-text-muted);
}

.install-reality__highlight-value {
	color: var(--tone-ink-strong);
}

.install-reality__image-container {
	background: linear-gradient(135deg, var(--tone-ink-strong), var(--tone-ink-strong));
	box-shadow: 0 4px 20px rgba(var(--tone-ink-strong-rgb), 0.1);
}

.install-reality__image-container:hover {
	box-shadow: 0 12px 40px rgba(var(--tone-ink-strong-rgb), 0.2);
	border-color: var(--tone-accent-primary);
}

.install-reality__hover-badge {
	background: rgba(var(--tone-ink-strong-rgb), 0.95);
	color: var(--tone-canvas-base);
	box-shadow: 0 8px 32px rgba(var(--tone-ink-strong-rgb), 0.3);
}

.ownership-impact-section {
	background: linear-gradient(135deg, var(--tone-canvas-muted) 0%, var(--tone-canvas-base) 100%);
}

.ownership-impact__title {
	color: var(--tone-ink-strong);
}

.ownership-impact__subtitle {
	color: var(--tone-text-muted);
}

.ownership-impact__card {
	background: var(--tone-canvas-base);
}

.ownership-impact__card:hover {
	border-color: var(--tone-accent-primary);
	box-shadow: 0 12px 30px rgba(var(--tone-accent-primary-rgb), 0.2);
}

.ownership-impact__card-icon {
	background: linear-gradient(135deg, var(--tone-accent-primary), var(--tone-text-muted));
	color: var(--tone-canvas-base);
}

.ownership-impact__card-title {
	color: var(--tone-ink-strong);
}

.ownership-impact__card-description {
	color: var(--tone-text-muted);
}


.spec-compatibility__title {
	color: var(--tone-ink-strong);
}

.spec-compatibility__subtitle {
	color: var(--tone-text-muted);
}

.spec-compatibility__block-title {
	color: var(--tone-ink-strong);
}

.spec-compatibility__table-wrapper {
	background: var(--tone-canvas-base);
}

.spec-compatibility__table-wrapper::-webkit-scrollbar-track {
	background: var(--tone-canvas-muted);
}

.spec-compatibility__table-wrapper::-webkit-scrollbar-thumb {
	background: var(--tone-text-muted);
}

.spec-compatibility__table-wrapper::-webkit-scrollbar-thumb:hover {
	background: var(--tone-accent-primary);
}

.spec-compatibility__table {
	background: var(--tone-canvas-base);
}

.spec-compatibility__table_theader {
	background: var(--tone-ink-strong);
}

.spec-compatibility__table th {
	background: transparent;
	color: var(--tone-canvas-base);
}

.spec-compatibility__table thead:hover{
	color: var(--tone-ink-strong);
}

.spec-compatibility__table_theader:hover{
	color: var(--tone-ink-strong);
}

.spec-compatibility__table th:hover {
	color: var(--tone-ink-strong);
}

.spec-compatibility__table td {
	color: var(--tone-ink-strong);
}

.spec-compatibility__table tr:hover {
	background-color: var(--tone-canvas-muted);
	}

.spec-compatibility__table thead tr:first-child:hover {
	background-color: var(--tone-text-muted);
	color: var(--tone-ink-strong);
}

.spec-compatibility__carousel-button {
	color: var(--tone-canvas-base);
}

.spec-compatibility__carousel-button:hover:not(:disabled) {
}

.spec-compatibility__carousel-indicator {
	color: var(--tone-text-muted);
}







.spec-compatibility__step {
	background: linear-gradient(135deg, var(--tone-canvas-base), var(--tone-canvas-muted));
}

.spec-compatibility__step-number {
	color: var(--tone-canvas-base);
}

.spec-compatibility__step-title {
	color: var(--tone-ink-strong);
}

.spec-compatibility__step-description {
	color: var(--tone-ink-strong);
}

.spec-compatibility__block-subtitle {
	color: var(--tone-text-muted);
}

.installation-difficulty-warning button button {
	background: var(--tone-accent-primary) !important;
}

.installation-difficulty-warning button button:hover {
	box-shadow: 0 4px 12px rgba(var(--tone-ink-strong-rgb), 0.1);
	color: var(--tone-accent-primary) !important;
	background: var(--tone-surface-subtle) !important;
}

.installation-difficulty-warning:hover {
	box-shadow: 0 4px 12px rgba(var(--tone-ink-strong-rgb), 0.1);
}

.installation-difficulty-warning--pro {
	background: linear-gradient(135deg, var(--tone-ink-strong), var(--tone-ink-strong));
	border-color: var(--tone-text-muted);
}

.installation-difficulty-warning--pro p {
	color: var(--tone-canvas-base);
}

.installation-difficulty-warning--moderate {
	background: var(--tone-ink-strong);
	border-color: var(--tone-accent-primary);
}

.installation-difficulty-warning--moderate p {
	color: var(--tone-canvas-base);
}

.install-reality__placeholder {
	background: linear-gradient(135deg, var(--tone-ink-strong), var(--tone-ink-strong));
}

.install-reality__placeholder-text {
	color: var(--tone-text-muted);
}

.fitment-compatibility-message__content {
	box-shadow: 0 8px 24px rgba(var(--tone-ink-strong-rgb), 0.12);
}

.fitment-compatibility-message__content:hover {
	box-shadow: 0 12px 32px rgba(var(--tone-accent-primary-rgb), 0.25);
}

.fitment-compatibility-message__content--compatible {
	background: linear-gradient(135deg, rgba(var(--tone-accent-primary-rgb), 0.95) 0%, rgba(var(--tone-text-muted-rgb), 0.95) 100%);
	border-left-color: var(--tone-accent-primary);
	color: var(--tone-canvas-base);
}

.fitment-compatibility-message__content--incompatible {
	background: linear-gradient(135deg, rgba(var(--tone-text-muted-rgb), 0.95) 0%, rgba(var(--tone-text-muted-rgb), 0.95) 100%);
	border-left-color: var(--tone-accent-primary);
	color: var(--tone-canvas-base);
}







@keyframes subtle-pulse {
	100% {
		box-shadow: 0 4px 16px rgba(var(--tone-accent-primary-rgb), 0.3);
	}
	50% {
		box-shadow:
	}
}

.install-reality__video-play-button {
	background: rgba(var(--tone-ink-strong-rgb), 0.7);
	color: var(--tone-canvas-base);
	box-shadow: 0 4px 20px rgba(var(--tone-ink-strong-rgb), 0.4);
}

.install-reality__video-wrapper:hover .install-reality__video-play-button {
	background: rgba(var(--tone-accent-primary-rgb), 0.9);
	box-shadow:
}

@keyframes play-pulse {
	100% {
		box-shadow: 0 4px 20px rgba(var(--tone-ink-strong-rgb), 0.4);
	}
	50% {
		box-shadow:
	}
}

.oem-comparison-section {
	background: var(--tone-canvas-muted);
}

.oem-comparison__header-logo {
	background: var(--tone-canvas-base);
}

.oem-comparison__header-logo--oem {
	border-color: var(--tone-text-muted);
}

.oem-comparison__header-logo--oem:hover {
	border-color: var(--tone-text-muted);
}

.oem-comparison__header-logo--bp {
	border-color: var(--tone-accent-primary);
}

.oem-comparison__header-logo--bp:hover {
	border-color: var(--tone-text-muted);
}

.oem-comparison__header-vs {
	color: var(--tone-text-muted);
}

.oem-comparison__badge {
	background: var(--tone-ink-strong);
	color: var(--tone-canvas-base);
}

.oem-comparison__title {
	color: var(--tone-ink-strong);
}

.oem-comparison__vs {
	color: var(--tone-text-muted);
}

.oem-comparison__vs::after {
	background: var(--tone-surface-subtle);
}

.oem-comparison__subtitle {
	color: var(--tone-text-muted);
}

.oem-comparison__subtitle-icon {
	color: var(--tone-accent-primary);
}

.oem-comparison__table-header {
	background: var(--tone-surface-subtle);
}

.oem-comparison__table-cell--empty {
	background: var(--tone-canvas-base);
}

.oem-comparison__header-label {
	color: var(--tone-text-muted);
}

.oem-comparison__table-cell--bp {
	background: var(--tone-canvas-base);
}

.oem-comparison__table-cell--oem {
	color: var(--tone-text-muted);
}

.oem-comparison__table-cell--bp {
	color: var(--tone-ink-strong);
}

.oem-comparison__table-cell--bp::after {
	background: linear-gradient(90deg, var(--tone-accent-primary) 0%, var(--tone-text-muted) 100%);
}

.oem-comparison__item {
	background: var(--tone-canvas-base);
	box-shadow: none;
}

.oem-comparison__item::before {
	background: var(--tone-accent-primary);
}

.oem-comparison__item:hover {
	box-shadow: 0 2px 12px rgba(var(--tone-ink-strong-rgb), 0.08);
	border-left-color: var(--tone-accent-primary);
}

.oem-comparison__table-cell--category {
	background: var(--tone-canvas-base);
}

.oem-comparison__table-cell--oem-data {
	background: var(--tone-canvas-base);
}

.oem-comparison__table-cell--bp-data {
	background: var(--tone-canvas-base);
}

.oem-comparison__item-number {
	color: var(--tone-ink-strong);
}

.oem-comparison__item-category {
	color: var(--tone-text-muted);
}

.oem-comparison__status--standard {
	background: transparent;
	box-shadow: none;
}

.oem-comparison__status--enhanced {
	background: var(--tone-accent-primary);
	box-shadow: 0 0 0 2px rgba(var(--tone-accent-primary-rgb), 0.2);
}

.oem-comparison__content {
	color: var(--tone-text-muted);
}

.oem-comparison__content--highlight {
	color: var(--tone-ink-strong);
}

.oem-comparison__carousel-button {
	background: var(--tone-ink-strong);
	color: var(--tone-canvas-base);
	box-shadow: none;
}

.oem-comparison__carousel-button:hover:not(:disabled) {
	background: var(--tone-accent-primary);
	border-color: var(--tone-accent-primary);
	box-shadow: 0 2px 8px rgba(var(--tone-accent-primary-rgb), 0.3);
}

.oem-comparison__carousel-button:disabled {
	background: var(--tone-canvas-muted);
	color: var(--tone-text-muted);
}

.oem-comparison__dot {
	background: var(--tone-surface-subtle);
}

.oem-comparison__dot:hover {
	background: var(--tone-text-muted);
}

.oem-comparison__dot--active {
	background: var(--tone-ink-strong);
}

@media (max-width: 900px) {
	.oem-comparison__carousel-grid {
	}

	.oem-comparison__table-header {
	}

	.oem-comparison__title {
	}

	.oem-comparison__vs {
	}

	.oem-comparison__table-row {
	}

	.oem-comparison__table-cell--category {
	}

	.oem-comparison__table-cell--oem-data {
	}

	.oem-comparison__table-cell--bp-data {
	}

	.oem-comparison__table-cell--bp-data::before {
	}

	.oem-comparison__data-wrapper {
	}

	.oem-comparison__status-indicator {
	}

	.oem-comparison__table-cell--category {
	}

	.oem-comparison__table-cell--oem-data .oem-comparison__content::before {
		color: var(--tone-text-muted);
	}

	.oem-comparison__table-cell--bp-data .oem-comparison__content::before {
		color: var(--tone-ink-strong);
	}

	.oem-comparison__item-number {
	}

	.oem-comparison__item-category {
	}

	.oem-comparison__content {
	}
}

.build-transparency__bg-gradient {
	
}

.build-transparency__bg-grid {

}

.build-transparency__bg-accent--1 {
	background: radial-gradient(circle, rgba(var(--tone-accent-primary-rgb), 0.4), transparent);
}

.build-transparency__bg-accent--2 {
	background: radial-gradient(circle, rgba(var(--tone-accent-primary-rgb), 0.3), transparent);
}

.build-transparency__eyebrow {
	color: var(--tone-accent-primary);
	text-shadow: 0 2px 8px rgba(var(--tone-accent-primary-rgb), 0.2);
}



.build-transparency__header-line {
	background: linear-gradient(90deg, transparent, var(--tone-accent-primary), transparent);
}

.build-transparency__subtitle {
	color: rgba(var(--tone-surface-subtle-rgb), 0.75);
}

.build-transparency__feature-content {
	background: linear-gradient(135deg, rgba(var(--tone-canvas-base-rgb), 0.06) 0%, rgba(var(--tone-canvas-base-rgb), 0.01) 100%);
	box-shadow:
}

.build-transparency__feature:hover .build-transparency__feature-content {
	background: linear-gradient(135deg, rgba(var(--tone-accent-primary-rgb), 0.1) 0%, rgba(var(--tone-canvas-base-rgb), 0.04) 100%);
	border-color: rgba(var(--tone-accent-primary-rgb), 0.5);
	box-shadow:
}

.build-transparency__image-container {
	background: linear-gradient(135deg, rgba(var(--tone-accent-primary-rgb), 0.1), rgba(var(--tone-ink-strong-rgb), 0.1));
}

.build-transparency__image-frame {
	background-color: var(--tone-canvas-base);
}

.build-transparency__image-label {
	color: rgba(var(--tone-canvas-base-rgb), 0.7);
	background: rgba(var(--tone-ink-strong-rgb), 0.4);
}

.build-transparency__feature:hover .build-transparency__image-label {
	background: rgba(var(--tone-accent-primary-rgb), 0.15);
	color: var(--tone-accent-primary);
	border-color: rgba(var(--tone-accent-primary-rgb), 0.5);
}


.build-transparency__feature:hover .build-transparency__icon-bg {
	box-shadow: 0 16px 40px -8px rgba(var(--tone-accent-primary-rgb), 0.4);
}

.build-transparency__feature-title {
	color: var(--tone-canvas-base);
}

.build-transparency__feature-title-number {
	color: var(--tone-accent-primary);
}

.build-transparency__feature:hover .build-transparency__feature-title-number {
	color: var(--tone-accent-primary);
}

.build-transparency__feature-description {
	color: rgba(var(--tone-surface-subtle-rgb), 0.8);
}

.build-transparency__feature-description::after {
	background: transparent;
	box-shadow: none;
}

.build-transparency__expand-label {
	color: var(--tone-accent-primary);
	box-shadow: none;
	background: none;
}

.build-transparency__expand-label:hover {
	color: var(--tone-canvas-base);
}

.build-transparency__explore-btn {
	background: linear-gradient(135deg, rgba(var(--tone-accent-primary-rgb), 0.15) 0%, rgba(var(--tone-accent-primary-rgb), 0.05) 100%);
	color: var(--tone-accent-primary);
	box-shadow: 0 8px 16px -8px rgba(var(--tone-accent-primary-rgb), 0.25);
}

.build-transparency__explore-btn:hover {
	background: linear-gradient(135deg, rgba(var(--tone-accent-primary-rgb), 0.3) 0%, rgba(var(--tone-accent-primary-rgb), 0.12) 100%);
	border-color: rgba(var(--tone-accent-primary-rgb), 0.7);
	box-shadow: 0 16px 32px -8px rgba(var(--tone-accent-primary-rgb), 0.4);
}

.build-transparency__explore-btn--active {
	background: linear-gradient(135deg, rgba(var(--tone-accent-primary-rgb), 0.4) 0%, rgba(var(--tone-accent-primary-rgb), 0.15) 100%);
	border-color: var(--tone-accent-primary);
	color: var(--tone-canvas-base);
}

.build-transparency__feature-accent {
	background: linear-gradient(90deg, rgba(var(--tone-accent-primary-rgb), 0.5), transparent);
}

.build-transparency__step:hover .build-transparency__badge {
	border-color: rgba(var(--tone-canvas-base-rgb), 0.5);
	box-shadow: 0 30px 55px -40px rgba(var(--tone-ink-strong-rgb), 0.85);
}

.build-transparency__badge img {
	background: rgba(var(--tone-ink-strong-rgb), 0.35);
	box-shadow: inset 0 0 0 1px rgba(var(--tone-canvas-base-rgb), 0.05);
}

.build-transparency__step-image {
	background: var(--tone-ink-strong);
}

.build-transparency__placeholder {
	background: var(--tone-ink-strong);
}

.installation-options-section {
	background: linear-gradient(135deg, var(--bp-surface) 0%, var(--tone-canvas-base) 100%);
}

.installation-options-section::before {
	background: linear-gradient(90deg, transparent 0%, var(--bp-border) 50%, transparent 100%);
}

.installation-options__label {
	color: var(--bp-sand);
}

.installation-options__label::after {
	background: var(--bp-sand);
}

.installation-options__title {
	color: var(--bp-charcoal);
}

.installation-options__description {
	color: var(--bp-text-secondary);
}

.installation-options__card {
	background: var(--bp-ivory);
}

.installation-options__card-image {
	background: var(--bp-surface);
}

.installation-options__video-play-button {
	background: rgba(var(--tone-ink-strong-rgb), 0.85);
	color: var(--bp-ivory);
}

.installation-options__video-wrapper:hover .installation-options__video-play-button {
	background: var(--bp-sand);
	color: var(--bp-charcoal);
}

.installation-options__card::before {
	background: var(--bp-sand);
}

.installation-options__card:hover {
	border-color: var(--bp-sand);
	box-shadow: 0 8px 24px rgba(var(--tone-ink-strong-rgb), 0.08);
}

.installation-options__card-number {
	color: var(--bp-sand);
}

.installation-options__card-title {
	color: var(--bp-charcoal);
}

.installation-options__card:hover .installation-options__card-title {
	color: var(--bp-text-primary);
}

.installation-options__card-subtitle {
	color: var(--bp-text-secondary);
}

.installation-options__feature {
	color: var(--bp-text-secondary);
}

.installation-options__card:hover .installation-options__feature {
	color: var(--bp-text-primary);
}



.installation-options__card-button {
	color: var(--bp-ivory);
	background: var(--bp-charcoal);
}

.installation-options__card-button::before {
	background: var(--bp-sand);
}

.installation-options__card-button:focus {
	color: var(--bp-charcoal);
	border-color: var(--bp-sand);
	box-shadow: 0 4px 16px rgba(var(--tone-accent-primary-rgb), 0.3);
}

.installation-options__card-button:active {
	box-shadow: 0 2px 8px rgba(var(--tone-accent-primary-rgb), 0.2);
}

.installation-options__info {
	background: var(--bp-charcoal);
}

.installation-options__info-main-title {
	color: var(--bp-ivory);
}

.installation-options__info-description {
	color: rgba(var(--tone-canvas-base-rgb), 0.85);
}

.installation-options__info-title {
	color: var(--bp-ivory);
}

.installation-options__info-text {
	color: rgba(var(--tone-canvas-base-rgb), 0.75);
}

.installation-options__info-icon {
	color: var(--bp-sand);
}



.installation-options__cta-title {
	color: var(--bp-charcoal);
}

.installation-options__cta-description {
	color: var(--bp-text-secondary);
}







.installation-options__cta-note {
	color: var(--bp-text-secondary);
}

@media (hover: none) and (pointer: coarse) {
	.installation-options__card:hover {
	}

	.installation-options__card:hover::before {
	}

	.installation-options__card:active {
		box-shadow: 0 4px 16px rgba(var(--tone-ink-strong-rgb), 0.08);
	}

	.installation-options__card:active::before {
	}

	.installation-options__card:hover .installation-options__card-image img {
	}

	.installation-options__card:active .installation-options__card-image img {
	}
}

.decision-engine-section {
	background: linear-gradient(135deg, var(--tone-canvas-base) 0%, var(--tone-canvas-muted) 100%);
}

.decision-engine__title {
	color: var(--tone-ink-strong);
}

.decision-engine__point {
	background: linear-gradient(135deg, var(--tone-canvas-base), var(--tone-canvas-muted));
}

.decision-engine__point-number {
	background: linear-gradient(135deg, var(--tone-accent-primary), var(--tone-text-muted));
	color: var(--tone-canvas-base);
}

.decision-engine__point-label {
	color: var(--tone-text-muted);
}

.decision-engine__point-value {
	color: var(--tone-ink-strong);
}

.bmw-product-page {
	background: linear-gradient(135deg, var(--bp-ivory), var(--bp-sand));
	color: var(--bp-text-primary);
}

.bmw-product-page__main-container {
	background-color: rgba(var(--tone-canvas-base-rgb), 0.9);
	box-shadow: 0 25px 60px rgba(var(--tone-ink-strong-rgb), 0.12);
}

.productinfo-gallery__main-display {
	background: linear-gradient(145deg, var(--bp-forest), var(--bp-charcoal));
	box-shadow: 0 25px 50px -12px rgba(var(--tone-ink-strong-rgb), 0.45);
}

.productinfo-gallery__overlay {
	background: linear-gradient(to top, var(--bp-overlay-dark), transparent, var(--bp-overlay-light));
}

.productinfo-gallery__nav-button {
	background-color: var(--bp-charcoal);
	color: var(--bp-ivory);
}

.productinfo-gallery__nav-button:hover {
	background-color: var(--bp-crimson);
}

.productinfo-gallery__counter {
	background-color: var(--tone-ink-strong) !important;
}

.productinfo-gallery__thumbnail {
	border-color: var(--bp-border);
	background-color: var(--bp-ivory);
}

.productinfo-gallery__thumbnail--active {
	border-color: var(--bp-crimson);
	box-shadow: 0 12px 25px rgba(var(--tone-text-muted-rgb), 0.25);
}

.productinfo-gallery__indicator {
	background-color: var(--bp-border);
}

.productinfo-gallery__indicator--active {
	background-color: var(--bp-crimson);
}

.product-info__badge--brand {
	border-color: var(--bp-forest);
	color: var(--bp-forest);
}

.product-info__badge--brand:hover {
	background-color: var(--bp-muted);
}

.product-info__badge--series {
	background: linear-gradient(120deg, var(--bp-forest), var(--bp-crimson));
}

.product-review_verified {
	color: var(--bp-text-secondary);
}

.product-info__price {
	color: var(--bp-charcoal);
}

.product-info__compare-price {
	color: rgba(var(--tone-ink-strong-rgb), 0.4);
}

.product-info__discount-badge {
	color: var(--bp-ivory);
}

.product-info__highlight {
	color: var(--bp-forest);
}

.product-info__separator {
	background-color: var(--bp-border);
}

.product-info__variant-option {
	background-color: var(--bp-ivory);
	border-color: var(--bp-border);
}

.product-info__variant-option:hover {
	border-color: var(--bp-sand);
	background-color: var(--bp-surface);
}

.product-info__variant-option--active {
	border-color: var(--tone-canvas-base);
	background-color: var(--tone-ink-strong);
  color: var(--tone-canvas-base);
}

.product-info__variant-option--active .product-info__variant-name{
 color: var(--tone-canvas-base);
}
.product-info__quantity-controls {
	border-color: var(--bp-border);
}

.product-info__quantity-button:hover {
	background-color: rgba(var(--tone-border-soft-rgb), 0.3);
}

.product-info__add-to-cart-button {
	color: var(--bp-ivory);
	box-shadow: 0 15px 35px rgba(var(--tone-text-muted-rgb), 0.3);
}

.product-info__buy-now-button {
	border-color: var(--bp-forest);
	color: var(--bp-forest);
}

.product-info__buy-now-button:hover {
	background-color: var(--bp-forest);
	color: var(--bp-ivory);
}

.product-info__payment-card--alt {
	background: linear-gradient(135deg, var(--bp-ivory), var(--bp-surface));
	border-color: var(--bp-border);
}

.product-info__payment-icon--apple {
	background-color: var(--bp-charcoal);
}

.product-info__trust-badge {
	background: linear-gradient(160deg, var(--bp-ivory), var(--bp-surface));
	border-color: var(--bp-border);
}

.product-info__trust-icon-wrapper--gray {
	background: var(--bp-charcoal);
}

.product-info__trust-icon-wrapper--light-gray {
	background: var(--bp-crimson);
}

.product-info__trust-label {
	color: var(--bp-text-primary);
}

.product-info__trust-sublabel {
	color: var(--bp-text-secondary);
}

.product-offer-section {
	background: linear-gradient(120deg, var(--bp-ivory), var(--bp-sand));
	border-color: var(--bp-border);
}

.product-offer__title {
	color: var(--bp-forest);
}

.product-offer__trust-badge {
	background: linear-gradient(150deg, var(--bp-ivory), var(--bp-surface));
	border-color: var(--bp-border);
}

.product-offer__trust-icon-wrapper {
	background: var(--bp-charcoal);
}

.product-offer__trust-icon-wrapper--gray {
	background: var(--bp-forest);
}

.product-offer__trust-icon-wrapper--light-gray {
	background: var(--bp-crimson);
}

.product-offer__trust-label p {
	color: var(--bp-text-primary);
}

.product-features_section {
	background-color: var(--bp-surface);
	box-shadow: 0 25px 45px rgba(var(--tone-ink-strong-rgb), 0.08);
}

.product-features_divider {
	background: linear-gradient(90deg, var(--bp-crimson), var(--bp-forest), var(--bp-sand));
}



.product-features_card {
	background: var(--bp-ivory);
	border-color: var(--bp-border);
}

.product-features_card--highlight {
	background: linear-gradient(145deg, var(--bp-ivory), var(--bp-surface));
	border-color: rgba(var(--tone-text-muted-rgb), 0.35);
}



.product-features_spec-row {
	background: rgba(var(--tone-border-soft-rgb), 0.2);
}

.product-features_spec-row--highlight {
	background: linear-gradient(130deg, var(--bp-forest), var(--bp-charcoal));
}

.product-features_included-item {
	background: rgba(var(--tone-ink-strong-rgb), 0.05);
}

.product-features_included-highlight {
	background: linear-gradient(120deg, var(--bp-crimson), var(--bp-forest));
}

.fitment-guide_section {
	border-color: var(--bp-border);
	background: var(--bp-ivory);
}

.fitment-guide_summary {
	background: rgba(var(--tone-border-soft-rgb), 0.35);
}

.fitment-guide_section[open] .fitment-guide_summary {
	background: rgba(var(--tone-text-muted-rgb), 0.15);
}

.fitment-guide_table th {
	background: rgba(var(--tone-ink-strong-rgb), 0.1);
}

.product-review_reviews-badge {
	background: linear-gradient(130deg, var(--bp-forest), var(--bp-crimson));
}

.product-review_rating-summary {
	border-color: var(--bp-border);
	background: linear-gradient(135deg, var(--bp-ivory), var(--bp-surface));
}

.product-review_bar-track {
	background: rgba(var(--tone-border-soft-rgb), 0.5);
}

.product-review_bar-fill {
	background: linear-gradient(120deg, var(--bp-forest), var(--bp-crimson));
}

.product-review_review {
	border-color: var(--bp-border);
	background: var(--bp-surface);
}

.product-review_review-avatar {
	background: rgba(var(--tone-text-muted-rgb), 0.1);
	border-color: rgba(var(--tone-text-muted-rgb), 0.2);
	color: var(--bp-crimson);
}

.product-review_trust-banner {
	background: linear-gradient(120deg, var(--bp-crimson), var(--bp-charcoal));
	border-color: transparent;
}

.complete-build {
	background: linear-gradient(160deg, var(--bp-ivory), var(--bp-sand));
}



.hero-section__badge:hover {
	background: var(--bp-crimson);
	color: var(--bp-ivory);
}

.hero-section__badge:hover > .hero-section__badge-text {
	color: var(--bp-ivory);
}

.hero-section__badge-icon {
	color: var(--bp-sand);
}

.hero-section__title {
	color: var(--bp-charcoal);
}

.hero-section__title-highlight {
	background: linear-gradient(120deg, var(--bp-crimson), var(--bp-forest));
}

.hero-section__description {
	color: var(--bp-text-secondary);
}

.featured-product {
	background: linear-gradient(145deg, var(--bp-ivory), var(--bp-surface));
	border-color: var(--bp-border);
}

.featured-product:hover {
	border-color: var(--bp-crimson);
	box-shadow: 0 25px 50px rgba(var(--tone-ink-strong-rgb), 0.35);
}

.product-grid-item__image-container {
	background: var(--bp-forest);
}


.featured-product__description {
	color: var(--bp-text-secondary);
}

.featured-product__savings {
	color: var(--bp-forest);
}

.featured-product__cta {
	background: linear-gradient(120deg, var(--bp-crimson), var(--bp-forest));
	color: var(--bp-ivory);
}

.featured-product__cta:hover {
	background: var(--bp-ivory);
	color: var(--bp-charcoal);
}

.product-grid-item {
	outline-color: rgba(var(--tone-border-soft-rgb), 0.6);
	background: var(--bp-surface);
}

.product-grid-item__badge {
	background: var(--bp-sand);
	color: var(--bp-charcoal);
}

.product-grid-item__cta-button {
	background: var(--bp-crimson);
	color: var(--bp-ivory);
}

.product-grid-item__cta-button:hover {
	background: var(--bp-charcoal);
	color: var(--bp-ivory);
}

.product-grid-item__details {
	background: rgba(var(--tone-canvas-base-rgb), 0.95);
}

.product-grid-section__subtitle {
	color: var(--bp-text-secondary);
}

.product-faq-section {
	background: var(--tone-canvas-muted);
}

.product-faq__title {
	color: var(--tone-ink-strong);
}

.product-faq__subtitle {
	color: var(--tone-text-muted);
}

.product-faq__item {
	background: transparent;
}

.product-faq__trigger {
	background: transparent;
}



.product-faq__trigger-text {
	color: var(--tone-ink-strong);
}


.product-faq__trigger-icon {
	color: var(--tone-text-muted);
}

.product-faq__trigger[aria-expanded="true"] .product-faq__trigger-icon {
	color: var(--tone-accent-primary);
}

.

.product-faq__content-inner {
	color: var(--tone-text-muted);
}

.product-offer__policy-support-section {
	background: linear-gradient(135deg, var(--tone-canvas-base) 0%, var(--tone-canvas-base) 100%);
	box-shadow: 0 4px 20px rgba(var(--tone-ink-strong-rgb), 0.08);
}

.product-offer__shipping-badge {
	background: linear-gradient(135deg, rgba(var(--tone-accent-primary-rgb), 0.15) 0%, rgba(var(--tone-border-soft-rgb), 0.1) 100%);
	box-shadow: 0 2px 8px rgba(var(--tone-accent-primary-rgb), 0.15);
}

.product-offer__shipping-icon {
	color: var(--bp-sand);
}

.product-offer__shipping-text {
	color: var(--bp-text-primary);
}

.product-offer__shipping-text strong {
	color: var(--bp-sand);
}

.product-offer__policy-heading {
	color: var(--bp-text-primary);
}

.product-offer__policy-card {
	background: var(--tone-canvas-base);
	box-shadow: 0 2px 12px rgba(var(--tone-ink-strong-rgb), 0.06);
}

.product-offer__policy-card:hover {
	box-shadow: 0 8px 24px rgba(var(--tone-ink-strong-rgb), 0.12);
	border-color: var(--bp-sand);
}

.product-offer__policy-icon-wrapper {
	background: linear-gradient(135deg, var(--bp-sand) 0%, var(--tone-accent-primary) 100%);
	box-shadow: 0 4px 12px rgba(var(--tone-accent-primary-rgb), 0.25);
}

.product-offer__policy-icon {
	color: var(--tone-canvas-base);
}

.product-offer__policy-title {
	color: var(--bp-text-primary);
}

.product-offer__policy-highlight {
	color: var(--bp-sand);
	background: rgba(var(--tone-accent-primary-rgb), 0.1);
}

.product-offer__policy-text {
	color: var(--bp-text-secondary);
}

.product-offer__policy-conditions {
	color: var(--bp-text-secondary);
}

.product-offer__policy-conditions li::before {
	color: var(--bp-sand);
}

.product-offer__contact-item {
	background: var(--bp-surface);
}

.product-offer__contact-item:hover {
	background: rgba(var(--tone-accent-primary-rgb), 0.1);
}

.product-offer__contact-icon {
	color: var(--bp-sand);
}

.product-offer__contact-link {
	color: var(--bp-text-primary);
}

.product-offer__contact-link:hover {
	color: var(--bp-sand);
}

.product-offer__contact-text {
	color: var(--bp-text-primary);
}

.oem-comparison-section {
	color: var(--tone-canvas-base);
}

.oem-assessment__title {
	color: var(--tone-text-muted);
}

.oem-assessment__score-card {
	background: var(--tone-canvas-base);
}

.oem-assessment__score-card:hover {
	border-color: var(--tone-accent-primary);
}

.oem-assessment__score-label {
	color: var(--tone-text-muted);
}

.oem-assessment__score-value {
	color: var(--tone-ink-strong);
}

.oem-assessment__brand-logo {
	background: var(--tone-canvas-muted);
}

.oem-visual-comparison__container {
	background: var(--tone-canvas-base);
}

.oem-visual-comparison__image {
	background: var(--tone-canvas-muted);
}

.oem-metrics__title {
	color: var(--tone-text-muted);
}

.oem-metrics__item {
	background: var(--tone-canvas-base);
}

.oem-metrics__label {
	color: var(--tone-ink-strong);
}

.oem-metrics__value {
	color: var(--tone-text-muted);
}

.oem-metrics__value--highlight {
	color: var(--tone-ink-strong);
}

.oem-metrics__vs {
	color: var(--tone-text-muted);
}

@media (max-width: 768px) {
	.oem-metrics__carousel-wrapper {
	}

	.oem-metrics__carousel-track {
	}

	.oem-metrics__carousel-slide {
	}

	.oem-metrics__item {
	}

	.oem-metrics__carousel-dots {
	}

	.oem-metrics__dot {
		background: var(--tone-surface-subtle);
	}

	.oem-metrics__dot--active {
		background: var(--tone-accent-primary);
	}

	.oem-metrics__dot:hover {
		background: var(--tone-text-muted);
	}

	.oem-metrics__dot--active:hover {
		background: var(--tone-accent-primary);
	}
}

.oem-performance__title {
	color: var(--tone-text-muted);
}

.oem-performance__metric {
	background: var(--tone-canvas-base);
}

.oem-performance__metric-label {
	color: var(--tone-ink-strong);
}

.oem-performance__bar-track {
	background: var(--tone-canvas-muted);
}


.oem-performance__bar--bimmer {
	background: var(--tone-ink-strong);
}

.oem-performance__bar-value {
	color: var(--tone-canvas-base);
}

@media (max-width: 768px) {
	.oem-performance__carousel-wrapper {
	}

	.oem-performance__carousel-track {
	}

	.oem-performance__carousel-slide {
	}

	.oem-performance__metric {
	}

	.oem-performance__carousel-dots {
	}

	.oem-performance__dot {
		background: var(--tone-surface-subtle);
	}

	.oem-performance__dot--active {
		background: var(--tone-accent-primary);
	}

	.oem-performance__dot:hover {
		background: var(--tone-text-muted);
	}

	.oem-performance__dot--active:hover {
		background: var(--tone-accent-primary);
	}
}

.oem-expert {
	background: var(--tone-ink-strong);
	color: var(--tone-canvas-base);
}

.oem-expert__text {
	color: rgba(var(--tone-canvas-base-rgb), 0.9);
}

.oem-legend {
	background: var(--tone-canvas-base);
}

.oem-legend__item {
	color: var(--tone-ink-strong);
}

.oem-legend__icon {
	color: var(--tone-accent-primary);
}

.oem-definitions__card {
	background: var(--tone-canvas-base);
}

.oem-definitions__card--highlight {
	border-left-color: var(--tone-accent-primary);
	background: var(--tone-canvas-muted);
}

.oem-definitions__title {
	color: var(--tone-ink-strong);
}

.oem-definitions__description {
	color: var(--tone-text-muted);
}

.oem-footer__text {
	color: var(--tone-text-muted);
}

@media print {
	.oem-comparison-section {
		background: var(--tone-canvas-base);
	}

	.oem-comparison__carousel-controls {
	}

	.oem-comparison__carousel-track {
	}

	.oem-comparison__carousel-page {
	}
}

/* ================================================================
   COLOR COMPONENT RULES FROM: palette-components.css
   (Reconstructed - structural rules remain in palette-components.css)
   ================================================================ */

/* Primary - blue accent with dark hover */
.bp-btn-primary {
  color: var(--tone-canvas-base);
  background-color: var(--tone-accent-primary);
  box-shadow: 0 10px 24px rgba(var(--tone-border-soft-rgb), 0.50);
}
.bp-btn-primary:hover,
.bp-btn-primary:focus-visible {
  color: var(--tone-canvas-base);
  background-color: var(--tone-ink-strong);
  border-color: var(--tone-ink-strong);
  box-shadow: 0 12px 28px rgba(var(--tone-text-muted-rgb), 0.40);
}
.bp-btn-primary:active {
  color: var(--tone-canvas-base);
  background-color: var(--tone-text-muted);
  border-color: var(--tone-text-muted);
}

/* Secondary - cream background, dark text */
.bp-btn-secondary {
  color: var(--tone-ink-strong);
  background-color: var(--tone-canvas-base);
  box-shadow: 0 8px 22px rgba(var(--tone-surface-subtle-rgb), 0.60);
}
.bp-btn-secondary:hover,
.bp-btn-secondary:focus-visible {
  color: var(--tone-ink-strong);
  background-color: var(--tone-canvas-muted);
  border-color: var(--tone-text-muted);
}
.bp-btn-secondary:active {
  color: var(--tone-canvas-base);
  background-color: var(--tone-text-muted);
  border-color: var(--tone-text-muted);
}

/* Ghost - ink outline, swaps on hover */
.bp-btn-ghost { color: var(--tone-ink-strong); background-color: transparent; }
.bp-btn-ghost:hover,
.bp-btn-ghost:focus-visible {
  color: var(--tone-canvas-base);
  background-color: var(--tone-ink-strong);
  box-shadow: 0 10px 28px rgba(var(--tone-ink-strong-rgb), 0.25);
}

/* Gradient - brand gradient background */
.bp-btn-gradient { color: var(--tone-canvas-base); box-shadow: 0 10px 28px rgba(var(--tone-ink-strong-rgb), 0.25); }
.bp-btn-gradient:hover, .bp-btn-gradient:focus-visible { box-shadow: 0 14px 34px rgba(var(--tone-ink-strong-rgb), 0.35); }
.bp-btn-gradient:active { box-shadow: 0 14px 34px rgba(var(--tone-ink-strong-rgb), 0.35); }

/* Dark - ink background, cream text */
.bp-btn-dark { color: var(--tone-canvas-base); background-color: var(--tone-ink-strong); }
.bp-btn-dark:hover, .bp-btn-dark:focus-visible {
  color: var(--tone-canvas-base);
  background-color: var(--tone-ink-strong);
  box-shadow: 0 14px 34px rgba(var(--tone-ink-strong-rgb), 0.35);
}

/* Cards */
.bp-card-basic { background-color: var(--tone-canvas-base); }
.bp-card-basic:hover { border-color: var(--tone-accent-primary); box-shadow: 0 8px 24px rgba(var(--tone-ink-strong-rgb), 0.12); }
.bp-card-dark { background-color: var(--tone-ink-strong); color: var(--tone-canvas-base); }
.bp-card-dark:hover { box-shadow: 0 12px 32px rgba(var(--tone-ink-strong-rgb), 0.40); }
.bp-surface-soft   { background-color: var(--tone-canvas-muted); }
.bp-surface-subtle { background-color: var(--tone-surface-subtle); }
.bp-surface-strong { background-color: var(--tone-ink-strong); color: var(--tone-canvas-base); }

/* Inputs */
.bp-input-basic { color: var(--tone-ink-strong); background-color: var(--tone-canvas-base); }
.bp-input-basic::placeholder { color: var(--tone-text-muted); }
.bp-input-basic:hover { border-color: var(--tone-text-muted); }
.bp-input-basic:focus, .bp-input-basic:focus-visible {
  border-color: var(--tone-accent-primary);
  box-shadow: 0 0 0 2px rgba(var(--tone-accent-primary-rgb), 0.20);
}
.bp-select-basic { color: var(--tone-ink-strong); background-color: var(--tone-canvas-base); }
.bp-select-basic:hover { border-color: var(--tone-text-muted); }
.bp-select-basic:focus { border-color: var(--tone-accent-primary); }
.bp-input-dark { color: var(--tone-canvas-base); background-color: var(--tone-ink-strong); }
.bp-input-dark::placeholder { color: var(--tone-text-muted); }
.bp-input-dark:focus { border-color: var(--tone-accent-primary); box-shadow: 0 0 0 2px rgba(var(--tone-accent-primary-rgb), 0.20); }
.bp-check { accent-color: var(--tone-accent-primary); }

/* Badges */
.bp-badge-info         { color: var(--tone-accent-primary); background-color: rgba(var(--tone-accent-primary-rgb), 0.10); }
.bp-badge-neutral      { color: var(--tone-text-muted); background-color: var(--tone-canvas-muted); }
.bp-badge-dark         { color: var(--tone-canvas-base); background-color: var(--tone-ink-strong); }
.bp-badge-outline      { color: var(--tone-ink-strong); background-color: transparent; }
.bp-badge-outline-blue { color: var(--tone-accent-primary); background-color: transparent; }

/* Alerts */
.bp-alert-info   { color: var(--tone-accent-primary); background-color: rgba(var(--tone-accent-primary-rgb), 0.08); }
.bp-alert-dark   { color: var(--tone-canvas-base); background-color: var(--tone-ink-strong); }
.bp-alert-subtle { color: var(--tone-ink-strong); background-color: var(--tone-canvas-muted); }

/* Links */
.bp-link-basic { color: var(--tone-accent-primary); text-decoration-color: var(--tone-accent-primary); }
.bp-link-basic:hover, .bp-link-basic:focus-visible { color: var(--tone-ink-strong); text-decoration-color: var(--tone-ink-strong); }
.bp-link-muted { color: var(--tone-text-muted); }
.bp-link-muted:hover { color: var(--tone-ink-strong); }
.bp-link-cream { color: var(--tone-canvas-base); text-decoration-color: rgba(var(--tone-canvas-base-rgb), 0.50); }
.bp-link-cream:hover { color: var(--tone-border-soft); }

/* Overlays */
.bp-overlay-light::before { background-color: var(--tone-canvas-base); }
.bp-overlay-dark::before  { background-color: var(--tone-ink-strong); }
.bp-overlay-blue::before  { background-color: var(--tone-accent-primary); }

/* Accent Bars */
.bp-accent-top::before, .bp-accent-bottom::after { background-color: var(--tone-accent-primary); }
.bp-accent-top:hover::before, .bp-accent-bottom:hover::after { background-color: var(--tone-ink-strong); }

/* Navigation */
.bp-nav-item       { color: var(--tone-ink-strong); }
.bp-nav-item:hover { color: var(--tone-accent-primary); }
.bp-nav-item-light       { color: var(--tone-canvas-base); }
.bp-nav-item-light:hover { color: var(--tone-border-soft); }

/* Product Card */
.bp-product-card { background-color: var(--tone-canvas-base); }
.bp-product-card:hover { border-color: var(--tone-border-soft); box-shadow: 0 8px 24px rgba(var(--tone-ink-strong-rgb), 0.10); }
.bp-product-card__price          { color: var(--tone-ink-strong); }
.bp-product-card__price--compare { color: var(--tone-text-muted); }
.bp-product-card__badge          { color: var(--tone-canvas-base); background-color: var(--tone-accent-primary); }

/* Announcement Bar */
.bp-announcement { background-color: var(--tone-ink-strong); color: var(--tone-canvas-base); }
.bp-announcement a       { color: var(--tone-canvas-base); }
.bp-announcement a:hover { color: var(--tone-canvas-base); }
.bp-announcement-gradient { color: var(--tone-canvas-base); }

/* Stateful Wrappers */
.bp-hover-swap { color: var(--tone-ink-strong); background-color: var(--tone-canvas-base); }
.bp-hover-swap:hover { color: var(--tone-canvas-base); background-color: var(--tone-accent-primary); border-color: var(--tone-accent-primary); }
.bp-hover-swap-dark { color: var(--tone-canvas-base); background-color: var(--tone-ink-strong); }
.bp-hover-swap-dark:hover { color: var(--tone-ink-strong); background-color: var(--tone-canvas-base); }

/* Focus Rings */
.bp-focus-ring:focus-visible       { box-shadow: 0 0 0 3px rgba(var(--tone-accent-primary-rgb), 0.40); }
.bp-focus-ring-black:focus-visible { box-shadow: 0 0 0 3px rgba(var(--tone-ink-strong-rgb), 0.40); }

/* Scrollbar Theming */
.bp-scrollbar::-webkit-scrollbar-track { background-color: var(--tone-canvas-muted); }
.bp-scrollbar::-webkit-scrollbar-thumb { background-color: var(--tone-text-muted); }
.bp-scrollbar::-webkit-scrollbar-thumb:hover { background-color: var(--tone-ink-strong); }

/* Selection Highlight */
.bp-selection-theme ::selection { background-color: var(--tone-accent-primary); color: var(--tone-canvas-base); }



/* Apple-style — image visible top, readable text bottom */
/* Standalone fade overlay — works on already-positioned elements */
.bp-overlay-fade-bottom::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(
    to top,
    rgba(var(--tone-ink-strong-rgb), 0.92) 0%,
    rgba(var(--tone-ink-strong-rgb), 0.65) 30%,
    rgba(var(--tone-ink-strong-rgb), 0.20) 65%,
    transparent 100%
  );
}



/* Glass button — for use on dark/image backgrounds */
/* Apple glass pill button — for use on image/dark backgrounds */
.bp-btn-glass {
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.42) !important;
  color: #ffffff !important;
  backdrop-filter: blur(14px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(160%) !important;
  border-radius: 980px !important;
  transition: background 260ms ease, border-color 260ms ease,
              transform 220ms ease, box-shadow 260ms ease !important;
}
.bp-btn-glass:hover,
.bp-btn-glass:focus-visible {
  background: rgba(255, 255, 255, 0.26) !important;
  border-color: rgba(255, 255, 255, 0.85) !important;
  color: #ffffff !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35) !important;
  text-decoration: none !important;
}
.bp-btn-glass:active {
  transform: translateY(-1px) !important;
  background: rgba(255, 255, 255, 0.16) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}


/* ── Apple-style slide hover overlay ── */
.bp-overlay-fade-bottom::before {
  transition: background 520ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}



/* ── Background image subtle scale on hover ── */
.blackout_categoryshowcase_slide:hover .blackout_categoryshowcase_slide_background {
  transform: scale(1.04);
}

/* ── Glass HUD hover ── */
.bp-glass-hud {
  transition: background 300ms ease, border-color 300ms ease, box-shadow 300ms ease;
}
.bp-glass-hud:hover {
  background: rgba(0, 0, 0, 0.62) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  box-shadow: 0 8px 32px rgba(var(--tone-accent-primary-rgb), 0.18) !important;
}

/* ─────────────────────────────────────────────────────────────
   GLASS HUD — single consolidated rule, no duplicates
───────────────────────────────────────────────────────────── */
.bp-glass-hud {
  background: rgba(0, 0, 0, 0.52) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border-radius: 0.875rem !important;
  transition: background 300ms ease,
              border-color 300ms ease,
              box-shadow 300ms ease !important;
}

.bp-glass-hud:hover {
  background: rgba(0, 0, 0, 0.72) !important;
  border-color: rgba(0, 102, 255, 0.48) !important;
  box-shadow: 0 8px 32px rgba(var(--tone-accent-primary-rgb), 0.22) !important;
}

/* ─────────────────────────────────────────────────────────────
   BLACKOUT CATEGORY SHOWCASE
   All showcase overrides — one place, no conflicts
───────────────────────────────────────────────────────────── */




.bp-accent-lines-vertical-blue::before,
.bp-accent-lines-vertical-blue::after {
  background: linear-gradient(
    180deg,
    transparent 0%,
    var(--tone-accent-primary) 30%,
    var(--tone-accent-primary) 70%,
    transparent 100%
  );
  opacity: 0.35;
}

.bp-accent-lines-vertical-stone::before,
.bp-accent-lines-vertical-stone::after {
  background: linear-gradient(
    180deg,
    transparent 0%,
    var(--tone-border-soft) 30%,
    var(--tone-border-soft) 70%,
    transparent 100%
  );
  opacity: 0.45;
}



.bp-btn-icon-swap {
  border: 1px solid var(--tone-border-soft);
  transition: color 200ms, background-color 200ms, border-color 200ms;
}


.bp-hover\:swap-dark:hover,
.bp-hover\:swap-dark:focus-visible {
  background: var(--tone-ink-strong) !important;
  color: var(--tone-canvas-base) !important;
  border-color: var(--tone-ink-strong) !important;
  box-shadow: none !important;
  transform: translateY(-2px) !important;
}


/* =============================================================
   PROPOSED NEW INTERACTION UTILITIES
   Add these to palette-utilities.css
   Apple-inspired micro-interactions & state classes
   ============================================================= */


/* ─────────────────────────────────────────────────────────────
   TRANSITION PRESETS
   (extends existing bp-transition-colors / bp-transition-colors-slow)
───────────────────────────────────────────────────────────── */

/* All visual properties — the go-to for cards, containers */
.bp-transition-all {
  transition-property: color, background-color, border-color,
                       box-shadow, opacity, transform;
  transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-duration: 280ms;
}

/* Transform-only — for lifts, scales, slides */
.bp-transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-duration: 280ms;
}

/* Opacity-only — for fades */
.bp-transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-duration: 280ms;
}

/* Shadow-only — for depth shifts */
.bp-transition-shadow {
  transition-property: box-shadow;
  transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-duration: 280ms;
}

/* Snappy — for buttons, toggles (tighter feel) */
.bp-transition-snappy {
  transition-property: color, background-color, border-color,
                       box-shadow, opacity, transform;
  transition-timing-function: cubic-bezier(0.14, 0.7, 0.3, 1);
  transition-duration: 160ms;
}

/* Luxe — for hero elements, premium feel */
.bp-transition-luxe {
  transition-property: color, background-color, border-color,
                       box-shadow, opacity, transform;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  transition-duration: 450ms;
}


/* ─────────────────────────────────────────────────────────────
   HOVER TRANSFORMS — Apple-style lifts & scales
───────────────────────────────────────────────────────────── */

/* Lift — subtle Y shift (cards, product tiles) */
.bp-hover\:lift:hover {
  transform: translateY(-4px);
}

/* Lift small — minimal (badges, tags) */
.bp-hover\:lift-sm:hover {
  transform: translateY(-2px);
}

/* Lift large — dramatic (hero cards, featured items) */
.bp-hover\:lift-lg:hover {
  transform: translateY(-8px);
}

/* Scale — subtle grow (images, thumbnails) */
.bp-hover\:scale:hover {
  transform: scale(1.02);
}

/* Scale small — barely perceptible (icons, avatars) */
.bp-hover\:scale-sm:hover {
  transform: scale(1.01);
}

/* Scale large — noticeable (gallery images, hero media) */
.bp-hover\:scale-lg:hover {
  transform: scale(1.04);
}

/* Scale down — press effect for buttons */
.bp-active\:press:active {
  transform: scale(0.97);
}

/* Scale down subtle */
.bp-active\:press-sm:active {
  transform: scale(0.985);
}


/* ─────────────────────────────────────────────────────────────
   HOVER SHADOW ELEVATIONS — depth on interaction
   (Apple uses shadow shifts to communicate "liftable")
───────────────────────────────────────────────────────────── */

/* Resting → medium shadow on hover */
.bp-hover\:shadow-md:hover {
  box-shadow: var(--tone-shadow-md);
}

/* Resting → large shadow on hover (cards, tiles) */
.bp-hover\:shadow-lg:hover {
  box-shadow: var(--tone-shadow-lg);
}

/* Resting → XL shadow on hover (featured, hero) */
.bp-hover\:shadow-xl:hover {
  box-shadow: var(--tone-shadow-xl);
}

/* Resting → soft stone shadow on hover */
.bp-hover\:shadow-stone:hover {
  box-shadow: var(--tone-shadow-stone);
}

/* Remove shadow on hover (for press-down effects) */
.bp-hover\:shadow-none:hover {
  box-shadow: none;
}


/* ─────────────────────────────────────────────────────────────
   HOVER OPACITY — for image overlays, faded elements
───────────────────────────────────────────────────────────── */

.bp-hover\:opacity-70:hover  { opacity: 0.7; }
.bp-hover\:opacity-80:hover  { opacity: 0.8; }
.bp-hover\:opacity-90:hover  { opacity: 0.9; }
.bp-hover\:opacity-100:hover { opacity: 1; }


/* ─────────────────────────────────────────────────────────────
   HOVER BORDER COLOR — border reveals on interaction
───────────────────────────────────────────────────────────── */

.bp-hover\:border-blue:hover   { border-color: var(--tone-accent-primary); }
.bp-hover\:border-stone:hover  { border-color: var(--tone-border-soft); }
.bp-hover\:border-gray:hover   { border-color: var(--tone-text-muted); }
.bp-hover\:border-black:hover  { border-color: var(--tone-ink-strong); }
.bp-hover\:border-beige:hover  { border-color: var(--tone-surface-subtle); }
.bp-hover\:border-sand:hover   { border-color: var(--tone-canvas-muted); }


/* ─────────────────────────────────────────────────────────────
   COMPOUND HOVER PATTERNS — common Apple-style combos
   These pair lift + shadow + border in one class
───────────────────────────────────────────────────────────── */

/* Card hover — lift + shadow + border hint (product cards, content cards) */
.bp-hover-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--tone-shadow-lg);
  border-color: var(--tone-border-soft);
}

/* Card hover subtle — minimal lift + soft shadow (smaller cards, list items) */
.bp-hover-card-sm:hover {
  transform: translateY(-2px);
  box-shadow: var(--tone-shadow-md);
  border-color: var(--tone-surface-subtle);
}

/* Card hover accent — lift + blue border glow (interactive/CTA cards) */
.bp-hover-card-accent:hover {
  transform: translateY(-4px);
  box-shadow: var(--tone-shadow-blue);
  border-color: var(--tone-accent-primary);
}

/* Image card hover — scale image + deeper shadow (gallery, collection) */
.bp-hover-media:hover {
  box-shadow: var(--tone-shadow-xl);
}
.bp-hover-media:hover img,
.bp-hover-media:hover video,
.bp-hover-media:hover .bp-hover-media__target {
  transform: scale(1.03);
}

/* Surface shift — bg goes one shade darker on hover (nav, table rows) */
.bp-hover\:bg-shift:hover {
  background-color: var(--tone-canvas-muted);
}

/* Surface shift on beige base */
.bp-hover\:bg-shift-sand:hover {
  background-color: var(--tone-surface-subtle);
}


/* ─────────────────────────────────────────────────────────────
   FOCUS-VISIBLE RINGS — accessibility + polish
───────────────────────────────────────────────────────────── */

.bp-focus\:ring-blue:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--tone-accent-primary-rgb), 0.35);
}

.bp-focus\:ring-black:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--tone-ink-strong-rgb), 0.25);
}

.bp-focus\:ring-stone:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--tone-border-soft-rgb), 0.45);
}

/* Inset focus ring — for inputs, selects */
.bp-focus\:ring-inset-blue:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--tone-accent-primary);
}


/* ─────────────────────────────────────────────────────────────
   GROUP HOVER — child responds to parent hover
   Add .bp-group to parent, use .bp-group-hover\:* on child
───────────────────────────────────────────────────────────── */

.bp-group:hover .bp-group-hover\:text-blue   { color: var(--tone-accent-primary); }
.bp-group:hover .bp-group-hover\:text-black  { color: var(--tone-ink-strong); }
.bp-group:hover .bp-group-hover\:text-cream  { color: var(--tone-canvas-base); }
.bp-group:hover .bp-group-hover\:text-gray   { color: var(--tone-text-muted); }

.bp-group:hover .bp-group-hover\:bg-sand     { background-color: var(--tone-canvas-muted); }
.bp-group:hover .bp-group-hover\:bg-beige    { background-color: var(--tone-surface-subtle); }
.bp-group:hover .bp-group-hover\:bg-blue     { background-color: var(--tone-accent-primary); }
.bp-group:hover .bp-group-hover\:bg-black    { background-color: var(--tone-ink-strong); }

.bp-group:hover .bp-group-hover\:border-blue  { border-color: var(--tone-accent-primary); }
.bp-group:hover .bp-group-hover\:border-stone { border-color: var(--tone-border-soft); }
.bp-group:hover .bp-group-hover\:border-black { border-color: var(--tone-ink-strong); }

.bp-group:hover .bp-group-hover\:opacity-100  { opacity: 1; }
.bp-group:hover .bp-group-hover\:opacity-0    { opacity: 0; }

.bp-group:hover .bp-group-hover\:scale        { transform: scale(1.03); }
.bp-group:hover .bp-group-hover\:lift         { transform: translateY(-2px); }

.bp-group:hover .bp-group-hover\:shadow-md    { box-shadow: var(--tone-shadow-md); }
.bp-group:hover .bp-group-hover\:shadow-lg    { box-shadow: var(--tone-shadow-lg); }


/* ─────────────────────────────────────────────────────────────
   UNDERLINE EFFECTS — Apple-style link underlines
───────────────────────────────────────────────────────────── */

/* Underline grows from left on hover */
.bp-underline-grow {
  position: relative;
  text-decoration: none;
}
.bp-underline-grow::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1.5px;
  background-color: currentColor;
  transition: width 280ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.bp-underline-grow:hover::after {
  width: 100%;
}

/* Underline grows from center */
.bp-underline-grow-center {
  position: relative;
  text-decoration: none;
}
.bp-underline-grow-center::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 50%;
  width: 0;
  height: 1.5px;
  background-color: currentColor;
  transition: width 280ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
              left 280ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.bp-underline-grow-center:hover::after {
  width: 100%;
  left: 0;
}

/* Blue underline specifically */
.bp-underline-blue::after {
  background-color: var(--tone-accent-primary);
}


/* ─────────────────────────────────────────────────────────────
   ARROW / ICON NUDGE — Apple's → slides right on hover
───────────────────────────────────────────────────────────── */

.bp-hover\:nudge-right:hover {
  transform: translateX(4px);
}

.bp-group:hover .bp-group-hover\:nudge-right {
  transform: translateX(4px);
}

/* For arrow icons inside links */
.bp-arrow-icon {
  display: inline-block;
  transition: transform 280ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.bp-group:hover .bp-arrow-icon,
a:hover > .bp-arrow-icon,
button:hover > .bp-arrow-icon {
  transform: translateX(5px);
}


/* ─────────────────────────────────────────────────────────────
   REVEAL ON HOVER — show child element when parent is hovered
───────────────────────────────────────────────────────────── */

.bp-reveal-target {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 280ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 280ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  pointer-events: none;
}

.bp-group:hover .bp-reveal-target {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}


/* ─────────────────────────────────────────────────────────────
   ACTIVE / PRESSED STATES
───────────────────────────────────────────────────────────── */

.bp-active\:bg-sand:active    { background-color: var(--tone-canvas-muted); }
.bp-active\:bg-beige:active   { background-color: var(--tone-surface-subtle); }
.bp-active\:bg-stone:active   { background-color: var(--tone-border-soft); }
.bp-active\:shadow-sm:active  { box-shadow: var(--tone-shadow-sm); }
.bp-active\:shadow-none:active { box-shadow: none; }



.bp-bg-transparent { background-color: transparent; }

.blackout_categoryshowcase_indicators {
  background-color: transparent !important;
  padding: 12px 0;
}

.blackout_categoryshowcase_indicator {
  background-color: rgba(15, 15, 15, 0.55) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 2px !important;
}




.bp-bg-blue\/08 { background-color: rgba(var(--tone-accent-primary-rgb), 0.08); }

.contact-form__dropdown-item         { color: var(--tone-ink-strong); }
.contact-form__dropdown-item:hover   { background-color: var(--tone-canvas-muted); }
.contact-form__dropdown-item--highlighted { background-color: var(--tone-surface-subtle); }
.contact-form__dropdown-item--selected   { color: var(--tone-accent-primary); font-weight: 500; }
.contact-form__dropdown-no-results       { color: var(--tone-text-muted); }



.blackout_categoryshowcase_slide_overlay.bp-overlay-fade-bottom {
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.75) 0%,
    rgba(0, 0, 0, 0.35) 50%,
    rgba(0, 0, 0, 0.15) 100%
  );
}

.blackout_categoryshowcase_category_title,
.blackout_categoryshowcase_category_fullname,
.blackout_categoryshowcase_code_badge_text {
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}


.bp-overlay-dark-60::before { z-index: 2; }



/* Add to palette-utilities.css */
.bp-overlay-hero-gradient::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(
    180deg,
    rgba(var(--tone-ink-strong-rgb), 0.82) 0%,
    rgba(var(--tone-ink-strong-rgb), 0.65) 40%,
    rgba(var(--tone-ink-strong-rgb), 0.40) 70%,
    rgba(var(--tone-ink-strong-rgb), 0.25) 100%
  );
}

	  .customReviewContainer .Header__Container-sc-17gc7x6-1 { background: var(--tone-canvas-muted); }
    .customReviewContainer .swiper-wrapper > div > div > div > div { background: var(--tone-canvas-muted) !important; }
    .customReviewContainer .swiper-wrapper > div > div > div > div > svg > path { fill: var(--tone-canvas-muted); }
    .customReviewContainer .Foundation__Inner-sc-11tbro4-1.ghBuFb div { color: #FAF8F3 !important; }
    .customReviewContainer .SupplierBranding__Container-sc-12x9p9t-0 > svg > path,
    .customReviewContainer .SupplierBranding__Container-sc-12x9p9t-0 g > path { fill: var(--tone-ink-strong); }
    .customReviewContainer .Header__WidgetTitle-sc-17gc7x6-2 { display: none; }




	.bp-overlay-hero-gradient-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(
    160deg,
    rgba(var(--tone-ink-strong-rgb), 0.96) 0%,
    rgba(var(--tone-ink-strong-rgb), 0.82) 35%,
    rgba(var(--tone-ink-strong-rgb), 0.60) 65%,
    rgba(var(--tone-ink-strong-rgb), 0.38) 100%
  );
}

/* Star rating gold — functional, not palette */
.bp-fill-star { fill: #fbbf24; }

/* Form validation error red — functional */
.bp-text-error { color: #dc2626; }
.bp-bg-error { background-color: #dc2626; }
.bp-border-error { border-color: #dc2626; }

/* Rendering utility — pure white, outside 7-color palette. Use only for visual compositing layers. */
.bp-bg-white { background-color: #ffffff; }
.bp-border-bottom-white { border-bottom-color: #ffffff; }
.bp-rendering-mask { background-color: #ffffff; border-bottom: 400px solid #ffffff; }
/* Wheel customizer — vehicle color swatch options */
.bp-swatch-white  { background-color: #ffffff; }
.bp-swatch-orange { background-color: #ff6600; }
.bp-swatch-red    { background-color: #990000; }
.bp-swatch-blue   { background-color: #4d88ff; }
.bp-swatch-black  { background-color: #000000; }
.bp-swatch-brown  { background-color: #663d00; }


/* =============================================================
   THIRD-PARTY OVERRIDES — Elfsight Reviews Widget
   (selectors target Elfsight's internal DOM, can't use bp- classes)
   ============================================================= */
.customReviewContainer .Header__WidgetTitle-sc-17gc7x6-2 {
  display: none;
}
.customReviewContainer .Header__Container-sc-17gc7x6-1 {
  background: var(--tone-canvas-muted);
}
.customReviewContainer .swiper-wrapper > div > div > div > div {
  background: var(--tone-canvas-muted) !important;
}
.customReviewContainer .swiper-wrapper > div > div > div > div > svg > path {
  fill: var(--tone-canvas-muted);
}
.customReviewContainer .Foundation__Inner-sc-11tbro4-1.ghBuFb div {
  color: var(--tone-ink-strong) !important;
}
.customReviewContainer .SupplierBranding__Container-sc-12x9p9t-0 > svg > path,
.customReviewContainer .SupplierBranding__Container-sc-12x9p9t-0 g > path {
  fill: var(--tone-ink-strong);
}

/* Third-party Elfsight — dark review section variant */
.customReviewSection [class*='Header__Container'] {
  display: none !important;
}
.customReviewSection .swiper-wrapper > div > div > div > div {
  
  border: 1px solid rgba(var(--tone-canvas-base-rgb), 0.12) !important;
  box-shadow: 0 25px 60px rgba(var(--tone-ink-strong-rgb), 0.55) !important;
  color: var(--tone-canvas-base) !important;
}
.customReviewSection .swiper-wrapper > div > div > div > div p,
.customReviewSection .swiper-wrapper > div > div > div > div span,
.customReviewSection .swiper-wrapper > div > div > div > div strong {
  color: var(--tone-canvas-base) !important;
}
.customReviewSection .SupplierBranding__Container-sc-12x9p9t-0 svg path,
.customReviewSection .SupplierBranding__Container-sc-12x9p9t-0 g path {
  fill: var(--tone-accent-primary) !important;
}



 #one:checked ~ .tabs #one-tab,
  #two:checked ~ .tabs #two-tab,
  #three:checked ~ .tabs #three-tab,
  #four:checked ~ .tabs #four-tab,
  #five:checked ~ .tabs #five-tab,
  #six:checked ~ .tabs #six-tab,
  #seven:checked ~ .tabs #seven-tab,
  #eight:checked ~ .tabs #eight-tab,
  #nine:checked ~ .tabs #nine-tab,
  #ten:checked ~ .tabs #ten-tab,
  #eleven:checked ~ .tabs #eleven-tab,
  #twelve:checked ~ .tabs #twelve-tab,
  #thirteen:checked ~ .tabs #thirteen-tab,
  #fourteen:checked ~ .tabs #fourteen-tab,
  #fifteen:checked ~ .tabs #fifteen-tab,
  #sixteen:checked ~ .tabs #sixteen-tab,
  #seventeen:checked ~ .tabs #seventeen-tab,
  #eighteen:checked ~ .tabs #eighteen-tab,
  #nineteen:checked ~ .tabs #nineteen-tab
   {
     
      background-color: var(--tone-ink-strong);
  color: var(--tone-canvas-base);
  border-color: var(--tone-ink-strong);
  }

 .ymq_item_price,
  .h6.text-on-sale {
    color: #0066FF !important;  /* ice #8DC6FF → blue */
  }



  .badge.badge--on-sale {
  font-size: 9px !important;
  padding: 3px 6px !important;
  white-space: nowrap !important;
  overflow: visible !important;
  max-width: none !important;
  line-height: 1.3 !important;
  background-color: #0F0F0F !important;
  color: #FAF8F3 !important;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8) !important;
  border-radius: 4px !important;
}













/* ── Kill border at source level too (belt + suspenders) ─────── */
.home_warehouse_facility_stat_block,
.home_warehouse_facility_stat_block:not(:last-child) {
  border: none !important;
  border-right: none !important;
  border-right-width: 0 !important;
  border-right-style: none !important;
  border-color: transparent !important;
  position: relative;
}

/* ── Separator line — faded gradient, centered vertically ────── */
.home_warehouse_facility_stat_block + .home_warehouse_facility_stat_block::before {
  content: '';
  position: absolute;
  left: 0;
  top: 15%;
  height: 70%;
  width: 1px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(255, 255, 255, 0.30) 25%,
    rgba(255, 255, 255, 0.30) 75%,
    transparent 100%
  );
}

/* ── Glass overlay ───────────────────────────────────────────── */
.bp-glass-surface {
  background: rgba(255, 255, 255, 0.10) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.38) !important;
  backdrop-filter: blur(14px) saturate(150%) brightness(1.08) !important;
  -webkit-backdrop-filter: blur(14px) saturate(150%) brightness(1.08) !important;
  border-radius: 18px !important;
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 0.28) inset,
    0 -1px 0 rgba(0, 0, 0, 0.12) inset,
    0 4px 16px rgba(0, 0, 0, 0.18),
    0 16px 40px rgba(0, 0, 0, 0.24),
    0 40px 72px rgba(0, 0, 0, 0.12) !important;
  transition:
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.bp-glass-surface:hover {
  transform: translateY(-5px) scale(1.01) !important;
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 0.32) inset,
    0 -1px 0 rgba(0, 0, 0, 0.12) inset,
    0 8px 24px rgba(0, 0, 0, 0.22),
    0 28px 56px rgba(0, 0, 0, 0.30),
    0 56px 88px rgba(0, 0, 0, 0.14) !important;
}

/* ── Stat layout ─────────────────────────────────────────────── */
.home_warehouse_facility_stats_overlay {
  gap: 0 !important;
}

.home_warehouse_facility_stat_block {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  padding: 4px 8px !important;
}

/* ── Number ──────────────────────────────────────────────────── */
.home_warehouse_facility_stat_number {
  font-size: 28px !important;
  font-weight: 700 !important;
  letter-spacing: -0.5px !important;
  line-height: 1 !important;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.12),
    0 2px 6px rgba(0, 0, 0, 0.55),
    0 4px 16px rgba(0, 0, 0, 0.35) !important;
}

/* ── Label ───────────────────────────────────────────────────── */
.home_warehouse_facility_stat_label {
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 1.4px !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  text-shadow:
    0 1px 4px rgba(0, 0, 0, 0.6),
    0 2px 8px rgba(0, 0, 0, 0.30) !important;
}













/* =============================================================
   BUTTON STYLES — targeted via Shopify auto-generated section
   type classes. Zero JSON changes required.
   ============================================================= */
/* =============================================================
   BUTTON STYLES — targeting .bmw-btn
   JS in custom_liquid_hRjTeb replaces all .button elements
   with <button class="bmw-btn">, so .button never exists in DOM
   ============================================================= */

/* =============================================================
   .bmw-btn — Professional Button
   Resting: dark ink bg, cream text
   Hover: cream bg, dark text + lift + shadow
   ============================================================= */

.bmw-btn {
  /* Layout */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 13px 28px;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;

  /* Typography */
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);

  /* Resting colors — dark bg, cream text */
  background-color: var(--tone-ink-strong);
  color: var(--tone-canvas-base);
  border: 1.5px solid var(--tone-ink-strong);

  /* Shadow — soft depth at rest */
  box-shadow:
    0 2px 6px rgba(var(--tone-ink-strong-rgb), 0.25),
    0 1px 0 rgba(255, 255, 255, 0.06) inset;

  /* Transition */
  transition:
    background-color 240ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
    color 240ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
    border-color 240ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
    box-shadow 240ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 220ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
    text-shadow 240ms ease;
}

.bmw-btn:hover {
  /* Hover colors — cream bg, dark text */
  background-color: var(--tone-canvas-base);
  color: var(--tone-ink-strong);
  border-color: var(--tone-ink-strong);
  text-shadow: none;

  /* Lift + deeper shadow on hover */
  transform: translateY(-3px);
  box-shadow:
    0 8px 20px rgba(var(--tone-ink-strong-rgb), 0.18),
    0 3px 8px rgba(var(--tone-ink-strong-rgb), 0.12),
    0 1px 0 rgba(255, 255, 255, 0.9) inset;
}

.bmw-btn:active {
  /* Press down */
  transform: translateY(-1px);
  box-shadow:
    0 3px 8px rgba(var(--tone-ink-strong-rgb), 0.14),
    0 1px 0 rgba(255, 255, 255, 0.8) inset;
}

.bmw-btn:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(var(--tone-accent-primary-rgb), 0.40),
    0 8px 20px rgba(var(--tone-ink-strong-rgb), 0.18);
}




.vip-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    background: var(--tone-ink-strong);
    border: 1px solid rgba(var(--tone-canvas-base-rgb), 0.10);
    color: var(--tone-canvas-base);
    padding: 36px 12px;
    border-radius: 8px;
    width: 100%;
    height: 100%;
    transition: transform 280ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
                box-shadow 280ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
                border-color 280ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor: pointer;
}

.vip-item:hover {
    transform: translateY(-4px) scale(1.01);
    border-color: rgba(var(--tone-accent-primary-rgb), 0.45);
    box-shadow: 0 12px 32px rgba(var(--tone-accent-primary-rgb), 0.12),
                0 4px 16px rgba(var(--tone-ink-strong-rgb), 0.25);
}

.vip-item > img {
    width: 70px;
    height: 70px;
    border-radius: 99px;
    background: var(--tone-canvas-base);
filter: none;
    padding: 12px;
    margin-top: 1vw;
    border: 1px solid rgba(var(--tone-canvas-base-rgb), 0.18);
    box-shadow: 0 2px 10px rgba(var(--tone-ink-strong-rgb), 0.30);
}

.vip-item > h3 {
    text-transform: uppercase;
    font-size: 16px;
    color: var(--tone-canvas-base);
    text-shadow: 0 1px 6px rgba(var(--tone-ink-strong-rgb), 0.50);
    min-height: 3em;
}

.vip-item > p {
    color: var(--tone-border-soft);
}



  .vip-features-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    width: 100%;
    border: 1px solid var(--tone-surface-subtle);
    background: var(--tone-canvas-base);
    border-radius: 12px;
    margin-bottom: 80px;
    padding: 64px calc(20px + 2vw);
    height: 520px;
}



.headingText4 > button {
  display: inline-block;
  width: auto;
  min-width: 200px;
  padding: 14px 36px;
  background-color: #111;
  color: #fffdd0;
  border: 2px solid #111;
  border-radius: 4px;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  margin-top: 10px;
}

.headingText4 > button:hover {
  background-color: transparent;
  color: #111;
  border-color: #111;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.headingText4 > button:active {
  transform: scale(0.98);
  box-shadow: none;
}



 .paymentOptionsInfo > span > img {
  filter: invert(1);
}



#facets-drawer::part(body),
#facets-drawer::part(header),
#facets-drawer::part(footer) {
  background-color: #FAF8F3;
}






.hover-carousel-controls button {
  background: #E6E2DA;
  border: 1.5px solid #C8C4BC;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(15, 15, 15, 0.08);
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.hover-carousel-controls button:hover {
  background: #0066FF;
  border-color: #0066FF;
  box-shadow: 0 4px 12px rgba(0, 102, 255, 0.22);
  transform: scale(1.07);
}

.hover-carousel-controls button:active {
  background: #0F0F0F;
  border-color: #0F0F0F;
  box-shadow: none;
  transform: scale(0.96);
}

.hover-carousel-controls button svg {
  color: #0F0F0F;
  fill: #0F0F0F;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: color 0.2s ease, fill 0.2s ease;
}

.hover-carousel-controls button:hover svg,
.hover-carousel-controls button:active svg {
  color: #FAF8F3;
  fill: #FAF8F3;
}







#built-for-few-{{ sid }} .build-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

#built-for-few-{{ sid }} .build-arrow {
  color: rgba(255,255,255,0.4); /* white opacity — decorative on image overlay */
  font-size: 16px;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  flex-shrink: 0;
  padding-bottom: 2px;
}

#built-for-few-{{ sid }} .build-card-link:hover .build-arrow {
  opacity: 1;
  transform: translateX(0);
}












.bp-hero-fade-left::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    92deg,
    rgba(var(--tone-canvas-base-rgb), 0.78) 0%,
    rgba(var(--tone-canvas-base-rgb), 0.42) 32%,
    rgba(var(--tone-canvas-base-rgb), 0.06) 58%,
    transparent 100%
  );
}

.bp-text-gradient-white {
  background: linear-gradient(
    135deg,
    var(--tone-canvas-base)   0%,
    var(--tone-canvas-base)  55%,
    var(--tone-border-soft)  100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.bp-text-gradient-hero {
  background: linear-gradient(
    135deg,
    var(--tone-canvas-base)      0%,
    var(--tone-canvas-base)      40%,
    var(--tone-accent-primary)  100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.bp-text-shadow-strong {
  text-shadow:
    0 2px 12px rgba(var(--tone-ink-strong-rgb), 0.70),
    0 0  40px rgba(var(--tone-ink-strong-rgb), 0.40);
}

/* Soft shadow — subtext, labels */
.bp-text-shadow-soft {
  text-shadow:
    0 1px 8px rgba(var(--tone-ink-strong-rgb), 0.60),
    0 2px 4px rgba(var(--tone-ink-strong-rgb), 0.40);
}

/* Force cream/white — for text sitting on dark hero */
.bp-text-hero {
  color: var(--tone-canvas-base);
}

/* Subtext on hero — slightly dimmed white */
.bp-text-hero-muted {
  color: rgba(var(--tone-canvas-base-rgb), 0.82);
}






.bp-text-gradient-white-hero {
  background: linear-gradient(
    180deg,
    #FFFFFF 0%,
    rgba(255,255,255,0.92) 60%,
    rgba(255,255,255,0.78) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.bp-text-shadow-title-white {
  filter: drop-shadow(0 2px 12px rgba(255,255,255,0.25))
          drop-shadow(0 4px 24px rgba(0,0,0,0.55));
}



@media (max-width: 768px) {
  .bp-hero-fade-left::before {
    background: 
      /* Top zone — behind title/subtext */
      linear-gradient(
        to bottom,
        rgba(var(--tone-canvas-base-rgb), 0.82) 0%,
        rgba(var(--tone-canvas-base-rgb), 0.60) 18%,
        transparent 35%
      ),
      /* Bottom zone — behind buttons and stats */
      linear-gradient(
        to top,
        rgba(var(--tone-canvas-base-rgb), 0.90) 0%,
        rgba(var(--tone-canvas-base-rgb), 0.65) 22%,
        transparent 42%
      );
  }
}

@media (max-width: 768px) {
  .homepage_hero_section {
    align-items: stretch;
  }

  .homepage_hero_container {
    padding: 52px 20px 28px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 100%;
  }

  .homepage_hero_content {
    max-width: 100%;
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  .homepage_hero_image {
    background-position: 65% 30%;
  }

  .homepage_hero_title {
    font-size: clamp(38px, 10vw, 62px) !important;
    letter-spacing: -2px;
    margin-bottom: 6px;
  }

  .homepage_hero_subtext {
    font-size: 15px;
    margin-bottom: 20px;
  }

  /* Push buttons + stats to bottom as a unit */
  .homepage_hero_button_wrapper {
    flex-direction: column !important;
    gap: 9px !important;
    margin-bottom: 20px !important;
    width: 100%;
    margin-top: auto;
  }

  .homepage_hero_btn {
    width: 100% !important;
    flex: none !important;
    font-size: 10px !important;
    padding: 13px 20px !important;
    text-align: center;
    justify-content: center;
    box-sizing: border-box;
  }

  .homepage_hero_stats_container {
    padding-top: 16px;
    padding-bottom: 0;
    gap: 0 !important;
    justify-content: space-between;
    border-top: 1px solid rgba(var(--tone-border-soft-rgb), 0.30);
    margin-top: 0;
  }

  .homepage_hero_stat_item {
    flex: 1;
    text-align: center;
  }
}




/* .homepage_hero_stat_label {
  text-shadow: 0 1px 6px rgba(var(--tone-canvas-base-rgb), 0.80),
               0 0px 12px rgba(var(--tone-canvas-base-rgb), 0.60);
} */


@media (min-width: 1400px) {
  .bp-hero-fade-left::before {
    background: linear-gradient(
      92deg,
      rgba(var(--tone-canvas-base-rgb), 0.80) 0%,
      rgba(var(--tone-canvas-base-rgb), 0.45) 28%,
      rgba(var(--tone-canvas-base-rgb), 0.06) 52%,
      transparent 100%
    );
  }
}






/* Mobile hero — title shadow (readable on image) */
.bp-text-shadow-mobile-title {
  text-shadow:
    0 1px 0 rgba(var(--tone-canvas-base-rgb), 0.55),
    0 2px 8px rgba(var(--tone-canvas-base-rgb), 0.45),
    0 4px 16px rgba(var(--tone-canvas-base-rgb), 0.25);
}

/* Mobile hero — subtext shadow */
.bp-text-shadow-mobile-sub {
  text-shadow:
    0 1px 6px rgba(var(--tone-canvas-base-rgb), 0.60),
    0 2px 12px rgba(var(--tone-canvas-base-rgb), 0.35);
}

/* Stat number shadow — legible on semi-transparent bg */
.bp-text-shadow-stat-num {
  text-shadow:
    0 1px 4px rgba(var(--tone-canvas-base-rgb), 0.50),
    0 2px 8px rgba(var(--tone-canvas-base-rgb), 0.30);
}



.bp-text-shadow-stat-numl {
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.90),
    0 2px 12px rgba(255, 255, 255, 0.60),
    0 4px 20px rgba(255, 255, 255, 0.25);
}






.ub {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);}

  .ub::after { background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(255,255,255,0.04) 20%,
      rgba(255,255,255,0.07) 50%,
      rgba(255,255,255,0.04) 80%,
      transparent 100%
    );}

	 .ub__divider {
    background: rgba(255, 255, 255, 0.12);}


	.ub__cta{
		border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
	transition:
      background   0.25s ease,
      border-color 0.25s ease,
      color        0.25s ease;
	}

	 .ub__cta:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.4);
  }




   .ann-bar {
	
    border-bottom: 1px solid rgba(28, 105, 212, 0.22);
   }

.ann-bar::before{
	
    background: linear-gradient(105deg, transparent 30%, rgba(28, 105, 212, 0.1) 50%, transparent 70%);
}

.ann-bar::after{
	background: linear-gradient(
      90deg,
      transparent,
      rgba(28, 105, 212, 0.55) 25%,
      rgba(28, 105, 212, 0.9) 50%,
      rgba(28, 105, 212, 0.55) 75%,
      transparent
    );
}

.ann-bar__badge{
	
    border-right: 1px solid rgba(255, 255, 255, 0.07);
}

.ann-bar__dot{
	 background: #0066FF;
    box-shadow: 0 0 6px rgba(28, 105, 212, 0.9);
}

@keyframes ann-pulse {
    0%, 100% { opacity: 1;   box-shadow: 0 0 6px  rgba(28, 105, 212, 0.9); }
    50%       { opacity: 0.4; box-shadow: 0 0 14px rgba(28, 105, 212, 0.45); }
  }

  .ann-bar__badge-label{
	color: #0066FF;
  }

  .ann-bar__track {
	 mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  }

  .ann-bar__item{
	color: #C8C4BC;
  }

  .ann-bar__gem {
	
    background: rgba(28, 105, 212, 0.7);
  }

  .ann-bar__right{
    border-left: 1px solid rgba(255, 255, 255, 0.07);}

	.ann-bar__cta{
		 border: 1px solid rgba(28, 105, 212, 0.5);
    background: rgba(28, 105, 212, 0.09);
    color: #0066FF;
	}

	.ann-bar__cta:hover{
		background:    rgba(28, 105, 212, 0.2);
    border-color:  rgba(28, 105, 212, 0.85);
    color:        #0066FF;
    box-shadow:    0 0 12px rgba(28, 105, 212, 0.28);
	}









.homepage_engineered_card_overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top,
    rgba(15, 15, 15, 0.75) 0%,
    rgba(15, 15, 15, 0.3) 45%,
    transparent 85%
  );
}



.header-sidebar::part(close-button) {
  background-color: var(--tone-canvas-base);
}




.header-sidebar::part(content),
.header-sidebar::part(header),
.header-sidebar::part(panel-list) {
  background-color: var(--tone-canvas-base);
  transition: none;
}






.cfp-sec-nav__tab.active {
  background: #0F0F0F;
  color: #FAF8F3!important;
  border-radius: 999px;
  transition: background 0.2s, color 0.2s;
}


.cfp-scroll-btn{
 border: 1.5px solid var(--tone-border-soft, #C8C4BC);
  background: var(--tone-canvas-base, #FAF8F3);
  color: var(--tone-text-primary, #0F0F0F);
}


.cfp-scroll-btn:hover {
  background: var(--tone-text-primary, #0F0F0F);
  color: var(--tone-canvas-base, #FAF8F3);
  border-color: var(--tone-text-primary, #0F0F0F);
  transform: scale(1.06);
}


.cfp-filter {
  border-color: var(--tone-border-soft, #FAF8F3);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.06);
}

.cfp-filter__clear {
  border-color: var(--tone-border-soft, #FAF8F3);
  transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.15s;
}
.cfp-filter__clear:hover {
  background: var(--tone-text-primary, #0F0F0F);
  border-color: var(--tone-text-primary, #0F0F0F);
  color: var(--tone-canvas-base, #FAF8F3) !important;
  transform: translateY(-1px);
}
.cfp-filter__clear:active {
  transform: translateY(0);
  opacity: 0.85;
}



.cfp-page-btn {
  background: transparent;
  color: var(--tone-text-primary, #0F0F0F);
  border-color: var(--tone-border-soft, #C8C4BC);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
}
.cfp-page-btn:hover:not(:disabled) {
  background: var(--tone-surface-subtle, #FAF8F3);
  border-color: var(--tone-text-primary, #0F0F0F);
  transform: translateY(-1px);
}
.cfp-page-btn:active:not(:disabled) {
  transform: translateY(0);
}
.cfp-page-btn.active {
  background: var(--tone-text-primary, #0F0F0F);
  color: var(--tone-canvas-base, #FAF8F3);
  border-color: var(--tone-text-primary, #0F0F0F);
  font-weight: 700;
  pointer-events: none;
}


.inline_pill.selected {
    border-color: #0066FF;
    background-color: #FAF8F3;
    font-weight: 700;
}

.shop_build_btn.success {
    background: #0066FF!important;
    transform: none;
    box-shadow: #0066FF;
}

.animated-plus group-expanded{
  color: #0F0F0F;

}

.animated-plus {
  background: transparent !important;
}

.animated-plus::before,
.animated-plus::after {
  background-color: #0F0F0F !important;
}


.gcal-modal-overlay{
  
    background: transparent;
}

.gcal-modal-box{
  
    background: #FFF;
    
    box-shadow: 0 24px 64px rgba(0,0,0,0.3);
}

.gcal-modal-close{
  
    background: rgba(0,0,0,0.08);
}

  .gcal-modal-close:hover {
    background: rgba(0,0,0,0.18);
  }




    .play_overlay_icon {
    background: rgba(0,0,0,0.18);
  }
  .build_thumb_card:hover .play_overlay_icon { background: rgba(0,0,0,0.38); }
 
  .play_circle {
    background: rgba(255,255,255,0.88);
    box-shadow: 0 2px 12px rgba(0,0,0,0.35);
  }
  .build_thumb_card:hover .play_circle { transform: scale(1.12); }
  .yt_badge {
    background: rgba(0,0,0,0.72); color: #FAF8F3;
    
  }




    .home_event_sunset_slide_content {
    
      background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.10);
    
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
  }

  .sunset_slide_title {
    color: #FAF8F3;
    text-shadow: 0 1px 6px rgba(0,0,0,0.35);
  }

  .sunset_slide_text {

    color: rgba(255,255,255,0.82);
    text-shadow: 0 1px 4px rgba(0,0,0,0.25);
  }