/* =========================================================================
   MANGAL MUKHE — COMPONENTS
   Each block below maps to one recreatable section, so the layout can be
   rebuilt one-for-one as Elementor sections later.
   ========================================================================= */

/* ============================================================ TOP BAR === */

.topbar {
  background: var(--c-maroon-deep);
  color: var(--c-on-dark-mute);
  font-size: var(--fs-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(220, 190, 121, 0.18);
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  min-height: 38px;
  padding-block: 0.35rem;
}
.topbar__benefits {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2vw, 2rem);
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}
.topbar__benefits li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  white-space: nowrap;
}
.topbar__benefits li::before {
  content: "";
  width: 5px; height: 5px;
  transform: rotate(45deg);
  background: var(--c-gold-light);
  flex: none;
}
.topbar__social {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.topbar__social span { color: rgba(247, 239, 225, 0.55); }
.topbar__social a {
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  color: var(--c-on-dark-mute);
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.topbar__social a:hover { color: var(--c-maroon-deep); background: var(--c-gold-light); }
.topbar__social svg { width: 14px; height: 14px; }

/* Marquee-free mobile treatment: show a rotating single benefit */
.topbar__mobile { display: none; }

@media (max-width: 1023px) {
  .topbar__benefits, .topbar__social span { display: none; }
  .topbar__mobile {
    display: block;
    flex: 1;
    overflow: hidden;
    height: 1.2em;
    position: relative;
  }
  .topbar__mobile b {
    display: block;
    font-weight: 500;
    animation: mm-benefit 15s infinite;
  }
  @keyframes mm-benefit {
    0%, 16%   { transform: translateY(0); }
    20%, 36%  { transform: translateY(-100%); }
    40%, 56%  { transform: translateY(-200%); }
    60%, 76%  { transform: translateY(-300%); }
    80%, 96%  { transform: translateY(-400%); }
    100%      { transform: translateY(-500%); }
  }
}

/* ============================================================= HEADER === */

.site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: var(--c-ivory);
  border-bottom: 1px solid var(--c-line-soft);
  transition: box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.site-header.is-stuck { box-shadow: 0 1px 0 var(--c-line-soft), 0 10px 30px rgba(43, 33, 26, 0.07); }

/* The mobile drawer is a child of the header, so the header itself has to
   rise above the scrim while the menu is open. */
body.nav-open .site-header { z-index: 145; }

/* The frosted header is desktop-only on purpose: backdrop-filter makes the
   header a containing block for fixed children, which would trap the mobile
   nav drawer inside the header's own box. */
@media (min-width: 1024px) {
  .site-header {
    background: rgba(252, 248, 240, 0.92);
    backdrop-filter: saturate(1.2) blur(10px);
    -webkit-backdrop-filter: saturate(1.2) blur(10px);
  }
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  min-height: var(--header-h);
}

.brand-logo { flex: none; display: block; }
.brand-logo img {
  width: auto;
  height: clamp(42px, 3.6vw, 56px);
}

.main-nav { flex: 1 1 auto; }
.main-nav ul {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.9rem, 1.6vw, 1.9rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.main-nav li { margin: 0; }
.main-nav a {
  position: relative;
  display: block;
  padding: 0.4rem 0;
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  white-space: nowrap;
  transition: color var(--dur) var(--ease);
}
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--c-maroon);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.main-nav a:hover { color: var(--c-ink); }
.main-nav a:hover::after,
.main-nav a[aria-current="page"]::after { transform: scaleX(1); }
.main-nav a[aria-current="page"] { color: var(--c-maroon); }

.header-actions {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.icon-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  background: none;
  border: 0;
  border-radius: 50%;
  color: var(--c-ink);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.icon-btn:hover { background: var(--c-cream); color: var(--c-maroon); }
.icon-btn svg { width: 21px; height: 21px; }

.cart-count {
  position: absolute;
  top: 4px; right: 2px;
  min-width: 19px; height: 19px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  background: var(--c-maroon);
  color: var(--c-on-dark);
  border-radius: var(--radius-pill);
  font-size: 0.65rem;
  font-weight: 500;
  line-height: 1;
  border: 2px solid var(--c-ivory);
}

.nav-toggle { display: none; }

@media (max-width: 1150px) {
  .main-nav ul { gap: 0.85rem; }
  .main-nav a { letter-spacing: 0.08em; }
}

@media (max-width: 1023px) {
  .nav-toggle { display: grid; }
  .main-nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(360px, 86vw);
    background: var(--c-ivory);
    border-left: 1px solid var(--c-line-soft);
    box-shadow: var(--shadow-lg);
    transform: translateX(101%);
    visibility: hidden;
    transition: transform var(--dur) var(--ease), visibility var(--dur) var(--ease);
    z-index: 130;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: var(--sp-5) var(--sp-5) var(--sp-7);
  }
  .main-nav.is-open { transform: none; visibility: visible; }
  .main-nav__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: var(--sp-4);
    margin-bottom: var(--sp-4);
    border-bottom: 1px solid var(--c-line-soft);
  }
  .main-nav__head span {
    font-size: var(--fs-micro);
    letter-spacing: var(--track-mega);
    text-transform: uppercase;
    color: var(--c-gold);
  }
  .main-nav ul {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
  }
  .main-nav li + li { border-top: 1px solid var(--c-line-soft); }
  .main-nav a {
    padding: 1rem 0;
    font-size: 0.9rem;
    letter-spacing: 0.12em;
    color: var(--c-ink);
  }
  .main-nav a::after { display: none; }
  .main-nav__foot {
    margin-top: auto;
    padding-top: var(--sp-6);
    display: grid;
    gap: var(--sp-3);
  }
  .main-nav__contact {
    font-size: var(--fs-small);
    color: var(--c-ink-soft);
    line-height: 1.7;
    letter-spacing: 0;
    text-transform: none;
  }
  .main-nav__contact a {
    display: block;
    padding: 0.15rem 0;
    font-size: var(--fs-small);
    letter-spacing: 0;
    text-transform: none;
    color: var(--c-ink-soft);
    overflow-wrap: anywhere;
  }
}

.main-nav__head { display: none; }
@media (max-width: 1023px) { .main-nav__head, .main-nav__foot { display: flex; } .main-nav__foot { display: grid; } }
@media (min-width: 1024px) { .main-nav__foot { display: none; } }

.scrim {
  position: fixed;
  inset: 0;
  background: rgba(30, 22, 16, 0.45);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
  z-index: 120;
}
.scrim.is-open { opacity: 1; visibility: visible; }

/* ============================================================ SEARCH === */

.search-panel {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: var(--c-ivory);
  border-bottom: 1px solid var(--c-line);
  box-shadow: var(--shadow);
  padding: var(--sp-6) 0;
  transform: translateY(-105%);
  visibility: hidden;
  transition: transform var(--dur) var(--ease), visibility var(--dur) var(--ease);
  z-index: 140;
}
.search-panel.is-open { transform: none; visibility: visible; }
.search-panel form { display: flex; gap: var(--sp-3); align-items: center; }
.search-panel .input { min-height: 54px; font-size: 1.05rem; }
.search-results {
  margin-top: var(--sp-4);
  display: grid;
  gap: 0.35rem;
  max-height: 46vh;
  overflow-y: auto;
}
.search-results a {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 0.6rem;
  border-radius: var(--radius);
  transition: background var(--dur) var(--ease);
}
.search-results a:hover { background: var(--c-cream); }
.search-results img { width: 48px; height: 48px; object-fit: contain; flex: none; }
.search-results b { font-weight: 500; }
.search-results small { display: block; color: var(--c-ink-mute); font-size: var(--fs-micro); }
.search-empty { color: var(--c-ink-mute); font-size: var(--fs-small); padding: 0.6rem; }

/* ============================================================== HERO === */

/* Two scenes crossfade on a loop. Structure:
     .hero  >  .hero__slides  >  .hero__slide  >  .hero__media(--wide|--portrait)
   .hero__slides is absolute on desktop (filling the ratio-locked .hero) and
   in-flow on mobile (carrying its own portrait ratio), so a single slide
   mechanism serves both layouts. */

.hero {
  position: relative;
  isolation: isolate;
  background: var(--c-cream);
  overflow: hidden;
}

.hero__slides {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--hero-slide-dur) var(--ease);
}
.hero__slide.is-active { opacity: 1; }

