/* ==========================================================================
   pages.css — styles specific to individual pages
   ========================================================================== */

/* ============================== HOME: HERO ============================ */

.hero {
  position: relative;
  background: var(--grad-navy-deep);
  background-color: var(--navy-800);
  color: var(--cream-200);
  overflow: hidden;
  --heading: var(--white);
  --text: var(--cream-200);
  --text-soft: var(--cream-300);
}

/* Decorative layer: a woven hairline texture plus two soft glows, so the
   hero reads as a lit scene rather than a flat colour block. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    var(--texture-weave),
    radial-gradient(620px 380px at 12% 110%, rgba(201, 164, 92, 0.22), transparent 65%),
    radial-gradient(560px 360px at 88% -15%, rgba(47, 128, 121, 0.32), transparent 62%);
  pointer-events: none;
}

.hero__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.9s var(--ease), visibility 0.9s;
}

.hero__slide.is-active {
  opacity: 1;
  visibility: visible;
}

.hero__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
      100deg,
      rgba(6, 20, 38, 0.94) 0%,
      rgba(6, 20, 38, 0.82) 42%,
      rgba(6, 20, 38, 0.42) 72%,
      rgba(6, 20, 38, 0.28) 100%
    ),
    linear-gradient(180deg, rgba(6, 20, 38, 0.35), transparent 40%, rgba(6, 20, 38, 0.6));
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 2;
  padding-block: clamp(4.5rem, 11vw, 8.5rem);
  min-height: clamp(520px, 80vh, 780px);
  display: flex;
  align-items: center;
}

.hero__content {
  max-width: 620px;
}

/* ---------------------------------------------------------------- *
 * Banner hero
 * The supplied landing banner is 2103x748 — 2.81:1, far wider than any
 * hero box. Forcing it into a tall box with object-fit: cover crops
 * away most of the artwork (measured: 60% visible at 1440px, 44% at
 * 1024px, and only 7% on a phone).
 *
 * So the banner is shown at its own natural aspect as a full-bleed
 * band, and the headline sits underneath it on the solid hero
 * background. Nothing is cropped and the text contrast never depends
 * on what happens to be in the picture.
 * ---------------------------------------------------------------- */

.hero--banner {
  background: var(--grad-navy-deep);
  background-color: var(--navy-800);
}

.hero--banner .hero__bg {
  position: relative;
  inset: auto;
  height: auto;
  overflow: visible;
  background: var(--cream-100);
}

.hero--banner .hero__slide {
  position: relative;
  inset: auto;
}

.hero--banner .hero__slide img {
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: cover;
  object-position: center;
}

/* Fade the bottom of the artwork into the hero background so the glass
   copy panel can overlap it without a hard seam. */
.hero--banner .hero__bg::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 38%;
  background: linear-gradient(180deg, transparent, rgba(6, 20, 38, 0.85));
  pointer-events: none;
}

/* No full scrim: the artwork is not behind the text. */
.hero--banner::after {
  display: none;
}

.hero--banner .hero__inner {
  min-height: 0;
  padding-block: clamp(1.5rem, 4vw, 3rem) clamp(3rem, 7vw, 5.5rem);
  align-items: flex-start;
  justify-content: center;
  margin-top: clamp(-2rem, -5vw, -4.5rem);
  position: relative;
  z-index: 2;
}

/* Glass copy panel: overlaps the artwork, guarantees contrast and gives
   the hero a layered, editorial composition. */
.hero--banner .hero__content {
  max-width: 800px;
  margin-inline: auto;
  text-align: center;
  padding: clamp(1.5rem, 4vw, 2.75rem) clamp(1.25rem, 4vw, 3rem);
  background: rgba(6, 20, 38, 0.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(216, 186, 121, 0.32);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-float), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.hero--banner .hero__actions,
.hero--banner .hero__proof {
  justify-content: center;
}

.hero--banner .hero__proof {
  border-top-color: rgba(250, 246, 239, 0.22);
}

.hero--banner .hero__text {
  margin-inline: auto;
}

@media (max-width: 640px) {
  .hero--banner .hero__title {
    font-size: var(--fs-3xl);
  }

  .hero--banner .hero__inner {
    margin-top: -1.25rem;
  }
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.4rem 1rem;
  border: 1px solid rgba(216, 186, 121, 0.5);
  border-radius: var(--r-pill);
  background: rgba(201, 164, 92, 0.16);
  color: var(--gold-300);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: var(--sp-4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.hero__badge svg {
  width: 14px;
  height: 14px;
}

.hero__title {
  font-size: clamp(2.3rem, 5.2vw, 4rem);
  color: var(--white);
  margin-bottom: var(--sp-4);
  text-wrap: balance;
  letter-spacing: -0.025em;
}

.hero__title em {
  font-style: normal;
  color: var(--gold-300);
}

/* Typewriter headline on the home hero.
   The caret and the typing engine already come from the shared .typewriter
   component in layout.css, so this block only rescales it for the hero and
   drops the component's own vertical margins. The static strings are in the
   markup (inside .sr-only), so the headline is never blank if JS is slow. */
.hero__typing {
  display: block;
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-2xl);
  font-weight: 500;
  line-height: var(--lh-snug);
  color: var(--gold-300);
}

.hero__typing .typewriter {
  display: block;
  margin: 0;
  min-height: 1.25em;
}

.hero__typing .typewriter__line {
  font-family: var(--font-display);
  font-size: inherit;
  font-style: normal;
  font-weight: 500;
  color: inherit;
}

.hero__typing .typewriter__caret {
  background: var(--gold-300);
}

.hero__brand {
  display: block;
  font-family: var(--font-body);
  font-size: clamp(1.0625rem, 1.5vw, 1.375rem);
  font-weight: 600;
  line-height: 1.4;
  color: var(--cream-100);
  margin: 0 0 var(--sp-5);
}

.hero__text {
  font-size: var(--fs-lg);
  color: var(--cream-300);
  max-width: 52ch;
  margin-bottom: var(--sp-6);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}

.hero__proof {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(250, 246, 239, 0.18);
}

.hero__proof-item {
  flex: 1 1 150px;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  background: rgba(253, 251, 247, 0.07);
  border: 1px solid rgba(250, 246, 239, 0.14);
  text-align: center;
}

.hero__proof-item strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  color: var(--gold-300);
  line-height: 1.2;
}

.hero__proof-item span {
  font-size: var(--fs-xs);
  color: var(--cream-400);
}

/* --------------------------- trust strip row ------------------------- */

.trust-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
  padding-block: var(--sp-5);
  border-block: 1px solid var(--line-soft);
}

.trust-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-lg);
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.trust-item:hover {
  background: linear-gradient(135deg, rgba(201, 164, 92, 0.14), rgba(47, 128, 121, 0.08));
  transform: translateY(-2px);
}

.trust-item__icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--grad-brand-soft);
  color: var(--navy-800);
  box-shadow: var(--sh-inset-line);
}

.trust-item__icon svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.6;
}

.trust-item strong {
  display: block;
  font-size: var(--fs-sm);
  color: var(--heading);
}

.trust-item span {
  font-size: var(--fs-xs);
  color: var(--text-mute);
}

/* --------------------------- category tiles -------------------------- */

.category-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}

.category-card {
  position: relative;
  display: block;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--navy-800);
  box-shadow: var(--sh-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.category-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-lg);
}

.category-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease-out);
}

.category-card:hover img {
  transform: scale(1.06);
}

.category-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 20, 38, 0.05) 30%, rgba(6, 20, 38, 0.85) 100%);
}

.category-card__body {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--sp-5);
  color: var(--cream-100);
}

.category-card__body h3 {
  color: var(--white);
  font-size: var(--fs-xl);
  margin-bottom: var(--sp-1);
}

.category-card__body p {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--cream-300);
  margin: 0;
}

.category-card__count {
  display: inline-block;
  margin-top: var(--sp-2);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-300);
}

/* ---------------------------- routine steps -------------------------- */

.routine {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: var(--sp-5);
  counter-reset: routine;
}

/* The hidden tab panel must actually disappear: the grid display above would
   otherwise win over the user-agent [hidden] rule. */
.routine[hidden] {
  display: none;
}

.routine__step {
  position: relative;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-card);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.routine__step:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-card-hover);
}

.routine__step::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--grad-brand);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}

.routine__step:hover::after {
  opacity: 1;
}

/* Step image: full-bleed at the top of the card, number badge over it. */
.routine__media {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--cream-200);
}

.routine__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-slow) var(--ease);
}

.routine__step:hover .routine__img {
  transform: scale(1.06);
}

.routine__num {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 30px;
  padding: 0 0.7rem;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.92);
  color: var(--navy-800);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  box-shadow: var(--sh-card);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.routine__body {
  padding: var(--sp-5);
}

.routine__step h3 {
  font-size: var(--fs-lg);
  margin-bottom: var(--sp-2);
}

.routine__step p {
  font-size: var(--fs-sm);
  color: var(--text-soft);
  margin: 0;
}

.routine__step .badge {
  margin-top: var(--sp-3);
}

/* ------------------------------ story block -------------------------- */

.story-media {
  position: relative;
}

.story-media__badge {
  position: absolute;
  right: calc(-1 * var(--sp-5));
  bottom: var(--sp-5);
  background: var(--surface);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5);
  box-shadow: var(--sh-md);
  text-align: center;
  max-width: 200px;
}

.story-media__badge strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  color: var(--navy-800);
  line-height: 1.1;
}

.story-media__badge span {
  font-size: var(--fs-xs);
  color: var(--text-mute);
}

/* --------------------------- values / pillars ------------------------ */

.value-card {
  text-align: left;
  height: 100%;
  position: relative;
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.value-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh-card-hover);
  border-color: rgba(201, 164, 92, 0.55);
}

/* Soft corner wash that appears on hover. */
.value-card::after {
  content: '';
  position: absolute;
  top: -60px;
  right: -60px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: var(--grad-gold-glow);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease);
  pointer-events: none;
}

