/* ============================================================
   The Sweet Creative — Master Stylesheet
   Refined editorial polish on the existing brand.
   Tokens live in colors_and_type.css; this file is layout/rhythm.
   ============================================================ */

/* ---- Reset & base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  /* Flat warm paper. Section bands (--paper / field tokens) carry the
     surface rhythm; a viewport-fixed gradient fought the flat colour
     fields the cutout photography sits on, and background-attachment:
     fixed forces full repaints on mobile scroll. */
  background: var(--cream);
  color: var(--ink-900);
  font-family: 'Jost', system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
button { font-family: inherit; cursor: pointer; }
a { color: inherit; }
:focus-visible {
  outline: 2px solid var(--rose-600);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---- Typography rhythm ---- */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Cormorant Garamond', 'Times New Roman', serif;
  font-weight: 500;
  color: var(--ink-900);
  margin: 0 0 0.6em;
  letter-spacing: -0.005em;
  line-height: 1.08;
}
h1 { font-size: clamp(2.4rem, 5.8vw, 4.6rem); font-weight: 500; letter-spacing: -0.015em; }
h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); }
/* Balance multi-line headings — prevents the ragged one-word last lines
   the big serif moments produce at mid widths. Progressive enhancement. */
h1, h2 { text-wrap: balance; }
h3 { font-size: clamp(1.4rem, 2.4vw, 1.95rem); }
h4 { font-size: 1.2rem; line-height: 1.25; }
h5 { font-size: 1.02rem; line-height: 1.3; font-weight: 600; font-family: 'Jost', sans-serif; letter-spacing: 0.01em; }
.script {
  font-family: 'Dancing Script', cursive;
  font-weight: 600;
  color: var(--rose-600);
  font-style: normal;
  font-size: 1.04em;
}
em { font-style: italic; color: var(--rose-700); }
p { margin: 0 0 1em; }
.lede { font-size: 1.13rem; color: var(--ink-700); max-width: 56ch; line-height: 1.65; }
.eyebrow {
  display: inline-block;
  font-family: 'Jost', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  /* rose-700, not rose-600: at this size rose-600 fails AA contrast on
     cream (4.35:1) and the field tints (3.6–3.8:1); rose-700 clears it
     everywhere (5.8–6:1). Keep rose-600 for large/decorative type. */
  color: var(--rose-700);
  margin-bottom: 14px;
}
.eyebrow.dark { color: var(--ink-700); }
.small { font-size: 0.85rem; color: var(--ink-500); }

/* ============================================================
   LAYOUT PRIMITIVES
   ============================================================ */
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 28px; }
.wrap-narrow { max-width: 920px; margin: 0 auto; padding: 0 28px; }
.section {
  max-width: 1280px;
  margin: 0 auto;
  padding: 96px 28px;
}
.section.tight { padding: 56px 28px; }
.section.huge { padding: 140px 28px; }
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 56px;
  flex-wrap: wrap;
}
.section-head h2 { margin: 0; }
.section-head .more {
  color: var(--rose-700);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: color .25s ease, transform .25s ease;
}
.section-head .more:hover { color: var(--rose-600); transform: translateX(3px); }

@media (max-width: 720px) {
  .section { padding: 64px 20px; }
  .section.huge { padding: 88px 20px; }
}

/* Decorative divider */
.divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: var(--rose-400);
  margin: 24px auto;
}
.divider::before,
.divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--blush-300), transparent);
  max-width: 200px;
}

/* ============================================================
   ANNOUNCEMENT BAR (rendered by chrome.js when configured)
   Solid brand ribbon above the nav — one crisp line, dismissible.
   ============================================================ */
.announce-bar {
  background: var(--rose-900);
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 9px 44px 9px 16px;
  position: relative;
}
.announce-bar p {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  text-align: center;
}
.announce-bar a {
  color: var(--blush-300);
  text-underline-offset: 3px;
}
.announce-dismiss {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  color: var(--blush-300);
  padding: 6px;
  display: inline-flex;
}
.announce-dismiss svg { width: 14px; height: 14px; }
.announce-dismiss:hover { color: var(--cream); }

/* ============================================================
   NAV CHROME (rendered by chrome.js)
   ============================================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  /* Soft blush undertone (was pure cream rgba 251,244,239) so the header
     reads as a warm pink slip floating over the body, not "more body."
     Backdrop-blur preserved so content underneath still gives motion. */
  background: rgba(252, 235, 238, 0.86);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid rgba(169, 92, 107, 0.10);
}
.nav-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 12px 28px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}
.nav-brand {
  font-family: 'Cormorant Garamond', serif;
  color: var(--ink-900);
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  line-height: 1;
}
.nav-brand .brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  transition: transform .35s ease;
}
.nav-brand .brand-mark img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  /* Drop the baked-in white background of the PNG so the cream nav shows through.
     'multiply' keeps the black ink solid while making white pixels transparent.
     Note: don't apply transform to .brand-mark — it creates a new stacking
     context that breaks this blend, causing a white square to flash on hover. */
  mix-blend-mode: multiply;
}
.nav-brand .brand-text {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  line-height: 1;
}
.nav-brand .bt-the {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ink-900);
}
.nav-brand .bt-creative {
  font-family: 'Dancing Script', cursive;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--rose-700);
  letter-spacing: 0.01em;
  /* Slight optical lift to align baseline of script with the serif */
  transform: translateY(2px);
}
@media (max-width: 700px) {
  .nav-brand .brand-mark { width: 46px; height: 46px; }
  .nav-brand .bt-the { font-size: 1.15rem; }
  .nav-brand .bt-creative { font-size: 1.4rem; }
}
.nav-links {
  display: flex;
  gap: 32px;
  justify-content: center;
  align-items: center;
}
.nav-links a {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-700);
  text-decoration: none;
  position: relative;
  padding: 4px 0;
  transition: color .2s ease;
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--rose-600);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.nav-links a:hover { color: var(--rose-700); }
.nav-links a:hover::after,
.nav-links a.active::after { transform: scaleX(1); }
.nav-actions {
  display: flex;
  gap: 14px;
  justify-content: flex-end;
  align-items: center;
}
.nav-icon-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--ink-700);
  width: 38px; height: 38px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
  position: relative;
}
.nav-icon-btn:hover { background: var(--blush-100); color: var(--rose-700); border-color: var(--blush-200); }
.cart-count {
  position: absolute;
  top: -4px; right: -4px;
  background: var(--rose-600);
  color: white;
  font-size: 10px;
  min-width: 16px; height: 16px;
  border-radius: 8px;
  padding: 0 4px;
  font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Jost', sans-serif;
}
.nav-mobile-toggle { display: none; }
.nav-mobile-panel { display: none; }

@media (max-width: 900px) {
  .nav-inner { grid-template-columns: auto 1fr auto; gap: 12px; padding: 12px 18px; }
  .nav-links { display: none; }
  .nav-mobile-toggle {
    display: inline-flex;
    background: transparent;
    border: 0;
    color: var(--ink-700);
    padding: 8px;
  }
  .nav-mobile-panel {
    display: none;
    background: var(--cream);
    border-top: 1px solid var(--line);
    padding: 28px 24px 36px;
  }
  .nav-mobile-panel.open { display: flex; flex-direction: column; gap: 4px; }
  /* Big serif menu — the one place the serif gets to be a menu. */
  .nav-mobile-panel a {
    font-size: clamp(1.7rem, 6vw, 2.2rem);
    line-height: 1.15;
    color: var(--ink-900);
    text-decoration: none;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
  }
  .nav-mobile-panel a:last-child { border-bottom: 0; }
  .nav-mobile-panel a.active { color: var(--rose-700); }
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Jost', sans-serif;
  font-size: 0.83rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 14px 26px;
  text-decoration: none;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: transform .2s cubic-bezier(.2,.8,.2,1),
              box-shadow .25s ease,
              background .25s ease,
              color .25s ease,
              border-color .25s ease;
  cursor: pointer;
  position: relative;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--ink-900);
  color: var(--cream);
  border-color: var(--ink-900);
  box-shadow: 0 6px 20px -8px rgba(31, 26, 23, 0.5);
}
.btn-primary:hover {
  background: var(--rose-700);
  border-color: var(--rose-700);
  box-shadow: 0 10px 28px -8px rgba(110, 47, 58, 0.45);
  transform: translateY(-1px);
}
.btn-secondary {
  background: transparent;
  color: var(--ink-900);
  border-color: var(--ink-900);
}
.btn-secondary:hover {
  background: var(--ink-900);
  color: var(--cream);
  transform: translateY(-1px);
}
.btn-rose {
  background: var(--rose-600);
  color: white;
  border-color: var(--rose-600);
  box-shadow: 0 6px 20px -8px rgba(169, 92, 107, 0.55);
}
.btn-rose:hover {
  background: var(--rose-700);
  border-color: var(--rose-700);
  transform: translateY(-1px);
}
.btn-ghost {
  background: transparent;
  color: var(--rose-700);
  border-color: var(--blush-300);
}
.btn-ghost:hover {
  background: var(--blush-100);
  border-color: var(--rose-400);
  color: var(--rose-700);
}
.btn.full { width: 100%; justify-content: center; }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 36px; }

/* ============================================================
   HERO (homepage)
   ============================================================ */
.hero {
  max-width: 1400px;
  margin: 0 auto;
  padding: 80px 28px 96px;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 72px;
  align-items: center;
  position: relative;
}

/* === Immersive hero variant ============================================
   Full-bleed ambient video covers the entire hero section; text +
   balloon float over the top. A soft cream gradient scrim sits between
   the video and the content so headlines stay legible.
   ==================================================================== */
.hero--immersive {
  max-width: none;
  margin: 0;
  padding: 0;
  position: relative;
  width: 100%;
  /* 80vh (was 88vh) so the info strip is reachable without a scroll hunt */
  min-height: clamp(560px, 80vh, 860px);
  display: block;
  overflow: hidden;
  border-radius: 0;
}
.hero--immersive .hero-video-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  filter: saturate(0.92) brightness(0.97);
  pointer-events: none;
}
/* Soft cream-to-clear scrim — strong on the left where the headline
   sits, lighter on the right where the balloon hovers. */
.hero--immersive::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      to right,
      rgba(251, 244, 239, 0.88) 0%,
      rgba(251, 244, 239, 0.66) 45%,
      rgba(251, 244, 239, 0.12) 72%,
      rgba(251, 244, 239, 0.04) 100%
    ),
    /* subtle bottom fade so the section blends into the next block */
    linear-gradient(
      to bottom,
      rgba(251, 244, 239, 0.0) 70%,
      rgba(251, 244, 239, 0.55) 100%
    );
}
.hero--immersive .hero-inner {
  position: relative;
  z-index: 2;
  max-width: 1400px;
  margin: 0 auto;
  padding: 80px 28px 96px;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 72px;
  align-items: center;
  min-height: inherit;
}
.hero--immersive .hero-text h1 {
  /* slight text-shadow for legibility on the busier video moments */
  text-shadow: 0 1px 0 rgba(251, 244, 239, 0.6);
}
@media (prefers-reduced-motion: reduce) {
  .hero--immersive .hero-video-bg { display: none; }
  .hero--immersive { background: var(--cream); }
}
@media (max-width: 768px) {
  .hero--immersive {
    min-height: auto;
  }
  .hero--immersive .hero-inner {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 36px 20px 48px;
  }
  /* On mobile the video already does all the visual work — hide the
     product balloon photo so the headline + CTAs sit above the fold. */
  .hero--immersive .hero-stage {
    display: none;
  }
  .hero--immersive::after {
    /* even cream wash so headline reads cleanly across the whole frame */
    background:
      linear-gradient(
        to bottom,
        rgba(251, 244, 239, 0.45) 0%,
        rgba(251, 244, 239, 0.70) 60%,
        rgba(251, 244, 239, 0.85) 100%
      );
  }
}
/* === end immersive hero ============================================ */

