/* ============================================================================
   Binge Bakes: styles.css
   Vanilla stylesheet recreating the Claude Design prototype pixel-faithfully.
   Tokens mirror tokens/colors.css, spacing.css, typography.css.
   ========================================================================== */

/* ----------------------------------------------------------------------------
   0. SELF-HOSTED FONTS
   -------------------------------------------------------------------------- */
/* Broken Heart: scribble/handwritten accent (dafont.com/broken-heart-2).
   Single-weight face; the 100–900 range maps every requested weight to this
   one file so the browser never synthesises a faux bold. */
@font-face {
  font-family: 'Broken Heart';
  src: url('assets/fonts/broken-heart.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Maytra: handwritten script for the brand wordmark and pink accents
   (khurasanstudio.com, free for personal & commercial use). Single-weight
   face; the 100–900 range maps every requested weight to this one file so the
   browser never synthesises a faux bold. */
@font-face {
  font-family: 'Maytra';
  src: url('assets/fonts/maytra.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ----------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* ---- Brand core ---- */
  --color-cocoa:            #5C2609; /* headings, footer, grounding */
  --color-pink:             #E9546D; /* primary accent, CTAs, links */
  --color-blush:            #F8A0A4; /* soft cards, secondary accents */
  --color-raspberry:        #F37687; /* hover, badges */
  --color-buttercream:      #FBCBB8; /* warm sections, form bg */
  --color-ivory:            #FDFCFC; /* page background */

  /* ---- Tints & supporting steps ---- */
  --color-cocoa-soft:       #7A4226; /* body text */
  --color-cocoa-deep:       #3F1905; /* deepest brown */
  --color-pink-deep:        #D23B57; /* pressed pink */
  --color-blush-tint:       #FCE0E1; /* gentle background blocks */
  --color-buttercream-tint: #FDEBE2; /* palest cream alt section bg */
  --color-cream-line:       #F1E3DB; /* hairline borders */
  --color-white:            #FFFFFF;

  /* ---- Semantic aliases ---- */
  --bg-page:                var(--color-ivory);
  --bg-section-soft:        var(--color-buttercream-tint);
  --bg-section-warm:        var(--color-buttercream);
  --bg-card:                var(--color-white);
  --bg-card-blush:          var(--color-blush-tint);

  --text-heading:           var(--color-cocoa);
  --text-body:              var(--color-cocoa-soft);
  --text-muted:             #9C7B6B;
  --text-on-pink:           var(--color-ivory);
  --text-on-cocoa:          var(--color-ivory);
  --text-link:              var(--color-pink);
  --text-link-hover:        var(--color-pink-deep);

  --accent:                 var(--color-pink);
  --accent-hover:           var(--color-raspberry);
  --accent-press:           var(--color-pink-deep);

  --border-subtle:          var(--color-cream-line);
  --border-blush:           var(--color-blush);

  /* ---- Radii ---- */
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   22px;
  --radius-xl:   32px;
  --radius-pill: 999px;

  /* ---- Shadows (warm, cocoa-tinted) ---- */
  --shadow-sm:   0 1px 2px rgba(92, 38, 9, 0.06), 0 1px 3px rgba(92, 38, 9, 0.05);
  --shadow-card: 0 6px 18px rgba(92, 38, 9, 0.08), 0 2px 6px rgba(92, 38, 9, 0.05);
  --shadow-lg:   0 18px 44px rgba(92, 38, 9, 0.12), 0 6px 14px rgba(92, 38, 9, 0.06);
  --shadow-soft: 0 18px 44px rgba(92, 38, 9, 0.10);
  --shadow-hover:0 18px 44px rgba(92, 38, 9, 0.12);
  --shadow-pink: 0 8px 22px rgba(233, 84, 109, 0.28);

  /* ---- Motion ---- */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:  140ms;
  --dur-base:  220ms;
  --dur-slow:  380ms;

  /* ---- Typography ---- */
  --font-display: 'Playfair Display', 'Iowan Old Style', Georgia, serif;
  --font-body:    'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-script:  'Maytra', 'Broken Heart', 'Brush Script MT', cursive;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extra: 800;
  --fw-black: 900;

  --ls-tight:   -0.02em;
  --ls-eyebrow: 0.18em;

  /* ---- Layout ---- */
  --container-max: 1200px;
  --container-pad: 24px;
}

/* ----------------------------------------------------------------------------
   2. RESET / BASE
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* keep anchored sections clear of the sticky header */
  scroll-padding-top: 86px;
}

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

input,
textarea,
button,
select { font-family: inherit; }

a { color: var(--text-link); }

::selection { background: var(--color-blush); color: #fff; }

/* Visually-hidden but available to assistive tech */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

[hidden] { display: none !important; }

/* ----------------------------------------------------------------------------
   3. KEYFRAMES (names + values preserved from prototype)
   -------------------------------------------------------------------------- */
@keyframes bbFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes bbPop {
  0%   { transform: scale(0.4); }
  60%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}
@keyframes bbFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

/* ----------------------------------------------------------------------------
   4. LAYOUT HELPERS
   -------------------------------------------------------------------------- */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}
.container--narrow { max-width: 1080px; }
.container--reviews { max-width: 820px; text-align: center; position: relative; }
.container--about { max-width: 1100px; }

/* Section vertical rhythm + bands */
.section { padding: 84px 0; }
.section--shop    { background: var(--bg-section-soft); }
.section--gallery { background: var(--bg-section-warm); padding: 84px 0; }
.section--faq     { background: var(--bg-section-soft); }
.section--bespoke { padding: 88px 0; position: relative; overflow: hidden; }
.section--reviews { padding: 88px 0; position: relative; overflow: hidden; }
.section--about   { padding: 88px 0; }

/* Section headings shared chrome */
.section__head { text-align: center; margin-bottom: 14px; }
.section__head--stacked { margin-bottom: 44px; }

.eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  font-size: 13px;
  font-weight: var(--fw-extra);
  color: var(--accent);
}
.script-accent--deep { color: var(--color-pink-deep); margin-bottom: 8px; }
.section__head--stacked .script-accent { margin-bottom: 10px; }

.section__title {
  font-family: var(--font-display);
  color: var(--text-heading);
  font-weight: var(--fw-extra);
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.1;
  text-align: center;
  margin: 0 auto 12px;
  max-width: 680px;
  letter-spacing: var(--ls-tight);
}
.section--bespoke .section__title { max-width: 700px; }
.section__title--faq { max-width: none; font-size: clamp(28px, 3.8vw, 44px); }

.section__lead {
  text-align: center;
  color: var(--text-body);
  font-size: 18px;
  max-width: 560px;
  margin: 0 auto 48px;
  line-height: 1.6;
}
.section--bespoke .section__lead { margin-bottom: 44px; }

/* Scribble accent line */
.script-accent {
  font-family: var(--font-script);
  font-weight: var(--fw-bold);
  color: var(--accent);
  font-size: 32px;
  margin: 0;
}
.script-accent--lg { font-size: 34px; }

/* ----------------------------------------------------------------------------
   5. BUTTONS (shared)
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  font-weight: var(--fw-extra);
  font-size: 16px;
  border-radius: var(--radius-pill);
  transition: transform var(--dur-fast), background var(--dur-fast), box-shadow var(--dur-fast);
}

/* Primary: solid pink CTA */
.btn--primary {
  padding: 15px 26px;
  background: var(--accent);
  color: var(--text-on-pink);
  box-shadow: var(--shadow-pink);
}
.btn--primary:hover {
  background: var(--accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(233, 84, 109, 0.36);
}
.btn--primary:active {
  background: var(--accent-press);
  transform: scale(0.98);
}

/* Ghost: white pill with blush inset ring */
.btn--ghost {
  padding: 15px 26px;
  background: #fff;
  color: var(--text-heading);
  box-shadow: inset 0 0 0 1.5px var(--color-blush);
}
.btn--ghost:hover {
  background: var(--color-blush-tint);
  transform: translateY(-2px);
}
.btn--ghost:active { transform: scale(0.98); }

/* Cocoa: gallery instagram button */
.btn--cocoa {
  padding: 12px 22px;
  background: var(--color-cocoa);
  color: var(--text-on-cocoa);
  font-size: 14px;
  transition: transform 150ms, background 150ms;
}
.btn--cocoa:hover {
  background: var(--color-cocoa-deep);
  transform: translateY(-2px);
}

/* Add-to-cart: smaller pink pill inside product cards */
.btn--add {
  padding: 11px 18px;
  font-size: 14px;
  gap: 7px;
  background: var(--accent);
  color: var(--text-on-pink);
  box-shadow: 0 6px 16px rgba(233, 84, 109, 0.26);
  transition: transform 150ms, background 150ms;
}
.btn--add:hover {
  background: var(--accent-hover);
  transform: translateY(-2px);
}
.btn--add:active {
  background: var(--accent-press);
  transform: scale(0.97);
}

/* ----------------------------------------------------------------------------
   6. GRADIENT PLACEHOLDERS (image stand-ins)
   -------------------------------------------------------------------------- */
.placeholder {
  position: relative;
  background: var(--tint);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.placeholder__highlight {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 78% 20%, rgba(255, 255, 255, 0.35), transparent 44%);
  pointer-events: none;
}
.placeholder__label {
  position: relative;
  font-family: var(--font-script);
  font-weight: var(--fw-bold);
  color: rgba(255, 255, 255, 0.94);
  font-size: 26px;
  text-align: center;
  padding: 0 16px;
  line-height: 1.15;
  text-shadow: 0 1px 8px rgba(92, 38, 9, 0.18);
}
/* Real photo that fills a placeholder / gallery frame (clipped to the frame's
   rounded corners by the parent's overflow:hidden). The parent keeps its --tint
   gradient as a graceful fallback while the image loads or if it 404s. */
.media-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ----------------------------------------------------------------------------
   7. HEADER (sticky translucent blur)
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(253, 252, 252, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-subtle);
}
.site-header__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* Availability strip. Deliberately evergreen, with no dates, so it can never go
   stale. The lead times here are the same floors app.js puts on the pickers. */
.announce {
  background: linear-gradient(90deg, var(--color-blush-tint), var(--color-buttercream-tint));
  border-bottom: 1px solid var(--color-cream-line);
}
.announce__text {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 9px 24px;
  text-align: center;
  font-size: 14px;
  line-height: 1.45;
  color: var(--color-cocoa);
}
.announce__text strong {
  font-weight: 800;
  color: var(--color-pink-deep);
}
.announce__sep {
  display: inline-block;
  margin: 0 9px;
  color: var(--color-blush);
}
@media (max-width: 560px) {
  .announce__text { font-size: 13px; padding: 8px 16px; }
  /* Stack the two clauses rather than let a lone word wrap awkwardly. */
  .announce__sep { display: block; margin: 2px 0 0; font-size: 0; line-height: 0; }
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
}
.brand__logo { height: 50px; width: 50px; object-fit: contain; }
.brand__name {
  font-family: var(--font-script);
  font-weight: var(--fw-bold);
  font-size: 36px;
  color: var(--color-cocoa);
  line-height: 1;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 30px;
}

/* Desktop nav links */
.site-nav {
  display: flex;
  align-items: center;
  gap: 30px;
}
.site-nav__link {
  text-decoration: none;
  font-size: 15px;
  font-weight: var(--fw-bold);
  color: var(--color-cocoa);
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: color 160ms;
}
.site-nav__link:hover,
.site-nav__link:focus-visible { color: var(--accent); }
/* Current-page nav link (set per page via aria-current="page") */
.site-nav__link[aria-current="page"] { color: var(--accent); font-weight: var(--fw-bold); }

/* Header CTA: reuses .btn--primary; trim its padding so it sits neatly in the bar */
.site-header__cta { padding: 11px 20px; font-size: 15px; }

/* Cart button */
.cart-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  border: 0;
  cursor: pointer;
  background: var(--color-blush-tint);
  color: var(--color-cocoa);
  transition: background 160ms, transform 160ms;
}
.cart-button:hover {
  background: var(--color-blush);
  transform: translateY(-1px);
}
.cart-button__count {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: var(--fw-extra);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(233, 84, 109, 0.4);
  animation: bbPop 280ms ease;
}

