/* ============================================================
   GLOBAL STYLING
   ============================================================ */

:root {
  /* Warm off-white/cream — matches the video background so the
     <video> blends seamlessly with no harsh edges. */
  --color-bg: #F7F5F0;
  --color-heading: #1A1A1A;
  --color-body: #333333;
  /* Soft light grey used for the product card hover state. */
  --color-card-hover: #EFEDE8;

  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-overline: 'Montserrat', system-ui, sans-serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: auto; /* JS drives the scrub; keep native scrolling linear */
}

body {
  background-color: var(--color-bg);
  color: var(--color-body);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-heading);
  color: var(--color-heading);
  font-weight: 500;
  line-height: 1.2;
}

/* ============================================================
   HERO SCROLL ANIMATION
   ------------------------------------------------------------
   .hero-track defines the scroll distance consumed by the video
   scrub. Change --scroll-length to make the scrub longer/shorter
   (keep it in sync with SCROLL_LENGTH_VH in script.js).
   ============================================================ */

.hero-track {
  /* Total scrollable height of the hero. 400vh = the user scrolls
     ~4 screen-heights to scrub the full video timeline. */
  --scroll-length: 400vh;
  position: relative;
  height: var(--scroll-length);
  background-color: var(--color-bg);
}

.hero-sticky {
  /* Pins the video to the viewport while .hero-track scrolls past. */
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: var(--color-bg);
}

.hero-video {
  /* cover = fills the viewport edge-to-edge (no letterbox bars).
     Trade-off: the video is cropped to fit, so some top/bottom or
     left/right may be clipped depending on aspect ratio. */
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: none;
  outline: none;
  background-color: var(--color-bg);
}

/* ============================================================
   HERO TEXT OVERLAY
   ------------------------------------------------------------
   Floats above the video/canvas, pinned to the vertical centre
   on the left. Children fade + slide in from the left on load.
   ============================================================ */

:root {
  /* Warm saturated gold — overline + button border. Richer than the
     pale #EADDC4, but lighter than the original #C2A878 so it stays
     legible over the lighter video frames. */
  --color-accent: #D9BE86;
  /* Off-white/cream for the headline. */
  --color-cream: #F4F0E6;
}

/* Soft warm-dark scrim on the left so the cream headline stays
   legible over the light areas of the video, fading to fully
   transparent on the right so the video itself stays clean. */
.hero-sticky::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    rgba(26, 22, 16, 0.78) 0%,
    rgba(26, 22, 16, 0.52) 42%,
    rgba(26, 22, 16, 0) 78%
  );
}

.hero-overlay {
  position: absolute;
  top: 50%;
  left: 8%;
  transform: translateY(-50%);
  z-index: 10;
  max-width: 90%;
  text-align: left;
}

.hero-overline,
.hero-headline,
.hero-cta {
  opacity: 0;
  animation: heroIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.hero-overline {
  animation-delay: 0.15s;
}

.hero-headline {
  animation-delay: 0.3s;
}

.hero-cta {
  animation-delay: 0.45s;
}

@keyframes heroIn {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-overline,
  .hero-headline,
  .hero-cta {
    animation: none;
    opacity: 1;
  }
}

.hero-overline {
  font-family: var(--font-overline);
  font-size: clamp(0.625rem, 0.5rem + 0.4vw, 0.75rem);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-accent);
  margin-bottom: 28px;
}

.hero-headline {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(2.25rem, 1rem + 5vw, 5rem);
  line-height: 1.15;
  color: var(--color-cream);
  max-width: 11em;
  margin-bottom: 40px;
}

.hero-headline em {
  font-style: italic;
}

.hero-cta {
  display: inline-block;
  font-family: var(--font-overline);
  font-size: clamp(0.625rem, 0.5rem + 0.4vw, 0.75rem);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-accent);
  background-color: transparent;
  border: 1px solid var(--color-accent);
  padding: 16px 32px;
  text-decoration: none;
  transition: background-color 0.35s ease, color 0.35s ease;
}

.hero-cta:hover,
.hero-cta:focus-visible {
  background-color: var(--color-accent);
  color: var(--color-heading);
}

