@charset "UTF-8";
/* =====================================================================
   FLORIDA MERMAID — Design System v3
   "Snorkeling gear designed by women, for women."
   Editorial · Feminine · Photography-led
   ===================================================================== */

:root {
  /* PALETTE — anchored to the logo (navy + coral) + brand collection colors.
     Cherry Blossom is the primary brand mood color: every soft-pink surface,
     hover-mist, eyebrow tag, and the PWA install splash use Blossom tones.
     Coral stays reserved for CTAs/links/focus rings where contrast matters. */
  --navy:           #0c2c4f;
  --navy-deep:      #061b34;
  --navy-soft:      #1d4a73;

  --blossom:        #f8b6c8;  /* primary brand mood — Cherry Blossom */
  --blossom-deep:   #e6889f;  /* darker tone for borders/hover hints */
  --blossom-soft:   #fce0e8;  /* very soft wash for backgrounds */
  --blossom-mist:   #fdedf2;  /* near-white pink for hover states */

  --coral:          #ed7363;
  --coral-deep:     #d65645;
  --coral-soft:     #f4a895;
  /* The soft-pink tokens now alias the Blossom palette so every existing rule
     (.icon-btn hover, eyebrow tags, ribbons, etc.) picks up Cherry Blossom
     without needing a 32-site search-and-replace. */
  --coral-mist:     var(--blossom-mist);
  --blush:          var(--blossom);
  --blush-mist:     var(--blossom-mist);

  --turquoise:      #4cc4b8;
  --turquoise-deep: #2a9d92;
  --turquoise-soft: #c5ebe6;

  --sage:           #a8c0a3;
  --sage-deep:      #7a9576;
  --sage-soft:      #d4e1d0;

  --spring:         #a9d6d8;
  --spring-soft:    #e0eff0;

  --mango:          #f0b265;
  --hibiscus:       #e8a08c;

  --champagne:      #c9a96e;
  --champagne-soft: #e4d3ad;
  --pearl:          #faf5ec;
  --pearl-warm:     #f6ecd9;
  --sand:           #f1e6d3;
  --cream:          #fefcf7;

  --ink:            #1a1d2e;
  --ink-soft:       #4f5663;
  --muted:          #8a8f99;
  --line:           #ead9c8;

  --display: 'DM Serif Display', 'Playfair Display', Georgia, serif;
  --body:    'Libre Caslon Text', Georgia, serif;
  --sans:    'Inter', system-ui, -apple-system, sans-serif;
  --script:  'Caveat', 'Brush Script MT', cursive;

  --container:    1320px;
  --container-md: 1100px;
  --container-sm: 760px;
  --radius:       4px;

  --shadow-sm: 0 4px 18px rgba(12, 44, 79, 0.06);
  --shadow:    0 16px 48px rgba(12, 44, 79, 0.12);
  --shadow-lg: 0 30px 80px rgba(12, 44, 79, 0.18);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }

body {
  margin: 0;
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--pearl);
  overflow-x: hidden;
}

.skip-link {
  position: absolute; left: -9999px;
  background: var(--navy); color: var(--pearl); padding: 12px 18px;
  z-index: 999; font-weight: 600;
}
.skip-link:focus { left: 12px; top: 12px; border-radius: 8px; }

/* Keyboard focus ring — visible only when tabbing, not on mouse click */
:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 3px;
  border-radius: 2px;
}
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
.icon-btn:focus-visible,
.mobile-toggle:focus-visible {
  outline-offset: 4px;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--navy); text-decoration: none; transition: color .3s ease; }
a:hover { color: var(--coral); }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 40px;
}
@media (max-width: 720px) {
  .container { padding: 0 22px; }
}

/* TYPOGRAPHY */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  color: var(--navy);
  letter-spacing: -0.015em;
  line-height: 1.02;
  margin: 0 0 24px;
}
h1 { font-size: clamp(56px, 10vw, 152px); font-style: italic; }
h2 { font-size: clamp(40px, 6vw, 88px); font-style: italic; }
h3 { font-size: clamp(24px, 2.6vw, 36px); }
h4 {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--coral);
}

p { margin: 0 0 16px; }
em { font-style: italic; }

.eyebrow {
  display: block;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--coral);
  font-weight: 700;
  margin-bottom: 22px;
}
.script-accent {
  font-family: var(--script);
  font-size: 1.4em;
  color: var(--coral);
  display: inline-block;
}
.chapter {
  font-family: var(--display);
  font-style: italic;
  font-size: 18px;
  color: var(--champagne);
  letter-spacing: 0.04em;
  margin-bottom: 16px;
  position: relative;
  display: inline-block;
  padding-left: 60px;
}
.chapter::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 44px; height: 1px;
  background: var(--champagne);
}
.dropcap::first-letter {
  font-family: var(--display);
  font-style: italic;
  font-size: 5.5em;
  line-height: 0.82;
  float: left;
  padding: 6px 12px 0 0;
  color: var(--coral);
}
.pullquote {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: 1.18;
  color: var(--navy);
  margin: 48px 0;
  padding-left: 32px;
  border-left: 2px solid var(--coral);
}

/* MARQUEE */
.marquee {
  background: var(--pearl-warm);
  color: var(--navy);
  overflow: hidden;
  padding: 14px 0;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  border-bottom: 1px solid var(--line);
}
.marquee-track {
  display: flex;
  gap: 64px;
  white-space: nowrap;
  animation: marquee 42s linear infinite;
  width: fit-content;
  align-items: center;
}
.marquee-track span { display: inline-flex; align-items: center; gap: 12px; }
.marquee-track span::after {
  content: "✦";
  color: var(--coral);
  font-size: 14px;
  margin-left: 64px;
  opacity: 0.7;
}
.marquee-track span:last-child::after { display: none; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* NAV */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(250, 245, 236, 0.92);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  transition: box-shadow .4s ease, background .3s ease;
}
.site-header.is-scrolled {
  box-shadow: var(--shadow-sm);
  background: rgba(254, 252, 247, 0.96);
}
.nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 32px;
  max-width: var(--container);
  margin: 0 auto;
  padding: 22px 40px;
}
.nav-links {
  display: flex; justify-content: center; gap: 40px;
  margin: 0; padding: 0; list-style: none;
}
.nav-links a {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--navy);
  position: relative;
  padding: 14px 4px;
  display: inline-block;
  min-height: 44px;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--coral);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .4s ease;
}
.nav-links a:hover { color: var(--coral); }
.nav-links a:hover::after { transform: scaleX(1); }

.brand { display: flex; align-items: center; justify-self: center; gap: 14px; }
.brand-logo {
  /* New PNG logo already has its own circular crest — render full image, no crop, no ring */
  height: 132px; width: 132px;
  object-fit: contain;
  border-radius: 0;
  box-shadow: none;
  border: 0;
  background: transparent;
  transition: transform .5s ease;
}
.brand:hover .brand-logo {
  transform: rotate(-4deg) scale(1.04);
}
.nav { padding: 12px 40px; }
@media (max-width: 1100px) { .brand-logo { height: 104px; width: 104px; } }

.nav-right { display: flex; align-items: center; gap: 6px; justify-self: end; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  color: var(--navy);
  position: relative;
  transition: background .3s ease, color .3s ease;
}
.icon-btn:hover { background: var(--coral-mist); color: var(--coral); }
.icon-btn svg { width: 18px; height: 18px; }
.cart-btn .cart-count {
  position: absolute;
  top: 2px; right: 2px;
  background: var(--coral);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--pearl);
}
.mobile-toggle {
  display: none;
  background: transparent; border: 0;
  width: 44px; height: 44px;
  position: relative; cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}
.mobile-toggle span {
  display: block;
  position: absolute;
  left: 11px; right: 11px;
  height: 1px;
  background: var(--navy);
  transition: transform .3s ease, opacity .2s ease, top .3s ease;
}
.mobile-toggle span:nth-child(1) { top: 17px; }
.mobile-toggle span:nth-child(2) { top: 22px; }
.mobile-toggle span:nth-child(3) { top: 27px; }
body.menu-open .mobile-toggle span:nth-child(1) { top: 22px; transform: rotate(45deg); }
body.menu-open .mobile-toggle span:nth-child(2) { opacity: 0; }
body.menu-open .mobile-toggle span:nth-child(3) { top: 22px; transform: rotate(-45deg); }

/* BUTTONS */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 12px;
  padding: 18px 36px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all .4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  text-align: center;
}
.btn-primary {
  background: var(--coral);
  color: var(--cream);
  box-shadow: 0 12px 32px rgba(237, 115, 99, 0.32);
}
.btn-primary:hover {
  background: var(--navy);
  color: var(--cream);
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(12, 44, 79, 0.32);
}
.btn-outline {
  background: transparent;
  color: var(--navy);
  border-color: var(--navy);
}
.btn-outline:hover {
  background: var(--navy);
  color: var(--cream);
  transform: translateY(-2px);
}
.btn svg { width: 14px; height: 14px; }
.link-cs {
  display: inline-flex; align-items: baseline; gap: 8px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--coral);
  position: relative;
  padding: 14px 4px 8px;
  min-height: 44px;
}
.link-cs::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: linear-gradient(90deg, var(--champagne) 0%, var(--coral) 100%);
}
.link-cs:hover { color: var(--navy); transform: translateY(-1px); }

/* SECTION */
.section { padding: 140px 0; position: relative; }
.section-tight { padding: 88px 0; }
.section-pearl { background: var(--pearl); }
.section-cream { background: var(--cream); }
/* Cherry Blossom section tones for storefront templates. Same contrast
   guarantees as the .bb-section--blossom* variants above. */
.section-blossom-mist { background: var(--blossom-mist); color: var(--ink); }
.section-blossom-soft { background: var(--blossom-soft); color: var(--ink); }
.section-blossom      { background: var(--blossom);      color: var(--navy); }
/* Pure-pink uses navy chapter eyebrows. The softer pinks use coral-deep —
   pink on pink would be unreadable. */
.section-blossom      .chapter { color: var(--navy); }
.section-blossom-soft .chapter,
.section-blossom-mist .chapter { color: var(--coral-deep); }
.section-blossom a:not(.btn):not(.bb-btn),
.section-blossom-soft a:not(.btn):not(.bb-btn),
.section-blossom-mist a:not(.btn):not(.bb-btn) { color: var(--coral-deep); }
.section-blossom a:not(.btn):not(.bb-btn):hover,
.section-blossom-soft a:not(.btn):not(.bb-btn):hover,
.section-blossom-mist a:not(.btn):not(.bb-btn):hover { color: var(--navy); }
.section-warm  { background: var(--blush-mist); }
.section-sand  { background: var(--sand); }
.section-pale-pearl { background: var(--pearl-warm); }
.section-spring { background: var(--spring-soft); }
.section-navy  { background: var(--navy); color: var(--pearl); }

/* HERO */
.hero {
  position: relative;
  min-height: calc(100vh - 100px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  background: var(--pearl);
}
.hero-left {
  display: flex; flex-direction: column; justify-content: center;
  padding: 80px;
  position: relative;
  z-index: 2;
}
.hero-script {
  font-family: var(--script);
  font-size: clamp(34px, 4vw, 56px);
  color: var(--coral);
  transform: rotate(-2deg);
  display: inline-block;
  line-height: 0.9;
  margin-bottom: 12px;
}
.hero-left h1 {
  font-size: clamp(60px, 8vw, 132px);
  line-height: 0.92;
  letter-spacing: -0.025em;
  margin: 0 0 32px;
  color: var(--navy);
}
.hero-left h1 .roman { font-style: normal; display: block; }
.hero-left h1 .italic { font-style: italic; color: var(--coral); display: inline-block; }
.hero-sub {
  font-family: var(--body);
  font-size: clamp(17px, 1.6vw, 20px);
  color: var(--ink);
  max-width: 480px;
  line-height: 1.65;
  margin: 0 0 40px;
  font-style: italic;
  opacity: 0.88;
}
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.hero-meta {
  display: flex; gap: 32px; margin-top: 56px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--navy);
  opacity: 0.7;
  flex-wrap: wrap;
}
.hero-meta span { display: inline-flex; align-items: center; gap: 8px; }
.hero-meta span::before {
  content: "✦";
  color: var(--coral);
  font-size: 14px;
}

.hero-right {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--turquoise-soft), var(--turquoise));
}
.hero-right .hero-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 1;
}
.hero-right::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(135deg, transparent 50%, rgba(12, 44, 79, 0.2) 100%);
  z-index: 2;
}
.hero-badge {
  position: absolute;
  bottom: 56px; left: 56px;
  z-index: 3;
  background: var(--cream);
  padding: 22px 28px;
  border-radius: 4px;
  box-shadow: var(--shadow);
  max-width: 280px;
}
.hero-badge-eyebrow {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--coral);
  font-weight: 700;
  display: block;
  margin-bottom: 10px;
}
.hero-badge strong {
  font-family: var(--display);
  font-style: italic;
  font-size: 22px;
  color: var(--navy);
  font-weight: 400;
  line-height: 1.15;
  display: block;
  margin-bottom: 6px;
}
.hero-badge small {
  font-family: var(--body);
  font-style: italic;
  font-size: 13px;
  color: var(--ink-soft);
}
.hero-floating-stamp {
  position: absolute;
  top: 56px; right: 56px;
  width: 130px; height: 130px;
  border-radius: 50%;
  background: var(--cream);
  z-index: 3;
  box-shadow: var(--shadow);
  display: flex; align-items: center; justify-content: center;
  animation: stamp-spin 30s linear infinite;
}
.hero-floating-stamp svg { width: 100%; height: 100%; }
@keyframes stamp-spin { to { transform: rotate(360deg); } }

@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-left { padding: 60px 32px 40px; }
  .hero-right { min-height: 480px; }
  .hero-floating-stamp { width: 100px; height: 100px; top: 24px; right: 24px; }
  .hero-badge { left: 24px; bottom: 24px; padding: 18px 22px; max-width: 240px; }
}

/* TRUST STRIP */
.trust-strip {
  background: var(--cream);
  padding: 56px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 40px;
  align-items: center;
}
.trust-item {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 14px;
  position: relative;
}
.trust-item:not(:last-child)::after {
  content: "✦";
  position: absolute;
  right: -18px; top: 50%;
  transform: translateY(-50%);
  color: var(--coral);
  font-size: 12px;
  opacity: 0.5;
}
.trust-icon {
  width: 50px; height: 50px;
  display: flex; align-items: center; justify-content: center;
  color: var(--navy);
}
.trust-icon svg { width: 32px; height: 32px; }
.trust-item strong {
  font-family: var(--display);
  font-style: italic;
  font-size: 22px;
  color: var(--navy);
  display: block; line-height: 1.1;
  font-weight: 400;
}
.trust-item span {
  font-family: var(--sans);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* SECTION HEAD */
.section-head {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 80px;
}
.section-head .chapter { margin: 0 auto 28px; display: inline-block; }
.section-head h2 { margin-bottom: 20px; }
.section-head p {
  font-family: var(--body);
  font-style: italic;
  font-size: clamp(18px, 1.8vw, 22px);
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0;
}

/* MANIFESTO (About) */
.manifesto {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 100px;
  align-items: center;
}
.manifesto-art {
  position: relative;
  aspect-ratio: 4 / 5;
}
.manifesto-art::before { display: none; }
.manifesto-art-card {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(12, 44, 79, 0.18);
  background: #fdedf2;
}
.manifesto-art-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  mix-blend-mode: normal;
  filter: none;
  display: block;
}
.manifesto-stamp {
  position: absolute;
  bottom: 20px; right: 20px;
  width: 120px; height: 120px;
  border-radius: 50%;
  background: var(--cream);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow);
  z-index: 2;
  padding: 12px;
  transform: rotate(8deg);
  animation: gentle-rock 6s ease-in-out infinite;
}
@keyframes gentle-rock {
  0%, 100% { transform: rotate(8deg); }
  50%      { transform: rotate(-2deg); }
}
.manifesto-stamp-inner {
  width: 100%; height: 100%;
  border-radius: 50%;
  border: 1px solid var(--champagne);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  font-family: var(--display);
  font-style: italic;
  color: var(--navy);
  text-align: center;
  font-size: 13px;
  line-height: 1.15;
  padding: 12px;
}
.manifesto-stamp-script {
  font-family: var(--script);
  font-size: 28px;
  color: var(--coral);
  display: block;
  line-height: 1;
  margin: 4px 0;
}
.manifesto-stamp-meta {
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--champagne);
  margin-top: 4px;
}
.manifesto-text { position: relative; }
.manifesto-text h2 {
  font-size: clamp(40px, 5.5vw, 80px);
  font-style: italic;
  line-height: 1.04;
  margin-bottom: 32px;
}
.manifesto-text h2 em { color: var(--coral); }
.manifesto-text p {
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.7;
  color: var(--ink);
  margin-bottom: 18px;
}
.manifesto-text .signature {
  font-family: var(--script);
  font-size: 44px;
  color: var(--coral);
  margin-top: 40px;
  transform: rotate(-3deg);
  display: inline-block;
  line-height: 1;
}

/* COLLECTIONS */
.collections-stack {
  display: flex; flex-direction: column;
  gap: 140px;
}
.collection-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 80px;
  align-items: center;
}
.collection-row.is-reverse { grid-template-columns: 1fr 1.2fr; }
.collection-row.is-reverse .collection-photo-wrap { order: 2; }
.collection-row.is-reverse .collection-info { order: 1; }

.collection-photo-wrap {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: visible;
}
.collection-photo-wrap::before {
  content: "";
  position: absolute;
  inset: -10%;
  filter: blur(60px);
  z-index: 0;
  pointer-events: none;
  opacity: 0.7;
}
.col-keys .collection-photo-wrap::before {
  background: radial-gradient(circle at 30% 70%, rgba(76, 196, 184, 0.7), transparent 70%);
}
.col-manatee .collection-photo-wrap::before {
  background: radial-gradient(circle at 70% 70%, rgba(168, 192, 163, 0.7), transparent 70%);
}
.col-coral .collection-photo-wrap::before {
  background: radial-gradient(circle at 30% 30%, rgba(245, 198, 182, 0.7), transparent 70%);
}
.collection-photo {
  position: relative;
  width: 100%; height: 100%;
  object-fit: cover;
  box-shadow: var(--shadow-lg);
  z-index: 1;
  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
  border-radius: 4px;
}
.collection-row:hover .collection-photo { transform: scale(1.02); }

.collection-number-stamp {
  position: absolute;
  z-index: 3;
  width: 120px; height: 120px;
  border-radius: 50%;
  background: var(--cream);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow);
  font-family: var(--display);
  font-style: italic;
  font-size: 44px;
  color: var(--navy);
}
.col-keys .collection-number-stamp { top: -30px; right: -30px; color: var(--turquoise-deep); }
.col-manatee .collection-number-stamp { bottom: -30px; left: -30px; color: var(--sage-deep); }
.col-coral .collection-number-stamp { top: -30px; right: -30px; color: var(--coral); }

.collection-info { padding: 20px 0; }
.collection-kicker {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--coral);
  margin-bottom: 18px;
  display: block;
}
.col-keys .collection-kicker { color: var(--turquoise-deep); }
.col-manatee .collection-kicker { color: var(--sage-deep); }
.col-coral .collection-kicker { color: var(--coral); }

.collection-info h3 {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(44px, 5vw, 76px);
  font-weight: 400;
  color: var(--navy);
  margin: 0 0 20px;
  line-height: 0.98;
  letter-spacing: -0.02em;
}
.collection-tagline {
  font-family: var(--display);
  font-style: italic;
  font-size: 22px;
  color: var(--coral);
  margin-bottom: 22px;
  line-height: 1.3;
}
.col-keys .collection-tagline { color: var(--turquoise-deep); }
.col-manatee .collection-tagline { color: var(--sage-deep); }
.collection-mood {
  font-family: var(--body);
  font-style: italic;
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
  margin-bottom: 32px;
  max-width: 460px;
}

.collection-palette {
  display: flex; gap: 14px; flex-wrap: wrap;
  margin-bottom: 36px;
}
.swatch { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.swatch-dot {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 2px solid var(--cream);
  box-shadow: 0 4px 12px rgba(12, 44, 79, 0.15);
}
.swatch-name {
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  max-width: 70px;
  text-align: center;
  line-height: 1.3;
}
.sw-turquoise { background: var(--turquoise); }
.sw-white-sand { background: var(--sand); }
.sw-conch { background: var(--coral); }
.sw-spring-blue { background: var(--spring); }
.sw-seafoam { background: var(--sage); }
.sw-sand-beige { background: #e8d9b9; }
.sw-misty-aqua { background: #b6d4d2; }
.sw-hibiscus { background: var(--hibiscus); }
.sw-mango { background: var(--mango); }
.sw-turquoise-reef { background: var(--turquoise-deep); }
.sw-palm-green { background: #5d8a5c; }

/* GEAR LINE */
.gear-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 20px;
  margin-top: 56px;
}
.gear-item {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: 32px 14px;
  background: var(--cream);
  border-radius: 4px;
  transition: transform .5s ease, box-shadow .5s ease;
}
.gear-item:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
}
.gear-icon {
  width: 56px; height: 56px;
  margin-bottom: 16px;
  color: var(--navy);
}
.gear-icon svg { width: 100%; height: 100%; }
.gear-item strong {
  font-family: var(--display);
  font-style: italic;
  font-size: 20px;
  color: var(--navy);
  font-weight: 400;
  margin-bottom: 4px;
  line-height: 1.1;
}
.gear-item span {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

/* FUTURE / WAITLIST */
.future-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--navy);
  color: var(--pearl);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.future-photo {
  position: relative;
  min-height: 480px;
  background: linear-gradient(165deg, #2a4d6e, var(--navy), #061b34);
  overflow: hidden;
}
.future-photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.85;
}
.future-photo::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, var(--navy) 100%);
}
.future-text {
  padding: 80px 64px;
  display: flex; flex-direction: column; justify-content: center;
}
.future-kicker {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--champagne);
  font-weight: 700;
  display: block;
  margin-bottom: 18px;
}
.future-text h3 {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(40px, 4.6vw, 64px);
  color: var(--pearl);
  margin: 0 0 22px;
  line-height: 1;
  font-weight: 400;
}
.future-text .future-tag {
  font-family: var(--display);
  font-style: italic;
  font-size: 20px;
  color: var(--coral-soft);
  margin-bottom: 18px;
}
.future-text p {
  font-family: var(--body);
  font-style: italic;
  font-size: 16px;
  color: rgba(250, 245, 236, 0.78);
  line-height: 1.65;
  margin-bottom: 32px;
}
.future-form {
  display: flex;
  background: rgba(254, 252, 247, 0.1);
  padding: 6px;
  max-width: 440px;
}
.future-form input {
  flex: 1;
  border: 0;
  background: transparent;
  color: var(--cream);
  padding: 14px 18px;
  font-family: var(--body);
  font-style: italic;
  font-size: 15px;
  outline: none;
}
.future-form input::placeholder { color: rgba(254, 252, 247, 0.5); }
.future-form button {
  background: var(--coral);
  color: var(--cream);
  border: 0;
  padding: 12px 22px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .3s ease;
}
.future-form button:hover { background: var(--coral-deep); }