.value-card:hover::after {
  opacity: 1;
}

.value-card__icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  background: linear-gradient(140deg, var(--gold-200), var(--cream-300));
  color: var(--navy-700);
  margin-bottom: var(--sp-4);
  border: 1px solid rgba(201, 164, 92, 0.4);
  box-shadow: var(--sh-inset-line);
  transition: transform var(--dur) var(--ease-spring);
}

.value-card:hover .value-card__icon {
  transform: rotate(-6deg) scale(1.06);
}

.value-card__icon svg {
  width: 24px;
  height: 24px;
  stroke-width: 1.5;
}

.value-card h3 {
  font-size: var(--fs-lg);
  margin-bottom: var(--sp-2);
}

.value-card p {
  font-size: var(--fs-sm);
  color: var(--text-soft);
  margin: 0;
}

/* ----------------------------- reviews strip ------------------------- */

.review-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  box-shadow: var(--sh-card);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.review-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--sh-card-hover);
  border-color: rgba(201, 164, 92, 0.5);
}

/* Oversized opening quote mark as a decorative watermark. */
.review-card::before {
  content: '\201C';
  position: absolute;
  top: -18px;
  right: 14px;
  font-family: var(--font-display);
  font-size: 6rem;
  line-height: 1;
  color: rgba(201, 164, 92, 0.16);
  pointer-events: none;
}

.review-card > * {
  position: relative;
}

.review-card__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.review-card__avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--navy-800);
  color: var(--gold-300);
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 600;
  flex: 0 0 auto;
}

.review-card__who strong {
  display: block;
  font-size: var(--fs-sm);
  color: var(--heading);
}

.review-card__who span {
  font-size: var(--fs-xs);
  color: var(--text-mute);
}

.review-card__text {
  font-size: var(--fs-sm);
  color: var(--text-soft);
  margin: 0;
  flex: 1 1 auto;
}

.review-card__verified {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--success);
}

.review-card__verified svg {
  width: 13px;
  height: 13px;
  stroke-width: 2.4;
}

/* sample-data disclaimer used next to ratings/reviews */
.sample-note {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--text-mute);
}

.sample-note::before {
  content: 'i';
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--ink-300);
  font-size: 0.625rem;
  font-style: italic;
}

/* ------------------------------ newsletter --------------------------- */

.newsletter {
  background: var(--grad-navy-deep);
  background-color: var(--navy-800);
  border-radius: var(--r-xl);
  padding: clamp(2rem, 5vw, 3.5rem);
  color: var(--cream-200);
  text-align: center;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(216, 186, 121, 0.3);
  box-shadow: var(--sh-float);
}

/* Ribbon along the top edge ties the panel to the header/footer family. */
.newsletter::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--grad-ribbon);
}

.newsletter::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    var(--texture-weave),
    radial-gradient(340px 220px at 85% 0%, rgba(201, 164, 92, 0.25), transparent 70%),
    radial-gradient(300px 220px at 10% 100%, rgba(47, 128, 121, 0.3), transparent 70%);
  pointer-events: none;
}

.newsletter > * {
  position: relative;
  z-index: 1;
}

.newsletter h2 {
  color: var(--white);
}

.newsletter p {
  color: var(--cream-300);
  max-width: 52ch;
  margin-inline: auto;
}

.newsletter__form {
  display: flex;
  gap: var(--sp-3);
  max-width: 480px;
  margin: var(--sp-5) auto 0;
  flex-wrap: wrap;
}

.newsletter__form .form-control {
  flex: 1 1 220px;
  background: rgba(253, 251, 247, 0.08);
  border-color: rgba(250, 246, 239, 0.25);
  color: var(--white);
}

.newsletter__form .form-control::placeholder {
  color: var(--cream-400);
}

.newsletter__form .form-control:focus {
  background: rgba(253, 251, 247, 0.14);
  border-color: var(--gold-400);
}

.newsletter__form .form-control option {
  color: var(--ink-900);
}

/* ========================= SHOP + COLLECTION PAGE ==================== */

/* Shared editorial intro for the Shop and Collection pages: a light, compact
   band with the breadcrumb above a two-column copy/media hero. */
.catalogue-intro {
  background:
    radial-gradient(760px 300px at 96% -30%, rgba(201, 164, 92, 0.16), transparent 60%),
    radial-gradient(620px 280px at 0% 130%, rgba(47, 128, 121, 0.08), transparent 60%),
    linear-gradient(180deg, var(--cream-100), var(--cream-50));
  color: var(--ink-700);
  padding-block: clamp(2rem, 5vw, 3.5rem);
  border-bottom: 1px solid var(--line-soft);
  --heading: var(--navy-800);
  --text: var(--ink-500);
  --text-soft: var(--ink-500);
  --text-mute: var(--ink-400);
}

.catalogue-intro .breadcrumb {
  margin-bottom: var(--sp-5);
}

.catalogue-intro .breadcrumb a,
.catalogue-intro .breadcrumb li {
  color: var(--ink-500);
}

.catalogue-intro .breadcrumb li + li::before {
  color: var(--ink-300);
}

.catalogue-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(1.25rem, 4vw, 3rem);
  align-items: center;
}

.catalogue-hero__copy {
  max-width: 46ch;
}

/* Collections without a hero image (legacy leaf categories) collapse to a
   single, readable column instead of leaving an empty half. */
.catalogue-hero--copy-only {
  grid-template-columns: minmax(0, 1fr);
}

.catalogue-hero--copy-only .catalogue-hero__copy {
  max-width: 62ch;
}

.catalogue-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-body);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-800);
  margin-bottom: var(--sp-3);
  padding: 0.3rem 0.85rem;
  border-radius: var(--r-pill);
  background: rgba(201, 164, 92, 0.16);
  border: 1px solid rgba(143, 111, 51, 0.34);
}

.catalogue-hero__eyebrow::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold-600);
  flex: 0 0 auto;
}

.catalogue-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-2xl), 5vw, var(--fs-4xl));
  line-height: 1.1;
  color: var(--navy-800);
  margin-bottom: var(--sp-3);
}

.catalogue-hero__copy p {
  color: var(--ink-500);
  font-size: var(--fs-lg);
  margin: 0;
}

.catalogue-hero__media {
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-card-hover);
  border: 1px solid var(--line-soft);
}

.catalogue-hero__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
}

.catalogue-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  list-style: none;
  margin: var(--sp-5) 0 0;
  padding: 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--navy-700);
}

.catalogue-hero__meta li {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

.catalogue-hero__meta li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold-600);
  flex: 0 0 auto;
}

.catalogue-hero__note {
  margin: var(--sp-4) 0 0;
  font-size: var(--fs-sm);
  color: var(--ink-400);
}

/* ---- quick filter chips (collection page) ---- */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.4rem 0.85rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--navy-700);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease-spring);
}

.filter-chip:hover {
  border-color: var(--gold-500);
  transform: translateY(-1px);
}

.filter-chip.is-active {
  color: var(--navy-800);
  background: linear-gradient(135deg, rgba(201, 164, 92, 0.22), rgba(47, 128, 121, 0.12));
  border-color: rgba(143, 111, 51, 0.5);
}

.filter-chip__count {
  font-size: var(--fs-2xs);
  font-variant-numeric: tabular-nums;
  color: var(--ink-300);
}

.filter-chip.is-active .filter-chip__count {
  color: var(--gold-800);
}

/* ---- collection switcher tabs ---- */
.collection-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
}

.collection-tab {
  appearance: none;
  -webkit-appearance: none;
  padding: 0.55rem 1.15rem;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-500);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-pill);
  cursor: pointer;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease-spring);
}

.collection-tab:hover {
  color: var(--navy-700);
  border-color: var(--gold-500);
  transform: translateY(-1px);
}

.collection-tab.is-active {
  color: var(--cream-50);
  background: var(--navy-800);
  border-color: var(--navy-800);
}

/* ---- sticky result toolbar (frosted, pins under the header) ---- */
.toolbar--sticky {
  position: sticky;
  top: calc(var(--header-h) + var(--announce-h));
  z-index: 15;
  background: rgba(253, 251, 247, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.filter-group {
  padding-bottom: var(--sp-4);
  margin-bottom: var(--sp-4);
  border-bottom: 1px solid var(--line-soft);
}

.filter-group:last-child {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

.filter-group__title {
  font-family: var(--font-body);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: var(--sp-3);
}

.filter-options {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  max-height: 220px;
  overflow-y: auto;
}

.filter-options label {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0;
  padding: 0.3rem 0.45rem;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--ink-700);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.filter-options label:hover {
  background: var(--cream-100);
  color: var(--heading);
}

.filter-options label:active {
  background: var(--cream-200);
}

.filter-options label:has(input:checked) {
  font-weight: 600;
  color: var(--navy-700);
  background: var(--gold-200);
}

.filter-options__count {
  margin-left: auto;
  font-size: var(--fs-xs);
  color: var(--ink-300);
}

/* ---- filter panel header / drawer footer ---- */

.sidebar__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding-bottom: var(--sp-4);
  margin-bottom: var(--sp-4);
  border-bottom: 1px solid var(--line-soft);
}

.sidebar__head h2 {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  margin: 0;
}

.sidebar__head-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.filter-reset {
  font-size: var(--fs-xs);
}

.mobile-filter-close {
  display: none;
}

/* Actions pinned to the bottom of the filter panel on small screens. */
.sidebar__foot {
  display: none;
  gap: var(--sp-2);
  padding-top: var(--sp-4);
  margin-top: var(--sp-4);
  border-top: 1px solid var(--line-soft);
}

/* Full-screen dimmer behind the mobile filter drawer; visible only while
   the drawer is open. */
.filter-backdrop {
  display: none;
}

.field-hint.is-error {
  color: var(--danger);
}

.range-inputs {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.range-inputs input {
  padding: 0.45rem 0.6rem;
}

.select-inline {
  min-width: 170px;
  width: auto;
}

.mobile-filter-toggle {
  display: none;
}

/* ============================ PRODUCT PAGE =========================== */

.product-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}

.product-gallery {
  position: sticky;
  top: calc(var(--header-h) + var(--announce-h) + 1rem);
  display: grid;
  gap: var(--sp-3);
}

.product-gallery__main {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: linear-gradient(150deg, var(--cream-100), var(--cream-200));
  border: 1px solid var(--line-soft);
  box-shadow: var(--sh-card);
}

.product-gallery__main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3);
}

