/* Apex Balloons — luxury mobile shop · pink · maroon · white */
:root {
  --font-step-heading: 'Baloo Bhaijaan 2', var(--font-display, sans-serif);
  --pink: #f8e8ec;
  --pink-deep: #e8b4c4;
  --maroon: #7a1528;
  --maroon-dark: #5c0f1e;
  /* Brighter/richer brand burgundy for PRIMARY CTA BUTTON BACKGROUNDS only
     (from the brand colour reference: #880000 main, #620000 secondary/dark).
     Text-only maroon uses above are intentionally left unchanged.
     NOTE: keep these three in sync with the identical block in css/lux.css
     (body.apex-lux) — the two scopes do not cascade into each other. */
  --brand-burgundy: #880000;
  --brand-burgundy-dark: #620000;
  --brand-burgundy-chrome: radial-gradient(120% 88% at 50% 0%, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0.06) 42%, rgba(255, 255, 255, 0) 62%), linear-gradient(180deg, #9d1a1a 0%, #880000 48%, #660000 100%);
  --brand-burgundy-chrome-hover: radial-gradient(120% 88% at 50% 0%, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.1) 42%, rgba(255, 255, 255, 0) 62%), linear-gradient(180deg, #ad2222 0%, #940f0f 48%, #6f0000 100%);
  --white: #ffffff;
  --cream: #fffbfc;
  --text: #2a1a1e;
  --muted: #6b5560;
  --border: rgba(122, 21, 40, 0.14);
  --shadow: 0 12px 40px rgba(92, 15, 30, 0.1);
  --radius: 16px;
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body: "Outfit", system-ui, sans-serif;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --header-h: 3.75rem;
  --promo-bar-h: 2.85rem;
  --sticky-top-h: calc(var(--header-h) + var(--promo-bar-h));
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text);
  background: var(--cream);
}
img { max-width: 100%; height: auto; display: block; }
code { font-size: 0.8em; background: var(--pink); padding: 0.1em 0.35em; border-radius: 4px; }

.eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--maroon);
  margin: 0 0 0.35rem;
}
.lead { font-size: 1.02rem; color: var(--muted); margin: 0; }
.hint { font-size: 0.85rem; color: var(--muted); margin: 0 0 1rem; }

/* Header + promo — sticky together (shell added by site-chrome.js) */
.site-top-shell {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 251, 252, 0.97);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--border);
}
.site-top-shell .site-header {
  position: relative;
  top: auto;
  z-index: 1;
  border-bottom: none;
  box-shadow: none;
}
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 1rem;
  min-height: var(--header-h);
  background: rgba(255, 251, 252, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.logo-img { height: 2.9rem; width: auto; }
.logo-link { text-decoration: none; }
.header-nav { display: flex; align-items: center; gap: 0.5rem; }
.header-nav a {
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text);
}
a.cart-trigger {
  text-decoration: none;
  color: inherit;
}

/* Promo bar — Hi-Float + free delivery (sitewide, inside .site-top-shell) */
.promo-bar,
.hifloat-bar {
  padding: 0.45rem 0.85rem;
  min-height: var(--promo-bar-h);
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(90deg, rgba(122, 21, 40, 0.08), rgba(232, 180, 196, 0.35));
  border-top: 1px solid var(--border);
  text-align: center;
}
.site-top-shell .promo-bar,
.site-top-shell .hifloat-bar {
  border-top: 1px solid var(--border);
}
.promo-bar__text,
.hifloat-bar__text {
  margin: 0 auto;
  max-width: 42rem;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--text);
}
.promo-bar__text strong,
.hifloat-bar__text strong { color: var(--maroon); font-weight: 600; }
.promo-bar__sep {
  display: inline;
  margin: 0 0.25rem;
  opacity: 0.5;
}
@media (max-width: 480px) {
  .promo-bar__sep { display: none; }
  .promo-bar__text,
  .hifloat-bar__text {
    font-size: 0.76rem;
    line-height: 1.5;
  }
}

/* Promo marquee — a single slow-moving premium announcement line that now
   REPLACES the old two-chip promo text at ALL widths (previously mobile-only).
   The two-copy track (each copy ends with a trailing separator) makes
   translateX(-50%) land on a seam identical to every message boundary, so the
   loop is seamless. Structural rules live at base so the banner behaves the
   same on every breakpoint; only sizing differs per media query below. */
