/* ==========================================================================
   FDM CINEMATIC + FROSTED-GLASS LAYER (v3.10.0)
   Ported from tests/redesign_lab/cinematic-effects.css (approved in the lab).
   Loaded AFTER fdm-style.css (see enqueue_assets) so equal-specificity rules win.
   Contents: living iridescent background, transparent cinematic hero + review
   counter, frosted-glass surfaces, no-green palette (coral #E4572E / navy),
   button shimmer, scroll-reveal, page transitions.
   Deliberately NOT ported from the lab: add-to-cart fly/bump/flash (prod adds
   to cart via page redirect / form submit) and the lab's floating toolbar.
   ========================================================================== */
:root {
  --rd-navy: #0B132B;
  --rd-slate: #1E293B;
  --rd-muted: #94A3B8;
  --rd-border-subtle: rgba(226, 232, 240, 0.8);
  --rd-bg-warm: #FBFBFC;
  --rd-radius-md: 12px;
  --rd-shadow-subtle: 0 2px 8px -2px rgba(15, 23, 42, 0.05);
  --rd-shadow-card: 0 8px 24px -6px rgba(15, 23, 42, 0.08), 0 2px 6px -1px rgba(15, 23, 42, 0.04);
  --rd-shadow-hover: 0 16px 36px -8px rgba(15, 23, 42, 0.12), 0 4px 12px -2px rgba(15, 23, 42, 0.06);
  --rd-shadow-glow-amber: 0 12px 30px -4px rgba(242, 121, 74, 0.18);
  --rd-transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 0. PALETTE OVERRIDE — no green anywhere. Sage tokens are remapped to a warm
   amber/terracotta accent; !important guarantees this wins regardless of
   where the token was first declared (inline page <style> vs this sheet). */
:root {
  --rd-sage: #E4572E !important;
  --rd-sage-light: #FDE8DE !important;
  --fdm-sage: #E4572E !important;
  --fdm-sage-deep: #B23A1C !important;
  --fdm-success: #E4572E !important;
  --fdm-success-light: #FDE8DE !important;
  --rd-accent: #E4572E;
  --rd-accent-deep: #B23A1C;
  --rd-accent-light: #FDE8DE;
}
/* Hardcoded (non-variable) green badges from the live plugin CSS */
.fdm-badge-free {
  background: var(--rd-accent-light, #FDE8DE) !important;
  color: var(--rd-accent-deep, #B23A1C) !important;
}
.fdm-pulse-dot {
  background: #F2794A !important;
  box-shadow: 0 0 0 2px rgba(228, 87, 46, 0.2) !important;
}
/* Hide top utility bar & sale flash badges per design update */
.fdm-top-utility-bar { display: none !important; }
.onsale, .single-product .onsale, .single-product span.onsale, .wc-block-grid__product-onsale { display: none !important; }

/* Redeclaring the same @keyframes name replaces it everywhere it's used
   (the "in stock" pulsing dot), no selector matching needed. */
@keyframes fdmPulse {
  0%   { box-shadow: 0 0 0 0 rgba(228, 87, 46, 0.7); }
  70%  { box-shadow: 0 0 0 6px rgba(228, 87, 46, 0); }
  100% { box-shadow: 0 0 0 0 rgba(228, 87, 46, 0); }
}
/* The catalog page re-scopes --fdm-sage on this wrapper (not :root), which
   shadows the inherited override above — redeclare it at the same scope. */
.fdm-full-catalog-wrap {
  --fdm-sage: #E4572E !important;
  --fdm-sage-deep: #B23A1C !important;
}

/* 1. SITEWIDE AMBIENT BACKGROUND — living, iridescent aurora.
   Two things move at once: (a) five blobs sweep across most of the viewport
   on independent, fairly quick timings, and (b) each blob's COLOUR cycles
   through coral -> rose -> violet -> blue on its own offset, so hues visibly
   flow into each other (that's the "shimmer"). Registered @property makes
   both positions and colours animatable. No green in the hue path. Fixed
   ::before = backdrop showing through page gaps, can't tint real content. */
@property --rd-x1 { syntax: '<percentage>'; inherits: false; initial-value: 6%; }
@property --rd-y1 { syntax: '<percentage>'; inherits: false; initial-value: 8%; }
@property --rd-x2 { syntax: '<percentage>'; inherits: false; initial-value: 94%; }
@property --rd-y2 { syntax: '<percentage>'; inherits: false; initial-value: 12%; }
@property --rd-x3 { syntax: '<percentage>'; inherits: false; initial-value: 18%; }
@property --rd-y3 { syntax: '<percentage>'; inherits: false; initial-value: 94%; }
@property --rd-x4 { syntax: '<percentage>'; inherits: false; initial-value: 88%; }
@property --rd-y4 { syntax: '<percentage>'; inherits: false; initial-value: 88%; }
@property --rd-x5 { syntax: '<percentage>'; inherits: false; initial-value: 50%; }
@property --rd-y5 { syntax: '<percentage>'; inherits: false; initial-value: 40%; }
@property --rd-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --rd-c1 { syntax: '<color>'; inherits: false; initial-value: rgba(228, 87, 46, 0.30); }
@property --rd-c2 { syntax: '<color>'; inherits: false; initial-value: rgba(37, 99, 235, 0.24); }
@property --rd-c3 { syntax: '<color>'; inherits: false; initial-value: rgba(244, 114, 182, 0.28); }
@property --rd-c4 { syntax: '<color>'; inherits: false; initial-value: rgba(139, 92, 246, 0.24); }
@property --rd-c5 { syntax: '<color>'; inherits: false; initial-value: rgba(251, 146, 60, 0.20); }

html, body {
  overflow-x: clip !important;
  max-width: 100% !important;
}
#page.site {
  overflow: visible !important;
  overflow-x: clip !important;
}
body {
  background-color: var(--rd-bg-warm) !important;
  position: relative;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(circle at var(--rd-x1) var(--rd-y1), var(--rd-c1) 0%, transparent 46%),
    radial-gradient(circle at var(--rd-x2) var(--rd-y2), var(--rd-c2) 0%, transparent 48%),
    radial-gradient(circle at var(--rd-x3) var(--rd-y3), var(--rd-c3) 0%, transparent 48%),
    radial-gradient(circle at var(--rd-x4) var(--rd-y4), var(--rd-c4) 0%, transparent 50%),
    radial-gradient(circle at var(--rd-x5) var(--rd-y5), var(--rd-c5) 0%, transparent 42%),
    conic-gradient(from var(--rd-ang) at 50% 42%,
      rgba(228, 87, 46, 0.11), rgba(244, 114, 182, 0.11),
      rgba(139, 92, 246, 0.11), rgba(37, 99, 235, 0.11),
      rgba(228, 87, 46, 0.11)),
    radial-gradient(circle at 1px 1px, rgba(11, 19, 43, 0.035) 1px, transparent 0);
  background-size: auto, auto, auto, auto, auto, auto, 26px 26px;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat;
  animation:
    rdOrbit1 9s ease-in-out infinite alternate,
    rdOrbit2 12s ease-in-out infinite alternate,
    rdOrbit3 15s ease-in-out infinite alternate,
    rdOrbit4 10s ease-in-out infinite alternate,
    rdOrbit5 14s ease-in-out infinite alternate,
    rdSheen 22s linear infinite,
    rdHue1 16s ease-in-out infinite,
    rdHue2 20s ease-in-out infinite,
    rdHue3 18s ease-in-out infinite,
    rdHue4 22s ease-in-out infinite,
    rdHue5 13s ease-in-out infinite;
}

@keyframes rdOrbit1 { to { --rd-x1: 62%; --rd-y1: 46%; } }
@keyframes rdOrbit2 { to { --rd-x2: 30%; --rd-y2: 52%; } }
@keyframes rdOrbit3 { to { --rd-x3: 70%; --rd-y3: 30%; } }
@keyframes rdOrbit4 { to { --rd-x4: 24%; --rd-y4: 26%; } }
@keyframes rdOrbit5 { to { --rd-x5: 82%; --rd-y5: 72%; } }
@keyframes rdSheen  { to { --rd-ang: 360deg; } }

/* colour flow: each blob walks the same coral/rose/violet/blue loop, offset */
@keyframes rdHue1 {
  0%, 100% { --rd-c1: rgba(228, 87, 46, 0.30); }
  25%      { --rd-c1: rgba(244, 114, 182, 0.28); }
  50%      { --rd-c1: rgba(139, 92, 246, 0.26); }
  75%      { --rd-c1: rgba(37, 99, 235, 0.26); }
}
@keyframes rdHue2 {
  0%, 100% { --rd-c2: rgba(37, 99, 235, 0.24); }
  25%      { --rd-c2: rgba(228, 87, 46, 0.28); }
  50%      { --rd-c2: rgba(244, 114, 182, 0.28); }
  75%      { --rd-c2: rgba(139, 92, 246, 0.26); }
}
@keyframes rdHue3 {
  0%, 100% { --rd-c3: rgba(244, 114, 182, 0.28); }
  25%      { --rd-c3: rgba(139, 92, 246, 0.26); }
  50%      { --rd-c3: rgba(37, 99, 235, 0.26); }
  75%      { --rd-c3: rgba(228, 87, 46, 0.28); }
}
@keyframes rdHue4 {
  0%, 100% { --rd-c4: rgba(139, 92, 246, 0.24); }
  25%      { --rd-c4: rgba(37, 99, 235, 0.26); }
  50%      { --rd-c4: rgba(228, 87, 46, 0.28); }
  75%      { --rd-c4: rgba(244, 114, 182, 0.28); }
}
@keyframes rdHue5 {
  0%, 100% { --rd-c5: rgba(251, 146, 60, 0.20); }
  33%      { --rd-c5: rgba(244, 114, 182, 0.24); }
  66%      { --rd-c5: rgba(139, 92, 246, 0.22); }
}

@media (prefers-reduced-motion: reduce) {
  body::before { animation: none !important; }
}

/* 2. HERO — transparent (the living background shows straight through) with the
   "cine" reveal ported 1:1 from the reference snippet (cinematic-hero-snippet.html,
   from bluechip.lv): full-height scene, blocks rise one after another with the
   reference's exact delays, stats count up, a pulsing line invites the scroll,
   and the scene dissolves as you scroll away. */
.d2c-hero {
  position: relative !important;
  isolation: isolate;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  min-height: auto !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2.5rem 6vw 2.5rem !important;
  opacity: calc(1 - var(--rd-hero-fade, 0));
}

.rd-hero-canvas,
.rd-hero-vignette { display: none !important; }

.d2c-hero .rd-eyebrow,
.d2c-hero h1,
.d2c-hero p,
.d2c-hero .rd-stats,
.d2c-hero .d2c-btn,
.d2c-hero .d2c-trust-badges {
  opacity: 0;
  transform: translateY(14px);
  animation: rdCineIn 0.7s ease forwards;
}
.d2c-hero .rd-eyebrow {
  font: 600 12px 'Plus Jakarta Sans', sans-serif;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--rd-accent-deep, #B23A1C);
  animation-delay: 0.15s;
}
.d2c-hero h1 {
  margin-top: 18px !important;
  transform: translateY(28px) scale(0.98);
  animation-duration: 0.9s;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  animation-delay: 0.35s;
}
.d2c-hero h1 em { font-style: normal; color: var(--rd-accent, #E4572E) !important; }
.d2c-hero p            { transform: translateY(18px); animation-delay: 0.85s; }
.d2c-hero .rd-stats    { animation-delay: 1.1s; }
.d2c-hero .d2c-btn {
  animation:
    rdCineIn 0.7s ease 1.3s forwards,
    rdCtaPulse 2.8s ease-out 2.6s infinite;
}
.d2c-hero .d2c-trust-badges { animation-delay: 1.5s; }

@keyframes rdCineIn {
  to { opacity: 1; transform: none; }
}

@media (max-width: 768px) {
  .d2c-hero {
    min-height: auto !important;
    padding: 1.25rem 12px 1.5rem !important;
  }
  .d2c-hero h1 {
    font-size: 1.7rem !important;
    line-height: 1.22 !important;
    margin-top: 10px !important;
    margin-bottom: 8px !important;
    animation-duration: 1.2s;
  }
  .d2c-hero p {
    font-size: 0.92rem !important;
    line-height: 1.35 !important;
    margin-bottom: 12px !important;
  }
  .d2c-hero .rd-stats {
    margin: 0.75rem 0 1.25rem !important;
    gap: 28px !important;
  }
  .d2c-hero .d2c-trust-badges {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 6px !important;
    margin-top: 12px !important;
  }
  .d2c-hero .d2c-trust-badges .d2c-badge {
    font-size: 10.5px !important;
    padding: 4px 8px !important;
  }
  .d2c-hero .rd-eyebrow, .d2c-hero p, .d2c-hero .rd-stats,
  .d2c-hero .d2c-trust-badges { animation-duration: 1s; }
  .d2c-hero .rd-eyebrow { letter-spacing: 2.5px; font-size: 11px; }
  .rd-scroll-cue { display: none !important; }
}

/* review counter + average rating (numbers count up via cinematic-effects.js) */
.rd-stats {
  display: flex;
  justify-content: center;
  gap: 48px;
  margin: 2rem 0 2.2rem;
}
.rd-stats > div { text-align: center; }
.rd-stats b {
  display: block;
  font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  font-size: clamp(30px, 3.6vw, 44px);
  line-height: 1.1;
  color: var(--rd-navy, #0B132B);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.rd-stats b i { font-style: normal; color: var(--rd-accent, #E4572E); }
.rd-stats > div > span {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: rgba(11, 19, 43, 0.72);
}
@media (max-width: 520px) { .rd-stats { gap: 28px; } }

@media (prefers-reduced-motion: reduce) {
  .d2c-hero .rd-eyebrow, .d2c-hero h1, .d2c-hero p, .d2c-hero .rd-stats,
  .d2c-hero .d2c-btn, .d2c-hero .d2c-trust-badges {
    opacity: 1; transform: none; animation: none;
  }
}

/* Bring the homepage primary CTA in line with the rest of the design system */
.d2c-btn {
  background: var(--rd-navy, #0B132B) !important;
  color: #FFFFFF !important;
  text-decoration: none !important;
  border-radius: var(--rd-radius-md, 12px) !important;
  font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif !important;
  letter-spacing: -0.01em;
  transition: var(--rd-transition, all 0.22s cubic-bezier(0.16, 1, 0.3, 1)) !important;
}
.d2c-btn:hover {
  background: var(--rd-sage, #E4572E) !important;
  color: #FFFFFF !important;
  transform: translateY(-2px);
}
.d2c-btn:active {
  transform: translateY(1px) scale(0.985);
}

/* Trust badges as calm pill chips */
.d2c-trust-badges {
  gap: 0.85rem !important;
}
.d2c-badge {
  background: #FFFFFF;
  border: 1px solid var(--rd-border-subtle, #E2E8F0);
  border-radius: 9999px;
  padding: 8px 16px;
  box-shadow: var(--rd-shadow-subtle, 0 2px 8px -2px rgba(15,23,42,0.05));
  color: var(--rd-slate, #1E293B) !important;
  transition: var(--rd-transition, all 0.22s cubic-bezier(0.16, 1, 0.3, 1));
}
.d2c-badge:hover {
  transform: translateY(-2px);
  box-shadow: var(--rd-shadow-card, 0 8px 24px -6px rgba(15,23,42,0.08));
}

@keyframes rdCtaPulse {
  0%   { box-shadow: 0 10px 28px -6px rgba(11, 19, 43, 0.4), 0 0 0 0 rgba(228, 87, 46, 0.28); }
  70%  { box-shadow: 0 10px 28px -6px rgba(11, 19, 43, 0.4), 0 0 0 14px rgba(228, 87, 46, 0); }
  100% { box-shadow: 0 10px 28px -6px rgba(11, 19, 43, 0.4), 0 0 0 0 rgba(228, 87, 46, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .d2c-hero .d2c-btn { animation: rdHeroRise 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0s forwards !important; }
}

/* Scroll cue — label + pulsing line, appears last below trust badges */
.rd-scroll-cue {
  position: relative;
  margin: 32px auto 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--rd-muted, #94A3B8);
  font: 500 10px 'Plus Jakarta Sans', sans-serif;
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: 0;
  animation: rdCineIn 0.7s ease 1.4s forwards;
}
.rd-scroll-cue .line {
  width: 1px;
  height: 34px;
  background: linear-gradient(var(--rd-accent, #E4572E), transparent);
  animation: rdCuePulse 1.8s ease infinite;
}
@keyframes rdCuePulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .rd-scroll-cue { opacity: 1; animation: none; }
  .rd-scroll-cue .line { animation: none; }
}

/* thin scroll-progress bar across the top */
.rd-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0;
  z-index: 2147483000;
  pointer-events: none;
  background: linear-gradient(90deg, #E4572E, #F472B6, #8B5CF6, #2563EB);
}

/* 3. BUTTON GLOW — hover/focus micro-interactions across all pages */
.single_add_to_cart_button,
.checkout-button,
#place_order,
.d2c-btn {
  position: relative;
  overflow: hidden !important;
  box-shadow: 0 6px 18px -6px rgba(11, 19, 43, 0.28) !important;
}

.single_add_to_cart_button:hover,
#place_order:hover,
.checkout-button:hover {
  box-shadow: 0 14px 34px -6px rgba(11, 19, 43, 0.38), 0 0 0 4px rgba(11, 19, 43, 0.07) !important;
}

/* Shimmer sweep across primary CTAs on hover */
.single_add_to_cart_button::before,
.checkout-button::before,
#place_order::before,
.d2c-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 20%, rgba(255,255,255,0.22) 40%, rgba(255,255,255,0.22) 46%, transparent 66%);
  background-size: 250% 100%;
  background-position: 120% 0;
  pointer-events: none;
  transition: background-position 0.7s ease;
}
.single_add_to_cart_button:hover::before,
.checkout-button:hover::before,
#place_order:hover::before,
.d2c-btn:hover::before {
  background-position: -20% 0;
}

/* Ripple element injected by JS on click */
.rd-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  transform: scale(0);
  animation: rdRipple 0.6s ease-out forwards;
  pointer-events: none;
}
@keyframes rdRipple {
  to { transform: scale(2.6); opacity: 0; }
}

/* 5. SCROLL-REVEAL */
.rd-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.rd-reveal.rd-in-view {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .rd-reveal { opacity: 1; transform: none; transition: none; }
}

/* CATALOG — real card class is .fdm-product-card (not ul.products, unused on this build) */
.fdm-product-card {
  transition: var(--rd-transition, all 0.22s cubic-bezier(0.16, 1, 0.3, 1)), box-shadow 0.22s ease !important;
}
.fdm-product-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--rd-shadow-hover, 0 16px 36px -8px rgba(15,23,42,0.12)) !important;
}
.fdm-product-card .fdm-card-img {
  transition: transform 0.4s ease;
}
.fdm-product-card:hover .fdm-card-img {
  transform: scale(1.03);
}
.fdm-card-btn,
a.fdm-card-btn,
.fdm-product-card a {
  text-decoration: none !important;
}

/* 7. HOMEPAGE SECTION POLISH — hover lift, review cards, footer CTA glow */
.d2c-card,
.d2c-matrix-card,
.d2c-review-item {
  transition: var(--rd-transition, all 0.22s cubic-bezier(0.16, 1, 0.3, 1)), box-shadow 0.22s ease !important;
}
.d2c-card:hover,
.d2c-matrix-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--rd-shadow-hover, 0 16px 36px -8px rgba(15,23,42,0.12)) !important;
  border-color: rgba(15, 23, 42, 0.14) !important;
}
.d2c-review-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--rd-shadow-card, 0 8px 24px -6px rgba(15,23,42,0.08)) !important;
}
.d2c-matrix-card img {
  transition: transform 0.4s ease;
}
.d2c-matrix-card:hover img {
  transform: scale(1.03);
}

/* Inline-styled accent borders on the "why it's safe" cards — one of them is
   hardcoded green (#10b981) in the page markup itself; swap it for amber. */
.d2c-card[style*="10b981" i],
.d2c-card[style*="10B981" i] {
  border-left-color: var(--rd-accent, #E4572E) !important;
}

/* Review "verified" accent — amber, not the theme's default green */
.d2c-review-item {
  border-left-color: var(--rd-accent, #E4572E) !important;
}
.d2c-review-badge {
  background: var(--rd-accent-light, #FDE8DE) !important;
  color: var(--rd-accent-deep, #B23A1C) !important;
}

.d2c-footer-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(70% 90% at 18% 15%, rgba(228, 87, 46, 0.28) 0%, transparent 60%),
    radial-gradient(60% 80% at 85% 85%, rgba(37, 99, 235, 0.18) 0%, transparent 62%),
    #111827 !important;
}
.d2c-footer-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.06) 1px, transparent 0);
  background-size: 24px 24px;
  pointer-events: none;
}
.d2c-footer-cta h2,
.d2c-footer-cta .d2c-btn {
  position: relative;
  z-index: 1;
}
/* Dark section: a navy-on-navy button is invisible, so this one flips —
   warm off-white fill + dark text, glowing so it reads clearly as the CTA. */
.d2c-footer-cta .d2c-btn {
  background: var(--rd-bg-warm, #FBFBFD) !important;
  color: var(--rd-navy, #0B132B) !important;
  box-shadow: 0 10px 30px -6px rgba(0, 0, 0, 0.5), 0 0 0 0 rgba(228, 87, 46, 0.4) !important;
  animation: rdFooterCtaPulse 3.2s ease-out 1s infinite;
}
.d2c-footer-cta .d2c-btn:hover {
  background: var(--rd-accent-light, #FDE8DE) !important;
  color: var(--rd-accent-deep, #B23A1C) !important;
}
@keyframes rdFooterCtaPulse {
  0%   { box-shadow: 0 10px 30px -6px rgba(0,0,0,0.5), 0 0 0 0 rgba(228, 87, 46, 0.35); }
  70%  { box-shadow: 0 10px 30px -6px rgba(0,0,0,0.5), 0 0 0 14px rgba(228, 87, 46, 0); }
  100% { box-shadow: 0 10px 30px -6px rgba(0,0,0,0.5), 0 0 0 0 rgba(228, 87, 46, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .d2c-footer-cta .d2c-btn { animation: none; }
}

/* 8. MORE DEPTH — richer, warmer shadows + glossy top highlight on surfaces */
.d2c-card,
.d2c-matrix-card,
.fdm-product-card,
.fdm-matrix-card,
.fdm-feature-item,
.d2c-badge,
#order_review,
.cart_totals,
.fdm-cart-summary-box {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    var(--rd-shadow-card, 0 8px 24px -6px rgba(15,23,42,0.08)) !important;
}
.d2c-card:hover,
.d2c-matrix-card:hover,
.fdm-product-card:hover,
.fdm-matrix-card:hover {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.8) inset,
    0 20px 44px -10px rgba(15, 23, 42, 0.16),
    0 6px 16px -4px rgba(15, 23, 42, 0.08) !important;
}

/* Sticky header gains depth once the page scrolls (see cinematic-effects.js) */
.site-header,
#masthead {
  transition: box-shadow 0.3s ease;
}
.rd-header-scrolled .site-header,
.rd-header-scrolled #masthead {
  box-shadow: 0 8px 24px -10px rgba(11, 19, 43, 0.18) !important;
}

/* 9. CATALOG FILTER CHIPS — entrance stagger + livelier active/focus states */
.fdm-cat-tab,
a.fdm-cat-tab,
.fdm-qp-tile {
  transition: var(--rd-transition, all 0.22s cubic-bezier(0.16, 1, 0.3, 1)), box-shadow 0.22s ease;
  text-decoration: none !important;
}
.fdm-cat-tab,
a.fdm-cat-tab,
.fdm-cat-tab:hover,
.fdm-cat-tab:focus,
.fdm-cat-tab:active,
.fdm-cat-tab:visited,
a.fdm-cat-tab:hover,
a.fdm-cat-tab:focus,
a.fdm-cat-tab:active,
a.fdm-cat-tab:visited {
  text-decoration: none !important;
}
.fdm-cat-tab.active,
.fdm-qp-tile.active {
  box-shadow: 0 8px 20px -6px rgba(228, 87, 46, 0.35) !important;
  text-decoration: none !important;
}
.fdm-cat-tab:hover,
.fdm-qp-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px -6px rgba(11, 19, 43, 0.14);
  text-decoration: none !important;
}

/* The live site's own fdm-mattress-core plugin CSS is soaked in the same
   emerald green (#059669/#10B981, 40 rules across badges, prices, hovers,
   the add-to-cart button and its gallery/bump states) at the SAME
   .single-product-scoped specificity we'd otherwise lose to. Recolored
   1:1 below — amber for badges/accents/prices (matches the site's own
   pre-existing discount-badge amber), navy for primary action buttons
   (kept consistent with the rest of the button system). */
.fdm-btn-primary:hover {
  background: #060a17 !important;
}
.fdm-btn-sticky-buy:hover,
button.fdm-btn-sticky-buy:hover {
  background: #060a17 !important;
}
.fdm-pdp-verified-badge {
  background: #FDE8DE !important;
  color: #B23A1C !important;
}
.single-product .single_add_to_cart_button,
.single-product button.single_add_to_cart_button {
  background: linear-gradient(135deg, #1E293B, #0B132B) !important;
  box-shadow: 0 8px 20px rgba(11, 19, 43,0.25) !important;
}
.single-product .single_add_to_cart_button:hover {
  background: linear-gradient(135deg, #0B132B, #060a17) !important;
  box-shadow: 0 10px 25px rgba(11, 19, 43,0.35) !important;
}
.fdm-pdp-review-verified,
.fdm-verified-check,
.fdm-insight-metric,
.fdm-badge-oeko,
.fdm-stock-status,
.fdm-size-selected-val,
.fdm-bump-current-price,
.fdm-downsell-price,
.fdm-precheckout-price {
  color: #E4572E !important;
}
.fdm-form-feedback.success {
  background: #FDE8DE !important;
  color: #B23A1C !important;
}
.single-product .woocommerce-product-gallery .flex-control-thumbs li:hover,
.single-product .woocommerce-product-gallery .flex-control-thumbs li .flex-active,
.single-product .woocommerce-product-gallery .flex-control-thumbs li.flex-active {
  border-color: #E4572E !important;
  box-shadow: 0 0 0 2px rgba(228, 87, 46,0.2) !important;
}
.fdm-pdp-layer-card:hover {
  border-color: #E4572E !important;
  box-shadow: 0 4px 12px rgba(228, 87, 46,0.08) !important;
}
.fdm-layer-num-badge {
  background: #E4572E !important;
}
.fdm-layer-tag {
  color: #E4572E !important;
  background: #FDE8DE !important;
}
.fdm-insight-card::before {
  background: linear-gradient(90deg, #E4572E, #F2794A) !important;
}
.fdm-narrative-lead {
  border-left-color: #E4572E !important;
}
.fdm-size-btn:hover,
.fdm-height-btn:hover,
.fdm-btn-pdp-quiz:hover {
  border-color: #E4572E !important;
  color: #E4572E !important;
  background: #FDE8DE !important;
}
.single-product div.product form.cart .single_add_to_cart_button,
.single-product div.product .single_add_to_cart_button {
  background: #0B132B !important;
  box-shadow: 0 2px 6px rgba(11, 19, 43,0.25) !important;
}
.single-product div.product form.cart .single_add_to_cart_button:hover,
.single-product div.product .single_add_to_cart_button:hover {
  background: #060a17 !important;
  box-shadow: 0 4px 12px rgba(11, 19, 43,0.35) !important;
}
.fdm-gallery-nav-btn:hover,
.fdm-gallery-zoom-btn:hover {
  color: #E4572E !important;
  border-color: #F3B9A3 !important;
}
.fdm-gallery-thumb:hover {
  border-color: #E4572E !important;
}
.fdm-gallery-thumb.active {
  border-color: #E4572E !important;
  background: #FDE8DE !important;
  box-shadow: 0 0 0 2px rgba(228, 87, 46,0.35) !important;
}
.fdm-bump-card.in-cart {
  border-color: #E4572E !important;
  background: #FDE8DE !important;
  box-shadow: 0 4px 16px rgba(228, 87, 46,0.15) !important;
}
.fdm-bump-checkbox:checked + .fdm-custom-checkbox,
.fdm-bump-card.in-cart .fdm-custom-checkbox {
  background: #E4572E !important;
  border-color: #E4572E !important;
}
.fdm-bump-card.in-cart .fdm-bump-img-wrap {
  border-color: #F3B9A3 !important;
}
.fdm-bump-status-tag.active {
  background: #E4572E !important;
  border-color: #E4572E !important;
  box-shadow: 0 2px 6px rgba(228, 87, 46,0.25) !important;
}
.fdm-btn-downsell-cta {
  background: #0B132B !important;
}
.fdm-dpd-free-tag,
.fdm-seller-vat-badge {
  background: #FDE8DE !important;
  color: #B23A1C !important;
  border-color: #F3B9A3 !important;
}
.fdm-bio-good {
  border-color: #F3B9A3 !important;
}
/* Cookie-consent buttons styled for EDPB 2023 Taskforce compliance */
#fdm-cookie-accept-btn {
  background: #E4572E !important;
  color: #FFFFFF !important;
}
#fdm-cookie-reject-btn {
  background: transparent !important;
  color: #E2E8F0 !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
}
#fdm-cookie-reject-btn:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #FFFFFF !important;
}
#fdm-cookie-settings-btn {
  color: #94A3B8 !important;
  text-decoration: underline !important;
  background: transparent !important;
  border: none !important;
}
#fdm-cookie-settings-btn:hover {
  color: #FFFFFF !important;
}
/* Checkout's inline-styled trust/security notice box (no class to hook) */
div[style*="16a34a" i] {
  background: #FDE8DE !important;
  border-left-color: #E4572E !important;
}
p[style*="166534" i] {
  color: #B23A1C !important;
}
.fdm-badge-spine {
  color: #B23A1C !important;
  border-color: #F3B9A3 !important;
  background: #FDE8DE !important;
}
.fdm-result-box {
  border-color: #F3B9A3 !important;
}
/* Per-instance inline-colored tags (e.g. "H3 КОМФОРТ" slice tag) */
[style*="dcfce7" i] {
  background: #FDE8DE !important;
}
[style*="166534" i] {
  color: #B23A1C !important;
}
.fdm-precheckout-item.is-added {
  background: #FDE8DE !important;
  border-color: #F2794A !important;
}
.fdm-precheckout-add-btn.added {
  background: #0B132B !important;
}
.fdm-btn-modal-proceed {
  box-shadow: 0 4px 12px rgba(228, 87, 46,0.25) !important;
}

/* A second, separate green family (#5E7A68 sage, #16A34A/#15803D, #2D5A3C)
   is hardcoded (not via the --fdm-sage variable) across cart, checkout and
   PDP: step tracker, payment method hover, cart links, insight badges. */
.fdm-btn-primary,
.fdm-btn-sticky-buy,
button.fdm-btn-sticky-buy,
.fdm-btn-sage {
  background: #0B132B !important;
}
.fdm-btn-primary:hover,
.fdm-btn-sticky-buy:hover,
button.fdm-btn-sticky-buy:hover,
.fdm-btn-sage:hover {
  background: #060a17 !important;
  box-shadow: 0 4px 14px rgba(11, 19, 43, 0.35) !important;
}
.fdm-result-badge {
  background: #E4572E !important;
}
.fdm-insight-badge {
  background: #FDE8DE !important;
  color: #B23A1C !important;
}
.fdm-bump-spinner {
  border-top-color: #E4572E !important;
}
.fdm-cart-item-title a:hover,
.fdm-step-item.completed,
.fdm-cat-pill,
.fdm-cart-empty-cat-card:hover .fdm-cat-link-text,
.fdm-cart-back-link:hover,
.fdm-help-content a:hover,
.fdm-checkout-review-product-text strong.product-quantity {
  color: #E4572E !important;
}
.fdm-cart-back-link {
  color: #E4572E !important;
}
.fdm-step-item.completed .fdm-step-num,
.fdm-step-divider.active {
  background: #E4572E !important;
}
.fdm-cart-empty-quiz-card {
  border-left-color: #E4572E !important;
}
.fdm-cart-empty-cat-card:hover,
#payment ul.payment_methods li:hover {
  border-color: #E4572E !important;
}

/* 10. CART & CHECKOUT — same no-green rule applies to the base design system's
   checkout/place-order buttons (were solid green in redesign_enhancements.css) */
.checkout-button,
#place_order {
  background: var(--rd-navy, #0B132B) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.12) inset,
    0 10px 28px -4px rgba(11, 19, 43, 0.4) !important;
}
.checkout-button:hover,
#place_order:hover {
  background: #060a17 !important;
}
.fdm-order-bump-box,
.fdm-cart-order-bump {
  animation: rdBumpGlow 3.4s ease-in-out infinite;
}
@keyframes rdBumpGlow {
  0%, 100% { box-shadow: var(--rd-shadow-glow-amber, 0 12px 30px -4px rgba(242,121,74,0.18)); }
  50%      { box-shadow: 0 16px 38px -4px rgba(228, 87, 46, 0.32); }
}
@media (prefers-reduced-motion: reduce) {
  .fdm-order-bump-box, .fdm-cart-order-bump { animation: none; }
}

/* Payment method rows / form fields — small lift + glow on interaction */
#payment ul.payment_methods li:hover {
  box-shadow: 0 6px 16px -6px rgba(11, 19, 43, 0.12);
  transform: translateY(-1px);
}
.woocommerce-input-wrapper input.input-text:focus,
.woocommerce-input-wrapper select:focus,
.woocommerce-input-wrapper textarea:focus,
.variations select:focus {
  box-shadow: 0 0 0 3px rgba(11, 19, 43, 0.12), 0 4px 12px -4px rgba(11, 19, 43, 0.15) !important;
}

/* Clean branded focus ring everywhere in the lab (replaces the default UA ring) */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
.fdm-cat-tab:focus-visible,
.fdm-qp-tile:focus-visible {
  outline: 2px solid var(--rd-navy, #0B132B) !important;
  outline-offset: 2px !important;
}

/* 11. PAGE TRANSITIONS — cross-document View Transitions (same-origin nav):
   old page slides/fades out, new page rises in; the header stays put.
   Browsers without support fall back to the on-load rise below. */
@view-transition { navigation: auto; }

#masthead { view-transition-name: rd-header; }

::view-transition-old(root) {
  animation: rdPageOut 0.28s cubic-bezier(0.4, 0, 1, 1) both;
}
::view-transition-new(root) {
  animation: rdPageIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}
::view-transition-group(rd-header) {
  animation-duration: 0.3s;
}
@keyframes rdPageOut {
  to { opacity: 0; transform: translateY(-10px) scale(0.995); }
}
@keyframes rdPageIn {
  from { opacity: 0; transform: translateY(16px); }
}

/* Fallback (no View Transitions): gentle rise on load */
@supports not (view-transition-name: none) {
  #content { animation: rdPageIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}

/* 12. FROSTED GLASS — matte-glass surfaces instead of solid white.
   Three tiers so nesting stays readable: big panels are the most see-through,
   cards sit a bit denser, small controls/inputs are densest. Everything gets a
   backdrop blur + saturation boost (so the living background glows through,
   softly out of focus), a bright hairline edge and an inset top highlight.
   Active/selected states are excluded on purpose. */
:root {
  --rd-glass-panel: rgba(255, 255, 255, 0.38);
  --rd-glass-card:  rgba(255, 255, 255, 0.55);
  --rd-glass-ctl:   rgba(255, 255, 255, 0.68);
  --rd-glass-edge:  rgba(255, 255, 255, 0.72);
  --rd-glass-blur:  blur(22px) saturate(170%);
  --rd-glass-shadow: 0 1px 0 rgba(255, 255, 255, 0.85) inset, 0 10px 32px -12px rgba(40, 30, 90, 0.18);
}

/* tier 1 — panels / big wrappers */
.d2c-section,
.d2c-reviews,
.fdm-xray-card-box,
.fdm-quiz-box,
.fdm-pdp-main-card,
.fdm-pdp-section,
.fdm-cart-summary-card,
.fdm-checkout-card,
.fdm-checkout-sticky-card,
.fdm-checkout-top-banner,
nav.fdm-checkout-steps-nav,
#masthead.site-header,
footer#colophon {
  background: var(--rd-glass-panel) !important;
  -webkit-backdrop-filter: var(--rd-glass-blur);
  backdrop-filter: var(--rd-glass-blur);
  border: 1px solid var(--rd-glass-edge) !important;
  box-shadow: var(--rd-glass-shadow) !important;
}
#quiz,
.fdm-quiz-box {
  scroll-margin-top: 14vh;
  scroll-margin-block: 14vh;
}
#masthead.site-header,
footer#colophon {
  background: rgba(255, 255, 255, 0.55) !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-radius: 0 !important;
}
#masthead.site-header {
  position: relative !important;
  top: auto !important;
  z-index: 100 !important;
}
.fdm-custom-header-wrapper { background: transparent !important; }

