/* ==========================================================================
   StaveBank Florist - Birthday Flowers Landing Page
   Scoped under .sb-birthday to avoid conflicts with Elementor / theme styles
   Fonts loaded via wp_enqueue_style in template-homepage-birthday.php

   Layout follows the agency reference mockups; palette and typography are
   Stavebank brand (chartreuse / Cinzel / Montserrat) so the page reads as
   part of the same site as the homepage.
   ========================================================================== */

:root {
  --sb-color-primary: #d9e167;
  --sb-color-primary-dark: #c5cd4d;
  --sb-color-primary-light: #e8ed9c;

  /* Darkened chartreuse used ONLY for small text on light backgrounds.
     The raw brand chartreuse fails contrast at eyebrow/label sizes. */
  --sb-color-accent-text: #6b7519;

  --sb-color-black: #1a1a1a;
  --sb-color-dark: #2d2d2d;
  --sb-color-gray: #666666;
  --sb-color-gray-light: #999999;
  --sb-color-gray-lighter: #e5e5e5;
  --sb-color-off-white: #f8f8f6;
  --sb-color-white: #ffffff;
  --sb-color-dark-gray-bg: #4a4a4a;

  --sb-font-heading: 'Cinzel', 'Trajan Pro', 'Times New Roman', serif;
  --sb-font-accent: 'Cormorant Garamond', 'Cinzel', 'Times New Roman', serif;
  --sb-font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;

  --sb-shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
  --sb-shadow-md: 0 4px 20px rgba(0,0,0,0.12);
  --sb-shadow-lg: 0 8px 40px rgba(0,0,0,0.16);

  --sb-transition-fast: 0.2s ease;
  --sb-transition-base: 0.3s ease;

  --sb-radius-sm: 8px;
  --sb-radius-md: 14px;
  --sb-radius-lg: 22px;

  --sb-container-max: 1280px;
  --sb-container-padding: 24px;
  --sb-section-pad: 96px;

  /* The production theme header is position:fixed and fully transparent, so it
     overlays the top of the page. The hero must pad itself clear of it or the
     H1 and eyebrow sit underneath the logo and nav.
     Measured header bottom edge (with the #top-nav fix below applied):
     189px down to 768px wide, 211px @600-480, 234px @320 — it grows as the
     promo bar text wraps, so each value carries headroom over its range. */
  --sb-header-clear: 205px;
}

/* --------------------------------------------------------------------------
   Theme header gap fix.

   #top-nav (the nav bar inside the Elementor header) is offset with
   `top: 36px` at every breakpoint, but the compensating `margin-top: -36px`
   is only applied on wide desktop. Below that the offset is uncancelled and
   leaves a 36px transparent band between the promo bar and the nav.

   This is a SITE-WIDE theme bug — it shows on shop, cart, product and every
   other page, and is only invisible on the homepage because the full-bleed
   hero image shows through the gap. It is repeated here so this page is
   correct on its own; the same rule belongs in global CSS for the rest of
   the site (see global-header-gap-fix.css).

   Do NOT "fix" this by zeroing the offset. `top: 0 !important` LOSES to the
   theme's own rule while `margin-top: 0 !important` WINS, which strips the
   desktop compensation and puts the 36px gap on desktop too — verified live.
   Restoring the negative margin at every breakpoint is the mechanism the
   theme already uses on desktop, and margin-top is reliably overridable.
   -------------------------------------------------------------------------- */

#top-nav {
  margin-top: -36px !important;
}

/* ==========================================================================
   Base
   ========================================================================== */

.sb-birthday {
  font-family: var(--sb-font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--sb-color-dark);
  background-color: var(--sb-color-white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.sb-birthday *,
.sb-birthday *::before,
.sb-birthday *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.sb-birthday img {
  max-width: 100%;
  height: auto;
  display: block;
}

.sb-birthday a {
  text-decoration: none;
  color: inherit;
}

.sb-birthday ul,
.sb-birthday ol {
  list-style: none;
}

.sb-birthday h1,
.sb-birthday h2,
.sb-birthday h3 {
  font-family: var(--sb-font-heading);
  font-weight: 600;
  line-height: 1.2;
  color: var(--sb-color-black);
}

.sb-birthday .bf-container {
  max-width: var(--sb-container-max);
  margin: 0 auto;
  padding: 0 var(--sb-container-padding);
}

/* Visible keyboard focus everywhere — the theme default is too faint to see. */
.sb-birthday a:focus-visible,
.sb-birthday button:focus-visible {
  outline: 3px solid var(--sb-color-accent-text);
  outline-offset: 3px;
  border-radius: var(--sb-radius-sm);
}

/* ==========================================================================
   Shared section furniture
   ========================================================================== */

.sb-birthday .bf-section-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 48px;
}

.sb-birthday .bf-eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--sb-color-accent-text);
  margin-bottom: 14px;
}