@media (max-width: 768px) {
  .hero-overlay {
    left: 0;
    right: 0;
    padding: 0 24px;
    max-width: 100%;
    text-align: center;
  }

  .hero-headline {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ============================================================
   BRAND MANIFESTO
   ------------------------------------------------------------
   Editorial two-column spread. 25% / 75% on desktop, stacked
   on mobile.
   ============================================================ */

.manifesto {
  background-color: #F7F6F2;
}

.manifesto-inner {
  /* Fluid width: fills most of the viewport with comfortable
     side gutters, capped so lines never get unreadably long. */
  width: 90vw;
  max-width: 1600px;
  margin: 0 auto;
  padding: 120px clamp(24px, 5vw, 80px);
  display: grid;
  /* Narrow fixed label column + flexible content column. 1fr
     correctly absorbs the gap (percentages + gap overflow). */
  grid-template-columns: 220px 1fr;
  gap: 80px;
  align-items: start;
}

.manifesto-overline {
  font-family: var(--font-overline);
  font-size: 0.6875rem; /* ~11px */
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #7A726A; /* muted grey/brown */
}

.manifesto-col-right {
  /* Fills the flexible track; the 1200px container caps line
     length, so no separate max-width void is needed. */
  max-width: none;
}

/* Strict left alignment for every element in the right column. */
.manifesto-statement,
.manifesto-quote,
.manifesto-body {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
}

.manifesto-statement {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(1.75rem, 1rem + 2.4vw, 2.5rem);
  line-height: 1.25;
  color: #333333;
}

.manifesto-statement em {
  font-style: italic;
}

.manifesto-quote {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: clamp(1.25rem, 1rem + 1vw, 1.5rem);
  line-height: 1.4;
  color: #B89E7A;
  border-left: 1px solid #B89E7A;
  padding-left: 15px;
  margin-top: 30px;
  margin-bottom: 30px;
}

.manifesto-body {
  font-family: var(--font-overline);
  font-size: 0.9375rem; /* 15px */
  font-weight: 400;
  line-height: 1.6;
  color: #333333;
  margin-top: 40px;
}

.manifesto-body em {
  font-style: italic;
}

@media (max-width: 768px) {
  .manifesto-inner {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 80px 24px;
  }

  .manifesto-overline {
    margin-bottom: 8px;
  }
}

/* ============================================================
   PRODUCT SELECTION
   ------------------------------------------------------------
   Editorial catalog grid with thin column dividers. Cards
   cross-fade + zoom between two images on hover.
   ============================================================ */

.product-selection {
  background-color: #EFEBE2; /* pale beige */
  padding: 100px clamp(24px, 5vw, 80px) 120px;
}

.selection-title {
  font-family: var(--font-overline);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #7A726A;
  text-align: center;
  padding: 20px 0;
  margin: 0 0 80px;
}

.product-grid {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.product-card {
  /* Thin editorial divider between columns. */
  border-right: 1px solid rgba(51, 51, 51, 0.12);
}

/* Wraps a card's contents in a link without becoming the grid/hover
   target itself — the .product-card keeps that role, so the existing
   hover cross-fade is unaffected. */
.product-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.product-card:nth-child(3n) {
  border-right: none;
}

.image-container {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
}

.img-base,
.img-grown {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.img-grown {
  opacity: 0;
}

.product-card:hover .img-grown {
  opacity: 1;
}

.product-card:hover .img-base,
.product-card:hover .img-grown {
  transform: scale(1.04);
}

.product-info {
  padding: 30px 20px;
  text-align: center;
}

.product-name {
  font-family: var(--font-overline);
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #333333;
  margin-bottom: 10px;
}

.product-meta {
  font-family: var(--font-overline);
  font-size: 0.8125rem;
  font-weight: 300;
  color: #8A8278;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Tablet: 2 columns; the third card centers on its own row. */
@media (max-width: 1024px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .product-card {
    border-right: 1px solid rgba(51, 51, 51, 0.12);
  }

  .product-card:nth-child(2n) {
    border-right: none;
  }

  .product-card:nth-child(3) {
    grid-column: 1 / -1;
    justify-self: center;
    width: 50%;
    border-right: none;
  }
}

/* Mobile: single column, swap vertical dividers for horizontal. */
@media (max-width: 768px) {
  .product-selection {
    padding: 64px 24px 80px;
  }

  .selection-title {
    margin-bottom: 48px;
  }

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

  .product-card,
  .product-card:nth-child(2n),
  .product-card:nth-child(3n) {
    border-right: none;
    border-bottom: 1px solid rgba(51, 51, 51, 0.12);
  }

  .product-card:nth-child(3) {
    grid-column: auto;
    justify-self: stretch;
    width: auto;
  }

  .product-card:last-child {
    border-bottom: none;
  }
}

/* ============================================================
   INGREDIENT SPOTLIGHT
   ------------------------------------------------------------
   50/50 editorial split: image (left) + story (right).
   Stacks image-first on mobile.
   ============================================================ */

.spotlight {
  background-color: #F2EFE9; /* slightly warmer contrast */
}

.spotlight-inner {
  /* Full-bleed: image runs to the left viewport edge, text
     extends right with only a small gutter. */
  width: 100%;
  margin: 0;
  padding: 100px 0;
  display: flex;
  gap: 60px;
}

.spotlight-media,
.spotlight-content {
  flex: 1 1 50%;
  min-width: 0;
}

.spotlight-image {
  width: 100%;
  height: 600px;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}

.spotlight-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  padding-right: 5%;
}

.spotlight-overline {
  font-family: var(--font-overline);
  font-size: 0.6875rem; /* ~11px */
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #7A726A;
  margin-bottom: 20px;
}

.spotlight-headline {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(2rem, 1rem + 2.6vw, 3rem);
  line-height: 1.2;
  color: #333333;
  margin-bottom: 30px;
}

.spotlight-headline em {
  font-style: italic;
}

.spotlight-quote {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.3rem;
  line-height: 1.4;
  color: #B89E7A;
  border-left: 1px solid #B89E7A;
  padding-left: 15px;
  margin-bottom: 30px;
}

.spotlight-body {
  font-family: var(--font-overline);
  font-size: 0.9375rem; /* 15px */
  font-weight: 400;
  line-height: 1.6;
  color: #333333;
}

@media (max-width: 768px) {
  .spotlight-inner {
    flex-direction: column;
    gap: 40px;
    padding: 64px 24px;
  }

  .spotlight-media,
  .spotlight-content {
    flex: 1 1 auto;
    width: 100%;
  }

  .spotlight-content {
    padding-right: 0;
  }

  .spotlight-image {
    height: 360px;
  }
}

/* ---------------------------------------------------------------
   RITUAL & APPLICATION
   Mirror of the Blessed Tree (spotlight) composition: full-bleed,
   image flush to one viewport edge, text extending to the other with
   only a small gutter. Here the image sits on the RIGHT and the text
   on the LEFT (spotlight is the reverse).
   --------------------------------------------------------------- */
.ritual {
  background-color: #EFEBE2; /* matches the Discover the Collection section */
}

.ritual-inner {
  /* Full-bleed: image runs to the right viewport edge, text
     extends left with only a small gutter. */
  width: 100%;
  margin: 0;
  padding: 100px 0;
  display: flex;
  gap: 60px;
}

.ritual-media,
.ritual-content {
  flex: 1 1 50%;
  min-width: 0;
}

.ritual-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  padding-left: 5%;
}

.ritual-overline {
  font-family: var(--font-overline);
  font-size: 0.6875rem; /* 11px */
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #B89E7A; /* muted gold */
  margin-bottom: 20px;
}

.ritual-headline {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(2.5rem, 1.5rem + 2vw, 3rem);
  line-height: 1.2;
  color: #333333;
  margin-bottom: 40px;
}

.ritual-headline em {
  font-style: italic;
}

.ritual-step {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding-bottom: 20px;
}

.ritual-step + .ritual-step {
  padding-top: 20px;
}

.ritual-step p {
  font-family: var(--font-overline);
  font-weight: 400;
  font-size: 0.875rem; /* 14px */
  line-height: 1.6;
  color: rgba(51, 51, 51, 0.8); /* slightly muted dark */
  margin: 0;
}

.ritual-step strong {
  font-weight: 600; /* Montserrat Semi-Bold */
  color: #1A1A1A;
}

.ritual-step em {
  font-style: italic;
}

.ritual-image {
  width: 100%;
  height: 600px;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}

@media (max-width: 768px) {
  .ritual-inner {
    flex-direction: column;
    gap: 40px;
    padding: 64px 24px;
  }

  .ritual-media,
  .ritual-content {
    flex: 1 1 auto;
    width: 100%;
  }

  .ritual-content {
    padding-left: 0;
  }

  /* Image above text on narrow screens. */
  .ritual-media {
    order: -1;
  }

  .ritual-image {
    height: 360px;
  }
}

/* ============================================================
   STORY BANNER
   ------------------------------------------------------------
   Full-width cinematic image with a dark scrim overlay so the
   cream text/button stay legible over any part of the photo.
   Content is centered both axes via flexbox.
   ============================================================ */

.story-banner {
  position: relative;
  width: 100%;
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url('assets/images/story-banner.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Subtle dark overlay for text legibility. */
.story-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.3);
}

.story-banner-inner {
  position: relative; /* sit above the ::before overlay */
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 24px;
}

/* Small, spaced Montserrat label — echoes the section overlines
   used elsewhere on the page. Cream tone for legibility. */
.story-banner-title {
  font-family: var(--font-overline);
  font-size: 0.8125rem; /* ~13px */
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  line-height: 1.4;
  color: var(--color-cream);
  margin-bottom: 32px;
}

.story-banner-cta {
  display: inline-block;
  font-family: var(--font-overline);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #FFFFFF;
  background-color: transparent;
  border: 1px solid #FFFFFF;
  padding: 16px 32px;
  text-decoration: none;
  transition: background-color 0.35s ease, color 0.35s ease;
}

.story-banner-cta:hover,
.story-banner-cta:focus-visible {
  background-color: #FFFFFF;
  color: var(--color-heading);
}

/* ============================================================
   GLOBAL HEADER (navigation)
   ------------------------------------------------------------
   Fixed and transparent by default (sits over the hero). The
   header IIFE in script.js adds .is-solid on scroll, swapping in
   a pale cream background + shadow and darkening the text.
   Interior pages carry .site-nav--solid so the JS leaves them
   permanently solid.
   ============================================================ */

.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  background-color: transparent;
  transition: background-color 0.4s ease, box-shadow 0.4s ease,
              transform 0.4s ease, opacity 0.4s ease;
}

/* Tucked out of view until the user begins scrolling (homepage). */
.site-nav.is-hidden {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

.site-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 5%;
}

/* Primary + utility link groups flank the centered logo. Equal
   flex on each side keeps the masthead optically centered. */
.nav-links {
  flex: 1;
  display: flex;
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-links--right {
  justify-content: flex-end;
}

.nav-links a {
  font-family: var(--font-overline);
  font-size: 0.6875rem; /* 11px */
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-cream);
  text-decoration: none;
  transition: color 0.4s ease, opacity 0.25s ease;
}

.nav-links a:hover,
.nav-links a:focus-visible {
  opacity: 0.6;
}

.nav-logo {
  flex: 0 0 auto;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--color-cream);
  text-decoration: none;
  text-align: center;
  transition: color 0.4s ease;
}

/* Mobile-only controls — hidden on desktop. */
.nav-toggle,
.nav-cart {
  display: none;
}

.nav-toggle {
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 26px;
  height: 22px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 100%;
  height: 1.5px;
  background-color: var(--color-cream);
  transition: background-color 0.4s ease;
}

.nav-cart {
  flex: 0 0 auto;
  color: var(--color-cream);
  transition: color 0.4s ease;
}

/* --- Solid (scrolled / interior) state ------------------- */
.site-nav.is-solid {
  background-color: #F7F6F2;
  box-shadow: 0 1px 0 rgba(26, 24, 23, 0.08),
              0 8px 24px rgba(26, 24, 23, 0.06);
}

.site-nav.is-solid .nav-links a,
.site-nav.is-solid .nav-logo,
.site-nav.is-solid .nav-cart {
  color: var(--color-heading);
}

.site-nav.is-solid .nav-toggle span {
  background-color: var(--color-heading);
}

/* --- Mobile dropdown panel ------------------------------- */
.nav-mobile {
  display: none;
  flex-direction: column;
  gap: 18px;
  padding: 20px 5% 30px;
  background-color: #F7F6F2;
  border-top: 1px solid rgba(26, 24, 23, 0.08);
}

.site-nav.menu-open .nav-mobile {
  display: flex;
}

.nav-mobile a {
  font-family: var(--font-overline);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-heading);
  text-decoration: none;
}