/* Hamburger toggle (hidden until ≤820) */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  border: 0;
  cursor: pointer;
  background: var(--color-blush-tint);
  color: var(--color-cocoa);
  transition: background 160ms;
}
.nav-toggle:hover { background: var(--color-blush); }

/* ----------------------------------------------------------------------------
   8. HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
}
.hero__blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.hero__blob--top {
  top: -140px;
  right: -90px;
  width: 540px;
  height: 540px;
  background: radial-gradient(circle, rgba(248, 160, 164, 0.32), transparent 70%);
}
.hero__blob--bottom {
  bottom: -120px;
  left: -100px;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(251, 203, 184, 0.4), transparent 70%);
}
.hero__inner {
  position: relative;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 76px 24px 90px;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}
.hero__script {
  font-size: 38px;
  margin: 0 0 6px;
}
.hero__title {
  font-family: var(--font-display);
  color: var(--text-heading);
  font-weight: var(--fw-extra);
  font-size: clamp(40px, 5vw, 66px);
  line-height: 1.04;
  letter-spacing: var(--ls-tight);
  margin: 0 0 18px;
}
.hero__lead {
  font-size: 19px;
  color: var(--text-body);
  max-width: 480px;
  margin: 0 0 30px;
  line-height: 1.62;
}
.hero__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 30px;
}
.hero__points {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.hero__point {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: var(--fw-bold);
  color: var(--text-body);
}
.hero__point-heart { color: var(--accent); font-size: 17px; }

.hero__media { position: relative; }
/* Soft pink glow blooming behind the hero photo */
.hero__media::before {
  content: "";
  position: absolute;
  inset: -7% -9%;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(60% 56% at 50% 48%,
    rgba(233, 84, 109, 0.32),
    rgba(248, 160, 164, 0.20) 55%,
    transparent 80%);
  filter: blur(40px);
  pointer-events: none;
}
.placeholder--hero {
  position: relative;
  z-index: 1;
  border-radius: var(--radius-xl);
  box-shadow: 0 18px 44px rgba(92, 38, 9, 0.14), 0 6px 14px rgba(92, 38, 9, 0.06);
  aspect-ratio: 4 / 5;
  transform: rotate(1.4deg);
}
.placeholder--hero .placeholder__highlight {
  background: radial-gradient(circle at 76% 22%, rgba(255, 255, 255, 0.4), transparent 46%);
}
.placeholder__label--hero {
  font-size: 34px;
  padding: 0 20px;
  line-height: 1.2;
  text-shadow: 0 1px 10px rgba(92, 38, 9, 0.22);
}
.hero__badge {
  position: absolute;
  bottom: -18px;
  left: -22px;
  background: #fff;
  border-radius: 18px;
  padding: 14px 18px;
  box-shadow: 0 18px 44px rgba(92, 38, 9, 0.12);
  display: flex;
  align-items: center;
  gap: 12px;
  transform: rotate(-2deg);
}
.hero__badge-star {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-pill);
  background: var(--color-blush-tint);
  color: var(--accent);
  font-size: 22px;
}
.hero__badge-title {
  margin: 0;
  font-weight: var(--fw-extra);
  color: var(--color-cocoa);
  font-size: 15px;
}
.hero__badge-sub {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
}

