/* =========================================================
   BABS BODY BUTTER — MAIN STYLESHEET
   Table of Contents:
   1.  Reset & Base
   2.  CSS Variables / Design Tokens
   3.  Typography
   4.  Layout Utilities
   5.  Buttons
   6.  Announcement Bar
   7.  Main Navigation
   8.  Mobile Navigation
   9.  Hero Section
   10. Trust Icons Row
   11. Section Heading (shared)
   12. Shop / Product Cards
   13. Build Your BABS
   14. Why Choose + Testimonials
   15. Newsletter Signup
   16. Footer
   17. Interior Page Hero (shared across secondary pages)
   18. Accessibility
   19. Responsive Breakpoints
   20. Search
   21. Cart Drawer
   22. Ask BABS Help Panel
   ========================================================= */

/* ---------------------------------------------------------
   1. Reset & Base
   --------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body,
h1, h2, h3, h4, p,
ul, ol, figure {
  margin: 0;
  padding: 0;
}

ul, ol {
  list-style: none;
}

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

a {
  text-decoration: none;
  color: inherit;
}

button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

input {
  font: inherit;
}

svg {
  display: block;
}

/* ---------------------------------------------------------
   2. CSS Variables / Design Tokens
   --------------------------------------------------------- */
:root {
  /* Palette (from BABS reference) */
  --cream: #f8f0e6;
  --cream-light: #faf4ec;
  --sand: #f1e4d2;
  --ivory: #fffaf4;
  --black: #111111;
  --charcoal: #232323;
  --gold: #c9912f;
  --deep-gold: #9b6a18;
  --brown: #6d482c;
  --green: #536b3c;
  --green-tint: #eef1e6;
  --white: #ffffff;
  --text-muted: #5c5147;
  --border-soft: #e6dac8;

  /* Typography */
  --font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-sans: "Poppins", "Segoe UI", Arial, sans-serif;
  --font-script: "Alex Brush", "Brush Script MT", cursive;

  /* Layout */
  --container-width: 1600px;
  --container-pad: clamp(24px, 3vw, 56px);
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 24px;
  --shadow-card: 0 10px 30px rgba(17, 17, 17, 0.08);
  --shadow-soft: 0 4px 14px rgba(17, 17, 17, 0.06);

  /* Motion */
  --transition-base: 0.25s ease;
}

/* ---------------------------------------------------------
   3. Typography
   --------------------------------------------------------- */
body {
  font-family: var(--font-sans);
  color: var(--black);
  background-color: var(--ivory);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 700;
  line-height: 1.15;
  color: var(--black);
}

.script-accent {
  font-family: var(--font-script);
  color: var(--gold);
  font-size: 2.4rem;
  line-height: 1;
  display: inline-block;
  font-weight: 400;
}

.section-eyebrow {
  font-family: var(--font-sans);
  letter-spacing: 3px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--deep-gold);
  text-transform: uppercase;
}

/* ---------------------------------------------------------
   4. Layout Utilities
   --------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -48px;
  left: 12px;
  background: var(--black);
  color: var(--ivory);
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  z-index: 1000;
  transition: top var(--transition-base);
}

.skip-link:focus {
  top: 12px;
}

.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ---------------------------------------------------------
   5. Buttons
   --------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: clamp(12px, 0.8vw, 15px) clamp(24px, 2vw, 36px);
  font-family: var(--font-sans);
  font-size: clamp(0.78rem, 0.4vw + 0.66rem, 0.86rem);
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  border-radius: 4px;
  border: 2px solid transparent;
  transition: transform var(--transition-base), background-color var(--transition-base), color var(--transition-base), box-shadow var(--transition-base);
  white-space: nowrap;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn-primary {
  background-color: var(--black);
  color: var(--ivory);
  border-color: var(--black);
}

.btn-primary:hover {
  background-color: var(--charcoal);
  box-shadow: var(--shadow-card);
}

.btn-gold {
  background-color: var(--gold);
  color: var(--black);
  border-color: var(--gold);
}

.btn-gold:hover {
  background-color: var(--deep-gold);
  color: var(--ivory);
  box-shadow: var(--shadow-card);
}

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

.btn-outline-gold:hover {
  background-color: var(--gold);
  color: var(--black);
}

.btn-outline-light {
  background-color: transparent;
  color: var(--ivory);
  border-color: var(--ivory);
}

.btn-outline-light:hover {
  background-color: var(--ivory);
  color: var(--black);
}

.btn-block {
  width: 100%;
}

.btn:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

/* ---------------------------------------------------------
   Reference scale
   The approved BABS homepage reference is a 1320px-wide desktop
   design. Header/homepage dimensions are written as multiples of --u
   (1 reference pixel) on a centered design canvas:
   - --canvas: the layout width, capped at 1440px. Up to the cap the
     page scales with the viewport; beyond it the page keeps its size
     and centers, like a normal max-width site.
   - --gutter: the empty space either side of the canvas (0 below the
     cap). Full-bleed photos add it so they still reach the screen edge.
   Every container and width that uses --u must also stay inside the
   canvas; otherwise it stretches with the viewport while the --u
   sizes inside it stop growing.
   Below 900px the stacked mobile layout uses its own sizes.
   --------------------------------------------------------- */
:root {
  --canvas: min(100vw, 1440px);
  --u: calc(var(--canvas) / 1320);
  --gutter: calc((100vw - var(--canvas)) / 2);
  /* Announcement bar height; the sticky header sits directly below it. */
  --announcement-h: calc(28 * var(--u));
}

/* ---------------------------------------------------------
   6. Announcement Bar
   --------------------------------------------------------- */
/* Pinned to the top of the viewport. z-index sits above page content but
   below the header (500), so the open mobile menu still covers it. */
.announcement-bar {
  /* Space either side of each separator; also used by the ticker. */
  --ann-gap: calc(22 * var(--u));
  position: sticky;
  top: 0;
  z-index: 499;
  background-color: var(--black);
  color: var(--ivory);
}

/* Messages centered, social icons pinned right (matches reference). */
.announcement-bar .container {
  max-width: var(--canvas);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  min-height: var(--announcement-h);
  padding: 0 calc(38 * var(--u)) 0 calc(55 * var(--u));
}

.announcement-bar__messages {
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: calc(22 * var(--u));
  font-size: max(10px, calc(12 * var(--u)));
  letter-spacing: 0.5px;
  font-weight: 500;
  overflow-x: auto;
  scrollbar-width: none;
}

.announcement-bar__messages::-webkit-scrollbar {
  display: none;
}

.announcement-bar__messages li {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  white-space: nowrap;
}

.announcement-bar__messages li + li {
  padding-left: calc(22 * var(--u));
  border-left: 1px solid rgba(255, 250, 244, 0.35);
}

.announcement-bar__messages svg {
  width: max(12px, calc(14 * var(--u)));
  height: max(12px, calc(14 * var(--u)));
  color: var(--gold);
  flex-shrink: 0;
}

.announcement-bar__social {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: calc(18 * var(--u));
  flex-shrink: 0;
}

.announcement-bar__social a svg {
  width: max(14px, calc(18 * var(--u)));
  height: max(14px, calc(18 * var(--u)));
  color: var(--ivory);
  transition: color var(--transition-base);
}

.announcement-bar__social a:hover svg {
  color: var(--gold);
}

/* Ticker (built by initAnnouncementTicker in main.js). The track holds
   the list plus aria-hidden copies and drifts right → left by exactly
   one copy's width per cycle, so the loop has no gap or jump. Without
   JS, or with reduced motion, the static bar above is used instead. */
.announcement-bar.is-ticking .container {
  grid-template-columns: minmax(0, 1fr) auto;
}

.announcement-bar__ticker {
  grid-column: 1;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.announcement-bar__ticker:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: -1px;
}

.announcement-bar__track {
  display: flex;
  width: max-content;
  animation: babs-ticker var(--ticker-duration, 40s) linear infinite;
}

.announcement-bar.is-ticking .announcement-bar__messages {
  gap: 0;
  overflow: visible;
  flex-shrink: 0;
}

/* Every item carries its own separator so copies join seamlessly. */
.announcement-bar.is-ticking .announcement-bar__messages li {
  padding-inline: var(--ann-gap);
  border-left: 1px solid rgba(255, 250, 244, 0.35);
}

/* Pause on hover (mouse devices only, so a tap on touch screens doesn't
   freeze it) and while the ticker or a bar link has keyboard focus.
   Pausing keeps the current position, so it resumes where it stopped. */
@media (hover: hover) {
  .announcement-bar__ticker:hover .announcement-bar__track {
    animation-play-state: paused;
  }
}

.announcement-bar__ticker:focus-visible .announcement-bar__track,
.announcement-bar:has(:focus-visible) .announcement-bar__track {
  animation-play-state: paused;
}

/* 0 → -one copy width: content travels right → left. At the end the
   first copy sits exactly where the original started, so the restart
   is invisible. */
@keyframes babs-ticker {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(calc(-1 * var(--ticker-shift, 0px)), 0, 0);
  }
}

/* ---------------------------------------------------------
   7. Main Navigation
   --------------------------------------------------------- */
.site-header {
  background-color: var(--cream);
  border-bottom: 1px solid var(--border-soft);
  position: sticky;
  top: var(--announcement-h); /* sticks directly below the pinned announcement bar */
  z-index: 500;
  transition: box-shadow var(--transition-base);
}

.site-header.is-scrolled {
  box-shadow: var(--shadow-soft);
}

/* Logo left, links centered, icons right. */
.main-nav {
  max-width: var(--canvas);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  min-height: calc(96 * var(--u));
  padding: 0 calc(35 * var(--u)) 0 calc(55 * var(--u));
}

.logo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
  flex-shrink: 0;
  justify-self: start;
}

.logo__script {
  font-family: var(--font-script);
  font-size: max(2.1rem, calc(60 * var(--u)));
  line-height: 0.88;
  color: var(--gold);
  display: inline-flex;
  align-items: flex-start;
}

/* Temporary wordmark: a small gold sprig (#icon-sprig) rising from the end
   of "Babs", as in the reference. Sized in em so it scales with the script;
   its inline footprint (0.44 - 0.1 - 0.02 = 0.32em) matches the previous
   ornament and it is shorter than the 0.88em line, so the logo box and nav
   don't move. TODO(BABS): replace the whole .logo__script with the final
   logo asset (assets/images/babs-logo.svg preferred, or babs-logo.png). */
.logo__script svg {
  order: 1;
  width: 0.44em;
  height: 0.66em;
  margin: 0 -0.02em 0 -0.1em;
  color: var(--gold);
}

.logo__sub {
  font-family: var(--font-sans);
  font-size: max(0.62rem, calc(12.5 * var(--u)));
  font-weight: 600;
  letter-spacing: 0.17em;
  color: var(--black);
  margin-top: calc(3 * var(--u));
}

.nav-links {
  display: flex;
  align-items: center;
  gap: calc(24 * var(--u));
}

.nav-links a {
  font-size: max(11px, calc(12.5 * var(--u)));
  font-weight: 500;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--black);
  position: relative;
  padding-block: 4px;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: calc(-6 * var(--u));
  width: 0;
  height: 2px;
  background-color: var(--gold);
  transition: width var(--transition-base);
}

.nav-links a:hover::after,
.nav-links a[aria-current]::after {
  width: 100%;
}

.nav-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: calc(22 * var(--u));
  flex-shrink: 0;
}

.nav-actions button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nav-actions svg {
  width: max(20px, calc(22 * var(--u)));
  height: max(20px, calc(22 * var(--u)));
  color: var(--black);
  transition: color var(--transition-base);
}

.nav-actions button:hover svg {
  color: var(--gold);
}

.cart-count {
  position: absolute;
  top: -6px;
  right: -8px;
  background-color: var(--gold);
  color: var(--black);
  font-size: 0.6rem;
  font-weight: 700;
  min-width: 16px; /* grows into a pill for 2+ digit counts */
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Hidden when the cart is empty (js/cart.js). */
.cart-count[hidden] {
  display: none;
}

/* ---------------------------------------------------------
   8. Mobile Navigation
   --------------------------------------------------------- */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 26px;
  height: 20px;
}

.nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background-color: var(--black);
  transition: transform var(--transition-base), opacity var(--transition-base);
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---------------------------------------------------------
   Photo slots (homepage)
   Hero, Build Your BABS and Why Choose BABS each hold ONE <img> that
   fills its frame with object-fit: cover. For now it points at a
   placeholder SVG drawn at the final photograph's proportions
   (assets/images/*-placeholder.svg); installing a photo only means
   changing that src path.
   --------------------------------------------------------- */
.photo-slot__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
}

