/* ============================================================================
   BloomHer — Refinement Layer
   Minimal editorial system + real 3D card engine.

   Loaded AFTER the base <style> block in index.html, so it wins on ties.
   The base block also contains hard `!important` neumorphic rules on
   `.service-card` (specificity 0,2,0). Every rule here that must beat those
   is written at specificity >= 0,3,0 with `!important`, so it wins cleanly
   instead of relying on load order.

   Layers:
     1  Tokens
     2  Base + typography
     3  Buttons + icons
     4  Header / nav
     5  Hero
     6  Section heads
     7  Category pills
     8  3D card engine          <- the feature
     9  Compact step + value cards
    10  Results showcase
    11  Reviews + pricing + FAQ
    12  CTA strip + dock
    13  Drawer
    14  Footer
    15  Responsive
    16  Motion / touch / print safety
   ========================================================================== */

/* ---------------------------------------------------------------- 1. Tokens */

:root {
  --bh-bg:          #10241F;
  --bh-surface:     #16302A;
  --bh-surface-2:   #1C3A33;
  --bh-surface-3:   #21443B;

  --bh-line:        rgba(243, 221, 211, 0.10);
  --bh-line-2:      rgba(243, 221, 211, 0.16);
  --bh-line-3:      rgba(243, 221, 211, 0.26);

  --bh-cream:       #F3DDD3;
  --bh-cream-dim:   rgba(243, 221, 211, 0.68);
  --bh-cream-faint: rgba(243, 221, 211, 0.44);

  --bh-sage:        #A9C3A1;
  --bh-rose:        #C9877B;

  --bh-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.24), 0 10px 24px -14px rgba(0, 0, 0, 0.60);
  --bh-shadow-2: 0 2px 4px rgba(0, 0, 0, 0.26), 0 26px 52px -22px rgba(0, 0, 0, 0.72);
  --bh-shadow-3: 0 3px 6px rgba(0, 0, 0, 0.30), 0 44px 80px -28px rgba(0, 0, 0, 0.80);

  --bh-ease:     cubic-bezier(0.22, 0.90, 0.24, 1);
  --bh-ease-out: cubic-bezier(0.16, 1, 0.30, 1);

  --bh-perspective: 1200px;
  --bh-radius-card: 16px;
  --bh-radius-pill: 999px;

  --bh-max: 1180px;
  --bh-gutter: 24px;
}

/* ------------------------------------------------- 2. Base + typography ---- */

body {
  background: var(--bh-bg);
  color: var(--bh-cream-dim);
  letter-spacing: 0.002em;
}

.container {
  max-width: var(--bh-max);
  margin-inline: auto;
  padding-inline: var(--bh-gutter);
}

/* Section rhythm: more air, fewer frames. */
section {
  padding-block: 96px;
}

h1, h2, h3, h4 {
  color: var(--bh-cream);
  letter-spacing: -0.012em;
}

p {
  color: var(--bh-cream-dim);
}

/* The base block renders every section eyebrow as a loud uppercase label.
   Keep it quiet and precise instead. */
.eyebrow {
  display: inline-block;
  font-family: 'Poppins', sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--bh-sage);
  opacity: 0.9;
  margin-bottom: 14px;
}

/* Hairline divider utility used by a few sections in the base markup. */
.bh-rule {
  height: 1px;
  border: 0;
  background: var(--bh-line);
  margin: 0;
}

/* ---------------------------------------------------- 3. Buttons + icons --- */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.005em;
  padding: 15px 26px;
  border-radius: var(--bh-radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  transition:
    transform 0.28s var(--bh-ease),
    background-color 0.28s var(--bh-ease),
    border-color 0.28s var(--bh-ease),
    box-shadow 0.28s var(--bh-ease),
    color 0.28s var(--bh-ease);
}

.btn-primary {
  background: var(--bh-cream);
  color: #12251F;
  border-color: var(--bh-cream);
  box-shadow: var(--bh-shadow-1);
}

.btn-primary:hover {
  background: #FFF0E8;
  border-color: #FFF0E8;
  transform: translateY(-2px);
  box-shadow: var(--bh-shadow-2);
}

.btn-primary:active {
  transform: translateY(0) scale(0.99);
}

.btn-secondary {
  background: transparent;
  color: var(--bh-cream);
  border-color: var(--bh-line-3);
}

.btn-secondary:hover {
  border-color: var(--bh-cream);
  background: rgba(243, 221, 211, 0.06);
  transform: translateY(-2px);
}

.btn-secondary:active {
  transform: translateY(0) scale(0.99);
}

.btn:focus-visible,
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--bh-sage);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Kill the looping glass "gleam sweeper" bolted onto every primary button
   and the dock in the base block — pure decoration, and it animates forever. */
.btn-primary::after,
.dock-container::after {
  display: none !important;
  animation: none !important;
}

/* Inline SVG icon defaults. Replaces the emoji the base markup used as UI
   chrome (cart, stars, fire, bolt, crown, checkmarks, shields). */
.bh-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  vertical-align: -0.125em;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bh-icon--sm { width: 0.85em; height: 0.85em; }
.bh-icon--lg { width: 1.35em; height: 1.35em; }

/* ------------------------------------------------------- 4. Header / nav --- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(16, 36, 31, 0.82);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border-bottom: 1px solid var(--bh-line);
}

.site-header .nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 68px;
}

.brand {
  font-family: 'Marcellus', serif;
  font-size: 21px;
  letter-spacing: 0.01em;
  color: var(--bh-cream);
}

.brand span { color: var(--bh-sage); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav-links a {
  position: relative;
  font-size: 13.5px;
  color: var(--bh-cream-dim);
  padding-block: 4px;
  transition: color 0.24s var(--bh-ease);
}

.nav-links a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: var(--bh-sage);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.32s var(--bh-ease);
}

.nav-links a:hover { color: var(--bh-cream); }
.nav-links a:hover::after { transform: scaleX(1); }

.nav-cart-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 16px 10px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--bh-cream);
  background: rgba(243, 221, 211, 0.06);
  border: 1px solid var(--bh-line-2);
  border-radius: var(--bh-radius-pill);
  cursor: pointer;
  transition: background-color 0.24s var(--bh-ease), border-color 0.24s var(--bh-ease), transform 0.24s var(--bh-ease);
}

.nav-cart-pill:hover {
  background: rgba(243, 221, 211, 0.1);
  border-color: var(--bh-line-3);
  transform: translateY(-1px);
}

.nav-cart-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding-inline: 6px;
  font-size: 11px;
  font-weight: 600;
  color: #12251F;
  background: var(--bh-rose);
  border-radius: var(--bh-radius-pill);
}

.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--bh-line-2);
  border-radius: 12px;
  cursor: pointer;
}

.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  display: block;
  width: 16px;
  height: 1.5px;
  background: var(--bh-cream);
  border-radius: 2px;
  transition: transform 0.28s var(--bh-ease), opacity 0.2s ease;
}

.nav-toggle span { position: relative; }
.nav-toggle span::before { content: ''; position: absolute; top: -5px; left: 0; }
.nav-toggle span::after  { content: ''; position: absolute; top: 5px;  left: 0; }

.nav-open .nav-toggle span { transform: rotate(45deg); }
.nav-open .nav-toggle span::before { transform: translateY(5px) rotate(-90deg); }
.nav-open .nav-toggle span::after { opacity: 0; }

/* --------------------------------------------------------------- 5. Hero --- */