.sb-birthday .bf-eyebrow-light {
  color: var(--sb-color-primary);
}

.sb-birthday .bf-eyebrow-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--sb-color-accent-text);
  background-color: var(--sb-color-white);
  border: 1px solid var(--sb-color-gray-lighter);
  border-radius: 999px;
  padding: 7px 16px;
  margin-bottom: 24px;
}

.sb-birthday .bf-eyebrow-pill::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--sb-color-primary-dark);
}

.sb-birthday .bf-section-title {
  font-size: clamp(28px, 3.6vw, 44px);
  margin-bottom: 18px;
}

.sb-birthday .bf-section-sub {
  font-size: 16px;
  color: var(--sb-color-gray);
  max-width: 620px;
  margin: 0 auto;
}

.sb-birthday .bf-section-sub-wide {
  max-width: 760px;
}

.sb-birthday .bf-section-cta {
  text-align: center;
  margin-top: 48px;
}

/* ==========================================================================
   Buttons — pill geometry from the reference mocks, brand colours
   ========================================================================== */

.sb-birthday .bf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  font-family: var(--sb-font-body);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 15px 30px;
  border: 2px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  text-align: center;
  transition: background-color var(--sb-transition-base),
              border-color var(--sb-transition-base),
              color var(--sb-transition-base),
              transform var(--sb-transition-base),
              box-shadow var(--sb-transition-base);
}

.sb-birthday .bf-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.sb-birthday .bf-btn-primary {
  background-color: var(--sb-color-primary);
  border-color: var(--sb-color-primary);
  color: var(--sb-color-black);
}

.sb-birthday .bf-btn-primary:hover {
  background-color: var(--sb-color-primary-dark);
  border-color: var(--sb-color-primary-dark);
  transform: translateY(-2px);
  box-shadow: var(--sb-shadow-md);
}

.sb-birthday .bf-btn-outline {
  background-color: transparent;
  border-color: var(--sb-color-black);
  color: var(--sb-color-black);
}

.sb-birthday .bf-btn-outline:hover {
  background-color: var(--sb-color-black);
  color: var(--sb-color-white);
}

/* Ghost button sits on the dark panels */
.sb-birthday .bf-btn-ghost {
  background-color: transparent;
  border-color: rgba(255,255,255,0.45);
  color: var(--sb-color-white);
}

.sb-birthday .bf-btn-ghost:hover {
  background-color: var(--sb-color-white);
  border-color: var(--sb-color-white);
  color: var(--sb-color-black);
}

/* ==========================================================================
   SECTION 1: Hero
   ========================================================================== */

.sb-birthday .bf-hero {
  background-color: var(--sb-color-off-white);
  padding: var(--sb-header-clear) 0 88px;
}

.sb-birthday .bf-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 64px;
  align-items: center;
}

.sb-birthday .bf-hero-title {
  font-size: clamp(34px, 5vw, 60px);
  line-height: 1.12;
  margin-bottom: 22px;
}

/* Second line of the H1 — the mock's italic serif treatment. Cinzel has no
   true italic, so the accent face carries it instead of a faked oblique. */
.sb-birthday .bf-hero-title em {
  display: block;
  font-family: var(--sb-font-accent);
  font-style: italic;
  font-weight: 500;
  font-size: 1.12em;
  color: var(--sb-color-dark);
}

.sb-birthday .bf-hero-sub {
  font-size: 17px;
  color: var(--sb-color-gray);
  max-width: 540px;
  margin-bottom: 32px;
}

.sb-birthday .bf-hero-sub strong {
  color: var(--sb-color-dark);
  font-weight: 600;
}

.sb-birthday .bf-hero-ctas {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 36px;
}

.sb-birthday .bf-hero-callout {
  font-size: 15px;
  color: var(--sb-color-gray);
}