/* ---------------------------------------------------------
   9. Hero Section
   Reference: 541 tall; copy from x=66; photograph occupies the right
   760px (57.6%) at full height, blending into the cream on its left.
   --------------------------------------------------------- */
.hero {
  position: relative;
  background-color: var(--cream);
  overflow: hidden;
}

.hero .container {
  max-width: var(--canvas);
  padding: 0 0 0 calc(66 * var(--u));
}

.hero__content {
  position: relative;
  z-index: 3;
  max-width: calc(560 * var(--u));
  min-height: calc(541 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding-block: calc(50 * var(--u)) calc(22 * var(--u));
}

.hero__script {
  font-family: var(--font-script);
  font-size: calc(56 * var(--u));
  line-height: 1;
  color: var(--gold);
  display: block;
}

.hero__heading {
  font-size: calc(51 * var(--u));
  line-height: 1.14;
  white-space: nowrap;
  margin-bottom: calc(12 * var(--u));
}

.hero__text {
  font-size: max(14px, calc(15 * var(--u)));
  line-height: 1.5;
  color: var(--charcoal);
  max-width: calc(400 * var(--u));
  margin-bottom: calc(20 * var(--u));
}

.hero__ctas {
  display: flex;
  gap: calc(16 * var(--u));
  flex-wrap: wrap;
  margin-bottom: calc(20 * var(--u));
}

.hero__ctas .btn {
  min-width: calc(184 * var(--u));
  min-height: calc(39 * var(--u));
  padding: 0 calc(20 * var(--u));
  border-radius: 3px;
  font-size: max(11.5px, calc(12.5 * var(--u)));
  letter-spacing: 0.4px;
}

/* z-index gives the photo region its own layer beneath the copy, so
   the cream fade never paints over the headline. */
.hero__visual {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: calc(760 * var(--u) + var(--gutter));
  z-index: 1;
}

.hero__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse 50% 16% at 49% 90%, rgba(109, 72, 44, 0.3), rgba(109, 72, 44, 0) 70%),
    radial-gradient(ellipse at 52% 48%, #f4e4cc 0%, #e6cfae 50%, #d3b48a 100%);
}

/* Cream fade on the left edge so the photograph blends into the copy
   side (sits above the photo too, as in the reference). */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 20%;
  background: linear-gradient(90deg, var(--cream), rgba(248, 240, 230, 0));
  z-index: 3;
  pointer-events: none;
}

/* Neutral (centered) default for a photo that fills the frame. */
.hero__photo {
  object-position: 50% 50%;
}

/* Product photo: square, with its own background. Cropping it to
   the wide frame would cut the label, so the sharp photo is shown whole
   at full frame height (centred in the canvas's photo column) and a
   blurred, cream-washed copy of the same file fills the rest of the
   frame. The source file is never modified. */
.hero__media--photo {
  background: var(--cream);
}

.hero__photo-backdrop {
  position: absolute;
  inset: -40px;
  width: calc(100% + 80px);
  height: calc(100% + 80px);
  object-fit: cover;
  /* Warmed and lightened toward the cream/gold palette so the blur
     reads as soft warm light rather than gray. */
  filter: blur(30px) sepia(0.35) saturate(1.25) brightness(1.08);
  opacity: 0.5;
  z-index: 1;
}

/* Wider, eased cream fade from the copy side into the photo area (no
   hard divider). Overridden to display: none on tablet/mobile. */
.hero__media--photo::after {
  width: 34%;
  background: linear-gradient(90deg, var(--cream) 0%, rgba(248, 240, 230, 0.85) 30%, rgba(248, 240, 230, 0.4) 65%, rgba(248, 240, 230, 0) 100%);
}

/* scale: 0.94 shrinks the photo ~6% around its own centre for breathing
   room, without cropping or distorting it. */
.hero__media--photo .hero__photo {
  left: auto;
  right: calc(var(--gutter) + 177 * var(--u));
  width: auto;
  aspect-ratio: 1 / 1;
  scale: 0.94;
  /* Feathered on all four sides so no edge reads as a divider; the
     narrow bands stay clear of the label. */
  -webkit-mask-image:
    linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent),
    linear-gradient(180deg, transparent, #000 6%, #000 97%, transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent),
    linear-gradient(180deg, transparent, #000 6%, #000 97%, transparent);
  mask-composite: intersect;
}

.hero__badge {
  position: absolute;
  top: calc(22 * var(--u));
  right: calc(36 * var(--u));
  width: calc(168 * var(--u));
  height: calc(168 * var(--u));
  border-radius: 50%;
  background-color: var(--black);
  border: calc(3 * var(--u)) solid var(--gold);
  box-shadow: inset 0 0 0 calc(5 * var(--u)) var(--black), inset 0 0 0 calc(6.5 * var(--u)) var(--gold), var(--shadow-card);
  color: var(--gold);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: calc(13.5 * var(--u));
  letter-spacing: 0.3px;
  line-height: 1.3;
  z-index: 4;
}

.hero__badge span {
  display: block;
}

.hero__badge .hero__badge-big {
  font-family: var(--font-serif);
  font-size: calc(37 * var(--u));
  line-height: 1.02;
}

/* A word rather than "100%": smaller so it fits inside the circle. */
.hero__badge .hero__badge-big--word {
  font-size: calc(21 * var(--u));
  line-height: 1.15;
  margin-block: calc(2 * var(--u));
}

.hero__badge svg {
  width: calc(17 * var(--u));
  height: calc(17 * var(--u));
  margin-top: calc(3 * var(--u));
}

/* ---------------------------------------------------------
   10. Trust Icons Row
   --------------------------------------------------------- */
.trust-row {
  display: grid;
  grid-template-columns: repeat(4, calc(102 * var(--u)));
  margin-left: calc(-14 * var(--u));
}

.trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: calc(7 * var(--u));
  min-width: 0;
}

.trust-item svg {
  width: calc(30 * var(--u));
  height: calc(30 * var(--u));
  color: var(--deep-gold);
  flex-shrink: 0;
}

.trust-item span {
  font-size: max(9.5px, calc(10.3 * var(--u)));
  font-weight: 500;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  line-height: 1.35;
}

/* ---------------------------------------------------------
   11. Section Heading (shared)
   --------------------------------------------------------- */
.section-heading {
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
  margin-bottom: clamp(48px, 5vw, 64px);
}

.section-heading__flourish {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--gold);
  margin-bottom: 10px;
}

.section-heading__flourish svg {
  width: 20px;
  height: 20px;
}

.section-heading__flourish::before,
.section-heading__flourish::after {
  content: "";
  height: 1px;
  width: 46px;
  background-color: var(--gold);
}

.section-heading h2 {
  font-size: clamp(2rem, 1.6vw + 1.5rem, 2.8rem);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 12px;
}

.section-heading p {
  color: var(--text-muted);
  font-size: clamp(1rem, 0.3vw + 0.9rem, 1.1rem);
}

/* Compact variant: gold flourish rules either side of the heading. */
.section-heading--ruled {
  max-width: none;
  margin-bottom: calc(12 * var(--u));
}

.section-heading--ruled h2 {
  display: inline-flex;
  align-items: center;
  gap: calc(16 * var(--u));
  font-size: calc(24 * var(--u));
  line-height: 1.1;
  letter-spacing: 0.5px;
  margin-bottom: calc(2 * var(--u));
}

.section-heading--ruled h2::before,
.section-heading--ruled h2::after {
  content: "";
  flex: none;
  width: calc(50 * var(--u));
  height: calc(12 * var(--u));
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 14'%3E%3Cpath d='M12 7h46' stroke='%23c9912f' stroke-width='1.4'/%3E%3Cpath d='M12 7C9 3 5 2 1 2c1 3 5 5 11 5zM12 7c-3 4-7 5-11 5 1-3 5-5 11-5z' fill='%23c9912f'/%3E%3C/svg%3E") center / contain no-repeat;
}

.section-heading--ruled h2::after {
  transform: scaleX(-1);
}

.section-heading--ruled p {
  font-size: max(12.5px, calc(13 * var(--u)));
  line-height: 1.3;
  color: var(--charcoal);
}

/* ---------------------------------------------------------
   12. Shop / Product Cards
   Base card styles serve shop.html; .shop-section--home reproduces
   the reference's compact homepage row (cards ~200 x 320).
   --------------------------------------------------------- */
.shop-section {
  padding-block: clamp(30px, 2.8vw, 42px) clamp(34px, 3.2vw, 46px);
  background-color: var(--cream-light);
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(10px, 1vw, 16px);
}

.product-card {
  background: linear-gradient(180deg, #f2e5d4 0%, var(--cream) 62%);
  border-radius: 10px;
  padding: 12px 12px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  border: 1px solid var(--border-soft);
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
}

.product-card__badge {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background-color: var(--black);
  border: 1px solid var(--gold);
  color: var(--gold);
  font-size: 0.54rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.4px;
  text-align: center;
  text-transform: uppercase;
  padding: 6px;
  z-index: 2;
}

/* Final per-scent photos drop in at the same file paths; object-fit
   keeps any aspect ratio inside the frame. */
.product-card__image {
  width: 100%;
  aspect-ratio: 9 / 8;
  /* Without this the portrait placeholder art stretches the frame
     past its aspect ratio (aspect-ratio boxes grow to fit content). */
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  position: relative;
}

.product-card__image img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
}

/* Professional product photos: square, jar centred on a cream backdrop
   that runs nearly edge to edge. contain shows the whole jar and label
   (no crop, no stretch); the tile colour matches the photo backdrop so
   the slim side bands in the wider frame read as part of the photo. */
.product-card__image .product-card__photo {
  object-fit: contain;
  object-position: 50% 50%;
  background-color: #faf0e3;
  border-radius: 8px;
}

.product-card__scent-dot {
  position: absolute;
  bottom: 4px;
  left: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--ivory);
  box-shadow: var(--shadow-soft);
}

.product-card h3 {
  font-size: clamp(0.95rem, 0.3vw + 0.85rem, 1.1rem);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 4px;
}

.product-card__desc {
  font-size: 0.76rem;
  line-height: 1.35;
  color: var(--text-muted);
  margin-bottom: 8px;
  min-height: 2.7em;
}

.product-card__price {
  font-family: var(--font-serif);
  font-size: clamp(1.05rem, 0.3vw + 0.95rem, 1.2rem);
  font-weight: 700;
  color: var(--black);
  margin-top: auto;
  margin-bottom: 10px;
}

.product-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background-color: var(--black);
  color: var(--ivory);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 9px 14px;
  border-radius: 4px;
  white-space: nowrap;
  transition: background-color var(--transition-base), transform var(--transition-base);
}

.product-card__cta svg {
  width: 15px;
  height: 15px;
  color: var(--gold);
}

.product-card__cta:hover {
  background-color: var(--deep-gold);
  transform: translateY(-1px);
}

.shop-section__footer {
  display: flex;
  justify-content: center;
  margin-top: clamp(20px, 2vw, 28px);
}

/* Homepage row — reference proportions. */
.shop-section--home {
  background-color: #f8f0e8;
  padding-block: calc(14 * var(--u)) calc(6 * var(--u));
}

.shop-section--home .container {
  max-width: var(--canvas);
  padding-inline: calc(30 * var(--u));
}

.shop-section--home .product-grid {
  gap: calc(12 * var(--u));
}

.shop-section--home .product-card {
  background: #f2e8de;
  border: 0;
  border-radius: calc(10 * var(--u));
  padding: calc(8 * var(--u)) calc(10 * var(--u)) calc(11 * var(--u));
}

.shop-section--home .product-card__image {
  aspect-ratio: 184 / 160;
  margin-bottom: calc(11 * var(--u));
}

.shop-section--home .product-card__badge {
  top: calc(5 * var(--u));
  right: calc(5 * var(--u));
  width: calc(50 * var(--u));
  height: calc(50 * var(--u));
  padding: calc(5 * var(--u));
  border-width: 2px;
  color: var(--ivory);
  font-size: calc(9 * var(--u));
  font-weight: 600;
  line-height: 1.12;
}

/* The reference row carries no scent swatch; the photos show the scent. */
.shop-section--home .product-card__scent-dot {
  display: none;
}

.shop-section--home .product-card h3 {
  font-family: var(--font-sans);
  font-size: max(12.5px, calc(15.5 * var(--u)));
  font-weight: 500;
  letter-spacing: 0.4px;
  margin-bottom: calc(4 * var(--u));
}