/* STORY */
.story {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 100px;
  align-items: center;
}
.story-photo-wrap {
  position: relative;
  aspect-ratio: 4 / 5;
}
.story-photo-wrap::before {
  content: "";
  position: absolute;
  inset: -8%;
  background: radial-gradient(circle, rgba(168, 192, 163, 0.5), transparent 70%);
  filter: blur(60px);
}
.story-photo {
  position: relative;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 4px;
  box-shadow: var(--shadow-lg);
}
.story-photo-sub {
  position: absolute;
  bottom: -10%; right: -10%;
  width: 50%;
  aspect-ratio: 1 / 1;
  border-radius: 4px;
  box-shadow: var(--shadow-lg);
  object-fit: cover;
  z-index: 2;
}
.story-text h2 em { color: var(--coral); }
.story-text p {
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.7;
  color: var(--ink);
  margin-bottom: 18px;
}

/* IMPACT */
.impact {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 100px;
  align-items: center;
}
.impact-visual {
  position: relative;
  aspect-ratio: 1 / 1;
}
.impact-visual::before {
  content: "";
  position: absolute;
  inset: -8%;
  background: radial-gradient(circle, rgba(168, 192, 163, 0.5) 0%, transparent 70%);
  filter: blur(40px);
  border-radius: 50%;
}
.impact-orb {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.impact-orb img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.impact-stats {
  position: absolute;
  bottom: -8%; right: -8%;
  background: var(--cream);
  padding: 32px 36px;
  text-align: center;
  box-shadow: var(--shadow);
  border-radius: 4px;
  z-index: 2;
}
.impact-stats strong {
  display: block;
  font-family: var(--display);
  font-style: italic;
  font-size: 48px;
  line-height: 1;
  color: var(--coral);
  font-weight: 400;
  margin-bottom: 6px;
}
.impact-stats span {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.impact-text h2 em { color: var(--coral); }
.impact-text p {
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.7;
  color: var(--ink);
  margin-bottom: 18px;
}
.impact-partners {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
.impact-partners-label {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 14px;
  display: block;
}
.impact-partners-list {
  display: flex; flex-wrap: wrap; gap: 28px;
  font-family: var(--display);
  font-style: italic;
  font-size: 19px;
  color: var(--sage-deep);
}

/* LOOKBOOK */
.lookbook {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 220px;
  gap: 14px;
}
.lookbook-tile {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border-radius: 4px;
}
.lookbook-tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.lookbook-tile:hover img { transform: scale(1.06); }
.lookbook-tile::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(12, 44, 79, 0.5));
  opacity: 0;
  transition: opacity .4s ease;
}
.lookbook-tile:hover::after { opacity: 1; }
.lookbook-cap {
  position: absolute;
  bottom: 18px; left: 22px;
  color: var(--cream);
  font-family: var(--display);
  font-style: italic;
  font-size: 22px;
  z-index: 2;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .4s ease, transform .4s ease;
}
.lookbook-tile:hover .lookbook-cap {
  opacity: 1;
  transform: translateY(0);
}
.tile-wide { grid-column: span 2; }
.tile-tall { grid-row: span 2; }

/* NEWSLETTER */
.newsletter-wrap {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
  padding: 100px 56px;
  text-align: center;
  color: var(--cream);
  position: relative;
  overflow: hidden;
  border-radius: 6px;
}
.newsletter-wrap::before {
  content: "";
  position: absolute;
  top: -200px; right: -200px;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(237, 115, 99, 0.3) 0%, transparent 70%);
  filter: blur(60px);
}
.newsletter-wrap::after {
  content: "";
  position: absolute;
  bottom: -200px; left: -200px;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 169, 110, 0.25) 0%, transparent 70%);
  filter: blur(60px);
}
.newsletter-inner { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; }
.newsletter-wrap .chapter { color: var(--champagne); margin: 0 auto 28px; display: inline-block; }
.newsletter-wrap .chapter::before { background: var(--champagne); }
.newsletter-wrap h2 {
  color: var(--cream);
  font-size: clamp(44px, 5.5vw, 88px);
  font-style: italic;
  margin: 0 0 24px;
  line-height: 0.98;
}
.newsletter-wrap h2 em { color: var(--coral-soft); }
.newsletter-wrap p {
  font-family: var(--body);
  font-style: italic;
  font-size: 19px;
  color: rgba(250, 245, 236, 0.82);
  max-width: 540px;
  margin: 0 auto 44px;
  line-height: 1.55;
}
.newsletter-form {
  display: flex;
  max-width: 540px;
  margin: 0 auto;
  background: var(--cream);
  padding: 8px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
  border-radius: 2px;
}
.newsletter-form input {
  flex: 1;
  border: 0;
  padding: 18px 24px;
  font-family: var(--body);
  font-style: italic;
  font-size: 16px;
  background: transparent;
  color: var(--navy);
  outline: none;
}
.newsletter-form input::placeholder { color: var(--muted); }
.newsletter-form button {
  background: var(--navy);
  color: var(--cream);
  border: 0;
  padding: 16px 32px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .3s ease;
}
.newsletter-form button:hover { background: var(--coral); }
.newsletter-fine {
  font-family: var(--sans);
  font-size: 11px;
  color: rgba(250, 245, 236, 0.72);
  margin-top: 18px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* FOOTER */
.foot {
  background: var(--navy);
  color: var(--pearl);
  position: relative;
}
.foot-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 100px 40px 56px;
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr) 1.5fr;
  gap: 64px;
}
.foot-logo {
  width: 110px; height: 110px;
  object-fit: contain;
  margin-bottom: 22px;
  background: transparent;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}
.foot-tag {
  font-family: var(--script);
  font-size: 32px;
  color: var(--coral-soft);
  margin: 0 0 16px;
  display: inline-block;
  line-height: 1;
}
.foot-desc {
  font-family: var(--body);
  font-style: italic;
  font-size: 15px;
  line-height: 1.65;
  color: rgba(250, 245, 236, 0.72);
  margin: 0 0 28px;
}
.foot-social { display: flex; gap: 12px; }
.foot-social a {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(254, 252, 247, 0.08);
  color: var(--cream);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .3s ease, transform .3s ease;
}
.foot-social a:hover {
  background: var(--coral);
  color: var(--cream);
  transform: translateY(-2px);
}
.foot-social svg { width: 16px; height: 16px; }
/* h3, not h4. These four column headings were h4 while the deepest heading on
   most pages is h2, so a screen reader navigating by heading heard the level
   jump 2 -> 4 and lost the outline. The size is set here anyway, so the tag is
   free to carry the correct rank rather than a look. */
.foot h3 {
  color: var(--cream);
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.32em;
  margin: 0 0 24px;
  text-transform: uppercase;
  font-weight: 700;
}
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot ul li { margin-bottom: 14px; }
.foot ul a {
  color: rgba(250, 245, 236, 0.7);
  font-family: var(--body);
  font-style: italic;
  font-size: 16px;
  transition: color .3s ease;
}
.foot ul a:hover { color: var(--coral-soft); }
.foot-newsletter p {
  font-family: var(--body);
  font-style: italic;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(250, 245, 236, 0.72);
  margin: 0 0 20px;
}
.foot-form {
  display: flex;
  background: rgba(254, 252, 247, 0.08);
  padding: 6px;
  margin-bottom: 12px;
  border-radius: 2px;
}
.foot-form input {
  flex: 1;
  background: transparent;
  border: 0;
  color: var(--cream);
  padding: 12px 18px;
  font-family: var(--body);
  font-style: italic;
  font-size: 13.5px;
  outline: none;
}
.foot-form input::placeholder { color: rgba(254, 252, 247, 0.45); font-style: italic; }
.foot-form button {
  background: var(--coral);
  color: var(--cream);
  border: 0;
  padding: 10px 18px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .3s ease;
}
.foot-form button:hover { background: var(--coral-deep); }
.foot-fine {
  font-family: var(--sans);
  font-size: 10px;
  color: rgba(250, 245, 236, 0.65);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.foot-bottom {
  border-top: 1px solid rgba(254, 252, 247, 0.1);
  padding: 28px 40px;
  display: flex; justify-content: space-between; align-items: center;
  max-width: var(--container);
  margin: 0 auto;
  flex-wrap: wrap;
  gap: 14px;
}
.foot-bottom p {
  font-family: var(--body);
  font-style: italic;
  font-size: 13px;
  color: rgba(250, 245, 236, 0.72);
  margin: 0;
}
.foot-legal {
  display: flex; gap: 16px; align-items: center;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.foot-legal a { color: rgba(250, 245, 236, 0.65); }
.foot-legal a:hover { color: var(--coral-soft); }
.foot-legal span { color: rgba(254, 252, 247, 0.25); }

/* REVEAL */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: .08s; }
.reveal-delay-2 { transition-delay: .16s; }
.reveal-delay-3 { transition-delay: .24s; }

/* RESPONSIVE */
@media (max-width: 1100px) {
  .lookbook { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 200px; }
  .gear-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 1023px) {
  .section { padding: 88px 0; }
  .nav-links { display: none; }
  .mobile-toggle { display: inline-block; }
  body.menu-open .nav-links {
    display: flex !important;
    position: fixed;
    top: var(--header-h, 80px); left: 0; right: 0; bottom: 0;
    flex-direction: column;
    background: var(--pearl);
    padding: 32px 28px 64px;
    gap: 0;
    z-index: 110;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    animation: menu-slide-in .35s cubic-bezier(0.16, 1, 0.3, 1);
  }
  @keyframes menu-slide-in {
    from { transform: translateY(-12px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
  }
  body.menu-open .nav-links li { width: 100%; }
  body.menu-open .nav-links a {
    font-family: var(--display);
    font-style: italic;
    font-size: 34px;
    color: var(--navy);
    padding: 22px 4px;
    border-bottom: 1px solid var(--line);
    text-transform: none;
    letter-spacing: -0.01em;
    min-height: auto;
    display: block;
    width: 100%;
  }
  body.menu-open .nav-links a::after { display: none; }
  /* iOS-safe scroll lock — `overflow: hidden` alone doesn't stop momentum scroll. */
  body.menu-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
  }
  /* Tap-anywhere-outside-the-menu overlay (the menu itself sits above this) */
  body.menu-open::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(12, 44, 79, 0.25);
    z-index: 105;
    animation: overlay-in .3s ease;
  }
  @keyframes overlay-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  /* Make sure the header sits above the overlay so the hamburger stays tappable to close */
  .site-header { z-index: 115; }
  .collection-row,
  .collection-row.is-reverse {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .collection-row.is-reverse .collection-photo-wrap,
  .collection-row.is-reverse .collection-info { order: initial; }
  .collections-stack { gap: 96px; }
  .manifesto { grid-template-columns: 1fr; gap: 56px; }
  .manifesto-art { max-width: 420px; margin: 0 auto; }
  .story { grid-template-columns: 1fr; gap: 56px; }
  .impact { grid-template-columns: 1fr; gap: 56px; }
  .impact-visual { max-width: 440px; margin: 0 auto; }
  .impact-stats { right: 0; bottom: -8%; }
  .future-card { grid-template-columns: 1fr; }
  .future-text { padding: 56px 32px; }
  .lookbook { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; }
  .gear-grid { grid-template-columns: repeat(3, 1fr); }
  .trust-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .trust-item::after { display: none !important; }
  .foot-inner { grid-template-columns: 1fr 1fr; gap: 48px; }
  .foot-brand-col, .foot-newsletter { grid-column: 1 / -1; }
  .newsletter-wrap { padding: 64px 32px; }
}
@media (max-width: 720px) {
  .marquee { font-size: 11px; }
  .marquee-track { gap: 32px; }
  .marquee-track span::after { margin-left: 32px; }
  .hero-left { padding: 48px 24px 32px; }
  .hero-left h1 { font-size: clamp(48px, 12vw, 72px); }
  .hero-right { min-height: 380px; }
  .gear-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .lookbook { grid-template-columns: 1fr; grid-auto-rows: 200px; gap: 12px; }
  .tile-wide { grid-column: span 1; }
  .tile-tall { grid-row: span 1; }
  /* On touch devices captions should be visible immediately, not on hover. */
  .lookbook-tile::after { opacity: 0.6; }
  .lookbook-cap { opacity: 1; transform: translateY(0); }
  .trust-grid { grid-template-columns: 1fr; gap: 28px; }
  .foot-inner { grid-template-columns: 1fr; gap: 40px; padding: 72px 24px 36px; }
  .nav { padding: 10px 18px; gap: 12px; }
  .brand-logo { width: 82px; height: 82px; }
  .newsletter-form { flex-direction: column; padding: 10px; gap: 10px; }
  .newsletter-form input { width: 100%; padding: 14px 16px; }
  .newsletter-form button { width: 100%; padding: 16px; }
  .future-form { flex-direction: column; max-width: 100%; gap: 10px; padding: 10px; }
  .future-form input { width: 100%; }
  .future-form button { width: 100%; padding: 14px; }
  .future-text { padding: 48px 24px; }
  .hero-meta { gap: 20px; }
  /* Collection number stamps: pull inward so they don't clip on a 375px viewport */
  .collection-number-stamp { width: 80px; height: 80px; font-size: 28px; }
  .col-keys .collection-number-stamp,
  .col-coral .collection-number-stamp { top: -16px; right: -8px; }
  .col-manatee .collection-number-stamp { bottom: -16px; left: -8px; }
  /* Tame the giant dropcap on narrow screens */
  .dropcap::first-letter {
    font-size: 3.6em;
    padding: 2px 10px 0 0;
  }
  /* Photo wraps spaced from edges */
  .collection-photo-wrap { margin: 0 8px; }
  /* Impact stats pulled inside */
  .impact-stats { right: 8px; bottom: -6%; padding: 22px 26px; }
  .impact-stats strong { font-size: 38px; }
  .pullquote { margin: 32px 0; padding-left: 20px; }
}

/* =====================================================================
   V3.5 — Multi-page ecommerce additions
   ===================================================================== */

/* Page hero (used on every interior page) */
.page-hero {
  position: relative;
  padding: 120px 0 100px;
  background: var(--pearl);
  overflow: hidden;
  isolation: isolate;
}
.page-hero--pearl { background: var(--pearl); }
.page-hero--warm  { background: var(--blush-mist); }
.page-hero--sand  { background: var(--sand); }
.page-hero--spring { background: var(--spring-soft); }
.page-hero--turquoise { background: linear-gradient(165deg, var(--turquoise-soft), var(--turquoise)); color: var(--cream); }
.page-hero--sage { background: linear-gradient(165deg, var(--sage-soft), var(--sage)); color: var(--cream); }
.page-hero--blush { background: linear-gradient(165deg, var(--coral-mist), var(--coral-soft)); color: var(--navy); }
.page-hero--turquoise h1, .page-hero--sage h1 { color: var(--cream); }
.page-hero--turquoise .page-hero-sub, .page-hero--sage .page-hero-sub { color: rgba(254, 252, 247, 0.92); }
.page-hero-photo {
  position: absolute; inset: 0;
  background: var(--hero-art) center / cover no-repeat;
  z-index: -2;
  opacity: 1;
}
/* Default: dark navy veil over photo so any text reads — works for sage / turquoise / blush tones */
.page-hero-veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12, 44, 79, 0.55) 0%, rgba(12, 44, 79, 0.78) 100%);
  z-index: -1;
}
/* Page-hero with photo: force cream text + drop-shadow */
.page-hero--turquoise.page-hero,
.page-hero--sage.page-hero,
.page-hero--blush.page-hero {
  color: #faf5ec;
}
.page-hero--turquoise h1,
.page-hero--sage h1,
.page-hero--blush h1 {
  color: #ffffff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45), 0 6px 32px rgba(0, 0, 0, 0.3);
}
.page-hero--turquoise .page-hero-sub,
.page-hero--sage .page-hero-sub,
.page-hero--blush .page-hero-sub {
  color: rgba(255, 255, 255, 0.94);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
  font-style: italic;
}
.page-hero--turquoise .chapter,
.page-hero--sage .chapter,
.page-hero--blush .chapter {
  color: #ffb4a4;
}
.page-hero--turquoise .chapter::before,
.page-hero--sage .chapter::before,
.page-hero--blush .chapter::before {
  background: #ffb4a4;
}
.page-hero--turquoise h1 em,
.page-hero--sage h1 em,
.page-hero--blush h1 em {
  color: #ffb4a4;
}
/* For the warm / pearl / sand tones (no art photo) keep dark text on light bg */
.page-hero--warm.page-hero,
.page-hero--pearl.page-hero,
.page-hero--sand.page-hero,
.page-hero--spring.page-hero {
  color: #1a1d2e;
}
.page-hero--warm h1,
.page-hero--pearl h1,
.page-hero--sand h1,
.page-hero--spring h1 {
  color: #0c2c4f;
}
.page-hero--warm h1 em,
.page-hero--pearl h1 em,
.page-hero--sand h1 em,
.page-hero--spring h1 em {
  color: #ed7363;
}
/* Light tones with art photo still need the dark veil to push text away from the photo */
.page-hero--warm .page-hero-veil,
.page-hero--pearl .page-hero-veil,
.page-hero--sand .page-hero-veil,
.page-hero--spring .page-hero-veil {
  background: linear-gradient(180deg, rgba(250, 245, 236, 0.7) 0%, rgba(250, 245, 236, 0.92) 100%);
}
.page-hero-inner {
  position: relative;
  max-width: 880px;
  text-align: center;
  margin: 0 auto;
}
.page-hero h1 {
  font-size: clamp(56px, 8vw, 132px);
  margin: 0 0 28px;
  line-height: 0.92;
  letter-spacing: -0.025em;
}
.page-hero h1 .roman { font-style: normal; }
.page-hero h1 em { font-style: italic; color: var(--coral); }
.page-hero-sub {
  font-family: var(--body);
  font-style: italic;
  font-size: clamp(17px, 1.6vw, 22px);
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
  max-width: 660px;
  margin-inline: auto;
}
.page-hero .chapter { margin: 0 auto 24px; display: inline-block; }

/* Breadcrumbs */
.crumbs {
  padding: 24px 0;
  background: var(--cream);
  border-bottom: 1px solid var(--line);
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.crumbs ol {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.crumbs li { display: inline-flex; align-items: center; gap: 4px; }
.crumbs a { color: var(--navy); font-weight: 500; }
.crumbs a:hover { color: var(--coral); }
.crumbs .crumb-sep { color: var(--muted); opacity: 0.6; padding: 0 4px; }
.crumbs [aria-current="page"] { color: var(--coral); font-weight: 600; }

/* Reveal delays */
.reveal-delay-0 { transition-delay: 0s; }
.reveal-delay-4 { transition-delay: .32s; }
.reveal-delay-5 { transition-delay: .40s; }

/* Block / wide button */
.btn-block { width: 100%; }

/* Section CTA wrapper for trailing button */
.section-cta { text-align: center; margin-top: 56px; }

/* ============= COLLECTIONS 3-UP (HOME) ============= */
.collections-3up {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.collection-3up-card {
  display: block;
  text-decoration: none;
  color: var(--ink);
  position: relative;
  transition: transform .5s cubic-bezier(0.16, 1, 0.3, 1);
}
.collection-3up-card:hover { transform: translateY(-6px); }
.collection-3up-photo {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 4px;
  margin-bottom: 24px;
  background: var(--blush-mist);
}
.collection-3up-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.collection-3up-card:hover .collection-3up-photo img { transform: scale(1.04); }
.collection-3up-stamp {
  position: absolute;
  top: 14px; right: 14px;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--cream);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display);
  font-style: italic;
  font-size: 22px;
  color: var(--navy);
  box-shadow: 0 4px 14px rgba(12, 44, 79, 0.12);
}
.col-keys .collection-3up-stamp { color: var(--turquoise-deep); }
.col-manatee .collection-3up-stamp { color: var(--sage-deep); }
.col-coral .collection-3up-stamp { color: var(--coral); }
.collection-3up-body { padding: 0 4px; }
.collection-3up-body .collection-kicker { font-size: 10px; letter-spacing: 0.32em; }
.collection-3up-body h3 {
  font-family: var(--display);
  font-style: italic;
  font-size: 36px;
  line-height: 1;
  margin: 8px 0 12px;
  letter-spacing: -0.01em;
  font-weight: 400;
}
.collection-3up-body p {
  font-family: var(--body);
  font-style: italic;
  font-size: 16px;
  color: var(--ink-soft);
  margin: 0 0 18px;
  line-height: 1.4;
}

/* ============= QUIZ ============= */
.quiz {
  max-width: 820px;
  margin: 0 auto;
  background: var(--cream);
  padding: 56px 56px 64px;
  border-radius: 6px;
  box-shadow: var(--shadow);
  position: relative;
}
.quiz-progress {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 36px;
}
.quiz-progress-bar {
  height: 3px;
  background: var(--line);
  border-radius: 999px;
  position: relative;
  overflow: hidden;
}
.quiz-progress-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  width: var(--p, 0%);
  background: linear-gradient(90deg, var(--coral) 0%, var(--champagne) 100%);
  transition: width .5s ease;
  border-radius: 999px;
}
.quiz-progress-label {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
}
.quiz-step { display: none; }
.quiz-step.is-active { display: block; animation: quiz-fade-in .45s ease; }
@keyframes quiz-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.quiz-step h3 {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(28px, 3.4vw, 44px);
  color: var(--navy);
  margin: 0 0 28px;
  line-height: 1.1;
}
.quiz-step h3 em { color: var(--coral); }
.quiz-options {
  display: grid;
  gap: 14px;
}
.quiz-option {
  background: var(--pearl);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 22px 24px;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 18px;
  align-items: center;
  text-align: left;
  cursor: pointer;
  font: inherit;
  transition: all .25s ease;
  position: relative;
}
.quiz-option:hover {
  border-color: var(--coral);
  background: var(--cream);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.quiz-option-emoji {
  font-size: 36px;
  line-height: 1;
  text-align: center;
}
.quiz-option-swatches {
  display: flex; gap: 6px;
  align-items: center; justify-content: center;
}
.quiz-sw {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2px solid var(--cream);
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.quiz-option-label {
  font-family: var(--display);
  font-style: italic;
  font-size: 20px;
  color: var(--navy);
  display: block;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.quiz-option-sub {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-top: 4px;
}
.quiz-result { display: none; text-align: center; }
.quiz-result.is-on { display: block; animation: quiz-fade-in .5s ease; }
.quiz-result .chapter { margin: 0 auto 18px; }
.quiz-result h3 {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(40px, 5vw, 64px);
  margin: 0 0 14px;
  color: var(--coral);
  letter-spacing: -0.02em;
  font-weight: 400;
}
.quiz-result-tag {
  font-family: var(--body);
  font-style: italic;
  font-size: 18px;
  color: var(--ink-soft);
  margin: 0 0 32px;
}
.quiz-result-photo {
  width: 240px; height: 240px;
  margin: 0 auto 36px;
  border-radius: 50%;
  background: var(--blush-mist) center / cover no-repeat;
  box-shadow: var(--shadow);
}
.quiz-result-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ============= COLLECTION HERO (collection.php) ============= */
.collection-hero {
  position: relative;
  min-height: 540px;
  display: flex;
  align-items: center;
  padding: 100px 0;
  overflow: hidden;
  isolation: isolate;
  color: var(--cream);
}
.collection-hero-photo {
  position: absolute; inset: 0;
  background-position: center;
  background-size: cover;
  z-index: -2;
  transform: scale(1.04);
}
.collection-hero-veil {
  position: absolute; inset: 0;
  z-index: -1;
}
.collection-hero--turquoise .collection-hero-veil { background: linear-gradient(135deg, rgba(42, 157, 146, 0.55) 0%, rgba(12, 44, 79, 0.75) 100%); }
.collection-hero--sage      .collection-hero-veil { background: linear-gradient(135deg, rgba(122, 149, 118, 0.55) 0%, rgba(12, 44, 79, 0.75) 100%); }
.collection-hero--blush     .collection-hero-veil { background: linear-gradient(135deg, rgba(232, 160, 140, 0.55) 0%, rgba(12, 44, 79, 0.7) 100%); }
.collection-hero-inner {
  max-width: 720px;
  position: relative;
}
.collection-hero .chapter { color: var(--coral-soft); }
.collection-hero .chapter::before { background: var(--coral-soft); }
.collection-hero h1 {
  font-size: clamp(56px, 8vw, 140px);
  color: var(--cream);
  margin: 0 0 24px;
  line-height: 0.9;
  letter-spacing: -0.025em;
}
.collection-hero h1 .italic { font-style: italic; }
.collection-hero-tag {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(22px, 2.4vw, 30px);
  color: var(--coral-soft);
  margin: 0 0 18px;
  line-height: 1.2;
}
.collection-hero-mood {
  font-family: var(--body);
  font-style: italic;
  font-size: 19px;
  color: rgba(254, 252, 247, 0.88);
  margin: 0 0 36px;
  max-width: 600px;
  line-height: 1.5;
}
.collection-hero-palette {
  display: flex; gap: 18px; flex-wrap: wrap;
}
.swatch--lg .swatch-dot { width: 48px; height: 48px; border-color: rgba(254, 252, 247, 0.7); }
.swatch--lg .swatch-name { color: rgba(254, 252, 247, 0.85); }

/* ============= PRODUCT GRID + CARD ============= */
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.product-card {
  display: block;
  text-decoration: none;
  color: var(--ink);
  position: relative;
  transition: transform .5s cubic-bezier(0.16, 1, 0.3, 1);
}
.product-card:hover { transform: translateY(-6px); }
.product-media {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 4px;
  background: var(--blush-mist);
  margin-bottom: 18px;
}
.product-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.product-card:hover .product-media img { transform: scale(1.05); }
.product-flag {
  position: absolute;
  top: 14px; left: 14px;
  background: var(--cream);
  color: var(--coral);
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 2px;
  z-index: 2;
}
.product-flag.is-waitlist { color: var(--sage-deep); }
.product-flag.is-bundle-flag {
  background: var(--navy);
  color: var(--coral-soft);
  top: auto; left: auto;
  right: 14px; bottom: 14px;
}
.product-info { padding: 0 4px; }
.product-col {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.col-keys .product-col { color: var(--turquoise-deep); }
.col-manatee .product-col { color: var(--sage-deep); }
.col-coral .product-col { color: var(--coral); }
.product-name {
  font-family: var(--display);
  font-style: italic;
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--navy);
  margin: 8px 0 6px;
  line-height: 1.1;
}
.product-kicker {
  font-family: var(--body);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-soft);
  display: block;
  margin-bottom: 14px;
}
.product-link {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--coral);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--coral);
  transition: gap .3s ease;
}
.product-card:hover .product-link { gap: 12px; }