.promo-marquee {
  display: block;
  width: 100%;
  overflow: hidden;
  background: var(--pink, #f8e8ec);
  padding: 0.55rem 0;
}

/* The two-chip promo text is fully replaced by the marquee everywhere now. */
.promo-bar .promo-bar__text.hifloat-bar__text {
  display: none;
}

/* Let the promo bar host the full-bleed marquee (no centring side padding).
   The bar keeps its own min-height + align-items:center, so the marquee stays
   vertically centred within a comfortable announcement-bar height. */
.promo-bar.hifloat-bar,
.hifloat-bar.promo-bar {
  justify-content: flex-start;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

.promo-marquee__track {
  display: flex;
  width: max-content;
  /* Slower, premium throw on the wider desktop viewport. */
  animation: promo-marquee-scroll 44s linear infinite;
  will-change: transform;
}

.promo-marquee__text {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
  line-height: 1.25;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--brand-burgundy, #880000);
}

.promo-marquee__msg {
  white-space: nowrap;
}

/* The separator provides a noticeably wider gap on BOTH sides of the dot.
   Because a copy ends with one of these, the seam between the two copies
   carries the exact same spacing as every internal separator. */
.promo-marquee__sep {
  margin: 0 1.5rem;
  opacity: 0.55;
}

@keyframes promo-marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (max-width: 719px) {
  /* Shrink the promo bar so it hugs the marquee (removes the empty space
     above/below the banner). --sticky-top-h is a calc() referencing
     --promo-bar-h, so overriding it here automatically re-aligns anything
     stuck below the header/promo shell (e.g. .preview-strip). */
  :root {
    --promo-bar-h: 2rem;
  }

  .promo-marquee {
    /* Small internal padding so the text isn't cramped against the edges. */
    padding: 0.4rem 0;
  }

  .promo-marquee__track {
    animation-duration: 26s;
  }

  .promo-marquee__text {
    font-size: 0.8125rem;
    letter-spacing: normal;
  }

  .promo-marquee__sep {
    margin: 0 1.15rem;
  }
}

/* Respect reduced-motion at EVERY width: stop the animation and fall back to a
   single static (horizontally scrollable if it overflows) line instead. */
@media (prefers-reduced-motion: reduce) {
  .promo-marquee {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .promo-marquee__track {
    animation: none;
    width: auto;
  }

  .promo-marquee__text[aria-hidden="true"] {
    display: none;
  }
}

.hifloat-included-note {
  margin: 0 0 0.75rem;
  padding: 0.55rem 0.75rem;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--muted);
  background: var(--pink);
  border-radius: 10px;
  border: 1px solid var(--border);
}
.hifloat-included-note strong { color: var(--maroon); font-weight: 600; }
.hifloat-included-note--intro {
  margin-top: 0.35rem;
  margin-bottom: 0;
  font-size: 0.8rem;
  padding: 0.4rem 0.65rem;
}
.hifloat-included-note--compact {
  margin: 0 0 1rem;
  font-size: 0.8rem;
  padding: 0.45rem 0.65rem;
}
.order-row--included span:last-child {
  font-weight: 600;
  color: var(--maroon);
  font-size: 0.88rem;
}
.cart-trigger {
  font: inherit;
  font-family: "Poppins", var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.45rem 0.95rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--brand-burgundy);
  background: var(--brand-burgundy-chrome);
  cursor: pointer;
  color: var(--white);
  box-shadow: 0 3px 12px rgba(136, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.cart-trigger:hover { background: var(--brand-burgundy-chrome-hover); }
.cart-trigger:focus-visible {
  outline: 2px solid var(--brand-burgundy-dark);
  outline-offset: 2px;
}
.cart-trigger__count {
  display: inline-block;
  min-width: 1.25rem;
  margin-left: 0.2rem;
  font-weight: 700;
}
.header-shop-cta { flex-shrink: 0; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.75rem 1.35rem;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.12s, background 0.2s;
}
.btn:active { transform: scale(0.98); }
.btn-primary {
  background: var(--brand-burgundy);
  background: var(--brand-burgundy-chrome);
  color: var(--white);
  box-shadow: 0 4px 18px rgba(136, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.btn-primary:hover { background: var(--brand-burgundy-chrome-hover); }
.btn-primary:focus-visible {
  outline: 2px solid var(--brand-burgundy-dark);
  outline-offset: 2px;
}
.btn-primary:disabled { opacity: 0.55; cursor: not-allowed; }
.btn-ghost {
  background: transparent;
  color: var(--maroon);
  border: 1.5px solid var(--border);
}
.btn-block { width: 100%; }
.btn-sm { min-height: 2.5rem; padding: 0.5rem 1rem; font-size: 0.88rem; }

/* Home — shop first */
.shop-hero-banner {
  padding: 1.25rem 1.15rem 1.5rem;
  background: linear-gradient(165deg, var(--pink) 0%, var(--cream) 85%);
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.shop-hero-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../assets/apex-balloons-and-events-logo.png") right -8% center / min(55vw, 220px) auto no-repeat;
  opacity: 0.09;
  pointer-events: none;
}
.shop-hero-banner__copy {
  position: relative;
  z-index: 1;
}
.shop-hero-banner h1 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 6vw, 2.6rem);
  color: var(--maroon-dark);
  margin: 0 0 0.5rem;
}
.home-shop { padding: 1.25rem 1.15rem 2rem; }

/* Shop hub — category grid (same layout for every product line later) */
.shop-hub {
  padding: 1rem 1.15rem 2.5rem;
  max-width: 640px;
  margin: 0 auto;
}
.shop-hub__intro h1 {
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 5vw, 2.2rem);
  color: var(--maroon-dark);
  margin: 0 0 0.5rem;
}
.shop-hub__note {
  margin-top: 1.5rem;
  font-size: 0.85rem;
  color: var(--muted);
  text-align: center;
  padding: 0.85rem;
  background: var(--pink);
  border-radius: 10px;
}
.breadcrumb {
  font-size: 0.8rem;
  margin-bottom: 0.85rem;
  color: var(--muted);
}
.breadcrumb a {
  color: var(--maroon);
  text-decoration: none;
  font-weight: 500;
}
.breadcrumb span[aria-hidden] {
  margin: 0 0.35rem;
  opacity: 0.5;
}
.category-grid {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.category-card {
  display: flex;
  gap: 0;
  text-decoration: none;
  color: inherit;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform 0.15s, box-shadow 0.2s;
}
.category-card--live:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 44px rgba(92, 15, 30, 0.12);
}
.category-card--soon {
  opacity: 0.72;
  cursor: default;
}
.category-card__visual {
  width: 38%;
  max-width: 140px;
  flex-shrink: 0;
  background: var(--pink);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.category-card__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 120px;
}
/* Seasonal & Holidays' shop-hub thumbnail is a flat-white studio render
   (same convention as every other category thumbnail) — most of those sit
   on this card's pink visual background invisibly since their subject
   nearly fills the frame, but this one has more surrounding white margin,
   which showed as a visible white box against the pink. Scoped to this one
   card only (data-cat-id, set in js/shop-hub.js) rather than changing the
   shared .category-card__visual img rule for every category. */
.category-card[data-cat-id="seasonal-holidays"] .category-card__visual img {
  mix-blend-mode: multiply;
}
/* Category/subcategory grid loading skeleton — shown the instant the page
   script runs (before its products.json/availability fetches even start),
   so a customer never sees what looks like an empty "no products" grid
   while the catalogue is genuinely still loading. Plain CSS pulse, no
   animation library. Reuses .category-card/__visual/__body so it inherits
   sizing from whichever real layout (shop-hub cards or the
   .category-product-list rows) is active on the current page. */
.category-card-skeleton {
  pointer-events: none;
}
.category-card-skeleton__block,
.category-card-skeleton__line {
  display: block;
  background: var(--lux-line, #e5e7eb);
  border-radius: 6px;
  animation: category-skeleton-pulse 1.3s ease-in-out infinite;
}
.category-card-skeleton__block {
  width: 100%;
  height: 100%;
  min-height: 90px;
  border-radius: 0;
}
.category-card-skeleton__line {
  height: 0.85rem;
  margin: 0.35rem 0;
}
.category-card-skeleton__line--title {
  width: 65%;
}
.category-card-skeleton__line--price {
  width: 35%;
}
@keyframes category-skeleton-pulse {
  0%, 100% {
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .category-card-skeleton__block,
  .category-card-skeleton__line {
    animation: none;
  }
}
.category-card__placeholder {
  width: 100%;
  min-height: 120px;
  background: linear-gradient(145deg, var(--pink), var(--cream));
}
.category-card__body {
  flex: 1;
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.category-card__soon {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--maroon);
  background: var(--pink);
  align-self: flex-start;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  margin-bottom: 0.25rem;
}
.category-card__name {
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--maroon-dark);
}
.category-card__desc {
  font-size: 0.85rem;
  color: var(--muted);
  flex: 1;
}
.category-card__price {
  font-weight: 600;
  color: var(--maroon);
  margin-top: 0.35rem;
}

/* Spring Sale (2026) — shared, unscoped so it renders identically on
   category cards, product pages, and the cart regardless of each page's
   own scoped price-colour overrides. Original price: struck-through,
   still-readable maroon. Sale price: the same maroon family, heavier
   weight, visually the more prominent of the two — never the only price
   shown, per the explicit "normal price -> discounted price" requirement. */
.sale-price {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4em;
  flex-wrap: wrap;
}
.sale-price__original {
  color: var(--maroon);
  opacity: 0.75;
  font-weight: 500;
  text-decoration: line-through;
  text-decoration-thickness: 0.08em;
}
/* Solid-red, bold, shining sale price — reuses the hero title's own
   text-shine technique (css/home.css's .hero__title-shine / apex-hero-shine)
   so this reads as the same on-brand shine language, not a new one-off
   effect: base colour stays solid --brand-burgundy (the site's true red,
   already used for primary CTAs) almost the whole loop, with a brief lighter
   band sweeping across on a slow, continuous, never-flashing cycle. Applied
   ONLY to .sale-price__now — .sale-price__original (the struck-through
   normal price) is deliberately untouched by this rule. */
.sale-price__now {
  font-weight: 800;
  background-image: linear-gradient(
    100deg,
    var(--brand-burgundy, #880000) 35%,
    var(--pink-deep, #e8b4c4) 50%,
    var(--brand-burgundy, #880000) 65%
  );
  background-size: 300% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--brand-burgundy, #880000); /* fallback if background-clip:text is unsupported */
  animation: sale-price-shine 6s ease-in-out infinite;
}
@keyframes sale-price-shine {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sale-price__now {
    animation: none;
    background-position: 50% 0;
  }
}

/* "10% OFF Spring Sale" heading line — Helium Bouquet Characters category
   page (under the H1) and individual product pages (under the title),
   deliberately plain text: solid red, bold, no background/pill/box, so it
   reads as prominent copy rather than a UI badge. Shown/hidden and text-
   filled at runtime (js/category-page.js / js/helium-bouquet-character.js)
   based on the same live promotion check every other Spring Sale surface
   uses — never a hardcoded "always on" string. */
.spring-sale-banner {
  margin: 0.15rem 0 0.6rem;
  color: var(--brand-burgundy, #880000);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.01em;
}

/* Spring Sale (2026) — small angled "mini marquee" ribbon overlaid directly
   on a thumbnail image. Shared component, used on the Homepage Trending
   Balloons card (js/home-trending.js) AND the Shop hub's Helium Bouquet
   Characters tile (js/shop-hub.js) — same markup/classes on both, so this
   lives in the sitewide stylesheet rather than being duplicated per page.
   Deliberately reuses the sitewide promo marquee's own visual language
   (.promo-marquee above — pink field, brand-burgundy text, seamless
   double-copy horizontal scroll, promo-marquee-scroll keyframe) and its
   shimmer technique (css/lux.css's apex-promo-shimmer), just much smaller
   and angled, at reduced opacity, so it reads as a corner ribbon rather
   than a second banner. Requires its containing element to already be
   position:relative + overflow:hidden (set per usage site) so the rotated/
   oversized track can never escape the thumbnail bounds or the card. */
.trending-sale-ribbon {
  position: absolute;
  /* Percentage `top` (of the containing thumbnail's own height) plus a
     negative margin-top of half the ribbon's own unrotated height, so this
     positions the ribbon's own vertical CENTRE — not its top edge — at
     that percentage of the thumbnail. That keeps the ribbon "just below
     vertical centre" consistently at every breakpoint/card shape (the
     Homepage's aspect-ratio 4:5 card and the Shop hub's smaller square/
     stretched tile alike), instead of a fixed rem offset that only looks
     right for one specific card size. */
  top: 63%;
  margin-top: -0.75rem;
  left: -2.5rem;
  width: 150%;
  transform: rotate(-9deg);
  transform-origin: left center;
  background: var(--pink, #f8e8ec);
  border-top: 1px solid var(--pink-deep, #e8b4c4);
  border-bottom: 1px solid var(--pink-deep, #e8b4c4);
  overflow: hidden;
  /* ~20% lighter than the main promo-marquee (which is fully opaque) so
     the ribbon reads as a secondary accent, not a competing banner. */
  opacity: 0.8;
  pointer-events: none;
  z-index: 1;
}

.trending-sale-ribbon::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, 0.65) 50%, transparent 60%);
  transform: translateX(-120%);
  animation: apex-promo-shimmer 9s ease-in-out infinite;
}

.trending-sale-ribbon__track {
  display: flex;
  width: max-content;
  padding: 0.2rem 0;
  animation: promo-marquee-scroll 12s linear infinite;
}

.trending-sale-ribbon__text {
  display: inline-flex;
  white-space: nowrap;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--brand-burgundy, #880000);
  padding-right: 1.5rem;
}

@media (prefers-reduced-motion: reduce) {
  .trending-sale-ribbon::after {
    animation: none;
  }
  .trending-sale-ribbon__track {
    animation: none;
    width: auto;
  }
  .trending-sale-ribbon__text[aria-hidden="true"] {
    display: none;
  }
}

.config-main .breadcrumb {
  padding-top: 0.25rem;
}

.home-shop__head h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--maroon);
  margin: 0;
}
.home-shop__head p { margin: 0.25rem 0 1rem; color: var(--muted); font-size: 0.9rem; }

.product-row { display: flex; flex-direction: column; gap: 1rem; }
.product-tile {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: var(--white);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.product-tile--featured { border-color: rgba(122, 21, 40, 0.28); }
.product-tile__badge {
  position: absolute;
  margin: 0.75rem;
  z-index: 1;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--maroon);
  color: var(--white);
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
}
.product-tile { position: relative; }
.product-tile__visual {
  display: block;
  aspect-ratio: 4/3;
  background: var(--pink);
  overflow: hidden;
}
.product-tile__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
}
.product-tile__body { padding: 1.15rem 1.25rem 1.35rem; }
.product-tile__eyebrow { font-size: 0.72rem; font-weight: 600; color: var(--maroon); text-transform: uppercase; letter-spacing: 0.1em; }
.product-tile__title { display: block; font-family: var(--font-display); font-size: 1.55rem; color: var(--maroon-dark); margin: 0.15rem 0; }
.product-tile__desc { display: block; font-size: 0.88rem; color: var(--muted); }
.product-tile__from { display: block; margin-top: 0.5rem; font-weight: 600; color: var(--maroon); }
.product-tile__action { display: block; margin-top: 0.65rem; font-weight: 600; color: var(--maroon); }

.compare-us {
  margin: 1.75rem 0 0;
  padding: 1rem 1.15rem;
  list-style: none;
  background: var(--white);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  font-size: 0.88rem;
  color: var(--muted);
}
.compare-us li { margin: 0.45rem 0; }
.compare-us strong { color: var(--maroon-dark); }

.trust-band {
  display: grid;
  gap: 1rem;
  padding: 1.5rem 1.15rem 2.5rem;
  background: var(--white);
  border-top: 1px solid var(--border);
}
@media (min-width: 700px) {
  .trust-band { grid-template-columns: repeat(3, 1fr); max-width: 960px; margin: 0 auto; }
}
.trust-band h3 { font-family: var(--font-display); font-size: 1.15rem; color: var(--maroon); margin: 0 0 0.35rem; }
.trust-band p { margin: 0; font-size: 0.88rem; color: var(--muted); }

.site-footer {
  padding: 2rem 1.15rem calc(1.5rem + var(--safe-bottom));
  text-align: center;
  font-size: 0.85rem;
  color: var(--muted);
  border-top: 1px solid var(--border);
}
.site-footer--slim { padding: 1.25rem; }
.footer-logo { height: 2.5rem; margin: 0 auto 0.65rem; }

/* Shop / helium */
.preview-strip {
  padding: 0.65rem 1rem 0.85rem;
  background: linear-gradient(180deg, var(--pink), var(--cream));
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: var(--sticky-top-h);
  z-index: 50;
  overflow: hidden;
}
.preview-strip::before {
  content: "";
  position: absolute;
  inset: -10% -5%;
  background: url("../assets/apex-balloons-and-events-logo.png") center 42% / min(72%, 280px) auto no-repeat;
  opacity: 0.07;
  pointer-events: none;
  z-index: 0;
}
.preview-strip > * {
  position: relative;
  z-index: 1;
}
.preview-strip__label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--maroon);
  margin: 0 0 0.35rem;
}

.photo-preview {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.photo-preview__logo {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: url("../assets/apex-balloons-and-events-logo.png") center 14% / 48% auto no-repeat;
  opacity: 0.28;
  mix-blend-mode: multiply;
}
.photo-preview__img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  aspect-ratio: 3 / 4;
}
.photo-preview--with-floor .photo-preview__img {
  opacity: 0.45;
}
.bouquet-formula {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem 0.65rem;
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--maroon);
}
.bouquet-formula li {
  padding: 0.25rem 0.55rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.bouquet-includes {
  margin: 0.85rem 0 0;
  padding: 0.75rem 1rem;
  background: var(--pink);
  border-radius: 10px;
  font-size: 0.82rem;
  color: var(--maroon-dark);
  list-style: none;
}
.bouquet-includes li {
  margin: 0.3rem 0;
  padding-left: 1.1rem;
  position: relative;
}
.bouquet-includes li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--maroon);
  font-weight: 700;
}
.package-gift-hint {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--muted);
  text-align: center;
}
.bouquet-larger-note {
  margin: 0.75rem 0 0;
  font-size: 0.8rem;
  color: var(--muted);
  text-align: center;
}
.config-intro__steps-hint {
  font-size: 0.82rem;
  color: var(--muted);
  margin: 0.35rem 0 0;
}
.colour-section-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--maroon);
  margin: 0.85rem 0 0.35rem;
}
.field-hint {
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--muted);
  margin-top: 0.25rem;
}
.compare-us--gift {
  font-size: 0.9rem;
}
.compare-us--gift li::before {
  content: "→ ";
  color: var(--maroon);
  font-weight: 600;
}
.compare-us--gift strong {
  display: none;
}
.shop-hero-banner__cta {
  margin-top: 1rem;
  max-width: 20rem;
}
.preview-strip .bouquet-preview:not(.hidden) {
  margin-top: 0.75rem;
  max-width: 200px;
}
.config-main {
  padding: 1rem 1rem calc(1rem + var(--safe-bottom));
  max-width: 520px;
  margin: 0 auto;
}
.config-intro h1 {
  font-family: var(--font-display);
  font-size: 1.75rem;
  color: var(--maroon-dark);
}