.sb-birthday .bf-hero-callout a {
  color: var(--sb-color-black);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  /* Meets the 44px touch minimum without breaking the inline flow */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 2px;
}

.sb-birthday .bf-trust-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 26px;
  padding-top: 26px;
  border-top: 1px solid var(--sb-color-gray-lighter);
}

.sb-birthday .bf-trust-strip li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--sb-color-gray);
  white-space: nowrap;
}

.sb-birthday .bf-trust-strip svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--sb-color-accent-text);
}

/* Hero image + floating featured card */
.sb-birthday .bf-hero-media {
  position: relative;
}

.sb-birthday .bf-hero-img {
  width: 100%;
  aspect-ratio: 5 / 6;
  object-fit: cover;
  border-radius: var(--sb-radius-lg);
  box-shadow: var(--sb-shadow-lg);
}

.sb-birthday .bf-hero-card {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "label btn"
    "name  btn";
  align-items: center;
  gap: 2px 16px;
  background-color: rgba(255,255,255,0.96);
  backdrop-filter: blur(6px);
  border-radius: var(--sb-radius-md);
  padding: 16px 18px;
  box-shadow: var(--sb-shadow-md);
  transition: transform var(--sb-transition-base), box-shadow var(--sb-transition-base);
}

.sb-birthday .bf-hero-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sb-shadow-lg);
}

.sb-birthday .bf-hero-card-label {
  grid-area: label;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--sb-color-accent-text);
}

.sb-birthday .bf-hero-card-name {
  grid-area: name;
  font-family: var(--sb-font-heading);
  font-size: 15px;
  font-weight: 600;
  color: var(--sb-color-black);
  line-height: 1.3;
}

.sb-birthday .bf-hero-card-btn {
  grid-area: btn;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  background-color: var(--sb-color-black);
  color: var(--sb-color-white);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 10px 18px;
  border-radius: 999px;
  white-space: nowrap;
  transition: background-color var(--sb-transition-base), color var(--sb-transition-base);
}

.sb-birthday .bf-hero-card:hover .bf-hero-card-btn {
  background-color: var(--sb-color-primary);
  color: var(--sb-color-black);
}

/* ==========================================================================
   SECTION 2: Intro + stats
   ========================================================================== */

.sb-birthday .bf-intro {
  padding: var(--sb-section-pad) 0;
  text-align: center;
}

.sb-birthday .bf-intro-head {
  max-width: 860px;
  margin: 0 auto;
}

.sb-birthday .bf-ornament {
  display: inline-flex;
  color: var(--sb-color-primary-dark);
  margin-bottom: 12px;
}

.sb-birthday .bf-ornament svg {
  width: 30px;
  height: 30px;
}

.sb-birthday .bf-intro-head p {
  color: var(--sb-color-gray);
  margin-bottom: 18px;
}

.sb-birthday .bf-intro-head p:last-child {
  margin-bottom: 0;
}

.sb-birthday .bf-intro-head strong {
  color: var(--sb-color-dark);
  font-weight: 600;
}

.sb-birthday .bf-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 56px;
}

.sb-birthday .bf-stat {
  background-color: var(--sb-color-off-white);
  border: 1px solid var(--sb-color-gray-lighter);
  border-radius: var(--sb-radius-md);
  padding: 26px 18px;
}

.sb-birthday .bf-stat-num {
  display: block;
  font-family: var(--sb-font-heading);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 600;
  color: var(--sb-color-black);
  line-height: 1.15;
  margin-bottom: 8px;
}

.sb-birthday .bf-stat-star {
  color: var(--sb-color-primary-dark);
}

.sb-birthday .bf-stat-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--sb-color-gray);
}

/* ==========================================================================
   SECTION 3: Filterable product grid
   ========================================================================== */

.sb-birthday .bf-shop {
  padding: var(--sb-section-pad) 0;
  background-color: var(--sb-color-off-white);
}

/* Filter pills. On narrow screens this becomes a horizontal snap-scroller
   rather than wrapping into a tall stack. */
.sb-birthday .bf-filters {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 44px;
}

.sb-birthday .bf-filter {
  font-family: var(--sb-font-body);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  min-height: 44px;
  padding: 12px 22px;
  border: 1px solid var(--sb-color-gray-lighter);
  border-radius: 999px;
  background-color: var(--sb-color-white);
  color: var(--sb-color-gray);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--sb-transition-fast),
              border-color var(--sb-transition-fast),
              color var(--sb-transition-fast);
}