/* Frosted glass PDP main buy-box card */
.single-product div.product .fdm-pdp-main-card,
.fdm-pdp-main-card {
  background: rgba(255, 255, 255, 0.76) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.75) !important;
  border-radius: 24px !important;
  box-shadow: 0 16px 40px -12px rgba(11, 19, 43, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

/* tier 2 — cards */
.d2c-card,
.d2c-matrix-card,
.d2c-review-item,
.d2c-badge,
.fdm-product-card,
.fdm-matrix-card,
.fdm-feature-item,
.fdm-pdp-layer-card,
.fdm-insight-card,
.fdm-pdp-review-card,
.fdm-pdp-delivery-item,
.fdm-pdp-benefits-box,
.fdm-pdp-xray-visual,
.fdm-klix-split-banner,
.fdm-klix-summary-box,
.fdm-bump-card:not(.in-cart),
.fdm-cart-item-row,
.fdm-dpd-delivery-card,
.fdm-checkout-trust-box,
.fdm-checkout-seller-credentials,
.fdm-inspector-card,
.fdm-layer-slice:not(.active),
.fdm-spec-pill {
  background: var(--rd-glass-card) !important;
  -webkit-backdrop-filter: var(--rd-glass-blur);
  backdrop-filter: var(--rd-glass-blur);
  border-color: var(--rd-glass-edge) !important;
  box-shadow: var(--rd-glass-shadow) !important;
}

/* tier 3 — controls & inputs (denser, so text stays crisp) */
.fdm-cat-tab:not(.active),
.fdm-qp-tile:not(.active),
.fdm-size-btn:not(.active),
.fdm-height-btn:not(.active),
.fdm-quiz-opt,
.fdm-qty-stepper,
.fdm-check-pill:not(:has(input:checked)),
.fdm-firm-pill:not(:has(input:checked)),
.fdm-btn-secondary,
a.fdm-hdr-cart-btn,
select.fdm-filter-select,
select.fdm-select-sort,
input.input-text,
input.fdm-coupon-input,
textarea.input-text,
.woocommerce-input-wrapper select {
  background: var(--rd-glass-ctl) !important;
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  backdrop-filter: blur(10px) saturate(150%);
  border-color: var(--rd-glass-edge) !important;
}

/* order-bump box: its opaque cream gradient becomes a coral-tinted glass */
.fdm-order-bump-box,
.fdm-cart-order-bump {
  background: linear-gradient(135deg, rgba(255, 236, 226, 0.62), rgba(255, 255, 255, 0.42)) !important;
  -webkit-backdrop-filter: var(--rd-glass-blur);
  backdrop-filter: var(--rd-glass-blur);
}

/* table cells must not repaint white over the glass behind them */
.fdm-pdp-section table,
.fdm-pdp-section tr,
.fdm-pdp-section td,
.fdm-pdp-section th,
.shop_table,
.shop_table tr,
.shop_table td,
.shop_table th,
#order_review td,
#order_review th,
.woocommerce-terms-and-conditions-wrapper,
.form-row.place-order {
  background: transparent !important;
}

/* glass edges catch light on hover */
.d2c-card:hover,
.d2c-matrix-card:hover,
.fdm-product-card:hover,
.fdm-matrix-card:hover {
  background: rgba(255, 255, 255, 0.68) !important;
}

/* "Фабрика FDM" / "FDM rūpnīca" tag next to the logo — removed per request */
.fdm-logo-tag { display: none !important; }

/* 13. GLASS GEOMETRY — one shared shape language for every glass surface:
   big soft-rounded panels, all exactly the same width (some sections were
   shipped with negative margins / different insets, so their edges never
   lined up), rounded cards inside, and — on phones — a glass margin around the
   content so cards never touch the panel edge. */
.d2c-section,
.d2c-reviews,
.fdm-xray-card-box,
.fdm-quiz-box,
.fdm-pdp-section,
.fdm-pdp-main-card,
.fdm-cart-summary-card,
.fdm-checkout-card,
.fdm-checkout-sticky-card,
.fdm-checkout-top-banner,
nav.fdm-checkout-steps-nav,
.fdm-checkout-steps-nav {
  border-radius: 28px !important;
}

/* Steps tracker pill navigation */
nav.fdm-checkout-steps-nav,
.fdm-checkout-steps-nav {
  border-radius: 9999px !important;
  padding: 10px 24px !important;
  width: fit-content !important;
  max-width: 580px !important;
  margin: 18px auto 28px auto !important;
}

@media (max-width: 768px) {
  nav.fdm-checkout-steps-nav,
  .fdm-checkout-steps-nav {
    width: 100% !important;
    padding: 8px 12px !important;
    border-radius: 24px !important;
  }
}

.d2c-section,
.d2c-reviews,
.d2c-footer-cta {
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: auto !important;
  max-width: none !important;
  box-sizing: border-box !important;
}
.d2c-section,
.d2c-reviews {
  padding: 3rem 2rem !important;
  margin-top: 0 !important;
  margin-bottom: 20px !important;
}
.d2c-footer-cta { border-radius: 28px !important; }

/* cards inside panels: rounder too */
.d2c-card,
.d2c-matrix-card,
.d2c-review-item,
.fdm-product-card,
.fdm-matrix-card,
.fdm-feature-item,
.fdm-pdp-layer-card,
.fdm-insight-card,
.fdm-pdp-review-card,
.fdm-pdp-delivery-item,
.fdm-pdp-benefits-box,
.fdm-klix-split-banner,
.fdm-klix-summary-box,
.fdm-bump-card,
.fdm-cart-item-row,
.fdm-dpd-delivery-card,
.fdm-checkout-trust-box,
.fdm-checkout-seller-credentials,
.fdm-inspector-card,
.fdm-order-bump-box,
.fdm-cart-order-bump {
  border-radius: 22px !important;
}
.d2c-section > .d2c-grid-3,
.d2c-reviews > * { margin-left: 0 !important; margin-right: 0 !important; }

/* phones: glass a little wider than the blocks it holds */
@media (max-width: 640px) {
  .d2c-section,
  .d2c-reviews,
  .fdm-xray-card-box,
  .fdm-quiz-box {
    padding-left: 16px !important;
    padding-right: 16px !important;
    border-radius: 24px !important;
  }
  .d2c-section,
  .d2c-reviews { padding-top: 2rem !important; padding-bottom: 2rem !important; }
  /* Storefront's 2.6em side gutters squeeze the whole column to ~300px — eliminate overflow */
  #content > .col-full {
    width: auto !important;
    max-width: 100% !important;
    margin-left: 10px !important;
    margin-right: 10px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  .col-full {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  #primary.content-area { padding-left: 0 !important; padding-right: 0 !important; }
  .d2c-grid-3 { grid-template-columns: 1fr !important; gap: 16px !important; }
  .d2c-card,
  .d2c-matrix-card,
  .d2c-review-item,
  .fdm-product-card,
  .fdm-pdp-layer-card,
  .fdm-bump-card { border-radius: 20px !important; }
}

/* ==========================================================================
   MOBILE DOUBLE STICKY HEADER (Row 1: Logo + Lang + Cart, Row 2: Nav Menu)
   Pins the complete header smoothly at top: 0
   ========================================================================== */
@media (max-width: 768px) {
  #masthead.site-header {
    position: relative !important;
    top: auto !important;
    z-index: 100 !important;
    margin-bottom: 8px !important;
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.8) !important;
  }
  .fdm-hdr-nav,
  .fdm-hdr-nav.primary-navigation {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding: 6px 4px !important;
    border-top: 1px solid rgba(241, 245, 249, 0.8) !important;
  }
  .fdm-hdr-nav::-webkit-scrollbar {
    display: none !important;
  }
}