.product-card.is-bundle .product-media {
  background: linear-gradient(165deg, var(--navy-soft), var(--navy));
}
.product-card.is-bundle .product-name { color: var(--coral); }

/* ============= COLLECTIONS-MINI (cross-sell) ============= */
.collections-mini {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}
.collection-mini {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 28px;
  align-items: center;
  background: var(--cream);
  padding: 24px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--ink);
  transition: box-shadow .4s ease, transform .4s ease;
}
.collection-mini:hover { box-shadow: var(--shadow); transform: translateY(-4px); }
.collection-mini-photo {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 4px;
}
.collection-mini-photo img { width: 100%; height: 100%; object-fit: cover; }
.collection-mini-info h3 {
  font-family: var(--display);
  font-style: italic;
  font-size: 32px;
  margin: 8px 0;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.collection-mini-info p {
  font-family: var(--body);
  font-style: italic;
  color: var(--ink-soft);
  margin: 0 0 14px;
  font-size: 15px;
}

/* ============= PRODUCT DETAIL (pdp) ============= */
.pdp { padding-top: 72px; }
.pdp-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 80px;
  align-items: start;
}
.pdp-photo {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 4px;
  background: var(--blush-mist);
  position: relative;
  margin-bottom: 14px;
}
.pdp-photo img { width: 100%; height: 100%; object-fit: cover; }
.pdp-thumbs {
  display: flex; gap: 10px; flex-wrap: wrap;
}
.pdp-thumb {
  width: 72px; height: 72px;
  border-radius: 4px;
  background: var(--blush-mist) center / cover no-repeat;
  border: 2px solid transparent;
  cursor: pointer;
}
.pdp-thumb.is-active { border-color: var(--coral); }

.pdp-info {
  position: sticky;
  top: 110px;
}
.pdp-collection-tag {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--cream);
  padding: 8px 14px;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--navy);
  text-decoration: none;
  margin-bottom: 20px;
  border: 1px solid var(--line);
}
.pdp-collection-tag .dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--coral);
}
.pdp-collection-tag.col-keys .dot { background: var(--turquoise-deep); }
.pdp-collection-tag.col-manatee .dot { background: var(--sage-deep); }
.pdp-collection-tag.col-coral .dot { background: var(--coral); }
.pdp h1 {
  font-size: clamp(40px, 5vw, 64px);
  font-style: italic;
  margin: 0 0 14px;
  line-height: 1;
  letter-spacing: -0.02em;
}
.pdp-kicker {
  font-family: var(--body);
  font-style: italic;
  font-size: 18px;
  color: var(--coral);
  margin: 0 0 22px;
}
.pdp-desc {
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  margin: 0 0 32px;
}
.pdp-price-block {
  background: var(--pearl-warm);
  padding: 20px 22px;
  border-radius: 4px;
  margin: 0 0 32px;
}
.pdp-price-label {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}
.pdp-price-tag {
  display: block;
  font-family: var(--display);
  font-style: italic;
  font-size: 30px;
  color: var(--navy);
  margin: 6px 0 8px;
  font-weight: 400;
}
.pdp-price-note {
  font-family: var(--body);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-soft);
}

.pdp-label {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--navy);
}
.pdp-size { margin: 0 0 28px; }
.pdp-size-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 14px;
}
.pdp-size-guide {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--coral);
}
.size-pills {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.size-pill {
  position: relative; cursor: pointer;
}
.size-pill input { position: absolute; opacity: 0; pointer-events: none; }
.size-pill span {
  display: inline-flex;
  align-items: center; justify-content: center;
  min-width: 56px;
  height: 44px;
  padding: 0 14px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 4px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--navy);
  transition: all .2s ease;
}
.size-pill:hover span { border-color: var(--coral); color: var(--coral); }
.size-pill input:checked + span {
  background: var(--navy);
  color: var(--cream);
  border-color: var(--navy);
}

.pdp-qty-row { margin: 0 0 24px; }
.pdp-qty {
  display: grid;
  gap: 10px;
}
.qty-stepper {
  display: inline-flex; align-items: stretch;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--cream);
  overflow: hidden;
  width: fit-content;
}
.qty-btn {
  width: 44px; height: 44px;
  background: transparent;
  border: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  transition: background .2s ease;
}
.qty-btn:hover { background: var(--blush-mist); }
.qty-input {
  width: 60px;
  border: 0;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  background: transparent;
  text-align: center;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
  outline: none;
  /* hide native spinner */
  -moz-appearance: textfield;
}
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.pdp-actions { display: grid; gap: 12px; margin-bottom: 30px; }

.pdp-trust {
  list-style: none;
  margin: 0; padding: 24px 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 12px;
}
.pdp-trust li {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--body);
  font-size: 14.5px;
  color: var(--ink-soft);
}
.pdp-trust svg {
  width: 18px; height: 18px;
  color: var(--coral);
  flex-shrink: 0;
}

.pdp-specs-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 80px;
}
.pdp-specs h2 {
  font-size: clamp(36px, 4.4vw, 60px);
}
.pdp-spec-list {
  list-style: none;
  margin: 24px 0 0; padding: 0;
  display: grid;
  gap: 14px;
}
.pdp-spec-list li {
  display: flex; align-items: flex-start; gap: 14px;
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  padding: 14px 18px;
  background: var(--pearl);
  border-radius: 4px;
}
.pdp-spec-list svg {
  width: 22px; height: 22px;
  color: var(--coral);
  flex-shrink: 0;
  margin-top: 2px;
}
.pdp-colorway {
  background: var(--cream);
  padding: 32px;
  border-radius: 6px;
  position: sticky;
  top: 110px;
  align-self: start;
}
.pdp-colorway h3 {
  font-family: var(--display);
  font-style: italic;
  font-size: 30px;
  margin: 12px 0 16px;
  font-weight: 400;
}
.pdp-colorway p {
  font-family: var(--body);
  font-style: italic;
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0 0 18px;
}

/* ============= CART ============= */
.cart-shell {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 64px;
  align-items: start;
}
.cart-head {
  display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: 1px solid var(--line);
  padding-bottom: 18px;
  margin-bottom: 24px;
}
.cart-head h3 {
  font-family: var(--display);
  font-style: italic;
  font-size: 28px;
  margin: 0;
  font-weight: 400;
}
#cart-clear {
  background: transparent; border: 0;
  padding: 0;
  cursor: pointer;
}
.cart-rows { display: grid; gap: 18px; }
.cart-row {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: 24px;
  align-items: center;
  background: var(--cream);
  padding: 18px;
  border-radius: 4px;
}
.cart-row-photo {
  display: block;
  width: 120px;
  aspect-ratio: 3 / 4;
  border-radius: 4px;
  overflow: hidden;
  background: var(--blush-mist);
}
.cart-row-photo img { width: 100%; height: 100%; object-fit: cover; }
.cart-row-col {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}
.cart-row-info h4 {
  font-family: var(--display);
  font-style: italic;
  font-size: 22px;
  font-weight: 400;
  margin: 6px 0 8px;
}
.cart-row-info h4 a { color: var(--navy); }
.cart-row-size {
  font-family: var(--body);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-soft);
  display: inline-block;
  margin-bottom: 12px;
}
.cart-row-actions {
  display: flex; gap: 16px; align-items: center;
}
.cart-row-remove {
  background: transparent; border: 0;
  color: var(--coral);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 8px 4px;
}
.cart-row-remove:hover { color: var(--navy); text-decoration: underline; }
.cart-row-price {
  text-align: right;
  white-space: nowrap;
}
.cart-row-price-tag {
  font-family: var(--display);
  font-style: italic;
  font-size: 24px;
  color: var(--coral);
  display: block;
}
.cart-row-price small {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.cart-empty {
  text-align: center;
  padding: 80px 32px;
  background: var(--cream);
  border-radius: 6px;
}
.cart-empty svg {
  width: 80px; height: 80px;
  color: var(--coral);
  margin: 0 auto 24px;
  opacity: 0.85;
}
.cart-empty h3 {
  font-family: var(--display);
  font-style: italic;
  font-size: 36px;
  margin: 0 0 12px;
  font-weight: 400;
}
.cart-empty p {
  font-family: var(--body);
  font-style: italic;
  color: var(--ink-soft);
  margin: 0 0 28px;
}
.cart-summary {
  background: var(--cream);
  padding: 36px;
  border-radius: 6px;
  position: sticky;
  top: 110px;
}
.cart-summary h3 {
  font-family: var(--display);
  font-style: italic;
  font-size: 30px;
  margin: 0 0 22px;
  font-weight: 400;
}
.cart-promises {
  list-style: none;
  margin: 0 0 28px; padding: 0;
  display: grid;
  gap: 14px;
}
.cart-promises li {
  display: flex; align-items: flex-start; gap: 12px;
  font-family: var(--body);
  font-size: 14.5px;
  color: var(--ink);
}
.cart-promises svg {
  width: 20px; height: 20px;
  color: var(--coral);
  flex-shrink: 0;
}
.cart-reserve {
  background: var(--pearl-warm);
  padding: 24px;
  border-radius: 4px;
}
.cart-reserve input {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--cream);
  font-family: var(--body);
  font-style: italic;
  font-size: 15px;
  margin-bottom: 12px;
  outline: none;
  transition: border-color .2s ease;
}
.cart-reserve input:focus { border-color: var(--coral); }
.form-label {
  display: block;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 8px;
}
.cart-fine {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 14px 0 0;
  text-align: center;
}

/* Floating "added" dot animation */
.fly-dot {
  position: fixed;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--coral);
  z-index: 9999;
  transform: translate(0, 0) scale(1);
  transition: transform .7s cubic-bezier(0.5, 0, 0.3, 1), opacity .7s ease;
  box-shadow: 0 4px 18px rgba(237, 115, 99, 0.6);
  pointer-events: none;
}
.cart-btn.is-bumped {
  animation: cart-bump .5s ease;
}
@keyframes cart-bump {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.15); }
}
.cart-count.is-empty {
  background: var(--muted);
}

/* Toast */
.fm-toast {
  position: fixed;
  bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--navy);
  color: var(--cream);
  padding: 14px 24px;
  border-radius: 6px;
  font-family: var(--body);
  font-style: italic;
  font-size: 15px;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease, transform .35s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 200;
  max-width: 90vw;
}
.fm-toast.is-on {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.fm-toast strong { color: var(--coral-soft); font-style: normal; font-weight: 600; }

/* ============= REEF PROJECT PARTNERS ============= */
.reef-partners {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.reef-partner {
  background: var(--cream);
  padding: 36px 30px;
  border-radius: 6px;
  border-top: 3px solid var(--sage-deep);
}
.reef-partner h3 {
  font-family: var(--display);
  font-style: italic;
  font-size: 26px;
  font-weight: 400;
  margin: 0 0 14px;
}
.reef-partner p {
  font-family: var(--body);
  color: var(--ink);
  line-height: 1.55;
  margin: 0 0 18px;
}
.reef-partner-tag {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--sage-deep);
  font-weight: 700;
}
.reef-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
}
.reef-stat strong {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(48px, 6vw, 88px);
  color: var(--coral);
  display: block;
  line-height: 1;
  margin-bottom: 6px;
  font-weight: 400;
}
.reef-stat span {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}

/* ============= SIZING TABLE ============= */
.size-table-wrap {
  background: var(--cream);
  border-radius: 6px;
  padding: 28px;
  overflow-x: auto;
}
.size-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--sans);
}
.size-table thead th {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  font-weight: 700;
}
.size-table tbody th {
  font-family: var(--display);
  font-style: italic;
  font-size: 22px;
  color: var(--coral);
  text-align: left;
  padding: 16px;
  font-weight: 400;
  border-bottom: 1px solid var(--line);
}
.size-table tbody td {
  padding: 16px;
  font-family: var(--body);
  font-size: 16px;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.size-table tbody tr:last-child th,
.size-table tbody tr:last-child td { border-bottom: 0; }
.size-note {
  font-family: var(--body);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-soft);
  margin: 18px 0 0;
}

/* ============= POLICY GRID (shipping page) ============= */
.policy-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}
.policy-card {
  background: var(--cream);
  padding: 48px 40px;
  border-radius: 6px;
}
.policy-card h2 {
  font-size: clamp(34px, 4vw, 56px);
}
.policy-list {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: 14px;
}
.policy-list li {
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  padding-left: 22px;
  position: relative;
}
.policy-list li::before {
  content: "✦";
  position: absolute;
  left: 0; top: 2px;
  color: var(--coral);
  font-size: 12px;
}
.policy-list strong { color: var(--coral); font-weight: 700; }

/* Info CTA card */
.info-cta {
  text-align: center;
  background: var(--blush-mist);
  padding: 56px 32px;
  border-radius: 6px;
  margin-top: 60px;
}
.info-cta h3 {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: 400;
  margin: 0 0 14px;
}
.info-cta h3 em { color: var(--coral); }
.info-cta p {
  font-family: var(--body);
  font-style: italic;
  color: var(--ink-soft);
  margin: 0 0 24px;
  font-size: 17px;
}

/* ============= CONTACT ============= */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 80px;
}
.contact-info h2 {
  font-size: clamp(36px, 4.4vw, 60px);
  margin-bottom: 40px;
}
.contact-row {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 18px;
  align-items: flex-start;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.contact-row:last-child { border-bottom: 0; }
.contact-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--cream);
  display: flex; align-items: center; justify-content: center;
  color: var(--coral);
}
.contact-icon svg { width: 22px; height: 22px; }
/* h3 for the same reason as the footer columns — these sit directly under an h2
   and were skipping a level for screen-reader users. */
.contact-row h3 {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  margin: 0 0 6px;
}
.contact-link {
  font-family: var(--display);
  font-style: italic;
  font-size: 24px;
  color: var(--navy);
  display: block;
  margin-bottom: 4px;
}
a.contact-link:hover { color: var(--coral); }
.contact-row p {
  font-family: var(--body);
  font-style: italic;
  color: var(--ink-soft);
  margin: 0;
  font-size: 14px;
}

.contact-form-wrap {
  background: var(--cream);
  padding: 48px 40px;
  border-radius: 6px;
}
.contact-form h3 {
  font-family: var(--display);
  font-style: italic;
  font-size: 36px;
  margin: 0 0 8px;
  font-weight: 400;
}
.contact-form-tag {
  font-family: var(--body);
  font-style: italic;
  color: var(--ink-soft);
  margin: 0 0 28px;
}
.form-field {
  display: block;
  margin-bottom: 18px;
}
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--pearl);
  font-family: var(--body);
  font-size: 16px;
  color: var(--ink);
  outline: none;
  transition: border-color .2s ease, background .2s ease;
  font-family: inherit;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--coral);
  background: var(--cream);
}
.form-field textarea { resize: vertical; min-height: 120px; }
.contact-fine {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 18px 0 0;
  text-align: center;
}

/* ============= FAQ ============= */
.faq-list { max-width: 880px; margin: 0 auto; }
.faq-item {
  border-bottom: 1px solid var(--line);
  padding: 22px 0;
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  gap: 18px;
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(20px, 2.2vw, 28px);
  color: var(--navy);
  line-height: 1.2;
  padding: 8px 0;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary svg {
  width: 24px; height: 24px;
  flex-shrink: 0;
  color: var(--coral);
  transition: transform .3s ease;
}
.faq-item[open] summary svg { transform: rotate(180deg); }
.faq-body {
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
  padding: 12px 0 8px;
  max-width: 720px;
}

/* ============= LOOKBOOK PAGE ============= */
.lookbook--full {
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 280px;
}

/* ============= 404 ============= */
.error-page { padding: 120px 0; text-align: center; }
.error-inner { max-width: 600px; margin: 0 auto; }
.error-mermaid {
  width: 200px; height: 200px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 32px;
  background: var(--blush-mist);
  box-shadow: var(--shadow);
}
.error-mermaid img { width: 100%; height: 100%; object-fit: cover; }
.error-inner h1 {
  font-size: clamp(48px, 6vw, 92px);
  margin: 0 0 18px;
}
.error-inner p {
  font-family: var(--body);
  font-style: italic;
  font-size: 19px;
  color: var(--ink-soft);
  margin: 0 0 36px;
}
.error-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* =====================================================================
   SEAFLOOR BACKDROPS — products + cards feel like they're IN the water
   ===================================================================== */

/* Product media (collection grid + PDP) sits on a real underwater backdrop
   instead of flat blush. The seafloor image gets a slight blue veil + light
   ripple so the product still pops. */
.product-media {
  background:
    linear-gradient(180deg, rgba(168, 192, 163, 0.15) 0%, rgba(76, 196, 184, 0.18) 60%, rgba(12, 44, 79, 0.25) 100%),
    var(--blush-mist);
  position: relative;
  isolation: isolate;
}
/* THE SEAFLOOR LAYER IS OFF.
 *
 * It painted the collection's seafloor image behind each product and set the
 * product image to `mix-blend-mode: multiply` on top, so the white background of
 * a cut-out product shot would drop away and the product would appear to float
 * over sand.
 *
 * That trick needs a cut-out on white. Claudia has never shot one — every photo
 * in the catalog is a full-frame photograph, so the multiply was averaging two
 * photographs together on every card. On Manatee Dream the seafloor is a
 * seagrass-and-roots shot, and its roots were legible straight across the fins
 * spec sheet and the dive socks.
 *
 * The tell was that the only card on the page that looked right was the full-set
 * bundle, which had already opted out via `.is-bundle` for the same reason.
 *
 * Kept as dead-but-inert rules rather than deleted: the markup still emits
 * `<span class="product-seafloor">` and still sets `--seafloor` from the
 * collection, so if a cut-out product line ever gets shot, this turns back on by
 * flipping `display` and restoring the multiply — no template changes.
 */
.product-seafloor { display: none; }
.product-media::after { content: none; }
.product-media img {
  position: relative;
  z-index: 2;
  /* Photograph fills the frame — see the seafloor note above. The drop-shadow
     went with the multiply: it existed to lift a cut-out off the sand, and on a
     full-bleed photo it only darkened the card's own edges. */
  mix-blend-mode: normal;
  background: transparent;
}
/* Bundles still get the navy gradient — model photo on lifestyle backdrop */
.product-card.is-bundle .product-media {
  background: var(--navy);
}

/* PDP photo — same treatment, larger scale */
.pdp-photo {
  background:
    linear-gradient(180deg, rgba(168, 192, 163, 0.18) 0%, rgba(76, 196, 184, 0.2) 50%, rgba(12, 44, 79, 0.3) 100%),
    var(--blush-mist);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
/* Off for the same reason as the card seafloor — see the note above. */
.pdp-seafloor { display: none; }
.pdp-photo::after { content: none; }
.pdp-photo img {
  position: relative;
  z-index: 2;
  mix-blend-mode: normal;
  background: transparent;
}
/* A per-filename opt-out list used to live here, exempting the five photos that
   had already been noticed as ghosting. It is gone with the seafloor itself —
   the list was treating each new bad-looking photo as its own incident instead
   of the blend mode being wrong for every photo in the catalog. */

/* Per-collection card tint — visible only in the gap while a photo loads. */
.col-keys    .product-media { background: linear-gradient(180deg, rgba(76, 196, 184, 0.2), rgba(12, 44, 79, 0.25)), var(--turquoise-soft); }
.col-manatee .product-media { background: linear-gradient(180deg, rgba(168, 192, 163, 0.22), rgba(122, 149, 118, 0.3)), var(--sage-soft); }
.col-coral   .product-media { background: linear-gradient(180deg, rgba(245, 198, 182, 0.25), rgba(232, 160, 140, 0.3)), var(--coral-mist); }

/* =====================================================================
   WATER-SURFACE DIVIDER — between major sections (shows the line where
   surface meets seafloor — a Bright Buoy / Hawaii signal)
   ===================================================================== */
.water-divider {
  display: block;
  height: 140px;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(76, 196, 184, 0.55) 0%, rgba(12, 44, 79, 0.5) 100%),
    url('../images/brand/image40.jpg') center / cover no-repeat;
}
.water-divider::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(254, 252, 247, 0.18) 0%, transparent 50%);
  mix-blend-mode: overlay;
}
.water-divider::after {
  /* The "surface line" caustic — a thin shimmer */
  content: "";
  position: absolute;
  top: 35%; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(254, 252, 247, 0.6), transparent);
  filter: blur(1px);
  animation: surface-shimmer 6s ease-in-out infinite;
}
@keyframes surface-shimmer {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1; }
}