/* Interior pages: offset content so it clears the fixed header. */
body.interior {
  padding-top: 72px;
}

@media (max-width: 768px) {
  .nav-links {
    display: none;
  }

  .nav-toggle {
    display: flex;
  }

  .nav-cart {
    display: inline-flex;
    align-items: center;
  }
}

@media (min-width: 769px) {
  /* The dropdown is a mobile affordance only. */
  .nav-mobile {
    display: none !important;
  }
}

/* ============================================================
   GLOBAL FOOTER
   ------------------------------------------------------------
   Dark charcoal anchor. 3-column grid on desktop, single column
   on mobile/tablet, with a centered copyright bar below.
   ============================================================ */

.site-footer {
  background-color: #1A1817;
  color: #F7F6F2;
  padding: 80px 5% 0;
}

.footer-grid {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 60px;
  padding-bottom: 60px;
}

.footer-logo {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem);
  line-height: 1.1;
  color: #F7F6F2;
  margin-bottom: 24px;
}

.footer-ethos {
  font-family: var(--font-overline);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.8;
  color: rgba(247, 246, 242, 0.6);
  max-width: 38ch;
}

.footer-title {
  font-family: var(--font-overline);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #B89E7A;
  margin-bottom: 24px;
}

.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-links li {
  margin-bottom: 14px;
}