.shop-section--home .product-card__desc {
  font-size: max(11px, calc(12.3 * var(--u)));
  line-height: 1.3;
  color: #3b3029;
  min-height: 2.54em;
  margin-bottom: 0;
}

.shop-section--home .product-card__price {
  font-family: var(--font-sans);
  font-size: max(12.5px, calc(16 * var(--u)));
  font-weight: 600;
  line-height: 1.2;
  margin-top: calc(11 * var(--u));
  margin-bottom: calc(8 * var(--u));
}

.shop-section--home .product-card__cta {
  min-width: calc(132 * var(--u));
  min-height: calc(29 * var(--u));
  padding: 0 calc(12 * var(--u));
  gap: calc(7 * var(--u));
  font-size: max(10px, calc(11.5 * var(--u)));
  letter-spacing: 0.4px;
}

.shop-section--home .product-card__cta svg {
  width: calc(14 * var(--u));
  height: calc(14 * var(--u));
}

.shop-section--home .shop-section__footer {
  margin-top: calc(15 * var(--u));
}

.shop-section--home .shop-section__footer .btn {
  min-width: calc(200 * var(--u));
  min-height: calc(29 * var(--u));
  padding: 0 calc(18 * var(--u));
  font-size: max(10.5px, calc(11.5 * var(--u)));
  letter-spacing: 0.8px;
}

/* ---------------------------------------------------------
   13. Build Your BABS
   Reference: 310 tall; photograph fills the left 48.5%; copy starts
   at x=680 with four 120x100 option cards and a centered 302x36 CTA.
   --------------------------------------------------------- */
.build-babs {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, #efe4d6 0%, #f1e9df 60%, #f2ece5 100%);
}

.build-babs .container {
  max-width: var(--canvas);
  min-height: calc(310 * var(--u));
  padding: 0 0 0 calc(680 * var(--u));
}

.build-babs__image {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: calc(640 * var(--u) + var(--gutter));
  overflow: hidden;
  background:
    radial-gradient(ellipse 52% 16% at 48% 88%, rgba(109, 72, 44, 0.28), rgba(109, 72, 44, 0) 70%),
    radial-gradient(ellipse at 48% 45%, #f5e6d0 0%, #e8d2b2 55%, #d6b98f 100%);
}

/* Soft fade on the right edge into the section background. */
.build-babs__image::after {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: 14%;
  background: linear-gradient(270deg, #efe4d6, rgba(239, 228, 214, 0));
  z-index: 3;
  pointer-events: none;
}

/* Product photo: square, with its own cream background. As in the hero,
   the sharp photo is shown whole at full panel height, centred, and a
   blurred, warmed copy of the same file fills the rest of the panel. */
.build-babs__backdrop {
  position: absolute;
  inset: -40px;
  width: calc(100% + 80px);
  height: calc(100% + 80px);
  object-fit: cover;
  filter: blur(30px) sepia(0.35) saturate(1.25) brightness(1.08);
  opacity: 0.5;
  z-index: 1;
}

/* scale: 0.94 leaves breathing room without cropping; the feathered
   edges stay clear of the label so no hard photo edge shows. */
.build-babs__image .build-babs__photo {
  left: 0;
  right: 0;
  width: auto;
  margin-inline: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  scale: 0.94;
  -webkit-mask-image:
    linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent),
    linear-gradient(180deg, transparent, #000 6%, #000 97%, transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent),
    linear-gradient(180deg, transparent, #000 6%, #000 97%, transparent);
  mask-composite: intersect;
}

.build-babs__content {
  position: relative;
  max-width: calc(548 * var(--u));
  padding-block: calc(22 * var(--u)) calc(16 * var(--u));
}

.build-babs__content .script-accent {
  display: block;
  font-size: calc(32 * var(--u));
  line-height: 1;
}

.build-babs__content h2 {
  font-size: calc(28 * var(--u));
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: calc(5 * var(--u));
}

.build-babs__content > p {
  color: var(--black);
  font-size: max(13px, calc(14.5 * var(--u)));
  line-height: 1.3;
  max-width: calc(330 * var(--u));
  margin-bottom: calc(14 * var(--u));
}

.build-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(22 * var(--u));
  margin-bottom: calc(15 * var(--u));
}

.build-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(96 * var(--u));
  background-color: rgba(255, 252, 248, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: calc(8 * var(--u));
  padding: calc(10 * var(--u)) calc(6 * var(--u));
  text-align: center;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.build-option:hover {
  box-shadow: var(--shadow-card);
  transform: translateY(-3px);
}

.build-option svg {
  width: calc(35 * var(--u));
  height: calc(35 * var(--u));
  color: var(--brown);
  margin-bottom: calc(8 * var(--u));
}

.build-option span {
  font-size: max(9.5px, calc(12 * var(--u)));
  font-weight: 500;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  display: block;
  line-height: 1.3;
}

.build-babs__content .btn {
  display: flex;
  width: calc(280 * var(--u));
  min-height: calc(33 * var(--u));
  margin-inline: auto;
  padding: 0 calc(16 * var(--u));
  font-size: max(10.5px, calc(12.5 * var(--u)));
  letter-spacing: 0.6px;
}

/* ---------------------------------------------------------
   14. Why Choose + Testimonials
   Reference: 270 tall; split at x=640. Left: heading + checklist with
   the ingredient photograph (300x235) in the lower-right. Right:
   heading + three 167x185 cards between 36px arrows.
   --------------------------------------------------------- */
.why-reviews {
  background: linear-gradient(90deg, #f3e9de calc(var(--gutter) + 640 * var(--u)), #f8f1ea calc(var(--gutter) + 640 * var(--u)));
}

.why-reviews .container {
  max-width: var(--canvas);
  padding: 0;
  display: grid;
  grid-template-columns: calc(640 * var(--u)) minmax(0, 1fr);
}

.why-reviews h2 {
  font-size: max(15px, calc(18 * var(--u)));
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: calc(15 * var(--u));
}

.why-reviews__col--why {
  position: relative;
  min-height: calc(270 * var(--u));
  padding: calc(20 * var(--u)) 0 calc(16 * var(--u)) calc(48 * var(--u));
}

.why-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 28px;
}

.why-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 1.05rem;
}

.why-list svg {
  width: 24px;
  height: 24px;
  color: var(--gold);
  flex-shrink: 0;
  margin-top: 2px;
}

.why-reviews .why-list {
  position: relative;
  z-index: 2;
  gap: calc(8 * var(--u));
  margin-bottom: 0;
  max-width: calc(330 * var(--u));
}

.why-reviews .why-list li {
  align-items: center;
  gap: calc(12 * var(--u));
  font-size: max(12px, calc(13.5 * var(--u)));
  line-height: calc(20 * var(--u));
}

.why-reviews .why-list svg {
  width: calc(18 * var(--u));
  height: calc(18 * var(--u));
  margin-top: 0;
}


.why-reviews__col--reviews {
  display: flex;
  flex-direction: column;
  padding: calc(20 * var(--u)) calc(29 * var(--u)) calc(6 * var(--u)) calc(5 * var(--u));
}

.why-reviews__col--reviews h2 {
  padding-left: calc(36 * var(--u));
}

.testimonials__track {
  display: flex;
  align-items: center;
  gap: 18px;
}

.why-reviews .testimonials__track {
  gap: calc(7 * var(--u));
}

.testimonial-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  flex: 1;
}

.why-reviews .testimonial-cards {
  gap: calc(26 * var(--u));
}

.testimonial-card {
  border-radius: var(--radius-md);
  padding: clamp(26px, 2.2vw, 34px) clamp(20px, 1.8vw, 28px);
  font-size: 0.96rem;
  line-height: 1.55;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 260px;
}

.why-reviews .testimonial-card {
  border-radius: calc(14 * var(--u));
  padding: calc(12 * var(--u)) calc(12 * var(--u)) calc(10 * var(--u));
  font-size: max(11.5px, calc(12.6 * var(--u)));
  line-height: 1.38;
  min-height: calc(185 * var(--u));
}

.testimonial-card--dark {
  background-color: var(--black);
  color: var(--ivory);
}

.testimonial-card--light {
  background-color: #efe5d8;
  color: var(--black);
  border: 1px solid var(--border-soft);
}

.why-reviews .testimonial-card--light {
  background-color: #e8e2dc;
  border: 0;
}

.testimonial-card__stars {
  color: var(--gold);
  font-size: 0.9rem;
  margin-bottom: 10px;
  letter-spacing: 2px;
}

.why-reviews .testimonial-card__stars {
  font-size: calc(11 * var(--u));
  margin-bottom: calc(6 * var(--u));
}

.testimonial-card p {
  flex-grow: 1;
}

.testimonial-card__author {
  margin-top: 14px;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.4px;
}

.why-reviews .testimonial-card__author {
  margin-top: calc(6 * var(--u));
  font-size: max(10px, calc(11 * var(--u)));
}

.testimonial-arrow {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border-soft);
  background-color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--transition-base), border-color var(--transition-base);
}

.why-reviews .testimonial-arrow {
  width: max(30px, calc(36 * var(--u)));
  height: max(30px, calc(36 * var(--u)));
  background-color: transparent;
  border-color: #bfb4a7;
}

.testimonial-arrow:hover,
.why-reviews .testimonial-arrow:hover {
  background-color: var(--cream);
  border-color: var(--gold);
}

.testimonial-arrow svg {
  width: 16px;
  height: 16px;
}

.reviews-link {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 8px;
  margin-top: calc(8 * var(--u));
  font-weight: 500;
  font-size: max(12px, calc(13 * var(--u)));
  letter-spacing: 0.2px;
  color: var(--black);
}

.reviews-link:hover {
  color: var(--deep-gold);
}

.reviews-link svg {
  width: 16px;
  height: 16px;
  transition: transform var(--transition-base);
}

.reviews-link:hover svg {
  transform: translateX(4px);
}

/* ---------------------------------------------------------
   15. Newsletter Signup
   Reference: ~82 tall; icon at x=135, form 445x46 at x=483,
   benefits at x=990.
   --------------------------------------------------------- */
.newsletter {
  background-color: var(--black);
  color: var(--ivory);
  padding-block: calc(10 * var(--u));
}

.newsletter .container {
  max-width: var(--canvas);
  display: grid;
  grid-template-columns: calc(348 * var(--u)) calc(445 * var(--u)) minmax(0, 1fr);
  align-items: center;
  gap: 0;
  padding: 0 calc(40 * var(--u)) 0 calc(135 * var(--u));
}

/* Second container only holds the live status message. */
.newsletter .container + .container {
  display: block;
  padding: 0 var(--container-pad);
  text-align: center;
}

.newsletter__intro {
  display: flex;
  align-items: center;
  gap: calc(20 * var(--u));
}

.newsletter__intro svg {
  width: calc(66 * var(--u));
  height: calc(62 * var(--u));
  color: var(--gold);
  flex-shrink: 0;
}

.newsletter__intro h2 {
  font-size: max(14px, calc(17.5 * var(--u)));
  text-transform: uppercase;
  color: #f1e7d8;
  letter-spacing: 0.5px;
  margin-bottom: calc(3 * var(--u));
}

.newsletter__intro p {
  font-size: max(12px, calc(14 * var(--u)));
  line-height: 1.42;
  color: #e6ddd0;
  max-width: calc(230 * var(--u));
}

.newsletter-form {
  display: flex;
  gap: 0;
  width: 100%;
}

.newsletter-form input[type="email"] {
  flex-grow: 1;
  min-width: 0;
  min-height: calc(46 * var(--u));
  padding: 0 calc(16 * var(--u));
  border-radius: 4px 0 0 4px;
  border: none;
  font-size: max(13px, calc(14.5 * var(--u)));
  color: var(--black);
}

.newsletter-form button {
  flex: none;
  width: calc(126 * var(--u));
  min-height: calc(46 * var(--u));
  border-radius: 0 4px 4px 0;
  padding: 0 calc(12 * var(--u));
  font-size: max(11px, calc(14 * var(--u)));
  letter-spacing: 0.6px;
}

.newsletter-form__message {
  font-size: 0.85rem;
}

.newsletter-form__message:not(:empty) {
  margin-block: 4px 8px;
}

.newsletter-form__message[data-state="success"] {
  color: #8fd18f;
}

.newsletter-form__message[data-state="error"] {
  color: #e79b9b;
}

.newsletter__benefits {
  display: flex;
  flex-direction: column;
  margin-left: calc(62 * var(--u));
  font-size: max(10.5px, calc(12.5 * var(--u)));
  line-height: 1.6;
  font-weight: 500;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #efe6d8;
}