/* ----------------------------------------------------------------------------
   8b. HERO MOTION
   Entrance: the script line slides in, the title settles word by word with a
   small twist, then the lead, buttons and points follow; the photo pops in.
   Ambient: small hearts drift up a fixed layer that spans the whole homepage
   (app.js injects .page-hearts), the glow behind the photo pulses, and the
   primary button gives off a soft ripple. The photo parallaxes on scroll and
   tilts toward a fine pointer (app.js sets an inline transform on
   .hero__media).
   Phone-first rules: only transform and opacity are animated, fourteen hearts
   at most and eight on phones, the hearts pause with the tab (.is-paused) and
   the hero's own ambient layers pause while it is off screen (.is-offscreen),
   and section 20 collapses the lot under prefers-reduced-motion.
   -------------------------------------------------------------------------- */
@keyframes heroSlideIn {
  from { opacity: 0; transform: translateX(-18px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes heroWordSettle {
  from { opacity: 0; transform: translateY(0.5em) rotate(5deg); }
  to   { opacity: 1; transform: translateY(0) rotate(0); }
}
@keyframes heroPhotoPop {
  from { opacity: 0; transform: rotate(-3deg) scale(0.82); }
  to   { opacity: 1; transform: rotate(1.4deg) scale(1); }
}
@keyframes heroGlowPulse {
  from { opacity: 0.55; transform: scale(0.96); }
  to   { opacity: 1;    transform: scale(1.04); }
}
@keyframes heroRipple {
  0%        { opacity: 0.7; transform: scale(1); }
  60%, 100% { opacity: 0;   transform: scale(1.22, 1.5); }
}
@keyframes heartRise {
  0%       { opacity: 0;    transform: translate3d(0, 0, 0); }
  8%, 85%  { opacity: 0.4; }
  100%     { opacity: 0;    transform: translate3d(0, -115vh, 0); }
}
@keyframes heartSway {
  from { transform: translate3d(-14px, 0, 0) rotate(-12deg); }
  to   { transform: translate3d(14px, 0, 0)  rotate(12deg); }
}

/* entrance */
.hero__script  { animation: heroSlideIn 700ms var(--ease-out) 40ms both; }
.hero__word {
  display: inline-block;
  transform-origin: 0 100%;
  animation: heroWordSettle 760ms cubic-bezier(0.22, 1.2, 0.36, 1) both;
}
.hero__word:nth-child(1) { animation-delay: 160ms; }
.hero__word:nth-child(2) { animation-delay: 250ms; }
.hero__word:nth-child(3) { animation-delay: 340ms; }
.hero__word:nth-child(4) { animation-delay: 430ms; }
.hero__word:nth-child(5) { animation-delay: 520ms; }
.hero__lead    { animation: heroSlideIn 700ms var(--ease-out) 560ms both; }
.hero__actions { animation: heroSlideIn 700ms var(--ease-out) 680ms both; }
.hero__point   { animation: heroSlideIn 600ms var(--ease-out) both; }
.hero__point:nth-child(1) { animation-delay: 820ms; }
.hero__point:nth-child(2) { animation-delay: 930ms; }
.hero__point:nth-child(3) { animation-delay: 1040ms; }
.placeholder--hero { animation: heroPhotoPop 900ms cubic-bezier(0.34, 1.4, 0.64, 1) 260ms both; }

/* ambient */
.hero__media::before { animation: heroGlowPulse 3.6s ease-in-out infinite alternate; }
.hero__actions .btn--primary {
  position: relative;
  isolation: isolate;
}
.hero__actions .btn--primary::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  box-shadow: 0 0 0 3px rgba(233, 84, 109, 0.55);
  opacity: 0;
  animation: heroRipple 2.8s ease-out 1.6s infinite;
}
/* Hearts live in their own fixed layer so they drift past every section of the
   homepage, not just the hero. Above the sections, below the header (30), the
   WhatsApp button (40) and the cart (50/60). */
.page-hearts {
  position: fixed;
  inset: 0;
  z-index: 20;
  overflow: hidden;
  pointer-events: none;
}
.page-hearts__heart {
  position: absolute;
  left: var(--x);
  bottom: -40px;
  font-size: var(--size);
  line-height: 1;
  color: var(--colour);
  opacity: 0;
  pointer-events: none;
  user-select: none;
  animation: heartRise var(--rise) linear infinite;
  animation-delay: var(--delay);
}
.page-hearts__heart > span {
  display: block;
  animation: heartSway var(--sway) ease-in-out infinite alternate;
}
.page-hearts.is-paused .page-hearts__heart,
.page-hearts.is-paused .page-hearts__heart > span {
  animation-play-state: paused;
}
.hero.is-offscreen .hero__media::before,
.hero.is-offscreen .hero__actions .btn--primary::after {
  animation-play-state: paused;
}

/* input-driven: app.js writes the parallax/tilt transform inline */
.hero__media {
  transform-style: preserve-3d;
  transition: transform 160ms linear;
}

/* ----------------------------------------------------------------------------
   9. SHOP
   -------------------------------------------------------------------------- */
.shop-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.product-card {
  background: #fff;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  transition: transform 200ms, box-shadow 200ms;
}
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}
.product-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
}
.product-card__badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: #fff;
  font-size: 12px;
  font-weight: var(--fw-extra);
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  box-shadow: 0 2px 6px rgba(92, 38, 9, 0.1);
  z-index: 1;
}
.product-card__body {
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.product-card__name {
  font-family: var(--font-display);
  color: var(--color-cocoa);
  font-size: 22px;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.product-card__blurb {
  color: var(--text-body);
  font-size: 15px;
  line-height: 1.55;
  margin: 0 0 18px;
  flex: 1;
}
.product-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.product-card__price {
  font-size: 22px;
  font-weight: var(--fw-extra);
  color: var(--accent);
}
/* "From £x" tier label inside the hub category cards */
.product-card__price--from { display: inline-flex; align-items: baseline; gap: 6px; }
.product-card__price--from .product-card__price-pre {
  font-size: 13px;
  font-weight: var(--fw-bold);
  color: var(--text-body);
  letter-spacing: 0.01em;
}

/* Hub category cards: a touch more breathing room than a 6-up product grid */
.shop-grid--hub .product-card__body { padding: 24px 24px 26px; }
.shop-grid--hub .product-card__blurb { font-size: 15.5px; }

/* Box-size segmented toggle (cupcakes: 6 vs 12) -------------------------------
   Purely cosmetic; app.js rewrites the add-to-cart button's data-id/name/price
   when a size is chosen, so the cart core stays unchanged. */
.size-toggle {
  display: inline-flex;
  align-self: center; /* hug the three pills and centre them in the card */
  gap: 4px;
  padding: 4px;
  margin: 0 0 16px;
  background: var(--color-blush-tint);
  border-radius: var(--radius-pill);
}
.size-opt {
  border: 0;
  cursor: pointer;
  background: transparent;
  color: var(--color-cocoa);
  font-weight: var(--fw-bold);
  font-size: 14px;
  padding: 8px 13px;
  border-radius: var(--radius-pill);
  transition: background 160ms, color 160ms, box-shadow 160ms;
  white-space: nowrap; /* three sizes per card, so keep "Box of 12" on one line */
}
.size-opt:hover { color: var(--accent); }
.size-opt.is-selected {
  background: #fff;
  color: var(--accent);
  box-shadow: 0 2px 6px rgba(92, 38, 9, 0.10);
}

/* Centered note under a shop grid (dietary options, etc.) */
.shop-note {
  text-align: center;
  color: var(--text-body);
  font-size: 15px;
  line-height: 1.6;
  max-width: 620px;
  margin: 36px auto 0;
}
.shop-note strong { color: var(--color-cocoa); }

/* ----------------------------------------------------------------------------
   10. BESPOKE ENQUIRY (stepper + steps + chips)
   -------------------------------------------------------------------------- */
.bespoke__blob {
  position: absolute;
  top: 40px;
  left: -120px;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(248, 160, 164, 0.22), transparent 70%);
  pointer-events: none;
}
.section--bespoke .section__head { margin-bottom: 10px; }
.section--bespoke .container { position: relative; }

.enquiry-card {
  background: #fff;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

/* Stepper (top bar of the enquiry card) */
.stepper {
  display: flex;
  background: var(--color-buttercream-tint);
  border-bottom: 1px solid var(--border-subtle);
  list-style: none;
  margin: 0;
  padding: 0;
}
.stepper__item {
  flex: 1;
  padding: 20px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  border-bottom: 3px solid transparent;
}
.stepper__item.is-active { border-bottom-color: var(--accent); }
.stepper__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-pill);
  background: var(--color-buttercream);
  color: var(--text-body);
  font-weight: var(--fw-extra);
  font-size: 14px;
  flex: none;
}
.stepper__item.is-active .stepper__num,
.stepper__item.is-done .stepper__num {
  background: var(--accent);
  color: var(--text-on-pink);
}
.stepper__label {
  font-weight: var(--fw-extra);
  font-size: 14px;
  color: var(--text-muted);
}
.stepper__item.is-active .stepper__label { color: var(--color-cocoa); }