.hero-text h1 {
  font-size: clamp(2.6rem, 5.4vw, 4.8rem);
  margin-bottom: 28px;
}
.hero-text .lede { font-size: 1.18rem; max-width: 50ch; }
.hero-stage {
  position: relative;
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* (radial halo removed — cutouts sit directly on the video; the one
   signature treatment is the drop shadow + frame-breaking scale) */
.hero-stage img {
  position: relative;
  z-index: 1;
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  margin: 0 auto;
  object-fit: contain;
  filter: drop-shadow(0 30px 50px rgba(110, 47, 58, 0.18));
  animation: gentleFloat 6s ease-in-out infinite;
}

/* Hero photo crossfade stack — two <img> elements stacked in the same
   spot, one active at a time. The JS toggles `.is-active` and the
   opacity transition does the rest. Override the parent .hero-stage img
   rule's relative positioning so the two images stack instead of
   stretching the layout. */
.hero-img-stack {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 2; /* above the cream halo and the video */
}
.hero-img-stack .hero-img {
  position: absolute;
  /* Bottom-anchored so the balloon "stands" on the hero's lower edge;
     106% height lets the topper's curve gently break the hero's top
     padding — the signature cutout-out-of-frame device. */
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto; /* horizontally centre absolute child */
  max-width: 100%;
  width: auto;
  height: 106%;
  object-fit: contain;
  object-position: bottom center;
  filter: var(--cutout-shadow);
  /* Use a stack-specific float keyframe so we don't conflict with the
     transform: translateX used elsewhere — see @keyframes below. */
  animation: heroFloat 6s ease-in-out infinite;
  opacity: 0;
  transition: opacity 1.1s ease;
}
@keyframes heroFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
.hero-img-stack .hero-img.is-active {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .hero-img-stack .hero-img {
    animation: none;
    transition: none;
  }
}
@keyframes gentleFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

/* (the hero "Local delivery" bubble was removed — info-strip below the
    hero already carries that detail, so the floating bubble was
    redundant.) */

@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 32px 20px 56px;
  }
  .hero-text { order: 2; }
  .hero-stage {
    order: 1;
    aspect-ratio: auto;
    width: 100%;
    height: 320px;
    max-width: 100%;
    margin: 0 auto;
    overflow: visible;
  }
  .hero-stage::before {
    inset: 10% 18%;
  }
  .hero-stage img {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
    animation: none;
  }
}

@media (max-width: 480px) {
  .hero {
    padding: 20px 16px 48px;
    gap: 20px;
  }
  .hero-stage {
    height: 260px;
  }
}

@media (max-width: 380px) {
  .hero-stage { height: 220px; }
}

/* ============================================================
   INFO STRIP — a hairline-bound paper band; the visual "breath"
   after the hero. Columns separated by vertical hairlines, no
   card chrome, no shadows.
   ============================================================ */
.info-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  margin: 0;
  padding: 0;
}
.info-strip > div {
  padding: 34px 36px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  border-right: 1px solid var(--line);
}
.info-strip > div:last-child { border-right: 0; }
.info-strip .ic {
  width: auto; height: auto;
  background: transparent;
  border-radius: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--rose-600);
  flex-shrink: 0;
  margin-top: 3px;
}
.info-strip .ic svg { width: 18px; height: 18px; }
.info-strip h5 { margin: 0 0 6px; }
.info-strip p { margin: 0; color: var(--ink-500); font-size: 0.92rem; line-height: 1.5; }

@media (max-width: 800px) {
  .info-strip { grid-template-columns: 1fr; }
  .info-strip > div { border-right: 0; border-bottom: 1px solid var(--line); padding: 22px 24px; }
  .info-strip > div:last-child { border-bottom: 0; }
}

/* ============================================================
   PRICING / FINISHES CARDS
   ============================================================ */
.finishes-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.finish-card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 40px 32px 32px;
  display: flex;
  flex-direction: column;
  transition: border-color .3s ease, transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
}
.finish-card:hover {
  border-color: var(--rose-400);
  transform: translateY(-4px);
  box-shadow: 0 22px 50px -22px rgba(31, 26, 23, 0.14);
}
.finish-card.featured {
  background: var(--blush-100);
  border-color: var(--blush-300);
}
.finish-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink-900);
  color: var(--cream);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  font-weight: 500;
}
.finish-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--cream);
  border: 1px solid var(--blush-200);
  display: flex; align-items: center; justify-content: center;
  color: var(--rose-700);
  margin: 0 auto 22px;
}
.finish-card.featured .finish-icon { background: var(--paper); }

/* Photo header — flat colour field with the product cutout standing on
   its bottom edge and breaking the field's top by ~8%. Set the field
   per card via style="--field: var(--field-rose)". */
.finish-photo {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--field, var(--field-blush));
  border: 1px solid var(--line-on-field);
  border-radius: calc(var(--r-card) - 6px);
  margin: 0 0 24px;
}
.finish-photo img {
  position: absolute;
  bottom: 4%;
  left: 0; right: 0;
  margin: 0 auto;
  height: 112%;
  width: auto;
  max-width: 86%;
  object-fit: contain;
  object-position: bottom center;
  filter: var(--cutout-shadow-sm);
  transition: transform var(--dur-base) var(--ease-out);
}
.finish-card:hover .finish-photo img { transform: translateY(-6px) scale(1.02); }
/* Full-bleed variant — for the finish MATERIAL photographs (ribbon curls,
   satin bow, star foil) which are real photos with their own backgrounds,
   not transparent cutouts. Cover-fit, no cutout shadow, clipped corners. */
.finish-photo--full { overflow: hidden; }
.finish-photo--full img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  object-fit: cover;
  object-position: center;
  filter: none;
}
.finish-card:hover .finish-photo--full img { transform: scale(1.04); }
.finish-card h4 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.55rem;
  font-weight: 500;
  margin: 0 0 8px;
}
.finish-card .price {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.6rem;
  font-weight: 500;
  color: var(--rose-700);
  margin: 16px 0 6px;
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.finish-card .price small {
  font-size: 0.95rem;
  color: var(--ink-500);
  font-family: 'Jost', sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 400;
  order: -1;
  margin-left: 0;
}
.finish-card .blurb {
  font-size: 0.95rem;
  color: var(--ink-500);
  margin: 0 0 20px;
  line-height: 1.5;
}
.finish-card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.finish-card li {
  font-size: 0.92rem;
  color: var(--ink-700);
  padding-left: 22px;
  position: relative;
  line-height: 1.45;
}
.finish-card li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.55em;
  width: 12px; height: 1px;
  background: var(--rose-400);
}
.finish-card .btn { margin-top: auto; align-self: flex-start; }

/* Card foot — anchored bottom row containing price + button */
.finish-card .card-foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
.finish-card .card-foot .price {
  margin: 0;
  font-size: 2rem;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.finish-card .card-foot .price small {
  font-size: 0.7rem;
  color: var(--ink-500);
  font-family: 'Jost', sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  order: -1;
  margin-left: 0;
}
.finish-card .card-foot .btn {
  margin-top: 0;
  align-self: auto;
  padding: 10px 18px;
  font-size: 0.74rem;
}

/* Finish-tag — small label above heading distinguishing each finish at a glance */
.finish-card .finish-tag {
  display: inline-block;
  font-family: 'Jost', sans-serif;
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--rose-700);
  background: var(--blush-100);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 12px;
  align-self: flex-start;
}
.finish-card.featured .finish-tag {
  background: var(--paper);
  color: var(--rose-700);
}

/* Differs — surfaces what's actually unique about this finish */
.finish-card .differs {
  background: var(--cream);
  border-radius: 6px;
  padding: 14px 16px;
  margin: 0 0 24px;
  border-left: 2px solid var(--rose-400);
}
.finish-card.featured .differs {
  background: var(--paper);
}
.finish-card .differs-label {
  display: block;
  font-family: 'Jost', sans-serif;
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--rose-700);
  margin-bottom: 6px;
}
.finish-card .differs p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--ink-700);
  line-height: 1.5;
}

@media (max-width: 900px) {
  .finishes-row { grid-template-columns: 1fr; gap: 18px; }
}

/* ============================================================
   GALLERY (editorial scattered grid)
   ============================================================ */
.gallery-editorial {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.gallery-item {
  position: relative;
  overflow: hidden;
  background: var(--paper);
  border-radius: var(--r-card);
  border: 1px solid var(--line);
  /* Card = flat colour-field image region + paper caption strip below.
     The field rotates by grid position so the page quilts. Tile is a
     <div> with nested <a>s on gallery.html, a single <a> on the
     homepage — both shapes share this CSS. */
  --gi-field: var(--field-blush);
  display: flex;
  flex-direction: column;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease;
  text-decoration: none;
  color: inherit;
}
.gallery-item:nth-child(3n+2) { --gi-field: var(--field-cream); }
.gallery-item:nth-child(3n)   { --gi-field: var(--field-sand); }
.gallery-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 50px -22px rgba(31, 26, 23, 0.16);
  border-color: var(--rose-400);
}
/* Size classes: feature spans 2x2 on desktop (the real-photo anchor);
   the rest stay uniform. */
.gallery-item.size-feature { grid-column: span 2; grid-row: span 2; }
.gallery-item.size-wide,
.gallery-item.size-tall,
.gallery-item.size-standard { grid-column: span 1; grid-row: span 1; }
@media (max-width: 700px) {
  .gallery-item.size-feature { grid-column: span 1; grid-row: span 1; }
}

/* Real-photograph tile — cover-fit, no cutout padding/shadow treatment;
   on the 2x2 feature span the photo region grows to fill the cell. */
.gallery-item--photo img,
.gallery-item.gallery-item--photo:hover img {
  object-fit: cover;
  padding: 0;
  filter: none;
}
.gallery-item--photo .gi-photo,
.gallery-item--photo .gi-photo-link {
  aspect-ratio: auto;
  flex: 1;
  min-height: 0;
}

/* Image region — flat field wrapper (.gi-photo-link on gallery.html,
   .gi-photo on the homepage renderer); the cutout img inside stays
   transparent so its drop-shadow hugs the balloon, not the box. */
.gi-photo-link,
.gi-photo {
  position: relative;
  display: block;
  aspect-ratio: var(--ar-product);
  background: var(--gi-field);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  text-decoration: none;
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
  padding: 9% 12% 0;
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
  filter: var(--cutout-shadow-sm);
}
.gallery-item:hover img { transform: translateY(-5px) scale(1.02); }
/* (radial blob + bottom scrim removed — captions live below the image) */
.gallery-caption {
  position: static;
  background: var(--paper);
  padding: 16px 18px 18px;
  color: var(--ink-900);
  text-align: center;
  margin-top: auto;
}
.gallery-caption .occ {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 4px;
  color: var(--rose-700); /* AA contrast at 10px — see .eyebrow note */
  font-weight: 500;
}
.gallery-caption .ttl {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1.15;
}
/* Title text inside .ttl is now an <a> linking to the product detail page —
 * style as inherited so it reads as plain heading text without underline. */
.gallery-caption .ttl a,
.gallery-caption .ttl .gi-detail-link {
  color: inherit;
  text-decoration: none;
}
.gallery-caption .ttl a:hover {
  color: var(--rose-700);
}
/* (.gi-photo-link is the field-coloured image region above — its click
   area is exactly the photo region; the caption strip below carries the
   title link + Make-this-look chip.) */
/* "Make this look →" chip in the caption — secondary CTA that deep-links
 * straight into the BYO builder with finish + palette pre-set, skipping
 * the product detail page. Sits inside .gallery-caption (z:2 over the
 * photo link), so its click goes to BYO instead of the photo's product
 * page. Visually subtle by default, brightens on hover/focus. */