/* ---------------------------------------------------------
   16. Footer
   Reference: ~200 tall; columns at x=84 / 413 / 667 / 933.
   --------------------------------------------------------- */
.site-footer {
  background-color: var(--black);
  color: #e3dacd;
  padding-top: calc(22 * var(--u));
}

.footer-grid {
  max-width: var(--canvas);
  display: grid;
  grid-template-columns: calc(329 * var(--u)) calc(254 * var(--u)) calc(266 * var(--u)) minmax(0, 1fr);
  gap: 0;
  padding: 0 calc(40 * var(--u)) 0 calc(84 * var(--u));
}

.footer-brand .logo__script {
  color: var(--gold);
}

.footer-brand .logo__sub {
  color: var(--ivory);
}

.footer-brand p {
  font-size: max(12px, calc(13 * var(--u)));
  line-height: 1.42;
  margin-top: calc(10 * var(--u));
  max-width: calc(240 * var(--u));
  color: #efe6d8;
}

.footer-col h3 {
  color: var(--ivory);
  font-family: var(--font-sans);
  font-size: max(11px, calc(12.5 * var(--u)));
  font-weight: 500;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin: calc(10 * var(--u)) 0 calc(8 * var(--u));
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Sets the line box itself (li would otherwise inherit body 16px/1.6). */
.footer-col li {
  font-size: max(11.5px, calc(12.5 * var(--u)));
  line-height: 1.34;
}

.footer-col a {
  font-size: max(11.5px, calc(12.5 * var(--u)));
  line-height: 1.34;
  color: #e3dacd;
  transition: color var(--transition-base);
}

.footer-col a:hover {
  color: var(--gold);
}

.footer-col .footer-contact {
  gap: calc(6 * var(--u));
}

.footer-contact li {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  font-size: max(12px, calc(13.5 * var(--u)));
  line-height: 1.25;
}

/* Clickable phone keeps the surrounding contact-row text style (not the
   smaller footer-link style); footer hover still turns it gold. */
.footer-contact li a {
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

.footer-contact svg {
  width: calc(16 * var(--u));
  height: calc(16 * var(--u));
  min-width: 13px;
  min-height: 13px;
  color: var(--gold);
  flex-shrink: 0;
}

.footer-social {
  display: flex;
  gap: calc(20 * var(--u));
  margin-top: calc(10 * var(--u));
  margin-left: -6px;
}

.footer-social a {
  width: max(28px, calc(28 * var(--u)));
  height: max(28px, calc(28 * var(--u)));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--transition-base);
}

.footer-social a:hover {
  background-color: rgba(201, 145, 47, 0.14);
}

.footer-social svg {
  width: max(15px, calc(18 * var(--u)));
  height: max(15px, calc(18 * var(--u)));
  color: var(--ivory);
  transition: color var(--transition-base);
}

.footer-social a:hover svg {
  color: var(--gold);
}

.footer-bottom {
  padding: calc(6 * var(--u)) 0 calc(16 * var(--u));
  text-align: center;
  font-size: max(11.5px, calc(13 * var(--u)));
  color: #e3dacd;
}

/* "Developed by KafoTech" credit: smaller and dimmer than the copyright so it
   stays secondary to the BABS branding, and never breaks mid-phrase. */
.footer-bottom__sep {
  opacity: 0.5;
}

.footer-bottom__credit {
  font-size: 0.9em;
  line-height: 1; /* smaller text must not deepen the copyright line */
  opacity: 0.7;
  white-space: nowrap;
}

/* Too narrow for one line: credit drops to its own centred line. */
@media (max-width: 480px) {
  .footer-bottom__sep {
    display: none;
  }

  .footer-bottom__credit {
    display: block;
    margin-top: 2px;
    line-height: inherit;
  }
}

/* ---------------------------------------------------------
   17. Interior Page Hero (shared across secondary pages)
   --------------------------------------------------------- */
.page-hero {
  background-color: var(--cream);
  padding-block: 70px;
  text-align: center;
}

.page-hero .section-eyebrow {
  display: block;
  margin-bottom: 10px;
}

.page-hero h1 {
  font-size: 2.6rem;
  margin-bottom: 14px;
}

.page-hero p {
  max-width: 560px;
  margin-inline: auto;
  color: var(--text-muted);
}

.page-section {
  padding-block: 72px;
}

.page-section + .page-section {
  border-top: 1px solid var(--border-soft);
}

.placeholder-notice {
  background-color: var(--green-tint);
  border: 1px dashed var(--green);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  max-width: 720px;
  margin: 0 auto 40px;
  font-size: 0.88rem;
  color: var(--text-muted);
  text-align: center;
}

/* ---------------------------------------------------------
   17b. Secondary Page Utilities (forms, narrow content, FAQ)
   --------------------------------------------------------- */
.narrow-container {
  max-width: 760px;
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.narrow-container p {
  color: var(--text-muted);
  margin-bottom: 20px;
}

/* Closing brand statement on story.html (client copy). */
.narrow-container .story-signoff {
  margin: 36px 0 0;
  font-family: var(--font-script);
  font-size: clamp(2rem, 1.2vw + 1.6rem, 2.6rem);
  line-height: 1.2;
  color: var(--gold);
  text-align: center;
}

.narrow-container--form {
  max-width: 640px;
}

.simple-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 520px;
  margin: 44px auto 0;
}

.simple-form--contact {
  max-width: 100%;
  margin-top: 0;
}

.form-field label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 6px;
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-soft);
  background-color: var(--ivory);
  font-family: var(--font-sans);
}

.form-message {
  font-size: 0.85rem;
  color: var(--deep-gold);
  min-height: 1.2em;
}

.contact-info-list {
  margin-top: 44px;
  gap: 14px;
  display: flex;
  flex-direction: column;
}

.contact-info-list svg {
  color: var(--deep-gold);
  width: 18px;
  height: 18px;
}

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

.faq-item {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 18px 20px;
}

.faq-item summary {
  cursor: pointer;
  font-weight: 700;
}

.faq-item summary::-webkit-details-marker {
  color: var(--gold);
}

.faq-item p {
  margin-top: 12px;
  color: var(--text-muted);
}

.faq-item a {
  color: var(--deep-gold);
  font-weight: 600;
}

.testimonial-cards--standalone {
  max-width: 1000px;
  margin-inline: auto;
}

/* Long-form text: Ingredients, Privacy Policy, Terms of Service. */
.prose h2 {
  font-size: 1.45rem;
  line-height: 1.25;
  margin: 40px 0 12px;
}

.prose > h2:first-of-type {
  margin-top: 0;
}

.prose h3 {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  margin: 22px 0 10px;
}

.prose ul:not(.why-list) {
  list-style: disc;
  padding-left: 1.3em;
  margin-bottom: 20px;
  color: var(--text-muted);
}

.prose ul:not(.why-list) li + li {
  margin-top: 6px;
}

.prose a,
.faq-policies a,
.form-hint a {
  color: var(--deep-gold);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.prose .ingredient-list {
  gap: 10px;
  margin-bottom: 8px;
}

.prose .ingredient-list li {
  align-items: center;
  font-size: 0.98rem;
}

.prose .ingredient-list svg {
  width: 20px;
  height: 20px;
  margin-top: 0;
}

.legal-updated {
  font-size: 0.85rem;
  letter-spacing: 0.3px;
}

.faq-item p + p {
  margin-top: 8px;
}

.narrow-container .faq-policies {
  margin: 28px 0 0;
  text-align: center;
  font-size: 0.9rem;
}

.form-hint {
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-muted);
}

/* Shop: pricing & fulfillment terms above the product grid. */
.shop-terms {
  max-width: 760px;
  margin: 0 auto 40px;
  padding: 18px 22px;
  border: 1px solid var(--border-soft);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius-md);
  background-color: var(--cream-light);
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--charcoal);
}

.shop-terms p + p {
  margin-top: 8px;
  color: var(--text-muted);
}

/* No approved reviews yet: a calm review-request state (index + reviews). */
.reviews-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  max-width: 560px;
  margin-inline: auto;
  padding: 32px 28px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background-color: var(--cream-light);
  text-align: center;
}

.reviews-empty svg {
  width: 30px;
  height: 30px;
  color: var(--gold);
}

.reviews-empty__title {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  color: var(--black);
}

.narrow-container .reviews-empty__text,
.reviews-empty__text {
  margin: 0;
  max-width: 420px;
  color: var(--text-muted);
  line-height: 1.55;
}

.reviews-empty__btn {
  margin-top: 6px;
}

.why-reviews .reviews-empty--home {
  flex: 1;
  justify-content: center;
  width: 100%;
  max-width: none;
  padding: calc(18 * var(--u)) calc(24 * var(--u));
  gap: calc(8 * var(--u));
  border-radius: calc(14 * var(--u));
  background-color: #efe5d8;
  border: 0;
}

.why-reviews .reviews-empty--home .reviews-empty__title {
  font-size: max(16px, calc(20 * var(--u)));
}

.why-reviews .reviews-empty--home .reviews-empty__text {
  font-size: max(12px, calc(13.5 * var(--u)));
}

.why-reviews__col--reviews h2 {
  text-align: center;
  padding-left: 0;
}

/* ---------------------------------------------------------
   17c. Build Your BABS Customizer (customize.html)
   --------------------------------------------------------- */
.builder {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(380px, 30vw, 430px);
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
  max-width: 1320px;
  margin-inline: auto;
}

.builder__steps {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.builder-step {
  margin: 0;
  min-width: 0;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background-color: var(--white);
  padding: clamp(22px, 2.4vw, 34px);
  box-shadow: var(--shadow-soft);
  transition: opacity var(--transition-base);
}

.builder-step:disabled {
  opacity: 0.55;
}

.builder-step__title {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0;
  margin-bottom: 20px;
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 700;
}

/* Float the legend so it sits inside the card instead of on the fieldset border. */
legend.builder-step__title {
  float: left;
  width: 100%;
}

legend.builder-step__title + * {
  clear: both;
}

.builder-step__title label {
  cursor: pointer;
}

.builder-step__num {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: var(--black);
  color: var(--ivory);
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 600;
}

.builder-step__hint {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-block: -8px 16px;
}

.builder-step__hint:last-child {
  margin-block: 14px 0;
}

.builder-step__reveal {
  margin-top: 16px;
}

/* Standard jar size — information, not a control. */
.builder-size {
  display: flex;
  align-items: center;
  gap: 12px;
}

.builder-size svg {
  flex: none;
  width: 30px;
  height: 30px;
  color: var(--deep-gold);
}

.builder-size strong {
  font-family: var(--font-serif);
  font-size: 1.35rem;
}

.builder-step__error {
  font-size: 0.88rem;
  color: #a3322a;
  margin-top: 8px;
}

.builder-step__error:empty {
  display: none;
}

.builder-step [aria-invalid="true"] {
  border-color: #a3322a;
}

.builder .form-field input,
.builder .form-field textarea {
  padding: 14px 16px;
  font-size: 0.95rem;
}

/* The global focus rule covers input/button/a only; match it for the textarea. */
.builder textarea:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

.choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}

.choice-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

.choice {
  position: relative;
  cursor: pointer;
}

.choice input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}

.choice__body {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border: 1.5px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background-color: var(--ivory);
  font-size: 0.88rem;
  font-weight: 500;
  text-align: center;
  transition: border-color var(--transition-base), background-color var(--transition-base), box-shadow var(--transition-base);
}

.choice-grid--3 .choice__body {
  flex-direction: column;
  gap: 2px;
}

.choice:hover .choice__body {
  border-color: var(--gold);
}

.choice input:checked + .choice__body {
  border-color: var(--gold);
  background-color: var(--cream);
  box-shadow: inset 0 0 0 1px var(--gold);
}

.choice input:focus-visible + .choice__body {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

.choice input:disabled + .choice__body {
  cursor: not-allowed;
}

.choice--check .choice__body {
  justify-content: flex-start;
  text-align: left;
}

.choice--check .choice__body::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--border-soft);
  border-radius: 4px;
  background-color: var(--white);
}