.hero {
  position: relative;
  padding-block: 0;
  min-height: min(88vh, 760px);
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero-bg { position: absolute; inset: 0; z-index: 0; }

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.1s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: opacity;
  pointer-events: none;
}

.hero-video.is-ready,
.hero-video.is-active {
  opacity: 1;
  transition: none;
}

.hero-video.is-fading-out {
  opacity: 0 !important;
  transition: opacity 0.8s ease-out !important;
}

.hero-bg-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(16, 36, 31, 0.96) 0%, rgba(16, 36, 31, 0.78) 42%, rgba(16, 36, 31, 0.42) 100%),
    linear-gradient(to top, var(--bh-bg) 2%, transparent 46%);
}

.hero-grid { position: relative; z-index: 1; width: 100%; }

.hero-copy { max-width: 640px; padding-block: 96px; }

.hero h1 {
  font-size: clamp(38px, 5.2vw, 62px);
  line-height: 1.04;
  letter-spacing: -0.022em;
  margin-bottom: 22px;
}

.hero-sub {
  font-size: 16.5px;
  line-height: 1.62;
  max-width: 520px;
  color: var(--bh-cream-dim);
  margin-bottom: 34px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 40px;
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--bh-cream-faint);
  padding-bottom: 26px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--bh-line);
}

.mini-features {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 30px;
}

.mini-feature {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: var(--bh-cream-dim);
}

.mini-feature .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bh-sage);
}

/* Continuous testimonial strip; the repeated quotes make the loop seamless. */
.marquee-wrap {
  position: relative;
  border-block: 1px solid var(--bh-line);
  background: var(--bh-bg);
  overflow: hidden;
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: slide 26s linear infinite;
}

.marquee-track span {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 0 26px;
  color: var(--bh-sage);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ------------------------------------------------------ 6. Section heads --- */

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  align-items: end;
  gap: 24px 48px;
  padding-bottom: 30px;
  margin-bottom: 42px;
  border-bottom: 1px solid var(--bh-line);
}

.section-head h2 {
  font-size: clamp(28px, 3.6vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
}

.section-head p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--bh-cream-dim);
  margin: 0;
}

/* --------------------------------------------------- 7. Category pills --- */

.category-nav-sticky-wrap {
  position: sticky;
  top: 68px;
  z-index: 40;
  margin: 0 -8px 28px;
  padding: 8px;
  background: linear-gradient(var(--bh-bg) 62%, rgba(16, 36, 31, 0));
}

.category-pills-bar {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.category-pills-bar::-webkit-scrollbar { display: none; }

/* Specificity 0,2,0 + !important beats the base block's neumorphic pill rules
   at 0,1,0 (and equal-importance 0,1,0 / 0,2,0 wherever they land). */
.category-pills-bar .category-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  padding: 9px 15px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--bh-cream-dim);
  background: transparent !important;
  border: 1px solid var(--bh-line-2) !important;
  border-radius: var(--bh-radius-pill);
  box-shadow: none !important;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.24s var(--bh-ease), background-color 0.24s var(--bh-ease), border-color 0.24s var(--bh-ease);
}

.category-pills-bar .category-pill:hover {
  color: var(--bh-cream);
  border-color: var(--bh-line-3) !important;
  transform: none !important;
}

.category-pills-bar .category-pill.active {
  color: #12251F !important;
  background: var(--bh-cream) !important;
  border-color: var(--bh-cream) !important;
  box-shadow: none !important;
}

.pill-icon {
  display: inline-flex;
  align-items: center;
  color: currentColor;
  opacity: 0.85;
}

.category-pill.active .pill-icon { opacity: 1; }

.pill-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding-inline: 5px;
  margin-left: 2px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--bh-cream);
  background: rgba(243, 221, 211, 0.12);
  border-radius: var(--bh-radius-pill);
}

.category-pill.active .pill-count {
  color: #12251F;
  background: rgba(18, 37, 31, 0.16);
}
/* ============================================================
   8. 3D card engine            <<< the feature
   ============================================================

   Why the previous attempt was invisible:
     a) The base block locks the card with
          .service-card:hover { transform: translateY(-6px) scale(1.01) !important; }
        at specificity (0,2,0). The intended `.service-card-sm:hover` transform
        sits at (0,2,0) too but earlier in the cascade, so it never applied —
        the card could only ever lift 6px flat, never rotate.
     b) `backdrop-filter` on the card forces it into its own rendering context,
        which flattens any 3D.
     c) The only rotation lived in script.js, on the 84px thumbnail inside the
        card. An 84px chip turning 14 deg is imperceptible next to a 380px card.

   The fix:
     - The GRID owns the perspective; the CARD owns rotation driven by two CSS
       custom properties (--rx / --ry) that script.js writes on pointer move.
     - Inner layers are pushed apart on the Z axis, so tilting produces genuine
       parallax between photo, title, price and button.
     - A pointer-following specular highlight (`.card-sm-glare`) sells the
       surface. All of it is transform/opacity only, so it stays on the GPU.

   Every rule below is at specificity >= (0,3,0) so it beats the base block's
   `!important` neumorphic overrides without a specificity war.
   ------------------------------------------------------------------------ */

.services-grid-sm {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 0;
  /* The camera. A single shared perspective keeps all nine cards feeling like
     one physical surface rather than nine independent effects. */
  perspective: var(--bh-perspective);
  perspective-origin: 50% 34%;
}

/* The card. Flat, quiet, hairline-bordered at rest — minimal. All depth comes
   from the interaction, not from ambient glow or noise. */
.services-grid-sm .service-card.service-card-sm {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 250px;
  padding: 22px 22px 20px;
  border-radius: 20px !important;
  background: var(--bh-surface) !important;
  border: 1px solid var(--bh-line) !important;
  box-shadow: var(--bh-shadow-1) !important;
  transform-style: preserve-3d;
  transform:
    translate3d(0, 0, 0)
    rotateX(var(--rx, 0deg))
    rotateY(var(--ry, 0deg));
  transition:
    transform 0.62s var(--bh-ease-out),
    border-color 0.34s var(--bh-ease),
    background-color 0.34s var(--bh-ease),
    box-shadow 0.5s var(--bh-ease);
  will-change: transform;
  /* Flattening contexts — must be off for 3D to render. */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
  /* overflow other than visible would also force `transform-style: flat`. */
  overflow: visible;
  cursor: pointer;
}

/* Hover: the card lifts toward the viewer and the shadow grows and softens,
   which is what actually reads as "off the page". */
.services-grid-sm .service-card-sm:hover {
  transform:
    translate3d(0, -6px, 0)
    rotateX(var(--rx, 0deg))
    rotateY(var(--ry, 0deg));
  background: var(--bh-surface-2) !important;
  border-color: var(--bh-line-3) !important;
  box-shadow: var(--bh-shadow-3) !important;
}

/* While the pointer is inside, script.js adds .is-tilting. Removing the
   transition for that window lets the card track the pointer 1:1 instead of
   chasing it through a 620ms easing curve. */
.services-grid-sm .service-card-sm.is-tilting {
  transition:
    transform 0.08s linear,
    border-color 0.34s var(--bh-ease),
    background-color 0.34s var(--bh-ease),
    box-shadow 0.5s var(--bh-ease);
}

/* Selected / in-cart. Beats `.service-card.is-in-cart` at (0,2,0). */
.services-grid-sm .service-card.service-card-sm.is-in-cart {
  border-color: var(--bh-sage) !important;
  background: var(--bh-surface-2) !important;
  box-shadow:
    0 0 0 1px var(--bh-sage),
    0 2px 4px rgba(0, 0, 0, 0.26),
    0 26px 52px -22px rgba(0, 0, 0, 0.72) !important;
}