.footer-links a {
  font-family: var(--font-overline);
  font-size: 13px;
  font-weight: 400;
  color: #F7F6F2;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-links a:hover,
.footer-links a:focus-visible {
  color: #B89E7A;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 28px 0;
  text-align: center;
}

.footer-bottom p {
  font-family: var(--font-overline);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.05em;
  color: rgba(247, 246, 242, 0.6);
}

@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* ============================================================
   OUR STORY PAGE
   ------------------------------------------------------------
   Clean, centered editorial layout. Playfair headline over
   Montserrat body copy with relaxed line-height.
   ============================================================ */

.story-page {
  background-color: var(--color-bg);
}

.story-container {
  max-width: 800px;
  margin: 0 auto;
  padding: clamp(80px, 12vh, 160px) clamp(24px, 5vw, 40px);
  text-align: center;
}

.story-overline {
  font-family: var(--font-overline);
  font-size: 0.6875rem; /* ~11px */
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #7A726A;
  margin-bottom: 24px;
}

.story-headline {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(2.5rem, 1.5rem + 3vw, 3.75rem);
  line-height: 1.15;
  color: var(--color-heading);
  margin-bottom: 48px;
}

.story-text {
  font-family: var(--font-overline);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.8;
  color: #333333; /* dark charcoal */
  text-align: left;
}

.story-text + .story-text {
  margin-top: 28px;
}

/* ============================================================
   PRODUCT PAGE (e.g. haybah.html)
   ------------------------------------------------------------
   50/50 split: sticky image gallery (left) + buying area (right).
   Collapses to a single column at <=900px.
   ============================================================ */

.product-page {
  max-width: 1400px;
  margin: 0 auto;
  padding: 120px 5%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
}

/* --- Left: sticky image gallery -------------------------- */
.product-gallery {
  position: sticky;
  top: 120px;
  height: fit-content;
}

.product-figure {
  margin: 0;
  background-color: #F7F6F2;
  border-radius: 8px;
  overflow: hidden;
}

.product-figure img {
  display: block;
  width: 100%;
  height: auto;
}

/* --- Right: details & buying area ------------------------ */
.product-title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 3rem;
  line-height: 1.1;
  color: #333333;
  text-align: left;
}