/* =====================================================================
   COLLECTION HERO — show the seafloor texture more prominently
   ===================================================================== */
.collection-hero-photo {
  /* Keep the photo crisper — less scale, more visible seafloor */
  transform: scale(1.02);
}
.collection-hero-photo::before {
  /* Light caustics overlay — only shows on collection hero */
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(254, 252, 247, 0.25) 0%, transparent 40%),
    radial-gradient(ellipse at 70% 70%, rgba(254, 252, 247, 0.2) 0%, transparent 40%);
  mix-blend-mode: overlay;
}

/* ============= "WORN BY WOMEN LIKE YOU" GRID (home) ============= */
.worn-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.worn-tile {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  border-radius: 6px;
  overflow: hidden;
  text-decoration: none;
  color: var(--cream);
  box-shadow: var(--shadow);
}
.worn-tile img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.worn-tile:hover img { transform: scale(1.05); }
.worn-tile::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(12, 44, 79, 0.7) 100%);
  pointer-events: none;
}
.worn-cap {
  position: absolute;
  left: 28px; right: 28px; bottom: 28px;
  z-index: 2;
}
.worn-kicker {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--coral-soft);
  font-weight: 700;
  display: block;
  margin-bottom: 6px;
}
.worn-cap strong {
  font-family: var(--display);
  font-style: italic;
  font-size: 26px;
  color: var(--cream);
  font-weight: 400;
  letter-spacing: -0.01em;
  display: block;
  line-height: 1.05;
}

@media (max-width: 960px) {
  .worn-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .worn-tile:nth-child(3) { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
  .worn-cap { left: 20px; right: 20px; bottom: 20px; }
  .worn-cap strong { font-size: 22px; }
}
@media (max-width: 720px) {
  .worn-grid { grid-template-columns: 1fr; }
  .worn-tile, .worn-tile:nth-child(3) { aspect-ratio: 4 / 5; }
}

/* ============= RESPONSIVE OVERRIDES ============= */
@media (max-width: 1100px) {
  .collections-3up { grid-template-columns: 1fr 1fr; }
  .product-grid { grid-template-columns: repeat(3, 1fr); }
  .lookbook--full { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 240px; }
  .reef-partners { grid-template-columns: 1fr; }
  .reef-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 960px) {
  .page-hero { padding: 80px 0 64px; }
  .collections-3up { grid-template-columns: 1fr; gap: 40px; }
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .lookbook--full { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px; }
  .collection-hero { min-height: 480px; padding: 72px 0; }
  .pdp-grid { grid-template-columns: 1fr; gap: 36px; }
  .pdp-info { position: static; }
  .pdp-specs-grid { grid-template-columns: 1fr; gap: 32px; }
  .pdp-colorway { position: static; }
  .cart-shell { grid-template-columns: 1fr; gap: 32px; }
  .cart-summary { position: static; }
  .policy-grid { grid-template-columns: 1fr; gap: 28px; }
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .collections-mini { grid-template-columns: 1fr; }
  .quiz { padding: 40px 28px 48px; }
}
@media (max-width: 720px) {
  /* The card kept its desktop `200px 1fr` tracks here. 200px photo + 28px gap +
     48px padding leaves under 115px for the text, and a grid track will not
     shrink below its content's min-content width — so the card measured 398px
     inside a 390px viewport and scrolled the whole PAGE sideways, not just
     itself. minmax(0, 1fr) removes that floor; stacking removes the fixed
     column that caused it. */
  .collection-mini { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 16px; }
  .collection-mini-photo { aspect-ratio: 16 / 10; }
  .lookbook--full { grid-template-columns: 1fr; grid-auto-rows: 220px; }
  .product-grid { gap: 14px; }
  .cart-row { grid-template-columns: 90px 1fr; gap: 14px; padding: 14px; }
  .cart-row-photo { width: 90px; }
  .cart-row-price { grid-column: 1 / -1; text-align: left; border-top: 1px solid var(--line); padding-top: 10px; }
  .cart-row-actions { flex-wrap: wrap; gap: 10px; }
  .quiz { padding: 28px 18px 40px; border-radius: 0; box-shadow: none; background: transparent; }
  .quiz-option { grid-template-columns: 48px 1fr; padding: 18px 16px; gap: 14px; }
  .quiz-option-emoji { font-size: 28px; }
  .quiz-option-label { font-size: 17px; }
  .quiz-result-photo { width: 180px; height: 180px; }
  .pdp { padding-top: 24px; }
  .pdp-photo { aspect-ratio: 3 / 4; }
  .pdp-trust li { font-size: 13.5px; }
  .info-cta { padding: 40px 22px; }
  .contact-row { grid-template-columns: 44px 1fr; gap: 14px; padding: 18px 0; }
  .contact-icon { width: 44px; height: 44px; }
  .contact-icon svg { width: 18px; height: 18px; }
  .size-table thead { display: none; }
  .size-table tbody, .size-table tr { display: block; }
  .size-table tbody th { display: block; padding: 16px 0 6px; }
  .size-table tbody td {
    display: flex; justify-content: space-between;
    border-bottom: 0;
    padding: 4px 0;
  }
  .size-table tbody td::before {
    content: attr(data-label);
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 700;
  }
  .size-table tbody tr {
    padding: 14px 16px;
    background: var(--pearl);
    border-radius: 4px;
    margin-bottom: 10px;
  }
}

/* Mobile menu link customization for new nav */
@media (max-width: 960px) {
  body.menu-open .nav-links li {
    border-bottom: none;
  }
}

/* =====================================================================
   V4 — Moonlight (dark) mode, depth gauge, back-to-top, lightbox,
   Journal, recently viewed, animated waves
   ===================================================================== */

/* MOONLIGHT MODE — palette swap via [data-theme="moonlight"] on <html> */
html[data-theme="moonlight"] {
  --pearl:         #0a1c33;
  --pearl-warm:    #0e2440;
  --cream:         #122a4a;
  --sand:          #15315a;
  --blush-mist:    #1c2e4a;
  --blush-soft:    #1f3554;

  --navy:          #f0e8d5;   /* navy becomes pearl/cream */
  --navy-deep:     #faf5ec;
  --navy-soft:     #d4c9a8;

  --ink:           #f5edd9;
  --ink-soft:      #c8bea4;
  --muted:         #8a8268;
  --line:          rgba(232, 211, 173, 0.18);

  --coral:         #f4a895;   /* coral stays warm but pop more on dark */
  --coral-deep:    #fc8b75;
  --coral-soft:    #f5c6b6;
  --coral-mist:    #1f2a3e;

  --champagne:     #e4d3ad;
  --champagne-soft:#f0e0bd;

  color-scheme: dark;
}
html[data-theme="moonlight"] body {
  background: var(--pearl);
  color: var(--ink);
}
html[data-theme="moonlight"] .site-header {
  background: rgba(10, 28, 51, 0.85);
}
html[data-theme="moonlight"] .site-header.is-scrolled {
  background: rgba(10, 28, 51, 0.96);
}
html[data-theme="moonlight"] .marquee { background: var(--pearl-warm); color: var(--ink); }
html[data-theme="moonlight"] .marquee-track span { color: var(--ink); }
html[data-theme="moonlight"] .marquee-track span::after { color: var(--coral); }

html[data-theme="moonlight"] .brand-logo {
  box-shadow: none;
}
html[data-theme="moonlight"] .icon-btn { color: var(--ink); }
html[data-theme="moonlight"] .icon-btn:hover { background: var(--coral-mist); color: var(--coral); }
html[data-theme="moonlight"] .nav-links a { color: var(--ink); }
html[data-theme="moonlight"] .nav-links a:hover { color: var(--coral); }

html[data-theme="moonlight"] .section-pearl { background: var(--pearl); }
html[data-theme="moonlight"] .section-cream { background: var(--cream); }
html[data-theme="moonlight"] .section-warm  { background: var(--blush-mist); }
html[data-theme="moonlight"] .section-sand  { background: var(--sand); }
html[data-theme="moonlight"] .section-pale-pearl { background: var(--pearl-warm); }
html[data-theme="moonlight"] .section-spring { background: var(--cream); }

/* Sun/moon icon toggle */
.moon-btn .moon-icon-sun  { display: none; }
.moon-btn .moon-icon-moon { display: block; }
html[data-theme="moonlight"] .moon-btn .moon-icon-sun  { display: block; }
html[data-theme="moonlight"] .moon-btn .moon-icon-moon { display: none; }

/* Cards stay readable on dark */
html[data-theme="moonlight"] .product-media,
html[data-theme="moonlight"] .col-keys    .product-media,
html[data-theme="moonlight"] .col-manatee .product-media,
html[data-theme="moonlight"] .col-coral   .product-media {
  background: linear-gradient(180deg, rgba(76, 196, 184, 0.18), rgba(0, 0, 0, 0.45)), var(--cream);
}
html[data-theme="moonlight"] .pdp-photo {
  background: linear-gradient(180deg, rgba(76, 196, 184, 0.16), rgba(0, 0, 0, 0.5)), var(--cream);
}
html[data-theme="moonlight"] .product-media img,
html[data-theme="moonlight"] .pdp-photo img {
  mix-blend-mode: normal;   /* multiply doesn't work on dark backdrops */
}
html[data-theme="moonlight"] .product-media::after,
html[data-theme="moonlight"] .pdp-photo::after {
  background: linear-gradient(150deg, rgba(244, 168, 149, 0.18) 0%, transparent 30%, transparent 70%, rgba(0, 0, 0, 0.3) 100%);
}

/* Buttons in moonlight */
html[data-theme="moonlight"] .btn-primary {
  background: var(--coral);
  color: var(--pearl);
  box-shadow: 0 12px 32px rgba(244, 168, 149, 0.35);
}
html[data-theme="moonlight"] .btn-primary:hover {
  background: var(--coral-deep);
  color: var(--pearl);
}
html[data-theme="moonlight"] .btn-outline {
  border-color: var(--ink);
  color: var(--ink);
}
html[data-theme="moonlight"] .btn-outline:hover {
  background: var(--coral);
  color: var(--pearl);
  border-color: var(--coral);
}

html[data-theme="moonlight"] .hero-floating-stamp { background: var(--cream); }
html[data-theme="moonlight"] .hero-badge { background: var(--cream); }
html[data-theme="moonlight"] .hero-badge strong { color: var(--ink); }

html[data-theme="moonlight"] .crumbs { background: var(--cream); border-color: var(--line); }
html[data-theme="moonlight"] .info-cta { background: var(--cream); }

/* Page-hero veil shifts darker so photos still feel like night */
html[data-theme="moonlight"] .page-hero-veil {
  background: linear-gradient(180deg, rgba(10, 28, 51, 0.65) 0%, rgba(10, 28, 51, 0.92) 100%);
}

/* Forms */
html[data-theme="moonlight"] .newsletter-form,
html[data-theme="moonlight"] .future-form,
html[data-theme="moonlight"] .cart-reserve input,
html[data-theme="moonlight"] .form-field input,
html[data-theme="moonlight"] .form-field select,
html[data-theme="moonlight"] .form-field textarea {
  background: var(--cream);
  border-color: var(--line);
  color: var(--ink);
}
html[data-theme="moonlight"] .newsletter-form input,
html[data-theme="moonlight"] .future-form input,
html[data-theme="moonlight"] .cart-reserve input { background: transparent; color: var(--ink); }
html[data-theme="moonlight"] .newsletter-form input::placeholder,
html[data-theme="moonlight"] .future-form input::placeholder,
html[data-theme="moonlight"] .cart-reserve input::placeholder { color: rgba(245, 237, 217, 0.5); }

html[data-theme="moonlight"] .reef-partner { background: var(--cream); border-top-color: var(--coral); }
html[data-theme="moonlight"] .reef-partner h3 { color: var(--ink); }
html[data-theme="moonlight"] .reef-partner-tag { color: var(--coral-soft); }
html[data-theme="moonlight"] .size-table-wrap,
html[data-theme="moonlight"] .policy-card,
html[data-theme="moonlight"] .contact-form-wrap,
html[data-theme="moonlight"] .cart-summary,
html[data-theme="moonlight"] .cart-row,
html[data-theme="moonlight"] .cart-empty,
html[data-theme="moonlight"] .quiz,
html[data-theme="moonlight"] .gear-item,
html[data-theme="moonlight"] .pdp-colorway,
html[data-theme="moonlight"] .future-card {
  background: var(--cream);
  color: var(--ink);
}

/* Footer stays navy in light mode → flips to a deeper pearl-warm */
html[data-theme="moonlight"] .foot { background: var(--pearl-warm); }
html[data-theme="moonlight"] .foot-bottom { border-color: rgba(245, 237, 217, 0.08); }

/* Soft glow for the moon icon when active */
html[data-theme="moonlight"] .moon-btn { color: var(--champagne); }

/* =====================================================================
   DEPTH GAUGE — fixed right side, looks like a dive depth meter
   ===================================================================== */
.depth-gauge {
  position: fixed;
  top: 50%;
  right: 22px;
  transform: translateY(-50%);
  z-index: 50;
  width: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease;
}
.depth-gauge.is-on { opacity: 1; }
.depth-gauge-track {
  position: relative;
  width: 4px;
  height: 160px;
  background: rgba(12, 44, 79, 0.12);
  border-radius: 2px;
  border-top: 1px solid rgba(12, 44, 79, 0.18);
  border-bottom: 1px solid rgba(12, 44, 79, 0.18);
}
html[data-theme="moonlight"] .depth-gauge-track {
  background: rgba(244, 168, 149, 0.15);
  border-color: rgba(244, 168, 149, 0.25);
}
.depth-gauge-mark {
  position: absolute;
  top: var(--m);
  left: 50%;
  transform: translate(-50%, -50%);
  width: 12px; height: 1px;
  background: rgba(12, 44, 79, 0.4);
}
html[data-theme="moonlight"] .depth-gauge-mark { background: rgba(244, 168, 149, 0.5); }
.depth-gauge-mark i {
  position: absolute;
  right: 18px;
  top: -7px;
  font-family: var(--sans);
  font-size: 9px;
  font-style: normal;
  letter-spacing: 0.12em;
  color: rgba(12, 44, 79, 0.45);
  white-space: nowrap;
}
html[data-theme="moonlight"] .depth-gauge-mark i { color: rgba(244, 168, 149, 0.6); }
.depth-gauge-fill {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 0;
  background: linear-gradient(180deg, var(--coral), var(--navy));
  border-radius: 2px;
  transition: height .15s ease-out;
}
html[data-theme="moonlight"] .depth-gauge-fill {
  background: linear-gradient(180deg, var(--coral), var(--champagne));
}
.depth-gauge-needle {
  position: absolute;
  left: 100%;
  top: 0;
  transform: translate(2px, -50%);
  color: var(--coral);
  transition: top .15s ease-out;
}
.depth-gauge-needle svg { width: 14px; height: 14px; display: block; }
.depth-gauge-label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--navy);
  margin-top: 4px;
}
html[data-theme="moonlight"] .depth-gauge-label { color: var(--ink); }
@media (max-width: 960px) {
  .depth-gauge { display: none; }
}

/* =====================================================================
   BACK-TO-TOP MERMAID
   ===================================================================== */
.to-top-mermaid {
  position: fixed;
  bottom: 28px; right: 22px;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--coral);
  color: var(--cream);
  border: 0;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 32px rgba(237, 115, 99, 0.4);
  z-index: 90;
  opacity: 0;
  transform: translateY(40px) scale(0.6);
  transition: opacity .4s ease, transform .4s cubic-bezier(0.16, 1, 0.3, 1), background .3s ease;
}
.to-top-mermaid.is-on {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.to-top-mermaid:hover { background: var(--navy); transform: translateY(-4px) scale(1.05); }
.to-top-mermaid svg { width: 30px; height: 30px; }
.to-top-bubbles {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle at 30% 30%, rgba(254,252,247,0.4), transparent 40%);
}
@media (max-width: 720px) {
  .to-top-mermaid { width: 50px; height: 50px; bottom: 20px; right: 16px; }
  .to-top-mermaid svg { width: 26px; height: 26px; }
}

/* Burst bubbles (logo easter egg + back-to-top click) */
.fm-burst-bubble {
  position: fixed;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(254,252,247,0.95), rgba(76, 196, 184, 0.4) 70%, transparent);
  border: 1px solid rgba(254, 252, 247, 0.7);
  pointer-events: none;
  z-index: 9999;
  animation: bubble-burst 1.6s cubic-bezier(0.2, 0.7, 0.4, 1) forwards;
}
@keyframes bubble-burst {
  0%   { transform: translate(0, 0) scale(0.4); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translate(var(--dx, 0), var(--dy, -160px)) scale(1); opacity: 0; }
}

/* =====================================================================
   ANIMATED WAVE FOOTER DIVIDER
   ===================================================================== */
.foot-wave-wrap {
  display: block;
  position: relative;
  line-height: 0;
  pointer-events: none;
  margin-top: -1px;
}
.foot-wave-svg {
  display: block;
  width: 100%;
  height: 120px;
}
.foot-wave-svg .wave-back { animation: wave-drift 11s ease-in-out infinite; transform-origin: center; }
.foot-wave-svg .wave-mid  { animation: wave-drift 8s ease-in-out infinite reverse; }
.foot-wave-svg .wave-front { animation: wave-drift 6s ease-in-out infinite; }
@keyframes wave-drift {
  0%, 100% { transform: translateX(0) scaleY(1); }
  50%      { transform: translateX(-30px) scaleY(1.06); }
}
html[data-theme="moonlight"] .foot-wave-svg .wave-back  { fill: var(--pearl-warm); }
html[data-theme="moonlight"] .foot-wave-svg .wave-mid   { fill: var(--pearl-warm); }
html[data-theme="moonlight"] .foot-wave-svg .wave-front { fill: var(--pearl-warm); }

/* =====================================================================
   PDP GALLERY + LIGHTBOX
   ===================================================================== */
.pdp-photo { cursor: zoom-in; position: relative; }
.pdp-photo img { transition: opacity .25s ease, filter .3s ease; }
.pdp-photo img.is-swapping { opacity: 0; }
.pdp-zoom {
  position: absolute;
  top: 14px; right: 14px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--cream);
  color: var(--navy);
  border: 0;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm);
  z-index: 3;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity .3s ease, transform .3s ease, background .3s ease;
}
.pdp-photo:hover .pdp-zoom { opacity: 1; transform: scale(1); }
.pdp-zoom:hover { background: var(--coral); color: var(--cream); }
.pdp-zoom svg { width: 18px; height: 18px; }

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(6, 27, 52, 0.92);
  z-index: 9000;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 60px 24px 28px;
  opacity: 0;
  transition: opacity .25s ease;
}
.lightbox.is-on { opacity: 1; }
.lightbox img {
  max-width: min(86vw, 800px);
  max-height: 70vh;
  object-fit: contain;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  border-radius: 4px;
}
.lightbox-close {
  position: absolute;
  top: 18px; right: 22px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(254, 252, 247, 0.1);
  color: var(--cream);
  border: 0;
  cursor: pointer;
  font-size: 26px;
  line-height: 1;
}
.lightbox-close:hover { background: var(--coral); }
.lightbox-thumbs {
  display: flex; gap: 10px;
  margin-top: 28px;
}
.lightbox-thumb {
  width: 70px; height: 70px;
  border-radius: 4px;
  background-size: cover;
  background-position: center;
  border: 2px solid transparent;
  cursor: pointer;
}
.lightbox-thumb.is-active { border-color: var(--coral); }
.lightbox-thumb:hover { border-color: var(--coral-soft); }

/* =====================================================================
   RECENTLY VIEWED + COMPLETE-THE-LOOK
   ===================================================================== */
.recently-viewed-section.is-hidden { display: none; }
.recently-viewed {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.rv-card {
  display: block;
  text-decoration: none;
  color: var(--ink);
  transition: transform .4s ease;
}
.rv-card:hover { transform: translateY(-4px); }
.rv-photo {
  display: block;
  aspect-ratio: 3 / 4;
  background: var(--blush-mist);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 14px;
}
.rv-photo img { width: 100%; height: 100%; object-fit: cover; }
.rv-meta { display: block; }
.rv-col {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  display: block;
  margin-bottom: 4px;
}
.rv-meta strong {
  font-family: var(--display);
  font-style: italic;
  font-size: 20px;
  color: var(--navy);
  display: block;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin-bottom: 6px;
}
.rv-kicker {
  font-family: var(--body);
  font-style: italic;
  font-size: 13px;
  color: var(--ink-soft);
}

/* =====================================================================
   JOURNAL
   ===================================================================== */
.journal-featured {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 48px;
  background: var(--cream);
  border-radius: 6px;
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  transition: box-shadow .5s ease, transform .5s ease;
}
.journal-featured:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.journal-featured-photo {
  aspect-ratio: 3 / 2;
  overflow: hidden;
}
.journal-featured-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.journal-featured:hover .journal-featured-photo img { transform: scale(1.04); }
.journal-featured-body {
  padding: 48px 56px;
  display: flex; flex-direction: column; justify-content: center;
}
.journal-featured-body h2 {
  font-size: clamp(32px, 4vw, 56px);
  margin: 14px 0 18px;
  line-height: 1.05;
  font-style: italic;
}
.journal-featured-body h2 em { color: var(--coral); }
.journal-featured-body p {
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  margin: 0 0 18px;
}
.journal-meta {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  display: block;
  margin-bottom: 16px;
}

.journal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.journal-card {
  display: block;
  text-decoration: none;
  color: var(--ink);
  background: transparent;
  transition: transform .4s ease;
}
.journal-card:hover { transform: translateY(-4px); }
.journal-card-photo {
  aspect-ratio: 4 / 3;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 22px;
  background: var(--blush-mist);
}
.journal-card-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.journal-card:hover .journal-card-photo img { transform: scale(1.05); }
.journal-card-body { padding: 0 4px; }
.journal-kicker {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--coral);
  font-weight: 700;
}
.journal-card h3 {
  font-family: var(--display);
  font-style: italic;
  font-size: 26px;
  margin: 10px 0 14px;
  line-height: 1.1;
  font-weight: 400;
  color: var(--navy);
}
.journal-card h3 em { color: var(--coral); }
.journal-card p {
  font-family: var(--body);
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 14px;
}

/* Post page */
.post-hero {
  position: relative;
  min-height: 480px;
  display: flex; align-items: center;
  padding: 96px 0;
  isolation: isolate;
  color: var(--cream);
  overflow: hidden;
}
.post-hero-photo {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  z-index: -2;
  transform: scale(1.04);
}
.post-hero-veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12, 44, 79, 0.4) 0%, rgba(12, 44, 79, 0.78) 100%);
  z-index: -1;
}
.post-hero-inner {
  max-width: 880px;
  text-align: center;
  margin: 0 auto;
}
.post-hero h1 {
  font-size: clamp(40px, 6vw, 88px);
  color: var(--cream);
  margin: 0 0 24px;
  line-height: 1.05;
  font-style: italic;
}
.post-hero h1 em { color: var(--coral-soft); }
.post-hero .chapter { color: var(--coral-soft); margin-bottom: 22px; display: inline-block; }
.post-hero .chapter::before { background: var(--coral-soft); }
.post-hero-meta {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(254, 252, 247, 0.7);
  font-weight: 600;
}