.product-thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 2px solid transparent;
  background: var(--cream-200);
  padding: 0;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease);
}

.product-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-thumb.is-active {
  border-color: var(--brand);
}

.product-thumb:hover {
  border-color: var(--gold-300);
}

.product-info__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}

.product-info__title {
  font-size: var(--fs-3xl);
  margin-bottom: var(--sp-2);
}

.product-info__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--text-soft);
  margin-bottom: var(--sp-4);
}

.product-info__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--sp-3);
  padding: var(--sp-4) 0;
  border-block: 1px solid var(--line-soft);
  margin-bottom: var(--sp-4);
}

.product-info__price-now {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: 600;
  color: var(--navy-800);
  line-height: 1;
}

.product-info__price-was {
  font-size: var(--fs-lg);
  color: var(--ink-300);
  text-decoration: line-through;
}

.product-info__price-off {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--success);
}

.product-info__desc {
  color: var(--text-soft);
  margin-bottom: var(--sp-4);
}

.product-info__desc li {
  font-size: var(--fs-sm);
}

.buy-row {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: var(--sp-4);
}

.buy-row .btn {
  flex: 1 1 190px;
}

.kit-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-2) var(--sp-4);
}

.kit-list li {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--ink-700);
}

.kit-list li::before {
  content: '';
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  background: var(--brand);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")
    center / contain no-repeat;
}

.usage-note {
  font-size: var(--fs-sm);
  color: var(--text-soft);
  background: var(--cream-100);
  border-left: 3px solid var(--teal-400);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: var(--sp-4);
}

/* ---------- kit spotlight (home #kit, navy section) --------------------
   Inside .section--navy the old rules produced dark text on dark navy
   (kit list) and cream text on a cream panel (usage note) — both invisible.
   The list becomes numbered glass cards and the usage note a glass panel. */
#kit .kit-list {
  grid-template-columns: 1fr;
  gap: var(--sp-3);
}

#kit .kit-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin: 0;
  padding: var(--sp-3) var(--sp-4);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-md);
  color: var(--cream-100);
  font-size: var(--fs-base);
  line-height: var(--lh-snug);
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease);
}

#kit .kit-list li:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(232, 211, 164, 0.45);
  transform: translateY(-1px);
}

#kit .kit-list li::before {
  content: none;
}

.kit-item__n {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--grad-brand);
  color: var(--navy-900);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-xs);
  line-height: 1;
  margin-top: 1px;
  box-shadow: var(--sh-gold);
}

.kit-item__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.kit-item__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2);
}

.kit-item__head strong {
  color: var(--white);
  font-weight: 600;
}

.kit-item__size {
  font-size: var(--fs-2xs);
  color: var(--gold-300);
  border: 1px solid rgba(232, 211, 164, 0.4);
  border-radius: var(--r-pill);
  padding: 0.05rem 0.55rem;
  white-space: nowrap;
}

.kit-item__note {
  color: var(--cream-400);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}

#kit .usage-note {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-left: 3px solid var(--gold-400);
  color: var(--cream-200);
  padding: var(--sp-4) var(--sp-5);
}

.usage-note__title {
  display: block;
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-300);
  margin-bottom: var(--sp-3);
}

.usage-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-2);
}

.usage-steps li {
  position: relative;
  margin: 0;
  padding-left: var(--sp-5);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--cream-200);
}

.usage-steps li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold-400);
}

.assurance-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}

.assurance {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--ink-700);
}

.assurance svg {
  width: 16px;
  height: 16px;
  color: var(--success);
  flex: 0 0 auto;
}

.affiliate-inline {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  background: #f2f9f8;
  border: 1px solid #cfe7e4;
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--teal-600);
}

.affiliate-inline input {
  flex: 1 1 180px;
  width: auto;
  background: var(--white);
}

.affiliate-inline .btn {
  flex: 0 0 auto;
}

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

.cart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 0.9fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}

.cart-panel {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  box-shadow: var(--sh-card);
}

.summary-card {
  position: sticky;
  top: calc(var(--header-h) + var(--announce-h) + 1rem);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  box-shadow: var(--sh-card-hover);
}

.summary-card h3 {
  font-size: var(--fs-lg);
  margin-bottom: var(--sp-4);
}

.summary-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  padding: var(--sp-2) 0;
  color: var(--ink-700);
}

.summary-row--total {
  border-top: 1px solid var(--line);
  margin-top: var(--sp-3);
  padding-top: var(--sp-4);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--heading);
}

.summary-row--total .summary-row__value {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
}

.summary-row--discount .summary-row__value {
  color: var(--success);
}

.summary-card .btn {
  margin-top: var(--sp-4);
}

.summary-card__note {
  font-size: var(--fs-xs);
  color: var(--text-mute);
  margin-top: var(--sp-3);
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
}

.summary-card__note svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--teal-500);
}

/* step indicator */
.steps {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  list-style: none;
  margin: 0 0 var(--sp-6);
  padding: 0;
}

.steps li {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-400);
}

.steps li + li::before {
  content: '';
  width: 26px;
  height: 1px;
  background: var(--line);
}

.steps__num {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: var(--surface);
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--ink-400);
  flex: 0 0 auto;
}

.steps li.is-done,
.steps li.is-active {
  color: var(--heading);
}

.steps li.is-done .steps__num {
  background: var(--success);
  border-color: var(--success);
  color: var(--white);
}

.steps li.is-active .steps__num {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--navy-900);
}

/* checkout form blocks */
.form-section {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  margin-bottom: var(--sp-5);
  box-shadow: var(--sh-card);
}

.form-section__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.form-section__num {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--navy-800);
  color: var(--gold-300);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  flex: 0 0 auto;
}

.form-section__head h2,
.form-section__head h3 {
  margin: 0;
  font-size: var(--fs-lg);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 var(--sp-4);
}

.form-grid .field--full {
  grid-column: 1 / -1;
}

.radio-cards {
  display: grid;
  gap: var(--sp-3);
}

.radio-card {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  cursor: pointer;
  margin: 0;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

.radio-card:hover {
  border-color: var(--gold-300);
  background: var(--cream-50);
}

.radio-card:has(input:checked) {
  border-color: var(--brand);
  background: var(--cream-50);
  box-shadow: 0 0 0 1px var(--brand);
}

.radio-card input {
  margin-top: 2px;
}

.radio-card__body {
  flex: 1 1 auto;
}

.radio-card__body strong {
  display: block;
  font-size: var(--fs-sm);
  color: var(--heading);
}

.radio-card__body span {
  font-size: var(--fs-xs);
  color: var(--text-mute);
}

/* saved address cards */
.address-card {
  position: relative;
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  cursor: pointer;
  margin: 0;
}

.address-card:has(input:checked) {
  border-color: var(--brand);
  box-shadow: 0 0 0 1px var(--brand);
  background: var(--cream-50);
}

.address-card__default {
  position: absolute;
  top: -8px;
  right: var(--sp-3);
}

/* ========================= PAYMENT / PROOF =========================== */

.proof-drop {
  position: relative;
  border: 2px dashed var(--cream-400);
  border-radius: var(--r-md);
  background: var(--cream-50);
  padding: var(--sp-6);
  text-align: center;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
  cursor: pointer;
}

.proof-drop:hover,
.proof-drop.is-drag {
  border-color: var(--brand);
  background: var(--cream-100);
}

.proof-drop input[type='file'] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.proof-drop__icon {
  width: 46px;
  height: 46px;
  margin: 0 auto var(--sp-3);
  color: var(--ink-300);
}

.proof-drop strong {
  display: block;
  color: var(--heading);
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-1);
}

.proof-drop span {
  font-size: var(--fs-xs);
  color: var(--text-mute);
}

.proof-preview {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  background: var(--surface);
}

.proof-preview img {
  width: 92px;
  height: 92px;
  object-fit: cover;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-soft);
  flex: 0 0 auto;
}

.payment-status-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.payment-status-list li {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: 0;
  padding: var(--sp-2) 0;
  font-size: var(--fs-sm);
  color: var(--ink-700);
}

.payment-status-list svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: var(--success);
}

.payment-status-list .is-pending svg {
  color: var(--ink-300);
}

.payment-status-list .is-pending {
  color: var(--ink-400);
}

/* ==================== ORDER CONFIRMATION / TRACK ===================== */

.confirm-hero {
  text-align: center;
  padding-block: clamp(2.5rem, 6vw, 4rem);
}

.confirm-hero__icon {
  width: 84px;
  height: 84px;
  margin: 0 auto var(--sp-4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--success-bg);
  color: var(--success);
}

.confirm-hero__icon svg {
  width: 40px;
  height: 40px;
  stroke-width: 2;
}

.order-number-box {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  justify-content: center;
  padding: var(--sp-3) var(--sp-5);
  background: var(--navy-800);
  color: var(--cream-100);
  border-radius: var(--r-md);
  margin-bottom: var(--sp-4);
}

.order-number-box strong {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--fs-lg);
  letter-spacing: 0.06em;
  color: var(--gold-300);
}

.order-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
}

.detail-box {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  padding: var(--sp-5);
}

.detail-box h3 {
  font-size: var(--fs-md);
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--line-soft);
}

.detail-box p:last-child,
.detail-box dl:last-child {
  margin-bottom: 0;
}