.choice--check input:checked + .choice__body::before {
  border-color: var(--deep-gold);
  background: var(--deep-gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fffaf4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}

.choice__swatch {
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(17, 17, 17, 0.12);
}

.choice__swatch--custom {
  background: conic-gradient(#e8c77a, #e8912f, #c9424a, #6d482c, #536b3c, #e8c77a);
}

.qty-stepper {
  display: inline-flex;
  align-items: stretch;
  border: 1.5px solid var(--border-soft);
  border-radius: 999px;
  overflow: hidden;
  background-color: var(--ivory);
}

.qty-stepper__btn {
  width: 48px;
  font-size: 1.3rem;
  transition: background-color var(--transition-base);
}

.qty-stepper__btn:hover {
  background-color: var(--cream);
}

.qty-stepper input {
  width: 70px;
  padding: 12px 0;
  border: none;
  border-inline: 1.5px solid var(--border-soft);
  background: transparent;
  text-align: center;
  font-weight: 600;
  -moz-appearance: textfield;
  appearance: textfield;
}

.qty-stepper input::-webkit-outer-spin-button,
.qty-stepper input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Sticky without an inner scrollbar: customize.js sets --summary-top so
   a summary taller than the viewport sticks by its bottom edge instead
   (estimate + button stay visible, clear of the Ask BABS launcher). */
.builder__summary {
  position: sticky;
  top: var(--summary-top, calc(120px + var(--announcement-h)));
  margin: -12px -12px 0;
  padding: 12px 12px 24px;
}

.builder-summary {
  background-color: var(--cream);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 30px 28px;
  box-shadow: var(--shadow-card);
  text-align: center;
}

.builder-summary h2 {
  font-size: 1.7rem;
  margin-bottom: 16px;
}

.builder-summary__list {
  margin: 0 0 20px;
  text-align: left;
  font-size: 0.95rem;
}

.builder-summary__list > div {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 14px;
  padding-block: 9px;
  border-bottom: 1px solid var(--border-soft);
}

/* Soft gold wash behind a row whose value just changed (added by
   customize.js). Background only, so nothing in the card moves. */
.builder-summary__list > div::before {
  content: "";
  position: absolute;
  inset: 2px -10px;
  z-index: -1;
  border-radius: 8px;
  background-color: rgba(201, 145, 47, 0);
  pointer-events: none;
}

.builder-summary__list > div.is-updated::before {
  animation: summary-flash 1.2s ease-out;
}

@keyframes summary-flash {
  0% { background-color: rgba(201, 145, 47, 0); }
  15% { background-color: rgba(201, 145, 47, 0.2); }
  100% { background-color: rgba(201, 145, 47, 0); }
}

/* Reduced motion: no fade — a brief static tint instead, still showing
   which value changed. */
@media (prefers-reduced-motion: reduce) {
  .builder-summary__list > div.is-updated::before {
    animation: none;
    background-color: rgba(201, 145, 47, 0.16);
  }
}

.builder-summary__list > div[hidden] {
  display: none;
}

.builder-summary__list dt {
  font-weight: 600;
  color: var(--deep-gold);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.74rem;
  padding-top: 3px;
}

.builder-summary__list dd {
  margin: 0;
  overflow-wrap: break-word;
}

.builder-summary__clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
}

.builder-summary .btn {
  white-space: normal;
  padding-block: 16px;
  font-size: 0.95rem;
}

.builder-summary__estimate {
  margin-bottom: 16px;
  padding: 12px 14px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background-color: rgba(255, 250, 244, 0.75);
}

.builder-summary__price-label {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--deep-gold);
}

.builder-summary__price {
  font-family: var(--font-serif);
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--black);
}

.builder-summary__price-note {
  margin-top: 4px;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.builder-summary__workflow {
  margin-top: 14px;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--charcoal);
}

.builder-summary__note {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-top: 8px;
}

.builder-summary .form-message {
  margin-top: 10px;
}

.builder-summary .form-message[data-state="error"] {
  color: #a3322a;
}

/* ---------------------------------------------------------
   17d. Build Your BABS 2.0 — stages, progress, groups
   --------------------------------------------------------- */
/* Custom-order pricing & approval notice above the configurator. */
.builder-notice {
  max-width: 860px;
  margin: 0 auto clamp(24px, 3vw, 36px);
  padding: 18px 22px;
  border: 1px solid var(--gold);
  border-left-width: 4px;
  border-radius: var(--radius-md);
  background-color: var(--cream-light);
  text-align: left;
}

.builder-notice__title {
  margin-bottom: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--deep-gold);
}

.builder-notice__text {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--charcoal);
}

.builder-notice__sub {
  margin-top: 8px;
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--text-muted);
}

/* Progress: "Your Butter → Scent → Formula → Order → Review" (in-page links). */
.builder-progress {
  max-width: 1320px;
  margin: 0 auto clamp(24px, 3vw, 40px);
}

.builder-progress ol {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px 4px;
}

.builder-progress li {
  display: flex;
  align-items: center;
  gap: 4px;
}

.builder-progress li + li::before {
  content: "\2192";
  color: var(--gold);
  font-size: 0.9rem;
  padding-inline: 6px;
}

.builder-progress a {
  display: inline-block;
  padding: 8px 4px;
  border-bottom: 2px solid transparent;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color var(--transition-base), border-color var(--transition-base);
}

.builder-progress a:hover {
  color: var(--black);
}

/* Current stage: darker text + gold underline (not color alone). */
.builder-progress a[aria-current="step"] {
  color: var(--black);
  border-bottom-color: var(--gold);
}

.builder-stage {
  scroll-margin-top: calc(var(--announcement-h) + 120px);
}

/* Phones: keep all five steps on one line. */
@media (max-width: 640px) {
  .builder-progress ol {
    flex-wrap: nowrap;
    gap: 0;
  }

  .builder-progress li + li::before {
    font-size: 0.75rem;
    padding-inline: 3px;
  }

  .builder-progress a {
    padding: 8px 2px;
    font-size: 0.62rem;
    letter-spacing: 0.5px;
    white-space: nowrap;
  }
}

/* Groups inside a stage (fieldsets are reset to plain blocks). */
.builder-group {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.builder-group--spaced {
  margin-top: 20px;
}

.builder-group--divided {
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid var(--border-soft);
}

.builder-group__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  width: 100%;
  margin-bottom: 12px;
  padding: 0;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 700;
}

label.builder-group__title {
  cursor: pointer;
}

.builder-group__meta {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--deep-gold);
}

.builder-field-note {
  margin-top: 10px;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.builder-field-note--lead {
  margin: -4px 0 12px;
}

.builder-step__error + .builder-field-note {
  margin-top: 6px;
}

/* Hidden helpers must win over the grid display. */
.choice-grid[hidden],
.builder-field-note[hidden] {
  display: none;
}

.choice-grid--purpose {
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}

/* 1. Your Butter — information, not a choice. */
.builder-butter {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border: 1.5px solid var(--gold);
  border-radius: var(--radius-sm);
  background-color: var(--cream);
  box-shadow: inset 0 0 0 1px var(--gold);
}

.builder-butter svg {
  flex: none;
  width: 34px;
  height: 34px;
  color: var(--deep-gold);
}

.builder-butter__name {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.25;
}

.builder-butter__copy {
  margin-top: 2px;
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* 5. Review — stage label, formula list, "subject to confirmation". */
.builder-summary__step {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--deep-gold);
}

.builder-summary__step .builder-step__num {
  width: 24px;
  height: 24px;
  font-size: 0.72rem;
}

.builder-summary__formula li {
  line-height: 1.5;
}

.builder-summary__sub {
  display: block;
  margin-top: 2px;
  font-size: 0.78rem;
  font-style: italic;
  color: var(--text-muted);
}

/* Post-add state: replaces the add button after a successful add. */
.builder-added {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1.5px solid var(--gold);
  border-radius: var(--radius-md);
  background-color: var(--ivory);
}

.builder-added[hidden],
.builder-summary .btn[hidden] {
  display: none; /* .btn sets display, which would override [hidden] */
}

.builder-added__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--black);
}

.builder-added__title:focus {
  outline: none;
}

.builder-added__title:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

.builder-added__check {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: var(--deep-gold);
  color: var(--ivory);
  font-size: 0.85rem;
}

.builder-added__copy {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--charcoal);
}

/* ---------------------------------------------------------
   18. Accessibility
   --------------------------------------------------------- */
@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;
  }
}

/* ---------------------------------------------------------
   19. Responsive Breakpoints
   --------------------------------------------------------- */

/* Below ~1180px the paragraph hits its 15px readability floor, so the
   reference line breaks would strand a word; let it wrap naturally. */
@media (max-width: 1180px) {
  .hero__br {
    display: none;
  }
}

/* Standard desktop / small laptop — the reference layout still applies
   (scaled by --u); only readability floors and the shop page adapt. */
@media (max-width: 1100px) {
  .product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* Homepage keeps the reference six-across row down to 900px. */
  .shop-section--home .product-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .main-nav {
    gap: 14px;
  }

  .nav-links {
    gap: 14px;
  }

  .nav-actions {
    gap: 16px;
  }

  .why-reviews .testimonial-cards {
    gap: 12px;
  }
}