.hero__media {
  position: absolute;
  inset: 0;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero__inner {
  position: relative;
  min-height: 480px;
  display: flex;
  align-items: center;
}

/* ---- Manual slide controls ----
   A sibling of .hero__slides rather than a child, so they are not trapped in
   the slides stacking context. The wrapper is sized to the image box at every
   breakpoint, which keeps the arrows vertically centred on the picture — not
   on the copy that sits beneath it on phones. */
.hero__nav {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: clamp(0.5rem, 1.4vw, 1.5rem);
  pointer-events: none;
}
.hero__nav-btn {
  pointer-events: auto;
  display: grid;
  place-items: center;
  width: clamp(34px, 3vw, 44px);
  height: clamp(34px, 3vw, 44px);
  padding: 0;
  border: 1px solid var(--c-line-gold);
  border-radius: 50%;
  background: rgba(252, 248, 240, 0.78);
  color: var(--c-maroon);
  cursor: pointer;
  opacity: 0.7;
  transition: opacity var(--dur) var(--ease), background var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.hero__nav-btn svg { width: 55%; height: 55%; }
.hero__nav-btn:hover,
.hero__nav-btn:focus-visible {
  opacity: 1;
  background: var(--c-ivory);
  transform: scale(1.06);
}
.hero:hover .hero__nav-btn { opacity: 1; }

@media (max-width: 1023px) {
  /* Match the portrait image box so the arrows stay on the picture. */
  .hero__nav {
    bottom: auto;
    aspect-ratio: var(--hero-ar-wide);
  }
}
@media (max-width: 767px) {
  .hero__nav { aspect-ratio: var(--hero-ar-portrait); }
}

/* The supplied art is 1920x900. Locking the box to that ratio means cover has
   nothing to trim, and capping the height at the artwork's own 900px stops the
   hero swallowing the whole page on large monitors. */
@media (min-width: 1024px) {
  .hero {
    /* Full-bleed edge to edge, with the box locked to the artwork's own
       1920:900 ratio. No height cap: capping the height would either crop the
       scene or pull the hero in from the viewport edges, and both are ruled
       out. The height therefore follows the viewport width. */
    aspect-ratio: var(--hero-ar-wide);
    min-height: 480px;
  }
  .hero__inner { min-height: 100%; }
}

.hero__copy {
  max-width: 34rem;
  padding-block: clamp(3rem, 5vw, 5rem);
}
.hero__title {
  font-size: var(--fs-hero);
  line-height: 0.98;
  letter-spacing: -0.01em;
  margin-bottom: var(--sp-4);
  text-transform: uppercase;
  font-weight: 600;
}
.hero__title .l2 { display: block; }
.hero__title em { font-style: normal; color: var(--c-maroon); }
.hero__sub {
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.2rem);
  color: var(--c-ink-soft);
  margin-bottom: var(--sp-6);
  max-width: 30ch;
}
.hero__sub b { display: block; font-weight: 500; color: var(--c-ink); }
.hero__estd {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: var(--sp-4);
  font-size: var(--fs-micro);
  letter-spacing: var(--track-mega);
  text-transform: uppercase;
  color: var(--c-maroon);
}
.hero__estd::before,
.hero__estd::after { content: ""; width: 26px; height: 1px; background: var(--c-line-gold); }

/* Desktop / laptop: landscape asset, copy over the open left of the frame.
   Both scenes place their jars centre-right, so the wash is held to the left
   40% and the copy stays readable across the crossfade. */
.hero__media--wide { display: block; }
.hero__media--portrait { display: none; }
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg,
      rgba(252, 248, 240, 0.96) 0%,
      rgba(252, 248, 240, 0.92) 24%,
      rgba(252, 248, 240, 0.62) 40%,
      rgba(252, 248, 240, 0.10) 56%,
      rgba(252, 248, 240, 0) 70%);
}

/* A 2.13:1 hero is only ~520px tall at 1100px wide, which is shorter than the
   full-size headline block. Rather than clip the copy or break the ratio lock,
   the type steps down on smaller laptops. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .hero__title { font-size: clamp(2.25rem, 0.6rem + 3.2vw, 3.15rem); }
  .hero__copy { padding-block: clamp(1.25rem, 2vw, 2rem); }
  .hero__sub { margin-bottom: var(--sp-5); font-size: 1rem; }
  .hero__estd { margin-bottom: var(--sp-3); }
}
@media (min-width: 1280px) and (max-width: 1439px) {
  .hero__copy { padding-block: clamp(2rem, 3vw, 3rem); }
}

/* Tablet & mobile: the dedicated portrait assets are composed scenes in their
   own right, so they are shown whole rather than cropped behind text. The copy
   sits beneath them on ivory — an intentionally different layout, not the
   desktop hero shrunk down. */