/* Filtering: collapse the card out of the grid cleanly. */
.services-grid-sm .service-card.service-card-sm.is-hidden {
  display: none !important;
}

/* ---- Card Top Row ------------------------------------------------------- */
.services-grid-sm .service-card-sm .card-sm-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  transform-style: preserve-3d;
}

/* ---- Depth layers (Calibrated for crisp relief with zero overlap) -------- */

.services-grid-sm .service-card-sm .card-sm-body,
.services-grid-sm .service-card-sm .card-sm-footer {
  transform-style: preserve-3d;
}

/* 0px — the surface itself */
.services-grid-sm .service-card-sm .card-sm-body          { transform: translateZ(0); }

/* Parallax ladder: tight, controlled relief so elements never overlap or clip */
.services-grid-sm .service-card-sm .card-sm-meta          { transform: translateZ(8px); }
.services-grid-sm .service-card-sm .card-sm-title         { transform: translateZ(12px); }
.services-grid-sm .service-card-sm .card-sm-pricing       { transform: translateZ(10px); }
.services-grid-sm .service-card-sm .btn-card-add-sm       { transform: translateZ(16px); }
.services-grid-sm .service-card-sm .card-sm-badge         { transform: translateZ(16px); }
.services-grid-sm .service-card-sm .card-sm-media         { transform: translateZ(14px); }

/* ---- Photo (Generous 104px presence, 3D border, zero overlap) ------------ */

.services-grid-sm .service-card-sm .card-sm-media {
  width: 104px;
  height: 104px;
  border-radius: 20px;
  overflow: hidden;
  background: var(--bh-surface-3);
  border: 1.5px solid rgba(243, 221, 211, 0.24);
  box-shadow: 0 14px 28px -6px rgba(0, 0, 0, 0.72), inset 0 1px 2px rgba(255, 255, 255, 0.25);
  flex-shrink: 0;
  position: relative;
  animation: none !important;
  transition: box-shadow 0.4s var(--bh-ease), border-color 0.34s var(--bh-ease), transform 0.4s var(--bh-ease-out);
}

.services-grid-sm .service-card-sm .card-sm-media::after,
.services-grid-sm .service-card-sm .card-sm-media::before {
  display: none !important;
  content: none !important;
}

.services-grid-sm .service-card-sm .card-sm-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: saturate(1.08) contrast(1.04);
  transform: scale(1.02);
  transition: transform 0.6s var(--bh-ease-out), filter 0.4s var(--bh-ease);
}

.services-grid-sm .service-card-sm:hover .card-sm-media {
  border-color: rgba(169, 195, 161, 0.6);
  box-shadow: 0 20px 40px -8px rgba(0, 0, 0, 0.85), 0 0 18px rgba(169, 195, 161, 0.25);
  transform: translateZ(20px);
}

.services-grid-sm .service-card-sm:hover .card-sm-img {
  transform: scale(1.08);
  filter: saturate(1.18) contrast(1.08);
}

/* ---- Badge ----------------------------------------------------------- */

.services-grid-sm .service-card-sm .card-sm-badge {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: var(--bh-radius-pill);
  color: var(--bh-cream-dim);
  background: rgba(243, 221, 211, 0.05);
  border: 1px solid var(--bh-line-2);
}

.services-grid-sm .service-card-sm .card-sm-badge.badge-trial {
  color: var(--bh-sage);
  background: rgba(169, 195, 161, 0.10);
  border-color: rgba(169, 195, 161, 0.28);
}

/* ---- Copy ------------------------------------------------------------ */

.services-grid-sm .service-card-sm .card-sm-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 14px;
}

.services-grid-sm .service-card-sm .card-sm-title {
  font-family: 'Marcellus', serif;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -0.014em;
  line-height: 1.2;
  color: var(--bh-cream);
  margin: 0;
}

.services-grid-sm .service-card-sm .card-sm-meta {
  font-size: 12px;
  color: var(--bh-cream-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- Footer / price / add -------------------------------------------- */

.services-grid-sm .service-card-sm .card-sm-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 13px;
  margin-top: auto;
  border-top: 1px solid var(--bh-line);
}

.services-grid-sm .service-card-sm .card-sm-pricing {
  display: flex;
  align-items: baseline;
  gap: 7px;
}

.services-grid-sm .service-card-sm .card-sm-price {
  font-family: 'Marcellus', serif;
  font-size: 19px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--bh-cream);
}

.services-grid-sm .service-card-sm .card-sm-mrp {
  font-size: 12px;
  color: var(--bh-cream-faint);
  text-decoration: line-through;
}

.services-grid-sm .service-card-sm .btn-card-add-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px 15px;
  font-family: 'Poppins', sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1;
  color: var(--bh-cream);
  background: transparent;
  border: 1px solid var(--bh-line-3);
  border-radius: var(--bh-radius-pill);
  box-shadow: none;
  cursor: pointer;
  transition:
    background-color 0.26s var(--bh-ease),
    border-color 0.26s var(--bh-ease),
    color 0.26s var(--bh-ease),
    transform 0.26s var(--bh-ease);
}

.services-grid-sm .service-card-sm .btn-card-add-sm:hover {
  color: #12251F;
  background: var(--bh-cream);
  border-color: var(--bh-cream);
  transform: none;
}

/* Toggle label swap, unchanged from the base block but scoped up so the
   neumorphic button rules can't win. */
.services-grid-sm .service-card-sm .btn-card-add-sm .added-text { display: none; }

.services-grid-sm .service-card-sm.is-in-cart .btn-card-add-sm {
  color: #12251F;
  background: var(--bh-sage);
  border-color: var(--bh-sage);
}

.services-grid-sm .service-card-sm.is-in-cart .btn-card-add-sm .add-text { display: none; }
.services-grid-sm .service-card-sm.is-in-cart .btn-card-add-sm .added-text { display: inline; }

/* ---- Pointer-following specular highlight -----------------------------
   One element, injected by script.js into every tilting card. It reads the
   pointer position from --gx / --gy and paints a soft moving light, which is
   what makes a flat surface read as a physical one. */

.bh-glare {
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(
      260px circle at var(--gx, 50%) var(--gy, 50%),
      rgba(255, 255, 255, 0.13) 0%,
      rgba(255, 255, 255, 0.05) 34%,
      rgba(255, 255, 255, 0) 62%
    );
  transition: opacity 0.4s var(--bh-ease);
}

.services-grid-sm .service-card-sm:hover .bh-glare { opacity: 1; }

/* ---- Grid responsive -------------------------------------------------- */

