/** Shopify CDN: Minification failed

Line 2134:0 Unexpected "}"

**/
/* ==========================================================================
   Blooming Beloved Co. — storefront design system
   Soft editorial minimalism. Self-contained; all custom properties are
   namespaced --bb-* so this can layer onto Dawn without collisions.

   Contents
     1  Tokens
     2  Base + accessibility primitives
     3  Layout primitives
     4  Typography
     5  Ornaments + placeholders
     6  Buttons, forms, notes
     7  Announcement ticker
     8  Header + slide-out menu
     9  Hero
    10  Editorial cards (collections)
    11  Brand story
    12  Product cards + grids
    13  Shop by pattern
    14  Values
    15  Lifestyle band
    16  Trust
    17  Testimonials
    18  Editorial email capture
    19  Footer
    20  Newsletter pop-up
    21  Product + collection pages
    22  Motion preferences
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Palette — supplied by the client, with three values adjusted for contrast.
     Each adjustment is noted; the originals are kept where they still work. */
  --bb-bg: #faf6f0; /* main background */
  --bb-bg-2: #f4ece4; /* secondary background */
  --bb-petal: #e9ddd4; /* pale petal */
  --bb-panel: #e4d8cd; /* deeper block, for image-free panels */
  --bb-linen: #ddccba;
  --bb-text: #5d5046; /* main text — 7.2:1 on --bb-bg */
  --bb-text-2: #78695d; /* secondary text — 4.9:1 on --bb-bg */
  --bb-border: #cdbcaf; /* fine decorative rules only — 1.7:1, far too light
                           to bound a form control */
  --bb-border-control: #a78972; /* ADJUSTED: same hue at 3.0:1, so input edges
                                   clear 3:1 against both the page and the field */
  --bb-btn: #846c5b; /* ADJUSTED from #a58e7d, which carries cream text at only
                        2.9:1. Same hue, deep enough for 4.6:1. */
  --bb-btn-hover: #735e4f; /* ADJUSTED from #8c7566 (4.0:1) to 5.7:1 */
  --bb-accent: #a58e7d; /* the client's taupe, kept for borders and ornament */
  --bb-accent-ink: #7a5f4b; /* darkened for small accent text: 5.5:1 */
  --bb-sage: #7a7a62; /* botanical sage */
  --bb-blue: #a7bdc4; /* faded floral blue */
  --bb-flora: #b09a82; /* botanical layer, baked into bb-flora-*.svg */

  /* Derived */
  --bb-hairline: rgba(205, 188, 175, 0.6);
  --bb-veil: rgba(93, 80, 70, 0.06);
  --bb-scrim: rgba(93, 80, 70, 0.32);
  --bb-overlay: rgba(93, 80, 70, 0.45);
  --bb-lift: 0 24px 60px -34px rgba(93, 80, 70, 0.38);

  /* Type — editorial garamond for anything emotional, restrained sans for
     labels, forms and navigation. Script is the logo wordmark only. */
  --bb-serif: "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --bb-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bb-script: "Parisienne", "Snell Roundhand", cursive;

  /* Fluid scale, 375 → 1440 */
  --bb-t-hero: clamp(2.5rem, 1.5rem + 4.3vw, 5rem);
  --bb-t-tagline: clamp(2rem, 1.4rem + 1.9vw, 3rem); /* 32 → 48px */
  --bb-t-h1: clamp(2rem, 1.5rem + 2.2vw, 3.25rem);
  --bb-t-h2: clamp(1.7rem, 1.3rem + 1.7vw, 2.6rem);
  --bb-t-h3: clamp(1.25rem, 1.1rem + 0.65vw, 1.6rem);
  --bb-t-body: clamp(1rem, 0.95rem + 0.25vw, 1.1875rem); /* 16 → 19px */
  --bb-t-form: clamp(0.9375rem, 0.9rem + 0.15vw, 1.0625rem); /* 15 → 17px */
  --bb-t-small: 0.8125rem;
  --bb-t-micro: 0.75rem; /* uppercase labels, 12px floor */
  --bb-track: 0.3em;

  /* Rhythm */
  --bb-section-y: clamp(3.75rem, 2.2rem + 6.6vw, 7.5rem);
  --bb-gutter: clamp(1.375rem, 0.6rem + 3vw, 3.5rem); /* 22px floor per spec */
  --bb-measure: 36rem;
  --bb-max: 82rem;
  --bb-header-h: 4.25rem;
  --bb-radius: 6px; /* 4–8px, never pill */

  /* Motion — slow and calm by design */
  --bb-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --bb-fade: 0.6s;
}

@media (min-width: 60em) {
  :root {
    --bb-header-h: 5.25rem;
  }
}

/* --------------------------------------------------------------------------
   2. Base + accessibility primitives
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body.bb-body {
  margin: 0;
  background-color: var(--bb-bg);
  color: var(--bb-text-2);
  font-family: var(--bb-sans);
  font-size: var(--bb-t-body);
  font-weight: 300;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.bb-no-scroll {
  overflow: hidden;
}

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

img {
  height: auto;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}

button {
  font: inherit;
  color: inherit;
}

ul,
ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

figure {
  margin: 0;
}

.bb-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--bb-text);
  color: var(--bb-bg);
  padding: 0.85rem 1.4rem;
  font-size: var(--bb-t-small);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.bb-skip-link:focus {
  left: 0.75rem;
  top: 0.75rem;
}

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

/* Focus — warm and clearly visible, never removed */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--bb-text);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */

.bb-section {
  padding-block: var(--bb-section-y);
  padding-inline: var(--bb-gutter);
  position: relative;
}

.bb-section--tight {
  padding-block: clamp(2.5rem, 1.6rem + 3.8vw, 4.5rem);
}

.bb-section--flush {
  padding-inline: 0;
}

.bb-section--tint {
  background-color: var(--bb-bg-2);
}

.bb-section--petal {
  background-color: var(--bb-petal);
}

/* Greige block, as used behind the live store's hero copy */
.bb-panel {
  background-color: var(--bb-panel);
}

/* --bb-text-2 falls below 4.5:1 on every ground deeper than --bb-bg, so these
   step secondary copy up to the body colour rather than leaving it under AA. */
.bb-section--tint,
.bb-section--petal,
.bb-panel {
  color: var(--bb-text);
}

.bb-section--tint .bb-eyebrow,
.bb-section--tint .bb-quiet,
.bb-section--tint .bb-form-note,
.bb-section--petal .bb-eyebrow,
.bb-section--petal .bb-quiet,
.bb-section--petal .bb-form-note,
.bb-panel .bb-eyebrow,
.bb-panel .bb-quiet,
.bb-panel .bb-form-note {
  color: var(--bb-text);
}

.bb-shell {
  max-width: var(--bb-max);
  margin-inline: auto;
  width: 100%;
}

.bb-shell--narrow {
  max-width: var(--bb-measure);
}

.bb-shell--mid {
  max-width: 58rem;
}

.bb-center {
  text-align: center;
}

.bb-stack > * + * {
  margin-top: var(--bb-gap, 1.15rem);
}

/* Section header: eyebrow / heading / intro, used across the homepage */
.bb-head {
  --bb-gap: 1rem;
  max-width: 44rem;
}