.gallery-caption {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.gallery-caption .gc-titleblock {
  width: 100%;
}
.gi-make-link {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  background: rgba(169, 92, 107, 0.08);
  border: 1px solid rgba(169, 92, 107, 0.25);
  color: var(--rose-700);
  text-decoration: none;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
  white-space: nowrap;
}
.gi-make-link svg {
  transition: transform .2s ease;
}
.gallery-item:hover .gi-make-link,
.gi-make-link:hover,
.gi-make-link:focus-visible {
  background: var(--rose-700);
  border-color: var(--rose-700);
  color: #fff;
}
.gallery-item:hover .gi-make-link svg,
.gi-make-link:hover svg {
  transform: translateX(2px);
}

@media (max-width: 900px) {
  .gallery-editorial {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}
@media (max-width: 520px) {
  .gallery-editorial {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* Static design index under the gallery grid — quiet, single line of
   crawlable links (the grid itself is JS-rendered). */
.gallery-static-index {
  margin-top: 40px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: 0.82rem;
  color: var(--ink-500);
  line-height: 2;
}
.gallery-static-index span { margin-right: 6px; }
.gallery-static-index a {
  color: var(--ink-700);
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  margin: 0 7px;
  white-space: nowrap;
}
.gallery-static-index a:hover { color: var(--rose-700); border-bottom-color: var(--rose-400); }

/* Filters */
.gallery-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 0 auto 56px;
  max-width: 700px;
}
.gallery-filter {
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--ink-700);
  padding: 8px 18px;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  border-radius: 999px;
  cursor: pointer;
  font-family: 'Jost', sans-serif;
  transition: all .2s ease;
}
.gallery-filter:hover { border-color: var(--rose-400); color: var(--rose-700); }
.gallery-filter.active {
  background: var(--ink-900);
  color: var(--cream);
  border-color: var(--ink-900);
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonials {
  background: var(--field-cream);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 96px 28px;
  position: relative;
  overflow: hidden;
}
/* (ghost quotation mark removed — a testimonial device on a section
   that deliberately carries no testimonials) */

/* Row of three small framed photo chips above the heading — "what
   locals received" without inventing quotes. */
.proof-chips {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-bottom: 30px;
}
.proof-chips span {
  display: block;
  width: 72px;
  height: 72px;
  border-radius: var(--r-md);
  border: 1px solid var(--line-on-field);
  background: var(--field-blush);
  overflow: hidden;
}
.proof-chips span:nth-child(2) { background: var(--field-sand); }
.proof-chips span:nth-child(3) { background: var(--field-rose); }
.proof-chips img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.proof-chips span.chip-cutout img {
  object-fit: contain;
  padding: 8px 8px 0;
  object-position: bottom center;
}
.testimonials-inner {
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  margin-top: 56px;
}
.testimonial {
  background: var(--paper);
  border-radius: 10px;
  padding: 36px 36px 32px;
  border: 1px solid var(--line);
  position: relative;
}
.testimonial blockquote {
  margin: 0 0 24px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.45;
  color: var(--ink-900);
  font-style: italic;
}
.testimonial-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.testimonial-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--blush-200);
  color: var(--rose-700);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem;
  font-weight: 500;
}
.testimonial-author {
  font-size: 0.92rem;
  color: var(--ink-700);
  font-weight: 500;
}
.testimonial-context {
  font-size: 0.78rem;
  color: var(--ink-500);
  letter-spacing: 0.06em;
}

@media (max-width: 800px) {
  .testimonials-grid { grid-template-columns: 1fr; gap: 18px; }
  .testimonial { padding: 28px 24px; }
}

/* ============================================================
   PAGE HERO (subpage banner)
   ============================================================ */
.page-hero {
  max-width: 1400px;
  margin: 0 auto;
  padding: 80px 28px 56px;
  position: relative;
}
.page-hero h1 {
  font-size: clamp(2.6rem, 5vw, 4.4rem);
  max-width: 14ch;
  margin-bottom: 24px;
}
.page-hero .lede {
  font-size: 1.13rem;
  max-width: 56ch;
}
.page-hero.center {
  text-align: center;
}
.page-hero.center h1 { margin-left: auto; margin-right: auto; }
.page-hero.center .lede { margin-left: auto; margin-right: auto; }

/* Field variant — full-width colour band with an optional right-anchored
   cutout that overlaps ~40px into the content below. Apply on the
   <section class="page-hero page-hero--field">; add the cutout as
   <img class="ph-cutout" ...> inside the section. */
.page-hero--field {
  max-width: none;
  background: var(--field-cream);
  border-bottom: 1px solid var(--line);
  padding: 96px 28px 72px;
  margin-bottom: 40px; /* room for the cutout's overlap */
}
.page-hero--field > div {
  max-width: 1400px;
  margin: 0 auto;
}
.ph-cutout {
  position: absolute;
  right: clamp(16px, 6vw, 96px);
  bottom: -40px;
  height: 78%;
  width: auto;
  object-fit: contain;
  object-position: bottom;
  filter: var(--cutout-shadow);
  pointer-events: none;
  z-index: 2;
}
@media (max-width: 900px) {
  .ph-cutout { display: none; }
  .page-hero--field { padding: 64px 20px 48px; margin-bottom: 0; }
}

/* ============================================================
   BYO BUILDER (real-time price calculator)
   ============================================================ */
.byo-layout {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 56px;
  align-items: flex-start;
}
@media (max-width: 1000px) {
  .byo-layout { grid-template-columns: 1fr; gap: 32px; }
  .byo-summary { position: static !important; }
}

/* ----- Builder column ----- */
.builder-step {
  border-bottom: 1px solid var(--line);
  padding: 32px 0;
}
.builder-step:first-child { padding-top: 0; }
.builder-step:last-child { border-bottom: 0; }

/* Promoted single-tile block — sits between step 2 (colour) and step 3
   (gifts) so the "Add 4 balloons inside?" toggle lives near the colour
   decision instead of buried in the gifts list. Visually it's a single
   wide tile, a bit taller than the regular addon-pick tiles, with rose
   tinting that lifts it as a deliberate upgrade rather than a checklist
   item. */
.builder-step-extra {
  margin: 24px 0;
}
.balloon-upgrade-pick {
  /* Inherits .addon-pick layout (flex + gap + check-box) but stretches
     full-width with a flat rose tint so it reads as a promoted upgrade —
     flat fills, not gradients, per the flat-field surface language. */
  width: 100%;
  background: rgba(252, 235, 238, 0.45);
  border: 1px solid rgba(169, 92, 107, 0.22);
  border-radius: var(--r-md);
  padding: 18px 22px;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}
.balloon-upgrade-pick:hover {
  background: rgba(252, 235, 238, 0.7);
  border-color: rgba(169, 92, 107, 0.35);
}
.balloon-upgrade-pick.is-selected {
  background: rgba(242, 191, 199, 0.4);
  border-color: var(--rose-700);
  border-width: 1.5px;
}
/* Bundle-locked variant — extra-balloons is part of the bundle's
   lockedAddonIds, so the customer can't untick it. Disabled cursor +
   muted hover so it reads as "this is included". Still keeps the
   selected styling so it's visually clear they DO have the cluster. */
.balloon-upgrade-pick.is-locked {
  cursor: not-allowed;
  opacity: 0.92;
}
.balloon-upgrade-pick.is-locked:hover {
  background: rgba(242, 191, 199, 0.4);
  border-color: var(--rose-700);
}
.balloon-upgrade-pick.is-locked .check-box {
  opacity: 0.6;
}
.balloon-upgrade-pick .a-name { font-size: 1.05rem; }
.balloon-upgrade-pick .a-blurb { margin-top: 4px; font-size: 0.88rem; }

/* Side step — non-numbered, conditional builder step. Reserved for the
   secondary cluster-palette picker that appears between step 3 and step
   4 when curled/satin + extra-balloons is ticked. Visually distinct
   from the main numbered sequence: rose-tinted card, "+" mark instead
   of a step number, slightly tighter padding so it reads as a "by-the-
   way" rather than another full step the customer must complete. */
.builder-step-side {
  background: rgba(252, 235, 238, 0.5); /* flat tint — no gradients */
  border: 1px solid rgba(169, 92, 107, 0.18);
  border-radius: var(--r-card);
  padding: 24px 28px;
  margin: 24px 0;
  box-shadow: 0 1px 2px rgba(31, 26, 23, 0.04);
}
/* Reset the under-line border the regular .builder-step adds — the
   side block uses its own card-shape instead. */
.builder-step-side {
  border-bottom: 1px solid rgba(169, 92, 107, 0.18);
}
.builder-step-side .step-head { margin-bottom: 8px; }
.builder-step-side .step-head h3 { font-size: 1.3rem; }
.step-side-mark {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.4rem;
  color: var(--rose-700);
  line-height: 1;
  font-weight: 500;
  font-style: italic;
  /* Sits in the same column as .step-num so the heading aligns visually
     with the regular numbered steps above and below. */
}
.step-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 20px;
}
/* Chapter-heading rule: hairline runs from the heading to the right edge */
.step-head::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
  align-self: center;
  margin-left: 6px;
}
.step-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 3rem;
  color: var(--blush-300);
  line-height: 1;
  font-weight: 500;
  font-style: italic;
}
.step-head h3 {
  margin: 0;
  font-size: 1.55rem;
  letter-spacing: -0.005em;
}
.step-hint {
  font-size: 0.92rem;
  color: var(--ink-500);
  margin: 0 0 24px;
  max-width: 60ch;
}

/* Finish picker */
.finish-picker {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.finish-pick {
  position: relative;
  cursor: pointer;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 22px 18px 18px;
  transition: border-color .25s ease, transform .25s cubic-bezier(.2,.8,.2,1), background .25s ease;
}
/* (Cutout thumbnails removed 2026-06-12 — every catalogue photo is a
   foil-topper balloon, so the curled-ribbon and satin-bow tiles were
   showing toppers those finishes don't include. Per-finish photos can
   return properly via the `thumbnail` field on a finish in
   product-data.js — byo-engine already renders that as .finish-thumb.) */
.finish-pick:hover {
  border-color: var(--rose-400);
  transform: translateY(-2px);
}
.finish-pick input[type=radio] { position: absolute; opacity: 0; pointer-events: none; }
.finish-pick.is-selected {
  border-color: var(--rose-600);
  background: var(--blush-100);
  box-shadow: 0 0 0 1px var(--rose-600);
}
.finish-pick .name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.15rem;
  font-weight: 500;
  margin-bottom: 4px;
  line-height: 1.2;
}
.finish-pick .pp {
  font-size: 0.82rem;
  color: var(--rose-700);
  letter-spacing: 0.08em;
  font-weight: 500;
  margin-bottom: 8px;
}
.finish-pick .desc {
  font-size: 0.82rem;
  color: var(--ink-500);
  line-height: 1.4;
}
.finish-pick .check {
  position: absolute;
  top: 12px; right: 12px;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--paper);
  display: flex; align-items: center; justify-content: center;
  transition: all .2s ease;
  /* Above the .finish-thumb photo, which comes later in the DOM and was
     painting over the tick. */
  z-index: 2;
  box-shadow: 0 1px 4px rgba(31, 26, 23, 0.12);
}
.finish-pick.is-selected .check {
  background: var(--rose-600);
  border-color: var(--rose-600);
}
.finish-pick.is-selected .check::after {
  content: '';
  width: 5px; height: 9px;
  border: 1.5px solid white;
  border-top: 0; border-left: 0;
  transform: rotate(45deg) translate(-1px, -1px);
}

@media (max-width: 700px) {
  .finish-picker { grid-template-columns: 1fr; }
}

/* Palette swatches */
.palette-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}
.palette-pick {
  cursor: pointer;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: border-color .25s ease, transform .25s ease, background .25s ease;
}
.palette-pick:hover { border-color: var(--rose-400); transform: translateY(-2px); }
.palette-pick input[type=radio] { position: absolute; opacity: 0; pointer-events: none; }
.palette-pick.is-selected {
  border-color: var(--rose-600);
  background: var(--blush-100);
  box-shadow: 0 0 0 1px var(--rose-600);
}
.swatches { display: flex; gap: -2px; }
.swatch {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 2px solid var(--paper);
  margin-left: -9px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.swatch:first-child { margin-left: 0; }
.palette-pick .pname {
  font-size: 0.88rem;
  color: var(--ink-700);
  font-weight: 500;
}

/* Add-ons.
   BYO uses <details>/<summary> per category so customers can collapse
   50+ addons into ~7 scannable headers. Bundles use plain <div> for
   locked + trim sections (those are short, no benefit to collapse).
   The .addon-group rules below cover both shapes via the bare class;
   summary-specific rules below only apply when the wrapper is <details>. */
.addon-group {
  margin-bottom: 12px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
}
.addon-group:last-child { margin-bottom: 0; border-bottom: none; padding-bottom: 0; }
/* Bundle path still uses <div class="addon-group-label"> — restore
   the original eyebrow styles for that shape. The BYO path uses
   <summary class="addon-group-label">, which inherits these too plus
   gets the chevron + flex layout from `.addon-group > summary` below. */
.addon-group-label {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-500);
  font-weight: 500;
  margin-bottom: 12px;
  padding: 12px 0;
}
/* When the label is a div (bundle path), restore plain block layout —
   no chevron, no flex, no cursor. */