@media (max-width: 1024px) {
  .services-grid-sm {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
}

@media (max-width: 640px) {
  .services-grid-sm {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .services-grid-sm .service-card.service-card-sm {
    min-height: 0;
    padding: 12px;
    border-radius: 16px !important;
  }

  .services-grid-sm .service-card-sm .card-sm-top {
    position: relative;
    display: block;
    margin-bottom: 12px;
  }

  .services-grid-sm .service-card-sm .card-sm-media {
    width: 100%;
    height: clamp(92px, 28vw, 132px);
    border-radius: 13px;
  }

  .services-grid-sm .service-card-sm .card-sm-badge {
    position: absolute;
    top: 7px;
    right: 7px;
    z-index: 2;
    padding: 4px 7px;
    font-size: 8.5px;
    letter-spacing: 0.03em;
  }

  .services-grid-sm .service-card-sm .card-sm-body {
    gap: 4px;
    margin-bottom: 10px;
  }

  .services-grid-sm .service-card-sm .card-sm-title {
    font-size: 16px;
    line-height: 1.2;
    overflow-wrap: anywhere;
  }

  .services-grid-sm .service-card-sm .card-sm-meta {
    font-size: 10.5px;
    line-height: 1.35;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  .services-grid-sm .service-card-sm .card-sm-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 9px;
    padding-top: 10px;
  }

  .services-grid-sm .service-card-sm .card-sm-pricing {
    flex-wrap: wrap;
    gap: 3px 7px;
  }

  .services-grid-sm .service-card-sm .card-sm-price {
    font-size: 16px;
  }

  .services-grid-sm .service-card-sm .card-sm-mrp {
    font-size: 10.5px;
  }

  .services-grid-sm .service-card-sm .btn-card-add-sm {
    width: 100%;
    min-height: 38px;
    padding: 9px 8px;
    font-size: 11px;
  }
}
/* ============================================================
   9. Compact step + value cards, and the shared "card" 3D traits
   ============================================================

   The same engine drives every card family on the page — only the tilt
   strength differs, which script.js sets per selector. Value cards, review
   cards and price cards get roughly half the rotation of the treatment cards:
   enough to feel physical, not enough to distract while reading.
   ------------------------------------------------------------------------ */

.compact-steps-grid,
.compact-value-grid,
.testimonials-grid,
.pricing-wrap {
  perspective: var(--bh-perspective);
  perspective-origin: 50% 40%;
}

.compact-value-card,
.review-card,
.price-card {
  position: relative;
  transform-style: preserve-3d;
  transform:
    translate3d(0, 0, 0)
    rotateX(var(--rx, 0deg))
    rotateY(var(--ry, 0deg));
  transition:
    transform 0.62s var(--bh-ease-out),
    border-color 0.34s var(--bh-ease),
    background-color 0.34s var(--bh-ease),
    box-shadow 0.5s var(--bh-ease);
  will-change: transform;
  /* `overflow: hidden` would force `transform-style: flat`, killing the 3D. */
  overflow: visible;
}

.compact-value-card.is-tilting,
.review-card.is-tilting,
.price-card.is-tilting {
  transition:
    transform 0.08s linear,
    border-color 0.34s var(--bh-ease),
    background-color 0.34s var(--bh-ease),
    box-shadow 0.5s var(--bh-ease);
}

.compact-value-card:hover,
.review-card:hover {
  transform:
    translate3d(0, -4px, 0)
    rotateX(var(--rx, 0deg))
    rotateY(var(--ry, 0deg));
  box-shadow: var(--bh-shadow-2);
}

.compact-value-card:hover .bh-glare,
.review-card:hover .bh-glare,
.price-card:hover .bh-glare { opacity: 1; }

/* ---- How it works: 3 compact steps ------------------------------------ */

.compact-steps-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: stretch;
  gap: 16px;
  margin-top: 0;
}

.compact-step-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px;
  background: var(--bh-surface);
  border: 1px solid var(--bh-line);
  border-radius: var(--bh-radius-card);
  box-shadow: none;
  transform-style: preserve-3d;
}

.compact-step-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  font-family: 'Marcellus', serif;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--bh-sage);
  background: rgba(169, 195, 161, 0.10);
  border: 1px solid rgba(169, 195, 161, 0.22);
  border-radius: 11px;
}

.compact-step-copy h4 {
  font-family: 'Poppins', sans-serif;
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -0.004em;
  color: var(--bh-cream);
  margin: 0 0 5px;
}

.compact-step-copy p {
  font-size: 13px;
  line-height: 1.5;
  color: var(--bh-cream-faint);
  margin: 0;
}

.compact-step-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bh-line-3);
  font-size: 14px;
  transform: none;
}

.process-cta {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

/* ---- Why BloomHer: 4 trust tiles ------------------------------------- */

.compact-value-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 0;
}

.compact-value-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 20px;
  background: var(--bh-surface);
  border: 1px solid var(--bh-line);
  border-radius: var(--bh-radius-card);
  box-shadow: none;
}

.compact-value-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--bh-sage);
  background: rgba(169, 195, 161, 0.10);
  border: 1px solid rgba(169, 195, 161, 0.22);
  border-radius: 10px;
  transform: translateZ(28px);
}

.compact-value-card h4 {
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.004em;
  color: var(--bh-cream);
  margin: 0 0 6px;
  transform: translateZ(16px);
}

.compact-value-card p {
  font-size: 13px;
  line-height: 1.55;
  color: var(--bh-cream-faint);
  margin: 0;
  transform: translateZ(10px);
}

/* ============================================================
   10. Results showcase
   ============================================================ */

.results-tab-bar {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}

.results-tab-bar .results-tab-btn {
  padding: 9px 18px;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--bh-cream-dim);
  background: transparent;
  border: 1px solid var(--bh-line-2);
  border-radius: var(--bh-radius-pill);
  cursor: pointer;
  transition: color 0.24s var(--bh-ease), background-color 0.24s var(--bh-ease), border-color 0.24s var(--bh-ease);
}

.results-tab-bar .results-tab-btn:hover {
  color: var(--bh-cream);
  background: rgba(243, 221, 211, 0.05);
}

.results-tab-bar .results-tab-btn.active {
  color: #12251F;
  background: var(--bh-cream);
  border-color: var(--bh-cream);
}

.results-panel { display: none; }
.results-panel.active { display: block; }

.results-panel-content {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: 36px;
  padding: 28px;
  background: var(--bh-surface);
  border: 1px solid var(--bh-line);
  border-radius: 20px;
}

.compare-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.compare-box {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid var(--bh-line);
  background: var(--bh-surface-2);
}

.compare-box img {
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
}

.compare-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  padding: 5px 10px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bh-cream);
  background: rgba(16, 36, 31, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--bh-line-2);
  border-radius: var(--bh-radius-pill);
}

.results-details {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.results-details h3 {
  font-size: 26px;
  line-height: 1.15;
  margin: 0;
}

.results-details p {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--bh-cream-dim);
}

.results-stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding-block: 16px;
  border-block: 1px solid var(--bh-line);
}

.results-stat-box strong {
  display: block;
  font-family: 'Marcellus', serif;
  font-size: 21px;
  font-weight: 400;
  color: var(--bh-sage);
}

.results-stat-box small {
  font-size: 11.5px;
  color: var(--bh-cream-faint);
}

/* ============================================================
   11. Reviews + pricing + FAQ
   ============================================================ */

/* ---- Testimonials --------------------------------------------------- */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  perspective: var(--bh-perspective);
}

.review-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 26px 24px;
  background: var(--bh-surface);
  border: 1px solid var(--bh-line);
  border-radius: var(--bh-radius-card);
  box-shadow: var(--bh-shadow-1);
}

.review-stars {
  color: var(--bh-sage);
  font-size: 14px;
  letter-spacing: 3px;
  margin-bottom: 14px;
  transform: translateZ(24px);
}

.review-card p {
  font-size: 14px;
  line-height: 1.68;
  color: var(--bh-cream-dim);
  margin-bottom: 20px;
  transform: translateZ(14px);
}

.review-person {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--bh-line);
  transform: translateZ(20px);
}

.review-person .avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(169, 195, 161, 0.15);
  border: 1px solid var(--bh-sage);
  color: var(--bh-sage);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 13px;
}

.person-name {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--bh-cream);
}

.person-meta {
  font-size: 11.5px;
  color: var(--bh-cream-faint);
}