@media (max-width: 1023px) {
  .hero { display: block; background: var(--c-ivory); }
  .hero__slides {
    position: relative;
    inset: auto;
    z-index: 0;
    /* Tablets keep the landscape artwork (uncropped, just shorter); phones
       switch to the dedicated portrait scenes. */
    aspect-ratio: var(--hero-ar-wide);
  }
  .hero__slides::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 18%;
    background: linear-gradient(180deg, rgba(252, 248, 240, 0), var(--c-ivory) 92%);
    pointer-events: none;
    z-index: 2;
  }
  .hero__scrim { display: none; }
  .hero__inner {
    display: block;
    min-height: 0;
  }
  .hero__copy {
    max-width: 34rem;
    margin-inline: auto;
    text-align: center;
    padding-block: clamp(0.5rem, 2vw, 1.5rem) clamp(2.5rem, 7vw, 4rem);
  }
  .hero__sub { margin-inline: auto; }
  .hero__estd { justify-content: center; }
  .hero .btn-row { justify-content: center; }
}

/* Phones only: the dedicated portrait scenes, shown whole. */
@media (max-width: 767px) {
  .hero__slides { aspect-ratio: var(--hero-ar-portrait); }
  .hero__media--wide { display: none; }
  .hero__media--portrait { display: block; }
}

@media (max-width: 599px) {
  .hero__title { font-size: clamp(2.1rem, 1.2rem + 6.2vw, 3rem); }
  .hero .btn-row .btn { flex: 1 1 100%; }
}

/* One slide only when motion is reduced — no automatic transitions at all. */
@media (prefers-reduced-motion: reduce) {
  .hero__slide { transition: none; }
}

/* ====================================================== STORY SPLIT === */

.split {
  display: grid;
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1.05fr 1fr; }
  .split--reverse .split__media { order: 2; }
}

.split__media { position: relative; }
.split__media img {
  width: 100%;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}

/* Line-art illustrations are not photographs: no card frame, no shadow, no
   background plate. They simply sit in the column at full width. */
.split__media--plain::after { display: none; }
.split__media--plain img {
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  width: 100%;
  max-width: 640px;
  margin-inline: auto;
}
@media (min-width: 900px) {
  .split__media--plain img { max-width: 100%; }
}
.split__media::after {
  content: "";
  position: absolute;
  inset: 14px -14px -14px 14px;
  border: 1px solid var(--c-line-gold);
  border-radius: var(--radius-sm);
  z-index: -1;
}
@media (max-width: 600px) {
  .split__media::after { inset: 10px -10px -10px 10px; }
}

/* Opt a plain line-art block back into a thin outline — same treatment the
   founder photograph carries — so the ESTD badge has something to sit on. */
.split__media--framed::after {
  display: block;
  inset: -14px -14px 14px 14px;
}
@media (max-width: 600px) {
  .split__media--framed::after { inset: -10px -10px 10px 10px; }
}

.estd-badge {
  position: absolute;
  right: -18px;
  bottom: -22px;
  width: clamp(88px, 12vw, 116px);
  height: clamp(88px, 12vw, 116px);
  display: grid;
  place-items: center;
  text-align: center;
  border-radius: 50%;
  background: var(--c-maroon);
  color: var(--c-on-dark);
  box-shadow: var(--shadow);
  border: 2px solid var(--c-gold-light);
  font-family: var(--font-display);
  line-height: 1.1;
}
.estd-badge span {
  display: block;
  font-family: var(--font-body);
  font-size: 0.6rem;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--c-gold-light);
}
.estd-badge b { font-size: clamp(1.3rem, 2vw, 1.7rem); font-weight: 600; letter-spacing: 0.02em; }
@media (max-width: 600px) { .estd-badge { right: 8px; bottom: -16px; } }