div.addon-group-label {
  display: block;
  padding: 0;
}
/* Custom disclosure caret — replace the browser's default triangle with
   a brand-coloured chevron that rotates 90deg on open. Cleaner look,
   matches the rest of the type system. */
.addon-group > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 4px;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-500);
  font-weight: 500;
  margin: 0;
  transition: color 0.15s ease;
}
.addon-group > summary::-webkit-details-marker { display: none; }
.addon-group > summary:hover { color: var(--ink-900); }
.addon-group > summary::before {
  content: '';
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.2s ease;
  flex-shrink: 0;
  margin-right: 4px;
}
.addon-group[open] > summary::before { transform: rotate(45deg); }
.addon-group[open] > summary { color: var(--ink-900); }

/* Rose accent dot before each category label — adds a hint of brand
   colour to the otherwise plain text header. Larger when the category
   has selections so it visually doubles as a "you've picked something
   here" cue alongside the count chip. Inline-block so it sits on the
   same baseline as the label text. */
.addon-group .ag-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blush-300);
  flex-shrink: 0;
  transition: background 0.15s ease, transform 0.15s ease;
}
.addon-group[open] .ag-dot { background: var(--rose-700); }
.addon-group:hover .ag-dot { transform: scale(1.4); }
/* Count chip — neutral when empty, rose-tinted when at least one item
   in the group is selected. Tiny visual nudge that hints which
   categories the customer's already engaged with. */
.addon-group .ag-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  font-size: 0.7rem;
  letter-spacing: 0;
  font-weight: 600;
  background: var(--rose-700);
  color: var(--cream);
  margin-left: auto;
}
.addon-group .ag-count-muted {
  background: var(--cream-2);
  color: var(--ink-500);
  font-weight: 500;
}
/* Slight breathing room above the addon list when expanded so the tiles
   don't crowd the summary header. */
.addon-group[open] > .addons-list {
  margin-top: 6px;
}
.addons-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.addon-pick {
  position: relative;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 16px 18px;
  cursor: pointer;
  transition: border-color .25s ease, transform .25s ease, background .25s ease;
}
/* Most-paired badge — small social-proof signal on the AOV-driving addons.
   Sits at the top-LEFT of the tile so it doesn't fight the price label. */
.addon-pick .addon-badge {
  position: absolute;
  top: -8px;
  left: 14px;
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--rose-700, #A95C6B);
  color: #fff;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
  pointer-events: none;
  box-shadow: 0 1px 4px rgba(31,26,23,0.10);
}
.addon-pick:hover { border-color: var(--rose-400); transform: translateY(-1px); }
/* Selected: tint + rose border, no double ring — flatter, calmer. */
.addon-pick.is-selected {
  border-color: var(--rose-600);
  background: var(--blush-100);
}
.addon-pick input[type=checkbox] { position: absolute; opacity: 0; pointer-events: none; }
.addon-pick .check-box {
  width: 18px; height: 18px;
  border-radius: 4px;
  border: 1.5px solid var(--line-strong);
  background: var(--paper);
  flex-shrink: 0;
  margin-top: 2px;
  display: flex; align-items: center; justify-content: center;
  transition: all .2s ease;
}
.addon-pick.is-selected .check-box {
  background: var(--rose-600);
  border-color: var(--rose-600);
}
.addon-pick.is-selected .check-box::after {
  content: '';
  width: 4px; height: 8px;
  border: 1.5px solid white;
  border-top: 0; border-left: 0;
  transform: rotate(45deg) translate(-1px, -1px);
}
.addon-pick .body { flex: 1; }
.addon-pick .a-name {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink-900);
  margin-bottom: 2px;
  display: flex; justify-content: space-between; gap: 8px;
}
.addon-pick .a-price { color: var(--rose-700); font-weight: 600; font-size: 0.88rem; white-space: nowrap; }
.addon-pick .a-blurb {
  font-size: 0.82rem;
  color: var(--ink-500);
  line-height: 1.4;
}

/* "I'll supply my own gift inside" toggle.
   Sits flush below the addons list in step 3. Visually echoes .addon-pick
   but with a dashed border so it reads as an "opt-out" choice, not a regular
   addon. When .is-selected, switches to a solid rose border + tint so it's
   clear the customer has flipped the toggle. */
.supply-own-toggle {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
  text-align: left;
  padding: 16px 18px;
  margin-top: 18px;
  background: var(--cream, #FBF7F2);
  border: 1.5px dashed var(--line-strong, rgba(31, 26, 23, 0.22));
  border-radius: 10px;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: border-color .25s ease, background .25s ease, transform .25s ease;
}
.supply-own-toggle:hover {
  border-style: solid;
  border-color: var(--rose-400);
  transform: translateY(-1px);
}
.supply-own-toggle.is-selected {
  border-style: solid;
  border-color: var(--rose-600);
  background: var(--blush-100);
  box-shadow: 0 0 0 1px var(--rose-600);
}
.supply-own-toggle .check-box {
  width: 18px; height: 18px;
  border-radius: 4px;
  border: 1.5px solid var(--line-strong);
  background: var(--paper);
  flex-shrink: 0;
  margin-top: 2px;
  display: flex; align-items: center; justify-content: center;
  transition: all .2s ease;
}
.supply-own-toggle.is-selected .check-box {
  background: var(--rose-600);
  border-color: var(--rose-600);
}
.supply-own-toggle.is-selected .check-box::after {
  content: '';
  width: 4px; height: 8px;
  border: 1.5px solid white;
  border-top: 0; border-left: 0;
  transform: rotate(45deg) translate(-1px, -1px);
}
.supply-own-toggle .body { flex: 1; }
.supply-own-toggle .a-name {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink-900);
  margin-bottom: 4px;
}
.supply-own-toggle .a-blurb {
  font-size: 0.82rem;
  color: var(--ink-500);
  line-height: 1.4;
}

/* Testimonial cards — 3-up grid (desktop), stacks on mobile.
   Soft cream card with a rose-tinted quote mark and an italicised quote
   in the brand serif. Author meta sits below in small caps. */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 880px) {
  .testimonial-grid { grid-template-columns: 1fr; gap: 18px; }
}
.testimonial-card {
  position: relative;
  background: var(--cream, #FBF4EF);
  border: 1px solid var(--blush-200, #F2BFC7);
  border-radius: 14px;
  padding: 28px 26px 24px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.testimonial-card .testimonial-quote-mark {
  color: var(--rose-400, #D08F9C);
  opacity: 0.55;
  flex-shrink: 0;
}
.testimonial-quote {
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.15rem;
  line-height: 1.5;
  font-style: italic;
  color: var(--ink-900);
  flex: 1;
}
.testimonial-meta {
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-500);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: auto;
}
.testimonial-author { color: var(--rose-700); font-weight: 600; }
.testimonial-sep { opacity: 0.4; }
.testimonial-occasion {
  display: inline-block;
  background: var(--blush-100, #FCEBEE);
  color: var(--rose-700);
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  margin-left: 4px;
}

/* Dimmed state when supply-own is active. Only the customer-choosable
   addon tiles dim — locked-content items (.is-locked, no data-addon) and
   bundle choice dropdowns (.is-choice, no data-addon) stay fully interactive
   so the customer can still configure their bundle's preset choices. */
#addons-mount.is-supply-own .addon-pick[data-addon],
#balloon-upgrade-block.is-supply-own .balloon-upgrade-pick {
  opacity: 0.45;
  pointer-events: none;
  filter: saturate(0.55);
  transition: opacity .25s ease, filter .25s ease;
}
/* Soften the addon-group headings too so the dim reads as cohesive without
   killing the locked/choice rows that live in the same group. */
#addons-mount.is-supply-own .addon-group > .addon-group-label,
#addons-mount.is-supply-own details.addon-group > summary {
  opacity: 0.55;
  transition: opacity .25s ease;
}

/* ============================================================
   SEASONAL HOMEPAGE TAKEOVER (Mother's Day, etc.)
   ============================================================ */
.seasonal-takeover {
  /* Sits BELOW the hero, so it's a feature SECTION not the page hero —
     flat blush field + hairlines subordinate it to the hero (flat
     fields, not gradients, per the surface language). Centred
     single-column layout: text + bundles + CTAs. */
  padding: 48px 24px 44px;
  background: var(--blush-100);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: center;
}
.seasonal-takeover .takeover-inner {
  max-width: 1080px;
  margin: 0 auto;
}
@media (max-width: 720px) {
  .seasonal-takeover {
    padding: 48px 20px 36px;
  }
}

.seasonal-takeover .eyebrow { color: var(--rose-700); }
/* Heading switched to h2 in the markup so we don't ship two h1s on the
   page (hero owns the page-level h1 now). Targeting both h1 + h2 keeps
   the styling resilient if it ever flips back. */
.seasonal-takeover h1,
.seasonal-takeover h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  margin: 8px 0 12px;
  color: var(--ink-900);
  line-height: 1.05;
}
.seasonal-takeover .lede {
  max-width: 720px;
  margin: 0 auto 36px;
  color: var(--ink-700, var(--ink-500));
}
.seasonal-takeover .takeover-bundles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 32px;
  text-align: left;
}
@media (max-width: 900px) {
  .seasonal-takeover .takeover-bundles { grid-template-columns: 1fr; gap: 14px; }
}

/* ============================================================
   BUNDLE LIBRARY (bundles.html)
   ============================================================ */
.bundle-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
@media (max-width: 980px) {
  .bundle-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}
@media (max-width: 600px) {
  .bundle-grid { grid-template-columns: 1fr; gap: 16px; }
}
.bundle-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease;
}
.bundle-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 50px -22px rgba(31, 26, 23, 0.16);
  border-color: var(--rose-400);
}
/* Photo-led bundle card — flat category colour field (--bc-field set
   inline by the renderer from TSC_DATA.bundleCardArt), product cutout
   standing bottom-anchored, paper category chip top-left, palette
   swatch dots bottom-left. The drawn-SVG typographic treatment this
   replaces is gone for good — cutouts are the product now. */