.bb-head--center {
  margin-inline: auto;
  text-align: center;
}

/* --------------------------------------------------------------------------
   4. Typography
   -------------------------------------------------------------------------- */

.bb-eyebrow {
  font-family: var(--bb-sans);
  font-size: var(--bb-t-small);
  font-weight: 400;
  letter-spacing: var(--bb-track);
  text-transform: uppercase;
  color: var(--bb-text-2);
  margin: 0;
  text-indent: var(--bb-track); /* offset trailing tracking so centring reads true */
}

.bb-h1,
.bb-h2,
.bb-h3 {
  font-family: var(--bb-serif);
  font-weight: 400;
  color: var(--bb-text);
  line-height: 1.18;
  letter-spacing: -0.004em;
  margin: 0;
  text-wrap: balance;
}

.bb-h1 {
  font-size: var(--bb-t-h1);
}

.bb-h2 {
  font-size: var(--bb-t-h2);
}

.bb-h3 {
  font-size: var(--bb-t-h3);
  line-height: 1.3;
}

.bb-hero-type {
  font-size: var(--bb-t-hero);
  line-height: 1.1;
}

/* Script — decorative short phrases only. Never navigation, labels,
   instructions, prices, or form guidance. */
.bb-script {
  font-family: var(--bb-script);
  font-weight: 400;
  color: var(--bb-accent-ink);
  line-height: 1.2;
  padding-block: 0.1em; /* script faces sit high in the em box */
  font-size: clamp(1.7rem, 1.35rem + 1.5vw, 2.6rem);
}

.bb-prose p {
  margin: 0 0 1.1em;
  max-width: var(--bb-measure);
}

.bb-prose p:last-child {
  margin-bottom: 0;
}

.bb-center .bb-prose p,
.bb-head--center .bb-prose p {
  margin-inline: auto;
}

.bb-lede {
  font-size: clamp(1.05rem, 0.99rem + 0.28vw, 1.2rem);
  line-height: 1.7;
}

.bb-quiet {
  font-size: var(--bb-t-small);
  color: var(--bb-text-2);
}

/* --------------------------------------------------------------------------
   5. Ornaments + placeholders
   -------------------------------------------------------------------------- */

.bb-orn {
  display: block;
  margin-inline: auto;
  color: var(--bb-sage);
}

.bb-orn svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

.bb-orn--sprig {
  width: clamp(2.75rem, 7vw, 4rem);
}

.bb-orn--breath {
  /* a tall wheat sprig now, so this is sized by height rather than width */
  width: clamp(1.75rem, 4.5vw, 2.6rem);
  color: var(--bb-accent);
  opacity: 0.85;
}

.bb-orn--rule {
  width: min(16rem, 62%);
  color: var(--bb-accent);
}

/* Plain hairline divider */
.bb-rule {
  border: 0;
  border-top: 1px solid var(--bb-hairline);
  margin: 0;
}

/* Placeholder imagery — warm, on-palette, obviously provisional.
   Used anywhere a photograph has not been supplied yet. */
.bb-ph {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  padding: 1.25rem;
  text-align: center;
  background:
    radial-gradient(120% 90% at 22% 12%, rgba(255, 255, 255, 0.7), transparent 60%),
    linear-gradient(155deg, var(--bb-petal) 0%, var(--bb-linen) 100%);
  color: var(--bb-text-2);
  font-family: var(--bb-sans);
  font-size: var(--bb-t-micro);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-indent: 0.24em;
  overflow: hidden;
}

/* Soft botanical shadow, echoing window light through leaves */
.bb-ph::after {
  content: "";
  position: absolute;
  inset: auto -12% -22% 46%;
  height: 62%;
  background: radial-gradient(closest-side, rgba(94, 80, 67, 0.13), transparent 72%);
  transform: rotate(-14deg);
  pointer-events: none;
}

.bb-ph svg {
  width: 2.75rem;
  color: var(--bb-sage);
  opacity: 0.75;
}

/* --------------------------------------------------------------------------
   6. Buttons, forms, notes
   -------------------------------------------------------------------------- */

.bb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-family: var(--bb-sans);
  font-size: var(--bb-t-small);
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-indent: 0.18em;
  text-decoration: none;
  padding: 1rem 2.1rem;
  border: 1px solid var(--bb-btn);
  border-radius: var(--bb-radius);
  background-color: var(--bb-btn);
  color: var(--bb-bg);
  cursor: pointer;
  transition: background-color 0.45s var(--bb-ease), color 0.45s var(--bb-ease),
    border-color 0.45s var(--bb-ease);
}

.bb-btn:hover {
  background-color: var(--bb-btn-hover);
  border-color: var(--bb-btn-hover);
}

.bb-btn--ghost {
  background-color: transparent;
  color: var(--bb-text);
  border-color: var(--bb-border);
}

.bb-btn--ghost:hover {
  background-color: var(--bb-text);
  border-color: var(--bb-text);
  color: var(--bb-bg);
}

.bb-btn--light {
  background-color: var(--bb-bg);
  color: var(--bb-text);
  border-color: var(--bb-bg);
}

.bb-btn--light:hover {
  background-color: transparent;
  color: var(--bb-bg);
  border-color: var(--bb-bg);
}

.bb-btn--block {
  width: 100%;
}

.bb-btn[disabled],
.bb-btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Quiet text link with a slow underline reveal */
.bb-link {
  display: inline-block;
  font-size: var(--bb-t-small);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-indent: 0.16em;
  text-decoration: none;
  color: var(--bb-text);
  padding-bottom: 0.3rem;
  background-image: linear-gradient(var(--bb-accent-ink), var(--bb-accent-ink));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  transition: background-size 0.5s var(--bb-ease);
}

.bb-link:hover {
  background-size: 0 1px;
  background-position: 100% 100%;
}

.bb-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}

.bb-actions--center {
  justify-content: center;
}

/* Where two CTAs sit together (hero, lifestyle band) they stack on small
   screens. Left ragged at natural widths they read as unfinished, so match
   them to the column instead. */
@media (max-width: 33.99em) {
  .bb-hero .bb-actions .bb-btn,
  .bb-band .bb-actions .bb-btn {
    width: 100%;
  }
}

/* Fields */
.bb-field {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  font-family: var(--bb-sans);
  font-size: 1rem;
  font-weight: 300;
  color: var(--bb-text);
  background-color: transparent;
  border: 1px solid var(--bb-border-control);
  border-radius: var(--bb-radius);
  padding: 1rem 1.15rem;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.35s var(--bb-ease);
}

.bb-field::placeholder {
  color: var(--bb-text-2);
  opacity: 1; /* every field has a real <label>; don't fade this below AA too */
}

.bb-field:hover {
  border-color: var(--bb-text-2);
}

.bb-label {
  display: block;
  font-size: var(--bb-t-small);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bb-text-2);
  margin-bottom: 0.5rem;
}

/* Inline email form: field + button */
.bb-inline-form {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  width: 100%;
  max-width: 32rem;
}

.bb-inline-form--center {
  margin-inline: auto;
}

@media (min-width: 34em) {
  .bb-inline-form {
    flex-direction: row;
    align-items: stretch;
  }

  .bb-inline-form .bb-btn {
    flex: 0 0 auto;
  }
}