.config-step {
  margin-top: 0.65rem;
  margin-bottom: 0.65rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--white);
  overflow: hidden;
}
.config-step summary,
.config-step__head {
  list-style: none;
  cursor: pointer;
  padding: 1rem 1.1rem;
  font-weight: 600;
  font-size: 1rem;
  color: var(--maroon-dark);
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.config-step summary::-webkit-details-marker,
.config-step__head::-webkit-details-marker { display: none; }
.config-step__num {
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  color: var(--brand-burgundy, #880000);
  font-family: var(--font-step-heading);
  font-size: clamp(0.8rem, 2.4vw, 1rem);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  white-space: nowrap;
}
.config-step__body { padding: 0 1.1rem 1.15rem; }

.package-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.55rem;
}
.package-grid--counts {
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 480px) {
  .package-grid--counts {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 768px) {
  .package-grid--counts {
    grid-template-columns: repeat(5, 1fr);
  }
}
@media (max-width: 380px) {
  .package-grid {
    grid-template-columns: 1fr;
    gap: 0.65rem;
  }
  .package-card__inner {
    flex-direction: row !important;
    text-align: left;
    padding: 0.65rem !important;
  }
  .package-card__photo {
    width: 5.5rem !important;
    flex-shrink: 0;
  }
}
.package-card { cursor: pointer; display: block; }
.package-card input { position: absolute; opacity: 0; pointer-events: none; }
.package-card__inner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: center;
  padding: 0.5rem;
  border: 2px solid var(--border);
  border-radius: 12px;
  background: var(--cream);
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
  overflow: hidden;
}
.package-card.is-selected .package-card__inner,
.package-card input:checked + .package-card__inner {
  border-color: var(--maroon);
  background: var(--pink);
  box-shadow: 0 0 0 1px var(--maroon);
}
.package-card__photo {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}
.package-card__meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.45rem 0.2rem 0.15rem;
}
.package-card__count {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--maroon);
  line-height: 1;
}
.package-card__title {
  font-size: 0.72rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.package-card__price {
  font-weight: 700;
  color: var(--maroon-dark);
  margin-top: 0.2rem;
  font-size: 0.95rem;
}


.choice-row, .fulfilment-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
.choice-pill { cursor: pointer; }
.choice-pill input { position: absolute; opacity: 0; }
.choice-pill span {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-height: 4rem;
  padding: 0.65rem 0.5rem;
  border: 2px solid var(--border);
  border-radius: 12px;
  background: var(--cream);
  font-size: 0.88rem;
}
.choice-pill span small { font-size: 0.72rem; color: var(--muted); font-weight: 400; margin-top: 0.15rem; }
.choice-pill input:checked + span {
  border-color: var(--maroon);
  background: var(--pink);
  color: var(--maroon-dark);
}

.select-field { display: block; margin-bottom: 0.85rem; }
.select-field__label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--maroon);
  margin-bottom: 0.35rem;
}
.select-field__row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.select-field__swatch {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--swatch);
  border: 2px solid var(--border);
  flex-shrink: 0;
  box-shadow: inset 0 -3px 8px rgba(0,0,0,0.08);
}
.select-field__swatch.is-chrome {
  background: radial-gradient(circle at 30% 25%, #fff, var(--swatch) 45%, #fff 55%, var(--swatch));
}
.select-touch {
  flex: 1;
  min-height: 3rem;
  font-family: inherit;
  font-size: 1rem;
  padding: 0.5rem 0.75rem;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--white);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%237a1528' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
}