.sb-birthday .bf-filter:hover {
  border-color: var(--sb-color-primary-dark);
  color: var(--sb-color-black);
}

.sb-birthday .bf-filter.is-active {
  background-color: var(--sb-color-black);
  border-color: var(--sb-color-black);
  color: var(--sb-color-white);
}

.sb-birthday .bf-products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.sb-birthday .bf-card {
  display: flex;
  flex-direction: column;
  background-color: var(--sb-color-white);
  border-radius: var(--sb-radius-md);
  overflow: hidden;
  box-shadow: var(--sb-shadow-sm);
  transition: transform var(--sb-transition-base), box-shadow var(--sb-transition-base);
}

.sb-birthday .bf-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--sb-shadow-md);
}

.sb-birthday .bf-card[hidden] {
  display: none;
}

.sb-birthday .bf-card-media {
  position: relative;
  overflow: hidden;
  background-color: var(--sb-color-off-white);
}

.sb-birthday .bf-card-media img {
  width: 100%;
  aspect-ratio: 350 / 447;
  object-fit: cover;
  transition: transform var(--sb-transition-base);
}

.sb-birthday .bf-card:hover .bf-card-media img {
  transform: scale(1.05);
}

.sb-birthday .bf-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 6px 12px;
  border-radius: 999px;
  background-color: var(--sb-color-primary);
  color: var(--sb-color-black);
  box-shadow: var(--sb-shadow-sm);
}

.sb-birthday .bf-card-body {
  padding: 18px 18px 22px;
  text-align: center;
}

.sb-birthday .bf-card-name {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 6px;
}

.sb-birthday .bf-card-price,
.sb-birthday .bf-card-price .amount,
.sb-birthday .bf-card-price bdi {
  font-family: var(--sb-font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--sb-color-accent-text);
}

.sb-birthday .bf-no-results {
  text-align: center;
  color: var(--sb-color-gray);
  padding: 48px 0 0;
}

/* ==========================================================================
   SECTION 4: Why choose
   ========================================================================== */

.sb-birthday .bf-why {
  padding: var(--sb-section-pad) 0;
}

.sb-birthday .bf-why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.sb-birthday .bf-why-card {
  background-color: var(--sb-color-off-white);
  border: 1px solid var(--sb-color-gray-lighter);
  border-radius: var(--sb-radius-md);
  padding: 32px 26px;
}

.sb-birthday .bf-why-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--sb-radius-sm);
  background-color: var(--sb-color-black);
  color: var(--sb-color-primary);
  margin-bottom: 22px;
}

.sb-birthday .bf-why-icon svg {
  width: 24px;
  height: 24px;
}

.sb-birthday .bf-why-card h3 {
  font-size: 19px;
  margin-bottom: 12px;
}

.sb-birthday .bf-why-card p {
  font-size: 14.5px;
  color: var(--sb-color-gray);
}

/* ==========================================================================
   SECTION 5: Delivery coverage (dark panel)
   ========================================================================== */

.sb-birthday .bf-delivery {
  padding: var(--sb-section-pad) 0;
  background-color: var(--sb-color-black);
  background-image: linear-gradient(160deg, #222 0%, #141414 100%);
  color: var(--sb-color-white);
}

.sb-birthday .bf-delivery-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 56px;
  align-items: start;
}

.sb-birthday .bf-delivery .bf-section-title {
  color: var(--sb-color-white);
  text-align: left;
  max-width: 620px;
}

.sb-birthday .bf-delivery-text p {
  color: rgba(255,255,255,0.75);
  margin-bottom: 18px;
  max-width: 620px;
}

.sb-birthday .bf-delivery-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}

.sb-birthday .bf-areas {
  background-color: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--sb-radius-lg);
  padding: 32px 28px;
}

.sb-birthday .bf-areas-title {
  font-size: 18px;
  color: var(--sb-color-primary);
  margin-bottom: 20px;
}

.sb-birthday .bf-area-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.sb-birthday .bf-area-pills li {
  font-size: 12.5px;
  font-weight: 500;
  padding: 9px 16px;
  border-radius: 999px;
  background-color: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.16);
  color: var(--sb-color-white);
}