.bb-form-note {
  margin-top: 0.9rem;
  font-size: var(--bb-t-small);
  color: var(--bb-text-2);
}

.bb-note {
  margin: 1.1rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  padding: 0.9rem 1.15rem;
  border: 1px solid transparent;
  text-align: left;
}

.bb-note--success {
  color: var(--bb-text);
  border-color: rgba(119, 118, 92, 0.45);
  background-color: rgba(119, 118, 92, 0.08);
}

.bb-note--error {
  color: #7d4a3a;
  border-color: rgba(125, 74, 58, 0.4);
  background-color: rgba(125, 74, 58, 0.07);
}

.bb-note ul {
  padding-left: 1.1rem;
  list-style: disc;
}

/* Gentle entrance.
   Content is VISIBLE by default and only hidden once JavaScript has armed it
   (`is-armed`) — so if the script fails, is blocked, or never runs, the page
   still reads normally instead of rendering as blank cream. */
.bb-reveal {
  transition: opacity var(--bb-fade) var(--bb-ease), transform var(--bb-fade) var(--bb-ease);
}

.bb-reveal.is-armed {
  opacity: 0;
  transform: translateY(14px);
}

/* Must follow .is-armed — equal specificity, so source order decides. */
.bb-reveal.is-in {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   7. Announcement ticker
   -------------------------------------------------------------------------- */

.bb-ticker {
  background-color: var(--bb-bg-2);
  border-bottom: 1px solid var(--bb-hairline);
  overflow: hidden;
  position: relative;
}

.bb-ticker__track {
  display: flex;
  width: max-content;
  animation: bb-ticker 64s linear infinite; /* slow and calm, never a fast marquee */
}

.bb-ticker:hover .bb-ticker__track,
.bb-ticker:focus-within .bb-ticker__track {
  animation-play-state: paused;
}

.bb-ticker__group {
  display: flex;
  flex-shrink: 0;
}

.bb-ticker__item {
  display: inline-flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0.7rem 2.25rem;
  font-size: var(--bb-t-micro);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  text-indent: 0.26em;
  color: var(--bb-text-2);
  white-space: nowrap;
}

.bb-ticker__item::after {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--bb-accent);
  opacity: 0.7;
}

@keyframes bb-ticker {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* --------------------------------------------------------------------------
   8. Header + slide-out menu
   -------------------------------------------------------------------------- */

.bb-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background-color: rgba(250, 245, 239, 0.92);
  -webkit-backdrop-filter: saturate(120%) blur(10px);
  backdrop-filter: saturate(120%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.4s var(--bb-ease), background-color 0.4s var(--bb-ease);
}

.bb-header.is-stuck {
  border-bottom-color: var(--bb-hairline);
}

.bb-header__bar {
  height: var(--bb-header-h);
  max-width: var(--bb-max);
  margin-inline: auto;
  padding-inline: var(--bb-gutter);
  display: grid;
  /* Sides take their natural width; the centre is the only flexible track and
     is floored at 0, so a long wordmark can never widen the page. */
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
}

@media (min-width: 48em) {
  .bb-header__bar {
    gap: 1rem;
  }
}

.bb-header__side {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
}

.bb-header__side--end {
  justify-content: flex-end;
}

.bb-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--bb-text);
  cursor: pointer;
  text-decoration: none;
  position: relative;
  transition: color 0.35s var(--bb-ease);
}

.bb-iconbtn:hover {
  color: var(--bb-accent-ink);
}

.bb-iconbtn svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* Menu button shows a word alongside the icon on wider screens —
   an unlabelled hamburger is a known usability weak spot */
.bb-iconbtn--menu {
  width: auto;
  min-width: 2.75rem; /* keep a 44px touch target once the word is hidden */
  padding-inline: 0.5rem;
}

.bb-iconbtn__word {
  display: none;
  font-size: var(--bb-t-micro);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

@media (min-width: 48em) {
  .bb-iconbtn--menu {
    padding-inline: 0.75rem;
  }

  .bb-iconbtn__word {
    display: inline;
  }
}

.bb-cart-count {
  position: absolute;
  top: 0.4rem;
  right: 0.25rem;
  min-width: 1.15rem;
  height: 1.15rem;
  padding-inline: 0.25rem;
  border-radius: 999px;
  background-color: var(--bb-text); /* white on the light accent is only 2.7:1 */
  color: var(--bb-bg);
  font-size: 0.625rem;
  line-height: 1.15rem;
  text-align: center;
  letter-spacing: 0;
}

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

.bb-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--bb-text);
  min-width: 0;
  justify-self: center;
}

.bb-logo img,
.bb-logo__mark {
  width: auto;
  max-width: 100%;
  max-height: calc(var(--bb-header-h) - 1.5rem);
}

/* Wordmark fallback while no logo asset is uploaded */
.bb-logo__type {
  font-family: var(--bb-script);
  font-size: clamp(1.25rem, 0.95rem + 1.05vw, 2.1rem);
  line-height: 1;
  /* Parisienne's descenders sit well below the em box; without this padding
     they crowd whatever follows (e.g. the COMING SOON eyebrow). */
  padding-block: 0.1em 0.22em;
  white-space: nowrap;
}

/* Backdrop shared by menu and pop-up */
/* Overlay visibility pattern, used by the scrim, drawer, search, and pop-up.
   `visibility` is switched with a 0s transition — immediately on open, delayed
   until the movement finishes on close. Transitioning visibility over the full
   duration instead leaves the panel unfocusable while it animates in, which
   silently breaks keyboard access. */
.bb-scrim {
  position: fixed;
  inset: 0;
  z-index: 70;
  background-color: var(--bb-overlay);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s var(--bb-ease), visibility 0s linear 0.5s;
}

.bb-scrim.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s var(--bb-ease), visibility 0s linear 0s;
}

/* Slide-out navigation */
.bb-drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 80;
  width: min(24rem, 88vw);
  background-color: var(--bb-bg);
  border-right: 1px solid var(--bb-hairline);
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform 0.55s var(--bb-ease), visibility 0s linear 0.55s;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.bb-drawer.is-open {
  transform: none;
  visibility: visible;
  transition: transform 0.55s var(--bb-ease), visibility 0s linear 0s;
}

.bb-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--bb-header-h);
  padding-inline: 1.5rem 0.75rem;
  border-bottom: 1px solid var(--bb-hairline);
  flex: 0 0 auto;
}

.bb-drawer__title {
  font-size: var(--bb-t-micro);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--bb-text-2);
  margin: 0;
  font-weight: 400;
}

.bb-drawer__body {
  padding: 2rem 1.5rem 2.5rem;
  flex: 1 1 auto;
}

.bb-nav__item + .bb-nav__item {
  border-top: 1px solid var(--bb-hairline);
}

.bb-nav__link {
  display: block;
  padding: 1.05rem 0;
  font-family: var(--bb-serif);
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--bb-text);
  text-decoration: none;
  transition: color 0.35s var(--bb-ease), padding-left 0.45s var(--bb-ease);
}

.bb-nav__link:hover {
  color: var(--bb-accent-ink);
  padding-left: 0.5rem;
}

.bb-nav__sub {
  padding: 0 0 1rem 0.25rem;
}