/* Small heritage pillars used beside the story copy */
.pillars {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4) var(--sp-5);
  margin-block: var(--sp-6);
}
@media (min-width: 620px) { .pillars { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pillar { text-align: center; }
.pillar__icon {
  width: 54px; height: 54px;
  margin: 0 auto 0.7rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--c-line-gold);
  border-radius: 50%;
  color: var(--c-gold);
}
.pillar__icon svg { width: 24px; height: 24px; }
.pillar h3 {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 0.2rem;
}
.pillar p { font-size: var(--fs-micro); color: var(--c-ink-mute); margin: 0; line-height: 1.5; }

/* ====================================================== WHY CHOOSE === */

.benefit-grid {
  display: grid;
  gap: 1px;
  background: var(--c-line-soft);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--radius-sm);
  overflow: hidden;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 700px)  { .benefit-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .benefit-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.benefit {
  background: var(--c-ivory);
  padding: clamp(1.5rem, 2.4vw, 2.25rem) var(--sp-4);
  text-align: center;
  transition: background var(--dur) var(--ease);
}
.benefit:hover { background: var(--c-ivory-warm); }
.benefit__icon {
  width: 52px; height: 52px;
  margin: 0 auto var(--sp-3);
  display: grid;
  place-items: center;
  border: 1px solid var(--c-line-gold);
  border-radius: 50%;
  color: var(--c-gold);
}
.benefit__icon svg { width: 24px; height: 24px; }
.benefit h3 {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 0.35rem;
}
.benefit p { font-size: var(--fs-micro); color: var(--c-ink-mute); margin: 0; line-height: 1.55; }

@media (min-width: 1080px) {
  .benefit { padding: 2.4rem 1.35rem 2.6rem; }
  .benefit__icon { width: 64px; height: 64px; margin-bottom: var(--sp-4); }
  .benefit__icon svg { width: 29px; height: 29px; }
  .benefit h3 { font-size: 0.8rem; margin-bottom: 0.55rem; }
  .benefit p { font-size: 0.8rem; line-height: 1.6; }
}

/* ========================================================= PRODUCTS === */

.product-grid {
  display: grid;
  gap: clamp(1rem, 1.6vw, 1.75rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 760px)  { .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Five across only once there is room for it: below 1280px the cards would be
   under ~230px wide, so the grid falls back to three and they stay large. */
@media (min-width: 1280px) { .product-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .product-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.product-card {
  display: flex;
  flex-direction: column;
  background: var(--c-ivory);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.product-card:hover {
  border-color: var(--c-line-gold);
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}
.product-card__media {
  position: relative;
  display: block;
  background: var(--c-ivory-warm);
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.product-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease), opacity var(--dur) var(--ease);
}
.product-card__media img.is-alt {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.product-card:hover .product-card__media img.is-base { opacity: 0; }
.product-card:hover .product-card__media img.is-alt  { opacity: 1; }
.product-card:hover .product-card__media img { transform: scale(1.03); }

.product-card__tag {
  position: absolute;
  top: 0.7rem; left: 0.7rem;
  padding: 0.3rem 0.6rem;
  background: rgba(252, 248, 240, 0.92);
  border: 1px solid var(--c-line-gold);
  border-radius: var(--radius-sm);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-maroon);
}

.product-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(0.9rem, 1.4vw, 1.35rem);
  text-align: center;
}
/* Reserve two lines for the name so price and CTA rows line up across a row
   of cards whose titles wrap differently. */
.product-card__name {
  min-height: 2.5em;
  font-family: var(--font-display);
  font-size: clamp(0.98rem, 0.9rem + 0.35vw, 1.15rem);
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 0.3rem;
}
.product-card__name a:hover { color: var(--c-maroon); }
.product-card__meta {
  font-size: var(--fs-micro);
  letter-spacing: 0.12em;
  color: var(--c-ink-mute);
  margin-bottom: 0.55rem;
}
.product-card__blurb {
  font-size: var(--fs-small);
  color: var(--c-ink-soft);
  line-height: 1.55;
  margin: 0 0 0.7rem;
}
.product-card__price {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--c-maroon);
  margin: 0 0 var(--sp-4);
}
.product-card__price s {
  font-size: 0.85rem;
  color: var(--c-ink-mute);
  margin-left: 0.4rem;
  font-weight: 400;
}
.product-card__actions { margin-top: auto; display: grid; gap: 0.4rem; }

@media (max-width: 500px) {
  .product-card__blurb { display: none; }
  .product-card__body { padding: 0.8rem 0.65rem 0.9rem; }
}

/* ============================================================ COMBOS === */

.combo-grid {
  display: grid;
  gap: clamp(1rem, 2vw, 1.75rem);
  grid-template-columns: 1fr;
}
@media (min-width: 780px) { .combo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.combo-card {
  display: flex;
  flex-direction: column;
  background: var(--c-ivory);
  border: 1px solid var(--c-line-gold);
  border-radius: var(--radius-sm);
  padding: clamp(1.35rem, 2.2vw, 2rem);
  text-align: center;
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.combo-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.combo-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0 0 0.5rem;
}
.combo-card__kicker {
  font-size: var(--fs-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-ink-mute);
  line-height: 1.7;
  margin-bottom: var(--sp-4);
}
.combo-card__media {
  display: block;
  margin-bottom: var(--sp-4);
  background: var(--c-ivory-warm);
  border-radius: var(--radius-sm);
  overflow: hidden;
  /* Square, matching the source photography — a 4:3 window used to crop a
     quarter off the top and bottom of every collection shot. */
  aspect-ratio: 1 / 1;
}
.combo-card__media img {
  width: 100%; height: 100%;
  object-fit: contain;
  transition: transform 0.6s var(--ease);
}
.combo-card:hover .combo-card__media img { transform: scale(1.04); }
.combo-card__includes {
  list-style: none;
  margin: auto 0;
  padding: 0;
  font-size: var(--fs-small);
  color: var(--c-ink-soft);
}
.combo-card__includes li {
  margin: 0;
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--c-line-soft);
}
.combo-card__includes li:last-child { border-bottom: 0; }
.combo-card__foot {
  margin-top: var(--sp-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-line-gold);
}
.combo-card__price {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.2rem + 0.6vw, 1.75rem);
  font-weight: 600;
  color: var(--c-maroon);
}
@media (max-width: 420px) {
  .combo-card__foot { flex-direction: column; }
  .combo-card__foot .btn { width: 100%; }
}

/* =========================================================== PARTNER === */

.partner-band {
  position: relative;
  overflow: hidden;
  background: var(--c-maroon);
  color: var(--c-on-dark);
  padding-block: clamp(3rem, 2rem + 4vw, 5rem);
}
.partner-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 140% at 12% 0%, rgba(185, 143, 62, 0.22), transparent 55%),
    radial-gradient(90% 120% at 100% 100%, rgba(0, 0, 0, 0.28), transparent 60%);
}
.partner-band .deco--left  { left: -4%;  top: 50%; transform: translateY(-50%); width: min(300px, 26%); opacity: 0.16; filter: brightness(0) invert(1); }
.partner-band .deco--right { right: -4%; top: 50%; transform: translateY(-50%); width: min(300px, 26%); opacity: 0.16; filter: brightness(0) invert(1); }
.partner-band--hero { padding-block: clamp(3.5rem, 2rem + 5vw, 6rem); }
.partner-band--hero h1 { color: var(--c-on-dark); margin-bottom: var(--sp-3); }

.partner-band__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(1.75rem, 3vw, 3rem);
  align-items: center;
}
@media (min-width: 940px) { .partner-band__inner { grid-template-columns: 1.15fr 1fr; } }

.partner-band h2 { color: var(--c-on-dark); margin-bottom: var(--sp-3); }
.partner-band .eyebrow { color: var(--c-gold-light); }
.partner-band .eyebrow::after, .partner-band .eyebrow::before { background: rgba(220, 190, 121, 0.4); }
.partner-band p { color: var(--c-on-dark-mute); max-width: 52ch; }