/* Nearby GTA cities read as a secondary tier, as in the reference */
.sb-birthday .bf-area-pills li.is-nearby {
  background-color: transparent;
  border-color: var(--sb-color-primary-dark);
  color: var(--sb-color-primary);
}

.sb-birthday .bf-areas-note {
  font-size: 13.5px;
  color: rgba(255,255,255,0.62);
  margin-top: 22px;
}

/* ==========================================================================
   SECTION 6: How to order
   ========================================================================== */

.sb-birthday .bf-steps {
  padding: var(--sb-section-pad) 0;
  background-color: var(--sb-color-off-white);
}

.sb-birthday .bf-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.sb-birthday .bf-step {
  background-color: var(--sb-color-white);
  border: 1px solid var(--sb-color-gray-lighter);
  border-radius: var(--sb-radius-md);
  padding: 34px 28px;
}

.sb-birthday .bf-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--sb-color-primary);
  color: var(--sb-color-black);
  font-family: var(--sb-font-heading);
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 20px;
}

.sb-birthday .bf-step h3 {
  font-size: 20px;
  margin-bottom: 12px;
}

.sb-birthday .bf-step p {
  font-size: 14.5px;
  color: var(--sb-color-gray);
}

/* ==========================================================================
   SECTION 7: Milestones
   ========================================================================== */

.sb-birthday .bf-milestones {
  padding: var(--sb-section-pad) 0;
}

.sb-birthday .bf-milestone-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.sb-birthday .bf-milestone {
  display: flex;
  flex-direction: column;
  background-color: var(--sb-color-off-white);
  border: 1px solid var(--sb-color-gray-lighter);
  border-radius: var(--sb-radius-lg);
  padding: 32px 28px;
  transition: transform var(--sb-transition-base),
              box-shadow var(--sb-transition-base),
              border-color var(--sb-transition-base);
}

.sb-birthday .bf-milestone:hover,
.sb-birthday .bf-milestone:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--sb-shadow-md);
  border-color: var(--sb-color-primary-dark);
}

.sb-birthday .bf-milestone-tag {
  align-self: flex-start;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  padding: 7px 14px;
  border-radius: 999px;
  background-color: var(--sb-color-black);
  color: var(--sb-color-primary);
  margin-bottom: 20px;
}

.sb-birthday .bf-milestone h3 {
  font-size: 21px;
  margin-bottom: 14px;
}

.sb-birthday .bf-milestone p {
  font-size: 14.5px;
  color: var(--sb-color-gray);
  margin-bottom: 24px;
}

/* Only this link is clickable — the card itself is a plain <div>. Without
   align-self the anchor stretches the full width of the flex column, which
   would make most of the card's bottom row a click target again. */
.sb-birthday .bf-milestone-link {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--sb-color-accent-text);
  text-decoration: none;
}

.sb-birthday .bf-milestone-link:hover {
  color: var(--sb-color-black);
  text-decoration: none;
}

.sb-birthday .bf-milestone-link svg {
  width: 15px;
  height: 15px;
  transition: transform var(--sb-transition-base);
}

.sb-birthday .bf-milestone:hover .bf-milestone-link svg {
  transform: translateX(4px);
}

/* ==========================================================================
   SECTION 8: Reviews
   ========================================================================== */

.sb-birthday .bf-reviews {
  padding: var(--sb-section-pad) 0;
  background-color: var(--sb-color-off-white);
}

.sb-birthday .bf-stars {
  display: block;
  font-size: 17px;
  letter-spacing: 0.18em;
  color: var(--sb-color-primary-dark);
  margin-bottom: 10px;
}

/* ==========================================================================
   SECTION 9: Closing CTA panel
   ========================================================================== */

.sb-birthday .bf-cta {
  padding: 0 0 var(--sb-section-pad);
}