/* Tablet & mobile — stacked layout */
@media (max-width: 900px) {
  :root {
    --announcement-h: 30px;
  }

  /* Messages scroll on the left, social icons stay pinned right. */
  .announcement-bar {
    --ann-gap: 18px;
  }

  .announcement-bar .container {
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: var(--announcement-h);
    padding-inline: var(--container-pad);
  }

  .announcement-bar__messages {
    grid-column: 1;
    gap: 18px;
  }

  .announcement-bar__messages li + li {
    padding-left: 18px;
  }

  .announcement-bar__social {
    grid-column: 2;
    gap: 14px;
  }

  .main-nav {
    display: flex;
    justify-content: space-between;
    min-height: 66px;
    padding-inline: var(--container-pad);
  }

  .logo__script {
    font-size: 2.3rem;
  }

  .logo__sub {
    font-size: 0.62rem;
  }

  .nav-links {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(320px, 84vw);
    height: 100vh;
    background-color: var(--ivory);
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 4px;
    padding: 90px 32px 32px;
    transform: translateX(100%);
    transition: transform var(--transition-base);
    z-index: 400;
  }

  .nav-links.is-open {
    transform: translateX(0);
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.15);
  }

  .nav-links a {
    display: block;
    padding-block: 14px;
    font-size: 0.92rem;
    width: 100%;
    border-bottom: 1px solid var(--border-soft);
  }

  .nav-links a::after {
    bottom: 8px;
  }

  /* Logo anchored left; icons + menu button grouped on the right. */
  .main-nav .logo {
    margin-right: auto;
  }

  /* Keep the toggle (open-state X) clickable above the open drawer (400) and overlay (350).
     The 4px margin + 14px nav gap match the 18px spacing between the icons. */
  .nav-toggle {
    display: flex;
    position: relative;
    z-index: 450;
    margin-left: 4px;
  }

  .nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background-color: rgba(17, 17, 17, 0.4);
    z-index: 350;
  }

  .nav-overlay.is-open {
    display: block;
  }

  .nav-actions {
    gap: 18px;
  }

  /* Hero: full-bleed photograph on top, centered copy below. */
  .hero .container {
    display: flex;
    flex-direction: column;
    padding: 0 var(--container-pad);
  }

  .hero__visual {
    position: relative;
    order: -1;
    width: auto;
    height: clamp(260px, 56vw, 440px);
    margin-inline: calc(-1 * var(--container-pad));
  }

  .hero__media::after {
    display: none;
  }

  .hero__media--photo .hero__photo {
    right: 0;
    left: 0;
    margin-inline: auto;
  }

  .hero__badge {
    top: 14px;
    right: 14px;
    width: clamp(104px, 18vw, 150px);
    height: clamp(104px, 18vw, 150px);
    border-width: 2px;
    box-shadow: inset 0 0 0 4px var(--black), inset 0 0 0 5px var(--gold), var(--shadow-card);
    font-size: clamp(0.55rem, 1.4vw, 0.72rem);
  }

  .hero__badge .hero__badge-big {
    font-size: clamp(1.45rem, 3.8vw, 2.1rem);
  }

  .hero__badge .hero__badge-big--word {
    font-size: clamp(0.82rem, 2.2vw, 1.2rem);
  }

  .hero__badge svg {
    width: 14px;
    height: 14px;
  }

  .hero__content {
    min-height: 0;
    max-width: 640px;
    margin-inline: auto;
    align-items: center;
    text-align: center;
    padding-block: 26px 34px;
  }

  .hero__script {
    font-size: clamp(2.1rem, 6vw, 2.8rem);
  }

  .hero__heading {
    font-size: clamp(1.8rem, 5.6vw, 2.7rem);
    margin-bottom: 12px;
  }

  /* Desktop-only line breaks that mirror the reference copy. */
  .hero__br {
    display: none;
  }

  .hero__text {
    font-size: 1rem;
    max-width: 480px;
    margin-bottom: 22px;
  }

  .hero__ctas {
    justify-content: center;
    gap: 14px;
    margin-bottom: 24px;
  }

  .hero__ctas .btn {
    min-width: 200px;
    min-height: 46px;
    padding: 0 24px;
    font-size: 0.8rem;
  }

  .trust-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
    max-width: 520px;
    margin-left: 0;
    gap: 10px;
  }

  .trust-item {
    gap: 8px;
  }

  .trust-item svg {
    width: 30px;
    height: 30px;
  }

  .trust-item span {
    font-size: 0.64rem;
  }

  /* Shop */
  .shop-section--home {
    padding-block: 30px 34px;
  }

  .shop-section--home .container {
    padding-inline: var(--container-pad);
  }

  .section-heading--ruled {
    margin-bottom: 18px;
  }

  .section-heading--ruled h2 {
    font-size: 1.5rem;
    gap: 12px;
  }

  .section-heading--ruled h2::before,
  .section-heading--ruled h2::after {
    width: 40px;
    height: 12px;
  }

  .section-heading--ruled p {
    font-size: 0.9rem;
  }

  .shop-section--home .product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }

  .shop-section--home .product-card {
    border-radius: 10px;
    padding: 10px 10px 14px;
  }

  .shop-section--home .product-card__image {
    margin-bottom: 10px;
  }

  .shop-section--home .product-card__badge {
    top: 6px;
    right: 6px;
    width: 50px;
    height: 50px;
    padding: 5px;
    font-size: 0.55rem;
  }

  .shop-section--home .product-card h3 {
    font-size: 0.95rem;
    margin-bottom: 4px;
  }

  .shop-section--home .product-card__desc {
    font-size: 0.78rem;
  }

  .shop-section--home .product-card__price {
    font-size: 1rem;
    margin-top: 10px;
    margin-bottom: 8px;
  }

  .shop-section--home .product-card__cta {
    min-width: 0;
    min-height: 36px;
    padding: 0 14px;
    gap: 7px;
    font-size: 0.72rem;
  }

  .shop-section--home .product-card__cta svg {
    width: 15px;
    height: 15px;
  }

  .shop-section--home .shop-section__footer {
    margin-top: 20px;
  }

  .shop-section--home .shop-section__footer .btn {
    min-width: 220px;
    min-height: 42px;
    font-size: 0.8rem;
  }

  /* Build Your BABS: photograph on top, copy below. */
  .build-babs .container {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0 var(--container-pad);
  }

  .build-babs__image {
    position: relative;
    width: auto;
    height: clamp(240px, 48vw, 380px);
    margin-inline: calc(-1 * var(--container-pad));
  }

  .build-babs__image::after {
    display: none;
  }

  .build-babs__content {
    width: 100%;
    max-width: 580px;
    margin-inline: auto;
    padding-block: 26px 34px;
  }

  .build-babs__content .script-accent {
    font-size: 2rem;
  }

  .build-babs__content h2 {
    font-size: 1.8rem;
    margin-bottom: 8px;
  }

  .build-babs__content > p {
    font-size: 1rem;
    max-width: none;
    margin-bottom: 18px;
  }

  .build-options {
    gap: 12px;
    margin-bottom: 18px;
  }

  .build-option {
    min-height: 100px;
    border-radius: 8px;
    padding: 12px 6px;
  }

  .build-option svg {
    width: 32px;
    height: 32px;
    margin-bottom: 8px;
  }

  .build-option span {
    font-size: 0.68rem;
  }

  .build-babs__content .btn {
    width: min(100%, 320px);
    min-height: 44px;
    font-size: 0.82rem;
  }

  /* Why / Reviews stack; the sand panel stays full-bleed. */
  .why-reviews {
    background: #f8f1ea;
  }

  .why-reviews .container {
    grid-template-columns: 1fr;
  }

  .why-reviews h2 {
    font-size: 1.25rem;
    margin-bottom: 14px;
  }

  .why-reviews__col--why {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: 20px;
    align-items: center;
    min-height: 0;
    background-color: #f3e9de;
    padding: 28px var(--container-pad);
  }

  .why-reviews__col--why h2 {
    grid-column: 1 / -1;
  }

  .why-reviews .why-list {
    max-width: none;
    gap: 10px;
    margin-bottom: 0;
  }

  .why-reviews .why-list li {
    gap: 10px;
    font-size: 0.92rem;
    line-height: 1.35;
  }

  .why-reviews .why-list svg {
    width: 18px;
    height: 18px;
  }


  .why-reviews__col--reviews {
    padding: 28px var(--container-pad) 30px;
  }

  .why-reviews__col--reviews h2 {
    padding-left: 0;
    text-align: center;
  }

  .why-reviews .testimonials__track {
    gap: 8px;
  }

  .why-reviews .testimonial-card {
    border-radius: 14px;
    padding: 16px 14px 14px;
    font-size: 0.86rem;
    min-height: 200px;
  }

  .why-reviews .testimonial-card__stars {
    font-size: 0.8rem;
  }

  .why-reviews .testimonial-card__author {
    font-size: 0.74rem;
  }

  .why-reviews .testimonial-arrow {
    width: 34px;
    height: 34px;
  }

  .reviews-link {
    margin-top: 14px;
    font-size: 0.85rem;
  }

  /* Newsletter */
  .newsletter {
    padding-block: 26px;
  }

  .newsletter .container {
    grid-template-columns: 1fr;
    gap: 18px;
    justify-items: center;
    text-align: center;
    padding-inline: var(--container-pad);
  }

  .newsletter__intro {
    text-align: left;
    gap: 14px;
  }

  .newsletter__intro svg {
    width: 48px;
    height: 46px;
  }

  .newsletter__intro h2 {
    font-size: 1.05rem;
  }

  .newsletter__intro p {
    font-size: 0.85rem;
    max-width: 300px;
  }

  .newsletter-form {
    max-width: 520px;
  }

  .newsletter-form input[type="email"],
  .newsletter-form button {
    min-height: 48px;
    font-size: 0.88rem;
  }

  .newsletter-form input[type="email"] {
    padding-inline: 16px;
  }

  .newsletter-form button {
    width: auto;
    padding-inline: 26px;
    font-size: 0.8rem;
  }

  .newsletter__benefits {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 22px;
    margin-left: 0;
    font-size: 0.72rem;
  }

  /* Footer */
  .site-footer {
    padding-top: 32px;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 26px 24px;
    padding: 0 var(--container-pad) 18px;
  }

  .footer-brand .logo__script {
    font-size: 2.4rem;
  }

  .footer-brand p {
    font-size: 0.85rem;
    max-width: 260px;
  }

  .footer-col h3 {
    font-size: 0.78rem;
    margin: 0 0 10px;
  }

  .footer-col a {
    font-size: 0.86rem;
    line-height: 1.9;
  }

  .footer-col .footer-contact {
    gap: 8px;
  }

  .footer-contact li {
    font-size: 0.86rem;
  }

  .footer-social {
    gap: 12px;
    margin-top: 14px;
  }

  .footer-social a {
    width: 34px;
    height: 34px;
  }

  .footer-bottom {
    padding: 14px var(--container-pad) 18px;
    border-top: 1px solid #242424;
    font-size: 0.78rem;
  }

  .builder {
    grid-template-columns: 1fr;
  }

  .builder__summary {
    position: static;
    max-height: none;
    overflow: visible;
    margin: 0;
    padding: 0;
  }
}

/* Large mobile */
@media (max-width: 640px) {
  :root {
    --container-pad: 18px;
  }

  /* Phones: centred, the square hero photo would sit under the
     Plant-Based badge (top-right, clamp(104px, 18vw, 150px) + 14px inset).
     Centre it in the space left of the badge instead, shrinking it to
     fit that space on narrow screens. Never cropped or distorted. */
  .hero__media--photo .hero__photo {
    --hero-badge-space: calc(clamp(104px, 18vw, 150px) + 14px);
    top: 50%;
    bottom: auto;
    height: min(100%, calc(100vw - var(--hero-badge-space) - 22px));
    right: var(--hero-badge-space);
    translate: 0 -50%;
  }

  .announcement-bar {
    --ann-gap: 14px;
  }

  .announcement-bar__messages {
    gap: 14px;
  }

  .announcement-bar__messages li + li {
    padding-left: 14px;
  }

  .hero__ctas {
    flex-direction: column;
    width: 100%;
  }

  .hero__ctas .btn {
    width: 100%;
  }

  .section-heading h2 {
    font-size: 1.6rem;
  }

  .section-heading--ruled h2 {
    font-size: 1.2rem;
    gap: 8px;
  }

  .section-heading--ruled h2::before,
  .section-heading--ruled h2::after {
    width: 22px;
  }

  .product-grid,
  .shop-section--home .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .build-options {
    grid-template-columns: 1fr 1fr;
  }

  /* Checklist above the ingredient image. */
  .why-reviews__col--why {
    grid-template-columns: 1fr;
    row-gap: 20px;
  }


  .testimonial-cards,
  .why-reviews .testimonial-cards {
    grid-template-columns: 1fr;
  }

  .why-reviews .testimonial-card {
    min-height: 0;
  }

  .testimonial-arrow {
    display: none;
  }

  .newsletter__intro {
    flex-direction: column;
    text-align: center;
    gap: 10px;
  }

  .newsletter__intro p {
    margin-inline: auto;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .choice-grid:not(.choice-grid--3) {
    grid-template-columns: 1fr 1fr;
  }

  .choice-grid--3 .choice__body {
    padding-inline: 6px;
  }
}

/* Small mobile */
@media (max-width: 400px) {
  .product-grid {
    gap: 10px;
  }

  .product-card,
  .shop-section--home .product-card {
    padding-inline: 8px;
  }

  .product-card__cta,
  .shop-section--home .product-card__cta {
    padding-inline: 10px;
    letter-spacing: 0.4px;
  }

  .logo__script {
    font-size: 1.9rem;
  }

  .trust-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 16px;
  }

  .newsletter-form {
    flex-direction: column;
  }

  .newsletter-form input[type="email"],
  .newsletter-form button {
    border-radius: var(--radius-sm);
    width: 100%;
  }

  .newsletter-form button {
    margin-top: 10px;
  }
}

/* ---------------------------------------------------------
   20. Search (js/search.js)
   Shared modal pieces first: scroll lock, icon buttons, backdrop.
   Modal panels use native <dialog> (top layer), so they always sit
   above the sticky announcement bar and header without z-index.
   --------------------------------------------------------- */
html.babs-scroll-lock {
  overflow: hidden;
}

.babs-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  color: var(--black);
  transition: background-color var(--transition-base), color var(--transition-base);
}

.babs-icon-btn:hover {
  background-color: var(--cream);
  color: var(--deep-gold);
}

.babs-icon-btn svg {
  width: 20px;
  height: 20px;
}

.search-dialog,
.cart-drawer {
  padding: 0;
  border: 0;
  color: var(--black);
  background-color: var(--ivory);
}

.search-dialog::backdrop,
.cart-drawer::backdrop {
  background-color: rgba(17, 17, 17, 0.45);
}

.search-dialog {
  width: min(680px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100dvh - var(--announcement-h) - 48px);
  margin: calc(var(--announcement-h) + 24px) auto auto;
  border-radius: var(--radius-md);
  box-shadow: 0 24px 60px rgba(17, 17, 17, 0.22);
  overflow: hidden;
}

.search-dialog[open] {
  display: flex;
  animation: babs-fade-down 0.22s ease-out;
}

.search-dialog__panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
}

.search-dialog__form {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 14px 14px 22px;
  border-bottom: 2px solid var(--border-soft);
  transition: border-color var(--transition-base);
}

.search-dialog__form:focus-within {
  border-bottom-color: var(--gold);
}

.search-dialog__icon svg {
  width: 22px;
  height: 22px;
  color: var(--deep-gold);
}

.search-dialog__input {
  flex: 1;
  min-width: 0;
  padding: 10px 0;
  border: 0;
  background: transparent;
  font-size: 1.05rem;
  color: var(--black);
}

/* The gold underline on the form is the visible focus indicator. */
.search-dialog__input:focus-visible {
  outline: none;
}

.search-dialog__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.search-results {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 10px;
}

.search-results__heading {
  padding: 8px 12px 6px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.search-result {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-base);
}

.search-result:hover,
.search-result:focus-visible {
  background-color: var(--cream);
}