.product-subtitle {
  font-family: var(--font-overline);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #7A726A;
  margin-top: 12px;
}

.product-desc {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.4;
  color: rgba(51, 51, 51, 0.85);
  margin-top: 15px;
}

.product-price {
  font-family: var(--font-overline);
  font-size: 1.2rem;
  font-weight: 600;
  color: #333333;
  margin-top: 20px;
}

/* ============================================================
   INTRODUCTORY SALE PRICING
   ------------------------------------------------------------
   Dual-price treatment shared by the homepage collection grid
   (.product-meta) and the product pages (.product-price):
   the original price is struck through and muted, the sale
   price stays prominent, and a small gold "Introductory Offer"
   label sits beneath the price on product pages.
   When the sale ends, restore the single "£30" markup and this
   block can be left in place (it only styles the sale spans).
   ============================================================ */

.price-original {
  text-decoration: line-through;
  color: #A8A096; /* muted grey-brown — recedes behind the sale price */
  font-weight: 400;
  margin-right: 0.4em;
}

.price-sale {
  color: var(--color-heading);
}

/* Small uppercase label beneath the price on product pages. */
.price-tag {
  display: block;
  font-family: var(--font-overline);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #B89E7A; /* brand gold, matches the editorial overlines */
  margin-top: 10px;
}