.kv {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-2) var(--sp-4);
  margin: 0;
  font-size: var(--fs-sm);
}

.kv dt {
  color: var(--text-mute);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
}

.kv dd {
  margin: 0;
  color: var(--ink-700);
  font-weight: 500;
  text-align: right;
}

/* tracker */
.tracker {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  padding: clamp(1.5rem, 4vw, 2.5rem);
}

.tracker__status {
  text-align: center;
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: var(--sp-5);
}

.tracker__status h2 {
  font-size: var(--fs-2xl);
  margin-bottom: var(--sp-2);
}

.tracker__status p {
  color: var(--text-soft);
  margin: 0;
}

.tracker__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3) var(--sp-5);
  margin-top: var(--sp-4);
  font-size: var(--fs-xs);
  color: var(--text-mute);
}

.tracker__meta strong {
  color: var(--heading);
  display: block;
  font-size: var(--fs-sm);
}

.tracker .timeline {
  max-width: 460px;
  margin-inline: auto;
}

/* ============================== ACCOUNT =============================== */

.account-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}

.account-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.account-nav li {
  margin: 0;
}

.account-nav button,
.account-nav a {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-700);
  background: none;
  border: 0;
  border-radius: var(--r-md);
  cursor: pointer;
  text-align: left;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.account-nav button:hover,
.account-nav a:hover {
  background: var(--cream-200);
  color: var(--heading);
}

.account-nav .is-active {
  background: var(--navy-800);
  color: var(--cream-100);
}

.account-nav .is-active:hover {
  background: var(--navy-700);
  color: var(--white);
}

.account-nav svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  stroke-width: 1.7;
}

.account-nav__count {
  margin-left: auto;
  font-size: var(--fs-2xs);
  font-weight: 700;
  background: var(--brand);
  color: var(--navy-900);
  border-radius: var(--r-pill);
  padding: 0.05rem 0.4rem;
}

.order-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--line-soft);
}

.order-row:last-child {
  border-bottom: 0;
}

.order-row__id {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--navy-800);
}

.order-row__meta {
  font-size: var(--fs-xs);
  color: var(--text-mute);
}

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

.partner-hero {
  background: linear-gradient(140deg, var(--teal-600), var(--navy-800) 70%);
  color: var(--cream-200);
  --heading: var(--white);
  --text: var(--cream-200);
  --text-soft: var(--cream-300);
}

.partner-hero h1 {
  color: var(--white);
}

.partner-hero p {
  color: var(--cream-300);
}

.partner-hero .eyebrow {
  color: var(--gold-300);
}

.step-list {
  counter-reset: pstep;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-4);
}

.step-list li {
  position: relative;
  counter-increment: pstep;
  margin: 0;
  padding-left: 3.25rem;
  min-height: 40px;
}

.step-list li::before {
  content: counter(pstep);
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--grad-navy);
  color: var(--gold-300);
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 600;
  box-shadow: var(--sh-card), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.step-list strong {
  display: block;
  color: var(--heading);
  font-size: var(--fs-md);
  margin-bottom: var(--sp-1);
}

.step-list span {
  font-size: var(--fs-sm);
  color: var(--text-soft);
}

.earnings-callout {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(420px 260px at 80% 0%, rgba(201, 164, 92, 0.24), transparent 65%),
    var(--grad-navy);
  background-color: var(--navy-800);
  border-radius: var(--r-xl);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  color: var(--cream-200);
  text-align: center;
  border: 1px solid rgba(216, 186, 121, 0.34);
  box-shadow: var(--sh-float);
}

.earnings-callout::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--grad-ribbon);
}

.earnings-callout__amount {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  color: var(--gold-300);
  line-height: 1.1;
  text-shadow: 0 6px 24px rgba(201, 164, 92, 0.35);
}

.earnings-callout p {
  font-size: var(--fs-sm);
  color: var(--cream-300);
  margin: var(--sp-2) 0 0;
}

.partner-dashboard {
  background: var(--cream-100);
  border-radius: var(--r-lg);
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--line-soft);
}

.agent-id-card {
  background: var(--navy-800);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5);
  color: var(--cream-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.agent-id-card__label {
  font-size: var(--fs-2xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream-400);
  font-weight: 700;
  margin-bottom: var(--sp-1);
}

.agent-id-card__value {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--gold-300);
  letter-spacing: 0.08em;
}

.agent-id-card .copy-btn {
  background: rgba(250, 246, 239, 0.12);
  border-color: rgba(250, 246, 239, 0.2);
  color: var(--cream-200);
}

.agent-id-card .copy-btn:hover {
  background: rgba(250, 246, 239, 0.22);
  color: var(--white);
}

.agent-id-card .copy-btn.is-copied {
  background: var(--success);
  color: var(--white);
  border-color: var(--success);
}

.share-link-box {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.share-link-box input {
  flex: 1 1 240px;
  width: auto;
  font-size: var(--fs-sm);
  background: var(--cream-100);
}

.payout-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-3) 0;
  border-bottom: 1px dashed var(--line);
  font-size: var(--fs-sm);
}

.payout-row:last-child {
  border-bottom: 0;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 600;
}

.status-pill::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink-300);
}

.status-pill--active::before {
  background: var(--success);
  box-shadow: 0 0 0 3px rgba(46, 125, 91, 0.18);
}

.status-pill--pending::before {
  background: var(--warn);
  box-shadow: 0 0 0 3px rgba(160, 106, 28, 0.18);
}

.status-pill--off::before {
  background: var(--ink-300);
}

/* ============================== ABOUT ================================ */

.story-timeline {
  position: relative;
  padding-left: var(--sp-6);
}

.story-timeline::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(180deg, var(--gold-400), var(--cream-300));
}

.story-timeline__item {
  position: relative;
  padding-bottom: var(--sp-6);
}

.story-timeline__item:last-child {
  padding-bottom: 0;
}

.story-timeline__item::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--sp-6) + 2px);
  top: 6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 3px var(--bg);
}

.story-timeline__year {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--brand-dark);
  display: block;
  margin-bottom: var(--sp-1);
}

/* The old round-avatar team cards and the CEO card were retired in the
   About-page redesign (task 4); the editorial team + leadership styles live in
   the ABOUT block near the end of this file. */

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

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}

.contact-methods {
  display: grid;
  gap: var(--sp-3);
}

.contact-method {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

.contact-method:hover {
  border-color: var(--gold-300);
  transform: translateY(-2px);
}

.contact-method__icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--navy-800);
  color: var(--gold-300);
}

.contact-method__icon svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.6;
}

.contact-method strong {
  display: block;
  font-size: var(--fs-sm);
  color: var(--heading);
}

.contact-method span,
.contact-method a {
  font-size: var(--fs-sm);
  color: var(--text-soft);
}

.map-frame {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--cream-200);
  border: 1px solid var(--line-soft);
}

.map-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.map-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  text-align: center;
  padding: var(--sp-5);
  background: linear-gradient(150deg, var(--cream-200), var(--cream-300));
  color: var(--ink-500);
}

.map-placeholder svg {
  width: 34px;
  height: 34px;
  color: var(--ink-400);
}

.map-placeholder strong {
  color: var(--heading);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
}

.map-placeholder span {
  font-size: var(--fs-xs);
  max-width: 34ch;
}

/* =============================== POLICIES ============================= */

.policy-layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}

.policy-toc {
  position: sticky;
  top: calc(var(--header-h) + var(--announce-h) + 1rem);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5);
}

.policy-toc h2 {
  font-family: var(--font-body);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: var(--sp-3);
}

.policy-toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: toc;
}

.policy-toc li {
  margin: 0;
  counter-increment: toc;
}

.policy-toc a {
  display: block;
  padding: var(--sp-2) 0;
  font-size: var(--fs-sm);
  color: var(--text-soft);
  border-left: 2px solid transparent;
  padding-left: var(--sp-3);
  margin-left: calc(-1 * var(--sp-3));
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.policy-toc a:hover {
  color: var(--navy-800);
  border-left-color: var(--gold-300);
}

.policy-body h2 {
  font-size: var(--fs-xl);
  margin-top: var(--sp-6);
  padding-top: var(--sp-2);
  scroll-margin-top: calc(var(--header-h) + var(--announce-h) + 1.5rem);
}

.policy-body h2:first-child {
  margin-top: 0;
}

.policy-body h3 {
  font-size: var(--fs-md);
  margin-top: var(--sp-5);
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--heading);
}

.policy-body p,
.policy-body li {
  font-size: var(--fs-sm);
  color: var(--ink-700);
}

.policy-body ul,
.policy-body ol {
  padding-left: 1.35rem;
  margin-bottom: var(--sp-4);
}

.policy-body li {
  margin-bottom: var(--sp-2);
}

.policy-body__head {
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--line-soft);
}

.policy-body__head h1 {
  font-size: var(--fs-3xl);
  margin-bottom: var(--sp-3);
}

.policy-body__head .lead {
  font-size: var(--fs-md);
  color: var(--text-soft);
  max-width: 62ch;
}

.policy-body__head .breadcrumb {
  margin-bottom: var(--sp-3);
}

.policy-section + .policy-section {
  border-top: 1px solid var(--line-soft);
  padding-top: var(--sp-5);
}

.policy-section > h2 {
  margin-top: 0;
}

.policy-body__foot {
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 2px solid var(--line-soft);
}

/* Bank details block reused inside policy copy */
.policy-bank {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-3);
  margin: var(--sp-4) 0;
  padding: var(--sp-4);
  background: var(--cream-100);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--teal-500);
  border-radius: var(--r-md);
}

.policy-bank dt {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-mute);
  font-weight: 600;
  margin-bottom: 2px;
}

.policy-bank dd {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--navy-800);
  word-break: break-word;
}

.policy-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
  background: var(--cream-100);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  padding: 0.1em 0.4em;
  color: var(--navy-800);
}