.partner-points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-5);
}
@media (min-width: 620px) { .partner-points { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 940px) { .partner-points { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.partner-point {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  text-align: left;
}
.partner-point__icon {
  flex: none;
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(220, 190, 121, 0.45);
  border-radius: 50%;
  color: var(--c-gold-light);
}
.partner-point__icon svg { width: 19px; height: 19px; }
.partner-point b {
  display: block;
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-on-dark);
  margin-bottom: 0.15rem;
}
.partner-point span { font-size: var(--fs-micro); color: var(--c-on-dark-mute); line-height: 1.5; }

/* ============================================================ SOCIAL === */

.social-band {
  display: grid;
  gap: var(--sp-5);
  align-items: center;
}
@media (min-width: 900px) {
  .social-band { grid-template-columns: 1fr auto; }
}
.social-buttons { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

.social-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 48px;
  padding: 0.8rem 1.4rem;
  border-radius: var(--radius-sm);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: #fff;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), filter var(--dur) var(--ease);
}
.social-btn svg { width: 18px; height: 18px; flex: none; }
.social-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); filter: saturate(1.1); }
.social-btn--fb { background: #1877F2; }
.social-btn--ig { background: linear-gradient(60deg, #F9A03F 0%, #E4405F 48%, #A02D8E 100%); }
.social-btn--wa { background: #128C7E; }

/* ========================================================== HERITAGE === */

.heritage {
  position: relative;
  background: var(--c-ivory-warm);
  overflow: hidden;
  text-align: center;
  padding-block: clamp(3rem, 2rem + 4vw, 5rem) 0;
  border-top: 1px solid var(--c-line-soft);
}
.heritage__copy { position: relative; z-index: 1; max-width: 640px; margin-inline: auto; }
.heritage__art {
  position: relative;
  z-index: 0;
  margin-top: clamp(1.5rem, 3vw, 3rem);
  width: 100%;
}
/* Full-bleed, edge to edge, at the artwork’s own proportions. No max-width,
   no fade overlay and no mobile zoom — the panorama is shown whole. */
.heritage__art img {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0.85;
}


/* ============================================================ FOOTER === */

.site-footer {
  position: relative;
  background: var(--c-maroon-deep);
  color: var(--c-on-dark-mute);
  padding-top: clamp(2.75rem, 2rem + 3vw, 4.25rem);
  font-size: var(--fs-small);
}
.site-footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--c-gold), transparent);
  opacity: 0.55;
}
.footer-grid {
  display: grid;
  gap: clamp(1.75rem, 3vw, 2.75rem);
  grid-template-columns: 1fr;
}
@media (min-width: 620px)  { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr 1.6fr; } }

.footer-brand img { height: 62px; width: auto; margin-bottom: var(--sp-4); }
.footer-brand__line {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--c-gold-light);
  margin-bottom: var(--sp-3);
}
.footer-brand p { color: var(--c-on-dark-mute); line-height: 1.7; }

.footer-col h2 {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--c-gold-light);
  margin-bottom: var(--sp-4);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 0.6rem; }
.footer-col a { transition: color var(--dur) var(--ease), padding-left var(--dur) var(--ease); }
.footer-col a:hover { color: var(--c-gold-light); padding-left: 4px; }

.footer-contact { list-style: none; margin: 0; padding: 0; }
.footer-contact li {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  margin-bottom: 0.75rem;
  line-height: 1.6;
}
.footer-contact svg { width: 16px; height: 16px; flex: none; margin-top: 4px; color: var(--c-gold-light); }
.footer-contact a:hover { color: var(--c-gold-light); }

.footer-social { display: flex; gap: 0.5rem; margin-top: var(--sp-4); }
.footer-social a {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border: 1px solid rgba(220, 190, 121, 0.35);
  border-radius: 50%;
  color: var(--c-gold-light);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.footer-social a:hover { background: var(--c-gold-light); color: var(--c-maroon-deep); }
.footer-social svg { width: 16px; height: 16px; }

.footer-bar {
  margin-top: clamp(2rem, 3vw, 3rem);
  border-top: 1px solid rgba(247, 239, 225, 0.14);
  padding-block: var(--sp-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-micro);
  letter-spacing: 0.05em;
  color: rgba(247, 239, 225, 0.6);
}
.footer-bar .heart { color: var(--c-brand-red); }

/* ============================================================== CART === */

.cart-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(430px, 92vw);
  background: var(--c-ivory);
  box-shadow: var(--shadow-lg);
  z-index: 150;
  display: flex;
  flex-direction: column;
  transform: translateX(101%);
  visibility: hidden;
  transition: transform var(--dur) var(--ease), visibility var(--dur) var(--ease);
}
.cart-drawer.is-open { transform: none; visibility: visible; }

.cart-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-5);
  border-bottom: 1px solid var(--c-line-soft);
}
.cart-drawer__head h2 {
  font-size: 1.1rem;
  margin: 0;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.cart-drawer__added {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem var(--sp-5);
  background: rgba(76, 107, 60, 0.1);
  border-bottom: 1px solid rgba(76, 107, 60, 0.2);
  color: var(--c-green-deep);
  font-size: var(--fs-small);
  font-weight: 500;
}
.cart-drawer__added svg { width: 16px; height: 16px; flex: none; }
.cart-drawer__added[hidden] { display: none; }

.cart-drawer__body { flex: 1; overflow-y: auto; padding: var(--sp-5); }

.cart-line {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: var(--sp-3);
  padding-bottom: var(--sp-4);
  margin-bottom: var(--sp-4);
  border-bottom: 1px solid var(--c-line-soft);
}
.cart-line:last-child { border-bottom: 0; margin-bottom: 0; }
.cart-line__img {
  width: 72px; height: 72px;
  object-fit: cover;
  background: var(--c-ivory-warm);
  border-radius: var(--radius-sm);
}
.cart-line__name { font-weight: 500; font-size: var(--fs-small); line-height: 1.35; margin-bottom: 0.15rem; }
.cart-line__name a:hover { color: var(--c-maroon); }
.cart-line__meta { font-size: var(--fs-micro); color: var(--c-ink-mute); margin-bottom: 0.5rem; }
.cart-line__price { font-weight: 500; color: var(--c-maroon); white-space: nowrap; font-size: var(--fs-small); }
.cart-line__remove {
  display: block;
  margin-top: 0.5rem;
  background: none; border: 0; padding: 0;
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-ink-mute);
  cursor: pointer;
  text-align: right;
  width: 100%;
}
.cart-line__remove:hover { color: var(--c-maroon); }

.qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--c-ivory);
}
.qty button {
  width: 32px; height: 32px;
  background: none; border: 0;
  color: var(--c-ink);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.qty button:hover { background: var(--c-cream); }
.qty span {
  min-width: 30px;
  text-align: center;
  font-size: var(--fs-small);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.qty--lg button { width: 42px; height: 42px; }
.qty--lg span { min-width: 42px; }

.cart-empty { text-align: center; padding: var(--sp-7) var(--sp-4); color: var(--c-ink-mute); }
.cart-empty svg { width: 46px; height: 46px; margin: 0 auto var(--sp-4); color: var(--c-line-gold); }

.cart-drawer__foot {
  border-top: 1px solid var(--c-line-soft);
  padding: var(--sp-5);
  background: var(--c-ivory-warm);
  display: grid;
  gap: var(--sp-3);
}
.cart-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cart-total b {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--c-maroon);
  letter-spacing: 0;
}

/* Floating go-to-cart button — only rendered when the cart has items */
.cart-fab {
  position: fixed;
  right: clamp(1rem, 3vw, 1.75rem);
  bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: 80;
  width: 58px; height: 58px;
  display: none;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--c-maroon);
  color: var(--c-on-dark);
  box-shadow: 0 10px 28px rgba(94, 14, 24, 0.34);
  cursor: pointer;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
  animation: fab-in 0.4s var(--ease);
}
.cart-fab.is-visible { display: grid; }
.cart-fab:hover { transform: scale(1.06); background: var(--c-maroon-deep); }
.cart-fab svg { width: 23px; height: 23px; }
.cart-fab__count {
  position: absolute;
  top: -2px; right: -2px;
  min-width: 23px; height: 23px;
  padding: 0 6px;
  display: grid;
  place-items: center;
  background: var(--c-gold);
  color: #241A0F;
  border: 2px solid var(--c-ivory);
  border-radius: var(--radius-pill);
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1;
}
@keyframes fab-in {
  from { opacity: 0; transform: scale(0.6) translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* Add-to-cart toast (mobile-first feedback, complements the drawer) */
.toast {
  position: fixed;
  left: 50%;
  bottom: clamp(1rem, 3vw, 2rem);
  transform: translate(-50%, 140%);
  z-index: 160;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  max-width: min(420px, calc(100vw - 2rem));
  padding: 0.85rem 1.2rem;
  background: var(--c-ink);
  color: var(--c-on-dark);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  font-size: var(--fs-small);
  transition: transform 0.35s var(--ease), opacity 0.35s var(--ease);
  opacity: 0;
}
.toast.is-visible { transform: translate(-50%, 0); opacity: 1; }
.toast svg { width: 18px; height: 18px; color: var(--c-gold-light); flex: none; }

/* ==================================================== PRODUCT DETAIL === */

.pdp {
  display: grid;
  gap: clamp(1.75rem, 4vw, 4rem);
  align-items: start;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) { .pdp { grid-template-columns: 1.05fr 1fr; } }
@media (min-width: 900px) { .pdp__gallery { position: sticky; top: calc(var(--header-h) + 24px); } }

.gallery__stage {
  position: relative;
  background: var(--c-ivory-warm);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--radius-sm);
  overflow: hidden;
  aspect-ratio: 1 / 1;
}
.gallery__stage > div {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  position: absolute;
  inset: 0;
  transition: opacity 0.4s var(--ease);
}
.gallery__stage > div.is-active { opacity: 1; position: relative; }
.gallery__stage > div img { width: 100%; height: 100%; object-fit: cover; }

.gallery__thumbs {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.7rem;
}
.gallery__thumbs button {
  flex: 1 1 0;
  padding: 0;
  background: var(--c-ivory-warm);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 1 / 1;
  transition: border-color var(--dur) var(--ease);
  position: relative;
}
.gallery__thumbs button img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumbs button[aria-selected="true"] { border-color: var(--c-maroon); }
.gallery__thumbs button span {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: rgba(252, 248, 240, 0.9);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  padding: 2px 0;
}

.pdp__cat {
  font-size: var(--fs-micro);
  letter-spacing: var(--track-mega);
  text-transform: uppercase;
  color: var(--c-gold);
  margin-bottom: 0.6rem;
}
.pdp h1 { margin-bottom: 0.5rem; }
.pdp__tagline {
  font-size: var(--fs-lead);
  color: var(--c-ink-soft);
  margin-bottom: var(--sp-4);
}
.pdp__pricerow {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  padding-block: var(--sp-4);
  border-block: 1px solid var(--c-line-soft);
  margin-bottom: var(--sp-5);
}
.pdp__price {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 1.4rem + 1vw, 2.25rem);
  font-weight: 600;
  color: var(--c-maroon);
}
.pdp__size {
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  color: var(--c-ink-mute);
}
.pdp__tax { font-size: var(--fs-micro); color: var(--c-ink-mute); margin-left: auto; }

.pdp__highlights { list-style: none; margin: 0 0 var(--sp-5); padding: 0; }
.pdp__highlights li {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: var(--fs-small);
  color: var(--c-ink-soft);
  margin-bottom: 0.5rem;
}
.pdp__highlights svg { width: 15px; height: 15px; color: var(--c-green); flex: none; margin-top: 5px; }

.pdp__buy {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
  margin-bottom: var(--sp-5);
}
.pdp__buy .btn { flex: 1 1 200px; }

.pdp__badges { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: var(--sp-5); }
.pdp__badge {
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  border: 1px solid var(--c-line-gold);
  border-radius: var(--radius-pill);
  padding: 0.35rem 0.75rem;
}

.pdp__assurances {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--c-ivory-warm);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--radius-sm);
}
.pdp__assurance { display: flex; gap: 0.6rem; align-items: center; font-size: var(--fs-micro); color: var(--c-ink-soft); line-height: 1.4; }
.pdp__assurance svg { width: 20px; height: 20px; color: var(--c-gold); flex: none; }

/* ---- Description / Nutrition tabs ---- */

.tabs { margin-top: clamp(2.5rem, 4vw, 4rem); }
.tabs__list {
  display: flex;
  gap: clamp(1rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--c-line);
  margin-bottom: var(--sp-5);
}
.tabs__tab {
  position: relative;
  background: none;
  border: 0;
  padding: 0.85rem 0;
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--c-ink-mute);
  cursor: pointer;
  transition: color var(--dur) var(--ease);
}
.tabs__tab::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--c-maroon);
  transform: scaleX(0);
  transition: transform var(--dur) var(--ease);
}
.tabs__tab:hover { color: var(--c-ink); }
.tabs__tab[aria-selected="true"] { color: var(--c-maroon); }
.tabs__tab[aria-selected="true"]::after { transform: scaleX(1); }