.bc-photo {
  position: relative;
  aspect-ratio: var(--ar-product);
  background: var(--bc-field, var(--field-blush));
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.bc-photo .bc-cutout {
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
  height: 92%;
  width: auto;
  max-width: 82%;
  object-fit: contain;
  object-position: bottom center;
  filter: var(--cutout-shadow-sm);
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.bundle-card:hover .bc-cutout {
  transform: translateX(-50%) translateY(-6px) scale(1.02);
}
/* Real bundle photograph (bundle.photo set) — cover-fit, no treatment. */
.bc-photo .bc-real {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.bundle-card:hover .bc-real { transform: scale(1.03); }
.bc-cat-chip {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  background: var(--paper);
  border: 1px solid var(--line-on-field);
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-700);
}
.bc-swatches {
  position: absolute;
  left: 14px;
  bottom: 12px;
  z-index: 2;
  display: flex;
  gap: 6px;
}
.bc-swatches i {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid rgba(31, 26, 23, 0.18);
}
/* Dark (--field-ink) variant — chip stays readable, swatch rings flip */
.bc-photo--ink .bc-cat-chip { background: rgba(255, 255, 255, 0.94); }
.bc-photo--ink .bc-swatches i { border-color: rgba(255, 255, 255, 0.35); }

/* "Back to bundles" — pill chip above the customise-view eyebrow. */
#back-to-library {
  display: inline-block;
  margin-bottom: 20px;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  font-weight: 500;
  color: var(--rose-700, #A95C6B);
  text-decoration: none;
  background: var(--paper);
  border: 1px solid var(--line-on-field);
  border-radius: 999px;
  padding: 7px 16px;
  transition: background .2s ease, border-color .2s ease;
}
#back-to-library:hover { border-color: var(--rose-400); background: var(--blush-100); }

/* Hand-tied honesty note — one italic serif line under the page-hero
   lede (demoted from the old boxed banner). */
.bundle-note {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.08rem;
  color: var(--ink-500);
  margin: 14px auto 0;
  max-width: 56ch;
}
.bundle-note a { color: var(--rose-700); text-underline-offset: 3px; }
.bc-body {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.bc-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.45rem;
  font-weight: 500;
  line-height: 1.15;
  color: var(--ink-900);
}
.bc-blurb {
  font-size: 0.92rem;
  color: var(--ink-500);
  line-height: 1.5;
  margin: 0;
}
.bc-includes {
  font-size: 0.82rem;
  color: var(--ink-700, var(--ink-500));
  line-height: 1.45;
  padding: 8px 10px;
  background: var(--cream-2);
  border-radius: 6px;
  margin-top: 4px;
}
.bc-includes strong {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  color: var(--ink-900);
  font-weight: 600;
  display: block;
  margin-bottom: 2px;
}
.bc-foot {
  margin-top: auto;
  padding-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-top: 1px solid var(--line);
}
.bc-price {
  font-size: 1.05rem;
  color: var(--rose-700);
  font-weight: 600;
}
.bc-cta {
  font-size: 0.86rem;
  color: var(--rose-700);
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* BYO inspiration picker — gallery cards rendered as <button> elements */
.byo-look-card {
  font: inherit;
  color: inherit;
  text-align: left;
  appearance: none;
  -webkit-appearance: none;
  background: var(--cream-2);
  padding: 0;
}
.byo-look-card.is-picked {
  border-color: var(--rose-600);
  box-shadow: 0 0 0 2px var(--rose-600), 0 22px 50px -22px rgba(110, 47, 58, 0.22);
}

/* Bundle mode — locked contents (gifts inside the bundle, not toggleable) */
.addon-pick.is-locked {
  cursor: default;
  background: var(--blush-100);
  border-color: var(--rose-400);
  box-shadow: none;
}
.addon-pick.is-locked:hover { transform: none; border-color: var(--rose-400); }
.addon-pick.is-locked .a-price {
  color: var(--ink-500);
  font-weight: 500;
  font-style: italic;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}
.check-box--locked {
  width: 18px; height: 18px;
  border-radius: 4px;
  background: var(--rose-600);
  color: #fff;
  flex-shrink: 0;
  margin-top: 2px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
/* Locked check-box renders its own ✓ glyph inline. Suppress the universal
   .is-selected ::after check (which draws a second rotated-border tick on
   top), otherwise locked items show two checkmarks. */
.addon-pick.is-locked .check-box--locked::after {
  display: none;
  content: none;
}

@media (max-width: 700px) {
  .addons-list { grid-template-columns: 1fr; }
}

/* Form fields (text/email/tel/textarea/select) */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}
.field.full { grid-column: 1 / -1; }
.field-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (max-width: 600px) { .field-row { grid-template-columns: 1fr; } }
.field label {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-700);
  font-weight: 500;
}
/* Required-field asterisk on form labels. aria-hidden on the span itself
 * so screen readers don't announce a stray "asterisk" — they already get
 * the required state from the input's required attribute. */
.field label .req {
  color: var(--rose-700);
  font-weight: 700;
  margin-left: 2px;
}

/* Rush-order block — only visible when date_needed is within 7 days.
 * Sits directly below the date input on step 5. Compact and on-brand
 * (rose-tint, not loud), so customers notice but don't feel pressured.
 * Visibility toggled via hidden attribute by evaluateRushVisibility(). */
.rush-block {
  margin-top: 12px;
  background: rgba(169, 92, 107, 0.06);
  border: 1px solid rgba(169, 92, 107, 0.2);
  border-radius: 10px;
  padding: 14px 16px;
}
.rush-pick {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
}
.rush-pick input[type="checkbox"] {
  margin-top: 3px;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  accent-color: var(--rose-700);
}
.rush-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.rush-title {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink-900);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
  text-transform: none;
  letter-spacing: 0;
}
.rush-price {
  color: var(--rose-700);
  font-weight: 600;
  white-space: nowrap;
}
.rush-blurb {
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--ink-700);
}
.rush-fallback {
  margin: 10px 0 0;
  font-size: 0.78rem;
  color: var(--ink-500);
}
.rush-fallback a {
  color: var(--rose-700);
  text-decoration: none;
}
.rush-fallback a:hover {
  text-decoration: underline;
}

/* BYO page top info row — delivery costs + same-week phone CTA.
 * Two pills side-by-side at desktop, stacked at mobile.
 * Background blends with the page (cream-50) so it's helpful, not loud. */
.byo-info-row {
  max-width: 920px;
  margin: 0 auto 28px;
  padding: 0 20px;
}
.byo-info-row-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.byo-info-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--cream-2);
  border: 1px solid var(--cream-3);
  border-radius: 999px;
  font-size: 0.9rem;
  color: var(--ink-800);
  line-height: 1.4;
  flex: 0 1 auto;
}
.byo-info-pill .bip-icon {
  display: inline-flex;
  color: var(--rose-700);
  flex-shrink: 0;
}
.byo-info-pill--cta {
  background: rgba(169, 92, 107, 0.08);
  border-color: rgba(169, 92, 107, 0.2);
}
.byo-info-pill--cta a {
  color: var(--rose-700);
  text-decoration: none;
  white-space: nowrap;
}
.byo-info-pill--cta a:hover {
  text-decoration: underline;
}
@media (max-width: 600px) {
  .byo-info-pill {
    width: 100%;
    justify-content: flex-start;
  }
  .byo-info-pill .bip-text {
    font-size: 0.85rem;
  }
}
.field input,
.field textarea,
.field select {
  font-family: 'Jost', sans-serif;
  font-size: 0.98rem;
  padding: 12px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink-900);
  transition: border-color .2s ease, box-shadow .2s ease;
  width: 100%;
}
.field textarea { resize: vertical; min-height: 90px; line-height: 1.5; }
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: 0;
  border-color: var(--rose-600);
  box-shadow: 0 0 0 3px var(--blush-200);
}
.field-help {
  font-size: 0.78rem;
  color: var(--ink-500);
}

/* Summary card (sticky) — the "receipt" of the page. Paper, hairline,
   soft shadow, and the maker's stamp watermark top-right. */
.byo-summary {
  position: sticky;
  top: 100px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 28px;
  box-shadow: var(--shadow-card);
}
/* Scoped to the builder layout — contact/corporate reuse .byo-summary as
   a plain card (with inline position:static, which would throw an
   absolute ::after to the page corner). */
.byo-layout .byo-summary::after {
  content: '';
  position: absolute;
  top: 18px;
  right: 18px;
  width: 56px;
  height: 56px;
  background: url('/assets/logo-stamp-440.png') center / contain no-repeat;
  opacity: 0.3;
  pointer-events: none;
}
.summary-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.summary-head h4 {
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem;
  font-weight: 500;
}
.summary-head .live {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rose-600);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.summary-head .live::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--rose-600);
  border-radius: 50%;
  animation: pulseDot 1.8s ease-in-out infinite;
}
@keyframes pulseDot {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.3; }
}
.summary-lines {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 18px 0;
  min-height: 80px;
}
.summary-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.92rem;
  color: var(--ink-700);
  line-height: 1.4;
  animation: fadeUp .3s ease both;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.summary-line .ln { padding-right: 12px; }
.summary-line .lp { color: var(--ink-900); white-space: nowrap; font-variant-numeric: tabular-nums; }
.summary-line.muted { color: var(--ink-300); font-style: italic; font-size: 0.88rem; }
.summary-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 18px;
  /* dashed rule reads "docket" without kitsch */
  border-top: 1px dashed var(--line-strong);
}
.summary-total .label {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-500);
  font-weight: 500;
}
.summary-total .total {
  font-family: 'Jost', sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--rose-700);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.summary-total .total small {
  font-size: 0.72rem;
  color: var(--ink-500);
  margin-left: 5px;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  letter-spacing: 0.06em;
}
.summary-tax-note {
  font-size: 0.66rem;
  text-align: right;
  color: var(--ink-300);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-top: -2px;
  font-weight: 500;
}

/* Summary visual — palette swatches + addon chips. Lives between
   the cart head and the line items. Reads as "here's what you're
   building" without the illustration risk of the old SVG mockup. */
.summary-visual {
  margin: 14px 0 4px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(251, 244, 239, 0.6);
  border-radius: 8px;
}
.summary-visual[hidden] { display: none; }
.summary-visual .sv-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.78rem;
}
.summary-visual .sv-label {
  color: var(--ink-500);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.66rem;
  flex: 0 0 50px;
}
.summary-visual .sv-dots {
  display: flex;
  gap: 4px;
}
.summary-visual .sv-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(31, 26, 23, 0.12);
  display: inline-block;
}
.summary-visual .sv-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.summary-visual .sv-chip {
  font-size: 0.7rem;
  padding: 2px 7px;
  background: #fff;
  border: 1px solid rgba(31, 26, 23, 0.10);
  border-radius: 999px;
  color: var(--ink-700);
  white-space: nowrap;
}
.summary-visual .sv-chip-more {
  background: transparent;
  color: var(--ink-500);
  font-style: italic;
}

/* Trust strip — compact reassurance row right under the pay button.
   Steadies wavering buyers at the moment of decision. Each ✓ is brand-rose
   and the rows are subtle enough not to compete with the CTA. */
.summary-trust {
  list-style: none;
  margin: 18px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.summary-trust li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: var(--ink-700);
}
.summary-trust .st-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--rose-100, #fcebee);
  color: var(--rose-700, #A95C6B);
  font-size: 0.7rem;
  font-weight: 700;
  flex: 0 0 16px;
}

.summary-actions { margin-top: 24px; }
.summary-note {
  font-size: 0.78rem;
  color: var(--ink-500);
  text-align: center;
  margin-top: 12px;
  line-height: 1.45;
}

/* ============================================================
   PRODUCT PAGE LAYOUT
   ============================================================ */
.product-layout {
  max-width: 1400px;
  margin: 0 auto;
  padding: 64px 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
}
/* Product hero photo — same recipe as the bundle cards: flat colour
   field, cutout standing bottom-anchored. (The old radial blush halo
   was the device the makeover removed everywhere else; these pages —
   where a single product IS the hero — were the last to keep it.) */
.product-photo {
  position: relative;
  background: var(--field-blush);
  border: 1px solid var(--line-on-field);
  border-radius: var(--r-card);
  overflow: hidden;
  aspect-ratio: 4/5;
}
.product-photo img {
  position: absolute;
  bottom: 4%;
  left: 50%;
  transform: translateX(-50%);
  height: 92%;
  width: auto;
  max-width: 84%;
  object-fit: contain;
  object-position: bottom center;
  filter: var(--cutout-shadow);
}
.product-info .occ {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rose-700); /* AA contrast — see .eyebrow note */
  font-weight: 500;
  margin-bottom: 16px;
}
.product-info h1 {
  font-size: clamp(2rem, 4vw, 3.2rem);
  margin-bottom: 16px;
}
.product-info .blurb {
  font-size: 1.08rem;
  color: var(--ink-700);
  line-height: 1.6;
  margin-bottom: 32px;
  max-width: 50ch;
}
.product-from {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  padding: 14px 20px;
  background: var(--blush-100);
  border-radius: 8px;
  margin-bottom: 32px;
}
.product-from .lbl {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rose-700);
  font-weight: 500;
}
.product-from .pp {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.8rem;
  color: var(--rose-700);
  font-weight: 500;
  line-height: 1;
}
.product-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 28px; }

@media (max-width: 900px) {
  .product-layout { grid-template-columns: 1fr; gap: 36px; padding: 36px 20px; }
}