.bb-nav__sublink {
  display: block;
  padding: 0.45rem 0;
  font-size: 0.9375rem;
  color: var(--bb-text-2);
  text-decoration: none;
  transition: color 0.35s var(--bb-ease);
}

.bb-nav__sublink:hover {
  color: var(--bb-text);
}

.bb-drawer__foot {
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--bb-hairline);
}

/* Search panel */
.bb-search {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 80;
  background-color: var(--bb-bg);
  border-bottom: 1px solid var(--bb-hairline);
  padding: clamp(1.5rem, 4vw, 3rem) var(--bb-gutter);
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform 0.55s var(--bb-ease), visibility 0s linear 0.55s;
}

.bb-search.is-open {
  transform: none;
  visibility: visible;
  transition: transform 0.55s var(--bb-ease), visibility 0s linear 0s;
}

.bb-search__inner {
  max-width: 44rem;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.bb-search__inner .bb-field {
  border: 0;
  border-bottom: 1px solid var(--bb-border);
  font-size: clamp(1.1rem, 1rem + 0.7vw, 1.5rem);
  font-family: var(--bb-serif);
  padding-inline: 0;
}

/* --------------------------------------------------------------------------
   9. Hero
   -------------------------------------------------------------------------- */

.bb-hero {
  position: relative;
  min-height: min(82svh, 46rem);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding: 0;
}

.bb-hero__media {
  position: absolute;
  inset: 0;
}

.bb-hero__media img,
.bb-hero__media .bb-ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Scrim only under the text column, so the photograph stays open elsewhere */
.bb-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(94, 80, 67, 0.46) 0%,
    rgba(94, 80, 67, 0.2) 38%,
    rgba(94, 80, 67, 0) 68%
  );
}

.bb-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--bb-max);
  margin-inline: auto;
  padding: clamp(2.5rem, 6vw, 5rem) var(--bb-gutter);
}

.bb-hero__copy {
  --bb-gap: 1.35rem;
  max-width: 34rem;
  color: #fff;
}

.bb-hero__copy .bb-h1,
.bb-hero__copy .bb-eyebrow {
  color: #fff;
}

.bb-hero__copy .bb-prose {
  color: rgba(255, 255, 255, 0.92);
}

.bb-hero--center .bb-hero__copy {
  max-width: 40rem;
  margin-inline: auto;
  text-align: center;
}

.bb-hero--center .bb-actions {
  justify-content: center;
}

/* Light hero variant, for a cream-background editorial opener */
.bb-hero--light .bb-hero__media::after {
  background: linear-gradient(to top, rgba(250, 245, 239, 0.75), rgba(250, 245, 239, 0.15) 60%);
}

.bb-hero--light .bb-hero__copy,
.bb-hero--light .bb-hero__copy .bb-h1,
.bb-hero--light .bb-hero__copy .bb-eyebrow {
  color: var(--bb-text);
}

.bb-hero--light .bb-hero__copy .bb-prose {
  color: var(--bb-text-2);
}

/* --------------------------------------------------------------------------
   10. Editorial cards (Shop by Collection)
   -------------------------------------------------------------------------- */

.bb-editorial-grid {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2.25rem);
  grid-template-columns: 1fr;
  margin-top: clamp(2.25rem, 4vw, 3.5rem);
}

@media (min-width: 46em) {
  .bb-editorial-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 68em) {
  .bb-editorial-grid[data-count="3"],
  .bb-editorial-grid[data-count="4"] {
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  }
}

.bb-ecard {
  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
}

.bb-ecard__frame {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background-color: var(--bb-bg-2);
}

.bb-ecard__frame img,
.bb-ecard__frame .bb-ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--bb-ease);
}

.bb-ecard:hover .bb-ecard__frame img,
.bb-ecard:focus-visible .bb-ecard__frame img {
  transform: scale(1.04);
}

.bb-ecard__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(94, 80, 67, 0.4), rgba(94, 80, 67, 0) 55%);
}

.bb-ecard__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: clamp(1.25rem, 2.5vw, 2rem);
  color: #fff;
  z-index: 1;
}

.bb-ecard__title {
  font-family: var(--bb-serif);
  font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
  line-height: 1.25;
  margin: 0;
  font-weight: 500;
}

.bb-ecard__meta {
  margin: 0.5rem 0 0;
  font-size: var(--bb-t-small);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.88);
}

/* --------------------------------------------------------------------------
   11. Brand story
   -------------------------------------------------------------------------- */

.bb-split {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  grid-template-columns: 1fr;
}

@media (min-width: 54em) {
  .bb-split {
    grid-template-columns: repeat(2, 1fr);
  }

  .bb-split--reverse .bb-split__media {
    order: 2;
  }
}

.bb-split__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background-color: var(--bb-bg-2);
}

.bb-split__media img,
.bb-split__media .bb-ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bb-split__copy {
  --bb-gap: 1.35rem;
}

/* --------------------------------------------------------------------------
   12. Product cards + grids
   -------------------------------------------------------------------------- */

.bb-product-grid {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.75rem) clamp(1rem, 2vw, 1.75rem);
  grid-template-columns: repeat(2, 1fr);
  margin-top: clamp(2.25rem, 4vw, 3.5rem);
}

@media (min-width: 60em) {
  .bb-product-grid {
    grid-template-columns: repeat(var(--bb-cols, 4), 1fr);
  }
}

.bb-pcard {
  position: relative;
  display: flex;
  flex-direction: column;
}

/* The frame is the positioning context for the quick-add. Anchoring the
   quick-add to .bb-pcard instead would drop it over the title and price on
   touch devices, where it is always visible. */
.bb-pcard__frame {
  position: relative;
  aspect-ratio: 4 / 5; /* brief: large 4:5 product photography */
  overflow: hidden;
  background-color: var(--bb-bg-2);
}

.bb-pcard__media {
  position: absolute;
  inset: 0;
  display: block;
  text-decoration: none;
}