/* ---- Pricing -------------------------------------------------------- */
.pricing-wrap {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  align-items: stretch;
  perspective: var(--bh-perspective);
}

.price-card {
  display: flex;
  flex-direction: column;
  padding: 32px 26px;
  background: var(--bh-surface);
  border: 1px solid var(--bh-line);
  border-radius: var(--bh-radius-card);
  box-shadow: var(--bh-shadow-1);
  position: relative;
}

.price-card.popular {
  border-color: var(--bh-sage);
  background: var(--bh-surface-2);
  box-shadow: var(--bh-shadow-2), 0 0 0 1px var(--bh-sage);
}

.price-card .plan-name {
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bh-sage);
  margin-bottom: 8px;
  transform: translateZ(20px);
}

.price-card .price-value {
  font-family: 'Marcellus', serif;
  font-size: 32px;
  color: var(--bh-cream);
  line-height: 1.1;
  margin-bottom: 6px;
  transform: translateZ(32px);
}

.price-card .price-subtitle {
  font-size: 13px;
  color: var(--bh-cream-faint);
  margin-bottom: 24px;
  transform: translateZ(16px);
}

.price-card .feature-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 32px;
  transform: translateZ(18px);
}

.price-card .feature-list li {
  font-size: 13px;
  color: var(--bh-cream-dim);
  display: flex;
  align-items: center;
  gap: 8px;
}

.price-card .feature-list li::before {
  content: "✓";
  color: var(--bh-sage);
  font-weight: 700;
  font-size: 12px;
}

.price-card .btn {
  margin-top: auto;
  transform: translateZ(36px);
}

/* ---- FAQ ------------------------------------------------------------ */
.faq-wrap {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 48px;
  align-items: start;
}

.faq-side h2 {
  font-size: clamp(28px, 3.4vw, 40px);
  margin: 0 0 16px;
}

.faq-side p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--bh-cream-dim);
  margin-bottom: 28px;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item {
  border: 1px solid var(--bh-line);
  background: var(--bh-surface);
  border-radius: 14px;
  padding: 18px 22px;
  transition: border-color 0.24s var(--bh-ease), background 0.24s var(--bh-ease);
}

.faq-item[open] {
  border-color: var(--bh-line-3);
  background: var(--bh-surface-2);
}

.faq-item summary {
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--bh-cream);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-size: 18px;
  color: var(--bh-sage);
  transition: transform 0.24s var(--bh-ease);
}

.faq-item[open] summary::after {
  content: "−";
  transform: rotate(180deg);
}

.faq-item p {
  margin-top: 12px;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--bh-cream-dim);
}

/* ============================================================
   12. CTA strip + dock
   ============================================================ */

.cta-strip {
  padding-block: 72px;
  background: linear-gradient(135deg, var(--bh-surface) 0%, var(--bh-surface-2) 100%);
  border-block: 1px solid var(--bh-line);
}

.cta-strip-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.cta-strip h2 {
  font-size: clamp(24px, 2.8vw, 36px);
  margin: 0;
  max-width: 680px;
}

/* ---- Floating Dock (CRED Capsule) ----------------------------------- */
.floating-dock {
  position: fixed;
  bottom: 24px;
  left: 0;
  right: 0;
  width: auto;
  transform: none;
  z-index: 100;
  display: flex;
  justify-content: center;
  padding-inline: 16px;
  pointer-events: none;
}

.dock-container {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: min(620px, 100%);
  padding: 10px 14px 10px 18px;
  background: rgba(16, 36, 31, 0.94);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--bh-line-3);
  border-radius: var(--bh-radius-pill);
  box-shadow: 0 16px 48px -8px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(169, 195, 161, 0.15);
  transition: transform 0.3s var(--bh-ease-out), box-shadow 0.3s var(--bh-ease);
}

.dock-container:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 56px -6px rgba(0, 0, 0, 0.85), 0 0 0 1px var(--bh-sage);
}

.dock-content {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.dock-icon {
  position: relative;
  font-size: 20px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(243, 221, 211, 0.08);
  border: 1px solid var(--bh-line-2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dock-badge-pulse {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 17px;
  height: 17px;
  border-radius: 999px;
  background: var(--bh-rose);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: 4px;
}

.dock-details {
  min-width: 0;
}

.dock-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.dock-title-row strong {
  font-size: 13.5px;
  color: var(--bh-cream);
  font-weight: 600;
}

.dock-dot {
  color: var(--bh-cream-faint);
}

.dock-price {
  font-family: 'Marcellus', serif;
  font-size: 15.5px;
  color: var(--bh-cream);
}

.dock-savings {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--bh-sage);
  background: rgba(169, 195, 161, 0.12);
  border: 1px solid rgba(169, 195, 161, 0.3);
  padding: 1px 7px;
  border-radius: 999px;
}

.dock-subtitle {
  font-size: 11px;
  color: var(--bh-cream-faint);
  margin: 1px 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dock-actions .dock-btn {
  padding: 11px 20px;
  font-size: 13px;
}

/* ============================================================
   13. Drawer
   ============================================================ */

.booking-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(6, 15, 13, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.32s var(--bh-ease);
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.booking-drawer-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.booking-drawer {
  width: 100%;
  max-height: 92vh;
  background: var(--bh-bg);
  border-radius: 24px 24px 0 0;
  border: 1px solid var(--bh-line-2);
  border-bottom: none;
  transform: translateY(100%);
  transition: transform 0.38s var(--bh-ease-out);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 -24px 64px rgba(0, 0, 0, 0.6);
}

.booking-drawer-overlay.open .booking-drawer {
  transform: translateY(0);
}

@media (min-width: 768px) {
  .booking-drawer-overlay {
    align-items: center;
    padding: 24px;
  }
  .booking-drawer {
    width: min(680px, 94vw);
    max-height: 88vh;
    border-radius: 20px;
    border-bottom: 1px solid var(--bh-line-2);
    transform: scale(0.96) translateY(24px);
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.7);
  }
  .booking-drawer-overlay.open .booking-drawer {
    transform: scale(1) translateY(0);
  }
}

.drawer-handle {
  width: 42px;
  height: 4px;
  border-radius: 999px;
  background: var(--bh-line-3);
  margin: 12px auto 2px;
}

@media (min-width: 768px) {
  .drawer-handle { display: none; }
}

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px 14px;
  border-bottom: 1px solid var(--bh-line);
}

.drawer-header h2 {
  font-size: 20px;
  margin: 0;
}

.drawer-close-btn {
  background: transparent;
  border: 1px solid var(--bh-line-2);
  color: var(--bh-cream);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  transition: all 0.2s ease;
}

.drawer-close-btn:hover {
  background: rgba(243, 221, 211, 0.1);
  border-color: var(--bh-line-3);
}

.drawer-steps-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 12px 24px;
  background: var(--bh-surface);
  border-bottom: 1px solid var(--bh-line);
}

.drawer-step-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--bh-cream-faint);
  font-weight: 500;
}

.drawer-step-indicator.active {
  color: var(--bh-cream);
}

.drawer-step-indicator .step-num {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(243, 221, 211, 0.1);
  border: 1px solid var(--bh-line-2);
  color: var(--bh-cream-faint);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10.5px;
}

.drawer-step-indicator.active .step-num {
  background: var(--bh-cream);
  color: #12251F;
  border-color: var(--bh-cream);
  font-weight: 700;
}

.drawer-step-line {
  width: 36px;
  height: 1px;
  background: var(--bh-line-2);
}