.policy-updated {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--text-mute);
  background: var(--cream-100);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-pill);
  padding: 0.25rem 0.75rem;
  margin-bottom: var(--sp-5);
}

.policy-updated svg {
  width: 13px;
  height: 13px;
}

/* ================================ 404 ================================ */

.error-page {
  min-height: 68vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: linear-gradient(160deg, var(--cream-100), var(--bg));
}

.error-page__code {
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 16vw, 9rem);
  line-height: 0.9;
  color: var(--navy-800);
  letter-spacing: -0.03em;
  margin-bottom: var(--sp-3);
}

.error-page__code span {
  color: var(--gold-500);
}

.error-page p {
  max-width: 48ch;
  margin-inline: auto;
  color: var(--text-soft);
}

.error-page__links {
  display: flex;
  gap: var(--sp-3);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--sp-5);
}

/* ============================== AUTH ================================= */

.auth-shell {
  min-height: 72vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: var(--sp-8);
  position: relative;
}

/* Two soft glows so the sign-in card sits in a lit scene, not a void. */
.auth-shell::before,
.auth-shell::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(10px);
  pointer-events: none;
}

.auth-shell::before {
  width: min(420px, 70vw);
  height: min(420px, 70vw);
  top: 8%;
  left: -8%;
  background: radial-gradient(circle, rgba(201, 164, 92, 0.22), transparent 70%);
}

.auth-shell::after {
  width: min(380px, 65vw);
  height: min(380px, 65vw);
  bottom: 4%;
  right: -6%;
  background: radial-gradient(circle, rgba(47, 128, 121, 0.2), transparent 70%);
}

.auth-card {
  position: relative;
  z-index: 1;
  width: min(460px, 100%);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-xl);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  box-shadow: var(--sh-float);
}

.auth-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--grad-ribbon);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
}

.auth-card--wide {
  width: min(640px, 100%);
}

.auth-card__head {
  text-align: center;
  margin-bottom: var(--sp-5);
}

.auth-card__head h1,
.auth-card__head h2 {
  font-size: var(--fs-2xl);
  margin-bottom: var(--sp-2);
}

.auth-card__head p {
  color: var(--text-soft);
  font-size: var(--fs-sm);
  margin: 0;
}

.auth-card__foot {
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--text-soft);
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line-soft);
}

.auth-card__foot a {
  font-weight: 600;
}

.demo-hint {
  font-size: var(--fs-xs);
  color: var(--text-mute);
  text-align: center;
  margin-top: var(--sp-3);
}

.password-field {
  position: relative;
}

.password-field .form-control {
  padding-right: 3rem;
}

.password-toggle {
  position: absolute;
  right: 0.5rem;
  /* Anchored to the bottom of the wrapper — which is the input — so the eye
     always sits inside the field instead of between the label and the input. */
  bottom: var(--sp-2);
  background: none;
  border: 0;
  color: var(--ink-400);
  cursor: pointer;
  padding: var(--sp-2);
  line-height: 0;
  border-radius: var(--r-sm);
}

.password-toggle:hover {
  color: var(--heading);
}

.password-toggle svg {
  width: 18px;
  height: 18px;
}

.strength-meter {
  display: flex;
  gap: 4px;
  margin-top: var(--sp-2);
}

.strength-meter span {
  flex: 1 1 0;
  height: 3px;
  border-radius: var(--r-pill);
  background: var(--cream-300);
  transition: background var(--dur) var(--ease);
}

.strength-meter.is-1 span:nth-child(1) {
  background: var(--danger);
}
.strength-meter.is-2 span:nth-child(-n + 2) {
  background: var(--warn);
}
.strength-meter.is-3 span:nth-child(-n + 3) {
  background: var(--teal-400);
}
.strength-meter.is-4 span {
  background: var(--success);
}

/* Review rating. Radio buttons stay real radios so the form works with a
   keyboard and a screen reader; the pill is drawn around the checked one. */
.rating-input {
  border: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.rating-input legend {
  padding: 0;
  margin-bottom: var(--sp-2);
}

.rating-input__option {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-soft);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease);
}

.rating-input__option:hover {
  border-color: var(--brand);
  color: var(--heading);
}

.rating-input__option:has(input:checked) {
  border-color: var(--brand);
  background: rgba(201, 164, 92, 0.12);
  color: var(--heading);
}

.rating-input__option input {
  width: 16px;
  height: 16px;
  accent-color: var(--brand);
}

/* ============================== ACCOUNT ============================== */

.account-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-bottom: var(--sp-4);
}

.account-header h2 {
  font-size: var(--fs-2xl);
  margin-bottom: 2px;
}

/* ------------------------------ pill tabs --------------------------- */

.pill-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  border-bottom: 1px solid var(--line-soft);
  padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-5);
}

.pill-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text-soft);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.pill-tab:hover {
  border-color: var(--navy-800);
  color: var(--navy-800);
}

.pill-tab.is-active {
  background: var(--navy-800);
  border-color: var(--navy-800);
  color: var(--cream-50);
}

.pill-tab--destructive {
  margin-left: auto;
}

.pill-tab--destructive:hover {
  border-color: var(--danger);
  color: var(--danger);
}

.pill-tab svg {
  width: 16px;
  height: 16px;
}

/* ---------------------------- order cards --------------------------- */

.order-card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-5);
  box-shadow: var(--sh-xs);
}

.order-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line-soft);
}

.order-card__head h3 {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 600;
  margin-bottom: 2px;
}

.order-card__items {
  padding-block: var(--sp-3);
}

.order-card__foot {
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line-soft);
}

@media (max-width: 560px) {
  .order-card {
    padding: var(--sp-4);
  }
  .order-card__head {
    flex-direction: column;
  }
  .order-card__head > div:last-child {
    text-align: left !important;
  }
  .pill-tab--destructive {
    margin-left: 0;
  }
}

/* =============================== 404 ================================== */

.notfound {
  text-align: center;
  padding-block: clamp(1rem, 4vw, 3rem);
}

.notfound__code {
  font-family: var(--font-display);
  font-size: clamp(4rem, 16vw, 8rem);
  font-weight: 700;
  line-height: 1;
  color: var(--gold-700);
  margin-bottom: var(--sp-2);
}

.notfound h1 {
  font-size: var(--fs-3xl);
  margin-bottom: var(--sp-3);
}

.notfound .lead {
  max-width: 52ch;
  margin-inline: auto;
  color: var(--text-soft);
}

.notfound__search {
  max-width: 34rem;
  margin-inline: auto;
  text-align: left;
}

.notfound__search-row {
  display: flex;
  gap: var(--sp-2);
}

.notfound__search-row .form-control {
  flex: 1 1 auto;
}

.notfound__search-row .btn {
  flex: 0 0 auto;
}

.notfound__links {
  max-width: 22rem;
  margin-inline: auto;
  text-align: left;
}

.notfound__links h2 {
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-mute);
  margin-bottom: var(--sp-2);
}

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

.channel-card {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  color: inherit;
  box-shadow: var(--sh-xs);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

a.channel-card:hover {
  border-color: var(--navy-800);
  transform: translateY(-2px);
  box-shadow: var(--sh-sm);
}

.channel-card.is-disabled {
  opacity: 0.62;
  cursor: not-allowed;
}

.channel-card__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--r-md);
  background: var(--cream-100);
  color: var(--navy-800);
}

.channel-card__icon--wa {
  background: #e8f5ee;
  color: #128c4a;
}

.channel-card__icon svg {
  width: 20px;
  height: 20px;
}

.channel-card__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.channel-card__body strong {
  font-size: var(--fs-sm);
  color: var(--heading);
  word-break: break-word;
}

.channel-card__body span {
  font-size: var(--fs-xs);
  color: var(--text-soft);
}

.channel-card__go {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--text-mute);
}

.side-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
}

.side-links a {
  color: var(--text-soft);
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: color var(--dur) var(--ease), text-decoration-color var(--dur) var(--ease);
}

.side-links a:hover {
  color: var(--navy-800);
  text-decoration: underline;
  text-decoration-color: var(--gold-500);
}

.side-links a::after {
  content: ' →';
}

/* ------------------------------ CONTACT ------------------------------ *
   The contact page uses .contact-layout (declared above) instead of the
   shop's .with-sidebar, because .with-sidebar hides its sidebar on small
   screens for the mobile filter toggle and this page has no such button. */

.channel-card__note {
  font-size: var(--fs-xs);
  color: var(--text-soft);
}

/* Every channel card is one fixed block so the row lines up: the icon
   stays a square, the text column is allowed to shrink, and the arrow
   never pushes the text out of the card. */
.channel-card__body strong,
.channel-card__body span {
  display: block;
}

.channel-card__body {
  overflow-wrap: anywhere;
}

/* The form column on the contact page. */
.contact-main {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  min-width: 0;
}

/* The help column on the contact page. */
.contact-help {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  position: sticky;
  top: calc(var(--header-h) + var(--announce-h) + 1rem);
}

.help-card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  padding: var(--sp-5);
}

.help-card__title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--fs-md);
  color: var(--heading);
  margin: 0 0 var(--sp-3);
}

.help-card__title svg {
  width: 18px;
  height: 18px;
  color: var(--teal-600);
  flex: 0 0 auto;
}

.help-card__text {
  font-size: var(--fs-sm);
  color: var(--text-soft);
  margin: 0;
}

.help-card__text a {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.help-card__note {
  font-size: var(--fs-xs);
  color: var(--text-mute);
  margin: var(--sp-2) 0 0;
}

.help-card .btn {
  margin-top: var(--sp-3);
}

/* Required-field marker. A class rather than an inline style so the colour
   lives with the rest of the form styling. */
.req {
  color: var(--danger);
}

.form-footnote {
  font-size: var(--fs-xs);
  color: var(--text-mute);
  margin: var(--sp-3) 0 0;
  text-align: center;
}

/* =============================== ABOUT ================================ *
 * Task 4 — the About page is rebuilt as a premium editorial brand story.
 * A light cream canvas, one navy leadership band and a navy closing, strict
 * hairline separators and a single shared editorial heading. Editorial themes
 * are drawn from verified brand positioning (full ingredient lists, real
 * prices, a single verified account); no founding dates, scale, awards or
 * mission statements are invented. */

/* ---- shared editorial pieces ---- */

.about-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-body);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-800);
  margin-bottom: var(--sp-3);
}