/* "Often paired" upsell strip */
.paired-strip {
  background: var(--cream-2);
  padding: 80px 28px;
}
.paired-grid {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.paired-card {
  display: block;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, border-color .3s ease;
}
.paired-card:hover {
  transform: translateY(-4px);
  border-color: var(--rose-400);
  box-shadow: 0 18px 40px -22px rgba(31, 26, 23, 0.16);
}
.paired-card .ph {
  aspect-ratio: 1/1;
  background: var(--field-cream);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.paired-card .ph img {
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: bottom center;
  padding: 8% 12% 0;
  filter: var(--cutout-shadow-sm);
  transition: transform .5s ease;
}
.paired-card:hover .ph img { transform: translateY(-4px) scale(1.02); }
.paired-card .meta { padding: 16px 18px 18px; }
.paired-card .occ {
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rose-700); /* AA contrast — see .eyebrow note */
  margin-bottom: 4px;
  font-weight: 500;
}
.paired-card .ttl {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem;
  font-weight: 500;
  margin: 0;
  line-height: 1.2;
}

@media (max-width: 900px) {
  .paired-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   ABOUT PAGE — story beside the framed brand image, plus the
   full-width real-photo banner.
   ============================================================ */
.about-story {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 56px;
  align-items: center;
  max-width: 1100px;
}
.about-story-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.25rem;
  line-height: 1.65;
  color: var(--ink-700);
}
.about-story-img img {
  width: 100%;
  height: auto;
  border-radius: var(--r-card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
}
.about-banner {
  width: 100%;
  aspect-ratio: var(--ar-banner);
  object-fit: cover;
  border-radius: var(--r-card);
  border: 1px solid var(--line);
}
@media (max-width: 860px) {
  .about-story { grid-template-columns: 1fr; gap: 32px; }
  .about-banner { aspect-ratio: 4 / 3; }
}

/* ============================================================
   CORPORATE — 3-step brief/build/deliver row (reuses .step-num).
   ============================================================ */
.corp-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 36px 0;
}
.corp-step {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.corp-step h4 { margin: 4px 0 6px; }
.corp-step p { margin: 0; font-size: 0.92rem; color: var(--ink-500); line-height: 1.5; }
@media (max-width: 800px) {
  .corp-steps { grid-template-columns: 1fr; gap: 20px; }
}

/* ============================================================
   PROMISE BAND (homepage) — full-bleed blush field, text left,
   love-you cutout anchored to (and cropped by) the right edge.
   ============================================================ */
.promise-band {
  position: relative;
  background: var(--field-blush);
  border-top: 1px solid var(--line-on-field);
  border-bottom: 1px solid var(--line-on-field);
  overflow: hidden;
  padding: 110px 28px;
}
.promise-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding-right: clamp(0px, 32vw, 460px); /* clear the cutout */
}
.promise-inner .lede { color: var(--ink-700); }
.promise-cutout {
  position: absolute;
  right: -56px;
  bottom: 0;
  height: 92%;
  width: auto;
  object-fit: contain;
  object-position: bottom right;
  filter: var(--cutout-shadow);
  pointer-events: none;
}
@media (max-width: 800px) {
  .promise-band { padding: 72px 20px 240px; }
  .promise-inner { padding-right: 0; }
  .promise-cutout { height: 220px; right: -24px; }
}

/* ============================================================
   PRE-FOOTER CTA BAND — rendered by chrome.js above the footer so
   every page gets a consistent closing beat before the dark block.
   ============================================================ */
.pre-footer {
  margin-top: 60px;
  border-top: 1px solid var(--line);
  background: var(--cream);
  padding: 88px 28px;
  text-align: center;
}
.pre-footer-inner { max-width: 720px; margin: 0 auto; }
.pre-footer h2 {
  font-size: var(--fs-h1);
  margin: 0 0 28px;
}
@media (max-width: 720px) {
  .pre-footer { padding: 64px 20px; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--ink-900);
  color: var(--cream);
  padding: 80px 28px 32px;
  margin-top: 0; /* .pre-footer owns the gap above */
}
.footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  /* 6 columns: brand wider than the 5 link columns (Shop, Occasions,
     Help, Policies, Contact). */
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr 1.1fr;
  gap: 32px;
}
.footer h6 {
  font-family: 'Jost', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--blush-300);
  margin: 0 0 18px;
  font-weight: 500;
}
.footer-stamp {
  width: 110px;
  height: auto;
  margin-bottom: 18px;
  display: block;
  /* Tint the dark stamp to a soft cream against the dark footer */
  filter: brightness(0) invert(0.96) sepia(0.18) saturate(0.55) hue-rotate(330deg);
  opacity: 0.92;
}
.footer-brand .wm {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.6rem;
  margin-bottom: 14px;
  color: var(--cream);
}
.footer-brand p {
  font-size: 0.92rem;
  color: var(--sand-300);
  line-height: 1.6;
  max-width: 36ch;
}
.footer-links { display: flex; flex-direction: column; gap: 12px; }
.footer-links a {
  color: var(--sand-200);
  text-decoration: none;
  font-size: 0.92rem;
  transition: color .2s ease;
}
.footer-links a:hover { color: var(--blush-300); }

/* Persistent mobile conversion bar. It keeps ordering and human help in
   thumb reach on content/SEO pages, but yields to the builder's own price bar. */
.site-mobile-order { display: none; }
@media (max-width: 768px) {
  .site-mobile-order {
    position: fixed;
    z-index: 48;
    left: 10px;
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border: 1px solid rgba(255,255,255,.32);
    border-radius: 999px;
    background: rgba(76, 37, 45, .97);
    box-shadow: 0 10px 32px rgba(31,26,23,.25);
    font-family: 'Jost', sans-serif;
  }
  .site-mobile-order a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 10px 14px;
    text-decoration: none;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .02em;
  }
  .site-mobile-order__call { color: var(--cream); }
  .site-mobile-order__shop { background: var(--cream); color: var(--rose-900); gap: 6px; }
  body:not(.byo-page) { padding-bottom: calc(82px + env(safe-area-inset-bottom, 0px)); }
  body.byo-page .site-mobile-order { display: none; }
}

/* Location landing pages share a compact, editorial service-area layout. */
.location-proof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0 auto;
  max-width: 1180px;
  background: var(--line);
  border: 1px solid var(--line);
}
.location-proof > div { background: var(--cream); padding: 28px; }
.location-proof h3 { margin: 0 0 8px; font-size: 1.2rem; }
.location-proof p { margin: 0; color: var(--ink-500); }
.location-copy { max-width: 780px; }
.location-copy h2 { margin-top: 38px; }
@media (max-width: 720px) {
  .location-proof { grid-template-columns: 1fr; }
  .location-proof > div { padding: 22px 20px; }
}
.footer-contact a { color: var(--sand-200); text-decoration: none; }
.footer-contact a:hover { color: var(--blush-300); }
.footer-contact div { font-size: 0.92rem; margin-bottom: 8px; line-height: 1.5; }
.footer-payments {
  max-width: 1280px;
  margin: 56px auto 0;
  padding: 24px 0 4px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
}
.footer-payments-label {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blush-300);
  font-weight: 600;
}
.footer-payments-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
/* Temple & Webster-style trust strip: clean horizontal row, no prominent
   tile chrome. Logos with transparent backgrounds get a minimal white card
   for contrast on the dark footer; self-contained logos (Afterpay's mint
   lockup) sit flush via the --bare modifier. Uniform 38×24 outer rect
   matches the credit-card-aspect ratio. */
.pay-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 60px;
  height: 38px;
  padding: 0;
  background: #fff;
  border-radius: 4px;
  box-sizing: border-box;
  overflow: hidden;
}
.pay-badge img {
  max-width: 86%;
  max-height: 70%;
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;
}
/* Self-contained logos (mint Afterpay lockup) — no white card underneath. */
.pay-badge.pay-badge--bare {
  padding: 0;
  background: transparent;
}
.pay-badge.pay-badge--bare img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  border-radius: 4px;
}
/* Klarna's pill is wider than Afterpay's at the same height. Override width
   so the pink lockup renders at its native 2.38:1 aspect instead of being
   squashed into the standard 60×38 container. */
.pay-badge.pay-badge--wide {
  width: 90px;
}
/* Amex's official acceptance mark is a square logo (146×146) that's
   already a self-contained card with the blue background — there's no
   need for a white pill underneath. Combined with .pay-badge--bare,
   .pay-badge--square shrinks the pill width to match its height (38px
   square) so the logo fills the whole badge surface at native aspect.
   Sits next to wide Visa/Mastercard pills as a square chip without the
   awkward extra-wide white-card-with-tiny-logo-inside look. */
.pay-badge.pay-badge--square {
  width: 38px;
}
.pay-badge.pay-badge--bare.pay-badge--square img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 4px;
}
.footer-bottom {
  max-width: 1280px;
  margin: 20px auto 0;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
  color: var(--taupe-500);
  flex-wrap: wrap;
  gap: 16px;
}

/* ============================================================
   OUT-OF-STOCK OVERLAY
   Applied to .finish-pick, .addon-pick, and .bundle-card tiles when
   their underlying inventory SKU is at on_hand <= 0 (per
   /get-stock-levels). The tile is dimmed, click is blocked, and an
   "Out of stock" diagonal banner sits across it.
   ============================================================ */
.finish-pick.is-out-of-stock,
.addon-pick.is-out-of-stock,
.bundle-card.is-out-of-stock {
  position: relative;
  opacity: 0.45;
  filter: grayscale(0.7);
  pointer-events: none;
  user-select: none;
  cursor: not-allowed;
}
.finish-pick.is-out-of-stock::after,
.addon-pick.is-out-of-stock::after,
.bundle-card.is-out-of-stock::after {
  content: 'Out of stock';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(31, 26, 23, 0.92);
  color: #FBF4EF;
  font-family: 'Jost', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: 999px;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 6px 16px -6px rgba(31, 26, 23, 0.4);
  z-index: 5;
}
/* On bundle cards (bigger surface), make the banner larger and add a
   subtle "back soon" subline so customers know it's temporary. */
.bundle-card.is-out-of-stock::after {
  content: 'Out of stock — back soon';
  font-size: 0.78rem;
  padding: 10px 20px;
}
/* Allow the OOS tiles to still be visible (don't hide them) so customers
   know the option exists; prevents the catalogue from looking inconsistent
   day-to-day when items go in/out of stock. */

/* ============================================================
   AFTERPAY "PAY IN 4" WIDGET
   Shown next to the running total in the cart drawer and on the
   BYO order summary. Drives conversion by surfacing the
   instalment option before the customer commits to checkout.
   ============================================================ */
/* Pay-method widget spacing — Afterpay above Klarna above the Place
   Order button, all separated by an equal gap (12px) so neither pill
   crowds the other. summary-actions overrides its default top margin
   below to keep the spacing matched. */
.afterpay-mount { display: block; margin: 14px 0 0; }
.afterpay-mount:empty { display: none; }
/* Pill shape + colour mirror `.btn.full`. Vertical padding is slightly
   tighter than the CTA so the widget sits closer to the pay button —
   informational notes shouldn't out-claim the action below them. */