/* Card body holding the step panels */
.enquiry-card__body { padding: 36px 36px 32px; }

.enq-step { animation: bbFadeUp 300ms ease; }
.enq-step__title {
  font-family: var(--font-display);
  color: var(--color-cocoa);
  font-size: 25px;
  margin: 0 0 4px;
}
.enq-step__intro {
  color: var(--text-body);
  font-size: 15px;
  margin: 0 0 24px;
}

/* Field labels + inputs (shared by enquiry & checkout) */
.field-label {
  display: block;
  font-weight: var(--fw-extra);
  color: var(--color-cocoa);
  font-size: 14px;
  margin-bottom: 12px;
}
.field-label__hint { font-weight: var(--fw-semibold); color: var(--text-muted); }

.field-input {
  width: 100%;
  padding: 13px 15px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border-subtle);
  background: var(--color-ivory);
  font-size: 15px;
  color: var(--color-cocoa);
  transition: border-color 160ms, box-shadow 160ms;
}
.field-input--date { max-width: 320px; }
.field-input--textarea { resize: vertical; line-height: 1.5; }
.field-input::placeholder { color: var(--text-muted); }
.field-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(233, 84, 109, 0.14);
}

.field-note {
  font-size: 13px;
  color: var(--text-muted);
  margin: 10px 0 0;
}

/* Chip rows + chips */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
}
/* labels that follow a chip-row sit a touch tighter (matches prototype spacing) */
.enq-step .field-label { margin-top: 0; }

.enq-chip {
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  border: 0;
  cursor: pointer;
  font-weight: var(--fw-bold);
  font-size: 14px;
  background: var(--color-buttercream-tint);
  color: var(--color-cocoa);
  box-shadow: inset 0 0 0 1.5px var(--border-subtle);
  transition: all 150ms;
}
.enq-chip.is-selected {
  background: var(--accent);
  color: var(--text-on-pink);
  box-shadow: 0 6px 16px rgba(233, 84, 109, 0.28);
}

/* contact grid (step 3) */
.enq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}
.enq-grid__full { grid-column: 1 / -1; }
.enq-grid .field-label { margin-bottom: 7px; }

/* upload dropzone */
.upload {
  border: 2px dashed var(--color-blush);
  border-radius: var(--radius-md);
  padding: 28px;
  text-align: center;
  background: var(--color-buttercream-tint);
  cursor: pointer;
  transition: background 160ms;
}
.upload:hover { background: var(--color-blush-tint); }
.upload__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--accent);
  margin-bottom: 10px;
}
.upload__title {
  margin: 0;
  font-weight: var(--fw-extra);
  color: var(--color-cocoa);
  font-size: 15px;
}
.upload__sub {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--text-muted);
}

/* Turnstile widget spacing (sits above the form actions) */
.cf-turnstile { margin-top: 18px; }

/* Inline form error (failed submit / missing anti-spam check) */
.form-error {
  margin: 14px 0 0;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: rgba(210, 59, 87, 0.08);
  border: 1px solid rgba(210, 59, 87, 0.25);
  color: var(--color-pink-deep);
  font-size: 14px;
  font-weight: var(--fw-semibold);
  line-height: 1.45;
}
.form-error a { color: var(--color-pink-deep); font-weight: var(--fw-bold); }

/* step nav row */
.enq-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid var(--border-subtle);
}
.enq-nav__back {
  padding: 13px 22px;
  border-radius: var(--radius-pill);
  border: 0;
  cursor: pointer;
  background: transparent;
  color: var(--text-muted);
  font-weight: var(--fw-extra);
  font-size: 15px;
  transition: color 160ms;
}
.enq-nav__back:hover { color: var(--color-pink-deep); }
.enq-nav__next {
  padding: 14px 28px;
  font-size: 15px;
}
/* push the Next button to the right when Back is hidden */
.enq-nav__back[hidden] + .enq-nav__next { margin-left: auto; }