.tabs__panel[hidden] { display: none; }
.tabs__panel { animation: tab-in 0.35s var(--ease); max-width: 900px; }
@keyframes tab-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.nutrition-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--sp-4);
  max-width: 520px;
}
.nutrition-table caption {
  text-align: left;
  font-size: var(--fs-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-ink-mute);
  padding-bottom: 0.6rem;
}
.nutrition-table th, .nutrition-table td {
  padding: 0.7rem 0.25rem;
  border-bottom: 1px solid var(--c-line-soft);
  text-align: left;
  font-size: var(--fs-small);
}
.nutrition-table thead th {
  font-size: var(--fs-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-gold);
  border-bottom: 1px solid var(--c-line-gold);
  font-weight: 500;
}
.nutrition-table td:last-child, .nutrition-table th:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

.detail-list { margin: 0; }
.detail-list div {
  display: grid;
  grid-template-columns: minmax(120px, 180px) 1fr;
  gap: var(--sp-4);
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--c-line-soft);
  font-size: var(--fs-small);
}
.detail-list dt { color: var(--c-ink-mute); letter-spacing: 0.04em; }
.detail-list dd { margin: 0; color: var(--c-ink); }
@media (max-width: 520px) {
  .detail-list div { grid-template-columns: 1fr; gap: 0.2rem; }
}

/* ============================================================== SHOP === */

.shop-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-bottom: clamp(1.75rem, 3vw, 2.75rem);
}
.shop-filter {
  background: none;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-pill);
  padding: 0.55rem 1.25rem;
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.shop-filter:hover { border-color: var(--c-gold); color: var(--c-ink); }
.shop-filter[aria-pressed="true"] {
  background: var(--c-maroon);
  border-color: var(--c-maroon);
  color: var(--c-on-dark);
}

.shop-group + .shop-group { margin-top: clamp(3rem, 5vw, 5rem); }
.shop-group__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem var(--sp-4);
  padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-5);
  border-bottom: 1px solid var(--c-line-gold);
}
.shop-group__head h2 { margin: 0; font-size: clamp(1.4rem, 1.2rem + 0.9vw, 1.9rem); }
.shop-group__head span { font-size: var(--fs-micro); letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-ink-mute); }

/* ====================================================== CART PAGE ===== */

.cart-layout { display: grid; gap: clamp(1.75rem, 3vw, 3rem); grid-template-columns: 1fr; }
@media (min-width: 940px) { .cart-layout { grid-template-columns: 1.6fr 1fr; align-items: start; } }

.cart-table { width: 100%; }
.cart-row {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: var(--sp-4);
  align-items: center;
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--c-line-soft);
}
.cart-row:first-child { border-top: 1px solid var(--c-line-soft); }
.cart-row__img { width: 96px; height: 96px; object-fit: cover; background: var(--c-ivory-warm); border-radius: var(--radius-sm); }
.cart-row__name { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; margin-bottom: 0.15rem; }
.cart-row__meta { font-size: var(--fs-micro); letter-spacing: 0.1em; color: var(--c-ink-mute); margin-bottom: 0.6rem; }
.cart-row__right { text-align: right; display: grid; gap: 0.5rem; justify-items: end; }
.cart-row__amount { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; color: var(--c-maroon); }
@media (max-width: 640px) {
  .cart-row { grid-template-columns: 76px 1fr; }
  .cart-row__img { width: 76px; height: 76px; }
  .cart-row__right { grid-column: 1 / -1; justify-items: stretch; text-align: left; display: flex; align-items: center; justify-content: space-between; }
}

.summary {
  background: var(--c-ivory-warm);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--radius-sm);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
}
@media (min-width: 940px) { .summary { position: sticky; top: calc(var(--header-h) + 24px); } }
.summary h2 { font-size: 1.15rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--sp-4); }
.summary__row {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: 0.55rem 0;
  font-size: var(--fs-small);
  color: var(--c-ink-soft);
}
.summary__row--total {
  border-top: 1px solid var(--c-line-gold);
  margin-top: var(--sp-3);
  padding-top: var(--sp-4);
  font-size: var(--fs-body);
  color: var(--c-ink);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.summary__row--total b {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--c-maroon);
  letter-spacing: 0;
  text-transform: none;
}
.summary__items { list-style: none; margin: 0 0 var(--sp-4); padding: 0 0 var(--sp-4); border-bottom: 1px solid var(--c-line-soft); }
.summary__items li { display: flex; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-small); margin-bottom: 0.5rem; }
.summary__items span { color: var(--c-ink-soft); }

/* ======================================================== CHECKOUT ==== */

.checkout-layout { display: grid; gap: clamp(1.75rem, 3vw, 3rem); grid-template-columns: 1fr; }
@media (min-width: 940px) { .checkout-layout { grid-template-columns: 1.5fr 1fr; align-items: start; } }

.checkout-step { margin-bottom: clamp(2rem, 3vw, 2.75rem); }
.checkout-step__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: var(--sp-4);
}
.checkout-step__num {
  width: 30px; height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--c-maroon);
  color: var(--c-on-dark);
  font-size: var(--fs-micro);
  font-weight: 500;
  flex: none;
}
.checkout-step__head h2 { margin: 0; font-size: 1.15rem; text-transform: uppercase; letter-spacing: 0.06em; }