.swatch-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: -0.35rem 0 0.85rem;
}
.swatch-chip { cursor: pointer; }
.swatch-chip input { position: absolute; opacity: 0; }
.swatch-chip__dot {
  display: block;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 50%;
  background: var(--swatch);
  border: 2px solid transparent;
}
.swatch-chip--chrome .swatch-chip__dot {
  background: radial-gradient(circle at 30% 25%, #fff, var(--swatch) 45%, #fff 55%, var(--swatch));
}
.swatch-chip.is-on .swatch-chip__dot,
.swatch-chip input:checked + .swatch-chip__dot {
  border-color: var(--maroon);
  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--maroon);
}

.check-row {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  margin: 0.75rem 0;
  font-size: 0.9rem;
  cursor: pointer;
}
.check-row input { width: 1.15rem; height: 1.15rem; margin-top: 0.15rem; accent-color: var(--maroon); }
.check-row--addon span { display: flex; flex-direction: column; }
.check-row--addon small { color: var(--muted); font-size: 0.8rem; }

.field { display: block; margin-bottom: 0.75rem; }
.field span { display: block; font-size: 0.8rem; font-weight: 600; color: var(--maroon); margin-bottom: 0.3rem; }
.field span em { font-weight: 400; color: var(--muted); }
.field input, .field textarea {
  width: 100%;
  min-height: 3rem;
  font-family: inherit;
  font-size: 1rem;
  padding: 0.6rem 0.8rem;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--white);
}
.field textarea { min-height: 4.5rem; resize: vertical; }
.field-row-2 { display: grid; grid-template-columns: 1fr 5.5rem; gap: 0.5rem; }