.bb-pcard__media img,
.bb-pcard__media .bb-ph {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bb-pcard__img--alt {
  opacity: 0;
  transition: opacity 0.9s var(--bb-ease);
}

/* Secondary-image hover, kept slow. Suppressed on touch, where there is
   no hover and the transition would only ever fire on tap. */
@media (hover: hover) and (min-width: 46em) {
  .bb-pcard:hover .bb-pcard__img--alt,
  .bb-pcard:focus-within .bb-pcard__img--alt {
    opacity: 1;
  }
}

.bb-pcard__body {
  padding-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.bb-pcard__title {
  font-family: var(--bb-serif);
  font-size: 1.0625rem;
  font-weight: 500; /* Bodoni hairlines thin out badly at this size */
  line-height: 1.35;
  margin: 0;
  color: var(--bb-text);
}

.bb-pcard__title a {
  text-decoration: none;
}

.bb-pcard__title a::after {
  /* full-card hit area without nesting interactive elements */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
}

.bb-pcard__price {
  font-family: var(--bb-sans);
  font-size: var(--bb-t-small);
  letter-spacing: 0.06em;
  color: var(--bb-text-2);
  margin: 0;
}

.bb-pcard__price s {
  opacity: 0.6;
  margin-right: 0.5rem;
}

/* Restrained pattern swatches */
.bb-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.2rem;
  position: relative;
  z-index: 1;
}

.bb-swatch {
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  border: 1px solid var(--bb-border);
  background-size: cover;
  background-position: center;
  display: block;
}

.bb-swatch__more {
  font-size: var(--bb-t-micro);
  color: var(--bb-text-2);
  align-self: center;
  letter-spacing: 0.08em;
}

/* Discreet quick-add — appears on hover on pointer devices,
   always present and reachable for keyboard and touch.
   Absolute within .bb-pcard__frame, so it sits over the image, never the text. */
.bb-quickadd {
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.75rem;
  z-index: 2;
  display: block;
  width: auto;
  text-align: center;
  text-decoration: none;
  font-family: var(--bb-sans);
  font-weight: 400;
  text-transform: uppercase;
  cursor: pointer;
  padding: 0.7rem 1rem;
  font-size: var(--bb-t-micro);
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  background-color: rgba(250, 245, 239, 0.95);
  color: var(--bb-text);
  border: 1px solid transparent;
}

.bb-quickadd:hover {
  background-color: var(--bb-text);
  color: var(--bb-bg);
  border-color: var(--bb-text);
}

@media (hover: hover) and (min-width: 46em) {
  .bb-quickadd {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.45s var(--bb-ease), transform 0.45s var(--bb-ease),
      background-color 0.45s var(--bb-ease), color 0.45s var(--bb-ease);
  }

  .bb-pcard:hover .bb-quickadd,
  .bb-pcard:focus-within .bb-quickadd,
  .bb-quickadd:focus-visible {
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   13. Shop by pattern
   -------------------------------------------------------------------------- */

.bb-patterns {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.5rem, 3.5vw, 2.75rem);
  margin-top: clamp(2.25rem, 4vw, 3.5rem);
}

@media (min-width: 46em) {
  .bb-patterns {
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  }
}

.bb-pattern {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-decoration: none;
  color: inherit;
}

.bb-pattern__disc {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background-color: var(--bb-bg-2);
  border: 1px solid var(--bb-hairline);
  transition: transform 0.7s var(--bb-ease);
}

.bb-pattern__disc img,
.bb-pattern__disc .bb-ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bb-pattern:hover .bb-pattern__disc,
.bb-pattern:focus-visible .bb-pattern__disc {
  transform: scale(1.03);
}

.bb-pattern__name {
  font-family: var(--bb-serif);
  font-size: 1rem;
  font-weight: 500;
  color: var(--bb-text);
  text-align: center;
  margin: 0;
}

/* --------------------------------------------------------------------------
   14. Values
   -------------------------------------------------------------------------- */

.bb-values {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(2rem, 4vw, 3rem) clamp(1.25rem, 3vw, 2.5rem);
  margin-top: clamp(2.25rem, 4vw, 3.5rem);
}

@media (min-width: 60em) {
  .bb-values {
    grid-template-columns: repeat(4, 1fr);
  }
}

.bb-value {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
}

.bb-value__icon {
  width: 2.75rem;
  height: 2.75rem;
  color: var(--bb-sage);
}

.bb-value__icon svg {
  width: 100%;
  height: 100%;
}

.bb-value__title {
  font-family: var(--bb-serif);
  font-size: 1.1875rem;
  font-weight: 500;
  color: var(--bb-text);
  margin: 0;
}

.bb-value__text {
  margin: 0;
  font-size: 0.9375rem;
  max-width: 15rem;
}

/* --------------------------------------------------------------------------
   15. Lifestyle band
   -------------------------------------------------------------------------- */

.bb-band {
  position: relative;
  min-height: min(70svh, 38rem);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: clamp(3rem, 8vw, 6rem) var(--bb-gutter);
}

.bb-band__media {
  position: absolute;
  inset: 0;
}

.bb-band__media img,
.bb-band__media .bb-ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bb-band__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--bb-scrim);
}

.bb-band__copy {
  position: relative;
  z-index: 1;
  max-width: 34rem;
  text-align: center;
  color: #fff;
  --bb-gap: 1.25rem;
}

.bb-band__copy .bb-h2 {
  color: #fff;
}

.bb-band__copy .bb-script {
  color: rgba(255, 255, 255, 0.9);
}

/* --------------------------------------------------------------------------
   16. Trust
   -------------------------------------------------------------------------- */

.bb-trust {
  display: grid;
  gap: clamp(1.75rem, 3.5vw, 3rem);
  grid-template-columns: 1fr;
  margin-top: clamp(2.25rem, 4vw, 3.5rem);
}

@media (min-width: 46em) {
  .bb-trust {
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  }
}

.bb-trust__item {
  padding-top: 1.5rem;
  border-top: 1px solid var(--bb-hairline);
}

.bb-trust__title {
  font-family: var(--bb-serif);
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--bb-text);
  margin: 0 0 0.5rem;
}

.bb-trust__text {
  margin: 0;
  font-size: 0.9375rem;
}

/* --------------------------------------------------------------------------
   17. Testimonials
   -------------------------------------------------------------------------- */

.bb-testimonials {
  position: relative;
}

.bb-tcarousel {
  display: flex;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-bottom: 0.5rem;
}

.bb-tcarousel::-webkit-scrollbar {
  display: none;
}

/* One quote fills the track. A partial "peek" of the neighbouring slide was
   tried and rejected — clipping a sentence mid-word reads as broken, not as
   an affordance. The dots carry that job instead. */
.bb-tslide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  text-align: center;
  padding-inline: clamp(0.5rem, 3vw, 3rem);
}

.bb-tslide__quote {
  font-family: var(--bb-serif);
  font-size: clamp(1.2rem, 1.05rem + 0.8vw, 1.7rem);
  line-height: 1.55;
  color: var(--bb-text);
  margin: 0 auto 1.5rem;
  max-width: 34rem; /* keep the measure readable in a wide container */
  font-style: italic;
  text-wrap: pretty;
}

.bb-tslide__cite {
  font-style: normal;
  font-size: var(--bb-t-small);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-indent: 0.2em;
  color: var(--bb-text-2);
}

.bb-tnav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  margin-top: 2rem;
}

.bb-tdots {
  display: flex;
  gap: 0.55rem;
}

.bb-tdot {
  width: 0.5rem;
  height: 0.5rem;
  padding: 0;
  border: 1px solid var(--bb-accent-ink);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background-color 0.4s var(--bb-ease);
}

.bb-tdot[aria-current="true"] {
  background-color: var(--bb-accent-ink);
}

/* --------------------------------------------------------------------------
   18. Editorial email capture
   -------------------------------------------------------------------------- */

.bb-editorial-signup {
  position: relative;
  overflow: hidden;
}

.bb-editorial-signup__inner {
  position: relative;
  z-index: 1;
  max-width: 40rem;
  margin-inline: auto;
  text-align: center;
  --bb-gap: 1.25rem;
}

/* --------------------------------------------------------------------------
   19. Footer
   -------------------------------------------------------------------------- */

.bb-footer {
  background-color: var(--bb-bg-2);
  border-top: 1px solid var(--bb-hairline);
  padding-block: clamp(3rem, 5vw, 5rem) 2rem;
  padding-inline: var(--bb-gutter);
}

.bb-footer__grid {
  max-width: var(--bb-max);
  margin-inline: auto;
  display: grid;
  gap: clamp(2.25rem, 4vw, 3.5rem);
  grid-template-columns: 1fr;
}