.search-result:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
}

.search-result__img,
.search-result__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, #f2e5d4 0%, var(--cream) 62%);
  border: 1px solid var(--border-soft);
  object-fit: cover;
}

.search-result__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--deep-gold);
}

.search-result__icon svg {
  width: 22px;
  height: 22px;
}

.search-result__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.search-result__title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1rem;
}

.search-result__title mark {
  background-color: rgba(201, 145, 47, 0.24);
  color: inherit;
  border-radius: 2px;
}

.search-result__sub {
  font-size: 0.8rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-result__type {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--deep-gold);
}

.search-empty {
  padding: 22px 12px 18px;
  text-align: center;
}

.search-empty__title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.1rem;
  overflow-wrap: anywhere;
}

.search-empty__text {
  margin-top: 6px;
  font-size: 0.88rem;
  color: var(--text-muted);
}

.search-empty__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
  margin-top: 14px;
}

.search-empty__links a {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--deep-gold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Search results deep-link to a product card on the Shop page; keep it
   clear of the sticky bar + header and mark the arrived-at card. */
.product-card[id] {
  scroll-margin-top: calc(var(--announcement-h) + 120px);
}

.product-card:target {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}

@keyframes babs-fade-down {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 640px) {
  .search-dialog {
    width: 100vw;
    max-height: 100dvh;
    height: 100dvh;
    margin: 0;
    border-radius: 0;
  }

  .search-dialog__form {
    padding: 10px 8px 10px 16px;
  }

  .search-result {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 12px;
  }

  .search-result__img,
  .search-result__icon {
    width: 44px;
    height: 44px;
  }

  .search-result__type {
    display: none;
  }
}

/* ---------------------------------------------------------
   21. Cart Drawer (js/cart.js)
   --------------------------------------------------------- */
.cart-drawer {
  width: min(440px, 100vw);
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0 0 0 auto;
  box-shadow: -18px 0 50px rgba(17, 17, 17, 0.18);
}

.cart-drawer[open] {
  animation: babs-slide-in 0.28s ease-out;
}

.cart-drawer__panel {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.cart-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 16px 16px 24px;
  border-bottom: 1px solid var(--border-soft);
}

.cart-drawer__title {
  font-size: 1.45rem;
}

.cart-drawer__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 24px;
}

.cart-lines {
  display: flex;
  flex-direction: column;
}

.cart-line {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid var(--border-soft);
}

.cart-line__img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-soft);
  background: linear-gradient(180deg, #f2e5d4 0%, var(--cream) 62%);
}

.cart-line__main {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.cart-line__name {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.25;
}

.cart-line__name:hover {
  color: var(--deep-gold);
}

.cart-line__meta {
  margin-top: 2px;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.cart-line__details {
  margin: 6px 0 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.cart-line__details div {
  overflow-wrap: anywhere;
}

.cart-line__details dt,
.cart-line__details dd {
  display: inline;
  margin: 0;
}

.cart-line__details dt {
  font-weight: 600;
  color: var(--charcoal);
}

.cart-line__details dt::after {
  content: ": ";
}

.cart-line__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}

.qty-stepper--sm .qty-stepper__btn {
  width: 36px;
  font-size: 1.05rem;
}

.qty-stepper--sm .qty-stepper__btn:disabled {
  color: #b3a898;
  cursor: not-allowed;
  background: none;
}

.qty-stepper--sm input {
  width: 46px;
  padding: 7px 0;
  font-size: 0.9rem;
}

.cart-line__remove {
  font-size: 0.78rem;
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cart-line__remove:hover {
  color: #a3322a;
}

.cart-line__total {
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
}

.cart-line--custom .cart-line__total {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--deep-gold);
}

.cart-drawer__footer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 24px calc(20px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border-soft);
  background-color: var(--cream-light);
}

.cart-drawer__footer[hidden] {
  display: none;
}

.cart-drawer__subtotal {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 1rem;
}

.cart-drawer__subtotal strong {
  font-family: var(--font-serif);
  font-size: 1.3rem;
}

.cart-drawer__note {
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--text-muted);
}

/* Custom-order pricing and fulfillment notes below the cart lines. */
.cart-drawer__notices {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 0 20px;
}

.cart-drawer__notice {
  padding: 12px 14px;
  border-left: 3px solid var(--gold);
  border-radius: var(--radius-sm);
  background-color: var(--cream-light);
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--charcoal);
}

.cart-drawer__footer .btn {
  margin-top: 4px;
  white-space: normal;
}

.cart-drawer__email {
  align-self: center;
  font-size: 0.8rem;
  text-align: center;
  color: var(--deep-gold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cart-drawer__status {
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--charcoal);
}

.cart-drawer__status:empty {
  display: none;
}

.cart-drawer__status a {
  color: var(--deep-gold);
  text-decoration: underline;
}

.cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 56px 8px;
  text-align: center;
}

.cart-empty__icon svg {
  width: 44px;
  height: 44px;
  color: var(--gold);
}

.cart-empty__title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.25rem;
}

.cart-empty__text {
  max-width: 30ch;
  font-size: 0.88rem;
  color: var(--text-muted);
}

.cart-empty .btn {
  margin-top: 8px;
}

.cart-empty__link {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--deep-gold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Build Your BABS: "Add to Cart" under the request button. */
.builder-summary .builder-summary__add {
  margin-top: 10px;
}

.form-message__link {
  font-weight: 600;
  color: var(--deep-gold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Returning from checkout (success / cancelled). */
.babs-toast {
  position: fixed;
  left: 50%;
  bottom: calc(96px + env(safe-area-inset-bottom));
  z-index: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 12px 8px 12px 18px;
  transform: translateX(-50%);
  border-radius: var(--radius-sm);
  background-color: var(--black);
  color: var(--ivory);
  font-size: 0.88rem;
  box-shadow: var(--shadow-card);
}

.babs-toast .babs-icon-btn {
  color: var(--ivory);
}

.babs-toast .babs-icon-btn:hover {
  background-color: var(--charcoal);
  color: var(--gold);
}

@keyframes babs-slide-in {
  from { transform: translateX(100%); }
  to { transform: none; }
}

@media (max-width: 400px) {
  .cart-drawer__header {
    padding-left: 18px;
  }

  .cart-drawer__body {
    padding: 0 18px;
  }

  .cart-drawer__footer {
    padding-inline: 18px;
  }

  .cart-line {
    grid-template-columns: 52px minmax(0, 1fr) auto;
    gap: 12px;
  }

  .cart-line__img {
    width: 52px;
    height: 52px;
  }
}

/* ---------------------------------------------------------
   22. Ask BABS Help Panel (js/assistant.js)
   Fixed bottom-right. Sits below the sticky header (500) and the
   open mobile menu (350-450), and is hidden while that menu is open.
   --------------------------------------------------------- */
.assist-launcher {
  position: fixed;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 300;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px 12px 14px;
  border: 1px solid rgba(201, 145, 47, 0.55);
  border-radius: 999px;
  background-color: var(--black);
  color: var(--ivory);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  box-shadow: 0 10px 28px rgba(17, 17, 17, 0.25);
  transition: transform var(--transition-base), background-color var(--transition-base);
}

.assist-launcher:hover {
  transform: translateY(-2px);
  background-color: var(--charcoal);
}

.assist-launcher svg {
  width: 22px;
  height: 22px;
  color: var(--gold);
}

.assist-panel {
  position: fixed;
  right: max(20px, env(safe-area-inset-right));
  bottom: calc(max(20px, env(safe-area-inset-bottom)) + 62px);
  z-index: 300;
  display: flex;
  flex-direction: column;
  width: min(370px, calc(100vw - 40px));
  max-height: min(580px, calc(100dvh - var(--announcement-h) - 190px));
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background-color: var(--ivory);
  box-shadow: 0 24px 60px rgba(17, 17, 17, 0.22);
  overflow: hidden;
  animation: babs-fade-up 0.22s ease-out;
}

.assist-panel[hidden] {
  display: none;
}

html:has(.nav-links.is-open) .assist-launcher,
html:has(.nav-links.is-open) .assist-panel {
  display: none;
}

/* Layout: header, suggestions and the input row keep their natural
   height; the conversation log is the ONLY scrolling region. */
.assist-panel__header {
  flex: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 16px 10px 14px 20px;
  background-color: var(--cream);
  border-bottom: 1px solid var(--border-soft);
}

.assist-panel__title {
  font-size: 1.2rem;
}

.assist-panel__subtitle {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.assist-panel__log {
  flex: 1 1 auto;
  min-height: 120px;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 16px 8px;
}

.assist-msg {
  max-width: 88%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 0.86rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.assist-msg--babs {
  align-self: flex-start;
  background-color: var(--cream-light);
  border: 1px solid var(--border-soft);
  border-bottom-left-radius: 4px;
}

.assist-msg--user {
  align-self: flex-end;
  background-color: var(--black);
  color: var(--ivory);
  border-bottom-right-radius: 4px;
  overflow-wrap: anywhere;
}

.assist-msg__links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 6px;
}

.assist-msg__links a {
  font-weight: 600;
  color: var(--deep-gold);
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

/* Suggested questions: always wrapped (never a horizontal scroller).
   After the first question they fold behind a "Suggested questions"
   toggle so the conversation keeps the space. */
.assist-panel__suggest {
  flex: none;
  padding: 8px 16px 10px;
  border-top: 1px solid var(--border-soft);
}

.assist-panel__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.assist-panel__chips[hidden],
.assist-panel__chips-toggle[hidden] {
  display: none;
}

.assist-panel__chips-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 0;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--deep-gold);
}

.assist-panel__chips-toggle svg {
  width: 16px;
  height: 16px;
  transition: transform var(--transition-base);
}

.assist-panel__chips-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.assist-panel__chips-toggle[aria-expanded="true"] + .assist-panel__chips {
  margin-top: 8px;
}

.assist-chip {
  max-width: 100%;
  padding: 6px 12px;
  text-align: left;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background-color: var(--white);
  font-size: 0.76rem;
  transition: border-color var(--transition-base), background-color var(--transition-base);
}

.assist-chip:hover {
  border-color: var(--gold);
  background-color: var(--cream-light);
}

.assist-panel__footer {
  flex: none;
  padding-top: 2px;
}

.assist-panel__form {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 12px;
  padding: 4px 4px 4px 14px;
  border: 1.5px solid var(--border-soft);
  border-radius: 999px;
  background-color: var(--white);
  transition: border-color var(--transition-base);
}

.assist-panel__form:focus-within {
  border-color: var(--gold);
}

.assist-panel__input {
  flex: 1;
  min-width: 0;
  padding: 8px 0;
  border: 0;
  background: transparent;
  font-size: 0.88rem;
}

/* The gold border on the form is the visible focus indicator. */
.assist-panel__input:focus-visible {
  outline: none;
}

.assist-panel__send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: var(--black);
  color: var(--gold);
}

.assist-panel__send svg {
  width: 18px;
  height: 18px;
}

.assist-panel__disclaimer {
  padding: 8px 16px 12px;
  font-size: 0.7rem;
  text-align: center;
  color: var(--text-muted);
}

/* Short viewports (e.g. a phone in landscape): drop the disclaimer line
   so the input row always stays visible inside the panel. */
@media (max-height: 640px) {
  .assist-panel__disclaimer {
    display: none;
  }

  .assist-panel__log {
    min-height: 80px;
  }

  .assist-panel__footer {
    padding-bottom: 10px;
  }
}

@keyframes babs-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* Mobile: compact round launcher; the panel becomes a bottom sheet that
   covers the launcher (it has its own close button). */
@media (max-width: 640px) {
  .assist-launcher {
    right: max(14px, env(safe-area-inset-right));
    bottom: max(14px, env(safe-area-inset-bottom));
    width: 52px;
    height: 52px;
    padding: 0;
    justify-content: center;
  }

  .assist-launcher__label {
    display: none;
  }

  .assist-panel {
    left: 8px;
    right: 8px;
    bottom: max(8px, env(safe-area-inset-bottom));
    width: auto;
    max-height: calc(100dvh - var(--announcement-h) - 96px);
  }

  html.assist-open .assist-launcher {
    display: none;
  }

  /* Room under the copyright + KafoTech credit so the launcher never
     covers them at the very bottom of the page. */
  .footer-bottom {
    padding-bottom: 80px;
  }
}

/* ---------------------------------------------------------
   22. Online checkout (Phase 2 — js/checkout.js)
   Only used when the Worker switches online checkout on.
   --------------------------------------------------------- */
/* Page wording that depends on whether online checkout is on
   (html.babs-checkout-online is set by /js/site-config.js). */
[data-checkout-online] {
  display: none;
}

.babs-checkout-online [data-checkout-online] {
  display: revert;
}

.babs-checkout-online [data-checkout-offline] {
  display: none;
}

.cart-drawer__shipping {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
  font-size: 0.85rem;
  color: var(--charcoal);
}

.cart-line__submit {
  align-self: flex-start;
  margin-top: 8px;
  padding: 7px 14px;
  font-size: 0.72rem;
}

.checkout-drawer__body {
  padding-top: 16px;
  padding-bottom: 16px;
}

.checkout-test-banner {
  margin-bottom: 14px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background-color: #fff3dc;
  color: #6d4700;
  font-size: 0.8rem;
  line-height: 1.45;
}

.checkout-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.checkout-fieldset {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.checkout-fieldset[hidden] {
  display: none;
}

.checkout-fieldset legend {
  margin-bottom: 4px;
  padding: 0;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1rem;
}

.checkout-choice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background-color: #fff;
  cursor: pointer;
}

.checkout-choice:has(input:checked) {
  border-color: var(--gold);
  box-shadow: inset 0 0 0 1px var(--gold);
}

.checkout-choice input {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--deep-gold);
}

.checkout-choice__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.checkout-choice__text strong {
  font-size: 0.92rem;
  color: var(--charcoal);
}

.checkout-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.checkout-field label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--charcoal);
}