.drawer-panel {
  display: none;
  overflow-y: auto;
  padding: 20px 24px 28px;
  flex: 1;
}

.drawer-panel.active {
  display: block;
}

.drawer-section {
  margin-bottom: 22px;
}

.drawer-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.drawer-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--bh-cream);
}

.drawer-hint {
  font-size: 11.5px;
  color: var(--bh-cream-faint);
}

.drawer-save-pill {
  font-size: 11px;
  font-weight: 600;
  color: var(--bh-sage);
  background: rgba(169, 195, 161, 0.12);
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(169, 195, 161, 0.28);
}

.drawer-cart-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.drawer-cart-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: var(--bh-surface);
  border: 1px solid var(--bh-line);
  border-radius: 12px;
}

.drawer-cart-item .item-title {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--bh-cream);
}

.drawer-cart-item .item-price {
  font-size: 13.5px;
  color: var(--bh-sage);
  font-weight: 600;
}

.quick-add-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: 6px;
}

.quick-add-label {
  font-size: 12px;
  color: var(--bh-cream-faint);
}

.quick-add-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.quick-chip {
  padding: 5px 11px;
  font-size: 11.5px;
  color: var(--bh-cream-dim);
  background: rgba(243, 221, 211, 0.05);
  border: 1px solid var(--bh-line-2);
  border-radius: var(--bh-radius-pill);
  cursor: pointer;
  transition: all 0.2s ease;
}

.quick-chip:hover {
  background: rgba(169, 195, 161, 0.15);
  border-color: var(--bh-sage);
  color: var(--bh-cream);
}

.session-picker-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.session-chip {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 8px;
  background: var(--bh-surface);
  border: 1px solid var(--bh-line);
  border-radius: 12px;
  cursor: pointer;
  text-align: center;
  transition: all 0.24s var(--bh-ease);
}

.session-chip:hover {
  border-color: var(--bh-line-3);
  background: var(--bh-surface-2);
}

.session-chip.active {
  border-color: var(--bh-sage);
  background: rgba(169, 195, 161, 0.12);
  box-shadow: 0 0 0 1px var(--bh-sage);
}

.session-chip strong {
  font-size: 13px;
  color: var(--bh-cream);
}

.session-chip small {
  font-size: 11px;
  color: var(--bh-cream-faint);
  margin-top: 2px;
}

.session-chip .chip-badge {
  position: absolute;
  top: -8px;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  color: #12251F;
  background: var(--bh-sage);
  padding: 1px 7px;
  border-radius: 999px;
  letter-spacing: 0.04em;
}

.date-chips-scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: none;
}

.date-chips-scroll::-webkit-scrollbar { display: none; }

.date-chip {
  flex: 0 0 auto;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--bh-surface);
  border: 1px solid var(--bh-line);
  color: var(--bh-cream-dim);
  cursor: pointer;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
  transition: all 0.2s ease;
}

.date-chip:hover {
  border-color: var(--bh-line-3);
}

.date-chip.active {
  background: rgba(169, 195, 161, 0.15);
  border-color: var(--bh-sage);
  color: var(--bh-cream);
  box-shadow: 0 0 0 1px var(--bh-sage);
}

.date-custom-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--bh-cream-faint);
}

.drawer-input-date {
  padding: 6px 12px;
  background: var(--bh-surface);
  border: 1px solid var(--bh-line-2);
  border-radius: 8px;
  color: var(--bh-cream);
  font-size: 12px;
}

.drawer-slots-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.slot-chip {
  padding: 10px 8px;
  font-size: 12.5px;
  background: var(--bh-surface);
  border: 1px solid var(--bh-line);
  border-radius: 10px;
  color: var(--bh-cream-dim);
  cursor: pointer;
  text-align: center;
  transition: all 0.2s ease;
}

.slot-chip:hover {
  border-color: var(--bh-line-3);
}

.slot-chip.active {
  background: var(--bh-cream);
  color: #12251F;
  border-color: var(--bh-cream);
  font-weight: 600;
}

.drawer-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  background: var(--bh-surface);
  border-top: 1px solid var(--bh-line);
  margin-top: auto;
}

.drawer-next-btn, .drawer-pay-btn {
  flex: 1;
}

.drawer-form-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.drawer-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.drawer-field label {
  font-size: 12px;
  font-weight: 500;
  color: var(--bh-cream);
}

.drawer-input, .drawer-select, .drawer-textarea {
  padding: 11px 14px;
  background: var(--bh-surface);
  border: 1px solid var(--bh-line-2);
  border-radius: 10px;
  color: var(--bh-cream);
  font-size: 13.5px;
  transition: border-color 0.2s ease;
}

.drawer-input:focus, .drawer-select:focus, .drawer-textarea:focus {
  border-color: var(--bh-sage);
  outline: none;
}

.phone-input-wrap {
  display: flex;
  align-items: center;
  background: var(--bh-surface);
  border: 1px solid var(--bh-line-2);
  border-radius: 10px;
}

.phone-prefix {
  padding-left: 12px;
  font-size: 13px;
  color: var(--bh-cream-dim);
  white-space: nowrap;
}

.phone-input-wrap .drawer-input.phone {
  border: none;
  background: transparent;
  width: 100%;
}

.pay-option-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.pay-option-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 12px;
  background: var(--bh-surface);
  border: 1px solid var(--bh-line);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.pay-option-card.active {
  border-color: var(--bh-sage);
  background: rgba(169, 195, 161, 0.12);
  box-shadow: 0 0 0 1px var(--bh-sage);
}

.pay-option-body strong {
  font-size: 13px;
  color: var(--bh-cream);
}

.pay-option-body p {
  font-size: 11px;
  color: var(--bh-cream-faint);
  margin-top: 4px;
  line-height: 1.45;
}

.pay-option-pill {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--bh-sage);
  background: rgba(169, 195, 161, 0.18);
  padding: 1px 6px;
  border-radius: 999px;
  margin-left: 6px;
}

.drawer-breakdown-card {
  padding: 16px 18px;
  background: var(--bh-surface);
  border: 1px solid var(--bh-line);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.breakdown-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: var(--bh-cream-dim);
}

.breakdown-row.highlight {
  color: var(--bh-sage);
  font-weight: 600;
}

.breakdown-row.sub {
  font-size: 11.5px;
  color: var(--bh-cream-faint);
  padding-top: 4px;
  border-top: 1px dashed var(--bh-line);
}

.pay-now-figure {
  font-family: 'Marcellus', serif;
  font-size: 20px;
  color: var(--bh-cream);
}

.drawer-trust-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  color: var(--bh-cream-faint);
  margin-top: 12px;
}

.drawer-error-banner {
  padding: 10px 14px;
  background: rgba(201, 135, 123, 0.15);
  border: 1px solid var(--bh-rose);
  border-radius: 10px;
  color: var(--bh-rose);
  font-size: 12.5px;
  margin-top: 10px;
}

.booking-success-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 32px 16px;
}

.success-icon-wrap {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--bh-sage);
  color: #12251F;
  font-size: 28px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.booking-success-box h3 {
  font-size: 24px;
  margin-bottom: 8px;
}

.success-lead {
  font-size: 14px;
  color: var(--bh-cream-dim);
  max-width: 440px;
  margin-bottom: 24px;
}

.success-summary-card {
  width: 100%;
  padding: 16px 20px;
  background: var(--bh-surface);
  border: 1px solid var(--bh-line);
  border-radius: 14px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  color: var(--bh-cream-dim);
  margin-bottom: 24px;
}

.success-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