.about-eyebrow::before {
  content: '';
  width: 22px;
  height: 1px;
  background: var(--gold-600);
  flex: 0 0 auto;
}

.about-eyebrow--light {
  color: var(--gold-300);
}

.about-eyebrow--light::before {
  background: var(--gold-400);
}

.about-heading {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.1vw, 2.65rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--heading);
  margin: 0;
  text-wrap: balance;
}

.about-heading--light {
  color: var(--cream-50);
}

.about-head {
  max-width: 760px;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}

.about-head--split {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-4) clamp(1.5rem, 4vw, 3.5rem);
  align-items: end;
}

.about-head__lead {
  color: var(--text-soft);
  font-size: var(--fs-lg);
  line-height: 1.6;
  margin: 0;
  max-width: 52ch;
}

/* ---- hero ---- */

/* Full-bleed banner. The About page reuses the shared .hero component (the
   same deep-navy scrim over a full-bleed photograph the home page uses) so
   the two pages open with the same confident, editorial feel. These rules
   only tune the About hero's own content. */

.about-hero .hero__content {
  max-width: 660px;
}

.about-hero .breadcrumb {
  margin-bottom: var(--sp-4);
  color: rgba(255, 255, 255, 0.72);
}

.about-hero .breadcrumb a {
  color: rgba(255, 255, 255, 0.85);
}

.about-hero .breadcrumb a:hover {
  color: var(--white);
}

.about-hero .breadcrumb li + li::before {
  color: rgba(255, 255, 255, 0.5);
}

.about-hero .hero__proof {
  margin-top: var(--sp-2);
}

/* ---- brand story ---- */

.about-story__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}

.about-story__lead {
  margin-bottom: var(--sp-5);
}

.about-story__body p {
  font-size: clamp(1.0625rem, 1.35vw, 1.1875rem);
  line-height: 1.7;
  color: var(--ink-700);
  margin: 0 0 var(--sp-4);
}

.about-story__body p:last-child {
  margin-bottom: 0;
}

.about-story__aside {
  position: sticky;
  top: calc(var(--header-h) + var(--announce-h) + 2rem);
}

.about-pullquote {
  margin: 0 0 var(--sp-6);
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  font-style: italic;
  line-height: 1.4;
  color: var(--navy-800);
}

.about-pullquote__mark {
  display: block;
  font-size: 3rem;
  line-height: 0.55;
  color: var(--gold-500);
  margin-bottom: var(--sp-2);
}

.about-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.about-facts__item {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  margin: 0;
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--fs-sm);
  color: var(--ink-700);
}

.about-facts__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  color: var(--gold-700);
  background: rgba(201, 164, 92, 0.16);
  border: 1px solid rgba(201, 164, 92, 0.34);
}

.about-facts__icon svg {
  width: 16px;
  height: 16px;
}

/* ---- philosophy ---- */

.about-principles {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.about-principle {
  display: grid;
  grid-template-columns: minmax(3.5rem, 8rem) minmax(0, 1fr);
  gap: clamp(1rem, 4vw, 3rem);
  align-items: start;
  margin: 0;
  padding: clamp(1.5rem, 3vw, 2.5rem) 0;
  border-bottom: 1px solid var(--line);
}

.about-principle__mark {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-3);
}

.about-principle__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: var(--r-md);
  color: var(--gold-600);
  background: rgba(201, 164, 92, 0.14);
  border: 1px solid rgba(201, 164, 92, 0.32);
}

.about-principle__icon svg {
  width: 26px;
  height: 26px;
}

.about-principle__num {
  font-family: var(--font-body);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--gold-700);
}

.about-principle__title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.9vw, 1.6rem);
  color: var(--heading);
  margin: 0 0 var(--sp-2);
}

.about-principle__text {
  font-size: var(--fs-lg);
  line-height: 1.65;
  color: var(--ink-500);
  margin: 0;
  max-width: 62ch;
}

/* ---- leadership (navy band) ---- */

.about-leadership__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}

.about-portrait {
  margin: 0;
}

.about-portrait__frame {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-float);
}

.about-portrait__frame::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.18);
  pointer-events: none;
}

.about-portrait__frame img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  /* The supplied portrait is near-square; crop from the top so the face sits
     well inside the frame rather than being centred awkwardly. */
  object-position: 50% 18%;
}

.about-portrait__caption {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.about-portrait__name {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  color: var(--cream-50);
}

.about-portrait__role {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-300);
}

.about-leadership__copy .about-heading {
  margin-bottom: var(--sp-5);
}

.about-quote {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  line-height: 1.6;
  color: var(--cream-100);
}

.about-quote__mark {
  display: block;
  font-size: 3rem;
  line-height: 0.5;
  color: var(--gold-400);
  margin-bottom: var(--sp-3);
}

.about-signature {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  margin: var(--sp-5) 0 0;
}

.about-signature__name {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-style: italic;
  color: var(--cream-50);
}

.about-signature__role {
  font-size: var(--fs-2xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-mute);
}

.about-quote-missing {
  color: var(--text-mute);
  font-style: italic;
  margin: 0;
}

/* ---- team ---- */

.about-team__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}

.about-member {
  margin: 0;
}

.about-member:nth-child(even) {
  margin-top: clamp(1.5rem, 4vw, 3.5rem);
}

.about-member__media {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--cream-200);
  box-shadow: var(--sh-card);
}

.about-member__media img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  /* Portraits are 9:16; crop from the top so faces stay in frame. */
  object-position: 50% 20%;
  transition: opacity 0.7s var(--ease-out), transform 0.9s var(--ease-out);
}

.about-member[data-reveal]:not(.is-visible) .about-member__media img {
  opacity: 0;
  transform: scale(1.06);
}

.about-member:hover .about-member__media img {
  transform: scale(1.03);
}

.about-member__body {
  margin-top: var(--sp-4);
}

.about-member__name {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  color: var(--heading);
  margin: 0 0 var(--sp-1);
}

.about-member__role {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-700);
  margin: 0 0 var(--sp-3);
}

.about-member__bio {
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--ink-500);
  margin: 0;
}

/* ---- commitments ---- */

.about-commit__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 4vw, 3.5rem);
}

.about-commit__item {
  padding-top: var(--sp-4);
  border-top: 2px solid var(--gold-500);
}

.about-commit__head {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.about-commit__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: var(--r-md);
  color: var(--gold-700);
  background: rgba(201, 164, 92, 0.16);
  border: 1px solid rgba(201, 164, 92, 0.34);
}

.about-commit__icon svg {
  width: 22px;
  height: 22px;
}

.about-commit__num {
  font-family: var(--font-body);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--gold-700);
}

.about-commit__title {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.7vw, 1.45rem);
  color: var(--heading);
  margin: 0 0 var(--sp-2);
}

.about-commit__text {
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--ink-500);
  margin: 0;
}

/* ---- categories ---- */

.about-categories__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
}

.about-category {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  box-shadow: var(--sh-card);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.about-category:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-card-hover);
  border-color: var(--gold-300);
}

.about-category__media {
  display: block;
  overflow: hidden;
  background: var(--cream-200);
}

.about-category__media img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.7s var(--ease-out);
}

.about-category:hover .about-category__media img {
  transform: scale(1.04);
}

.about-category__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
}

.about-category__title {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  color: var(--heading);
}

.about-category__text {
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--ink-500);
}

.about-category__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--gold-800);
}

.about-category__cta svg {
  width: 17px;
  height: 17px;
  transition: transform var(--dur-fast) var(--ease);
}

.about-category:hover .about-category__cta svg {
  transform: translateX(3px);
}

/* ---- closing (navy band) ---- */

.about-close__inner {
  max-width: 820px;
  margin-inline: auto;
  text-align: center;
}

.about-close__title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.6vw, 3rem);
  line-height: 1.15;
  color: var(--cream-50);
  margin: 0 0 var(--sp-4);
  text-wrap: balance;
}

.about-close__break {
  display: block;
  color: var(--gold-300);
}

.about-close__lead {
  font-size: var(--fs-lg);
  line-height: 1.6;
  color: var(--text-soft);
  margin: 0 auto var(--sp-6);
  max-width: 54ch;
}

/* Retained: the Partner page builds its own section headings with this
   class, so it must keep a rule of its own. */
.section-head__eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-800);
  margin-bottom: var(--sp-3);
}

@media (prefers-reduced-motion: reduce) {
  .about-member[data-reveal]:not(.is-visible) .about-member__media img {
    opacity: 1;
    transform: none;
  }
}

/* ============================== PARTNER =============================== */
.step-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-5);
}

.step-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  box-shadow: var(--sh-xs);
}

.step-card__n {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-5);
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: 700;
  color: var(--gold-600);
  line-height: 1;
  pointer-events: none;
}

.step-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: var(--r-md);
  background: var(--bg-alt);
  color: var(--teal-600);
  margin-bottom: var(--sp-3);
}

.step-card__icon svg {
  width: 22px;
  height: 22px;
}

.step-card h3 {
  font-size: var(--fs-lg);
  margin-bottom: var(--sp-2);
}

.step-card p {
  color: var(--text-soft);
  font-size: var(--fs-sm);
}

/* worked-example strip */
.example-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-4);
  counter-reset: ex;
}

.example-strip__item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4);
  background: var(--cream-100);
  border-radius: var(--r-md);
  border: 1px solid var(--line-soft);
}

.example-strip__item span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--navy-800);
  color: var(--cream-50);
  font-size: var(--fs-xs);
  font-weight: 700;
}