/* Enquiry success panel */
.enquiry-success {
  padding: 72px 32px;
  text-align: center;
  animation: bbFadeUp 360ms ease;
}
.success-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  border-radius: var(--radius-pill);
  background: var(--color-blush-tint);
  color: var(--accent);
  margin-bottom: 22px;
}
.enquiry-success__title {
  font-family: var(--font-display);
  color: var(--color-cocoa);
  font-weight: var(--fw-extra);
  font-size: 36px;
  margin: 0 0 12px;
}
.enquiry-success__text {
  font-size: 18px;
  color: var(--text-body);
  max-width: 480px;
  margin: 0 auto 28px;
  line-height: 1.6;
}
.enquiry-success .btn--ghost { padding: 14px 26px; font-size: 15px; }

/* ----------------------------------------------------------------------------
   11. GALLERY
   -------------------------------------------------------------------------- */
.gallery__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 38px;
}
.gallery__title {
  font-family: var(--font-display);
  color: var(--color-cocoa);
  font-weight: var(--fw-extra);
  font-size: clamp(28px, 3.6vw, 42px);
  margin: 0;
  letter-spacing: var(--ls-tight);
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.gallery-card {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  display: block;
  box-shadow: 0 6px 18px rgba(92, 38, 9, 0.1);
}
.gallery-card .placeholder__highlight {
  background: radial-gradient(circle at 75% 20%, rgba(255, 255, 255, 0.35), transparent 46%);
}
.gallery-card__tag {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  padding: 0 14px;
  /* Prototype gallery tags use 0.92 alpha (vs 0.94 on other placeholder labels). */
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 8px rgba(92, 38, 9, 0.18);
}
.gallery-card__caption {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(63, 25, 5, 0.78), transparent 58%);
  opacity: 0;
  display: flex;
  align-items: flex-end;
  padding: 16px;
  transition: opacity 220ms;
  color: #fff;
  font-size: 14px;
  font-weight: var(--fw-semibold);
  line-height: 1.4;
}
.gallery-card:hover .gallery-card__caption,
.gallery-card:focus-visible .gallery-card__caption { opacity: 1; }
/* Touch / no-hover devices can't reveal the caption on hover, so show it always. */
@media (hover: none) {
  .gallery-card__caption { opacity: 1; }
}

/* ----------------------------------------------------------------------------
   12. REVIEWS
   -------------------------------------------------------------------------- */
.section--reviews .script-accent { margin-bottom: 10px; }
.reviews__title {
  font-family: var(--font-display);
  color: var(--color-cocoa);
  font-weight: var(--fw-extra);
  font-size: clamp(28px, 3.6vw, 42px);
  margin: 0 0 40px;
  letter-spacing: var(--ls-tight);
}
.reviews__stage { position: relative; }

.review-track {
  background: #fff;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-soft);
  padding: 48px 44px;
  min-height: 230px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.review {
  margin: 0;
  display: flex;
  flex-direction: column;
  animation: bbFadeUp 300ms ease;
}
.review__heart {
  color: var(--accent);
  font-size: 34px;
  line-height: 1;
}
.review__quote {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--color-cocoa);
  font-size: clamp(20px, 2.6vw, 27px);
  line-height: 1.45;
  margin: 14px 0 22px;
}
.review__name {
  font-weight: var(--fw-extra);
  color: var(--color-pink-deep);
  margin: 0;
  font-size: 16px;
}
.review__loc {
  color: var(--text-muted);
  margin: 4px 0 0;
  font-size: 14px;
}
.review figcaption { margin: 0; }

.reviews__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 26px;
}
.review-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-pill);
  border: 0;
  cursor: pointer;
  background: #fff;
  color: var(--color-cocoa);
  box-shadow: 0 6px 18px rgba(92, 38, 9, 0.08);
  transition: transform 150ms, background 150ms;
}
.review-nav:hover {
  background: var(--color-blush-tint);
  transform: translateY(-2px);
}
.review-dots {
  display: flex;
  gap: 9px;
}
.review-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-pill);
  border: 0;
  cursor: pointer;
  background: var(--color-blush);
  transition: all 200ms;
  padding: 0;
}
.review-dot.is-active {
  width: 26px;
  background: var(--accent);
}

/* ----------------------------------------------------------------------------
   13. FAQ ACCORDION
   -------------------------------------------------------------------------- */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.faq-item {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 6px 18px rgba(92, 38, 9, 0.07);
  overflow: hidden;
}
.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
}
.faq-question__text {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  color: var(--color-cocoa);
  font-size: 19px;
}
.faq-question__icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  background: var(--color-blush-tint);
  color: var(--accent);
  transform: rotate(0deg);
  transition: transform 240ms;
}
.faq-item.is-open .faq-question__icon { transform: rotate(45deg); }
.faq-answer {
  padding: 0 24px 24px;
  animation: bbFadeUp 260ms ease;
}
.faq-answer p {
  margin: 0;
  color: var(--text-body);
  font-size: 16px;
  line-height: 1.65;
}

/* ----------------------------------------------------------------------------
   14. ABOUT / MEET THE BAKER
   -------------------------------------------------------------------------- */
.about-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 56px;
  align-items: center;
}
.about__media { position: relative; }
.placeholder--about {
  position: relative;
  border-radius: var(--radius-xl);
  box-shadow: 0 18px 44px rgba(92, 38, 9, 0.14);
  aspect-ratio: 4 / 5;
  transform: rotate(-1.6deg);
}
.placeholder--about .placeholder__highlight {
  background: radial-gradient(circle at 70% 24%, rgba(255, 255, 255, 0.4), transparent 48%);
}
.placeholder__label--about {
  font-size: 30px;
  padding: 0 22px;
  line-height: 1.2;
  text-shadow: 0 1px 10px rgba(92, 38, 9, 0.2);
}
.about__badge {
  position: absolute;
  bottom: -16px;
  right: -16px;
  background: #fff;
  border-radius: 18px;
  padding: 14px 18px;
  box-shadow: 0 18px 44px rgba(92, 38, 9, 0.12);
  transform: rotate(2deg);
}
.about__badge-text {
  margin: 0;
  font-family: var(--font-script);
  font-weight: var(--fw-bold);
  color: var(--accent);
  font-size: 24px;
}
.about__copy .script-accent { margin-bottom: 12px; }
.about__title {
  font-family: var(--font-display);
  color: var(--color-cocoa);
  font-weight: var(--fw-extra);
  font-size: clamp(30px, 4vw, 46px);
  margin: 0 0 20px;
  line-height: 1.1;
  letter-spacing: var(--ls-tight);
}
.about__para {
  font-size: 18px;
  color: var(--text-body);
  line-height: 1.7;
  margin: 0 0 18px;
}
.about__para:last-of-type { margin-bottom: 28px; }
.about__stats {
  display: flex;
  gap: 34px;
  flex-wrap: wrap;
}
.stat__value {
  font-family: var(--font-display);
  font-weight: var(--fw-extra);
  color: var(--accent);
  font-size: 34px;
  margin: 0;
}
.stat__label {
  margin: 2px 0 0;
  font-size: 14px;
  font-weight: var(--fw-bold);
  color: var(--text-body);
}