.delivery-msg { font-size: 0.85rem; margin: 0.35rem 0 0.75rem; padding: 0.55rem 0.75rem; border-radius: 8px; background: var(--pink); }
.delivery-msg.ok { color: var(--maroon-dark); }
.delivery-msg.bad, .delivery-msg.warn { color: #8b3030; }

.order-panel {
  margin-top: 1.25rem;
  padding: 1.15rem;
  background: var(--white);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  position: sticky;
  bottom: calc(0.5rem + var(--safe-bottom));
}
.order-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.92rem;
  margin-bottom: 0.35rem;
}
.cart-delivery-progress {
  font-size: 0.82rem;
  color: var(--maroon-dark);
  margin: -0.15rem 0 0.35rem;
  text-align: right;
}
.order-row--total {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--maroon-dark);
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
}
.order-panel__detail { font-size: 0.8rem; color: var(--muted); margin: 0 0 0.85rem; }
.order-panel__secure { font-size: 0.72rem; color: var(--muted); text-align: center; margin: 0.65rem 0 0; }
.order-panel .btn { margin-top: 0.5rem; }

.checkout-notice {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  font-size: 0.88rem;
  background: var(--pink);
}
.checkout-notice.bad { background: #fde8ec; color: #6b2030; }
.checkout-notice.warn { background: #fff8e6; color: #5c4a10; }

/* Preview scene */
.bouquet-preview { max-width: 320px; margin: 0 auto; }
.bouquet-scene {
  position: relative;
  aspect-ratio: 3/4;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(180deg, #f5ebe8, #e8ddd6);
}
.bouquet-scene__logo {
  position: absolute;
  top: 8%;
  left: 50%;
  transform: translateX(-50%);
  width: 52%;
  max-width: 140px;
  aspect-ratio: 2.2/1;
  background: url("../assets/apex-balloons-and-events-logo.png") center/contain no-repeat;
  opacity: 0.35;
  mix-blend-mode: multiply;
}
.bouquet-scene__table {
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 20%;
  height: 7%;
  background: rgba(255,255,255,0.55);
  border-radius: 3px 3px 0 0;
}
.bouquet-scene__floor {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 25%;
  background: linear-gradient(180deg, transparent, rgba(122,21,40,0.05));
}
.bouquet-scene__cluster {
  position: absolute;
  left: 50%;
  bottom: 24%;
  transform: translateX(-50%);
  width: 72%;
  height: 55%;
}
.bouquet-preview--floor .bouquet-scene__cluster { bottom: 16%; height: 68%; }
.bouquet-preview--floor .bouquet-scene__table { opacity: 0.3; bottom: 14%; }
.strings {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 2px;
  height: 52%;
  background: var(--ribbon);
  transform: translateX(-50%);
}
.balloon {
  position: absolute;
  width: calc(28% * var(--bs, 1));
  aspect-ratio: 0.78/1;
  left: var(--bx);
  top: var(--by);
  transform: translate(-50%, -50%);
  border-radius: 50% 50% 48% 48%;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,0.55), var(--balloon) 55%);
}
.balloon--chrome {
  background: radial-gradient(circle at 28% 22%, #fff, var(--balloon) 38%, #fff 48%, var(--balloon));
}
.weight {
  position: absolute;
  left: 50%;
  bottom: -2%;
  width: 14%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 30% 28%, #fff, var(--weight) 50%);
}
.preview-caption { text-align: center; font-size: 0.78rem; color: var(--muted); margin: 0.4rem 0 0; }

/* Cart drawer */
.cart-drawer {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  visibility: hidden;
}
.cart-drawer.is-open { pointer-events: auto; visibility: visible; }
.cart-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(42, 26, 30, 0.45);
  opacity: 0;
  transition: opacity 0.25s;
}
.cart-drawer.is-open .cart-drawer__backdrop { opacity: 1; }
.cart-drawer__panel {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: min(100%, 380px);
  background: var(--cream);
  transform: translateX(100%);
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
  padding-bottom: var(--safe-bottom);
}
.cart-drawer.is-open .cart-drawer__panel { transform: translateX(0); }
.cart-drawer__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.15rem;
  border-bottom: 1px solid var(--border);
}
.cart-drawer__head h2 { font-family: var(--font-display); font-size: 1.35rem; margin: 0; color: var(--maroon); }
.cart-drawer__head button {
  font-size: 1.75rem;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--muted);
  line-height: 1;
}
.cart-drawer__lines {
  list-style: none;
  margin: 0;
  padding: 1rem 1.15rem;
  flex: 1;
  overflow-y: auto;
}
.cart-line {
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.88rem;
}
.cart-line__meta { color: var(--muted); font-size: 0.8rem; margin: 0.35rem 0 0; }
.cart-line__side { text-align: right; flex-shrink: 0; }
.cart-line__side button {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.75rem;
  border: none;
  background: none;
  color: var(--maroon);
  cursor: pointer;
  text-decoration: underline;
}
.cart-drawer__empty { padding: 1rem 1.15rem; color: var(--muted); }
.cart-drawer__foot { padding: 1rem 1.15rem; border-top: 1px solid var(--border); }

.page-success .success-main {
  text-align: center;
  padding: 3rem 1.5rem;
  max-width: 28rem;
  margin: 0 auto;
}
.page-success h1 { font-family: var(--font-display); color: var(--maroon-dark); }
.page-success .btn { margin: 0.5rem 0.35rem; }

.hidden { display: none !important; }