/* ==========================================================================
   MOBILE CONVERSION BOTTOM BAR (Option 2 + Option 3 PDP Context-Aware)
   General pages: [WhatsApp] [⚡ Piemeklēt matraci (45s)] [🛒 Grozs (count)]
   PDP product:   [WhatsApp] [🛒 Pievienot grozam · €XXX (3×€YY)] [🛒 Grozs (count)]
   ========================================================================== */
@media (max-width: 768px) {
  body {
    padding-bottom: 74px !important;
  }
  .fdm-mobile-bottom-bar {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background: rgba(11, 19, 43, 0.94) !important;
    backdrop-filter: blur(18px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(180%) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.14) !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)) 12px !important;
    z-index: 99999 !important;
    box-sizing: border-box !important;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.35) !important;
  }
  .fdm-mbb-action-btn {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    border-radius: 12px !important;
    font-family: 'Plus Jakarta Sans', -apple-system, sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: 0.1px !important;
    height: 44px !important;
    box-sizing: border-box !important;
    transition: transform 0.15s ease, background 0.2s ease !important;
    -webkit-tap-highlight-color: transparent !important;
    cursor: pointer !important;
  }
  .fdm-mbb-action-btn:active {
    transform: scale(0.97) !important;
  }
  .fdm-mbb-wa {
    flex: 0 0 52px !important;
    background: rgba(37, 211, 102, 0.14) !important;
    color: #25D366 !important;
    border: 1px solid rgba(37, 211, 102, 0.3) !important;
    font-size: 9.5px !important;
    padding: 2px 4px !important;
  }
  .fdm-mbb-wa .fdm-mbb-btn-icon {
    font-size: 17px !important;
    line-height: 1 !important;
  }
  .fdm-mbb-cta {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    flex-direction: row !important;
    background: linear-gradient(135deg, #E4572E 0%, #F2794A 100%) !important;
    color: #FFFFFF !important;
    font-size: 12px !important;
    gap: 4px !important;
    box-shadow: 0 4px 14px rgba(228, 87, 46, 0.45) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    padding: 0 8px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .fdm-mbb-cta-content {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 100% !important;
  }
  .fdm-mbb-cta .fdm-mbb-split {
    font-size: 9.5px !important;
    opacity: 0.9 !important;
    font-weight: 600 !important;
    background: rgba(0, 0, 0, 0.15) !important;
    padding: 1px 4px !important;
    border-radius: 4px !important;
    margin-left: 2px !important;
  }
  @media (max-width: 380px) {
    .fdm-mobile-bottom-bar {
      padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)) 8px !important;
      gap: 6px !important;
    }
    .fdm-mbb-wa,
    .fdm-mbb-cart {
      flex: 0 0 46px !important;
    }
    .fdm-mbb-cta {
      font-size: 11px !important;
      padding: 0 4px !important;
    }
    .fdm-mbb-cta .fdm-mbb-split {
      font-size: 8.5px !important;
    }
  }
  .fdm-mbb-cart {
    flex: 0 0 52px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    color: #F8FAFC !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    font-size: 9.5px !important;
    padding: 2px 4px !important;
  }
  .fdm-mbb-cart .fdm-mbb-btn-icon {
    font-size: 16px !important;
    line-height: 1 !important;
  }
  .fdm-mbb-btn-sub {
    font-size: 9px !important;
    line-height: 1 !important;
    margin-top: 2px !important;
    letter-spacing: 0.2px !important;
  }
  .fdm-mbb-icon-wrap {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .fdm-mbb-badge {
    position: absolute !important;
    top: -6px !important;
    right: -9px !important;
    background: #E4572E !important;
    color: #FFFFFF !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    min-width: 14px !important;
    height: 14px !important;
    line-height: 14px !important;
    border-radius: 7px !important;
    text-align: center !important;
    padding: 0 2px !important;
    box-shadow: 0 0 0 1.5px rgba(11, 19, 43, 0.95) !important;
  }
}
@media (min-width: 769px) {
  .fdm-mobile-bottom-bar {
    display: none !important;
  }
}

/* Accent-edged cards ("why it's safe"): the colour is set inline per card, and the
   glass edge rule above was repainting the coloured side white on all but the
   one card that had its own override. Restore each colour and give all three
   the same soft glow of their own hue. */
.d2c-card[style*="2563eb" i] {
  border-left-color: #2563EB !important;
  box-shadow: var(--rd-glass-shadow), -8px 0 22px -10px rgba(37, 99, 235, 0.6) !important;
}
.d2c-card[style*="8b5cf6" i] {
  border-left-color: #8B5CF6 !important;
  box-shadow: var(--rd-glass-shadow), -8px 0 22px -10px rgba(139, 92, 246, 0.6) !important;
}
.d2c-card[style*="10b981" i] {
  box-shadow: var(--rd-glass-shadow), -8px 0 22px -10px rgba(228, 87, 46, 0.6) !important;
}