.pay-options { display: grid; gap: 0.6rem; }
.pay-option {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  padding: var(--sp-4);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.pay-option:hover { border-color: var(--c-gold); }
.pay-option input { margin-top: 5px; accent-color: var(--c-maroon); flex: none; }
.pay-option:has(input:checked) { border-color: var(--c-maroon); background: rgba(124, 20, 32, 0.03); }
.pay-option b { display: block; font-weight: 500; margin-bottom: 0.15rem; }
.pay-option span { font-size: var(--fs-small); color: var(--c-ink-mute); line-height: 1.55; }
.pay-option--soon { opacity: 0.55; }

.order-done {
  text-align: center;
  max-width: 560px;
  margin-inline: auto;
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
}
.order-done__mark {
  width: 78px; height: 78px;
  margin: 0 auto var(--sp-5);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(76, 107, 60, 0.12);
  color: var(--c-green);
  border: 1px solid rgba(76, 107, 60, 0.3);
}
.order-done__mark svg { width: 34px; height: 34px; }
.order-ref {
  display: inline-block;
  margin-block: var(--sp-4);
  padding: 0.6rem 1.25rem;
  background: var(--c-ivory-warm);
  border: 1px dashed var(--c-line-gold);
  border-radius: var(--radius-sm);
  font-size: var(--fs-small);
  letter-spacing: 0.1em;
}

/* ========================================================= EDITORIAL === */

.prose { max-width: 72ch; }
/* Same visual weight as an h3, correct level in the outline. */
.h3 { font-size: var(--fs-h3); }
.prose h2 { margin-top: clamp(2.25rem, 3vw, 3rem); }
.prose h3 { margin-top: var(--sp-6); }
.prose > :first-child { margin-top: 0; }
.prose ul { padding-left: 1.2rem; }
.prose li { color: var(--c-ink-soft); }
.prose a.inline { color: var(--c-maroon); border-bottom: 1px solid var(--c-line-gold); }
.prose a.inline:hover { border-color: var(--c-maroon); }

.pull-quote {
  border-left: 2px solid var(--c-gold);
  padding: var(--sp-2) 0 var(--sp-2) var(--sp-5);
  margin-block: var(--sp-6);
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
  line-height: 1.5;
  color: var(--c-ink);
  font-style: italic;
}
.pull-quote cite {
  display: block;
  margin-top: var(--sp-3);
  font-family: var(--font-body);
  font-style: normal;
  font-size: var(--fs-micro);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--c-ink-mute);
}

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li {
  position: relative;
  padding-left: clamp(2.25rem, 4vw, 3rem);
  padding-bottom: clamp(1.75rem, 3vw, 2.5rem);
  margin: 0;
  border-left: 1px solid var(--c-line-gold);
}
.timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline li::before {
  content: "";
  position: absolute;
  left: -5px; top: 8px;
  width: 9px; height: 9px;
  transform: rotate(45deg);
  background: var(--c-gold);
}
.timeline b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--c-maroon);
  margin-bottom: 0.3rem;
}
.timeline p { color: var(--c-ink-soft); margin: 0; }

.founder-card { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 860px) { .founder-card { grid-template-columns: 0.85fr 1fr; } }
.founder-card__photo { position: relative; }
.founder-card__photo img {
  width: 100%;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}
.founder-card__photo::after {
  content: "";
  position: absolute;
  inset: -14px -14px 14px 14px;
  border: 1px solid var(--c-line-gold);
  border-radius: var(--radius-sm);
  z-index: -1;
}

/* ============================================================ FAQ ===== */

.faq { border-top: 1px solid var(--c-line-soft); }
.faq details {
  border-bottom: 1px solid var(--c-line-soft);
  padding: 0.35rem 0;
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
  font-weight: 600;
  color: var(--c-ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: 11px; height: 11px;
  border-right: 1.5px solid var(--c-gold);
  border-bottom: 1.5px solid var(--c-gold);
  transform: rotate(45deg) translateY(-3px);
  transition: transform var(--dur) var(--ease);
}
.faq details[open] summary::after { transform: rotate(225deg) translateY(-3px); }
.faq details[open] summary { color: var(--c-maroon); }
.faq__body { padding-bottom: var(--sp-4); color: var(--c-ink-soft); max-width: 78ch; }

/* ========================================================== CONTACT === */

.contact-grid { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); grid-template-columns: 1fr; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1fr 1.15fr; align-items: start; } }

.contact-cards { display: grid; gap: var(--sp-3); }
.contact-card {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
  padding: var(--sp-4);
  background: var(--c-ivory-warm);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.contact-card:hover { border-color: var(--c-line-gold); transform: translateY(-2px); }
.contact-card__icon {
  flex: none;
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--c-line-gold);
  border-radius: 50%;
  color: var(--c-gold);
}
.contact-card__icon svg { width: 19px; height: 19px; }
.contact-card b {
  display: block;
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--c-ink-mute);
  margin-bottom: 0.25rem;
}
.contact-card p { margin: 0; line-height: 1.6; font-size: var(--fs-small); }
.contact-card a:hover { color: var(--c-maroon); }

.map-frame {
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--c-cream);
  aspect-ratio: 16 / 8;
}
.map-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 700px) { .map-frame { aspect-ratio: 4 / 3; } }

.form-card {
  background: var(--c-ivory-warm);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--radius-sm);
  padding: clamp(1.35rem, 3vw, 2.25rem);
}

/* ======================================================= B2B PAGE ===== */

.b2b-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--c-line-soft);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
@media (min-width: 760px) { .b2b-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.b2b-stat { background: var(--c-ivory); padding: clamp(1.25rem, 2.5vw, 1.9rem) var(--sp-4); text-align: center; }
.b2b-stat b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.35rem);
  font-weight: 600;
  color: var(--c-maroon);
  line-height: 1.1;
  margin-bottom: 0.3rem;
}
.b2b-stat span { font-size: var(--fs-micro); letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-ink-mute); }

.step-grid { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; counter-reset: step; }
@media (min-width: 780px) { .step-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.step { position: relative; padding-top: var(--sp-5); border-top: 1px solid var(--c-line-gold); }
.step::before {
  counter-increment: step;
  content: "0" counter(step);
  position: absolute;
  top: -0.75rem;
  left: 0;
  background: var(--c-ivory);
  padding-right: 0.6rem;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--c-gold);
}
.step h3 { font-size: 1.05rem; margin-bottom: 0.4rem; }
.step p { font-size: var(--fs-small); color: var(--c-ink-soft); margin: 0; }

/* ================================================= MISC SMALL BLOCKS === */

.note-band {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
  padding: var(--sp-4) var(--sp-5);
  background: var(--c-ivory-warm);
  border-left: 3px solid var(--c-gold);
  border-radius: var(--radius-sm);
  font-size: var(--fs-small);
  color: var(--c-ink-soft);
  line-height: 1.65;
}
.note-band svg { width: 20px; height: 20px; color: var(--c-gold); flex: none; margin-top: 2px; }

.trust-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1rem, 3vw, 2.75rem);
  padding-block: var(--sp-5);
  border-block: 1px solid var(--c-line-soft);
}
.trust-strip div {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: var(--fs-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
}
.trust-strip svg { width: 18px; height: 18px; color: var(--c-gold); }

.seal {
  width: clamp(88px, 10vw, 118px);
  height: auto;
  opacity: 0.9;
}

/* Larger product cards where the wide container gives them room. */
@media (min-width: 1400px) {
  .product-card__body { padding: 1.5rem 1.25rem 1.6rem; }
  .product-card__name { font-size: 1.25rem; }
  .product-card__blurb { font-size: var(--fs-body); }
  .product-card__price { font-size: 1.35rem; }
  .combo-card { padding: 2.25rem; }
}