.afterpay-widget {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  width: 100%;
  padding: 10px 18px;
  background: #B2FCE4;
  color: #1F1A17;
  border-radius: 22px;
  border: 1px solid #B2FCE4;
  font-family: 'Jost', sans-serif;
  font-size: 0.83rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-align: center;
  box-sizing: border-box;
}
.afterpay-widget .ap-text { color: #1F1A17; }
.afterpay-widget .ap-text strong { font-weight: 700; }
.afterpay-widget .ap-logo {
  height: 16px;
  width: auto;
  display: inline-block;
  vertical-align: middle;
}
.afterpay-widget .ap-info {
  color: #1F1A17;
  text-decoration: none;
  font-size: 0.95em;
  opacity: 0.65;
}
.afterpay-widget .ap-info:hover { opacity: 1; }
@media (max-width: 380px) {
  .afterpay-widget { font-size: 0.78rem; padding: 10px 14px; gap: 4px 8px; }
}

/* ---- Klarna widget ----
   Mirrors the Afterpay pill so both "Pay in 4" providers feel equally
   surfaced. Klarna's signature pink (#FFA8CD) per their brand guidelines. */
.klarna-mount { display: block; margin: 12px 0 0; }
.klarna-mount:empty { display: none; }
/* When Klarna renders, also tighten summary-actions to keep the gap
   from Klarna→button matching Afterpay→Klarna. */
.byo-summary .klarna-mount + .summary-actions,
.byo-summary .klarna-mount:not(:empty) ~ .summary-actions {
  margin-top: 12px;
}
.klarna-widget {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  width: 100%;
  padding: 10px 18px;
  background: #FFA8CD;
  color: #0B051D;
  border-radius: 22px;
  border: 1px solid #FFA8CD;
  font-family: 'Jost', sans-serif;
  font-size: 0.83rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-align: center;
  box-sizing: border-box;
}
.klarna-widget .kl-text { color: #0B051D; }
.klarna-widget .kl-text strong { font-weight: 700; }
.klarna-widget .kl-logo {
  height: 14px;
  width: auto;
  display: inline-block;
  vertical-align: middle;
}
.klarna-widget .kl-info {
  color: #0B051D;
  text-decoration: none;
  font-size: 0.95em;
  opacity: 0.65;
}
.klarna-widget .kl-info:hover { opacity: 1; }
@media (max-width: 380px) {
  .klarna-widget { font-size: 0.78rem; padding: 10px 14px; gap: 4px 8px; }
}
.footer-bottom .made {
  color: var(--blush-400);
  font-family: 'Dancing Script', cursive;
  font-weight: 600;
  font-size: 1.15em;
  letter-spacing: 0.02em;
}

@media (max-width: 800px) {
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 36px 24px; }
  .footer-brand { grid-column: 1 / -1; }
}

/* ============================================================
   SUB-HERO STAT STRIP (used on Corporate page)
   ============================================================ */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding: 48px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stat .num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 3rem;
  font-weight: 500;
  line-height: 1;
  color: var(--rose-700);
  margin-bottom: 8px;
}
.stat .num em { color: var(--rose-700); font-style: normal; }
.stat .lbl {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-500);
  font-weight: 500;
}
@media (max-width: 700px) {
  .stat-strip { grid-template-columns: repeat(2, 1fr); gap: 28px; padding: 32px 0; }
}

/* ============================================================
   FAQ accordion
   ============================================================ */
.faq {
  max-width: 820px;
  margin: 0 auto;
}
.faq-item {
  border-bottom: 1px solid var(--line);
}
.faq-q {
  width: 100%;
  background: transparent;
  border: 0;
  padding: 26px 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.4rem;
  font-weight: 500;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  color: var(--ink-900);
  cursor: pointer;
}
.faq-q .icn {
  width: 28px; height: 28px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: transform .3s ease, background .25s ease, color .25s ease, border-color .25s ease;
  color: var(--ink-700);
}
.faq-item.open .faq-q .icn {
  transform: rotate(45deg);
  background: var(--rose-600);
  color: white;
  border-color: var(--rose-600);
}
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s cubic-bezier(.2,.8,.2,1);
}
.faq-item.open .faq-a { max-height: 500px; }
.faq-a-inner {
  padding: 0 0 24px;
  font-size: 1rem;
  color: var(--ink-700);
  line-height: 1.65;
  max-width: 64ch;
}

/* ============================================================
   CART DRAWER (rendered by chrome.js)
   ============================================================ */
.cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(31, 26, 23, 0.4);
  z-index: 90;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.cart-overlay.open { opacity: 1; pointer-events: auto; }
.cart-drawer {
  position: fixed;
  top: 0; right: 0;
  width: min(420px, 100vw);
  height: 100vh;
  background: var(--cream);
  z-index: 100;
  transform: translateX(100%);
  /* visibility flips AFTER the slide-out finishes (0s delay matched to the
     transform duration) so the closed drawer is truly hidden — pairs with
     the `inert` attribute chrome.js toggles to keep its links out of the
     tab order while off-screen. */
  visibility: hidden;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), visibility 0s .35s;
  display: flex;
  flex-direction: column;
  box-shadow: -20px 0 60px -10px rgba(0,0,0,0.18);
}
.cart-drawer.open {
  transform: translateX(0);
  visibility: visible;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), visibility 0s 0s;
}
.cart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--line);
}
.cart-head h4 {
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem;
  font-weight: 500;
}
.cart-close {
  background: transparent;
  border: 0;
  color: var(--ink-700);
  cursor: pointer;
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.cart-close:hover { background: var(--blush-100); color: var(--rose-700); }
.cart-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
}
.cart-empty {
  text-align: center;
  padding: 64px 20px;
  color: var(--ink-500);
}
.cart-empty .ic {
  width: 60px; height: 60px;
  margin: 0 auto 18px;
  background: var(--blush-100);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--rose-700);
}
.cart-empty p { font-size: 0.95rem; margin: 0 0 18px; }
.cart-line {
  display: flex;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.cart-line .meta { flex: 1; }
.cart-line h5 { margin: 0 0 4px; font-family: 'Cormorant Garamond', serif; font-size: 1.05rem; font-weight: 500; }
.cart-line .desc { font-size: 0.82rem; color: var(--ink-500); margin: 0; line-height: 1.4; }
.cart-line .pr { font-weight: 600; color: var(--rose-700); margin-top: 6px; font-size: 0.95rem; }
.cart-line .rm {
  background: transparent;
  border: 0;
  color: var(--ink-500);
  cursor: pointer;
  font-size: 0.78rem;
  padding: 0;
  margin-top: 6px;
}
.cart-line .rm:hover { color: var(--rose-600); }
.cart-foot {
  border-top: 1px solid var(--line);
  padding: 20px 24px 24px;
  background: var(--paper);
}
.cart-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 16px;
}
.cart-total .label {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.cart-total .total {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.8rem;
  font-weight: 500;
  color: var(--rose-700);
}

/* ============================================================
   UTILITIES & ENTRANCE ANIMATIONS
   ============================================================ */
.text-center { text-align: center; }
.text-muted { color: var(--ink-500); }
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: 16px; }
.mt-4 { margin-top: 32px; }
.mt-6 { margin-top: 48px; }

@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;
  }
}

/* (section-flourish ribbon removed in the 2026-06 makeover — the cutout
   breaking its colour field is the site's one signature device.) */

/* Fade-up reveal on intersect */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1);
}
[data-reveal].in {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   COMING SOON STRIP
   ============================================================ */
.coming-soon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 32px;
}
.coming-soon-card {
  background: var(--cream-2);
  border: 1px solid rgba(31, 26, 23, 0.06);
  border-radius: var(--r-card);
  padding: 22px 24px;
  position: relative;
  transition: transform .3s ease, border-color .3s ease, background .3s ease;
  display: block;
  text-decoration: none;
  color: inherit;
}
.coming-soon-card,
.coming-soon-card:hover,
.coming-soon-card:focus,
.coming-soon-card:active,
.coming-soon-card * {
  text-decoration: none;
}
.coming-soon-card::before {
  content: 'Soon';
  position: absolute;
  top: 14px;
  right: 16px;
  font-family: 'Jost', sans-serif;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rose-700);
  opacity: 0.6;
}
.coming-soon-card:hover {
  transform: translateY(-2px);
  border-color: rgba(169, 92, 107, 0.22);
  background: var(--cream);
}
.coming-soon-card .cs-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--ink-900);
  line-height: 1.3;
  margin-bottom: 6px;
  padding-right: 48px; /* keep clear of "Soon" tag */
}
.coming-soon-card .cs-note {
  font-family: 'Jost', sans-serif;
  font-size: 0.88rem;
  color: var(--ink-500);
  line-height: 1.4;
}
.coming-soon-card .cs-cta {
  font-family: 'Jost', sans-serif;
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-top: 14px;
  opacity: 0;
  transition: opacity .25s ease, color .25s ease;
}
.coming-soon-card:hover .cs-cta {
  opacity: 0.85;
  color: var(--rose-700);
}

/* ============================================================
   MOBILE STICKY PRICE BAR (BYO)
   Shows the running total at the bottom of the viewport on mobile
   so customers see the price update as they pick options without
   scrolling to find the summary panel.
   ============================================================ */
.byo-mobile-bar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  /* Deep brand rose (was near-black ink) — stronger thumb-zone
     affordance and warmer against the cream pages. */
  background: var(--rose-900);
  color: var(--cream);
  padding: 14px 18px;
  /* iOS-safe area: extend padding into the home-indicator zone on iPhones
     so the buttons aren't covered by the bottom system bar. Falls back to
     plain padding-bottom on browsers without env() support. */
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -8px 24px rgba(31, 26, 23, 0.18);
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-family: 'Jost', sans-serif;
  /* Hidden by default — slides up when user scrolls past the first step.
     The .is-visible class is toggled by byo-engine.js on scroll, so the
     bar doesn't take up space at the top of the page where the customer
     hasn't yet started building. transform-only animation = compositor
     friendly (no layout thrash). */
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  /* will-change forces iOS Safari to composite the bar on its own layer.
     Without this, position: fixed gets "ride-along" behaviour during
     momentum scrolling on iOS — the bar jiggles up and down with the
     content instead of locking to the viewport. */
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.byo-mobile-bar.is-visible {
  transform: translateY(0);
  pointer-events: auto;
}
.byo-mobile-bar .mb-label {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-bottom: 2px;
}
/* Matches the desktop .summary-total .total — same Jost sans, same
   weight, same letter-spacing, same tabular nums. Colour shifts to a
   lighter rose so it reads on the dark mobile-bar background; otherwise
   visually identical to what desktop customers see on the right rail. */
.byo-mobile-bar .mb-amount {
  font-family: 'Jost', sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--cream);
}
.byo-mobile-bar .mb-jump {
  background: var(--cream);
  color: var(--rose-900);
  padding: 11px 18px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: none;
  white-space: nowrap;
  border: none;
  cursor: pointer;
}
@media (max-width: 1000px) {
  .byo-mobile-bar { display: flex; }
  /* Pad the body when the bar is visible so the sticky bottom doesn't
     cover the last bit of content. Removed when the bar is hidden so
     the customer at the top of the page doesn't see 92px of dead space
     under the trust strip. Padding restored as soon as the bar slides up. */
  body.byo-page:has(.byo-mobile-bar.is-visible) {
    padding-bottom: 92px;
  }
}

/* ============================================================
   FULFILMENT TOGGLE (BYO step 5)
   Two big tappable cards (Delivery / Pickup).
   ============================================================ */
.field-label-block {
  display: block;
  font-family: 'Jost', sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-700);
  margin-bottom: 14px;
}
.fulfil-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.fulfil-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 22px 22px 20px;
  background: var(--cream);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
  text-align: left;
  font-family: 'Jost', sans-serif;
  width: 100%;
}
.fulfil-card:hover { border-color: var(--rose-300, rgba(169, 92, 107, 0.32)); transform: translateY(-1px); }
.fulfil-card.is-selected {
  border-color: var(--rose-700);
  background: var(--blush-100, #FAEEF1);
}
.fulfil-card .fc-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--cream-2);
  color: var(--rose-700);
  margin-bottom: 8px;
}
.fulfil-card.is-selected .fc-icon { background: var(--cream); }
.fulfil-card .fc-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--ink-900);
  line-height: 1.1;
}
.fulfil-card .fc-sub {
  font-size: 0.85rem;
  color: var(--ink-500);
  letter-spacing: 0.01em;
}

/* ----- Delivery zone radios ----- */
.zone-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.zone-option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}
.zone-option:hover { border-color: var(--rose-300, rgba(169, 92, 107, 0.32)); }
.zone-option input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: var(--rose-700);
  flex-shrink: 0;
  margin: 0;
}
.zone-option:has(input:checked) {
  border-color: var(--rose-700);
  background: var(--blush-100, #FAEEF1);
}
.zone-option .zo-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.zone-option .zo-title {
  font-family: 'Jost', sans-serif;
  font-size: 0.98rem;
  font-weight: 500;
  color: var(--ink-900);
  line-height: 1.2;
}
.zone-option .zo-sub {
  font-size: 0.82rem;
  color: var(--ink-500);
  margin-top: 2px;
}
.zone-option .zo-price {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--rose-700);
  white-space: nowrap;
}