/* ============================================================
   14. Footer
   ============================================================ */

.site-footer {
  padding-block: 80px 48px;
  background: #0B1915;
  border-top: 1px solid var(--bh-line);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1.2fr;
  gap: 40px;
  margin-bottom: 64px;
}

.footer-brand p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--bh-cream-faint);
  margin-top: 12px;
  max-width: 280px;
}

.footer-group h4 {
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bh-cream);
  margin-bottom: 18px;
}

.footer-group ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-group a {
  font-size: 13.5px;
  color: var(--bh-cream-dim);
  transition: color 0.2s ease;
}

.footer-group a:hover {
  color: var(--bh-sage);
}

.footer-legal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 32px;
  border-top: 1px solid var(--bh-line);
  font-size: 12px;
  color: var(--bh-cream-faint);
}

/* ============================================================
   15. Responsive
   ============================================================ */

@media (max-width: 980px) {
  .faq-wrap {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  .testimonials-grid, .pricing-wrap {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 680px) {
  section {
    padding-block: 64px;
  }
  .testimonials-grid, .pricing-wrap {
    grid-template-columns: 1fr;
  }
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .cta-strip-inner {
    flex-direction: column;
    align-items: flex-start;
  }
  .cta-strip .btn {
    width: 100%;
  }
  .pay-option-cards {
    grid-template-columns: 1fr;
  }
  .session-picker-grid {
    grid-template-columns: 1fr;
  }
  body {
    padding-bottom: 96px; /* space for dock */
  }
}

/* ============================================================
   16. Motion / touch / print safety
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .services-grid-sm .service-card.service-card-sm,
  .compact-value-card, .review-card, .price-card {
    transform: none !important;
  }
}

@media (hover: none) {
  .services-grid-sm .service-card.service-card-sm:hover {
    transform: none !important;
  }
  .bh-glare {
    display: none !important;
  }
}

@media print {
  .floating-dock, .booking-drawer-overlay, .legal-modal-overlay, .nav-cta, .btn-card-add-sm {
    display: none !important;
  }
  body {
    background: #fff !important;
    color: #000 !important;
  }
}

/* ============================================================
   Legal & Policies Modal (Refund, Terms, Privacy)
   ============================================================ */

/* Text Selection Highlight (Soft Sage Tint, Never White) */
::selection {
  background: rgba(169, 195, 161, 0.35) !important;
  color: #F3DDD3 !important;
}

::-moz-selection {
  background: rgba(169, 195, 161, 0.35) !important;
  color: #F3DDD3 !important;
}

.site-footer,
.site-footer *,
.footer-bottom,
.footer-bottom * {
  -webkit-tap-highlight-color: transparent !important;
}

.site-footer ::selection,
.footer-bottom ::selection,
.site-footer *::selection,
.footer-bottom *::selection {
  background: rgba(169, 195, 161, 0.35) !important;
  color: #F3DDD3 !important;
}

.footer-link-btn {
  background: transparent !important;
  border: none !important;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  color: var(--bh-sage) !important;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(169, 195, 161, 0.4);
  text-underline-offset: 3px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
  -webkit-tap-highlight-color: transparent !important;
}

.footer-link-btn:hover {
  color: #D6E5D3 !important;
  text-decoration-color: #D6E5D3 !important;
  background: transparent !important;
}

.footer-link-btn:focus,
.footer-link-btn:focus-visible {
  outline: none !important;
  background: transparent !important;
  box-shadow: 0 0 0 2px rgba(169, 195, 161, 0.4) !important;
  border-radius: 3px;
}

.footer-link-btn:active {
  background: transparent !important;
  color: var(--bh-sage) !important;
}

.site-footer a:hover {
  color: #D6E5D3 !important;
  background: transparent !important;
}

.legal-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(6, 15, 13, 0.84);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 250;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.legal-modal-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.legal-modal-card {
  width: min(720px, 94vw);
  max-height: 88vh;
  background: #132722;
  border: 1px solid rgba(243, 221, 211, 0.16);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.7);
  transform: scale(0.96) translateY(20px);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.legal-modal-overlay.open .legal-modal-card {
  transform: scale(1) translateY(0);
}

.legal-modal-header {
  padding: 22px 24px 16px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  border-bottom: 1px solid rgba(243, 221, 211, 0.1);
  background: #10241F;
}

.legal-modal-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bh-sage);
  margin-bottom: 4px;
}

.legal-modal-title {
  font-family: 'Marcellus', serif;
  font-size: 22px;
  color: var(--bh-cream);
  margin: 0;
  line-height: 1.2;
}

.legal-modal-close {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--bh-cream-soft);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  line-height: 1;
}

.legal-modal-close:hover {
  background: rgba(201, 135, 123, 0.25);
  color: var(--bh-cream);
  border-color: var(--bh-rose);
}

.legal-modal-tabs {
  display: flex;
  gap: 8px;
  padding: 12px 24px;
  background: rgba(16, 36, 31, 0.6);
  border-bottom: 1px solid rgba(243, 221, 211, 0.08);
  overflow-x: auto;
  scrollbar-width: none;
}
.legal-modal-tabs::-webkit-scrollbar { display: none; }

.legal-tab-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--bh-cream-soft);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  padding: 7px 15px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
  -webkit-tap-highlight-color: transparent !important;
}

.legal-tab-btn:hover {
  background: rgba(169, 195, 161, 0.08);
  border-color: rgba(169, 195, 161, 0.35);
  color: var(--bh-sage);
}

.legal-tab-btn:focus,
.legal-tab-btn:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(169, 195, 161, 0.4) !important;
}

.legal-tab-btn.active {
  background: rgba(169, 195, 161, 0.16) !important;
  color: var(--bh-sage) !important;
  border-color: var(--bh-sage) !important;
  font-weight: 600 !important;
  box-shadow: 0 0 0 1px var(--bh-sage), 0 0 16px rgba(169, 195, 161, 0.22) !important;
}

.legal-modal-body {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
  color: var(--bh-cream-soft);
  font-size: 14px;
  line-height: 1.65;
  scrollbar-width: thin;
  scrollbar-color: rgba(243, 221, 211, 0.2) transparent;
}

.legal-tab-panel {
  display: none;
}

.legal-tab-panel.active {
  display: block;
}

.legal-tab-panel h3 {
  font-family: 'Marcellus', serif;
  font-size: 19px;
  color: var(--bh-cream);
  margin: 0 0 8px;
}

.legal-lead {
  font-size: 14px;
  color: var(--bh-sage);
  margin: 0 0 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(243, 221, 211, 0.08);
}

.legal-section-block {
  margin-bottom: 18px;
}

.legal-section-block h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--bh-cream);
  margin: 0 0 6px;
}

.legal-section-block p {
  margin: 0;
  opacity: 0.9;
}

.legal-contact-callout {
  margin-top: 24px;
  padding: 14px 16px;
  background: rgba(169, 195, 161, 0.08);
  border: 1px solid rgba(169, 195, 161, 0.2);
  border-radius: 12px;
  color: var(--bh-cream);
  font-size: 13px;
}
.legal-contact-callout p { margin: 0; }

/* Booking flow: keep the next action visible while the choices and form scroll. */
#drawerPanel1,
#drawerPanel2 {
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

#drawerPanel1.active,
#drawerPanel2.active {
  display: flex;
  flex-direction: column;
}

#drawerPanel1 .drawer-panel-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 20px 24px 24px;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