/* ----------------------------------------------------------------------------
   14b. CUPCAKE LIST (flavours as a numbered menu, lifted from front-page prototype A)
   -------------------------------------------------------------------------- */
.section--cupcakes {
  padding: 84px 0;
  border-top: 1px solid var(--border-subtle);
}
.cupcakes-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}
.cupcakes__title {
  font-family: var(--font-display);
  color: var(--text-heading);
  font-weight: var(--fw-extra);
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.1;
  letter-spacing: var(--ls-tight);
  margin: 0 0 16px;
}
.cupcakes__lede {
  font-size: 17px;
  line-height: 1.65;
  max-width: 52ch;
  margin: 0 0 18px;
}
.cupcakes__price {
  font-size: 15.5px;
  margin: 0 0 22px;
}
.cupcakes__price strong { color: var(--text-heading); }
.cupcakes__cta { margin-top: 6px; }

.flavour-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: flavour;
}
.flavour-list li {
  counter-increment: flavour;
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 14px 0;
  border-top: 1px solid var(--border-subtle);
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: clamp(24px, 2.8vw, 38px);
  color: var(--text-heading);
  letter-spacing: -0.01em;
}
.flavour-list li::before {
  content: counter(flavour, decimal-leading-zero);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: var(--fw-extra);
  letter-spacing: 0.14em;
  color: var(--accent);
  min-width: 2.2em;
}
.flavour-list li:last-child { border-bottom: 1px solid var(--border-subtle); }

.cupcakes-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: clamp(36px, 5vw, 64px);
}
.cupcakes-strip__item { margin: 0; }
.cupcakes-strip__photo {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-md);
  background: var(--bg-section-soft);
}
.cupcakes-strip__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cupcakes-strip__caption {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-medium);
  font-size: 15px;
  color: var(--text-body);
  margin: 10px 0 0;
}

/* ----------------------------------------------------------------------------
   15. FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--color-cocoa);
  color: var(--color-buttercream);
}
.site-footer__grid {
  padding: 60px 24px 40px;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 44px;
}
.site-footer__brand-row {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 16px;
}
.site-footer__logo { height: 64px; width: 64px; object-fit: contain; }
.site-footer__name {
  font-family: var(--font-script);
  font-weight: var(--fw-bold);
  font-size: 30px;
  color: var(--color-ivory);
}
.site-footer__blurb {
  color: var(--color-buttercream);
  max-width: 320px;
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}
.site-footer__privacy {
  display: inline-block;
  margin-top: 18px;
  font-size: 13px;
  color: rgba(251, 203, 184, 0.7);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 150ms;
}
.site-footer__privacy:hover,
.site-footer__privacy:focus-visible { color: var(--color-blush); }
.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: 0;
}
/* The links sit in a flex row now, so drop the per-link top margin and let the
   row own the spacing. */
.site-footer__links .site-footer__privacy { margin-top: 18px; }
/* Food hygiene rating badge: official FSA artwork, never recoloured or cropped */
.fhrs {
  display: inline-block;
  margin: 0;
  flex: none;
  line-height: 0;
  border-radius: 8px;
  transition: transform 0.2s ease;
}
.fhrs:hover,
.fhrs:focus-visible {
  transform: translateY(-2px);
}
.fhrs__badge {
  display: block;
  width: 150px;
  height: auto;
}
.site-footer__reg {
  margin: 0;
  max-width: 330px;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(251, 203, 184, 0.7);
}
.site-footer__heading {
  color: var(--color-ivory);
  font-family: var(--font-display);
  font-size: 18px;
  margin: 0 0 14px;
}
.site-footer__link {
  display: block;
  text-decoration: none;
  color: var(--color-buttercream);
  font-size: 15px;
  padding: 5px 0;
  transition: color 150ms;
}
.site-footer__link:hover,
.site-footer__link:focus-visible { color: var(--color-blush); }
.site-footer__contact {
  color: var(--color-buttercream);
  font-size: 15px;
  margin: 0 0 7px;
}
.site-footer__contact:last-child { margin-bottom: 0; }
.site-footer__contact a {
  color: var(--color-buttercream);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.site-footer__contact a:hover,
.site-footer__contact a:focus-visible { color: var(--color-blush); }
.site-footer__legal {
  border-top: 1px solid rgba(253, 252, 252, 0.15);
}
/* The divider stays full-bleed, but the row inside it is a .container so the
   badge and the Binge Built credit line up with the columns above rather than
   with the window edges. */
.site-footer__legal-inner {
  padding: 20px var(--container-pad);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px 32px;
}
/* Hygiene rating: badge and the registration line side by side, so the pair
   costs one row instead of two and the Binge Built credit stays level with it. */
.site-footer__rating {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Binge Built credit: bottom-aligned, logo to the right of the text */
.bb-credit {
  display: inline-flex;
  align-items: flex-end;
  gap: 12px;
  text-decoration: none;
  transition: opacity 200ms ease;
  flex: none;
  margin-left: auto;
}
.bb-credit:hover,
.bb-credit:focus-visible { opacity: 0.7; }
.bb-credit__text {
  font-size: 12px;
  color: rgba(251, 203, 184, 0.7);
  text-align: right;
}
.bb-credit__logo { height: 36px; width: auto; display: block; flex: none; }

/* ----------------------------------------------------------------------------
   16. FLOATING WHATSAPP
   -------------------------------------------------------------------------- */
.whatsapp-fab {
  position: fixed;
  bottom: 26px;
  left: 26px;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: var(--radius-pill);
  background: #25D366;
  box-shadow: 0 10px 26px rgba(37, 211, 102, 0.42);
  animation: bbFloat 3.4s ease-in-out infinite;
  transition: transform 200ms;
}
.whatsapp-fab:hover { transform: scale(1.08); }

/* ----------------------------------------------------------------------------
   17. CART DRAWER (off-canvas) + STAGES
   -------------------------------------------------------------------------- */
/* Lock background scroll while the drawer is open */
body.cart-open { overflow: hidden; }

.cart-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(63, 25, 5, 0.42);
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms;
}
.cart-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  width: min(440px, 100%);
  background: var(--color-ivory);
  box-shadow: -18px 0 44px rgba(92, 38, 9, 0.18);
  transform: translateX(100%);
  transition: transform 360ms var(--ease-out);
  display: flex;
  flex-direction: column;
}
.cart-drawer.is-open { transform: translateX(0); }

/* Drawer header */
.cart-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-subtle);
  flex: none;
}
.cart-drawer__title {
  font-family: var(--font-display);
  color: var(--color-cocoa);
  font-size: 23px;
  margin: 0;
}
.cart-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-pill);
  border: 0;
  cursor: pointer;
  background: var(--color-blush-tint);
  color: var(--color-cocoa);
  transition: background 150ms;
}
.cart-close:hover { background: var(--color-blush); }