.sb-birthday .bf-cta-panel {
  background-color: var(--sb-color-black);
  background-image: linear-gradient(160deg, #232323 0%, #131313 100%);
  border-radius: var(--sb-radius-lg);
  padding: 72px 40px;
  text-align: center;
  box-shadow: var(--sb-shadow-lg);
  /* The theme forces `p { color: inherit !important }`, so a paragraph colour
     set directly on the <p> is discarded no matter how specific it is. Colour
     must be set on the parent and inherited down — same as .bf-delivery does.
     Without this the body copy inherits the page default (#2d2d2d) and is
     invisible against this panel. */
  color: rgba(255,255,255,0.75);
}

.sb-birthday .bf-cta-panel .bf-section-title {
  color: var(--sb-color-white);
}

.sb-birthday .bf-cta-panel p {
  color: rgba(255,255,255,0.75);
  max-width: 640px;
  margin: 0 auto 34px;
}

.sb-birthday .bf-cta-buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
}

/* ==========================================================================
   SECTION 10: FAQ
   ========================================================================== */

.sb-birthday .bf-faq {
  padding: 0 0 var(--sb-section-pad);
}

.sb-birthday .bf-faq-list {
  max-width: 860px;
  margin: 0 auto;
}

.sb-birthday .bf-faq-item {
  border: 1px solid var(--sb-color-gray-lighter);
  border-radius: var(--sb-radius-md);
  margin-bottom: 12px;
  overflow: hidden;
  background-color: var(--sb-color-white);
}

.sb-birthday .bf-faq-item h3 {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

.sb-birthday .bf-faq-q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 56px;
  padding: 20px 24px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--sb-font-heading);
  font-size: 16px;
  font-weight: 600;
  color: var(--sb-color-black);
  text-align: left;
  line-height: 1.4;
  transition: background-color var(--sb-transition-fast);
}

.sb-birthday .bf-faq-q:hover {
  background-color: var(--sb-color-off-white);
}

.sb-birthday .bf-faq-icon {
  position: relative;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.sb-birthday .bf-faq-icon::before,
.sb-birthday .bf-faq-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: var(--sb-color-black);
  transition: transform var(--sb-transition-base);
}

.sb-birthday .bf-faq-icon::before {
  width: 16px;
  height: 2px;
  transform: translate(-50%, -50%);
}

.sb-birthday .bf-faq-icon::after {
  width: 2px;
  height: 16px;
  transform: translate(-50%, -50%);
}

.sb-birthday .bf-faq-item.is-open .bf-faq-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.sb-birthday .bf-faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

.sb-birthday .bf-faq-a p {
  padding: 0 24px 22px;
  font-size: 15px;
  color: var(--sb-color-gray);
  line-height: 1.75;
}

.sb-birthday .bf-faq-a strong {
  color: var(--sb-color-dark);
  font-weight: 600;
}

/* ==========================================================================
   Scroll entrance animations
   ========================================================================== */