/* --- Action buttons -------------------------------------- */
.product-actions {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 30px;
}

.btn {
  width: 100%;
  padding: 18px 24px;
  font-family: var(--font-overline);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  text-align: center;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-add {
  background-color: transparent;
  border-color: #333333;
  color: #333333;
}

.btn-add:hover,
.btn-add:focus-visible {
  background-color: #EFEDE8;
}

.btn-buy {
  background-color: #333333;
  border-color: #333333;
  color: var(--color-cream);
}

.btn-buy:hover,
.btn-buy:focus-visible {
  background-color: #444444;
}

/* Shopify Buy Button: force the embed to fill the column so it
   matches the full-width native buttons. Scoped to .product-actions
   for reuse across product pages.

   The product renders inside an iframe whose container gets an inline
   `max-width: 280px` (sized to the button's content). We override that
   container + the iframe; the button inside is already width:100% via
   the embed's button styles, so it then stretches to fill. */
.product-actions .shopify-buy-frame,
.product-actions .shopify-buy-frame--product {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

.product-actions .shopify-buy-frame--product iframe {
  width: 100% !important;
}

/* These inner classes only apply if the iframe is ever disabled,
   but are harmless to keep. */
.product-actions .shopify-buy__product,
.product-actions .shopify-buy__btn-wrapper,
.product-actions .shopify-buy__btn {
  width: 100% !important;
  max-width: 100% !important;
}

/* --- Accordions (details / summary) ---------------------- */
.product-accordion {
  margin-top: 50px;
}

.product-accordion details {
  border-bottom: 1px solid #E5E5E5;
}

.product-accordion summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  font-family: var(--font-overline);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-heading);
}

/* Hide the native disclosure triangle, swap in a +/- indicator. */
.product-accordion summary::-webkit-details-marker {
  display: none;
}

.product-accordion summary::after {
  content: '+';
  margin-left: 16px;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
}

.product-accordion details[open] summary::after {
  content: '\2212'; /* minus sign */
}

.accordion-body {
  font-family: var(--font-overline);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  color: #333333;
  padding: 0 0 24px;
}

.attainment-list {
  margin: 0;
  padding-left: 20px;
}

.attainment-list li {
  margin-bottom: 12px;
}

.attainment-list li:last-child {
  margin-bottom: 0;
}

.attainment-list strong {
  font-weight: 600;
}

@media (max-width: 900px) {
  .product-page {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 90px 24px;
  }

  .product-gallery {
    position: static;
    top: auto;
  }

  .product-title {
    font-size: 2.25rem;
  }
}