/* ----- Pickup info panel ----- */
.pickup-info {
  background: var(--cream-2);
  border-left: 3px solid var(--rose-700);
  padding: 16px 22px;
  border-radius: 0 10px 10px 0;
  font-family: 'Jost', sans-serif;
  color: var(--ink-700);
  line-height: 1.55;
  font-size: 0.95rem;
  margin-top: 16px;
}
.pickup-info strong { color: var(--ink-900); }

@media (max-width: 600px) {
  .fulfil-toggle { grid-template-columns: 1fr; }
}

/* ============================================================
   FINISH PICKER THUMBNAIL
   Adds a small example photo to each finish card. Photo lives in
   product-data.js under each finish's `thumbnail` key — swap to
   finish-specific photos when Jade has them.
   ============================================================ */
.finish-pick .finish-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--cream-2);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  box-sizing: border-box;
}
.finish-pick .finish-thumb img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  transition: transform .35s ease;
}
.finish-pick:hover .finish-thumb img {
  transform: scale(1.03);
}
@media (max-width: 700px) {
  .finish-pick .finish-thumb { aspect-ratio: 16 / 9; }
}

/* ============================================================
   PALETTE EXAMPLE CHIPS (BYO custom palette)
   Tappable starter examples that fill the description textarea.
   ============================================================ */
.palette-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.palette-chip {
  font-family: 'Jost', sans-serif;
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--ink-700);
  background: var(--cream-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
  transition: all .2s ease;
  white-space: nowrap;
}
.palette-chip::before {
  content: '+ ';
  color: var(--rose-700);
  font-weight: 500;
}
.palette-chip:hover {
  background: var(--cream);
  border-color: var(--rose-700);
  color: var(--ink-900);
}
.palette-chip:focus-visible {
  outline: 2px solid var(--rose-700);
  outline-offset: 2px;
}

/* ============================================================
   BYO INLINE ERROR BOX
   Shown above the submit button when validation fails or Stripe
   can't connect. Clears as soon as the customer fixes the issue.
   ============================================================ */
.summary-error {
  background: #FFF1F1;
  border: 1px solid #E5BDBD;
  border-left: 3px solid #B74E4E;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 14px;
  font-family: 'Jost', sans-serif;
  font-size: 0.9rem;
  line-height: 1.4;
  color: #6E2A2A;
}
.summary-error::before {
  content: '⚠';
  margin-right: 8px;
  color: #B74E4E;
  font-weight: 600;
}

/* ============================================================
   BYO STEP NAV (vertical, fixed-left)
   Tiny floating rail on the left side of the viewport showing
   numbered dots for each step. Tappable to jump. Active step
   highlighted as customer scrolls. Hidden on mobile since the
   bottom price bar already provides wayfinding there.
   ============================================================ */
.byo-step-nav {
  position: fixed;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 10px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: 0 6px 24px rgba(31, 26, 23, 0.06);
}
.byo-step-nav a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px;
  border-radius: 999px;
  color: var(--ink-500);
  text-decoration: none;
  font-family: 'Jost', sans-serif;
  transition: color .2s ease;
}
.byo-step-nav a span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--cream-2);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--ink-700);
  flex-shrink: 0;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.byo-step-nav a em {
  font-style: normal;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.7rem;
  font-weight: 500;
  /* Hidden by default; revealed on hover so the rail stays compact */
  position: absolute;
  left: 100%;
  margin-left: 8px;
  padding: 6px 12px;
  background: var(--ink-900);
  color: var(--cream);
  border-radius: 999px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-4px);
  transition: opacity .2s ease, transform .2s ease;
}
.byo-step-nav a::after {
  /* Tooltip arrow */
  content: '';
  position: absolute;
  left: 100%;
  margin-left: 2px;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 5px solid var(--ink-900);
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
}
.byo-step-nav a:hover em,
.byo-step-nav a:hover::after {
  opacity: 1;
  transform: translateX(0);
}
.byo-step-nav a:hover span {
  background: var(--cream-2);
  color: var(--ink-900);
}
.byo-step-nav a.is-current span {
  background: var(--rose-700);
  color: var(--cream);
  transform: scale(1.08);
}

/* Show the rail only when there's genuine free margin for it: the
   builder content is 1280px wide + 28px gutters, and the rail needs
   ~80px of clear space at left:24. Below 1460px it overlapped the
   finish picker — the bottom price bar handles wayfinding instead. */
@media (max-width: 1460px) {
  .byo-step-nav { display: none; }
}

/* ============================================================
   SOLO-CUSTOMER CALLOUT (corporate page)
   Friendly redirect for visitors who landed here but only want
   one balloon — points them at the BYO builder.
   ============================================================ */
.solo-callout {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 24px;
  background: var(--cream-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--rose-700);
  border-radius: 12px;
  font-family: 'Jost', sans-serif;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ink-700);
}
.solo-callout .sc-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--cream);
  color: var(--rose-700);
  border-radius: 50%;
}
.solo-callout .sc-text { flex: 1; }
.solo-callout .sc-text strong { color: var(--ink-900); }
.solo-callout .btn { flex-shrink: 0; }
@media (max-width: 700px) {
  .solo-callout {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  .solo-callout .sc-icon { margin: 0 auto; }
}

/* ============================================================
   FLOATING BALLOONS (BYO page entrance)
   Subtle decorative balloons that drift up the screen edges when
   the BYO page loads. Plays once, fades out, doesn't interfere
   with content. Uses position: fixed so they sit above content
   but pointer-events: none so they're never clickable.
   ============================================================ */
.byo-floaters {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1; /* below the nav (z 50) and step rail (z 10) but above content */
}
.byo-floater {
  position: absolute;
  bottom: -80px;
  width: 36px;
  height: 46px;
  opacity: 0;
  --scale: 1;
  animation: float-up linear forwards;
  /* Each floater has different left, delay, duration, and --scale set inline */
}
.byo-floater svg {
  width: 100%;
  height: 100%;
  display: block;
  /* Soft drop shadow so they read against any background */
  filter: drop-shadow(0 4px 8px rgba(31, 26, 23, 0.08));
}

@keyframes float-up {
  0% {
    transform: translateY(0) translateX(0) rotate(0deg) scale(var(--scale));
    opacity: 0;
  }
  10% { opacity: 0.85; }
  /* Subtle horizontal sway as they drift up — looks like real helium */
  25% { transform: translateY(-25vh) translateX(12px) rotate(3deg) scale(var(--scale)); }
  50% { transform: translateY(-50vh) translateX(-8px) rotate(-2deg) scale(var(--scale)); }
  75% { transform: translateY(-75vh) translateX(10px) rotate(2deg) scale(var(--scale)); }
  90% { opacity: 0.85; }
  100% {
    transform: translateY(-110vh) translateX(0) rotate(0deg) scale(var(--scale));
    opacity: 0;
  }
}

/* Respect users who prefer reduced motion — skip the animation entirely */
@media (prefers-reduced-motion: reduce) {
  .byo-floaters { display: none; }
}
/* Hide floaters on small screens — animated decoration competes for
   attention with the form on mobile, and they can feel chaotic in a
   narrow viewport. Desktop keeps them as a brand flourish. */
@media (max-width: 720px) {
  .byo-floaters { display: none; }
}

/* ============================================================
   BYO TESTIMONIALS — three short quotes near the close to steady
   wavering buyers without dominating the page.
   ============================================================ */
.byo-testimonials {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 18px;
}
.byo-testimonial {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 22px 22px 18px;
  margin: 0;
}
.byo-testimonial blockquote {
  margin: 0 0 12px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.05rem;
  line-height: 1.45;
  color: var(--ink-900);
  quotes: none;
}
.byo-testimonial figcaption {
  font-size: 0.78rem;
  color: var(--ink-500);
  letter-spacing: 0.02em;
}

/* ============================================================
   STYLED PHOTO DROPZONE
   Replaces the raw <input type=file> for reference photo uploads.
   Reads as a brand-coherent CTA, supports drag-and-drop, and shows
   thumbnails for picked files so customers can see what's attached.
   ============================================================ */
.photo-dropzone {
  position: relative;
  border: 1.5px dashed var(--line-strong, rgba(31,26,23,0.18));
  border-radius: 12px;
  background: rgba(251, 244, 239, 0.5);
  padding: 22px 18px;
  transition: border-color .2s ease, background .2s ease;
}
.photo-dropzone:hover,
.photo-dropzone.is-drag {
  border-color: var(--rose-600, #A95C6B);
  background: rgba(252, 235, 238, 0.6);
}
.photo-dropzone input[type=file] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.photo-dropzone-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  pointer-events: none; /* let the input above receive the click */
  text-align: center;
  color: var(--ink-700);
}
.photo-dropzone .pdz-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  color: var(--rose-700, #A95C6B);
  border: 1px solid rgba(31,26,23,0.06);
  margin-bottom: 4px;
}
.photo-dropzone .pdz-prompt {
  font-size: 0.92rem;
}
.photo-dropzone .pdz-sub {
  font-size: 0.78rem;
  color: var(--ink-500);
  max-width: 360px;
}
.photo-thumbs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-top: 14px;
}
.photo-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid rgba(31,26,23,0.08);
  background: #fff;
}

/* ============================================================
   FILE UPLOAD COUNTER
   Live "X of 5 selected" feedback under file inputs so customers
   know immediately if they've gone over the limit.
   ============================================================ */
.upload-counter {
  margin-top: 8px;
  font-family: 'Jost', sans-serif;
  font-size: 0.82rem;
  color: var(--ink-500);
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.upload-counter::before {
  content: '✓';
  display: none;
  font-weight: 600;
}
.upload-counter.upload-counter--ok {
  color: #2F7B5C; /* warm green */
}
.upload-counter.upload-counter--ok::before {
  display: inline;
}
.upload-counter.upload-counter--over {
  color: #B74E4E; /* matching the error box red */
  font-weight: 500;
}
.upload-counter.upload-counter--over::before {
  content: '⚠';
  display: inline;
}

/* ============================================================
   CARE GUIDE — INLINE BUILD LINKS
   Subtle "Build one with X →" links inside the gift items list.
   Underplayed by default, brighter on hover. Cross-sells without shouting.
   ============================================================ */
.care-build-link {
  display: inline-block;
  margin-left: 4px;
  font-family: 'Jost', sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--rose-700);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, color .2s ease;
  white-space: nowrap;
}
.care-build-link:hover {
  border-bottom-color: var(--rose-700);
  color: var(--ink-900);
}
.care-gifts-list li {
  margin-bottom: 14px;
}

/* (ORDER SUCCESS block removed 2026-06-12 — order-success.html carries its
   own complete inline styles for .order-summary/.next-steps/.care-preview,
   which won the cascade anyway; two competing designs for one class is how
   drift happens. The inline version is the live design.) */

/* ============================================================
   ANCHOR SCROLL OFFSET
   When linking directly to a section (e.g. /care.html#troubleshooting),
   add space so the sticky site nav doesn't cover the heading.
   ============================================================ */
[id]:where(#first-hour, #lifespan, #troubleshooting, #gifts-inside, #how-to-open, #end-of-life) {
  scroll-margin-top: 90px;
}

/* ============================================================
   GALLERY EMPTY STATE
   Friendly fallback when the gallery has no items, or a filter
   returns no results.
   ============================================================ */
.gallery-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 72px 24px;
  color: var(--ink-500);
}
.gallery-empty .ge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  background: var(--cream-2);
  color: var(--rose-700);
  border-radius: 50%;
  margin-bottom: 18px;
}
.gallery-empty p {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.3rem;
  line-height: 1.5;
  max-width: 480px;
  margin: 0 auto;
  color: var(--ink-700);
}
.gallery-empty a:hover {
  text-decoration: underline;
}

/* ============================================================
   CARE GUIDE → BYO CTA (top)
   Subtle callout for visitors arriving via Google search.
   Styled as a quiet conversational line, not a button.
   ============================================================ */
.care-prelink {
  margin-top: 18px;
  font-family: 'Jost', sans-serif;
  font-size: 0.9rem;
  color: var(--ink-500);
}
.care-prelink em {
  font-style: italic;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.05rem;
  color: var(--ink-700);
}
.care-prelink a {
  color: var(--rose-700);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
  margin-left: 4px;
}
.care-prelink a:hover { border-bottom-color: var(--rose-700); }