.example-strip__item p {
  font-size: var(--fs-sm);
  color: var(--text-soft);
  margin: 0;
}

/* ------------------------------ tables ------------------------------- */

.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.table caption {
  text-align: left;
}

.table th,
.table td {
  padding: var(--sp-3) var(--sp-3);
  text-align: left;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}

.table thead th {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-mute);
  font-weight: 600;
  white-space: nowrap;
}

.table tbody th {
  font-weight: 600;
  color: var(--heading);
}

.table tbody tr:last-child th,
.table tbody tr:last-child td {
  border-bottom: 0;
}

/* ------------------------- tick / cross lists ------------------------- */

.tick-list,
.cross-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--text-soft);
}

.tick-list li,
.cross-list li {
  position: relative;
  padding-left: 1.75rem;
}

.tick-list li::before,
.cross-list li::before {
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  line-height: 1.5;
}

.tick-list li::before {
  content: '\2713';
  color: var(--success);
}

.cross-list li::before {
  content: '\2715';
  color: var(--danger);
}

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

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--sp-4);
}

.stat-card {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  box-shadow: var(--sh-xs);
}

.stat-card__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  background: var(--cream-100);
  color: var(--navy-800);
}

.stat-card__icon svg {
  width: 20px;
  height: 20px;
}

.stat-card__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.stat-card__label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-mute);
  font-weight: 600;
}

.stat-card__value {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: var(--navy-800);
  line-height: 1.1;
}

.stat-card__hint {
  font-size: var(--fs-xs);
  color: var(--text-soft);
}

/* ------------------------- 7-day bar chart -------------------------- */

.bar-chart {
  display: flex;
  align-items: flex-end;
  gap: var(--sp-2);
  height: 170px;
  padding-top: var(--sp-3);
}

.bar-chart__col {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  gap: var(--sp-2);
}

.bar-chart__bar {
  width: 100%;
  max-width: 42px;
  min-height: 4px;
  border-radius: var(--r-sm) var(--r-sm) 2px 2px;
  background: linear-gradient(180deg, var(--teal-400), var(--teal-600));
  transition: background var(--dur) var(--ease);
}

.bar-chart__col:hover .bar-chart__bar {
  background: linear-gradient(180deg, var(--gold-500), var(--navy-800));
}

.bar-chart__label {
  font-size: var(--fs-xs);
  color: var(--text-mute);
  white-space: nowrap;
}

/* ------------------------- referral link box ------------------------ */

.ref-link-box {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4);
  background: var(--cream-100);
  border: 1px dashed var(--line);
  border-radius: var(--r-md);
}

.ref-link-box__url {
  flex: 1 1 16rem;
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--fs-sm);
  color: var(--navy-800);
  word-break: break-all;
}

/* ====================== UTILITIES USED ON PAGES ======================= */

.reveal-on-scroll [data-reveal] {
  opacity: 0;
}

.sticky-cta {
  position: sticky;
  bottom: 0;
  z-index: 20;
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding: var(--sp-3) 0;
  box-shadow: 0 -6px 20px rgba(11, 31, 51, 0.07);
}

.sticky-cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.sticky-cta__price {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  color: var(--navy-800);
  font-weight: 600;
}

.text-link-underline {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.hover-lift {
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.hover-lift:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-md);
}

.pointer {
  cursor: pointer;
}

.select-none {
  user-select: none;
}

.hover-line {
  position: relative;
}

.hover-line::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur) var(--ease);
}

.hover-line:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* ==================== HOME: HERO SUPPORTING HEADING =================== *
 * The approved copy carries a supporting heading between the H1 and the
 * sentence. It is set in the display serif in the gold accent so it reads
 * as a considered line rather than a second, competing headline. */

.hero__subtitle {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.4vw, 1.9rem);
  font-weight: 500;
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  color: var(--gold-300);
  max-width: 46ch;
  margin: 0 auto var(--sp-4);
  text-wrap: balance;
}

/* ===================== HOME: BRAND BANNER BAND ======================= *
 * The second supplied banner (hero-banner.webp) sits mid-page as an
 * editorial band. It keeps its own wide aspect so the artwork is never
 * cropped, and reserves its box up front so the page does not jump. */

.banner-frame {
  position: relative;
  width: 100%;
  margin-top: var(--sp-6);
  aspect-ratio: var(--intro-ratio, 2103 / 748);
  overflow: hidden;
  border-radius: var(--r-lg);
  border: 1px solid var(--line-soft);
  background: var(--cream-100);
  box-shadow: var(--sh-card);
}

.banner-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Home brand section: an editorial portrait sits beside the brand copy in a
   two-column split. The frame reserves its own aspect so nothing jumps. */
.home-brand__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-lg);
  border: 1px solid var(--line-soft);
  background: var(--cream-100);
  box-shadow: var(--sh-card);
}

.home-brand__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-brand__copy p {
  max-width: 48ch;
}

@media (max-width: 900px) {
  .home-brand__media {
    max-width: 460px;
    margin-inline: auto;
  }
}

/* =================== HOME: COLLECTION DISCOVERY ====================== *
 * Two category tiles that route shoppers into the skin-care and hair-care
 * shelves. Typographic (no product imagery), so the home page stays free
 * of individual-product content. The tile is a signpost, not a shelf. */

.collection-grid {
  gap: var(--sp-6);
}

.collection-card {
  display: flex;
  flex-direction: column;
  min-height: 300px;
  padding: var(--sp-7);
  overflow: hidden;
  background: linear-gradient(158deg, var(--cream-50) 0%, var(--cream-200) 100%);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  color: inherit;
  text-decoration: none;
  box-shadow: var(--sh-card);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.collection-card:hover,
.collection-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--sh-card-hover);
  border-color: var(--gold-400);
}

.collection-card__index {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  line-height: 1;
  color: var(--gold-600);
  margin-bottom: var(--sp-5);
}

.collection-card__name {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  color: var(--heading);
}

.collection-card__text {
  margin-top: var(--sp-3);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--text-soft);
  max-width: 42ch;
}

.collection-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: auto;
  padding-top: var(--sp-6);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy-700);
}

.collection-card__arrow {
  width: 16px;
  height: 16px;
  transition: transform var(--dur) var(--ease);
}

.collection-card:hover .collection-card__arrow,
.collection-card:focus-visible .collection-card__arrow {
  transform: translateX(4px);
}

/* Image-led tiles: a portrait photograph fills the top of the card and the
   typographic signpost sits on the cream panel beneath it. The image is
   decorative (alt is empty), so the collection name still carries meaning. */
.collection-card--media {
  padding: 0;
  min-height: 0;
}

.collection-card__media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--cream-100);
}

.collection-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}

.collection-card__media::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 34%;
  background: linear-gradient(180deg, transparent, rgba(6, 20, 38, 0.32));
  pointer-events: none;
}

.collection-card--media:hover .collection-card__media img,
.collection-card--media:focus-visible .collection-card__media img {
  transform: scale(1.045);
}

.collection-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: var(--sp-6) var(--sp-7) var(--sp-7);
}

.collection-card__body .collection-card__index {
  margin-bottom: var(--sp-3);
}

@media (max-width: 480px) {
  .banner-frame {
    border-radius: var(--r-md);
  }

  .collection-card {
    min-height: 0;
    padding: var(--sp-5);
  }

  /* The media tile supplies its own padding via __body. */
  .collection-card--media {
    padding: 0;
  }

  .collection-card__body {
    padding: var(--sp-5);
  }

  .collection-card__index {
    margin-bottom: var(--sp-4);
  }
}

/* The contact strip sits above the footer on the home page. A long email
   address must wrap inside its card instead of forcing the page to scroll
   sideways on the narrowest phones. */
.contact-method {
  min-width: 0;
}

.contact-method > * {
  min-width: 0;
}

.contact-method strong {
  overflow-wrap: anywhere;
}

/* ============================ COLLECTIONS PAGE ========================= *
 * An editorial light hero that frames the brand's collection artwork, then
 * the two primary collections as image-led cards. Each card is a single
 * link (one tab stop, one click target) carrying the title, a short line of
 * copy, the live product count and starting price, and a prominent
 * "Explore Collection" call to action. */

.collections-hero {
  position: relative;
  background:
    radial-gradient(720px 320px at 90% -30%, rgba(201, 164, 92, 0.16), transparent 62%),
    radial-gradient(620px 300px at 0% 120%, rgba(47, 128, 121, 0.07), transparent 60%),
    linear-gradient(180deg, var(--cream-100), var(--bg));
  border-bottom: 1px solid var(--line-soft);
  padding-block: clamp(2.25rem, 5vw, 3.75rem);
}

.collections-hero .breadcrumb {
  margin-bottom: var(--sp-6);
}

.collections-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}

.collections-hero__copy {
  max-width: 46ch;
}

.collections-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-body);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-800);
  margin-bottom: var(--sp-4);
}

.collections-hero__eyebrow::before {
  content: '';
  width: 40px;
  height: 2px;
  border-radius: var(--r-pill);
  background: var(--grad-brand);
  flex: 0 0 auto;
}

.collections-hero__title {
  font-size: clamp(2.15rem, 5vw, 3.4rem);
  line-height: 1.08;
  margin-bottom: var(--sp-4);
}

.collections-hero__lead {
  font-size: var(--fs-lg);
  line-height: 1.6;
  color: var(--ink-500);
  max-width: 42ch;
}

.collections-hero__actions {
  margin-top: var(--sp-6);
}

.collections-hero__media {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--sh-md);
}

/* A hairline gold frame, drawn over the artwork rather than offset, so it
   can never push the layout wider than its column. */
.collections-hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgba(216, 186, 121, 0.55);
  border-radius: var(--r-md);
  pointer-events: none;
}

.collections-hero__media img {
  display: block;
  width: 100%;
  aspect-ratio: 735 / 490;
  object-fit: cover;
}

/* ----------------------- the two collection cards --------------------- */

