/* =========================================================
   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
   ========================================================= */

/* ---------------------------------------------------------
   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="page"]::after {
  width: 100%;
}

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

.nav-actions button,
.nav-actions a {
  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 a:hover svg,
.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;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------------------------------------------------------
   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%;
}

/* Real client photo: portrait, 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: 3 / 4;
  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;
}

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

/* Real client photos (portrait, with their own background) fill the
   frame as a rounded photo tile. cover can only show ~2/3 of the photo's
   height, so each focal point favours the top of the jar (lid) while
   keeping the scent name readable; the bottom of the label is what gets
   trimmed. Tuned per photo because each jar sits at a different height. */
.product-card__image .product-card__photo {
  object-fit: cover;
  border-radius: 8px;
}

.product-card__photo--mango {
  object-position: 50% 18%;
}

/* Lid rim sits at the very top of this photo; showing it would cut off
   "Vanilla", so the clear jar top is shown instead. */
.product-card__photo--vanilla {
  object-position: 50% 36%;
}

.product-card__photo--egyptian-musk {
  object-position: 50% 41%;
}

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

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

/* Photography-ready ingredient/lifestyle region; its left and top
   edges feather into the panel like the reference photo. */
.why-reviews__image {
  position: absolute;
  right: 0;
  bottom: 0;
  width: calc(300 * var(--u));
  height: calc(235 * var(--u));
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at 55% 55%, #f5e8d6 0%, #ead7ba 60%, #e0c8a6 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%), linear-gradient(180deg, transparent 0, #000 12%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 16%), linear-gradient(180deg, transparent 0, #000 12%);
  mask-composite: intersect;
}

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

/* "Powered 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;
}

/* ---------------------------------------------------------
   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;
}

.builder__summary {
  position: sticky;
  top: calc(120px + var(--announcement-h));
  max-height: calc(100vh - 136px - var(--announcement-h));
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  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 {
  font-size: 0.92rem;
  font-weight: 600;
}

.builder-summary__price strong {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  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;
}

/* ---------------------------------------------------------
   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 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) 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;
  }

  .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__image {
    position: relative;
    right: auto;
    bottom: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 300 / 235;
    border-radius: 10px;
    -webkit-mask-image: none;
    mask-image: none;
  }

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

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

  .why-reviews__image {
    max-width: 420px;
    margin-inline: auto;
  }

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