.post-body-section { padding-top: 96px; }
.post-body {
  max-width: 720px;
  margin: 0 auto;
}
.post-lede {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.35;
  color: var(--navy);
  margin: 0 0 56px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line);
}
.post-body h2 {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 400;
  margin: 64px 0 24px;
  color: var(--coral);
  line-height: 1.1;
}
.post-body p {
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.75;
  color: var(--ink);
  margin: 0 0 24px;
}
.post-body p.dropcap::first-letter {
  font-size: 4.6em;
  line-height: 0.9;
  padding: 4px 14px 0 0;
}
.post-signature {
  margin-top: 80px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
  text-align: center;
}
.post-signature-script {
  font-family: var(--script);
  font-size: 38px;
  color: var(--coral);
  display: inline-block;
  transform: rotate(-2deg);
  line-height: 1;
}

/* =====================================================================
   RESPONSIVE — v4 elements
   ===================================================================== */
@media (max-width: 1100px) {
  .recently-viewed { grid-template-columns: repeat(3, 1fr); }
  .journal-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 960px) {
  .recently-viewed { grid-template-columns: repeat(2, 1fr); }
  .journal-featured { grid-template-columns: 1fr; gap: 0; }
  .journal-featured-body { padding: 36px 28px; }
  .journal-grid { grid-template-columns: 1fr; }
  .post-hero { padding: 64px 0; min-height: 360px; }
  .post-body-section { padding-top: 56px; }
  .lightbox-thumb { width: 56px; height: 56px; }
}
@media (max-width: 720px) {
  .recently-viewed { grid-template-columns: 1fr 1fr; gap: 14px; }
  .rv-meta strong { font-size: 16px; }
  .pdp-zoom { display: none; }
  .post-body h2 { margin: 40px 0 16px; }
  .post-body p { font-size: 16.5px; }
  .post-lede { font-size: 20px; margin-bottom: 36px; }
}

/* =====================================================================
   V5 — BRIGHT BUOY STYLE PIVOT
   White backgrounds, bold sans-serif display, italic accent words only,
   full-bleed photo banners, 4-column product grid, generous whitespace
   ===================================================================== */

.bb-container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 40px;
}
@media (max-width: 720px) { .bb-container { padding: 0 20px; } }

/* === VIDEO HERO === */
.vhero {
  position: relative;
  height: calc(100vh - 80px);
  min-height: 600px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  text-align: center;
  /* Hard fallback so headline NEVER lands on a light background if video fails */
  background-color: #0c2c4f;
  background-image: url('../images/snorkeling/hero-poster.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.vhero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  background: #0c2c4f;
}
.vhero-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12, 44, 79, 0.45) 0%, rgba(12, 44, 79, 0.35) 40%, rgba(12, 44, 79, 0.65) 100%);
  z-index: 1;
}
.vhero-inner {
  position: relative;
  z-index: 2;
  max-width: 880px;
  padding: 0 32px;
  animation: vhero-rise 1.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes vhero-rise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.vhero-kicker {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(254, 252, 247, 0.85);
  margin-bottom: 28px;
  padding: 8px 18px;
  border: 1px solid rgba(254, 252, 247, 0.4);
  border-radius: 999px;
  backdrop-filter: blur(6px);
  background: rgba(254, 252, 247, 0.08);
}
.vhero-title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(48px, 8vw, 116px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.025em;
  margin: 0 0 28px;
  color: #ffffff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55), 0 6px 40px rgba(0, 0, 0, 0.4);
}
.vhero-title em {
  font-family: 'DM Serif Display', serif;
  font-style: italic;
  font-weight: 400;
  color: #ffb4a4;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
}
/* Hero subline in the brand's own script face.
   Was Inter 500 — correct and completely characterless under a headline that
   sets its tone with DM Serif italic. Caveat is already loaded and already
   carries the hand-drawn side of this brand elsewhere on the site, so this
   costs nothing to load and ties the hero to the identity rather than
   introducing a fourth voice.

   Sized up hard (26-34px against the old 16-19px) because a script face at
   body size is both illegible and looks like a mistake; at this size it reads
   as a deliberate hand. The shadow is heavier than the old one for the same
   reason — script strokes are thin, and this sits over moving video where a
   pale frame can swallow them. */
.vhero-sub {
  font-family: var(--script);
  font-size: clamp(26px, 3.2vw, 34px);
  line-height: 1.3;
  max-width: 620px;
  margin: 0 auto 40px;
  color: #ffffff;
  font-weight: 600;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.62), 0 1px 3px rgba(0, 0, 0, 0.4);
}
.vhero-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.vhero-scroll {
  position: absolute;
  bottom: 32px; left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: rgba(254, 252, 247, 0.78);
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  text-decoration: none;
  animation: scroll-bounce 2.4s ease-in-out infinite;
}
.vhero-scroll svg { width: 18px; height: 18px; }
@keyframes scroll-bounce {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 8px); }
}
@media (max-width: 720px) {
  .vhero { height: 85vh; min-height: 520px; }
  .vhero-title { font-size: clamp(42px, 12vw, 64px); }
}

/* === BUTTONS === */
.bb-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 16px 32px;
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 6px;
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.2s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.bb-btn:active { transform: translateY(1px); }
.bb-btn--primary { background: var(--coral); color: var(--cream); border-color: var(--coral); }
.bb-btn--primary:hover { background: var(--coral-deep); border-color: var(--coral-deep); color: var(--cream); }
.bb-btn--ghost { background: transparent; color: var(--cream); border-color: var(--cream); }
.bb-btn--ghost:hover { background: var(--cream); color: var(--navy); }
.bb-btn--cream { background: var(--cream); color: var(--navy); border-color: var(--cream); }
.bb-btn--cream:hover { background: var(--coral); color: var(--cream); border-color: var(--coral); }
.bb-btn--coral { background: var(--coral); color: var(--cream); border-color: var(--coral); }
.bb-btn--coral:hover { background: var(--cream); color: var(--navy); border-color: var(--cream); }