#drawerPanel1 > .drawer-footer,
#drawerPanel2 > .drawer-footer {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  margin: 0;
  padding: 12px 24px calc(12px + env(safe-area-inset-bottom));
  background: rgba(16, 36, 31, 0.98);
  box-shadow: 0 -12px 28px rgba(0, 0, 0, 0.24);
}

#drawerPanel1 > .drawer-footer {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

.drawer-footer-summary {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 10px;
}

.drawer-footer-summary .footer-total-label { margin-right: auto; }
.drawer-footer-summary .footer-total-val { font-size: 21px; }
.drawer-action-btn { width: 100%; min-height: 48px; white-space: normal; }
.drawer-action-btn:disabled { cursor: not-allowed; opacity: 0.58; transform: none; }

#drawerPanel2 .drawer-back-btn {
  flex: 0 0 auto;
  align-self: flex-start;
  margin: 14px 24px 0;
}

.drawer-appointment-summary {
  display: grid;
  gap: 3px;
  margin: 0 24px 10px;
  padding: 12px 14px;
  border: 1px solid var(--bh-line-2);
  border-radius: 12px;
  background: var(--bh-surface);
  font-size: 12px;
}

.drawer-appointment-summary strong { color: var(--bh-sage); font-size: 11px; }
.drawer-appointment-summary span { color: var(--bh-cream); }

#drawerPanel2 form {
  display: block;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 8px 24px 24px;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

#drawerPanel2 form .drawer-section:first-child { margin-top: 0; }
#drawerPanel2 .drawer-footer--pay { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.drawer-footer-note { margin: 0; font-size: 11px; line-height: 1.4; color: var(--bh-cream-faint); }
.drawer-pay-btn { min-height: 48px; }

.drawer-empty-state {
  padding: 14px 16px;
  border: 1px dashed var(--bh-line-3);
  border-radius: 12px;
  color: var(--bh-cream-dim);
  font-size: 12px;
}

.drawer-slot-availability,
.drawer-slot-error { margin-top: 8px; font-size: 12px; }
.drawer-slot-availability { color: var(--bh-cream-faint); }
.drawer-slot-availability:empty { display: none; }
.drawer-slot-error { color: #F0A89C; }
.slot-chip:disabled { cursor: not-allowed; opacity: 0.38; text-decoration: line-through; }

.drawer-arrival-head {
  margin-top: 18px;
}

/* Match the dark chip surface so the selected time remains legible. */
.slot-chip.active {
  background: var(--bh-sage) !important;
  border-color: var(--bh-sage) !important;
  color: var(--ink) !important;
  font-weight: 700;
}

/* Keep the selected quick date readable against the dark chip treatment. */
.date-chip.active {
  background: var(--bh-cream) !important;
  border-color: var(--bh-cream) !important;
  color: var(--ink) !important;
}

.date-chip.active strong,
.date-chip.active small {
  color: var(--ink) !important;
}

/* Native date controls can otherwise switch their segmented text to black on focus. */
.drawer-input-date,
.drawer-input-date:focus,
.drawer-input-date:focus-visible {
  color: var(--bh-cream) !important;
  -webkit-text-fill-color: var(--bh-cream);
  color-scheme: dark;
}

.drawer-input-date::-webkit-datetime-edit,
.drawer-input-date::-webkit-datetime-edit-fields-wrapper,
.drawer-input-date::-webkit-datetime-edit-text,
.drawer-input-date::-webkit-datetime-edit-month-field,
.drawer-input-date::-webkit-datetime-edit-day-field,
.drawer-input-date::-webkit-datetime-edit-year-field {
  color: var(--bh-cream);
}

.drawer-input-date::-webkit-calendar-picker-indicator {
  cursor: pointer;
  filter: invert(0.88);
}

.floating-dock {
  bottom: calc(12px + env(safe-area-inset-bottom));
  left: 0;
  right: 0;
  width: auto;
  transform: none;
}

@media (max-width: 680px) {
  .drawer-arrival-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
  }
  #drawerPanel1 .drawer-panel-content { padding: 16px 18px 20px; }
  #drawerPanel1 > .drawer-footer,
  #drawerPanel2 > .drawer-footer { padding-inline: 18px; }
  #drawerPanel2 .drawer-back-btn { margin-inline: 18px; }
  .drawer-appointment-summary { margin-inline: 18px; }
  #drawerPanel2 form { padding-inline: 18px; }
}

/* The page-level stylesheet loads after the original mobile nav rules. */
@media (max-width: 980px) {
  .site-header .nav {
    position: relative;
    gap: 10px;
  }

  .nav-toggle {
    display: inline-flex;
    flex: 0 0 42px;
  }

  .nav-links {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 2px;
    padding: 10px;
    background: rgba(14, 31, 26, 0.98);
    border: 1px solid var(--bh-line-2);
    border-radius: 14px;
    box-shadow: var(--bh-shadow-2);
    z-index: 70;
  }

  .site-header .nav.nav-open .nav-links {
    display: flex;
  }

  .nav-links a {
    display: block;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 15px;
  }

  .nav-links a::after {
    display: none;
  }

  .nav-links a:hover {
    background: rgba(169, 195, 161, 0.08);
  }
}

@media (max-width: 900px) {
  .section-head {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 14px;
    padding-bottom: 22px;
    margin-bottom: 28px;
  }

  .section-head > div,
  .section-head p {
    min-width: 0;
  }

  .compact-steps-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .compact-step-arrow {
    display: none;
  }

  .compact-step-card,
  .compact-step-copy {
    min-width: 0;
  }

  .compact-step-copy {
    flex: 1 1 auto;
  }

  .compact-step-copy h4,
  .compact-step-copy p {
    overflow-wrap: anywhere;
  }

  .compact-value-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .results-panel-content {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
}

@media (max-width: 480px) {
  #navCartText {
    display: none;
  }

  .nav-cart-pill {
    gap: 7px;
    padding: 9px 11px;
  }
}

@media (max-width: 640px) {
  .compact-value-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .compact-value-card {
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
  }

  .compact-value-card > div {
    flex: 1 1 auto;
    min-width: 0;
  }

  .compact-value-icon {
    flex: 0 0 36px;
  }

  .compact-value-card h4,
  .compact-value-card p {
    overflow-wrap: anywhere;
  }

  .compact-steps-grid {
    gap: 10px;
  }

  .compact-step-card {
    gap: 12px;
    padding: 16px;
  }

  .process-cta .btn {
    width: 100%;
  }

  .results-tab-bar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .results-tab-bar .results-tab-btn {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 8px 10px;
    font-size: 12px;
    line-height: 1.25;
    white-space: normal;
  }

  .results-tab-bar .results-tab-btn:last-child {
    grid-column: 1 / -1;
    justify-self: center;
    width: min(100%, 220px);
  }

  .results-panel-content {
    gap: 18px;
    padding: 16px;
    border-radius: 16px;
  }

  .compare-wrap {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .compare-tag {
    top: 6px;
    left: 6px;
    max-width: calc(100% - 12px);
    padding: 4px 6px;
    font-size: 8.5px;
    letter-spacing: 0.04em;
    white-space: normal;
  }

  .results-details {
    gap: 12px;
    min-width: 0;
  }

  .results-details h3 {
    font-size: 22px;
    overflow-wrap: anywhere;
  }

  .results-details p {
    overflow-wrap: anywhere;
  }

  .results-stats-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .results-stat-box {
    min-width: 0;
    text-align: center;
  }

  .results-stat-box small {
    display: block;
    overflow-wrap: anywhere;
  }

  .results-details .btn {
    width: 100%;
    white-space: normal;
  }
}