@media (min-width: 46em) {
  .bb-footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 68em) {
  .bb-footer__grid {
    grid-template-columns: 1.6fr repeat(3, 1fr);
  }
}

.bb-footer__brand {
  --bb-gap: 1.1rem;
  max-width: 26rem;
}

.bb-footer__title {
  font-size: var(--bb-t-micro);
  font-weight: 400;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--bb-text-2);
  margin: 0 0 1.15rem;
}

.bb-footer__link {
  display: block;
  padding: 0.35rem 0;
  font-size: 0.9375rem;
  color: var(--bb-text-2);
  text-decoration: none;
  transition: color 0.35s var(--bb-ease);
}

.bb-footer__link:hover {
  color: var(--bb-text);
}

.bb-social {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.bb-social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--bb-text-2);
  transition: color 0.35s var(--bb-ease);
}

.bb-social__link:hover {
  color: var(--bb-accent-ink);
}

.bb-social__link svg {
  width: 1.2rem;
  height: 1.2rem;
}

.bb-footer__base {
  max-width: var(--bb-max);
  margin: clamp(2.5rem, 4vw, 3.5rem) auto 0;
  padding-top: 1.75rem;
  border-top: 1px solid var(--bb-hairline);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  font-size: var(--bb-t-small);
  color: var(--bb-text-2);
}

.bb-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
}

.bb-footer__legal a {
  text-decoration: none;
}

.bb-footer__legal a:hover {
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   20. Newsletter pop-up
   -------------------------------------------------------------------------- */

.bb-popup {
  position: fixed;
  z-index: 90;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 100%);
  width: min(34rem, 100vw);
  background-color: var(--bb-bg);
  border: 1px solid var(--bb-hairline);
  box-shadow: var(--bb-lift);
  visibility: hidden;
  opacity: 0;
  transition: transform 0.65s var(--bb-ease), opacity 0.65s var(--bb-ease),
    visibility 0s linear 0.65s;
}

.bb-popup.is-open {
  transform: translate(-50%, 0);
  visibility: visible;
  opacity: 1;
  transition: transform 0.65s var(--bb-ease), opacity 0.65s var(--bb-ease),
    visibility 0s linear 0s;
}

@media (min-width: 46em) {
  .bb-popup {
    bottom: 1.75rem;
    border-radius: 0;
  }

  .bb-popup.is-open {
    transform: translate(-50%, 0);
  }
}

.bb-popup__inner {
  padding: clamp(1.75rem, 4vw, 2.75rem);
  text-align: center;
  --bb-gap: 1rem;
}

.bb-popup__close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--bb-text-2);
  cursor: pointer;
}

.bb-popup__close svg {
  width: 1rem;
  height: 1rem;
}

/* --------------------------------------------------------------------------
   21. Product + collection pages
   -------------------------------------------------------------------------- */

.bb-page-head {
  padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(1.5rem, 3vw, 2.5rem);
  padding-inline: var(--bb-gutter);
  text-align: center;
}

.bb-breadcrumb {
  font-size: var(--bb-t-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bb-text-2);
  margin: 0 0 1rem;
}

.bb-breadcrumb a {
  text-decoration: none;
}

.bb-breadcrumb a:hover {
  text-decoration: underline;
}

.bb-pdp {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 60em) {
  .bb-pdp {
    grid-template-columns: 1.15fr 1fr;
  }

  .bb-pdp__info {
    position: sticky;
    top: calc(var(--bb-header-h) + 2rem);
  }
}

.bb-pdp__gallery {
  display: grid;
  gap: clamp(0.5rem, 1.5vw, 1rem);
  grid-template-columns: 1fr;
}

@media (min-width: 46em) {
  .bb-pdp__gallery {
    grid-template-columns: repeat(2, 1fr);
  }

  .bb-pdp__gallery > :first-child {
    grid-column: 1 / -1;
  }
}

.bb-pdp__frame {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background-color: var(--bb-bg-2);
}

.bb-pdp__frame img,
.bb-pdp__frame .bb-ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bb-pdp__info {
  --bb-gap: 1.25rem;
}

.bb-pdp__price {
  font-size: 1.125rem;
  color: var(--bb-text);
  letter-spacing: 0.04em;
  margin: 0;
}

.bb-variants {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.bb-variant__legend {
  font-size: var(--bb-t-small);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bb-text-2);
  margin-bottom: 0.6rem;
  padding: 0;
}

.bb-variant__options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.bb-variant__option {
  position: relative;
}

.bb-variant__option input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.bb-variant__option span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3rem;
  padding: 0.6rem 1rem;
  border: 1px solid var(--bb-border);
  font-size: 0.875rem;
  color: var(--bb-text);
  transition: border-color 0.35s var(--bb-ease), background-color 0.35s var(--bb-ease);
}

.bb-variant__option input:checked + span {
  border-color: var(--bb-text);
  background-color: var(--bb-petal);
}

.bb-variant__option input:focus-visible + span {
  outline: 2px solid var(--bb-text);
  outline-offset: 3px;
}

.bb-accordion {
  border-top: 1px solid var(--bb-hairline);
}

.bb-accordion__item {
  border-bottom: 1px solid var(--bb-hairline);
}

.bb-accordion__summary {
  cursor: pointer;
  list-style: none;
  padding: 1.1rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: var(--bb-t-small);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bb-text);
}

.bb-accordion__summary::-webkit-details-marker {
  display: none;
}

.bb-accordion__summary::after {
  content: "+";
  font-size: 1.1rem;
  line-height: 1;
  color: var(--bb-accent-ink);
}

.bb-accordion__item[open] .bb-accordion__summary::after {
  content: "–";
}

.bb-accordion__body {
  padding-bottom: 1.25rem;
  font-size: 0.9375rem;
}

.bb-empty {
  text-align: center;
  padding-block: clamp(3rem, 8vw, 6rem);
  --bb-gap: 1.25rem;
}

/* --------------------------------------------------------------------------
   22. Prelaunch page + atmosphere
   -------------------------------------------------------------------------- */

/* Botanical shadow layer: fern, wheat and grass cast as soft silhouettes,
   matching the founders' coming-soon graphic. Sits behind the content and is
   clipped by the section. Blur and opacity are baked into the SVG files. */
.bb-flora {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  height: auto;
  max-width: none;
}

/* Flat, illustrated botanicals rather than photographic shadows, in a soft
   warm beige (--bb-flora). A shape meeting the edge of its own box would be cut
   with a straight line and read as a rectangle on the page, so these fade each
   cluster out from the corner it grows from. */