/* Helium bouquet — simple build flow */
.page-helium--simple {
  padding-bottom: calc(5.5rem + var(--safe-bottom));
}
.preview-strip--simple {
  padding: 0.5rem 1rem 0.55rem;
}
.preview-photo-wrap {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--white);
  box-shadow: var(--shadow);
}
.preview-photo-wrap.is-dimmed .preview-photo {
  opacity: 0.55;
}
.preview-photo {
  display: block;
  width: 100%;
  height: auto;
  min-height: 8rem;
  max-height: min(34vh, 11rem);
  object-fit: cover;
  object-position: center 42%;
}
.preview-live {
  margin: 0.35rem 0 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--maroon-dark);
  text-align: center;
}
.config-main--simple {
  padding-top: 0.25rem;
  padding-bottom: 0.5rem;
}
.config-intro--simple {
  text-align: center;
  margin-bottom: 0.75rem;
}
.config-intro--simple h1 {
  font-size: 1.5rem;
  margin: 0;
}
.config-intro--simple .lead {
  font-size: 0.88rem;
  margin: 0.2rem 0 0;
}
.config-form--simple .config-step {
  border-radius: 12px;
  box-shadow: 0 2px 14px rgba(92, 15, 30, 0.06);
}
.config-step__head {
  list-style: none;
  display: flex;
  align-items: baseline;
  flex-wrap: nowrap;
  gap: clamp(0.3rem, 1.2vw, 0.55rem);
  width: 100%;
}
.config-step__label {
  flex: 1;
  min-width: 0;
  font-family: var(--font-step-heading);
  font-weight: 700;
  font-size: clamp(0.8rem, 2.4vw, 1rem);
  color: var(--brand-burgundy, #880000);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.config-step__pick {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--maroon);
  max-width: 42%;
  flex-shrink: 0;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.config-step.is-done .config-step__num {
  background: var(--maroon);
  color: var(--white);
}
.config-step__body {
  padding-top: 0;
}
.config-step__body--sets {
  padding: 0 0 0.75rem;
}
/* Step 1 — horizontal swipe picker (mobile-first) */
.bouquet-sets-hint {
  margin: 0 0 0.5rem;
  padding: 0 1.1rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
  text-align: center;
  line-height: 1.35;
}
.bouquet-sets-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 1rem;
  margin: 0 -0.25rem;
  padding: 0.15rem 1rem 0.65rem;
  scrollbar-width: none;
  /* Reserves the real measured height of a populated Step 1 row (421px,
     confirmed identical across baby-shower.html and table-centrepiece.html
     at mobile width — every package card shares the same 320x400 photo
     convention) so the empty <div class="bouquet-sets"></div> this ships
     with in every configurator-driven product page's static HTML doesn't
     collapse to near-zero height before JS populates real package cards.
     That collapse-then-grow was a measured, reproducible ~0.03-0.35 CLS
     source (PerformanceObserver layout-shift entries) shared across every
     page using this class - see .bouquet-sets-scroll's shared selector
     list below and the min-height: 0 reset at 960px, where the layout
     switches to a CSS grid with a genuinely different real height. */
  min-height: 421px;
}
/* Helium Balloon Bouquets 30cm/45cm/60cm/Heart — the 421px reserved height
   above was measured against baby-shower/table-centrepiece cards, which
   carry more stacked UI (height pills, extra meta) than this family's
   simpler size-only cards. Their real populated row is ~340px, so the
   shared 421px left a large dead gap below Step 1 before Step 2 on mobile
   and narrow desktop (960px+ already resets this to 0 for the grid layout,
   so this override only ever matters below that breakpoint). */
.page-helium .bouquet-sets-scroll,
.page-helium-45 .bouquet-sets-scroll,
.page-helium-60 .bouquet-sets-scroll,
.page-helium-heart .bouquet-sets-scroll {
  min-height: 340px;
}
.bouquet-sets-scroll::-webkit-scrollbar {
  display: none;
}
.bouquet-sets {
  display: flex;
  flex-direction: row;
  gap: 0.6rem;
  width: max-content;
  min-height: 0;
}
.bouquet-set {
  position: relative;
  flex: 0 0 auto;
  width: clamp(9.25rem, 40vw, 10.75rem);
  scroll-snap-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
}
.bouquet-set input.bouquet-set__radio,
.bouquet-set input[name="package"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.bouquet-set__height {
  display: flex;
  gap: 0.35rem;
  padding: 0.4rem 0.5rem;
  background: var(--cream);
  border: 1px solid var(--border);
  border-top: none;
}

.bouquet-set.is-selected .bouquet-set__height {
  border-color: var(--maroon);
}

.height-pill {
  flex: 1;
  position: relative;
  cursor: pointer;
}

.height-pill input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.height-pill span {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.15;
  padding: 0.3rem 0.3rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--muted);
}

.height-pill input:checked + span {
  border-color: var(--maroon);
  color: var(--maroon-dark);
  background: var(--pink);
}

.bouquet-set.is-selected .bouquet-set__card {
  border-radius: 12px 12px 0 0;
}
.bouquet-set__card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 2px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--white);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.bouquet-set__photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 42%;
  background: var(--pink);
}

/* Balloon Centrepieces Type cards — full/contained image presentation
   instead of the site-wide cover-crop above, so the whole centrepiece
   photo is always visible (no cropping/zoom). Scoped to
   .page-table-centrepieces only (every Balloon Centrepieces Type page —
   Birthday, Milestone, Gender Reveal, Baby Shower, Graduation, Trucks, HB
   Trucks — all share this one template) so every other product family's
   Type cards (helium, number combos, columns, etc.) keep their existing
   cover-crop treatment unchanged. */
.page-table-centrepieces .bouquet-set__photo {
  object-fit: contain;
  object-position: center;
}
.bouquet-set__meta {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0.4rem 0.5rem 0.45rem;
  background: var(--cream);
  border-top: 1px solid var(--border);
}

.bouquet-set__meta-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem;
}

.bouquet-set__hint {
  margin: 0.3rem 0 0;
  font-size: 0.68rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--muted);
}

.bouquet-set.is-selected .bouquet-set__hint {
  color: rgba(255, 255, 255, 0.9);
}

.bouquet-set__tag--sydney {
  background: var(--maroon);
  color: var(--white);
  border-color: var(--maroon);
}

.bouquet-set__tag--gift {
  color: var(--maroon-dark);
}
/* Individual Type/design unavailable — same pill treatment as the
   category-grid "Sold out" badge (.category-card__status-badge), applied
   to just this one Type card so its still-available siblings are
   unaffected. Site-wide standard, not Fathers-Day-specific — see
   js/product-availability-check.js's applyPackageGridAvailability(). */