/* Stage switching: only the active stage shows */
.cart-stage {
  flex: 1;
  display: none;
  flex-direction: column;
  min-height: 0;
}
.cart-stage.is-active { display: flex; }

/* Cart stage inner column */
.cart-stage__inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
/* Details / success scroll body */
.cart-stage__scroll {
  flex: 1;
  overflow-y: auto;
  padding: 22px 24px;
}

/* --- Cart stage: filled --- */
.cart-filled {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.cart-items {
  flex: 1;
  overflow-y: auto;
  padding: 18px 24px;
}
.cart-line {
  display: flex;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.cart-line__media {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-md);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}
.cart-line__body { flex: 1; min-width: 0; }
.cart-line__name {
  margin: 0 0 4px;
  font-weight: var(--fw-extra);
  color: var(--color-cocoa);
  font-size: 15px;
}
.cart-line__price {
  margin: 0 0 8px;
  font-size: 14px;
  color: var(--accent);
  font-weight: var(--fw-extra);
}
.cart-line__qty {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cart-qty-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  border: 0;
  cursor: pointer;
  background: var(--color-blush-tint);
  color: var(--color-cocoa);
  font-weight: var(--fw-extra);
  transition: background 150ms;
}
.cart-qty-btn:hover { background: var(--color-blush); }
.cart-line__count {
  min-width: 20px;
  text-align: center;
  font-weight: var(--fw-extra);
  color: var(--color-cocoa);
  font-size: 15px;
}
.cart-line__remove {
  margin-left: auto;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: var(--fw-bold);
  text-decoration: underline;
  transition: color 150ms;
}
.cart-line__remove:hover { color: var(--color-pink-deep); }

/* Cart subtotal / total footer block (cart + details stages) */
.cart-summary {
  flex: none;
  padding: 20px 24px;
  border-top: 1px solid var(--border-subtle);
  background: var(--color-buttercream-tint);
}
.cart-summary--details { padding: 18px 24px; }
.cart-summary__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.cart-summary--details .cart-summary__row { margin-bottom: 14px; }
.cart-summary__label {
  font-size: 15px;
  color: var(--text-body);
  font-weight: var(--fw-bold);
}
.cart-summary__value {
  font-family: var(--font-display);
  font-weight: var(--fw-extra);
  color: var(--color-cocoa);
  font-size: 24px;
}
.cart-summary__cta {
  width: 100%;
  padding: 15px;
}
.cart-summary__note {
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
  margin: 12px 0 0;
}
.cart-delivery-note {
  text-align: center;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-muted);
  margin: 8px 0 0;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  background: var(--color-buttercream-tint);
}
.cart-delivery-note.is-earned {
  color: var(--color-pink-deep);
  font-weight: 700;
  background: var(--color-blush-tint);
}
.cart-summary__actions {
  display: flex;
  gap: 10px;
}
.cart-summary__back {
  flex: none;
  padding: 15px 20px;
  font-size: 15px;
}
.cart-summary__place {
  flex: 1;
  padding: 15px;
}

/* --- Cart stage: empty --- */
.cart-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px;
}
.cart-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 74px;
  height: 74px;
  border-radius: var(--radius-pill);
  background: var(--color-blush-tint);
  color: var(--accent);
  margin-bottom: 18px;
}
.cart-empty__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  color: var(--color-cocoa);
  font-size: 22px;
  margin: 0 0 8px;
}
.cart-empty__text {
  color: var(--text-body);
  font-size: 15px;
  margin: 0 0 22px;
  max-width: 260px;
}
.cart-empty .btn--primary { padding: 13px 24px; font-size: 15px; }

/* --- Details stage --- */
.cart-section-label {
  font-weight: var(--fw-extra);
  color: var(--color-cocoa);
  font-size: 15px;
  margin: 0 0 14px;
}
/* tighter labels before non-text-field groups, per prototype */
.cart-section-label + .cart-fields { margin-bottom: 24px; }

.cart-fields {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.field-input--cart {
  background: #fff;
}
.cart-field--date { max-width: none; margin-bottom: 22px; }
/* the date label sits closer to its input */
.cart-section-label + .cart-field--date { margin-top: 0; }

/* optional free-text order notes (allergies / special requests) */
.cart-field--notes { display: block; width: 100%; margin-bottom: 24px; }
.cart-label-opt { font-weight: var(--fw-medium); color: var(--text-muted); }

.co-time-row {
  display: flex;
  gap: 10px;
  margin-bottom: 24px;
}
.co-time {
  flex: 1;
  padding: 13px 10px;
  border-radius: 12px;
  border: 0;
  cursor: pointer;
  background: #fff;
  color: var(--color-cocoa);
  box-shadow: inset 0 0 0 1.5px var(--border-subtle);
  font-weight: var(--fw-extra);
  font-size: 14px;
  transition: all 150ms;
}
.co-time__sub {
  display: block;
  font-weight: var(--fw-semibold);
  font-size: 12px;
  margin-top: 2px;
  opacity: 0.85;
}
.co-time.is-selected {
  background: var(--color-blush-tint);
  box-shadow: inset 0 0 0 2px var(--accent);
}

.co-pay-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 18px;
}
.co-pay {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  text-align: left;
  padding: 16px;
  border-radius: var(--radius-md);
  border: 0;
  cursor: pointer;
  background: #fff;
  box-shadow: inset 0 0 0 1.5px var(--border-subtle);
  transition: all 150ms;
}
.co-pay__radio {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 2px var(--color-blush);
  background: transparent;
  margin-top: 2px;
  transition: box-shadow 150ms, background 150ms;
}
.co-pay__title {
  display: block;
  font-weight: var(--fw-extra);
  color: var(--color-cocoa);
  font-size: 15px;
}
.co-pay__desc {
  display: block;
  font-size: 13px;
  color: var(--text-body);
  margin-top: 3px;
  line-height: 1.45;
}
.co-pay.is-selected {
  background: var(--color-blush-tint);
  box-shadow: inset 0 0 0 2px var(--accent);
}
.co-pay.is-selected .co-pay__radio {
  box-shadow: inset 0 0 0 2px var(--accent);
  background: var(--accent);
}

/* Info note (details + bank) */
.cart-info {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  background: var(--color-buttercream-tint);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 8px;
}
.cart-info--bank {
  width: 100%;
  text-align: left;
  margin-bottom: 22px;
}
.cart-info__icon {
  flex: none;
  color: var(--accent);
  margin-top: 1px;
  display: flex;
}
.cart-info__text {
  margin: 0;
  font-size: 13px;
  color: var(--text-body);
  line-height: 1.5;
}