.sb-birthday .bf-animate-ready {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.sb-birthday .bf-animate-in {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   Responsive — 1024px and below
   ========================================================================== */

@media (max-width: 1024px) {
  :root {
    --sb-section-pad: 72px;
  }

  .sb-birthday .bf-hero-grid {
    gap: 40px;
  }

  .sb-birthday .bf-products {
    grid-template-columns: repeat(3, 1fr);
  }

  .sb-birthday .bf-why-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .sb-birthday .bf-delivery-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .sb-birthday .bf-steps-grid,
  .sb-birthday .bf-milestone-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Responsive — tablet / large phone
   ========================================================================== */

@media (max-width: 900px) {
  /* Only the bottom changes here — the top must stay clear of the fixed header */
  .sb-birthday .bf-hero {
    padding-bottom: 64px;
  }

  /* Text first, image second — the CTA stays above the fold on a phone */
  .sb-birthday .bf-hero-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .sb-birthday .bf-hero-sub {
    max-width: none;
  }

  .sb-birthday .bf-hero-img {
    aspect-ratio: 4 / 3;
  }

  .sb-birthday .bf-delivery .bf-section-title {
    text-align: left;
  }
}

/* ==========================================================================
   Responsive — mobile
   ========================================================================== */

@media (max-width: 768px) {
  :root {
    --sb-container-padding: 20px;
    --sb-section-pad: 60px;
    /* Header grows to ~211px once the promo bar wraps to two lines */
    --sb-header-clear: 228px;
  }

  .sb-birthday {
    font-size: 15.5px;
  }

  .sb-birthday .bf-section-head {
    margin-bottom: 36px;
  }

  /* Filters become a snap-scrolling rail instead of a 3-line wrapped block.
     Bleeds to the screen edge so it reads as scrollable. */
  .sb-birthday .bf-filters {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    margin: 0 calc(var(--sb-container-padding) * -1) 32px;
    padding: 4px var(--sb-container-padding);
  }

  .sb-birthday .bf-filters::-webkit-scrollbar {
    display: none;
  }

  .sb-birthday .bf-filter {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  /* Two-up product grid — standard for mobile ecommerce browsing and far
     less scrolling than a single column. */
  .sb-birthday .bf-products {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  .sb-birthday .bf-card-body {
    padding: 14px 12px 18px;
  }

  .sb-birthday .bf-card-name {
    font-size: 14px;
  }

  .sb-birthday .bf-card-price,
  .sb-birthday .bf-card-price .amount,
  .sb-birthday .bf-card-price bdi {
    font-size: 13.5px;
  }

  .sb-birthday .bf-badge {
    top: 8px;
    left: 8px;
    font-size: 9px;
    padding: 5px 9px;
    letter-spacing: 0.07em;
  }

  .sb-birthday .bf-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 40px;
  }

  .sb-birthday .bf-stat {
    padding: 20px 14px;
  }

  .sb-birthday .bf-why-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .sb-birthday .bf-why-card,
  .sb-birthday .bf-step,
  .sb-birthday .bf-milestone {
    padding: 26px 22px;
  }

  /* Full-width CTAs are the easiest thing to hit one-handed */
  .sb-birthday .bf-hero-ctas {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    margin-bottom: 30px;
  }

  .sb-birthday .bf-hero-ctas .bf-btn {
    width: 100%;
  }

  .sb-birthday .bf-hero-callout {
    text-align: center;
  }

  .sb-birthday .bf-trust-strip {
    gap: 10px 18px;
  }

  .sb-birthday .bf-trust-strip li {
    font-size: 12px;
  }

  .sb-birthday .bf-hero-card {
    left: 12px;
    right: 12px;
    bottom: 12px;
    grid-template-columns: 1fr;
    grid-template-areas:
      "label"
      "name"
      "btn";
    gap: 4px;
    padding: 14px 16px;
  }

  .sb-birthday .bf-hero-card-btn {
    margin-top: 10px;
    width: 100%;
  }

  .sb-birthday .bf-delivery-ctas,
  .sb-birthday .bf-cta-buttons {
    flex-direction: column;
    align-items: stretch;
  }

  .sb-birthday .bf-delivery-ctas .bf-btn,
  .sb-birthday .bf-cta-buttons .bf-btn {
    width: 100%;
  }

  .sb-birthday .bf-areas {
    padding: 26px 22px;
  }

  .sb-birthday .bf-cta-panel {
    padding: 48px 24px;
    border-radius: var(--sb-radius-md);
  }

  .sb-birthday .bf-faq-q {
    font-size: 15px;
    padding: 18px 18px;
  }

  .sb-birthday .bf-faq-a p {
    padding: 0 18px 20px;
  }
}

/* ==========================================================================
   Responsive — small phones
   ========================================================================== */

@media (max-width: 480px) {
  :root {
    --sb-container-padding: 16px;
    --sb-section-pad: 52px;
    /* Tallest case: promo bar takes three lines at 320px (header 234px) */
    --sb-header-clear: 250px;
  }

  .sb-birthday .bf-hero-title {
    font-size: 32px;
  }

  .sb-birthday .bf-hero-sub {
    font-size: 15px;
  }

  .sb-birthday .bf-btn {
    font-size: 12px;
    padding: 14px 22px;
    letter-spacing: 0.09em;
  }

  .sb-birthday .bf-section-title {
    font-size: 26px;
  }

  .sb-birthday .bf-products {
    gap: 12px;
  }

  .sb-birthday .bf-stat-label {
    font-size: 10px;
    letter-spacing: 0.1em;
  }

  /* Trust strip reads better as a 2x2 block than a ragged wrap */
  .sb-birthday .bf-trust-strip {
    display: grid;
    grid-template-columns: repeat(2, auto);
    justify-content: start;
    gap: 12px 16px;
  }

  .sb-birthday .bf-trust-strip li {
    white-space: normal;
  }
}

/* ==========================================================================
   Accessibility — honour reduced-motion preferences
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .sb-birthday *,
  .sb-birthday *::before,
  .sb-birthday *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .sb-birthday .bf-animate-ready {
    opacity: 1;
    transform: none;
  }
}