.collection-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.collection-feature {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  box-shadow: var(--sh-card);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.collection-feature:hover,
.collection-feature:focus-visible {
  transform: translateY(-4px);
  border-color: var(--gold-400);
  box-shadow: var(--sh-card-hover);
}

.collection-feature__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--navy-800);
}

.collection-feature__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease-out);
}

.collection-feature:hover .collection-feature__img,
.collection-feature:focus-visible .collection-feature__img {
  transform: scale(1.05);
}

.collection-feature__index {
  position: absolute;
  top: var(--sp-4);
  left: var(--sp-4);
  padding: 0.2rem 0.7rem;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.4;
  color: var(--navy-800);
  background: rgba(253, 251, 247, 0.9);
  border: 1px solid rgba(216, 186, 121, 0.7);
  border-radius: var(--r-pill);
}

.collection-feature__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: clamp(1.25rem, 2.4vw, 1.9rem);
}

.collection-feature__title {
  font-size: clamp(1.45rem, 2.4vw, 1.9rem);
  margin-bottom: var(--sp-2);
  color: var(--heading);
  transition: color var(--dur) var(--ease);
}

.collection-feature:hover .collection-feature__title,
.collection-feature:focus-visible .collection-feature__title {
  color: var(--gold-800);
}

.collection-feature__text {
  color: var(--text-soft);
  margin-bottom: var(--sp-4);
}

.collection-feature__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-500);
}

.collection-feature__stat--price {
  color: var(--gold-800);
}

.collection-feature__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold-500);
  flex: 0 0 auto;
}

.collection-feature__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: auto;
  padding-top: var(--sp-5);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy-700);
  transition: color var(--dur) var(--ease);
}

.collection-feature__cta svg {
  width: 17px;
  height: 17px;
  transition: transform var(--dur) var(--ease);
}

.collection-feature:hover .collection-feature__cta,
.collection-feature:focus-visible .collection-feature__cta {
  color: var(--gold-800);
}

.collection-feature:hover .collection-feature__cta svg,
.collection-feature:focus-visible .collection-feature__cta svg {
  transform: translateX(5px);
}

/* ====================== COLLECTIONS PAGE (REDESIGNED) ======================
   Editorial, cream-first landing page for the two primary collections.
   Light hero with a framed artwork band, followed by two image-led collection
   tiles, then a soft CTA back to the full shop. */

.collections-hero {
  background:
    radial-gradient(760px 340px at 92% -20%, rgba(201, 164, 92, 0.18), transparent 60%),
    radial-gradient(620px 300px at 4% 120%, rgba(47, 128, 121, 0.08), transparent 60%),
    linear-gradient(180deg, var(--cream-100), var(--bg));
  color: var(--ink-700);
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  border-bottom: 1px solid var(--line-soft);
  position: relative;
  overflow: hidden;
}

.collections-hero .breadcrumb {
  margin-bottom: clamp(var(--sp-6), 5vw, var(--sp-9));
  position: relative;
  z-index: 1;
}

.collections-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(1.75rem, 5vw, 4rem);
  align-items: center;
  position: relative;
  z-index: 1;
}

.collections-hero__copy {
  max-width: 48ch;
}

.collections-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-body);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-800);
  margin-bottom: var(--sp-4);
}

.collections-hero__eyebrow::before {
  content: '';
  width: 44px;
  height: 1px;
  background: var(--grad-brand);
}

.collections-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5.4vw, var(--fs-4xl));
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--navy-800);
  margin-bottom: var(--sp-4);
  text-wrap: balance;
}

.collections-hero__lead {
  font-size: clamp(var(--fs-lg), 1.6vw, var(--fs-xl));
  line-height: var(--lh-body);
  color: var(--ink-500);
  margin: 0;
}

.collections-hero__media {
  position: relative;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
}

/* Soft gold frame offset behind the artwork, so the hero is not just one
   plain photograph sitting on cream. */
.collections-hero__media::before {
  content: '';
  position: absolute;
  inset: 0;
  transform: translate(14px, 14px);
  border: 1px solid var(--gold-400);
  border-radius: var(--r-lg);
  opacity: 0.7;
}

.collections-hero__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
}

/* ------------------------- the two collection tiles ------------------- */

.collection-showcase {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 2.5rem);
}

/* The whole card is the link (one accessible target), image + copy on top of
   a clean white surface with a soft hairline border. */
.collection-tile {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--sh-card);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.collection-tile:hover,
.collection-tile:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--sh-card-hover);
  border-color: var(--gold-400);
}

.collection-tile__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--navy-800);
}

.collection-tile__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease-out);
}

.collection-tile:hover .collection-tile__img,
.collection-tile:focus-visible .collection-tile__img {
  transform: scale(1.05);
}

.collection-tile__index {
  position: absolute;
  top: var(--sp-4);
  left: var(--sp-4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding-inline: var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--navy-800);
  background: rgba(253, 251, 247, 0.92);
  border: 1px solid rgba(11, 31, 51, 0.08);
  border-radius: var(--r-pill);
}

.collection-tile__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  flex: 1;
  padding: clamp(var(--sp-5), 2.5vw, var(--sp-7));
}

.collection-tile__name {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.6vw, 2.25rem);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  color: var(--heading);
}

.collection-tile__text {
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--text-soft);
  max-width: 44ch;
}

.collection-tile__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-1);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-500);
}

.collection-tile__dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold-600);
}

.collection-tile__cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: auto;
  padding-top: var(--sp-5);
  padding-bottom: var(--sp-1);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy-700);
}

.collection-tile__cta::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--grad-brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}

.collection-tile:hover .collection-tile__cta::before,
.collection-tile:focus-visible .collection-tile__cta::before {
  transform: scaleX(1);
}

.collection-tile__arrow {
  width: 16px;
  height: 16px;
  transition: transform var(--dur) var(--ease);
}

.collection-tile:hover .collection-tile__arrow,
.collection-tile:focus-visible .collection-tile__arrow {
  transform: translateX(4px);
}

/* ------------------------------- CTA band ----------------------------- */

.collections-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  flex-wrap: wrap;
}

.collections-cta__copy {
  min-width: 0;
  flex: 1 1 24rem;
}

.collections-cta__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-body);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-800);
  margin-bottom: var(--sp-3);
}

.collections-cta__eyebrow::before {
  content: '';
  width: 44px;
  height: 1px;
  background: var(--grad-brand);
}

.collections-cta__title {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-2xl), 3vw, var(--fs-3xl));
  line-height: var(--lh-tight);
  color: var(--navy-800);
  margin-bottom: var(--sp-2);
}

.collections-cta__copy p {
  font-size: var(--fs-md);
  color: var(--ink-500);
  max-width: 52ch;
  margin: 0;
}

.collections-cta .btn {
  flex: 0 0 auto;
}

@media (max-width: 860px) {
  .collections-hero__grid {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }

  .collections-hero__media {
    max-width: 560px;
  }

  .collection-showcase {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .collections-hero__media::before {
    display: none;
  }

  .collection-tile__index {
    top: var(--sp-3);
    left: var(--sp-3);
  }

  .collections-cta {
    flex-direction: column;
    align-items: stretch;
  }

  .collections-cta .btn {
    width: 100%;
  }
}

/* ==========================================================================
   HOME — premium merchandising
   Section head with a trailing action group, the bestsellers rail and the
   skin/hair routine tabs. These give the home page the merchandised,
   international-storefront feel of the big skin and hair care brands.
   ========================================================================== */

/* Left-aligned head with an actions group pinned to the right. */
.section-head--row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-5);
  flex-wrap: wrap;
  max-width: none;
  margin-inline: 0;
  text-align: left;
}

.section-head--row::before {
  display: none;
}

.section-head--row > div {
  max-width: 620px;
}

.section-head__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  flex: 0 0 auto;
  padding-bottom: var(--sp-1);
}

/* Rail previous / next buttons. */
.rail-nav {
  display: inline-flex;
  gap: var(--sp-2);
}

.rail-btn {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--heading);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
    border-color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.rail-btn:hover:not(:disabled) {
  background: var(--navy-800);
  color: var(--gold-300);
  border-color: var(--navy-800);
}

.rail-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.rail-btn svg {
  width: 18px;
  height: 18px;
}

/* Horizontal, snap-scrolling product rail. */
.product-rail {
  display: flex;
  gap: var(--sp-4);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 10px 2px 22px;
  margin-inline: -2px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.product-rail::-webkit-scrollbar {
  display: none;
}

.product-rail > .product-card {
  flex: 0 0 clamp(240px, 26vw, 300px);
  scroll-snap-align: start;
}

/* A gentler lift inside the scroller so the card never clips the row. */
.product-rail .product-card:hover {
  transform: translateY(-4px);
}

/* Routine tabs. */
.routine-tabs {
  display: inline-flex;
  gap: var(--sp-1);
  margin-top: var(--sp-5);
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-card);
}

.routine-tab {
  border: 0;
  background: none;
  cursor: pointer;
  padding: 0.55rem 1.35rem;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-soft);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.routine-tab:hover {
  color: var(--heading);
}

.routine-tab.is-active {
  background: var(--grad-brand);
  color: var(--navy-900);
}

/* The "Limitless standard" band is dark, but its cards are light. Give the
   cards their own palette so the text stays dark on the light card. */
.section--navy .value-card {
  --heading: var(--navy-800);
  --text: var(--ink-500);
  --text-soft: var(--ink-500);
  --text-mute: var(--ink-400);
}

.section--navy .value-card h3 {
  color: var(--navy-800);
}

.section--navy .value-card p {
  color: var(--ink-500);
}

@media (max-width: 720px) {
  .section-head--row {
    align-items: flex-start;
  }

  .section-head__actions {
    width: 100%;
    justify-content: space-between;
  }
}

@media (max-width: 560px) {
  .product-rail > .product-card {
    flex-basis: 74vw;
  }
}