/* --- Success stage --- */
.cart-success {
  padding: 36px 28px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.success-check--cart {
  width: 80px;
  height: 80px;
  margin-bottom: 20px;
  animation: bbPop 380ms ease;
}
.cart-success__title {
  font-family: var(--font-display);
  color: var(--color-cocoa);
  font-weight: var(--fw-extra);
  font-size: 28px;
  margin: 0 0 10px;
}
.cart-success__text {
  color: var(--text-body);
  font-size: 16px;
  line-height: 1.6;
  margin: 0 0 24px;
  max-width: 320px;
}
.cart-success__text strong { color: var(--color-cocoa); }
.cart-success__card {
  width: 100%;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 6px 18px rgba(92, 38, 9, 0.08);
  padding: 22px;
  text-align: left;
  margin-bottom: 16px;
}
.cart-success__card-title {
  font-weight: var(--fw-extra);
  color: var(--color-cocoa);
  font-size: 15px;
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.cart-success__card-icon { color: var(--accent); display: flex; }
.cart-success__line {
  margin: 0 0 4px;
  font-size: 14px;
  color: var(--text-body);
  line-height: 1.5;
}
.cart-success__line:last-child { margin-bottom: 0; }
.cart-success__line strong { color: var(--color-cocoa); }
.cart-success__cta {
  width: 100%;
  padding: 15px;
}

/* ----------------------------------------------------------------------------
   18. FOCUS VISIBILITY (extends prototype's pink input ring to all controls)
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.enq-chip:focus-visible,
.co-time:focus-visible,
.co-pay:focus-visible,
.review-dot:focus-visible,
.review-nav:focus-visible,
.faq-question:focus-visible,
.cart-close:focus-visible,
.cart-button:focus-visible,
.nav-toggle:focus-visible {
  outline: 3px solid rgba(233, 84, 109, 0.45);
  outline-offset: 2px;
}
textarea:focus-visible,
input:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(233, 84, 109, 0.14);
}

/* ----------------------------------------------------------------------------
   19. RESPONSIVE
   -------------------------------------------------------------------------- */

/* ≤960px: stack hero & about, shrink grids */
@media (max-width: 960px) {
  .section { padding: 68px 0; }
  .section--bespoke,
  .section--reviews,
  .section--about { padding: 68px 0; }

  .hero__inner {
    grid-template-columns: 1fr;
    gap: 44px;
    padding: 56px 24px 70px;
  }
  .hero__media { max-width: 460px; }

  .shop-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }

  .about-grid {
    grid-template-columns: 1fr;
    gap: 44px;
  }
  .about__media { max-width: 420px; }

  .site-footer__grid { grid-template-columns: 1fr 1fr; }
}

/* ≤820px: hamburger nav */
@media (max-width: 820px) {
  .cupcakes-grid { grid-template-columns: 1fr; }
  .nav-toggle { display: flex; }

  /* nav becomes a dropdown panel below the header */
  .site-nav {
    position: absolute;
    top: calc(100% + 1px);
    right: 16px;
    left: 16px;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    background: var(--color-ivory);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 10px;
    display: none;
  }
  .site-nav.is-open { display: flex; }
  .site-nav__link {
    padding: 12px 14px;
    border-bottom: 0;
    border-radius: var(--radius-sm);
  }
  .site-nav__link:hover { background: var(--color-blush-tint); }

  .site-header__inner { position: relative; }
}

/* ≤640px: single columns, full-width drawer, stacked controls */
@media (max-width: 640px) {
  /* Fewer hearts on phones: lighter to animate, and the ones kept are the
     edge-weighted first eight, so they stay clear of the reading column. */
  .page-hearts__heart:nth-child(n + 9) { display: none; }

  .section--cupcakes { padding: 56px 0; }
  .cupcakes-strip { grid-template-columns: 1fr; }
  .section { padding: 56px 0; }
  .section--bespoke,
  .section--reviews,
  .section--about { padding: 56px 0; }

  .shop-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: 1fr 1fr; }

  /* hero CTAs full-width-friendly */
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; }

  .hero__title { font-size: clamp(34px, 9vw, 48px); }
  .hero__lead { font-size: 17px; }

  /* enquiry contact grid → 1 col */
  .enq-grid { grid-template-columns: 1fr; }
  .enquiry-card__body { padding: 26px 22px 24px; }

  /* stepper: hide text labels, keep number dots */
  .stepper__item { padding: 16px 10px; }
  .stepper__label { display: none; }

  /* checkout time/pay stack if needed */
  .co-time-row { flex-direction: column; }

  /* cart drawer full width */
  .cart-drawer { width: 100%; }

  /* footer single column */
  .site-footer__grid { grid-template-columns: 1fr; gap: 32px; }

  .about__stats { gap: 24px; }
  .gallery__head { gap: 14px; }
}

/* ≤560px: compact header.

   At phone widths the brand wordmark, the hamburger and the Shop Treats CTA
   stopped fitting on one line: the CTA broke to "Shop / Treats" and turned
   into a tall pink blob, and below ~340px the wordmark ran under the
   hamburger. Everything here is that one fix: shrink the pieces, kill the
   gaps, and stop the CTA wrapping. */
@media (max-width: 640px) {
  /* not enough width for badge and text side by side: stack, keep badge full size */
  .site-footer__rating { flex-direction: column; align-items: flex-start; gap: 10px; }
  .site-footer__reg { max-width: none; }
  .site-footer__legal-inner { align-items: flex-start; }
  .bb-credit { margin-left: 0; }
}

@media (max-width: 560px) {
  .site-header__inner { padding: 10px 16px; gap: 12px; }
  .site-header__actions { gap: 10px; }

  .brand { gap: 8px; min-width: 0; }
  .brand__logo { height: 40px; width: 40px; }
  .brand__name {
    font-size: 27px;
    /* The wordmark is a single unit; letting it break mid-name looked broken
       rather than responsive. */
    white-space: nowrap;
  }

  .site-header__cta {
    padding: 10px 15px;
    font-size: 14px;
    white-space: nowrap;
    flex: none;
  }
}

/* ≤420px: gallery to one column on the tiniest screens */
@media (max-width: 420px) {
  .gallery-grid { grid-template-columns: 1fr; }
}

/* ≤400px: tighten a further notch.

   375 and 360 are the two commonest phone widths, so it is worth some effort
   to keep the wordmark at both rather than drop it early. The measured cost of
   the three items is logo 40, wordmark 108, toggle 44, CTA 111; shaving the
   wordmark and the CTA buys back the ~30px that 360 is short by. */
@media (max-width: 400px) {
  .site-header__inner { gap: 8px; }
  .site-header__actions { gap: 8px; }
  .brand { gap: 6px; }
  .brand__logo { height: 36px; width: 36px; }
  .brand__name { font-size: 23px; }
  .site-header__cta { padding: 9px 13px; font-size: 13px; }
}

/* ≤340px: the wordmark is the first thing to go.

   Below this the three items genuinely cannot coexist. The logo is itself a
   badge carrying the name, so dropping the text wordmark costs least, less
   than a wrapped CTA or a clipped name. */
@media (max-width: 340px) {
  .brand__name { display: none; }
}

/* ----------------------------------------------------------------------------
   20. REDUCED MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .whatsapp-fab { animation: none; }
  .cart-button__count,
  .success-check--cart { animation: none; }
  .page-hearts { display: none; }
  .hero__media::before,
  .hero__actions .btn--primary::after { animation: none; }
}