.bb-flora--left {
  -webkit-mask-image: radial-gradient(125% 125% at 0% 0%, #000 38%, transparent 86%);
  mask-image: radial-gradient(125% 125% at 0% 0%, #000 38%, transparent 86%);
}

.bb-flora--right {
  -webkit-mask-image: radial-gradient(125% 125% at 100% 100%, #000 38%, transparent 86%);
  mask-image: radial-gradient(125% 125% at 100% 100%, #000 38%, transparent 86%);
}

.bb-flora--left {
  top: 0;
  left: 0;
  /* On small screens the artwork is cropped rather than scaled down — shrunk to
     fit, the leaflets blur into an undifferentiated smudge instead of reading as
     ferns. Cropping keeps them large without the element exceeding the viewport
     (a wider-than-100vw element would sit as latent overflow, masked only by
     `overflow-x: hidden` on the body). */
  width: 100vw;
  height: 17rem;
  object-fit: cover;
  object-position: left top;
}

.bb-flora--right {
  right: 0;
  bottom: 0;
  width: min(56vw, 15rem);
}

@media (min-width: 46em) {
  .bb-flora--left {
    width: min(56vw, 48rem);
    height: auto;
    object-fit: fill;
  }

  .bb-flora--right {
    width: min(27vw, 21rem);
  }
}
}

.bb-coming {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.bb-coming__media {
  position: absolute;
  inset: 0;
}

.bb-coming__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Cream wash so the copy stays legible over any photograph */
.bb-coming__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(250, 245, 239, 0.9),
    rgba(250, 245, 239, 0.82)
  );
}

.bb-coming__inner {
  position: relative;
  z-index: 1; /* above the atmosphere layer */
  /* Narrower than --bb-shell--mid: at the wider end the headline otherwise sets
     as one very long line that crowds both botanical clusters. */
  max-width: 46rem;
  --bb-gap: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bb-coming__logo {
  width: clamp(8rem, 30vw, 13rem);
  height: auto;
  margin-inline: auto;
}

.bb-password-foot {
  border-top: 1px solid var(--bb-hairline);
}

.bb-enter {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: clamp(2rem, 4vw, 2.5rem);
  border-top: 1px solid var(--bb-hairline);
}

.bb-enter__heading {
  /* h2 for the document outline, but only Jost 300/400/500 are loaded —
     inheriting the UA's bold would be synthesised and look heavy. */
  font-family: var(--bb-sans);
  font-weight: 400;
  font-size: var(--bb-t-small);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-indent: 0.22em;
  color: var(--bb-text-2);
  margin: 0 0 1.15rem;
}

/* --------------------------------------------------------------------------
   23. Motion preferences
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  /* The ticker stops entirely and centres, rather than freezing mid-scroll */
  .bb-ticker__track {
    animation: none;
    width: 100%;
    justify-content: center;
  }

  .bb-ticker__group:nth-child(2) {
    display: none;
  }

  .bb-reveal {
    opacity: 1;
    transform: none;
  }

  .bb-tcarousel {
    scroll-behavior: auto;
  }
}

/* ==========================================================================
   24. Prelaunch — split-screen hero and supporting sections
   ========================================================================== */

/* ── Split hero ───────────────────────────────────────────────────────────
   Content left, photograph right. No hard divider: the photo is feathered
   into the panel with a cream gradient so the two grounds meet softly. */
.bb-hero-split {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  background-color: var(--bb-bg);
  overflow: hidden;
}

@media (min-width: 62em) {
  .bb-hero-split {
    grid-template-columns: 44% 56%;
    min-height: max(100svh, 780px);
    align-items: stretch;
  }
}

.bb-hero-split__panel {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Tight enough that the whole panel — logo through to the button — lands
     inside a 800px-tall viewport. The sign-up is the page's only job; it must
     not sit below the fold. */
  padding: clamp(2rem, 3.4vw, 2.85rem) var(--bb-gutter);
  text-align: center;
}

@media (min-width: 62em) {
  .bb-hero-split__panel {
    padding-inline: clamp(2.5rem, 4vw, 4.5rem);
  }
}

.bb-hero-split__inner {
  position: relative;
  z-index: 1; /* above the corner flowers */
  width: 100%;
  max-width: 30rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bb-hero-split__media {
  position: relative;
  /* Mobile: a 4:5 crop below the form, per the layout spec — not a squeezed
     version of the desktop split. */
  aspect-ratio: 4 / 5;
  background-color: var(--bb-bg-2);
}

@media (min-width: 62em) {
  .bb-hero-split__media {
    aspect-ratio: auto;
  }
}

.bb-hero-split__media img,
.bb-hero-split__media video,
.bb-hero-split__media .bb-ph {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The clip is 9:16 and this column is not, so something is always cropped.
     --bb-media-pos comes from the section setting and decides what survives. */
  object-position: var(--bb-media-pos, center);
}

/* Shopify wraps video_tag output in its own element on some themes; make sure
   any wrapper fills the column too rather than collapsing to intrinsic size. */
.bb-hero-split__media .bb-hero-split__video {
  display: block;
}

/* The feather: cream bleeding over the photograph's left edge, plus a faint
   lift along the top, so no straight seam is visible between the halves. */
.bb-hero-split__feather {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  /* Softens the seam only. Held deliberately short: at 26% it reached across
     the first garment, and the brief is explicit that the clothes are never to
     be veiled. */
  background:
    linear-gradient(to bottom, rgba(250, 246, 240, 0.42), rgba(250, 246, 240, 0) 14%),
    linear-gradient(to right, var(--bb-bg) 0%, rgba(250, 246, 240, 0.66) 3%,
      rgba(250, 246, 240, 0) 13%);
}

@media (max-width: 61.99em) {
  .bb-hero-split__feather {
    background: linear-gradient(to bottom, var(--bb-bg) 0%,
      rgba(250, 246, 240, 0) 14%);
  }
}

/* Baby's breath in the panel corners. Bled well off the edge so only the
   outer tips are visible: the brief asks for decoration at the edges, never
   over the logo, the story copy or the form. */
.bb-breath {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  /* Sized and offset so the sprays stay inside the panel's side margin. Tested
     against the logo, tagline, story, form and photograph at every breakpoint —
     they must never reach any of them. */
  width: clamp(4.5rem, 8vw, 7rem);
  height: auto;
  max-width: none;
}

.bb-breath--tl {
  top: -2.5rem;
  left: -3.25rem;
}

.bb-breath--bl {
  bottom: -2.5rem;
  left: -5rem;
  transform: scaleY(-1);
}

/* Below the split breakpoint the panel stacks directly on top of the
   photograph, so the lower spray would land on the garments. One flower only —
   which is also what the brief asks for on small screens. */
@media (max-width: 61.99em) {
  .bb-breath--bl {
    display: none;
  }
}

@media (max-width: 47.99em) {
  .bb-breath--tl {
    width: 4.25rem;
    top: -1.75rem;
    left: -2rem;
  }
}

/* ── Left-panel type ────────────────────────────────────────────────────── */
.bb-hero-split__logo {
  width: clamp(4.25rem, 10vw, 5.5rem);
  height: auto;
  margin-bottom: 0.85rem;
}

.bb-wordmark {
  font-family: var(--bb-script);
  font-size: clamp(1.7rem, 1.25rem + 1.5vw, 2.35rem);
  line-height: 1;
  padding-block: 0.06em 0.18em;
  color: var(--bb-text);
  margin: 0;
}

.bb-collection-label {
  font-family: var(--bb-sans);
  font-size: var(--bb-t-micro);
  font-weight: 500;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  text-transform: uppercase;
  color: var(--bb-text-2);
  margin: 0.35rem 0 0;
}

.bb-tagline {
  font-family: var(--bb-serif);
  font-size: var(--bb-t-tagline);
  font-weight: 400;
  line-height: 1.18;
  color: var(--bb-text);
  margin: clamp(1rem, 1.9vw, 1.45rem) 0 0;
  text-wrap: balance;
}

.bb-tagline em {
  font-style: italic;
  display: block;
}

/* Thin decorative divider — a pair of hairlines, no ornament */
.bb-divider {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: min(15rem, 72%);
  margin: clamp(0.85rem, 1.7vw, 1.2rem) auto;
}

.bb-divider::before,
.bb-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: var(--bb-border);
}

.bb-divider__dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color: var(--bb-accent);
}

.bb-hero-split__story {
  font-family: var(--bb-serif);
  font-size: var(--bb-t-body);
  line-height: 1.55;
  color: var(--bb-text-2);
  margin: 0;
  max-width: 26rem;
}

.bb-hero-split__story p + p {
  margin-top: 0.9em;
}

.bb-coming-label {
  font-family: var(--bb-sans);
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.5rem); /* 18 → 24px */
  font-weight: 400;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  text-transform: uppercase;
  color: var(--bb-text);
  margin: clamp(1.15rem, 2.2vw, 1.7rem) 0 0.4rem;
}