.checkout-field__input {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background-color: #fff;
  font: inherit;
  font-size: 16px; /* no iOS zoom on focus */
  color: var(--charcoal);
}

.checkout-field__input:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 1px;
}

.checkout-field__input[aria-invalid] {
  border-color: #a3322a;
}

.checkout-field__hint {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.checkout-field__error {
  font-size: 0.78rem;
  color: #a3322a;
}

.checkout-field__error:empty {
  display: none;
}

.checkout-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 10px;
}

.checkout-heading {
  margin: 22px 0 8px;
  font-size: 1rem;
}

.checkout-summary {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background-color: var(--cream-light);
  font-size: 0.85rem;
}

.checkout-summary__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.checkout-summary__row span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.checkout-summary__row strong {
  flex: none;
  max-width: 55%;
  text-align: right;
  font-weight: 600;
}

.checkout-summary__total {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--border-soft);
  font-size: 1rem;
}

.checkout-summary__total strong {
  font-family: var(--font-serif);
  font-size: 1.15rem;
}

.checkout-drawer .cart-drawer__notice {
  margin-bottom: 12px;
}

.checkout-drawer .cart-drawer__notice[hidden] {
  display: none;
}

.checkout-drawer .cart-drawer__note + .cart-drawer__note {
  margin-top: 6px;
}

.checkout-drawer .btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.checkout-back {
  border: 0;
  background: none;
  cursor: pointer;
}

.checkout-done {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 8px 0 16px;
  font-size: 0.92rem;
}

.checkout-done__title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.35rem;
}

@media (max-width: 400px) {
  .checkout-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------------------------------------------------------
   23. Ingredient label list (ingredients.html)
   --------------------------------------------------------- */
.prose .ingredient-label {
  counter-reset: ingredient;
  display: flex;
  flex-direction: column;
  margin: 18px 0 20px;
  padding: 0;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background-color: #fff;
  list-style: none;
}

.prose .ingredient-label li {
  counter-increment: ingredient;
  display: grid;
  grid-template-columns: 2.2em minmax(0, 1fr);
  column-gap: 8px;
  margin: 0;
  padding: 12px 16px;
  border-top: 1px solid var(--border-soft);
}

.prose .ingredient-label li:first-child {
  border-top: 0;
}

.prose .ingredient-label li::before {
  content: counter(ingredient) ".";
  grid-row: span 2;
  font-family: var(--font-serif);
  font-weight: 700;
  color: var(--deep-gold);
}

.ingredient-label__name {
  font-weight: 600;
  color: var(--charcoal);
  overflow-wrap: anywhere;
}

.ingredient-label__common {
  grid-column: 2;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.ingredient-label__note {
  padding: 12px 14px;
  border-left: 3px solid var(--gold);
  border-radius: var(--radius-sm);
  background-color: var(--cream-light);
  font-size: 0.92rem;
}


/* ---------------------------------------------------------
   Product detail pages (product.html, rendered by js/product.js)
   --------------------------------------------------------- */
/* The product name links to its detail page; the link covers the card
   (photo, name, description) while Add to Cart stays on top of it. */
.product-card__link {
  color: inherit;
}

.product-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 10px;
}

.product-card__link:focus-visible {
  outline: none;
}

.product-card__link:focus-visible::after {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.product-card__cta {
  position: relative;
  z-index: 2;
}

.product-detail {
  padding: 28px 0 72px;
  background-color: var(--cream-light);
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: 24px;
}

.breadcrumb li + li::before {
  content: "/";
  margin-right: 6px;
  color: var(--border-soft);
}

.breadcrumb a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.breadcrumb a:hover {
  color: var(--deep-gold);
}

.breadcrumb [aria-current] {
  color: var(--charcoal);
  font-weight: 600;
}

.product-detail__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}

.product-detail__media {
  border-radius: var(--radius-md);
  border: 1px solid var(--border-soft);
  background-color: #faf0e3;
  overflow: hidden;
}

.product-detail__photo {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

.product-detail__info h1 {
  font-size: clamp(1.8rem, 1.6vw + 1.3rem, 2.6rem);
  line-height: 1.15;
  margin: 8px 0 14px;
}

.product-detail__price {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--black);
}

.product-detail__size {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-left: 6px;
}

.product-detail__tax {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 4px 0 18px;
}

.product-detail__lead {
  line-height: 1.7;
  color: var(--charcoal);
  padding-top: 18px;
  border-top: 1px solid var(--border-soft);
}

.product-detail__buy {
  margin-top: 24px;
}

.product-detail__qty-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.product-detail__buy-row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 12px;
}

.product-detail__add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1 1 200px;
}

.product-detail__add svg {
  width: 18px;
  height: 18px;
  color: var(--gold);
}

.product-detail__status {
  min-height: 1.5em;
  margin-top: 10px;
  font-size: 0.88rem;
  color: var(--green);
  font-weight: 500;
}

.product-detail__back {
  display: inline-block;
  margin-top: 8px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.product-detail__back:hover {
  color: var(--deep-gold);
}

.product-detail__sections {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 48px;
  margin-top: 44px;
  padding-top: 40px;
  border-top: 1px solid var(--border-soft);
}

.product-detail__sections section > * + * {
  margin-top: 12px;
}

.product-detail__finalizing {
  font-size: 0.88rem;
  color: var(--text-muted);
  font-style: italic;
}

.product-missing__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 18px;
  margin: 20px 0 24px;
}

.product-missing__links a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 900px) {
  .product-detail__grid,
  .product-detail__sections {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .product-detail__media {
    max-width: 520px;
    width: 100%;
    margin-inline: auto;
  }

  .product-detail__sections {
    margin-top: 36px;
    padding-top: 28px;
  }
}

@media (max-width: 640px) {
  .product-detail {
    padding: 18px 0 56px;
  }

  .product-detail__add {
    flex-basis: 100%;
  }
}

/* ---------------------------------------------------------
   Contact Us form (js/contact.js): field errors, spam trap,
   sending state and the "Message Received!" confirmation.
   --------------------------------------------------------- */
.simple-form--contact .form-field input[aria-invalid="true"],
.simple-form--contact .form-field textarea[aria-invalid="true"] {
  border-color: #b3261e;
  box-shadow: 0 0 0 1px #b3261e;
}

.simple-form--contact .form-field textarea {
  resize: vertical;
  min-height: 140px;
}

.form-field .field-error {
  margin: 6px 0 0;
  font-size: 0.8rem;
  font-weight: 500;
  color: #b3261e;
}

/* Off-screen rather than display:none, so simple bots still see it. */
.form-honeypot {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.simple-form--contact .form-message[data-state="error"] {
  color: #b3261e;
  font-weight: 500;
}

.simple-form--contact .form-message[data-state="pending"] {
  color: var(--text-muted);
}

.simple-form--contact button[type="submit"]:disabled {
  opacity: 0.7;
  cursor: progress;
}

.contact-dialog {
  width: min(440px, calc(100vw - 32px));
  margin: auto;
  padding: 36px 28px 28px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background-color: var(--ivory);
  color: var(--charcoal);
  text-align: center;
  box-shadow: var(--shadow-card);
}

.contact-dialog::backdrop {
  background-color: rgba(17, 17, 17, 0.55);
}

.contact-dialog__icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background-color: var(--cream);
  border: 1px solid var(--gold);
  color: var(--gold);
}

.contact-dialog__icon svg {
  width: 26px;
  height: 26px;
}

.contact-dialog h2 {
  font-size: clamp(1.5rem, 1vw + 1.2rem, 1.9rem);
  margin-bottom: 10px;
}

.contact-dialog p {
  line-height: 1.6;
  margin-bottom: 22px;
  overflow-wrap: anywhere;
}

.contact-dialog .btn {
  min-width: 160px;
}

/* ---------------------------------------------------------
   Customer reviews (js/reviews.js): approved reviews, the
   review form with a star rating, and its confirmation.
   --------------------------------------------------------- */
.reviews-summary {
  margin: 0 0 24px;
  text-align: center;
  font-weight: 600;
  color: var(--charcoal);
}

.reviews-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 20px;
}

.review-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px;
  background-color: var(--ivory);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  min-width: 0;
}

.review-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.review-card__stars {
  margin: 0;
  color: var(--gold);
  font-size: 1.15rem;
  letter-spacing: 2px;
}

.review-card__verified {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #2f6b3a;
  background-color: #e8f3ea;
  border-radius: 999px;
  padding: 3px 10px;
}

.review-card__product {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
}

.review-card__body {
  margin: 0;
  line-height: 1.65;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.review-card__meta {
  margin: auto 0 0;
  padding-top: 6px;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.review-card__name {
  font-weight: 600;
  color: var(--charcoal);
}

.page-section--review-form {
  padding-top: 0;
}

.review-form__title {
  text-align: center;
  margin-bottom: 18px;
}

.reviews-offline {
  text-align: center;
}

.reviews-offline p {
  margin-bottom: 18px;
  line-height: 1.6;
}

.form-optional {
  font-weight: 400;
  color: var(--text-muted);
}

.rating-field {
  border: 0;
  padding: 0;
  margin-inline: 0;
  min-width: 0;
}

.rating-field legend {
  font-weight: 600;
  margin-bottom: 6px;
  font-size: 0.9rem;
}

/* Visually right-to-left so that hovering/checking a star also lights the stars before it. */
.rating-input {
  display: inline-flex;
  flex-direction: row-reverse;
  gap: 4px;
}

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

.rating-input label {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  cursor: pointer;
  border-radius: 8px;
}

.rating-input label::before {
  content: "\2605";
  font-size: 2rem;
  line-height: 1;
  color: #d9cfbd;
  transition: color 0.15s ease;
}

.rating-input input:checked ~ label::before,
.rating-input label:hover::before,
.rating-input label:hover ~ label::before {
  color: var(--gold);
}

.rating-input input:focus-visible + label {
  outline: 2px solid var(--charcoal);
  outline-offset: 2px;
}

.rating-field[aria-invalid="true"] .rating-input {
  outline: 1px solid #b3261e;
  border-radius: 8px;
}

.form-field--check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 10px;
  align-items: start;
}

.form-field--check input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin-top: 2px;
}

.form-field--check label {
  font-weight: 400;
  line-height: 1.5;
}

.form-field--check .field-error {
  grid-column: 1 / -1;
}

.simple-form--review select[aria-invalid="true"],
.simple-form--review input[type="checkbox"][aria-invalid="true"] {
  outline: 2px solid #b3261e;
}

.review-success {
  text-align: center;
  padding: 28px 20px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background-color: var(--ivory);
}

.review-success:focus {
  outline: none;
}

.review-success p {
  line-height: 1.6;
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .rating-input label::before {
    transition: none;
  }
}

/* The review blocks set their own display; keep the hidden attribute authoritative. */
[data-reviews] [hidden],
#write-review [hidden] {
  display: none !important;
}

/* Policy link in the checkout panel (Returns & Refunds). */
.cart-drawer__note[data-checkout-policies] a {
  color: var(--charcoal);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* The email sign-up stays hidden until a subscription service is connected. */
.newsletter[hidden] {
  display: none !important;
}