/* === PROMISES (clean strip) === */
.bb-promises {
  background: #fff;
  padding: 28px 0;
  border-bottom: 1px solid #ece5d6;
}
.bb-promises .bb-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  align-items: center;
}
.bb-promise { text-align: center; display: flex; flex-direction: column; gap: 4px; }
.bb-promise strong {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: -0.005em;
}
.bb-promise span {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
@media (max-width: 720px) {
  .bb-promises .bb-container { grid-template-columns: 1fr 1fr; gap: 18px; }
}

/* === GENERIC SECTION === */
.bb-section { padding: 120px 0; position: relative; }
.bb-section--white   { background: #ffffff;        color: #1a1d2e; }
.bb-section--cream   { background: #faf5ec;        color: #1a1d2e; }
.bb-section--navy    { background: #0c2c4f;        color: #faf5ec; }
/* Cherry Blossom section variants — verified for AA/AAA contrast on text:
   - --blossom-mist (#fdedf2)  + navy text: ~14:1  AAA
   - --blossom-soft (#fce0e8) + navy text: ~12:1  AAA
   - --blossom      (#f8b6c8) + navy text: ~7.4:1 AAA on normal, AA+ on large */
.bb-section--blossom-mist { background: #fdedf2; color: #1a1d2e; }
.bb-section--blossom-soft { background: #fce0e8; color: #1a1d2e; }
.bb-section--blossom      { background: #f8b6c8; color: #0c2c4f; }
/* Eyebrows + chapter eyebrows must override the V11 pink tone — pink on pink
   is invisible. Inside any pink section, eyebrows go coral-deep (still ~4.7:1
   on the soft tones, AAA on the mist tone). */
.bb-section--blossom-mist .bb-eyebrow,
.bb-section--blossom-soft .bb-eyebrow,
.bb-section--blossom-mist .chapter,
.bb-section--blossom-soft .chapter { color: #d65645; }
.bb-section--blossom .bb-eyebrow,
.bb-section--blossom .chapter      { color: #0c2c4f; }
.bb-section--white .bb-h2,
.bb-section--cream .bb-h2,
.bb-section--blossom-mist .bb-h2,
.bb-section--blossom-soft .bb-h2,
.bb-section--blossom .bb-h2 { color: #0c2c4f; }
.bb-section--white .bb-lede,
.bb-section--cream .bb-lede,
.bb-section--blossom-mist .bb-lede,
.bb-section--blossom-soft .bb-lede { color: #4f5663; }
/* Pure pink section: use a darker ink-soft so the lede still reads (4f5663 on
   #f8b6c8 is only 3.7:1 — promote to deep navy for body comfort). */
.bb-section--blossom .bb-lede { color: #1d4a73; }
/* Eyebrow tag in pure-pink sections — coral-deep gives a richer accent that
   reads cleanly against the pink (coral on pink fights itself). */
.bb-section--blossom .bb-eyebrow,
.bb-section--blossom .chapter { color: #0c2c4f; }
/* Links inside pink sections stay coral-deep — that's the readable accent on pink. */
.bb-section--blossom a:not(.bb-btn):not(.btn),
.bb-section--blossom-soft a:not(.bb-btn):not(.btn) { color: #d65645; }
.bb-section--blossom a:not(.bb-btn):not(.btn):hover,
.bb-section--blossom-soft a:not(.bb-btn):not(.btn):hover { color: #0c2c4f; }
@media (max-width: 720px) { .bb-section { padding: 80px 0; } }

/* === SECTION HEAD === */
.bb-head { text-align: center; max-width: 720px; margin: 0 auto 64px; }
.bb-eyebrow {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--coral);
  margin-bottom: 18px;
}
.bb-eyebrow--light { color: var(--coral-soft); }
.bb-h2 {
  font-family: 'Inter', sans-serif;
  font-size: clamp(36px, 5.5vw, 76px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--navy);
  margin: 0 0 20px;
}
.bb-h2 em {
  font-family: 'DM Serif Display', serif;
  font-style: italic;
  font-weight: 400;
  color: var(--coral);
}
.bb-h2--light { color: var(--cream); }
.bb-h2--light em { color: var(--coral-soft); }
.bb-lede {
  font-family: 'Inter', sans-serif;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
}
.bb-lede--light { color: rgba(254, 252, 247, 0.88); }

/* === 3-UP COLLECTION CARDS === */
.bb-3up {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.bb-coll-card {
  display: block;
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.bb-coll-card:hover { transform: translateY(-6px); box-shadow: 0 24px 60px rgba(12, 44, 79, 0.16); }
.bb-coll-photo {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
}
.bb-coll-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.bb-coll-card:hover .bb-coll-photo img { transform: scale(1.05); }
.bb-coll-number {
  position: absolute;
  top: 16px; left: 16px;
  background: var(--cream);
  color: var(--navy);
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  padding: 6px 12px;
  border-radius: 999px;
  text-transform: uppercase;
}
.bb-coll-body {
  padding: 28px 28px 32px;
}
.bb-coll-body small {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--coral);
  display: block;
  margin-bottom: 10px;
}
.bb-coll-body h3 {
  font-family: 'Inter', sans-serif;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin: 0 0 10px;
  line-height: 1;
}
.bb-coll-body p {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 18px;
}
.bb-coll-cta {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--coral);
  border-bottom: 1.5px solid var(--coral);
  padding-bottom: 4px;
  transition: gap 0.3s ease;
}
.bb-coll-card:hover .bb-coll-cta { color: var(--navy); border-bottom-color: var(--navy); }
@media (max-width: 960px) { .bb-3up { grid-template-columns: 1fr; gap: 32px; } }

/* === CINEMATIC FULL-BLEED BANNER === */
.cine-banner {
  position: relative;
  min-height: 720px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #061b34;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #faf5ec;
  padding: 120px 0;
  overflow: hidden;
  text-align: center;
  isolation: isolate;
}
/* Vignette veil: darker at the edges to give the headline a halo, never opaque enough to hide the photo */
.cine-veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(6, 27, 52, 0.42) 0%, rgba(6, 27, 52, 0.66) 55%, rgba(6, 27, 52, 0.86) 100%),
    linear-gradient(180deg, rgba(6, 27, 52, 0.2) 0%, transparent 30%, transparent 70%, rgba(6, 27, 52, 0.45) 100%);
  z-index: 1;
}
/* Subtle grain so the dark passages aren't a flat fill */
.cine-grain {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.18 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
  opacity: 0.45;
}
.cine-inner {
  position: relative;
  z-index: 3;
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cine-kicker {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: #ffb4a4;
  padding: 7px 18px;
  border: 1px solid rgba(255, 180, 164, 0.5);
  border-radius: 999px;
  margin-bottom: 32px;
  backdrop-filter: blur(6px);
  background: rgba(254, 252, 247, 0.06);
}
.cine-stat {
  display: block;
  font-family: 'DM Serif Display', serif;
  font-style: italic;
  font-size: clamp(140px, 22vw, 280px);
  line-height: 0.85;
  color: #ffb4a4;
  letter-spacing: -0.04em;
  font-weight: 400;
  margin-bottom: 10px;
  text-shadow: 0 6px 40px rgba(0, 0, 0, 0.45);
}
.cine-stat span {
  font-size: 0.45em;
  vertical-align: 35%;
  margin-left: -0.1em;
  font-style: normal;
}
.cine-stat-label {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(254, 252, 247, 0.8);
  display: block;
  margin-bottom: 36px;
  max-width: 380px;
}
.cine-h2 {
  font-family: 'Inter', sans-serif;
  font-size: clamp(36px, 5.4vw, 78px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: #ffffff;
  margin: 0 0 24px;
  text-shadow: 0 3px 22px rgba(0, 0, 0, 0.55), 0 8px 40px rgba(0, 0, 0, 0.35);
}
.cine-h2 em {
  font-family: 'DM Serif Display', serif;
  font-style: italic;
  font-weight: 400;
  color: #ffb4a4;
  letter-spacing: -0.01em;
}
/* Same treatment as .vhero-sub, and for the same reason.
   These four subtitles sit inside the full-bleed cinematic bands — Reef
   Project, Our Story, Fully Coordinated — which are the emotional beats of the
   page rather than its functional copy. They were Inter, so a band that opens
   with a serif headline over video dropped straight into the same neutral sans
   used for shipping tables.

   Deliberately NOT applied to .bb-lede: those are the section intros on light
   backgrounds ("The pieces our pre-order list keeps coming back for"), which
   are read rather than felt. Script there would cost legibility and buy
   nothing. The line is cinematic bands get the hand, working copy does not.

   A little smaller than the hero — these are secondary beats and should not
   compete with it. */
.cine-sub {
  font-family: var(--script);
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 600;
  line-height: 1.35;
  color: rgba(254, 252, 247, 0.96);
  margin: 0 0 40px;
  max-width: 600px;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.58), 0 1px 3px rgba(0, 0, 0, 0.38);
}
.cine-cta {
  font-size: 13px;
  padding: 18px 36px;
  letter-spacing: 0.22em;
}

/* Page-hero variant — slightly tighter so it doesn't dominate the whole page */
.cine-banner--page { min-height: 580px; padding: 96px 0 80px; }
.cine-h2--page { font-size: clamp(36px, 4.8vw, 72px); }
.cine-banner--page .cine-stat { font-size: clamp(120px, 18vw, 220px); }
.cine-banner--page .cine-stat-label { margin-bottom: 28px; }

/* Slight vignette-position shift per banner so they don't all look identical */
.cine-banner--story .cine-veil {
  background:
    radial-gradient(ellipse at 60% 50%, rgba(6, 27, 52, 0.4) 0%, rgba(6, 27, 52, 0.7) 60%, rgba(6, 27, 52, 0.88) 100%),
    linear-gradient(180deg, rgba(6, 27, 52, 0.2) 0%, transparent 30%, transparent 70%, rgba(6, 27, 52, 0.45) 100%);
}
.cine-banner--gear .cine-veil {
  background:
    radial-gradient(ellipse at center, rgba(6, 27, 52, 0.45) 0%, rgba(6, 27, 52, 0.7) 55%, rgba(6, 27, 52, 0.9) 100%),
    linear-gradient(0deg, rgba(6, 27, 52, 0.4) 0%, transparent 30%);
}

@media (max-width: 960px) {
  .cine-banner { min-height: 580px; padding: 80px 0; }
  .cine-stat { margin-bottom: 4px; }
  .cine-stat-label { margin-bottom: 28px; max-width: 320px; }
  .cine-h2 { margin-bottom: 18px; }
  .cine-sub { margin-bottom: 28px; }
}
@media (max-width: 720px) {
  .cine-banner { min-height: 540px; padding: 64px 0; }
  .cine-stat { font-size: clamp(110px, 28vw, 180px); }
  .cine-stat-label { font-size: 11px; letter-spacing: 0.28em; }
  .cine-kicker { font-size: 10px; padding: 6px 14px; margin-bottom: 22px; }
  .cine-h2 { font-size: clamp(32px, 8vw, 52px); }
  .cine-cta { padding: 16px 28px; font-size: 12px; }
}

/* === WORN BY GRID === */
.bb-worn-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.bb-worn-tile {
  position: relative;
  display: block;
  aspect-ratio: 1/1;
  overflow: hidden;
  border-radius: 6px;
  text-decoration: none;
  color: var(--cream);
  background: var(--navy-soft);
}
.bb-worn-tile img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.bb-worn-tile:hover img { transform: scale(1.06); }
.bb-worn-tile::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(12, 44, 79, 0.65) 100%);
}
.bb-worn-cap {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 1;
}
.bb-worn-cap small {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--coral-soft);
  display: block;
  margin-bottom: 6px;
}
.bb-worn-cap strong {
  font-family: 'Inter', sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--cream);
  display: block;
  line-height: 1.05;
}
@media (max-width: 720px) { .bb-worn-grid { grid-template-columns: 1fr 1fr; gap: 12px; } }

/* === FUTURE CARD === */
.bb-future {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 16px 50px rgba(12, 44, 79, 0.08);
}
.bb-future-photo { position: relative; min-height: 420px; }
.bb-future-photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.bb-future-text {
  padding: 64px 56px;
  display: flex; flex-direction: column; justify-content: center;
}
.bb-future-text h3 { font-size: clamp(32px, 4vw, 56px); margin: 14px 0 16px; }
.bb-future-text p {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 28px;
}
@media (max-width: 960px) {
  .bb-future { grid-template-columns: 1fr; }
  .bb-future-text { padding: 40px 28px; }
}

/* === FORMS === */
.bb-form {
  display: flex;
  gap: 8px;
  max-width: 480px;
}
.bb-form input {
  flex: 1;
  padding: 16px 18px;
  border: 1.5px solid #ece5d6;
  border-radius: 6px;
  background: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  color: var(--ink);
  outline: none;
  transition: border-color 0.2s ease;
}
.bb-form input:focus { border-color: var(--coral); }
.bb-form button { padding: 16px 28px; flex-shrink: 0; }
.bb-form--large { max-width: 560px; margin: 0 auto; }
.bb-form--large input { padding: 18px 22px; font-size: 16px; }
.bb-form--large button { padding: 18px 32px; }
@media (max-width: 720px) {
  .bb-form { flex-direction: column; max-width: 100%; }
  .bb-form input, .bb-form button { width: 100%; }
}

/* === NEWSLETTER (in navy section) === */
.bb-newsletter { text-align: center; max-width: 720px; margin: 0 auto; }
.bb-newsletter .bb-h2 { margin-bottom: 18px; }
.bb-newsletter .bb-lede { margin-bottom: 36px; }
.bb-newsletter .bb-form input { background: rgba(254, 252, 247, 0.08); border-color: rgba(254, 252, 247, 0.18); color: var(--cream); }
.bb-newsletter .bb-form input::placeholder { color: rgba(254, 252, 247, 0.5); }
.bb-newsletter .bb-form input:focus { border-color: var(--coral); background: rgba(254, 252, 247, 0.12); }
.bb-fineprint {
  display: inline-block;
  margin-top: 22px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(254, 252, 247, 0.5);
}

/* === STRIPS — OVERRIDE EDITORIAL DECORATION ON HOME === */
body[data-page="home"] .marquee { display: none; }
body[data-page="home"] .promo-bar { display: none; }
body[data-page="home"] .water-divider { display: none; }
/* Home nav stays opaque cream (same as every other page) so the logo
   and links always have contrast. The video hero sits cleanly below it. */

/* =====================================================================
   V6 — PREMIUM POLISH
   Promo bar, best-sellers grid, brand values, animated counters, press
   strip, hero stagger + parallax, scroll-triggered reveals.
   ===================================================================== */

/* === PROMO TOP BAR === */
.promo-bar {
  background: #0c2c4f;
  color: #faf5ec;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.promo-bar-inner {
  position: relative;
  width: 100%;
  text-align: center;
  height: 38px;
}
.promo-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 16px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .5s ease, transform .5s ease;
  pointer-events: none;
  padding: 0 24px;
}
.promo-slide.is-active { opacity: 1; transform: translateY(0); pointer-events: auto; }
/* The single flex item holding the slide's text — see the note in header.php. */
.promo-text { white-space: nowrap; }
.promo-slide strong { color: #f4a895; font-weight: 700; }
.promo-slide a {
  color: #faf5ec;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
}
.promo-slide a:hover { color: #f4a895; }
@media (max-width: 720px) {
  .promo-bar { font-size: 11px; }
  .promo-slide { padding: 0 14px; }
}

/* === HERO STAGGER WORDS + CURSOR PARALLAX === */
.vhero-inner {
  --tx: 0px;
  --ty: 0px;
  transform: translate(var(--tx), var(--ty));
  transition: transform .8s cubic-bezier(0.16, 1, 0.3, 1);
}
.vhero-kicker,
.vhero-sub,
.vhero-cta {
  opacity: 0;
  transform: translateY(16px);
  animation: vhero-fade .9s cubic-bezier(0.16, 1, 0.3, 1) var(--d, 0s) forwards;
}
@keyframes vhero-fade {
  to { opacity: 1; transform: translateY(0); }
}
.vhero-title {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 0.28em;
  line-height: 0.95;
}
.vhero-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(28px);
  animation: vhero-word-in 1s cubic-bezier(0.16, 1, 0.3, 1) var(--d, 0s) forwards;
}
.vhero-word--em {
  font-family: 'DM Serif Display', serif;
  font-style: italic;
  font-weight: 400;
  color: #ffb4a4;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
}
.vhero-break { flex-basis: 100%; height: 0; }
@keyframes vhero-word-in {
  to { opacity: 1; transform: translateY(0); }
}

/* === BEST SELLERS GRID === */
.bb-best-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-bottom: 56px;
}
.bb-best-card {
  display: block;
  text-decoration: none;
  color: #1a1d2e;
  transition: transform .35s ease;
}
.bb-best-card:hover { transform: translateY(-6px); }
.bb-best-photo {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  border-radius: 4px;
  background: #fdedf2;
  margin-bottom: 18px;
}
.bb-best-photo-a,
.bb-best-photo-b {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: opacity .6s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.bb-best-photo-a { z-index: 2; opacity: 1; }
.bb-best-photo-b { z-index: 1; opacity: 0; transform: scale(1.05); }
.bb-best-card:hover .bb-best-photo-a { opacity: 0; transform: scale(1.04); }
.bb-best-card:hover .bb-best-photo-b { opacity: 1; transform: scale(1); }
.bb-best-flag {
  position: absolute;
  top: 14px; left: 14px;
  background: #0c2c4f;
  color: #faf5ec;
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  z-index: 3;
}
.bb-best-flag--bundle {
  background: #0c2c4f;
  color: #f4a895;
}
.bb-best-quick {
  position: absolute;
  bottom: 14px; left: 14px; right: 14px;
  background: #ffffff;
  color: #0c2c4f;
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 12px;
  text-align: center;
  border-radius: 4px;
  z-index: 3;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .35s ease, transform .35s cubic-bezier(0.16, 1, 0.3, 1);
}
.bb-best-card:hover .bb-best-quick {
  opacity: 1;
  transform: translateY(0);
}
.bb-best-body { padding: 0 4px; }
.bb-best-body small {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #ed7363;
  display: block;
  margin-bottom: 6px;
}
.col-keys    .bb-best-body small { color: #2a9d92; }
.col-manatee .bb-best-body small { color: #7a9576; }
.col-coral   .bb-best-body small { color: #ed7363; }
.bb-best-body strong {
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #0c2c4f;
  display: block;
  margin-bottom: 4px;
  line-height: 1.2;
}
.bb-best-kicker {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: #4f5663;
}
.bb-section-cta { text-align: center; }
.bb-btn--ghost-dark {
  background: transparent;
  color: #0c2c4f;
  border-color: #0c2c4f;
}
.bb-btn--ghost-dark:hover { background: #0c2c4f; color: #faf5ec; }

@media (max-width: 1100px) { .bb-best-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px)  { .bb-best-grid { grid-template-columns: 1fr 1fr; gap: 14px; } }

/* === BRAND VALUES STRIP === */
.bb-values {
  background: #faf5ec;
  padding: 80px 0;
}
.bb-values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 36px;
}
.bb-value {
  text-align: center;
  padding: 12px;
}
.bb-value-icon {
  width: 64px; height: 64px;
  margin: 0 auto 18px;
  color: #ed7363;
}
.bb-value-icon svg { width: 100%; height: 100%; }
.bb-value strong {
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #0c2c4f;
  display: block;
  margin-bottom: 8px;
}
.bb-value span {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: #4f5663;
  display: block;
  max-width: 230px;
  margin: 0 auto;
}
@media (max-width: 960px) {
  .bb-values-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

/* === STAT COUNTERS === */
.bb-stats {
  background: #0c2c4f;
  color: #faf5ec;
  padding: 96px 0;
}
.bb-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.bb-stat {
  text-align: center;
  position: relative;
}
.bb-stat:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -16px; top: 50%;
  transform: translateY(-50%);
  width: 1px; height: 56px;
  background: rgba(244, 168, 149, 0.25);
}
.bb-stat strong {
  display: block;
  font-family: 'DM Serif Display', serif;
  font-style: italic;
  font-size: clamp(48px, 6vw, 88px);
  line-height: 1;
  color: #f4a895;
  margin-bottom: 14px;
  font-weight: 400;
  letter-spacing: -0.02em;
}
.bb-stat span {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(250, 245, 236, 0.72);
  max-width: 240px;
  display: inline-block;
  line-height: 1.4;
}
@media (max-width: 960px) {
  .bb-stats-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .bb-stat:not(:last-child)::after { display: none; }
}

/* === PRESS STRIP === */
.bb-press {
  background: #ffffff;
  padding: 56px 0;
  border-top: 1px solid #ece5d6;
  border-bottom: 1px solid #ece5d6;
}
.bb-press-label {
  display: block;
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #8a8f99;
  margin-bottom: 32px;
}
.bb-press-grid {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}
.bb-press-logo {
  font-size: 22px;
  color: #4f5663;
  opacity: 0.7;
  transition: opacity .25s ease;
  white-space: nowrap;
}
.bb-press-logo:hover { opacity: 1; }
@media (max-width: 960px) {
  .bb-press-grid { justify-content: center; gap: 28px 40px; }
  .bb-press-logo { font-size: 18px; }
}

/* === UNIVERSAL SCROLL REVEAL === */
.bb-coll-card,
.bb-best-card,
.bb-value,
.bb-worn-tile,
.bb-banner-inner,
.bb-head,
.bb-stat,
.bb-press-logo {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--d, 0s);
}
.bb-revealed {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* =====================================================================
   V7 — PREMIUM ECOMMERCE STACK
   Cart drawer, social proof toasts, splash loader, sustainability bar,
   stock urgency, page transitions.
   ===================================================================== */

/* === SPLASH LOADER === */
.splash {
  position: fixed;
  inset: 0;
  background: linear-gradient(135deg, #fdedf2 0%, #f8b6c8 55%, #e6889f 100%);
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #faf5ec;
  transition: opacity .6s ease;
  /* Decorative only — let clicks through to the page beneath if it shows */
  pointer-events: none;
}
.splash.is-out { opacity: 0; }
.splash-inner {
  text-align: center;
  animation: splash-rise 1.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes splash-rise {
  0%   { opacity: 0; transform: translateY(30px); }
  30%  { opacity: 1; transform: translateY(0); }
  85%  { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-20px); }
}
.splash-mermaid {
  width: 140px; height: 140px;
  color: #0c2c4f;
  display: block;
  margin: 0 auto 20px;
}
.splash-mermaid circle { animation: splash-draw 1.2s cubic-bezier(0.5, 0, 0.3, 1) forwards; }
@keyframes splash-draw {
  to { stroke-dashoffset: 0; }
}
.splash-mermaid text {
  opacity: 0;
  animation: splash-text 0.6s ease 0.7s forwards;
}
@keyframes splash-text { to { opacity: 1; } }
.splash-tag {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: rgba(12, 44, 79, 0.7);
}

/* === CART DRAWER === */
.cart-drawer-veil {
  position: fixed;
  inset: 0;
  background: rgba(12, 44, 79, 0.45);
  z-index: 9000;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
  backdrop-filter: blur(4px);
}
.cart-drawer-veil.is-on { opacity: 1; pointer-events: auto; }

.cart-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 100%; max-width: 440px;
  background: #ffffff;
  z-index: 9001;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .45s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: -20px 0 60px rgba(12, 44, 79, 0.2);
}
/* The closed drawer must leave the tab order.
 *
 * It was hidden by `transform: translateX(100%)` alone. A translated element is
 * still laid out and still focusable, so on EVERY page a keyboard user tabbing
 * past the footer hit two or three stops with no visible focus ring — the
 * drawer's Close button, "Review & reserve", and the injected "Share wishlist".
 * The drawer also carries aria-hidden="true" while closed, so a screen reader
 * announced nothing at all for those stops: focusable content inside
 * aria-hidden, which is the exact pattern axe reports as a violation.
 *
 * visibility: hidden removes it from the tab order and from the accessibility
 * tree. It is transitioned so the slide-out animation still plays: visibility
 * flips only after the transform finishes on close, and immediately on open. */
.cart-drawer {
  visibility: hidden;
  transition: transform .45s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear .45s;
}
.cart-drawer.is-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform .45s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s;
}
body.drawer-open { overflow: hidden; }

.cart-drawer-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 28px 28px 18px;
  border-bottom: 1px solid #ece5d6;
}
.cart-drawer-head small {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #ed7363;
  display: block;
  margin-bottom: 6px;
}
.cart-drawer-head h3 {
  font-family: 'DM Serif Display', serif;
  font-style: italic;
  font-size: 28px;
  font-weight: 400;
  color: #0c2c4f;
  margin: 0;
  letter-spacing: -0.01em;
}
.cart-drawer-head h3 span {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-size: 14px;
  font-weight: 600;
  color: #8a8f99;
  background: #fdedf2;
  padding: 2px 10px;
  border-radius: 999px;
  margin-left: 10px;
  vertical-align: middle;
}
.cart-drawer-close {
  background: transparent;
  border: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  color: #0c2c4f;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s ease;
}
.cart-drawer-close:hover { background: #fdedf2; }
.cart-drawer-close svg { width: 18px; height: 18px; }

.cart-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 28px;
}
.cart-drawer-empty {
  text-align: center;
  padding: 56px 16px;
  color: #4f5663;
}
.cart-drawer-empty svg {
  width: 64px; height: 64px;
  color: #ed7363;
  margin: 0 auto 18px;
  opacity: 0.7;
}
.cart-drawer-empty h4 {
  font-family: 'DM Serif Display', serif;
  font-style: italic;
  font-size: 22px;
  font-weight: 400;
  color: #0c2c4f;
  margin: 0 0 10px;
}
.cart-drawer-empty p { margin: 0 0 24px; font-size: 14px; }

.cart-drawer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.cart-drawer-item {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 14px;
  align-items: flex-start;
  padding-bottom: 18px;
  border-bottom: 1px solid #f3ecdf;
}
.cart-drawer-item:last-child { border-bottom: 0; padding-bottom: 0; }
.cart-drawer-thumb {
  width: 72px; height: 88px;
  border-radius: 4px;
  background: #fdedf2 center / cover no-repeat;
}
.cart-drawer-meta { display: flex; flex-direction: column; gap: 4px; }
.cart-drawer-meta small {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #ed7363;
  font-weight: 700;
}
.cart-drawer-meta strong {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #0c2c4f;
  letter-spacing: -0.005em;
}
.cart-drawer-meta span {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: #4f5663;
}
.cart-drawer-qty {
  display: inline-flex; align-items: center;
  border: 1px solid #ece5d6;
  border-radius: 4px;
  margin-top: 6px;
  width: fit-content;
}
.cart-drawer-qty button {
  width: 28px; height: 28px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 15px;
  color: #0c2c4f;
}
.cart-drawer-qty button:hover { background: #fdedf2; }
.cart-drawer-qty span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 28px;
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  border-left: 1px solid #ece5d6;
  border-right: 1px solid #ece5d6;
}
.cart-drawer-rm {
  background: transparent;
  border: 0;
  width: 30px; height: 30px;
  border-radius: 50%;
  color: #8a8f99;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.cart-drawer-rm:hover { background: #fce0e8; color: #ed7363; }
.cart-drawer-rm svg { width: 14px; height: 14px; }

.cart-drawer-foot {
  padding: 22px 28px 28px;
  border-top: 1px solid #ece5d6;
  background: #faf5ec;
}
.cart-drawer-checkout {
  width: 100%;
  margin-bottom: 10px;
}
.cart-drawer-foot small {
  display: block;
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8a8f99;
}

@media (max-width: 480px) {
  .cart-drawer { max-width: 100%; }
}

/* === SOCIAL PROOF TOAST === */
.social-toast {
  position: fixed;
  left: 24px; bottom: 24px;
  width: 320px; max-width: calc(100vw - 32px);
  background: #ffffff;
  padding: 14px 36px 14px 14px;
  border-radius: 8px;
  box-shadow: 0 24px 60px rgba(12, 44, 79, 0.2), 0 0 0 1px rgba(12, 44, 79, 0.06);
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 12px;
  align-items: center;
  opacity: 0;
  transform: translateY(20px) scale(0.95);
  transition: opacity .4s ease, transform .5s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 100;
  font-family: 'Inter', sans-serif;
}
.social-toast.is-on { opacity: 1; transform: translateY(0) scale(1); }
.social-toast-thumb {
  width: 48px; height: 48px;
  border-radius: 6px;
  background: #fdedf2 center / cover no-repeat;
  flex-shrink: 0;
}
.social-toast div { font-size: 13px; color: #4f5663; line-height: 1.35; }
.social-toast div strong { color: #0c2c4f; font-weight: 600; }
.social-toast div small {
  display: block;
  margin-top: 4px;
  color: #4f5663;
  font-size: 12.5px;
}
.social-toast div em {
  display: block;
  margin-top: 6px;
  font-style: normal;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ed7363;
  font-weight: 600;
}
.social-toast button {
  position: absolute;
  top: 8px; right: 8px;
  background: transparent;
  border: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  color: #8a8f99;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0;
}
.social-toast button:hover { background: #fdedf2; color: #0c2c4f; }
@media (max-width: 720px) {
  .social-toast { left: 12px; bottom: 12px; width: calc(100vw - 24px); }
}

/* === STOCK URGENCY (PDP) === */
.pdp-urgency {
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(135deg, rgba(237, 115, 99, 0.12) 0%, rgba(237, 115, 99, 0.04) 100%);
  border: 1px solid rgba(237, 115, 99, 0.25);
  padding: 14px 18px;
  border-radius: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  color: #0c2c4f;
  margin-bottom: 28px;
}
.pdp-urgency strong { font-weight: 700; color: #d65645; }
.pdp-urgency-dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #ed7363;
  flex-shrink: 0;
  position: relative;
  box-shadow: 0 0 0 0 rgba(237, 115, 99, 0.6);
  animation: pulse-dot 1.8s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(237, 115, 99, 0.6); }
  50%      { box-shadow: 0 0 0 10px rgba(237, 115, 99, 0); }
}
.pdp-urgency-meta {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: #4f5663;
}

/* === SUSTAINABILITY PROGRESS BAR === */
.sustain-card {
  background: #ffffff;
  padding: 56px 56px 48px;
  border-radius: 10px;
  box-shadow: 0 24px 60px rgba(12, 44, 79, 0.06);
  max-width: 980px;
  margin: 0 auto;
}
.sustain-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 32px;
}
.sustain-head h2 {
  font-family: 'DM Serif Display', serif;
  font-style: italic;
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 400;
  color: #0c2c4f;
  margin: 14px 0 14px;
  line-height: 1.1;
}
.sustain-head h2 em {
  font-style: italic;
  color: #ed7363;
}
.sustain-head p {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  color: #4f5663;
  margin: 0;
  max-width: 540px;
  line-height: 1.55;
}
.sustain-pct {
  font-family: 'DM Serif Display', serif;
  font-style: italic;
  font-size: clamp(56px, 7vw, 88px);
  color: #ed7363;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
}
.sustain-track {
  width: 100%;
  height: 16px;
  background: #fdedf2;
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 18px;
  position: relative;
}
.sustain-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #4cc4b8 0%, #ed7363 60%, #c9a96e 100%);
  border-radius: 999px;
  transition: width 1.6s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}
.sustain-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 30%, rgba(255, 255, 255, 0.5) 50%, transparent 70%);
  animation: shimmer 2.4s linear infinite;
}
@keyframes shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.sustain-marks {
  display: flex;
  justify-content: space-between;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: #4f5663;
  flex-wrap: wrap;
  gap: 12px 24px;
}
.sustain-marks strong {
  color: #0c2c4f;
  font-weight: 700;
  letter-spacing: -0.005em;
  font-size: 13px;
}
@media (max-width: 720px) {
  .sustain-card { padding: 36px 24px 32px; border-radius: 6px; }
  .sustain-head { flex-direction: column; gap: 8px; }
  .sustain-marks { font-size: 11.5px; }
}

/* === 3D card tilt assist === */
.bb-best-card,
.bb-coll-card,
.bb-worn-tile {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  will-change: transform;
  transform-origin: center;
  transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.bb-best-card:hover,
.bb-coll-card:hover,
.bb-worn-tile:hover {
  transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(-6px);
}

/* === View Transitions API === */
@view-transition { navigation: auto; }
::view-transition-old(root) {
  animation: vt-fade-out .25s cubic-bezier(0.4, 0, 1, 1) forwards;
}
::view-transition-new(root) {
  animation: vt-fade-in .35s cubic-bezier(0, 0, 0.2, 1) forwards;
}
@keyframes vt-fade-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes vt-fade-in  { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* =====================================================================
   V8 — Polish from top-to-bottom audit
   ===================================================================== */

/* === Footer form stacks on mobile (matches newsletter + future-form) === */
@media (max-width: 720px) {
  .foot-form { flex-direction: column; gap: 8px; padding: 8px; }
  .foot-form input { width: 100%; }
  .foot-form button { width: 100%; padding: 14px; }
}

/* === Mobile right-cluster trim: hide moon + collections at small mobile.
   Keep .search-btn AND .account-btn visible — both are core nav affordances. === */
@media (max-width: 600px) {
  .nav-right .moon-btn,
  .nav-right .icon-btn:not(.cart-btn):not(.search-btn):not(.account-btn) { display: none; }
}

/* === Brand values + stats: max-widths were wider than mobile columns === */
@media (max-width: 720px) {
  .bb-value span { max-width: 100%; font-size: 13px; }
  .bb-values-grid { gap: 24px; }
  .bb-stat span { max-width: 100%; font-size: 12px; }
  .bb-stats-grid { gap: 28px; }
}

/* === Worn-tile orphan: third tile spans full row on mobile === */
@media (max-width: 720px) {
  .bb-worn-grid .bb-worn-tile:nth-child(3) {
    grid-column: 1 / -1;
    aspect-ratio: 16/9;
  }
}

/* === PDP urgency wraps cleanly on mobile === */
@media (max-width: 720px) {
  .pdp-urgency {
    flex-wrap: wrap;
    align-items: flex-start;
    padding: 12px 14px;
    font-size: 12.5px;
    gap: 10px;
  }
  .pdp-urgency-dot { margin-top: 6px; }
  .pdp-urgency-meta {
    flex-basis: 100%;
    margin-top: 4px;
    padding-left: 0;
  }
}

/* (Tablet patch block removed — the main mobile-nav block is now at max-width:1023px and covers tablets too.) */

/* === Section rhythm fix: Brand Values pads the same as bb-section now === */
.bb-values { padding: 120px 0; }
@media (max-width: 720px) { .bb-values { padding: 80px 0; } }

/* =====================================================================
   V9 — Studio layer (PWA install chip, live search, tide widget,
   cursor bubbles, wishlist share button)
   ===================================================================== */

/* === Install prompt chip === */
.fm-install {
  position: fixed;
  bottom: 24px; right: 24px;
  background: #0c2c4f;
  color: #faf5ec;
  padding: 14px 18px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 16px 40px rgba(12, 44, 79, 0.32);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  z-index: 95;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .4s ease, transform .5s cubic-bezier(0.16, 1, 0.3, 1);
  max-width: 90vw;
}
.fm-install.is-on { opacity: 1; transform: translateY(0); }
.fm-install button {
  border: 0;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 8px 14px;
  border-radius: 999px;
  background: #ed7363;
  color: #faf5ec;
}
.fm-install button:hover { background: #d65645; }
.fm-install button[data-act="no"] {
  background: transparent;
  padding: 4px 6px;
  font-size: 18px;
  letter-spacing: 0;
  color: rgba(250, 245, 236, 0.65);
}
.fm-install button[data-act="no"]:hover { color: var(--cream); }
@media (max-width: 720px) {
  .fm-install { bottom: 12px; left: 12px; right: 12px; max-width: none; }
  /* When the install chip is visible, push the social toast up above it so
     they don't crash on phones where both go full-width at the bottom. */
  body:has(.fm-install.is-on) .social-toast { bottom: 92px; }
}
/* Desktop: install chip lives bottom-right, social toast stays bottom-left,
   no collision possible. */
@media (min-width: 721px) {
  .social-toast { left: 24px; right: auto; }
  .fm-install   { left: auto;  right: 24px; }
}

/* === Live search sheet === */
.search-sheet {
  position: fixed; inset: 0;
  z-index: 9100;
}
.search-sheet-veil {
  position: absolute; inset: 0;
  background: rgba(12, 44, 79, 0.45);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .25s ease;
}
.search-sheet.is-on .search-sheet-veil { opacity: 1; }
.search-sheet-panel {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%) translateY(-12px);
  width: 100%;
  max-width: 640px;
  background: #fefcf7;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 20px 60px rgba(12, 44, 79, 0.3);
  opacity: 0;
  transition: opacity .3s ease, transform .35s cubic-bezier(0.16, 1, 0.3, 1);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}
.search-sheet.is-on .search-sheet-panel { opacity: 1; transform: translateX(-50%) translateY(0); }
.search-sheet-head {
  display: flex; align-items: center; gap: 12px;
  padding: 22px 22px 18px;
  border-bottom: 1px solid #f0e8d5;
}
.search-sheet-head svg { width: 20px; height: 20px; color: #4f5663; flex-shrink: 0; }
.search-sheet-head input {
  flex: 1;
  border: 0; background: transparent;
  padding: 8px 0;
  font: inherit;
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  color: #1a1d2e;
  outline: none;
}
.search-sheet-close {
  background: transparent; border: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  font-size: 22px;
  cursor: pointer;
  color: #4f5663;
}
.search-sheet-close:hover { background: #fdedf2; color: #0c2c4f; }
.search-sheet-results {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0 14px;
}
.search-sheet-empty {
  padding: 32px 24px;
  text-align: center;
  color: #4f5663;
  font-family: 'Inter', sans-serif;
  font-style: italic;
  font-size: 14px;
  margin: 0;
}
.search-result {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px 22px;
  text-decoration: none;
  color: #1a1d2e;
  transition: background .2s ease;
}
.search-result:hover { background: #faf5ec; }
.search-result-thumb {
  width: 56px; height: 56px;
  background: #fdedf2 center / cover no-repeat;
  border-radius: 4px;
}
.search-result-meta { display: flex; flex-direction: column; gap: 2px; }
.search-result-meta small {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #ed7363;
  font-weight: 700;
}
.search-result-meta strong {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #0c2c4f;
}
.search-result-meta span {
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  color: #4f5663;
}
.search-result svg { width: 18px; height: 18px; color: #8a8f99; }
body.search-open { overflow: hidden; }
@media (max-width: 720px) {
  .search-sheet-panel { max-width: 100%; border-radius: 0; max-height: 100vh; }
  .search-sheet-head input { font-size: 16px; }
}

/* === Wishlist share button (in cart drawer footer) === */
.cart-drawer-share {
  width: 100%;
  background: transparent;
  color: #0c2c4f;
  border: 1px solid #ece5d6;
  border-radius: 6px;
  padding: 12px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
  cursor: pointer;
  transition: all .25s ease;
}
.cart-drawer-share:hover {
  border-color: #ed7363;
  color: #ed7363;
}
.cart-drawer-share svg { width: 16px; height: 16px; }

/* === Florida Keys tide widget === */
.tide-section { padding-bottom: 0 !important; }
.tide-card {
  background: linear-gradient(165deg, #0c2c4f 0%, #1d4a73 100%);
  color: #faf5ec;
  border-radius: 8px;
  padding: 36px 36px 0;
  max-width: 780px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(12, 44, 79, 0.18);
}
.tide-head { position: relative; z-index: 2; max-width: 420px; }
.tide-eyebrow {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #ffb4a4;
  margin-bottom: 14px;
}
.tide-head h3 {
  font-family: 'DM Serif Display', serif;
  font-style: italic;
  font-size: clamp(36px, 4.4vw, 56px);
  font-weight: 400;
  color: #ffffff;
  margin: 0 0 12px;
  line-height: 1;
  letter-spacing: -0.02em;
}
.tide-head h3 em { color: #ffb4a4; }
.tide-now {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: rgba(250, 245, 236, 0.78);
  margin: 0;
  letter-spacing: 0.08em;
}
.tide-now strong { color: #faf5ec; font-weight: 700; }
.tide-wave {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 100px;
  pointer-events: none;
}
.tide-wave svg {
  width: 100%; height: 100%;
  display: block;
}
.tide-marks {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 32px;
  margin-top: 32px;
  padding-bottom: 28px;
}
.tide-marks > div {
  flex: 1;
  background: rgba(254, 252, 247, 0.08);
  padding: 14px 18px;
  border-radius: 6px;
  backdrop-filter: blur(6px);
}
.tide-marks span {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(244, 168, 149, 0.85);
  margin-bottom: 6px;
}
.tide-marks strong {
  font-family: 'DM Serif Display', serif;
  font-style: italic;
  font-size: 26px;
  font-weight: 400;
  color: #ffffff;
}
.tide-note {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(254, 252, 247, 0.45);
  position: relative;
  z-index: 2;
  padding-bottom: 24px;
}
@media (max-width: 720px) {
  .tide-card { padding: 28px 24px 0; }
  .tide-marks { flex-direction: column; gap: 12px; margin-top: 24px; }
  .tide-marks > div { padding: 12px 14px; }
}

/* === Quick view modal === */
.qview { position: fixed; inset: 0; z-index: 9200; }
.qview-veil {
  position: absolute; inset: 0;
  background: rgba(12, 44, 79, 0.55);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .3s ease;
}
.qview.is-on .qview-veil { opacity: 1; }
.qview-panel {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, calc(-50% + 20px));
  width: 100%; max-width: 920px; max-height: 90vh;
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  box-shadow: 0 40px 80px rgba(12, 44, 79, 0.35);
  opacity: 0;
  transition: opacity .35s ease, transform .45s cubic-bezier(0.16, 1, 0.3, 1);
}
.qview.is-on .qview-panel { opacity: 1; transform: translate(-50%, -50%); }
.qview-close {
  position: absolute; top: 14px; right: 14px;
  background: rgba(254, 252, 247, 0.92);
  color: #0c2c4f;
  border: 0; width: 36px; height: 36px;
  border-radius: 50%;
  cursor: pointer; font-size: 22px; line-height: 1;
  z-index: 2;
}
.qview-close:hover { background: #ed7363; color: #faf5ec; }
.qview-photo {
  background-size: cover;
  background-position: center;
  background-color: #fdedf2;
  aspect-ratio: 3 / 4;
}
.qview-body {
  padding: 44px 40px;
  display: flex; flex-direction: column; justify-content: center;
  overflow-y: auto;
}
.qview-collection {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #ed7363;
  margin-bottom: 10px;
  display: block;
}
.qview-body h2 {
  font-family: 'DM Serif Display', serif;
  font-style: italic;
  font-size: clamp(32px, 3.6vw, 44px);
  font-weight: 400;
  color: #0c2c4f;
  margin: 0 0 10px;
  letter-spacing: -0.015em;
  line-height: 1;
}
.qview-kicker {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-style: italic;
  color: #ed7363;
  margin: 0 0 18px;
}
.qview-desc {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: #4f5663;
  margin: 0 0 24px;
}
.qview-price {
  background: #fdedf2;
  border-radius: 6px;
  padding: 14px 18px;
  margin-bottom: 28px;
}
.qview-price small {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #8a8f99;
  font-weight: 700;
}
.qview-price strong {
  display: block;
  font-family: 'DM Serif Display', serif;
  font-style: italic;
  font-size: 22px;
  color: #0c2c4f;
  font-weight: 400;
  margin-top: 4px;
}
.qview-actions { display: grid; gap: 10px; }
body.qview-open { overflow: hidden; }
@media (max-width: 720px) {
  .qview-panel { grid-template-columns: 1fr; max-width: 100%; max-height: 95vh; border-radius: 0; }
  .qview-photo { aspect-ratio: 16 / 9; }
  .qview-body { padding: 28px 22px 40px; }
}

/* === Size finder modal === */
.size-finder { position: fixed; inset: 0; z-index: 9250; }
.size-finder .qview-veil { background: rgba(12, 44, 79, 0.5); }
.size-finder-panel {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, calc(-50% + 20px));
  width: 100%; max-width: 540px;
  background: #ffffff;
  border-radius: 12px;
  padding: 48px 40px 40px;
  box-shadow: 0 40px 80px rgba(12, 44, 79, 0.35);
  opacity: 0;
  transition: opacity .35s ease, transform .45s cubic-bezier(0.16, 1, 0.3, 1);
}
.size-finder.is-on .size-finder-panel { opacity: 1; transform: translate(-50%, -50%); }
.size-finder-panel h2 {
  font-family: 'DM Serif Display', serif;
  font-style: italic;
  font-size: 36px;
  font-weight: 400;
  color: #0c2c4f;
  margin: 14px 0 8px;
  letter-spacing: -0.02em;
}
.size-finder-panel h3 {
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: #0c2c4f;
  margin: 0 0 18px;
}
.finder-options {
  display: flex; flex-wrap: wrap; gap: 10px;
}
.finder-opt {
  padding: 12px 18px;
  border: 1px solid #ece5d6;
  border-radius: 999px;
  background: #faf5ec;
  font: inherit;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #0c2c4f;
  cursor: pointer;
  transition: all .2s ease;
}
.finder-opt:hover {
  background: #0c2c4f;
  color: #faf5ec;
  border-color: #0c2c4f;
}
.finder-result {
  text-align: center;
  padding: 14px 0 0;
}
.finder-size {
  display: block;
  font-family: 'DM Serif Display', serif;
  font-style: italic;
  font-size: 64px;
  color: #ed7363;
  font-weight: 400;
  margin: 14px 0;
}
.finder-result p {
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  color: #4f5663;
  font-style: italic;
  margin: 0 0 28px;
}
.finder-result .bb-btn { width: 100%; margin-bottom: 8px; }
@media (max-width: 720px) {
  .size-finder-panel { padding: 36px 24px 28px; max-width: 100%; border-radius: 0; }
}

/* (Customer reviews CSS removed — the placeholder reviews section was deleted from product.php.) */

/* === Instagram-style wall on home === */
.ig-wall {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  margin-bottom: 48px;
}
.ig-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 4px;
  text-decoration: none;
  background: #fdedf2;
}
.ig-tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.ig-tile:hover img { transform: scale(1.08); }
.ig-tile::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(12, 44, 79, 0.6));
  opacity: 0;
  transition: opacity .3s ease;
}
.ig-tile:hover::after { opacity: 1; }
.ig-handle {
  position: absolute;
  left: 12px; bottom: 12px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: #faf5ec;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .3s ease, transform .3s ease;
  z-index: 1;
}
.ig-tile:hover .ig-handle { opacity: 1; transform: translateY(0); }
@media (max-width: 960px) { .ig-wall { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .ig-wall { grid-template-columns: repeat(2, 1fr); } }

/* === Founder video placeholder === */
.founder-video {
  max-width: 880px;
  margin: 0 auto;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(12, 44, 79, 0.15);
  background: #0c2c4f;
}
.founder-video-poster {
  position: relative;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.founder-video-poster::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12, 44, 79, 0.2) 0%, rgba(12, 44, 79, 0.55) 100%);
}
.founder-play {
  position: relative;
  color: #faf5ec;
  width: 96px; height: 96px;
  transition: transform .3s ease;
}
.founder-video-poster:hover .founder-play { transform: scale(1.08); }
.founder-play svg { width: 100%; height: 100%; }
.founder-runtime {
  position: absolute;
  bottom: 18px; right: 22px;
  background: rgba(0, 0, 0, 0.65);
  color: #faf5ec;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 4px;
  letter-spacing: 0.06em;
}
.founder-video-caption {
  background: #0c2c4f;
  color: #faf5ec;
  padding: 18px 28px;
  display: flex; flex-direction: column; gap: 4px;
}
.founder-video-caption strong {
  font-family: 'DM Serif Display', serif;
  font-style: italic;
  font-size: 20px;
  font-weight: 400;
}
.founder-video-caption small {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(244, 168, 149, 0.9);
}

/* === Admin order timeline === */
.admin-timeline-card { margin-bottom: 20px; }
.admin-timeline {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  position: relative;
  gap: 0;
}
.admin-timeline::before {
  content: "";
  position: absolute;
  top: 18px; left: 8%; right: 8%;
  height: 2px;
  background: var(--a-border);
  z-index: 0;
}
.admin-timeline-step {
  flex: 1;
  text-align: center;
  position: relative;
  z-index: 1;
  padding: 0 8px;
}
.admin-timeline-dot {
  display: block;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--a-card);
  border: 2px solid var(--a-border);
  margin: 0 auto 12px;
  position: relative;
  transition: all .25s ease;
}
.admin-timeline-step.is-done .admin-timeline-dot {
  background: var(--a-coral);
  border-color: var(--a-coral);
}
.admin-timeline-step.is-done .admin-timeline-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23faf5ec' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='m5 12 5 5 9-11'/></svg>");
  background-size: 60% 60%;
  background-position: center;
  background-repeat: no-repeat;
}
.admin-timeline-step strong {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--a-ink);
  margin-bottom: 4px;
}
.admin-timeline-step small {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  color: var(--a-muted);
}
.admin-timeline.is-cancelled .admin-timeline-step:not(.is-cancelled-step) { opacity: 0.4; }
.admin-timeline-step.is-cancelled-step .admin-timeline-dot { background: #d65645; border-color: #d65645; }
.admin-timeline-step.is-cancelled-step .admin-timeline-dot::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23faf5ec' stroke-width='3' stroke-linecap='round'><path d='M6 6l12 12M6 18 18 6'/></svg>");
}
@media (max-width: 720px) {
  .admin-timeline { flex-direction: column; gap: 14px; }
  .admin-timeline::before { display: none; }
  .admin-timeline-step { display: flex; align-items: center; gap: 14px; text-align: left; }
  .admin-timeline-dot { margin: 0; flex-shrink: 0; }
}

/* === Admin bulk action bar === */
.admin-bulk-bar {
  display: flex; align-items: center; gap: 12px;
  background: #0c2c4f;
  color: #faf5ec;
  padding: 12px 18px;
  border-radius: 8px;
  margin-bottom: 14px;
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  flex-wrap: wrap;
  animation: bulk-slide 0.3s ease;
}
@keyframes bulk-slide {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.admin-bulk-bar select {
  padding: 8px 12px;
  border: 0;
  border-radius: 4px;
  background: rgba(254, 252, 247, 0.1);
  color: #faf5ec;
  font: inherit;
  font-size: 13px;
}
.admin-bulk-bar select option { color: #1a1d2e; }
.bulk-check { width: 16px; height: 16px; cursor: pointer; }
#bulk-check-all { width: 16px; height: 16px; cursor: pointer; }

/* === Legal pages (Privacy / Terms / Accessibility) === */
.legal-body {
  font-family: 'Libre Caslon Text', Georgia, serif;
  font-size: 17px;
  line-height: 1.75;
  color: #1a1d2e;
}
.legal-body .lede {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #8a8f99;
  margin-bottom: 36px;
}
.legal-body h2 {
  font-family: 'DM Serif Display', serif;
  font-style: italic;
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 400;
  color: #0c2c4f;
  margin: 48px 0 16px;
  letter-spacing: -0.015em;
}
.legal-body p { margin: 0 0 18px; }
.legal-body ul { margin: 0 0 24px; padding-left: 24px; }
.legal-body ul li { margin-bottom: 10px; }
.legal-body strong { color: #0c2c4f; font-weight: 700; }
.legal-body a { color: #ed7363; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.legal-body a:hover { color: #d65645; }
.legal-body code {
  background: #fdedf2;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 14px;
  color: #d65645;
}
.legal-footer {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid #ece5d6;
  font-style: italic;
  color: #4f5663;
}

/* === Cursor bubbles (desktop only, decorative) === */
.fm-cursor-bubble {
  position: fixed;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(254,252,247,0.85), rgba(76, 196, 184, 0.35) 60%, transparent);
  border: 1px solid rgba(254, 252, 247, 0.55);
  pointer-events: none;
  z-index: 9999;
  animation: fm-bubble-rise 1.6s ease-out forwards;
}
@keyframes fm-bubble-rise {
  0%   { transform: translateY(0) scale(0.6); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translateY(-90px) scale(1); opacity: 0; }
}

@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;
  }
  .marquee-track { animation: none; }
  .vhero-video { display: none; }
  .vhero { background: #0c2c4f url('../images/snorkeling/hero-poster.jpg') center / cover; }
  .vhero-kicker, .vhero-word, .vhero-sub, .vhero-cta { opacity: 1 !important; transform: none !important; animation: none !important; }
  .bb-coll-card, .bb-best-card, .bb-value, .bb-worn-tile, .bb-banner-inner, .bb-head, .bb-stat, .bb-press-logo {
    opacity: 1 !important; transform: none !important;
  }
  .splash { display: none; }
  .social-toast { display: none; }
  .sustain-fill::after { display: none; }
  .pdp-urgency-dot { animation: none; }
  .fm-cursor-bubble { display: none; }
}

/* === Audit fixes: quick-view button reachable on touch, no-hover devices === */
.bb-best-quick {
  border: 0;
  cursor: pointer;
  font: inherit;
  letter-spacing: 0.22em;
}
@media (hover: none) {
  .bb-best-quick { opacity: 1; transform: none; }
  /* IG tile captions also rely on hover by default; show them all the time on touch */
  .ig-handle { opacity: 1; transform: none; }
}

/* PDP urgency line — hide the bullet separator after wrap so the second clause starts clean */
.pdp-urgency { flex-wrap: wrap; }
.pdp-urgency-sep { color: rgba(12, 44, 79, 0.5); }
@media (max-width: 720px) {
  .pdp-urgency-sep { display: none; }
  .pdp-urgency-meta { flex-basis: 100%; }
}

/* =====================================================================
   V10 — MOBILE AUDIT FIXES (2026-06-16)
   Touch targets, 16px input rule, safe-area, dvh, hover-touch overrides,
   z-index, sticky CTA, performance.
   ===================================================================== */

/* --- 16px input rule to defeat iOS auto-zoom on every focusable text/email/
       search/number input on phones. --- */
@media (max-width: 720px) {
  .foot-form input,
  .future-form input,
  .bb-form input,
  #cart-reserve input,
  .qty-input,
  .search-sheet-head input,
  input[type="text"],
  input[type="email"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  input[type="number"],
  input[type="password"],
  select,
  textarea { font-size: 16px !important; }
}

/* --- Safe-area-inset everywhere edge-anchored fixed/sticky elements live. --- */
.site-header        { padding-top: env(safe-area-inset-top, 0); }
.cart-drawer-head   { padding-top: max(18px, env(safe-area-inset-top, 0)); }
.cart-drawer-foot   { padding-bottom: max(20px, env(safe-area-inset-bottom, 0)); }
.cart-drawer        { padding-right: env(safe-area-inset-right, 0); }
.qview-panel        { padding-bottom: max(0px, env(safe-area-inset-bottom, 0)); }
.size-finder-panel  { padding-bottom: max(0px, env(safe-area-inset-bottom, 0)); }
.search-sheet-panel { padding-top: env(safe-area-inset-top, 0); }
.lightbox           { padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0); }
.foot-bottom        { padding-bottom: max(22px, env(safe-area-inset-bottom, 0)); }
.to-top-mermaid     { bottom: max(24px, env(safe-area-inset-bottom, 0)); right: max(18px, env(safe-area-inset-right, 0)); }
.fm-install         { bottom: max(18px, env(safe-area-inset-bottom, 0)); right: max(18px, env(safe-area-inset-right, 0)); }
.social-toast       { bottom: max(18px, env(safe-area-inset-bottom, 0)); left:  max(18px, env(safe-area-inset-left, 0)); }
.fm-toast           { bottom: max(20px, env(safe-area-inset-bottom, 0)); }
@media (max-width: 1023px) {
  body.menu-open .nav-links {
    padding-bottom: max(64px, env(safe-area-inset-bottom, 64px));
    padding-left: max(28px, env(safe-area-inset-left, 28px));
    padding-right: max(28px, env(safe-area-inset-right, 28px));
  }
}

/* --- 100vh → 100dvh on viewport-sized surfaces so iOS URL bar doesn't clip. --- */
.hero               { min-height: calc(100svh - 0px); min-height: calc(100dvh - 0px); }
.vhero              { min-height: 100svh; min-height: 100dvh; }
.cart-drawer        { height: 100svh; height: 100dvh; }
@media (max-width: 720px) {
  .search-sheet-panel { max-height: 100svh; max-height: 100dvh; }
}

/* --- Tap-target bulk pass: every interactive close/qty/remove control 44x44. --- */
.cart-drawer-close,
.search-sheet-close,
.qview-close { width: 44px !important; height: 44px !important; }
.qty-btn,
.qty-stepper button { min-width: 36px; min-height: 36px; }
.cart-drawer-qty button { min-width: 36px; min-height: 36px; padding: 0 10px; }
.cart-drawer-rm,
.cart-row-remove { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.foot-social a { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.fm-install button { min-width: 44px; min-height: 44px; }
@media (max-width: 720px) {
  .foot-col ul li { margin-bottom: 0; }
  .foot-col ul a { display: inline-block; padding: 12px 0; min-height: 44px; line-height: 20px; }
  .foot-legal a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 6px; }
  .promo-bar { height: auto; min-height: 44px; }
  .promo-bar-inner { min-height: 44px; }
  .promo-slide a { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 4px; }
  .foot-form button,
  .future-form button,
  .bb-form button,
  #cart-reserve button { min-height: 44px; }
  .cart-drawer-share { min-height: 44px; }
}

/* --- More hover-only affordances forced visible on touch. --- */
@media (hover: none) {
  .pdp-zoom { opacity: 1 !important; transform: scale(1) !important; }
  .lookbook-cap { opacity: 1 !important; transform: translateY(0) !important; }
  .lookbook-tile::after { opacity: 0.55 !important; }
  .ig-tile::after { opacity: 0.65 !important; }
  .bb-best-photo-b { opacity: 0; }
  /* Drop heavy backdrop-filter on touch — major iOS Safari paint cost */
  .cart-drawer-veil,
  .search-sheet-veil,
  .qview-veil { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
}

/* --- Z-index fix when mobile menu is open: hide other nav-right buttons that
       would otherwise float OVER the menu panel. The hamburger stays. --- */
body.menu-open .nav-right .icon-btn:not(.mobile-toggle),
body.menu-open .nav-right .moon-btn { visibility: hidden; }

/* --- Foot bottom padding & layout on mobile. --- */
@media (max-width: 720px) {
  .foot-bottom {
    padding-left: 22px; padding-right: 22px;
    flex-direction: column; align-items: flex-start; gap: 10px;
  }
}

/* --- Story sub-photo + collection halo no longer bleed past viewport. --- */
@media (max-width: 720px) {
  .story-photo-wrap { overflow: hidden; border-radius: 4px; }
  .story-photo-sub { right: 4px; bottom: 4px; width: 40%; }
  .collection-photo-wrap { overflow: hidden; border-radius: 4px; }
  .collection-photo-wrap::before { inset: -4%; }
}

/* --- Best-sellers cards: avoid overflow on long product names. --- */
.bb-best-card { min-width: 0; }
.bb-best-body strong { overflow-wrap: anywhere; }
@media (max-width: 480px) {
  .bb-best-grid { grid-template-columns: 1fr; }
}

/* --- Mobile sticky "Add to wishlist" bar on PDP. --- */
.pdp-sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: none;
  padding: 12px 16px;
  padding-bottom: max(12px, env(safe-area-inset-bottom, 12px));
  background: rgba(254, 252, 247, 0.96);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(12, 44, 79, 0.08);
  box-shadow: 0 -6px 18px rgba(12, 44, 79, 0.08);
  transform: translateY(110%);
  transition: transform .35s cubic-bezier(0.16, 1, 0.3, 1);
}
.pdp-sticky-cta.is-on { transform: translateY(0); }
.pdp-sticky-cta .btn { width: 100%; min-height: 48px; }
@media (max-width: 720px) {
  body[data-page="product"] .pdp-sticky-cta { display: block; }
  body[data-page="product"] { padding-bottom: 92px; }
}

/* --- Sticky elements (PDP info column, etc.) now use --header-h. --- */
.pdp-info,
.bb-side-stick,
.section-side-stick { /* defensive: any element previously hard-coding top:110px */ }

/* --- Cart drawer head/foot don't collapse under long lists. --- */
.cart-drawer-head, .cart-drawer-foot { flex-shrink: 0; }

/* --- Inner-scroll containers contain bounce on iOS. --- */
.cart-drawer-body,
.qview-body,
.size-finder-panel,
.search-sheet-results { overscroll-behavior: contain; }

/* --- Cinematic grain too expensive on mobile compositor. --- */
@media (max-width: 720px) {
  .cine-grain { mix-blend-mode: normal; opacity: 0.18; }
}

/* --- Reef stats collapse to 2-col on phones (was 4-col until 1100). --- */
@media (max-width: 600px) {
  .reef-stats { grid-template-columns: 1fr 1fr; gap: 18px; }
  .reef-stat span { font-size: 10px; letter-spacing: 0.16em; }
}

/* --- Tide widget doesn't collide at 320. --- */
@media (max-width: 720px) {
  .tide-head h3 { font-size: clamp(30px, 8vw, 56px); line-height: 1.05; }
  .tide-wave { bottom: 80px; }
}

/* --- Nav-right gap bumped slightly on mobile (HIG 8px+ between 44px targets). --- */
@media (max-width: 1023px) {
  .nav-right { gap: 10px; }
}

/* --- Scrollbar gutter so locking body doesn't shift desktop layout. --- */
html { scrollbar-gutter: stable; }

/* --- Reduced-motion: drawer / search sheet / qview transition near-instant. --- */
@media (prefers-reduced-motion: reduce) {
  .cart-drawer, .cart-drawer-veil,
  .search-sheet, .search-sheet-veil, .search-sheet-panel,
  .qview, .qview-panel,
  .size-finder, .size-finder-panel,
  .lightbox { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* --- Cinematic per-banner subject framing on mobile. --- */
@media (max-width: 720px) {
  .cine-banner--reef  { background-position: 60% 40%; }
  .cine-banner--story { background-position: 50% 30%; }
  .cine-banner--gear  { background-position: 50% 35%; }
  .cine-banner--page  { background-position: center 35%; }
}

/* --- Reef Project 3% callout drops below orb on tiny phones. --- */
@media (max-width: 480px) {
  .impact-stats { position: static; margin: 16px auto 0; max-width: 280px; }
}

/* --- Lightbox thumb row scrolls within dialog. --- */
.lightbox-thumbs {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex-wrap: nowrap;
}
.lightbox-thumbs::-webkit-scrollbar { display: none; }

/* --- Search sheet keyboard offset (set by JS via --kb-offset). --- */
.search-sheet-panel { max-height: calc(100dvh - var(--kb-offset, 0px)); }

/* =====================================================================
   V12 — Customer accounts: auth pages + dashboard
   ===================================================================== */
/* Account icon in nav-right — small green dot when signed in */
.account-btn { position: relative; }
.account-dot {
  position: absolute;
  bottom: 6px; right: 6px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #4ec1a8;
  box-shadow: 0 0 0 2px var(--pearl);
}

.auth-wrap { min-height: 60vh; }
.auth-head { text-align: center; margin-bottom: 32px; }
.auth-head h1 {
  font-family: var(--display);
  font-style: italic; font-weight: 400;
  font-size: clamp(36px, 5vw, 56px);
  margin: 14px 0 14px;
  letter-spacing: -0.02em;
  color: var(--navy);
}
.auth-head h1 em { color: var(--coral); font-style: italic; }
.auth-head .lede { color: var(--ink-soft); }
.auth-form {
  background: #ffffff;
  border-radius: 8px;
  padding: 36px 32px;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 18px;
}
.auth-field { display: flex; flex-direction: column; gap: 6px; }
.auth-field span {
  font-family: var(--sans);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--navy);
}
.auth-field input {
  font-family: var(--sans);
  font-size: 15px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fefcf7;
  color: var(--ink);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.auth-field input:focus {
  outline: none;
  border-color: var(--coral);
  box-shadow: 0 0 0 3px rgba(237, 115, 99, 0.15);
}
.auth-field input:disabled { background: #f5f0e6; color: var(--muted); cursor: not-allowed; }
.auth-flash {
  padding: 12px 16px;
  border-radius: 6px;
  font-family: var(--sans);
  font-size: 14px;
  margin-bottom: 18px;
  text-align: left;
}
.auth-flash--ok  { background: #e7f7ef; color: #166c45; border: 1px solid #b6e4cb; }
.auth-flash--err { background: #fce5e2; color: #8a3526; border: 1px solid #f4b8ad; }
.auth-fine {
  text-align: center;
  font-size: 13px;
  color: var(--ink-soft);
  margin: 4px 0 0;
}
.auth-fine a { color: var(--coral-deep); font-weight: 600; }
.auth-fine a:hover { color: var(--navy); }

/* Account dashboard */
.account-head h1 {
  font-family: var(--display);
  font-style: italic; font-weight: 400;
  font-size: clamp(42px, 6vw, 72px);
  margin: 14px 0 12px;
  color: var(--navy);
}
.account-head h1 em { color: var(--coral); }
.account-head .lede { color: var(--ink-soft); font-size: 16px; }
.account-head .lede a { color: var(--coral-deep); font-weight: 600; }

.account-empty {
  background: #ffffff;
  border-radius: 8px;
  padding: 56px 32px;
  text-align: center;
  color: var(--ink-soft);
}
.account-empty p { margin: 0 0 24px; font-size: 16px; }

.account-orders { display: grid; gap: 20px; }
.account-order {
  background: #ffffff;
  border-radius: 8px;
  padding: 24px 28px;
  box-shadow: var(--shadow-sm);
}
.account-order header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding-bottom: 16px; margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.account-order-ref {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 22px;
  color: var(--navy);
  display: block;
}
.account-order header small {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.account-order-status {
  font-family: var(--sans);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--blossom-mist);
  color: var(--coral-deep);
}
.account-order-status--fulfilled { background: #e7f7ef; color: #166c45; }
.account-order-status--cancelled { background: #fce5e2; color: #8a3526; }
.account-order-items {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 12px;
}
.account-order-items li {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 14px;
  align-items: center;
}
.account-order-thumb {
  width: 56px; height: 56px;
  border-radius: 4px;
  background: var(--blossom-mist) center / cover no-repeat;
}
.account-order-items li > div { font-family: var(--sans); font-size: 13px; line-height: 1.45; }
.account-order-items li small {
  display: block;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--blossom-deep);
}
.account-order-items li strong { display: block; color: var(--navy); font-size: 14.5px; font-weight: 600; }
.account-order-items li span { display: block; color: var(--ink-soft); font-size: 12.5px; }
.account-order-qty {
  font-family: var(--sans);
  font-size: 14px; font-weight: 700;
  color: var(--navy);
}
.account-order footer { padding-top: 14px; margin-top: 14px; border-top: 1px dashed var(--line); }
.account-order footer small { color: var(--ink-soft); font-size: 12.5px; }

.account-form {
  background: #ffffff;
  border-radius: 8px;
  padding: 32px 28px;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 18px;
}
.account-check {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px;
  background: var(--blossom-mist);
  border-radius: 6px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--navy);
  cursor: pointer;
}
.account-check input { width: 18px; height: 18px; margin-top: 1px; flex-shrink: 0; }

@media (max-width: 720px) {
  .auth-form, .account-form { padding: 24px 20px; }
  .account-order { padding: 18px 20px; }
  .account-order header { gap: 10px; }
  .account-order-items li { grid-template-columns: 44px 1fr auto; }
  .account-order-thumb { width: 44px; height: 44px; }
}

/* =====================================================================
   V13 — Real checkout: prices, cart totals, address form, thank-you
   ===================================================================== */

/* Cart page layout — items left, sticky summary right */
/* SINGLE COLUMN, at every width.
 *
 * .cart-layout is injected by cart.js INSIDE #cart-items, which is already the
 * first column of .cart-shell (1.5fr 1fr). Giving it its own `1fr 360px` made
 * the page three columns wide in a two-column grid: rows, the injected "Order
 * summary", and then the static "Reserve your set" aside — which ended up
 * pushed off the right edge of a 1280px viewport, with its "Reserve my
 * pre-order" button half off-screen next to a second, competing "Checkout".
 *
 * Stacking the totals under the rows puts the page back to the two columns it
 * was designed as: cart contents on the left, reserve panel on the right.
 */
.cart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}
@media (max-width: 960px) {
  .cart-layout { grid-template-columns: 1fr; gap: 28px; }
}
.cart-summary {
  background: #ffffff;
  border-radius: 8px;
  padding: 28px 26px;
  box-shadow: var(--shadow-sm);
  position: sticky; top: calc(var(--header-h, 80px) + 24px);
}
.cart-summary h3 {
  font-family: var(--sans);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--navy); margin: 0 0 18px;
}
.cart-summary dl { margin: 0 0 20px; padding: 0; }
.cart-summary dl > div { display: flex; justify-content: space-between; padding: 8px 0; }
.cart-summary dt { color: var(--ink-soft); font-size: 14px; }
.cart-summary dd { margin: 0; color: var(--navy); font-weight: 600; }
.cart-summary-total { border-top: 1px solid var(--line); padding-top: 14px !important; margin-top: 6px; }
.cart-summary-total dt, .cart-summary-total dd {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 22px;
  color: var(--navy);
}
.cart-summary-total dd { font-weight: 400; }
.cart-checkout { margin-top: 4px; }
.cart-summary-fine {
  display: block;
  text-align: center;
  margin-top: 14px;
  color: var(--ink-soft);
  font-size: 12.5px;
}

/* Checkout page */
.checkout-head h1 {
  font-family: var(--display);
  font-style: italic; font-weight: 400;
  font-size: clamp(42px, 6vw, 72px);
  color: var(--navy);
  margin: 14px 0 12px;
}
.checkout-head h1 em { color: var(--coral); }
.checkout-head .lede { color: var(--ink-soft); }

.checkout-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 40px;
  align-items: start;
}
@media (max-width: 960px) {
  /* minmax(0, 1fr), not 1fr. A grid track defaults to `min-width: auto`, so a
     plain `1fr` refuses to shrink below the min-content width of whatever is
     inside it. Measured on an iPhone 13: the form came out 394.27px inside a
     390px viewport and scrolled the checkout page sideways; with minmax it is
     390px. Which child was setting the floor was not pinned down — .checkout-row
     is the likely candidate but it does not render on an empty cart, so it was
     not the one measured. minmax(0, …) removes the floor whatever the source. */
  .checkout-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 560px) {
  /* City / state / ZIP across one phone row leaves each field too narrow to
     read what has been typed. Stacking also removes the min-content floor that
     was forcing the layout wide in the first place. */
  .checkout-row { grid-template-columns: minmax(0, 1fr); }
}

/* DECORATIVE GLOWS MUST NOT WIDEN THE PAGE.
 *
 * Three photo wrappers put a blurred radial gradient behind the image with
 * `position: absolute; inset: -8%` (-10% in one case) so the glow spills past
 * the photo. On desktop it spills into margin and looks right. On a phone the
 * wrapper is nearly the full viewport, so 8% of 346px is ~28px of glow hanging
 * off the right edge — enough to make the whole document scroll sideways.
 * reef-project.php measured 396px in a 390px viewport for exactly this reason,
 * and it was invisible to inspection because a pseudo-element has no DOM node
 * to find.
 *
 * `overflow-x: clip`, not `hidden`: clip does not create a scroll container, so
 * it cannot break position:sticky or introduce a nested scrollbar. Vertical
 * bleed is left alone — the page already scrolls that way. Narrow screens only,
 * so the desktop treatment is untouched. */
@media (max-width: 900px) {
  .impact-visual,
  .story-photo-wrap,
  .collection-photo-wrap { overflow-x: clip; }
}
.checkout-form { display: flex; flex-direction: column; gap: 20px; }
.checkout-card {
  background: #ffffff;
  border-radius: 8px;
  padding: 28px 26px;
  box-shadow: var(--shadow-sm);
}
.checkout-card header { margin-bottom: 16px; }
.checkout-card h2 {
  font-family: var(--sans);
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--navy);
  margin: 0;
}
.checkout-card .auth-field { margin-top: 12px; }
.checkout-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
  margin-top: 12px;
}
.checkout-row .auth-field { margin-top: 0; }
@media (max-width: 540px) {
  .checkout-row { grid-template-columns: 1fr 1fr; }
  .checkout-row > .auth-field:first-child { grid-column: 1 / -1; }
}
.checkout-note p {
  margin: 0;
  background: var(--blossom-mist);
  border-radius: 6px;
  padding: 14px 16px;
  font-size: 14px;
  color: var(--navy);
  line-height: 1.55;
}
.checkout-place {
  margin-top: 8px;
  font-size: 14px;
  letter-spacing: 0.22em;
}
.checkout-fine {
  text-align: center;
  color: var(--ink-soft);
  font-size: 12.5px;
  margin: 4px 0 0;
}
.checkout-fine a { color: var(--coral-deep); font-weight: 600; }

.checkout-summary {
  background: #ffffff;
  border-radius: 8px;
  padding: 28px 26px;
  box-shadow: var(--shadow-sm);
  position: sticky; top: calc(var(--header-h, 80px) + 24px);
}
.checkout-summary h2 {
  font-family: var(--sans);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--navy);
  margin: 0 0 18px;
}
.checkout-items { display: flex; flex-direction: column; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.checkout-item {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: 12px;
  align-items: center;
}
.checkout-item-thumb {
  width: 52px; height: 52px;
  border-radius: 4px;
  background: var(--blossom-mist) center / cover no-repeat;
}
.checkout-item-meta small {
  display: block;
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--blossom-deep);
}
.checkout-item-meta strong {
  display: block;
  color: var(--navy);
  font-size: 14px;
  font-weight: 600;
  margin: 2px 0;
}
.checkout-item-meta span { display: block; font-size: 12.5px; color: var(--ink-soft); }
.checkout-item-qty { font-size: 12px !important; color: var(--ink-soft); }
.checkout-item-price {
  font-family: var(--sans);
  font-size: 15px; font-weight: 600;
  color: var(--navy);
  white-space: nowrap;
}
.checkout-totals { margin: 0 0 14px; padding: 0; }
.checkout-totals > div { display: flex; justify-content: space-between; padding: 7px 0; }
.checkout-totals dt { color: var(--ink-soft); font-size: 14px; }
.checkout-totals dd { margin: 0; color: var(--navy); font-weight: 600; }
.checkout-totals-total {
  border-top: 1px solid var(--line);
  padding-top: 12px !important;
  margin-top: 6px;
}
.checkout-totals-total dt, .checkout-totals-total dd {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 22px;
  color: var(--navy);
}
.checkout-totals-total dd { font-weight: 400; }
.checkout-summary-fine {
  display: block;
  text-align: center;
  color: var(--ink-soft);
  font-size: 12.5px;
}

/* Thank-you page */
.thank-you-section .chapter { color: #166c45; }
.thank-you-check {
  width: 80px; height: 80px;
  color: #4ec1a8;
  margin: 0 auto 12px;
  display: block;
}
.thank-you-card {
  background: #ffffff;
  border-radius: 8px;
  padding: 36px 32px;
  box-shadow: var(--shadow-sm);
  margin-top: 28px;
  text-align: left;
}
.thank-you-card h2 {
  font-family: var(--sans);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--navy);
  margin: 0 0 16px;
}
.thank-you-card ol {
  padding-left: 20px;
  margin: 0 0 20px;
  color: var(--ink-soft);
  line-height: 1.7;
}
.thank-you-card ol strong { color: var(--navy); }
.thank-you-fine { color: var(--ink-soft); font-size: 14px; margin: 0 0 22px; }
.thank-you-fine a { color: var(--coral-deep); font-weight: 600; }
.thank-you-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.thank-you-actions .btn { flex: 1; min-width: 140px; }

/* PDP sticky CTA — price alongside button */
.pdp-sticky-cta { display: flex; align-items: center; gap: 12px; }
.pdp-sticky-cta .btn { flex: 1; }
.pdp-sticky-price {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 22px;
  color: var(--navy);
  flex-shrink: 0;
  padding-left: 4px;
}

/* PDP outline button (Buy Now) */
.btn-outline {
  background: transparent;
  color: var(--navy);
  border: 1.5px solid var(--navy);
}
.btn-outline:hover { background: var(--navy); color: var(--cream); }

/* Cart line price area — refined */
.cart-row-price-tag {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
}
.cart-row-price small {
  display: block;
  color: var(--ink-soft);
  font-size: 12px;
  margin-top: 2px;
}

/* Admin order totals + line price + ship-to address */
.admin-order-items li {
  display: grid !important;
  grid-template-columns: 48px 1fr auto auto !important;
  gap: 12px;
  align-items: center;
}
.admin-order-line {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--a-ink, #1d2333);
  white-space: nowrap;
}
.admin-order-totals {
  margin: 18px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--a-border, #e7e2d4);
}
.admin-order-totals > div {
  display: flex; justify-content: space-between;
  padding: 6px 0;
  font-size: 13.5px;
}
.admin-order-totals dt { color: var(--a-ink-soft, #5a6273); }
.admin-order-totals dd { margin: 0; color: var(--a-ink, #1d2333); font-weight: 600; }
.admin-order-totals-total {
  border-top: 1px solid var(--a-border, #e7e2d4);
  padding-top: 10px !important;
  margin-top: 4px;
}
.admin-order-totals-total dt, .admin-order-totals-total dd {
  font-family: 'DM Serif Display', serif;
  font-style: italic;
  font-size: 18px;
  color: var(--a-navy, #0c2c4f);
}
.admin-order-totals-total dd { font-weight: 400; }
.admin-ship-to {
  font-style: normal;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.65;
  color: var(--a-ink, #1d2333);
}
.admin-ship-to strong { color: var(--a-navy, #0c2c4f); font-weight: 700; }
.admin-status--paid-pending { background: #fef0c8; color: #8a5a13; }

/* Product card price tag */
.product-price {
  display: inline-block;
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 22px;
  font-weight: 400;
  color: var(--navy);
  margin-top: 8px;
}

/* Product card now wraps a clickable photo/info link + a separate quick-add button.
   The card itself is a flex column so the button sits cleanly at the bottom. */
.product-card { display: flex; flex-direction: column; }
.product-card-link {
  display: flex; flex-direction: column;
  color: inherit;
  text-decoration: none;
}
.product-card-link:hover { color: inherit; }

/* Quick-add CTA below each product card on collection grids */
.product-quickadd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 12px;
  padding: 14px 18px;
  background: var(--coral);
  color: var(--cream);
  border: 0;
  border-radius: 6px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
  transition: background .2s ease, transform .2s ease;
  min-height: 48px;
}
.product-quickadd:hover {
  background: var(--coral-deep);
  color: var(--cream);
  transform: translateY(-1px);
}
.product-quickadd:active { transform: translateY(0); }
@media (max-width: 480px) {
  .product-quickadd { font-size: 11px; padding: 12px 14px; letter-spacing: 0.18em; }
}

/* =====================================================================
   V11 — CHERRY BLOSSOM brand mood (2026-06-16)
   Cherry Blossom becomes the primary brand color across soft surfaces.
   Coral stays reserved for CTAs/links/focus so contrast holds.
   ===================================================================== */

/* Promo bar — soft pink banner instead of cream */
.promo-bar { background: linear-gradient(180deg, var(--blossom-soft), var(--blossom-mist)); }
.promo-slide { color: var(--navy); }
.promo-slide strong { color: var(--coral-deep); }
.promo-slide a { color: var(--coral-deep); }

/* Eyebrow tags (.chapter, .bb-eyebrow, .cine-kicker) — pink eyebrow over the existing coral */
.chapter,
.bb-eyebrow { color: var(--blossom-deep); }
.cine-kicker { color: var(--blossom); }

/* Soft section backgrounds previously cream now lean pink */
.section-blossom { background: var(--blossom-mist); }

/* Best-sellers + collection ribbons */
.bb-best-flag { background: var(--blossom-mist); color: var(--coral-deep); }

/* Newsletter (navy) — pink accent on the script eyebrow */
.bb-newsletter .bb-eyebrow--light { color: var(--blossom); }

/* IG handle pills get the Blossom wash */
.ig-handle { background: var(--blossom-mist); color: var(--coral-deep); }

/* Marquee promises — accent the dot separators */
.marquee-track > span::after { background: var(--blossom); }

/* Footer wave bottom gradient pink-tinted */
.foot-wave-svg .wave-back { fill: var(--blossom-soft); }

/* PDP urgency dot */
.pdp-urgency-dot { background: var(--blossom); box-shadow: 0 0 0 4px var(--blossom-mist); }

/* Sustainability bar fill mid-stop */
.sustain-fill { background: linear-gradient(90deg, var(--blossom), var(--coral)); }

/* Quick view kicker line */
.qview-kicker { color: var(--blossom-deep); }

/* Recently-viewed kicker */
.rv-col { color: var(--blossom-deep); }

/* Tide widget "rising/falling" emphasis */
.tide-head h3 em { color: var(--blossom); }

/* Reef-stat percentage callout — pink overlay accent */
.cine-stat-label { color: var(--blossom); }

/* Cart drawer empty-state + drawer thumbnail wash */
.cart-drawer-empty svg { color: var(--blossom-deep); }
.cart-drawer-empty h4 { color: var(--navy); }

/* Story page handwritten signature */
.post-signature-script { color: var(--blossom-deep); }

/* Tablet-view divider accent */
hr.divider-pink {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--blossom), transparent);
  margin: 28px 0;
}

/* Moonlight (dark mode) tweaks so Blossom still reads */
html[data-theme="moonlight"] .promo-bar {
  background: linear-gradient(180deg, rgba(248, 182, 200, 0.18), rgba(248, 182, 200, 0.06));
}
html[data-theme="moonlight"] .chapter,
html[data-theme="moonlight"] .bb-eyebrow { color: var(--blossom); }

/* Discount code widget on /checkout.php (added 2026-06-19) */
.checkout-discount {
  margin: 14px 0;
  padding: 14px 16px;
  background: #fef9f3;
  border: 1px dashed #e7d5c7;
  border-radius: 8px;
}
.checkout-discount .auth-field span {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8a8f99;
}
.checkout-discount-row {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}
.checkout-discount-row input {
  flex: 1;
  padding: 9px 11px;
  border: 1px solid #e7d5c7;
  border-radius: 6px;
  font-family: 'JetBrains Mono', Menlo, Monaco, monospace;
  letter-spacing: 0.08em;
  font-weight: 700;
  text-transform: uppercase;
  background: #fff;
}
.checkout-discount-row .btn {
  padding: 9px 14px;
  font-size: 13px;
}
.checkout-discount-msg {
  margin: 8px 0 0;
  font-size: 13px;
  color: #8a8f99;
}
.checkout-discount-msg.is-ok  { color: #166c45; }
.checkout-discount-msg.is-err { color: #c43d2e; }
.checkout-discount-remove {
  background: none;
  border: 0;
  color: #c43d2e;
  font-size: 18px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.checkout-totals [data-line-row='discount'] dd { color: #c43d2e; }
/* =====================================================================
   VISUAL AUDIT — 2026-08-04
   Three defects found by rendering the live site at 390px and reading the
   computed styles, not by reading the source.
   ===================================================================== */

/* 1. The search icon was rendering as a raw browser button.
      Measured on the live site: background rgb(240,240,240) and
      "2px outset" — that is the user-agent default for <button>, and it
      sat in the header next to three transparent icons looking like an
      unfinished form control.

      .icon-btn was written for the <a> icons, which have no background or
      border of their own, so it never needed a reset. studio.js builds the
      search trigger as a real <button> with the same class (studio.js:80),
      and inherited the UA styling nothing was overriding.

      Reset here rather than on .search-btn so the next button that borrows
      .icon-btn does not reintroduce it. */
button.icon-btn {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* 2. The wishlist badge showed a grey "0".
      There was already an .is-empty class doing the right thinking — it
      greyed the badge when the count hit zero — but a badge exists to say
      "there is something here", and one reading zero is just noise sitting
      on the icon at all times.

      Hidden rather than removed from the DOM so cart.js can keep toggling
      one class, and the count stays available to the label. The button's
      aria-label already carries the real state ("Wishlist · 0 items"), and
      the badge is aria-hidden, so nothing is lost to a screen reader. */
.cart-count.is-empty {
  display: none;
}

/* 3. QUICK VIEW covered the product on every touch device.
      An earlier audit correctly made this button visible without hover —
      on a phone there is no hover, so it was unreachable. But the button is
      a full-bleed white slab (left:14px right:14px, solid #fff) designed to
      animate up on hover over a desktop card, and pinning it on meant a
      white bar across the middle of every product photo on mobile. The
      accessibility fix was right; the styling it revealed was not.

      So: still always visible on touch, but as a compact pill in the corner.
      min-height keeps it at the 44px touch target the rest of this file
      already respects, and the card image is legible again. */
@media (hover: none) {
  .bb-best-quick {
    left: auto;
    right: 12px;
    bottom: 12px;
    width: auto;
    min-height: 44px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    letter-spacing: 0.16em;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 2px 12px rgba(12, 44, 79, 0.18);
  }
}

/* =====================================================================
   HERO VIDEO — visible fallback when autoplay is refused (2026-08-04)

   Reported as "the hero video has issues playing". The video, the encodes
   and the delivery are all fine — desktop pulls hero.webm and mobile
   hero-mobile.mp4, both reach readyState 4 and play.

   What was missing is what happens when the browser says no. iOS Low Power
   Mode blocks autoplay outright, Android battery savers do the same, and
   browser settings can too. The script caught that rejection and added
   .vhero-video--paused — a class that existed nowhere in this stylesheet.
   The result was a frozen poster with no play button and no controls (the
   element is aria-hidden and has no `controls`), so a visitor had no way to
   start it and no reason to think it was anything but broken.
   ===================================================================== */

/* Slightly lift the still so it reads as a paused video rather than a
   background image someone forgot to replace. */
.vhero-video--paused {
  filter: saturate(0.92) brightness(0.96);
}

.vhero-play {
  position: absolute;
  left: 50%;
  bottom: clamp(88px, 14vh, 150px);
  transform: translateX(-50%);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;          /* same touch target the rest of the site uses */
  padding: 0 20px 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  background: rgba(12, 44, 79, 0.42);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .3s ease, border-color .3s ease, transform .3s ease;
}
.vhero-play svg { width: 18px; height: 18px; }
.vhero-play:hover,
.vhero-play:focus-visible {
  background: rgba(12, 44, 79, 0.62);
  border-color: rgba(255, 255, 255, 0.85);
}
.vhero-play:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.vhero-play[hidden] { display: none; }

/* The hero headline is the priority on a phone; keep the button clear of it
   and out of the way of the scroll cue. */
@media (max-width: 720px) {
  .vhero-play {
    bottom: clamp(72px, 11vh, 110px);
    font-size: 10px;
    letter-spacing: 0.14em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vhero-play { transition: none; }
}

/* Contact-form honeypot — off-screen rather than display:none, because some
   bots skip hidden fields but not positioned ones. Never focusable. */
.contact-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Scroll lock — the rule the JS has always assumed existed.
   js/main.js:15-31 stores the scroll position, sets body{top:-Ypx} and toggles
   .fm-locked, but nothing in this stylesheet ever defined it. Without position
   fixed the offset does nothing and the page scrolls happily behind the cart
   drawer, the quick-view modal and the photo lightbox — while the JS carefully
   restores a scroll position that was never held. */
body.fm-locked {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
}