.bouquet-set__tag--unavailable {
  background: #fbe4e8;
  color: var(--lux-accent, #7a1528);
}
.bouquet-set--unavailable .bouquet-set__card {
  opacity: 0.6;
}
.bouquet-set--unavailable {
  cursor: not-allowed;
}
.bouquet-set__count {
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: 700;
  line-height: 1;
  color: var(--maroon-dark);
}
.bouquet-set__count::after {
  content: " balloons";
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-left: 0.15rem;
}
.bouquet-set__price {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--maroon);
}
.bouquet-set__tag {
  position: absolute;
  top: 0.4rem;
  left: 0.4rem;
  z-index: 2;
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.2rem 0.45rem;
  border-radius: 999px;
  background: var(--maroon);
  color: var(--white);
}
.bouquet-set.is-selected .bouquet-set__card {
  border-color: var(--maroon);
  box-shadow: 0 6px 20px rgba(122, 21, 40, 0.2);
}
.bouquet-set.is-selected .bouquet-set__meta {
  background: var(--pink);
}
.bouquet-set__qty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0 0.15rem 0.1rem;
  pointer-events: auto;
}
.bouquet-set__qty-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  flex-shrink: 0;
}
.bouquet-set.is-selected .bouquet-set__qty-label {
  color: var(--maroon);
}
.qty-pill--card {
  padding: 0.12rem;
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(92, 15, 30, 0.06);
}
.bouquet-set.is-selected .qty-pill--card {
  border-color: rgba(122, 21, 40, 0.35);
  background: var(--pink);
}
.qty-pill--card .qty-pill__btn {
  width: 2.15rem;
  height: 2.15rem;
  font-size: 1.1rem;
}
.qty-pill--card .qty-pill__val {
  min-width: 1.65rem;
  font-size: 1.1rem;
}
.composer--summary {
  padding: 0.65rem 0.85rem;
  text-align: center;
}
.composer--summary .composer__math {
  margin: 0;
}
.bouquet-set__count.height-set__label {
  font-size: 1.35rem;
}
.bouquet-set__count.height-set__label::after {
  content: none;
  display: none;
}
.bouquet-set__sub {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
  text-align: left;
  line-height: 1.2;
  flex: 1 1 auto;
  min-width: 3.5rem;
}
.bouquet-set__meta .bouquet-set__price {
  margin-left: auto;
}
.choice-row--simple {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
.choice-pill--simple span {
  padding: 0.85rem 0.5rem;
  text-align: center;
}
.choice-pill--simple strong {
  font-family: var(--font-display);
  font-size: 1.2rem;
}
.swatch-row--primary {
  margin-bottom: 0.5rem;
}
.colour-step-hint {
  margin: 0 0 0.85rem;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--muted);
  text-align: center;
}
.config-step__body--colours {
  padding-top: 0;
}
.colour-section {
  margin-bottom: 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--border);
}
.colour-section:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.colour-section__title {
  margin: 0 0 0.5rem;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
  color: var(--maroon);
}
/* Milestone Birthday Balloon Centrepiece — required milestone-number
   dropdown. Reuses .foil-numbers-input as its class hook (Helium Number
   Bouquets' own number-entry field, which otherwise relies on plain
   default input styling with no dedicated CSS) plus this one dedicated
   rule so the select reads as a proper, consistent form control matching
   the rest of the site rather than bare browser chrome. */
.centrepiece-number-select {
  display: block;
  width: 100%;
  max-width: 16rem;
  min-height: 2.75rem;
  padding: 0.6rem 0.8rem;
  font-family: inherit;
  font-size: 1rem;
  color: var(--text, #2a1f22);
  background: var(--white, #fff);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
}
.centrepiece-number-select:focus-visible {
  outline: 2px solid var(--maroon);
  outline-offset: 1px;
}

.colour-more {
  margin-top: 0.5rem;
  font-size: 0.85rem;
}
.colour-more summary {
  cursor: pointer;
  color: var(--maroon);
  font-weight: 600;
  list-style: none;
  padding: 0.4rem 0;
}
.colour-more summary::-webkit-details-marker {
  display: none;
}
.colour-more__body {
  padding-top: 0.35rem;
}
.check-row--compact {
  font-size: 0.88rem;
  margin: 0.5rem 0;
}
/* Build composer — bouquet quantity (mobile-first) */
.composer {
  position: relative;
  z-index: 2;
  margin: 0 1rem 0.65rem;
  padding: 0.65rem 0.85rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 2px 14px rgba(92, 15, 30, 0.06);
}
.composer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.composer__label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--maroon);
}
.composer__math {
  margin: 0.45rem 0 0;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--muted);
  line-height: 1.35;
}
.qty-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.2rem;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.qty-pill--sm {
  padding: 0.1rem;
}
.qty-pill__btn {
  position: relative;
  z-index: 1;
  width: 2.5rem;
  height: 2.5rem;
  border: none;
  border-radius: 50%;
  background: var(--white);
  font-size: 1.25rem;
  line-height: 1;
  color: var(--maroon-dark);
  cursor: pointer;
  touch-action: manipulation;
  box-shadow: 0 1px 4px rgba(92, 15, 30, 0.08);
  -webkit-tap-highlight-color: transparent;
}
.qty-pill--sm .qty-pill__btn {
  width: 2rem;
  height: 2rem;
  font-size: 1.1rem;
}
.qty-pill__btn:active {
  background: var(--pink);
}
.qty-pill__val {
  min-width: 2rem;
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--maroon-dark);
}
.qty-pill--sm .qty-pill__val {
  font-size: 1.05rem;
  min-width: 1.5rem;
}
.bags-auto-note {
  margin: 0.5rem 0 0.35rem;
  padding: 0.55rem 0.65rem;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--maroon-dark);
  background: var(--pink);
  border-radius: 10px;
  border: 1px solid rgba(122, 21, 40, 0.12);
}
.bags-panel {
  margin: 0.5rem 0 0.35rem;
}
.bags-panel__title {
  margin: 0 0 0.35rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--maroon-dark, #5c0f1e);
}
.bags-panel__title small {
  font-weight: 500;
  color: var(--muted, #6b5c60);
}
.bags-panel__hint {
  margin: 0 0 0.5rem;
  font-size: 0.7rem;
  font-weight: 400;
  line-height: 1.55;
  color: var(--muted, #6b5560);
}
.bags-panel__selected {
  margin: 0.35rem 0 0.5rem;
  padding: 0.55rem 0.65rem;
  font-size: 0.8rem;
  line-height: 1.45;
  font-weight: 600;
  color: var(--maroon-dark, #5c0f1e);
  background: var(--pink, #faf0f2);
  border-radius: 10px;
  border: 1px solid rgba(122, 21, 40, 0.12);
}
.bags-opt-in {
  margin-bottom: 0.35rem;
}
.cart-line__qty {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.cart-line__qty-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.order-row--bags {
  font-size: 0.88rem;
  color: var(--maroon-dark);
}
.category-card__qty-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  margin-top: 0.5rem;
  opacity: 0.55;
  pointer-events: none;
}
.bags-qty-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.35rem 0 0.65rem;
  padding: 0.5rem 0.65rem;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.bags-qty-row__label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--maroon-dark);
  flex-shrink: 0;
}
.bags-qty-row__sum {
  margin-left: auto;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--maroon);
}
.bags-qty-stepper {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.bags-qty-stepper__btn {
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--white);
  font-size: 1.2rem;
  line-height: 1;
  color: var(--maroon-dark);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.bags-qty-stepper__btn:active {
  background: var(--pink);
}
.bags-qty-stepper__btn:disabled {
  opacity: 0.28;
  pointer-events: none;
  cursor: not-allowed;
}
.bags-qty-stepper input {
  width: 2.75rem;
  text-align: center;
  font-size: 1rem;
  font-weight: 600;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.35rem 0.2rem;
  -moz-appearance: textfield;
}
.bags-qty-stepper input::-webkit-outer-spin-button,
.bags-qty-stepper input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.bags-qty-stepper__val {
  min-width: 1.75rem;
  text-align: center;
  font-weight: 700;
  font-size: 1rem;
}
.cart-line__bags {
  margin-top: 0.55rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--border);
}
.cart-line__bags-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--maroon-dark);
  margin-bottom: 0.35rem;
}
.cart-line__bags-label small {
  font-weight: 500;
  color: var(--muted);
}
.cart-line__bags-match {
  display: block;
  margin-top: 0.35rem;
  padding: 0;
  border: none;
  background: none;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--maroon);
  text-decoration: underline;
  cursor: pointer;
}
.bags-qty-stepper--cart {
  justify-content: flex-start;
}
.check-row--compact small {
  color: var(--muted);
  font-weight: 400;
}
.field--compact span {
  font-size: 0.8rem;
}
.field--compact input,
.field--compact textarea {
  padding: 0.65rem 0.75rem;
  font-size: 1rem;
}
.fulfilment-row--simple {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
}
.checkout-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 0.85rem calc(0.65rem + var(--safe-bottom));
  background: rgba(255, 251, 252, 0.96);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
  box-shadow: 0 -8px 32px rgba(92, 15, 30, 0.1);
  max-width: 520px;
  margin: 0 auto;
}
/* Landing bars (bubble-bouquets, stacks) keep three items: primary link +
   secondary link beside the summary. Product purchase bars use the base
   two-column layout since the View cart link has been removed. */