.bb-coming-sub {
  font-family: var(--bb-sans);
  font-size: var(--bb-t-form);
  color: var(--bb-text-2);
  margin: 0 0 0.9rem;
}

/* Short laptop screens (720–860px tall) — trim the vertical rhythm further so
   the button still lands above the fold rather than a scroll below it. */
@media (min-width: 62em) and (max-height: 880px) {
  .bb-hero-split__panel {
    padding-block: 1.05rem;
  }

  .bb-hero-split__logo {
    width: 3.4rem;
    margin-bottom: 0.45rem;
  }

  .bb-wordmark {
    font-size: 1.85rem;
  }

  .bb-tagline {
    font-size: clamp(1.85rem, 1.3rem + 1.5vw, 2.4rem);
    margin-top: 0.6rem;
  }

  .bb-divider {
    margin-block: 0.5rem;
  }

  .bb-hero-split__story {
    font-size: 1rem;
    line-height: 1.5;
  }

  .bb-coming-label {
    margin-top: 0.85rem;
  }

  .bb-coming-sub {
    margin-bottom: 0.55rem;
  }
}

/* ── Sign-up form ─────────────────────────────────────────────────────── */
.bb-signup {
  width: 100%;
  max-width: 31rem; /* 440–500px at the desktop end */
}

.bb-signup__row {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

@media (min-width: 34em) {
  .bb-signup__row {
    flex-direction: row;
    align-items: stretch;
  }
}

.bb-signup__field {
  flex: 1 1 auto;
  min-width: 0;
  height: 3.375rem; /* 54px, inside the 52–58 band */
  font-family: var(--bb-sans);
  font-size: var(--bb-t-form);
  font-weight: 300;
  color: var(--bb-text);
  background-color: #fffdfa;
  border: 1px solid var(--bb-border-control);
  border-radius: var(--bb-radius);
  padding-inline: 1.05rem;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.25s var(--bb-ease), box-shadow 0.25s var(--bb-ease);
}

.bb-signup__field::placeholder {
  color: var(--bb-text-2);
  opacity: 1;
}

.bb-signup__field:hover {
  border-color: var(--bb-btn);
}

.bb-signup__field:focus {
  outline: none;
  border-color: var(--bb-btn);
  box-shadow: 0 0 0 3px rgba(132, 108, 91, 0.18);
}

.bb-signup__field[aria-invalid="true"] {
  border-color: #9a4f3d;
}

.bb-signup__field[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px rgba(154, 79, 61, 0.18);
}

.bb-signup__btn {
  flex: 0 0 auto;
  height: 3.375rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--bb-sans);
  font-size: var(--bb-t-micro);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-indent: 0.18em;
  text-transform: uppercase;
  color: var(--bb-bg);
  background-color: var(--bb-btn);
  border: 1px solid var(--bb-btn);
  border-radius: var(--bb-radius);
  padding-inline: 1.8rem;
  cursor: pointer;
  transition: background-color 0.3s var(--bb-ease), border-color 0.3s var(--bb-ease);
}

.bb-signup__btn:hover {
  background-color: var(--bb-btn-hover);
  border-color: var(--bb-btn-hover);
}

.bb-signup__btn[aria-disabled="true"] {
  opacity: 0.72;
  cursor: progress;
}

.bb-signup__note {
  font-family: var(--bb-sans);
  font-size: var(--bb-t-small);
  color: var(--bb-text-2);
  margin: 0.85rem 0 0;
}

.bb-signup__error {
  font-family: var(--bb-sans);
  font-size: var(--bb-t-small);
  color: #8a4634;
  margin: 0.7rem 0 0;
  text-align: left;
}

.bb-signup__error:empty {
  display: none;
}

.bb-signup__success {
  font-family: var(--bb-serif);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  line-height: 1.55;
  color: var(--bb-text);
  background-color: var(--bb-bg-2);
  border: 1px solid var(--bb-hairline);
  border-radius: var(--bb-radius);
  padding: 1.15rem 1.35rem;
  margin: 0;
}

/* ── Founder story ────────────────────────────────────────────────────── */
.bb-story-split {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: 1fr;
  align-items: center;
}

@media (min-width: 54em) {
  .bb-story-split {
    grid-template-columns: 1fr 1fr;
    /* The photograph is taller than four paragraphs of copy, so the text is
       centred against it. Top-aligning leaves a conspicuous gap below the copy. */
    align-items: center;
  }

  .bb-story-split--reverse .bb-story-split__media {
    order: 2;
  }
}

.bb-story-split__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--bb-radius);
  background-color: var(--bb-bg-2);
}

.bb-story-split__media img,
.bb-story-split__media .bb-ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bb-story-split__copy {
  max-width: 34rem; /* the founder story now runs to four paragraphs */
}

.bb-story-split__closing {
  font-family: var(--bb-serif);
  font-style: italic;
  font-size: clamp(1.125rem, 1rem + 0.55vw, 1.4rem);
  line-height: 1.5;
  color: var(--bb-text);
  margin: 1.6rem 0 0;
  text-wrap: balance;
}

.bb-story-split__copy p {
  font-family: var(--bb-serif);
  font-size: var(--bb-t-body);
  line-height: 1.65;
  color: var(--bb-text-2);
  margin: 1.1rem 0 0;
}

/* ── Prelaunch footer ─────────────────────────────────────────────────── */
.bb-prefooter {
  border-top: 1px solid var(--bb-hairline);
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  padding-inline: var(--bb-gutter);
  text-align: center;
}

.bb-prefooter__logo {
  width: 3.25rem;
  height: auto;
  margin: 0 auto 1.25rem;
}

.bb-prefooter__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 1.5rem;
  margin: 0 0 1.1rem;
  font-family: var(--bb-sans);
  font-size: var(--bb-t-small);
}

.bb-prefooter__links a {
  color: var(--bb-text-2);
  text-decoration: none;
  padding: 0.35rem 0;
  display: inline-block;
}

.bb-prefooter__links a:hover {
  color: var(--bb-text);
  text-decoration: underline;
}

.bb-prefooter__legal {
  font-family: var(--bb-sans);
  font-size: var(--bb-t-small);
  color: var(--bb-text-2);
  margin: 0;
}