.checkout-bar--split {
  grid-template-columns: 1fr auto auto;
}
.checkout-bar__main {
  min-width: 0;
}
.checkout-bar__label {
  display: block;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.checkout-bar__amount {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--maroon-dark);
  line-height: 1.1;
}
.checkout-bar__detail {
  margin: 0;
  font-size: 0.72rem;
  color: var(--muted);
}
.checkout-bar__btn {
  min-height: 2.85rem;
  padding: 0.6rem 1.1rem;
  font-size: 0.95rem;
  white-space: nowrap;
}
/* Poppins is applied ONLY to the Add to Cart button and the nav Cart button
   (per spec) — not to .btn-primary globally, so other primary CTAs keep the
   default body font. */
#addToCartBtn {
  font-family: "Poppins", var(--font-body);
  letter-spacing: 0.02em;
}
/* Cart page */
.page-cart {
  padding-bottom: calc(5.5rem + var(--safe-bottom));
}
.cart-page {
  padding: 0.5rem 1rem 1rem;
  max-width: 520px;
  margin: 0 auto;
}
.cart-page__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.cart-page__head h1 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  margin: 0;
  color: var(--maroon-dark);
}
.cart-page__head-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.65rem 0.85rem;
}
.cart-page__link {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--maroon);
  text-decoration: none;
  white-space: nowrap;
}
.cart-page__clear {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: var(--text-muted, #6b5b63);
}
.cart-page__clear:hover {
  color: var(--maroon);
  text-decoration: underline;
}
.cart-page__flash {
  margin: 0 0 0.65rem;
  padding: 0.5rem 0.65rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--maroon-dark);
  background: var(--pink);
  border-radius: 10px;
  text-align: center;
}
.cart-page__lines {
  list-style: none;
  margin: 0;
  padding: 0;
}
.cart-page__empty {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--muted);
}
.cart-page__empty .btn {
  margin-top: 1rem;
}
.cart-page__empty.hidden,
.cart-page__lines:empty + .cart-page__empty {
  display: block;
}
.cart-page__details {
  margin-top: 1rem;
}
.cart-page__summary {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.cart-line__price {
  font-weight: 700;
  color: var(--maroon-dark);
}
/* Spring Sale (2026) — when a cart line shows both the struck-through unit
   price and the sale unit price (.sale-price, styles.css above), the
   already-correct qty×sale-price line total renders as its own line
   underneath, so both numbers stay legible instead of competing on one row. */
.cart-line__price-total {
  display: block;
  margin-top: 0.2rem;
  font-weight: 700;
  color: var(--maroon-dark);
}
.cart-line__remove {
  display: block;
  margin-top: 0.35rem;
  padding: 0;
  border: none;
  background: none;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--maroon);
  cursor: pointer;
  text-decoration: underline;
}
.checkout-bar--cart {
  grid-template-columns: auto 1fr;
  gap: 0.65rem;
}
.checkout-bar__back {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--maroon);
  text-decoration: none;
  padding: 0.5rem 0.25rem;
  white-space: nowrap;
}
.checkout-bar__btn--grow {
  flex: 1;
  min-width: 0;
}
.checkout-bar__cart {
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--maroon);
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 0.55rem 0.65rem;
  cursor: pointer;
  min-height: 2.85rem;
}

@media (min-width: 768px) {
  .config-main { max-width: 640px; padding-bottom: 2rem; }
  .preview-strip { position: relative; top: 0; }
  .product-tile { flex-direction: row; }
  .product-tile__visual { width: 42%; aspect-ratio: auto; min-height: 200px; }
  .page-helium--simple { padding-bottom: 2rem; }
  .checkout-bar {
    position: sticky;
    border-radius: var(--radius);
    margin-top: 1rem;
  }
}

/* ─── Desktop builder layout (≥ 960 px) ─────────────────────────────────── */
@media (min-width: 960px) {
  /* Package cards: CSS grid instead of horizontal swipe */
  .bouquet-sets-scroll {
    overflow: visible;
    scroll-snap-type: none;
    margin: 0;
    padding: 0.5rem 1.25rem 0.75rem;
    /* The 421px mobile min-height (added to reserve space for the
       horizontal swipe row) does not describe this grid layout's real
       height and must not carry over - reset so desktop is unaffected. */
    min-height: 0;
  }
  .bouquet-sets {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    width: auto;
    gap: 0.75rem;
  }
  .bouquet-set {
    width: auto;
    scroll-snap-align: none;
  }

}

/* Show scrollbar on tablet/mouse so horizontal card scroll works without touch */
@media (min-width: 768px) and (max-width: 959px) {
  .bouquet-sets-scroll {
    scrollbar-width: thin;
    scrollbar-color: var(--border, #e5e7eb) transparent;
    padding-bottom: 1rem;
  }
}

/* Required-selection validation (sitewide) — inline message shown right
   under a section title when Add to Cart is pressed with that choice
   missing, plus a brief highlight flash on the title itself. */
.field-required-error {
  margin: 0.25rem 0 0.6rem;
  padding: 0.4rem 0.6rem;
  border-radius: 8px;
  background: rgba(136, 0, 0, 0.08);
  border: 1px solid rgba(136, 0, 0, 0.3);
  color: var(--brand-burgundy, #880000);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.35;
}

@keyframes section-flash {
  0%, 100% { background-color: transparent; }
  25%, 75% { background-color: rgba(136, 0, 0, 0.14); }
}

.section-flash {
  animation: section-flash 1.5s ease;
  border-radius: 4px;
}

/* Sitewide invalid-field outline — applied to the actual control/option
   group (colour-grid, input, select) that's missing, alongside
   aria-invalid="true", so the highlight travels with the control itself
   and not just the inline message beside it. */
[aria-invalid="true"] {
  outline: 2px solid var(--brand-burgundy, #880000);
  outline-offset: 2px;
  border-radius: 8px;
}