/* ============================================================
   GOTTA homepage — built to Figma 552:971 (1920w default frame)
   Geometry read from the capture's layer table: frame 1905 ·
   gutter 24 · mood tile 418x600 · product card 446 (media .75)
   Palette is the Design System V2.0 spec, confirmed by sampling
   the frame: champagne #EFE4CF canvas · warm white #FFF9EE cards
   · jet #0B0B0D footer · brass #B08D57.
   ============================================================ */

:root {
  --champagne: #EFE4CF;
  --warm-white: #FFF9EE;
  --jet: #0B0B0D;
  --brass: #B08D57;
  --gold: #F1BC54;   /* matches the wordmark asset exactly */
  --ink: #23201B;
  --ink-soft: rgba(35, 32, 27, .62);
  --hairline: rgba(35, 32, 27, .28);
  --page: 1905px;
  --gutter: 24px;
  --gap: 24px;
  --font-display: "Sorts Mill Goudy", "Goudy Old Style", Georgia, serif;
  /* TWO FACES ONLY (Aaron, 17 Aug): Sorts Mill Goudy for display, Source Sans 3 for
     everything else. The trailing names are OS fallbacks that only render if a webfont
     fails to load — no third designed face anywhere. */
  --font-body: "Source Sans 3", system-ui, Arial, sans-serif;
  --font-ui: var(--font-body);   /* alias — nav/buttons/fields all use the body sans */
  --ease: cubic-bezier(.4, 0, .2, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { font-family: var(--font-body); }
body {
  background: var(--champagne);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.25;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; font-family: var(--font-ui); color: inherit; background: none; border: 0; cursor: pointer; }
/* overflow-x: clip (not hidden) — hidden would create a scroll container and
   silently kill every position:sticky inside the page.
   No max-width: the Figma frame was 1905 but capping there parked champagne bars either
   side of the hero on 1920+ screens. Every section is percentage/clamp-based, so the page
   runs edge-to-edge at any width; --page only caps the reading measure below. */
.page { margin: 0 auto; position: relative; overflow-x: clip; }

/* shared button shapes */
.btn-quiz {
  display: inline-flex; align-items: center; height: 52px; padding: 0 13px;
  background: var(--jet); color: var(--warm-white);
  font-size: 15px; font-weight: 500; letter-spacing: .02em;
  transition: background-color .3s var(--ease);
}
.btn-quiz:hover { background: #000; }
.btn-text {
  display: inline-flex; align-items: center; gap: 8px; height: 52px; padding: 0 16px;
  color: var(--warm-white);
  font-size: 15px; font-weight: 500; letter-spacing: .02em;
}
.btn-text::after { content: "→"; }
.btn-line {
  display: inline-flex; align-items: center; height: 48px; padding: 0 18px;
  border: 1px solid var(--hairline); font-size: 14px; line-height: 1;
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.btn-line:hover { background: var(--ink); border-color: var(--ink); color: var(--warm-white); }
.btn-solid {
  display: inline-flex; align-items: center; height: 48px; padding: 0 20px;
  background: var(--warm-white); color: var(--ink);
  font-size: 15px; font-weight: 500; letter-spacing: .02em;
  transition: opacity .3s var(--ease);
}
.btn-solid:hover { opacity: .88; }

/* ---------- header ---------- */
.hdr {
  position: absolute; top: 0; left: 0; right: 0; height: 90px; z-index: 40;
  display: flex; align-items: center; padding: 0 var(--gutter);
}
.hdr__logo { display: block; }
.hdr__logo img { display: block; height: 42px; width: auto; }
.hdr__nav {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: flex; gap: 38px;
}
.hdr__nav a {
  font-size: 15px; font-weight: 500; letter-spacing: .02em;
  color: var(--warm-white); opacity: .92;
  transition: opacity .3s var(--ease);
}
.hdr__nav a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.hdr__cta {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 18px;
  background: var(--gold); color: var(--jet);
  font-size: 14px; font-weight: 500; letter-spacing: .02em;
  transition: background-color .3s var(--ease);
}
.hdr__cta:hover { background: #d8b370; }
.hdr__burger { display: none; margin-left: auto; width: 32px; height: 32px; }
.hdr__burger span { display: block; height: 1.5px; background: var(--warm-white); margin: 6px 4px; }

/* ---------- 01 · hero ---------- */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 520px; }
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__inner {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center;
  padding-left: 185px;
}
.hero__title {
  max-width: 660px;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(38px, 4.2vw, 76px); line-height: 1.13;
  letter-spacing: -.015em; color: var(--warm-white);
}
.hero__actions { margin-top: 46px; display: flex; align-items: center; gap: 10px; }

/* ---------- 02 · mood rail ---------- */
.railwrap { position: relative; }
.railhead { display: flex; justify-content: flex-end; gap: 20px; padding: 0 26px; margin-bottom: 10px; }
.railhead__btn { padding: 6px; line-height: 0; }
.railhead__btn svg { width: 12px; height: 12px; display: block; }
.railhead__btn[disabled] { opacity: .3; cursor: default; }
.rail { overflow: hidden; cursor: grab; margin: 0 var(--gutter); }
.rail.is-dragging { cursor: grabbing; }
.rail__track { display: flex; gap: var(--gap); will-change: transform; touch-action: pan-y pinch-zoom; }
.rail__track > * { flex-shrink: 0; }

.moods { padding-top: 34px; }
.mood-tile { position: relative; display: block; width: 22.51%; }
.mood-tile__img { width: 100%; aspect-ratio: 418 / 600; object-fit: cover; }
.mood-tile::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.42) 0%, rgba(0,0,0,0) 42%);
}
.mood-tile__label {
  position: absolute; left: 18px; bottom: 16px; z-index: 2;
  font-family: var(--font-display); font-size: 42px; line-height: 1;
  color: var(--warm-white);
}

/* ---------- 03 · philosophy band ---------- */
/* only the hero bleeds — every other image band sits inside the page gutter */
.philosophy { position: relative; margin: 40px var(--gutter) 0; min-height: 642px; display: flex; align-items: center; }
.philosophy__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.philosophy::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(20,15,8,.72) 0%, rgba(20,15,8,.42) 55%, rgba(20,15,8,.18) 100%);
}
.philosophy__inner { position: relative; z-index: 2; padding: 0 var(--gutter) 0 486px; max-width: 1500px; }
.philosophy__kicker {
  font-family: var(--font-display); font-size: 24px; color: var(--warm-white); opacity: .85;
}
.philosophy__body {
  margin-top: 22px;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(24px, 2.3vw, 40px); line-height: 1.32; letter-spacing: -.01em;
  color: var(--warm-white);
}
.philosophy .btn-solid { margin-top: 34px; }

/* ---------- 04 · feeling band ---------- */
.feeling { position: relative; margin: 34px var(--gutter) 0; }
/* crop tuned so the pale wall carries the text but the scene still grounds low */
.feeling__img { width: 100%; aspect-ratio: 1857 / 530; object-fit: cover; object-position: center 30%; }
.feeling__text {
  position: absolute; left: 78px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(28px, 3.4vw, 62px); line-height: 1.22; letter-spacing: -.015em;
}
.feeling__text .b { color: var(--brass); display: block; }
.feeling__text .k { color: var(--jet); display: block; }

/* ---------- 05 · editorial split ---------- */
.split { display: flex; gap: var(--gap); padding: 0 var(--gutter); margin-top: 96px; align-items: flex-start; }
.split__text {
  width: calc(50% - var(--gap) / 2);
  padding: 8px 0 0 69px;
  /* reference behavior: the title block rides along while the tall image
     scrolls, releasing once the section bottom reaches it */
  position: sticky;
  top: 44px;
}
.split__media { width: calc(50% - var(--gap) / 2); }
.split__media img { width: 100%; aspect-ratio: 916 / 1072; object-fit: cover; }
.split--rev .split__media { order: -1; }
.split--rev .split__text { padding-left: 0; padding-right: 69px; }
.split__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(38px, 4.6vw, 84px); line-height: 1.12; letter-spacing: -.015em;
}
.split__sub { margin-top: 20px; max-width: 40ch; font-size: 15px; line-height: 1.5; color: var(--ink-soft); }
.split .btn-line { margin-top: 34px; }

/* ---------- 06 · product row ---------- */
.prow { display: flex; gap: var(--gap); padding: 0 var(--gutter); margin-top: 56px; }
.card { width: calc(25% - var(--gap) * 3 / 4); position: relative; }
.card__media {
  display: block; position: relative; overflow: hidden;
  aspect-ratio: 446 / 594; background: var(--warm-white);
}
.card__media > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; padding: 34px 24px 116px;
  transition: opacity .3s var(--ease);
}
.card__media > img + img { opacity: 0; }
.card__media.show-b > img { opacity: 0; }
.card__media.show-b > img + img { opacity: 1; }
.card__tag {
  position: absolute; top: 14px; left: 14px; z-index: 3;
  height: 22px; display: inline-flex; align-items: center; padding: 0 10px;
  background: var(--brass); color: var(--warm-white);
  font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
}
.card__lockup {
  position: absolute; left: 0; right: 0; bottom: 44px; z-index: 3;
  display: flex; justify-content: center;
}
/* design proportion: the lockup spans 80% of the card (358 of 446) */
.card__lockup img { display: block; width: 80%; max-width: 359px; height: auto; }
.card__dots { position: absolute; left: 20px; bottom: 18px; z-index: 3; display: flex; gap: 5px; }
.card__dots i { width: 5px; height: 5px; border-radius: 50%; background: rgba(35,32,27,.28); }
.card__dots i.on { background: var(--jet); }
.card__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  color: var(--ink); opacity: 0; transition: opacity .2s var(--ease);
}
.card__arrow svg { width: 18px; height: 18px; }
.card__arrow--prev { left: 2px; }
.card__arrow--next { right: 2px; }
.card:hover .card__arrow { opacity: .75; }
.card__name { margin-top: 15px; font-size: 13px; line-height: 1.25; }
.card__sizes { margin-top: 7px; font-size: 13px; line-height: 1.25; color: var(--ink-soft); }
.card__cta {
  margin-top: 15px; width: 100%; height: 48px;
  display: flex; align-items: center; padding: 0 16px;
  border: 1px solid var(--hairline); font-size: 14px; line-height: 1;
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.card__cta:hover { background: var(--ink); border-color: var(--ink); color: var(--warm-white); }

/* ---------- 07 · live craft banner ---------- */
.banner { position: relative; margin: 96px var(--gutter) 0; }
.banner__img { width: 100%; aspect-ratio: 1857 / 530; object-fit: cover; }
.banner__text { position: absolute; left: 80px; top: 72px; z-index: 2; }
.banner__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(34px, 3.9vw, 70px); line-height: 1.1; letter-spacing: -.015em;
  color: var(--warm-white);
}
.banner .btn-line { margin-top: 26px; border-color: rgba(255,249,238,.6); color: var(--warm-white); }
.banner .btn-line:hover { background: var(--warm-white); border-color: var(--warm-white); color: var(--ink); }

/* ---------- 08 · merch ---------- */
.merch { position: relative; margin: 110px var(--gutter) 0; min-height: 710px; display: flex; align-items: center; }
.merch__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.merch::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(12,10,8,.74) 0%, rgba(12,10,8,.34) 52%, rgba(12,10,8,0) 78%);
}
.merch__inner { position: relative; z-index: 2; padding-left: 134px; max-width: 900px; }
.merch__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(40px, 4.6vw, 86px); line-height: 1.08; letter-spacing: -.02em;
  color: var(--warm-white);
}
.merch__sub { margin-top: 26px; max-width: 460px; font-size: 14px; line-height: 1.5; color: rgba(255,249,238,.8); }
.merch .btn-solid { margin-top: 30px; }
.merch::after {
  background: linear-gradient(90deg, rgba(12,10,8,.74) 0%, rgba(12,10,8,.30) 60%, rgba(12,10,8,.05) 100%);
}

/* ---------- 09 · social ---------- */
.social { margin-top: 104px; }
.social__head { padding: 0 var(--gutter); position: relative; }
.social__title { font-family: var(--font-display); font-weight: 400; font-size: 34px; line-height: 1.2; }
.social__sub { margin-top: 18px; font-size: 13px; line-height: 1.4; color: var(--ink-soft); }
.social__nav { position: absolute; right: 44px; bottom: 0; display: flex; gap: 14px; }
.social__nav button { padding: 8px 6px; line-height: 0; }
.social__nav svg { width: 10px; height: 18px; display: block; }
.social__nav button[disabled] { opacity: .3; cursor: default; }
.social .rail { margin-top: 28px; }
.ugc { width: 23.75%; }
.ugc__media { display: block; aspect-ratio: 441 / 573; background: var(--warm-white); }
.ugc__media img { width: 100%; height: 100%; object-fit: cover; }
.ugc__handle { margin-top: 14px; font-size: 14px; }
.ugc__link {
  margin-top: 6px; display: inline-block; font-size: 14px; font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
}

/* ---------- 10 · newsletter ---------- */
.news { padding: 74px var(--gutter) 0; }
.news__card {
  background: var(--warm-white); border-radius: 28px;
  padding: 92px 24px 96px; text-align: center;
}
.news__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(38px, 4.4vw, 80px); line-height: 1.1; letter-spacing: -.015em;
}
.news__sub { margin: 26px auto 0; max-width: 540px; font-size: 14px; line-height: 1.5; color: var(--ink-soft); }
.news__form { margin: 34px auto 0; display: flex; max-width: 520px; }
.news__field {
  flex: 1; height: 46px; padding: 0 16px;
  border: 1px solid var(--hairline); border-right: 0; background: transparent;
  font-size: 14px; letter-spacing: .01em; color: var(--ink);
}
.news__field::placeholder { color: var(--ink-soft); }
.news__btn {
  height: 46px; padding: 0 22px; background: var(--jet); color: var(--warm-white);
  font-size: 14px; font-weight: 500; letter-spacing: .02em;
  transition: background-color .3s var(--ease);
}
.news__btn:hover { background: #000; }
.news__fine { margin-top: 24px; font-size: 11px; letter-spacing: .04em; color: var(--ink-soft); }

/* ---------- 11 · footer ---------- */
.foot { margin-top: 78px; background: var(--jet); color: var(--warm-white); padding: 54px var(--gutter) 0; }
.foot__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.foot__nltitle { font-size: 15px; font-weight: 600; color: var(--gold); }
.foot__nlsub { margin-top: 14px; max-width: 280px; font-size: 12px; line-height: 1.5; color: rgba(255,249,238,.68); }
.foot__field {
  margin-top: 16px; width: 100%; max-width: 300px; height: 38px; padding: 0 14px;
  background: var(--warm-white); border: 0; font-size: 12px; color: var(--ink);
}
.foot__btn {
  margin-top: 10px; width: 100%; max-width: 300px; height: 34px;
  background: var(--brass); color: var(--jet); font-size: 12px; font-weight: 600;
  transition: opacity .3s var(--ease);
}
.foot__btn:hover { opacity: .88; }
.foot__fine { margin-top: 14px; font-size: 10px; color: rgba(255,249,238,.5); }
.foot__coltitle { font-family: var(--font-display); font-weight: 400; font-size: 20px; color: var(--gold); }
.foot__links { margin-top: 14px; list-style: none; font-size: 12px; line-height: 21px; color: rgba(255,249,238,.8); }
.foot__links a:hover { color: var(--warm-white); text-decoration: underline; text-underline-offset: 2px; }

.foot__mark {
  margin-top: 52px; padding-top: 26px; border-top: 1px solid rgba(255,249,238,.14);
  display: flex; align-items: center;
}
.foot__word { margin: 0 auto; }
.foot__word img { display: block; height: 52px; width: auto; }
.foot__states { display: flex; gap: 10px; }
.foot__states span {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,249,238,.3);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; letter-spacing: .04em; color: rgba(255,249,238,.85);
}
.foot__legal {
  margin-top: 26px; padding-bottom: 30px;
  display: grid; grid-template-columns: 300px 1fr 1fr; gap: var(--gap); align-items: start;
}
.foot__legal a { font-size: 12px; margin-right: 22px; color: rgba(255,249,238,.85); }
.foot__legal a:hover { color: var(--warm-white); text-decoration: underline; text-underline-offset: 2px; }
.foot__legal p { font-size: 10px; line-height: 1.55; color: rgba(255,249,238,.46); }

/* ---------- responsive ---------- */
@media (max-width: 1279px) {
  .hero__inner { padding-left: 72px; }
  .philosophy__inner { padding-left: 280px; }
  .split__text { padding-left: 24px; }
  .split--rev .split__text { padding-right: 24px; }
  .merch__inner { padding-left: 64px; }
  .banner__text { left: 48px; top: 60px; }
}
@media (max-width: 1023px) {
  .hdr__nav { display: none; }
  .hdr__burger { display: block; }
  .hdr__cta { display: none; }
  .philosophy__inner { padding: 0 40px; }
  .prow { flex-wrap: wrap; }
  .card { width: calc(50% - var(--gap) / 2); }
  .mood-tile { width: 40%; }
  .ugc { width: 46%; }
  .merch { display: block; padding: 64px 0; }
  .merch__inner { max-width: none; padding: 0 40px; }
  .foot__grid { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
  .foot__legal { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .hero { height: 100svh; }
  .split__text { position: static; }
  .hero__inner { padding: 0 24px; }
  .hero__actions { flex-direction: column; align-items: flex-start; gap: 4px; }
  .split { flex-direction: column; margin-top: 56px; }
  .split__text, .split__media { width: 100%; padding: 0; }
  .split--rev .split__media { order: 0; }
  .split--rev .split__text { padding: 0; }
  .split__media img { aspect-ratio: 4 / 3; }
  .mood-tile { width: 62vw; }
  .ugc { width: 70vw; }
  .card { width: 100%; }
  .feeling__img { aspect-ratio: 4 / 3; }
  .feeling__text { left: 24px; top: 34px; transform: none; }
  .banner__img { aspect-ratio: 4 / 3; }
  .banner__text { left: 24px; top: 34px; }
  .philosophy { min-height: 0; padding: 64px 0; }
  .philosophy__inner { padding: 0 24px; }
  .merch__inner { padding: 0 24px; }
  .news { padding-top: 48px; }
  .news__card { padding: 52px 20px 56px; border-radius: 20px; }
  .news__form { flex-direction: column; gap: 10px; }
  .news__field { border-right: 1px solid var(--hairline); }
  .foot__grid { grid-template-columns: 1fr; }
  .foot__mark { flex-direction: column; gap: 20px; }
  .foot__word { margin: 0; }
}

/* ============================================================
   POLISH LAYER — fit-and-finish pass, zero layout changes.
   The reference site's cleanliness = one button system, one
   text scale, quiet chips, image-dim hovers, light scrims.
   ============================================================ */

/* ---- type discipline ---- */
h1, h2, h3, .hero__title, .split__title, .banner__title, .news__title, .merch__title {
  text-rendering: optimizeLegibility;
  font-synthesis: none;
}
.split__title, .banner__title, .news__title, .merch__title {
  line-height: 1.08;
  letter-spacing: -.02em;
}
.hero__title { letter-spacing: -.02em; }
.split__sub { font-size: 14px; line-height: 1.55; color: rgba(35, 32, 27, .55); }
.social__sub, .news__sub { color: rgba(35, 32, 27, .55); }

/* ---- one card text scale ---- */
.card__name { margin-top: 16px; font-size: 13px; font-weight: 600; line-height: 1.3; }
.card__sizes { margin-top: 4px; font-size: 13px; color: rgba(35, 32, 27, .5); }

/* ---- one button system: 48px, 13px label, same padding, same hover ---- */
.btn-line, .card__cta {
  height: 48px;
  padding: 0 18px;
  font-size: 13px;
  border-color: rgba(35, 32, 27, .22);
}
.btn-quiz, .btn-solid, .btn-text { font-size: 15px; letter-spacing: .02em; }
.btn-quiz { padding: 0 18px; }
.btn-solid { padding: 0 18px; }

/* ---- quiet chips ---- */
.card__tag {
  height: 24px;
  padding: 0 9px;
  font-size: 9.5px;
  letter-spacing: .16em;
  top: 16px;
  left: 16px;
}

/* ---- the reference hover language: images dim, text underlines ---- */
a:hover img { opacity: .84; }
.hdr__logo:hover img, .foot__word img, .card__lockup img { opacity: 1 !important; }
.card__media > img { transition: opacity .35s var(--ease); }
.mood-tile__img, .split__media img, .banner__img, .ugc__media img {
  transition: opacity .35s var(--ease);
}
.card__cta:hover, .btn-line:hover { text-decoration: none; }

/* hover reveals the second image when one exists; single-image cards just dim */
.card__media:has(> img + img):hover > img { opacity: 0; }
.card__media:has(> img + img):hover > img + img { opacity: 1; }
.card__media.show-b:hover > img { opacity: 0; }
.card__media.show-b:hover > img + img { opacity: 1; }

/* ---- lighter scrims, same readability ---- */
.philosophy::after {
  background: linear-gradient(90deg, rgba(20, 15, 8, .62) 0%, rgba(20, 15, 8, .34) 55%, rgba(20, 15, 8, .12) 100%);
}
.merch::after {
  background: linear-gradient(90deg, rgba(12, 10, 8, .66) 0%, rgba(12, 10, 8, .26) 60%, rgba(12, 10, 8, .04) 100%);
}
.mood-tile::after {
  background: linear-gradient(to top, rgba(0, 0, 0, .38) 0%, rgba(0, 0, 0, 0) 38%);
}

/* ---- consistent controls ---- */
.railhead__btn, .social__nav button {
  padding: 8px;
  transition: opacity .25s var(--ease);
}
.railhead__btn:hover:not([disabled]), .social__nav button:hover:not([disabled]) { opacity: .55; }
.card__arrow { color: var(--ink); }

/* ---- footer refinement ---- */
.foot__links { line-height: 23px; }
.foot__links a, .foot__legal a { transition: color .25s var(--ease); }
.foot__coltitle { letter-spacing: .01em; }

/* ---- quiet focus for keyboard users, invisible to mouse ---- */
:focus-visible { outline: 1.5px solid var(--brass); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }

/* ---- selection in brand ---- */
::selection { background: rgba(177, 141, 87, .28); }

/* ============================================================
   BUTTON CONSISTENCY — all buttons are outlines, no fills.
   Resting state: 1px border, transparent ground, label in the
   surface's ink. Hover: invert (fill with the border colour).
   ============================================================ */

.btn-quiz {
  background: transparent;
  border: 1px solid var(--warm-white);
  color: var(--warm-white);
}
.btn-quiz:hover { background: var(--warm-white); color: var(--ink); }

.btn-solid {
  background: transparent;
  border: 1px solid rgba(255, 249, 238, .75);
  color: var(--warm-white);
}
.btn-solid:hover { background: var(--warm-white); border-color: var(--warm-white); color: var(--ink); opacity: 1; }

.hdr__cta {
  background: transparent;
  border: 1px solid var(--gold);
  color: var(--gold);
}
.hdr__cta:hover { background: var(--gold); color: var(--jet); }

.news__btn {
  background: transparent;
  border: 1px solid var(--hairline);
  color: var(--ink);
}
.news__btn:hover { background: var(--ink); border-color: var(--ink); color: var(--warm-white); }

.foot__btn {
  background: transparent;
  border: 1px solid rgba(255, 249, 238, .45);
  color: var(--warm-white);
}
.foot__btn:hover { background: var(--warm-white); border-color: var(--warm-white); color: var(--jet); opacity: 1; }

/* joined newsletter form: field and button share one hairline */
.news__field { border-right: 1px solid var(--hairline); }
.news__form .news__btn { border-left: 0; }

/* ============================================================
   HEADER LIGHT STATE + MEGA MENUS
   Hover or open menu: bar turns #FFF8EA, nav ink goes black.
   Catalog/Collabs = image-panel row (Figma 563:2620 adapted) ·
   Moods = caption-over-tile grid (Figma 563:3165), 9 tiles.
   ============================================================ */

.hdr { transition: background-color .25s var(--ease); }
.hdr:hover, .hdr.is-open { background: #FFF8EA; }
.hdr:hover .hdr__nav a, .hdr.is-open .hdr__nav a,
.hdr:hover .hdr__navbtn, .hdr.is-open .hdr__navbtn { color: var(--ink); }
.hdr:hover .hdr__burger span, .hdr.is-open .hdr__burger span { background: var(--ink); }

.hdr__navbtn {
  font-size: 15px; font-weight: 500; letter-spacing: .02em;
  color: var(--warm-white); opacity: .92; padding: 0;
  transition: opacity .3s var(--ease), color .25s var(--ease);
}
.hdr__navbtn:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.hdr__navbtn[aria-expanded="true"] { text-decoration: underline; text-underline-offset: 4px; }

/* ---- panel shell ---- */
.mega {
  position: absolute; top: 90px; left: 0; right: 0; z-index: 39;
  background: #FFF8EA;
  border-top: 1px solid rgba(35, 32, 27, .08);
  box-shadow: 0 18px 30px -22px rgba(11, 11, 13, .35);
  padding: 34px var(--gutter) 44px;
  display: none;
}
.mega.is-open { display: block; }

/* ---- catalog / collabs: titled image panels ---- */
.mega__row { display: flex; gap: var(--gap); }
.mega-panel { flex: 1; display: block; min-width: 0; }
.mega-panel__title {
  display: block;
  font-family: var(--font-display); font-size: 22px; line-height: 1.2;
  color: var(--ink); margin-bottom: 14px;
}
.mega-panel__media { display: block; aspect-ratio: 3 / 2; overflow: hidden; }
.mega-panel__media img { width: 100%; height: 100%; object-fit: cover; }
.mega-panel:hover .mega-panel__title {
  display: block; text-decoration: underline; text-underline-offset: 3px; }

/* ---- moods grid: caption over tile, 5 across ---- */
.mega__grid {
  display: grid; grid-template-columns: repeat(5, 1fr);
  column-gap: var(--gap); row-gap: 30px;
}
.mega-mood { display: block; min-width: 0; }
.mega-mood__title {
  display: block;
  font-family: var(--font-display); font-size: 17px; line-height: 1.2;
  color: var(--ink); margin-bottom: 10px;
}
.mega-mood__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.mega-mood__media img { width: 100%; height: 100%; object-fit: cover; }
.mega-mood:hover .mega-mood__title {
  display: block; text-decoration: underline; text-underline-offset: 3px; }

/* ---- empty slots (menu tiles + product cards awaiting art) ---- */
.slot {
  display: block; width: 100%; height: 100%;
  background: #F3ECDD; position: relative;
}
.slot::after {
  content: attr(data-slot);
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(35, 32, 27, .3);
}
.card__media > .slot { position: absolute; inset: 0; }

@media (max-width: 1023px) {
  .mega { top: 90px; max-height: calc(100vh - 90px); overflow-y: auto; }
  .mega__grid { grid-template-columns: repeat(3, 1fr); }
  .mega__row { flex-wrap: wrap; }
  .mega-panel { flex: 1 1 40%; }
}
@media (max-width: 767px) {
  .mega__grid { grid-template-columns: repeat(2, 1fr); }
  .mega-panel { flex: 1 1 100%; }
}

/* ============================================================
   INNER PAGES — collection / mood / locator
   Shared: solid light header variant + page scaffolding.
   ============================================================ */

.hdr--solid {
  position: static;
  background: #FFF8EA;
  border-bottom: 1px solid rgba(35, 32, 27, .08);
}
.hdr--solid .hdr__nav a, .hdr--solid .hdr__navbtn { color: var(--ink); }
.hdr--solid .hdr__burger span { background: var(--ink); }
/* .mega top comes from its base rule (90px) on every page */

.page-head { padding: 64px var(--gutter) 0; }
.page-head__kicker {
  font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-soft);
}
.page-head__title {
  margin-top: 12px;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(40px, 4.6vw, 84px); line-height: 1.08; letter-spacing: -.02em;
}
.page-head__sub { margin-top: 16px; max-width: 52ch; font-size: 15px; line-height: 1.55; color: var(--ink-soft); }

/* ---- collection filters + grid ---- */
.filters {
  display: flex; align-items: center; gap: 26px;
  padding: 30px var(--gutter) 26px;
}
.filters__chip {
  font-size: 14px; padding: 0; color: var(--ink-soft);
  transition: color .2s var(--ease);
}
.filters__chip:hover { color: var(--ink); }
.filters__chip.is-on { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.filters__count { margin-left: auto; font-size: 13px; color: var(--ink-soft); }

.cgrid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 40px var(--gap);
  padding: 0 var(--gutter) 90px;
}
.cgrid .card { width: auto; }
.cgrid .card.is-hidden { display: none; }

/* ---- mood page ---- */
.mood-hero {
  position: relative; min-height: 62vh;
  display: flex; align-items: flex-end;
  margin: 0 var(--gutter);
  color: var(--warm-white);
}
.mood-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mood-hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.5) 0%, rgba(0,0,0,.08) 55%);
}
.mood-hero__inner { position: relative; z-index: 2; padding: 0 56px 48px; }
.mood-hero__class {
  font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  opacity: .85;
}
.mood-hero__name {
  margin-top: 10px;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(52px, 6.5vw, 120px); line-height: 1; letter-spacing: -.02em;
}
.mood-hero__line { margin-top: 16px; font-size: 19px; }

.mood-profile { display: flex; gap: var(--gap); padding: 72px var(--gutter) 0; align-items: flex-start; }
.mood-profile__text { width: calc(50% - var(--gap) / 2); padding-right: 60px; }
.mood-profile__facts { width: calc(50% - var(--gap) / 2); }
.mood-profile h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(30px, 2.8vw, 48px); line-height: 1.15; letter-spacing: -.015em;
}
.mood-profile__body { margin-top: 20px; font-size: 15px; line-height: 1.6; color: var(--ink-soft); max-width: 46ch; }
.factrow { display: flex; justify-content: space-between; gap: 20px; padding: 18px 0; border-bottom: 1px solid rgba(35,32,27,.14); font-size: 15px; }
.factrow:first-child { border-top: 1px solid rgba(35,32,27,.14); }
.factrow dt { color: var(--ink-soft); }
.factrow dd { text-align: right; }
.mood-formats { padding: 64px var(--gutter) 90px; }
.mood-formats h2 { font-family: var(--font-display); font-weight: 400; font-size: 30px; }
.mood-formats__row { margin-top: 22px; display: flex; gap: 12px; flex-wrap: wrap; }
.formatchip {
  display: inline-flex; align-items: center; height: 44px; padding: 0 18px;
  border: 1px solid var(--hairline); font-size: 14px;
}
.mood-disclaimer { padding: 0 var(--gutter) 70px; font-size: 12px; color: var(--ink-soft); max-width: 72ch; }

/* ---- locator ---- */
/* hero: white type over a dark grade (same treatment as the homepage hero slides) */
.page-hero { position: relative; margin: 0 var(--gutter); color: var(--warm-white); }
.page-hero .slot { aspect-ratio: 1857 / 620; }
.page-hero__inner { position: absolute; left: 56px; bottom: 44px; z-index: 2; }
.page-hero__kicker { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,249,238,.82); }
.page-hero__title {
  margin-top: 10px;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(44px, 5vw, 96px); line-height: 1.02; letter-spacing: -.02em;
  color: var(--warm-white);
  text-shadow: 0 2px 28px rgba(0, 0, 0, .28);
}
.page-hero__title em { font-style: italic; color: var(--gold); }
.page-hero__sub { margin-top: 14px; max-width: 44ch; font-size: 15px; line-height: 1.5; color: rgba(255,249,238,.86); }

.loc-controls {
  display: flex; gap: 14px; align-items: center;
  padding: 40px var(--gutter) 24px; flex-wrap: wrap;
}
.loc-controls input[type="search"] {
  flex: 1; min-width: 240px; height: 48px; padding: 0 16px;
  background: transparent; border: 1px solid var(--hairline);
  font: inherit; font-family: var(--font-ui); font-size: 14px; color: var(--ink);
}
.loc-controls input::placeholder { color: var(--ink-soft); }
.loc-controls select {
  height: 48px; padding: 0 14px; background: transparent;
  border: 1px solid var(--hairline); font: inherit; font-family: var(--font-ui); font-size: 14px; color: var(--ink);
}
.loc-controls__count { font-size: 13px; color: var(--ink-soft); margin-left: 6px; }

.loc-body { display: flex; gap: var(--gap); padding: 0 var(--gutter); align-items: stretch; }
.loc-list { width: 38%; max-height: 640px; overflow-y: auto; }
.loc-item { padding: 22px 20px; border-bottom: 1px solid rgba(35,32,27,.12); background: var(--warm-white); cursor: pointer; }
.loc-item:hover { background: #FFF4DF; }
.loc-item__meta { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.loc-item__name { margin-top: 6px; font-family: var(--font-display); font-size: 22px; }
.loc-item__addr { margin-top: 4px; font-size: 13px; color: var(--ink-soft); }
.loc-item__note { margin-top: 8px; font-size: 12px; color: var(--brass); }
.loc-empty { padding: 40px 20px; background: var(--warm-white); font-size: 14px; color: var(--ink-soft); }
/* #map is absolutely filled: a percentage height can't resolve inside a column-flex item
   (≤1023px), which left Leaflet initialising at 0px tall and the mobile map blank.
   isolation:isolate is load-bearing — Leaflet's panes/controls carry z-index 400–1000 and
   .leaflet-container (position:relative, z-index:auto) makes no stacking context of its own,
   so those values compete in the ROOT context and paint over every site overlay (cookie bar
   90, age gate 100, mobile drawer, header). Isolating keeps them inside this box. */
.loc-map { flex: 1; min-height: 640px; position: relative; z-index: 0; isolation: isolate; background: #1a1a1c; }
.loc-map > #map { position: absolute; inset: 0; }
.loc-map .leaflet-container { height: 100%; width: 100%; background: #1a1a1c; font: inherit; }

.loc-pending { padding: 18px var(--gutter) 0; font-size: 13px; color: var(--ink-soft); }

.loc-trade {
  margin: 80px var(--gutter) 90px; background: #A94722; color: var(--warm-white);
  padding: 84px 72px; display: flex; align-items: center; gap: 40px; flex-wrap: wrap;
}
.loc-trade__kicker { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; opacity: .85; }
.loc-trade__title {
  margin-top: 12px; max-width: 12ch;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(36px, 4vw, 72px); line-height: 1.1; letter-spacing: -.015em;
}
.loc-trade__side { margin-left: auto; max-width: 380px; font-size: 14px; line-height: 1.55; }
.loc-trade .btn-line { margin-top: 22px; border-color: rgba(255,249,238,.6); color: var(--warm-white); }
.loc-trade .btn-line:hover { background: var(--warm-white); border-color: var(--warm-white); color: #A94722; }

@media (max-width: 1023px) {
  .cgrid { grid-template-columns: repeat(2, 1fr); }
  .mood-profile { flex-direction: column; }
  .mood-profile__text, .mood-profile__facts { width: 100%; padding-right: 0; }
  .loc-body { flex-direction: column; }
  .loc-list { width: 100%; max-height: 380px; }
  .loc-map { min-height: 420px; }
}
@media (max-width: 767px) {
  .cgrid { grid-template-columns: 1fr; }
  .loc-trade { padding: 48px 24px; }
  .page-hero__inner { left: 24px; right: 24px; bottom: 24px; }
  .page-hero__sub { max-width: none; }
}

/* ============================================================
   PDP — gallery left, sticky info right (Figma 568:4664 shape),
   no commerce: the product is explained, the CTA is the locator.
   ============================================================ */

.pdp { display: flex; gap: var(--gap); padding: 34px var(--gutter) 0; align-items: flex-start; }
.pdp__gallery { width: 55%; display: flex; flex-direction: column; gap: var(--gap); }
.pdp__shot { position: relative; background: var(--warm-white); aspect-ratio: 4 / 3; overflow: hidden; }
.pdp__shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 40px; }
.pdp__shot .slot { position: absolute; inset: 0; }
.pdp__shot--photo img { object-fit: cover; padding: 0; }

.pdp__info { width: 45%; position: sticky; top: 44px; padding: 8px 0 0 44px; }
.pdp__back { font-size: 13px; color: var(--ink-soft); }
.pdp__back:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.pdp__kicker { margin-top: 26px; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }
.pdp__title {
  margin-top: 10px;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(30px, 2.9vw, 52px); line-height: 1.12; letter-spacing: -.015em;
}
.pdp__lockup { margin-top: 16px; }
.pdp__lockup img { height: 30px; width: auto; }
.pdp__blurb { margin-top: 22px; font-size: 15px; line-height: 1.6; color: var(--ink-soft); max-width: 46ch; }
.pdp__facts { margin-top: 28px; }
.pdp__ctas { margin-top: 30px; display: flex; gap: 12px; flex-wrap: wrap; }
.pdp__ctas .btn-quiz { height: 48px; }
.pdp__note { margin-top: 22px; font-size: 12px; color: var(--ink-soft); max-width: 46ch; }

.pdp-related { padding: 90px var(--gutter) 90px; }
.pdp-related h2 { font-family: var(--font-display); font-weight: 400; font-size: 30px; margin-bottom: 26px; }
.pdp-related .cgrid { padding: 0; }

@media (max-width: 1023px) {
  .pdp { flex-direction: column; }
  .pdp__gallery, .pdp__info { width: 100%; }
  .pdp__info { position: static; padding-left: 0; }
}

/* on light surfaces the primary outline button reads in ink, not warm-white */
.pdp__ctas .btn-quiz {
  border-color: var(--ink);
  color: var(--ink);
  background: transparent;
}
.pdp__ctas .btn-quiz:hover { background: var(--ink); color: var(--warm-white); }

/* ============================================================
   QUIZ · LEGAL · ABOUT · 404 — the remaining pages, current system
   ============================================================ */

/* ---- quiz ---- */
.quiz { display: flex; gap: var(--gap); padding: 64px var(--gutter) 90px; align-items: flex-start; }
.quiz__intro { width: 38%; position: sticky; top: 44px; }
.quiz__panel { width: 62%; background: var(--warm-white); padding: 36px 40px 44px; }
.quiz__rail { display: flex; align-items: center; gap: 16px; }
.quiz__rail-label { font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }
.quiz__dots { display: flex; gap: 6px; flex: 1; }
.quiz__dots i { width: 28px; height: 2px; background: rgba(35,32,27,.18); }
.quiz__dots i.active { background: var(--brass); }
.quiz__qtitle { margin-top: 30px; font-family: var(--font-display); font-weight: 400; font-size: clamp(26px, 2.4vw, 40px); line-height: 1.15; }
.quiz__qsub { margin-top: 8px; font-size: 14px; color: var(--ink-soft); }
.quiz__answers { margin-top: 26px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.quiz-answer { padding: 0; border: 1px solid transparent; text-align: left; transition: border-color .2s var(--ease); }
.quiz-answer:hover { border-color: var(--brass); }
.quiz-answer__fig { display: block; aspect-ratio: 1; overflow: hidden; }
.quiz-answer__fig img { width: 100%; height: 100%; object-fit: cover; transition: opacity .3s var(--ease); }
.quiz-answer:hover .quiz-answer__fig img { opacity: .85; }
.quiz-answer__label { display: block; padding: 12px 4px 14px; font-size: 14px; font-weight: 500; }
.quiz-result { display: none; }
.quiz-result.show { display: flex; gap: 30px; align-items: flex-start; }
.quiz-result__img { width: 44%; aspect-ratio: 1; overflow: hidden; flex-shrink: 0; }
.quiz-result__img img { width: 100%; height: 100%; object-fit: cover; }
.quiz-result__eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }
.quiz-result__name { margin-top: 12px; font-family: var(--font-display); font-size: clamp(40px, 4vw, 68px); line-height: 1; }
.quiz-result__chip { margin-top: 10px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--brass); }
.quiz-result__line { margin-top: 12px; font-size: 16px; color: var(--ink-soft); }
.quiz-result__ctas { margin-top: 24px; display: flex; gap: 12px; flex-wrap: wrap; }
.quiz-result__ctas .btn-quiz { border-color: var(--ink); color: var(--ink); background: transparent; height: 48px; }
.quiz-result__ctas .btn-quiz:hover { background: var(--ink); color: var(--warm-white); }
.quiz-retake { margin-top: 18px; font-size: 13px; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; }
.quiz-retake:hover { color: var(--ink); }

/* ---- legal ---- */
.legal { display: flex; gap: 48px; padding: 40px var(--gutter) 90px; align-items: flex-start; }
.legal__nav { width: 240px; flex-shrink: 0; position: sticky; top: 44px; display: flex; flex-direction: column; gap: 12px; }
.legal__nav a { font-size: 14px; color: var(--ink-soft); }
.legal__nav a:hover { color: var(--ink); }
.legal__nav a.is-current { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.legal__body { flex: 1; max-width: 720px; }
.legal__updated { margin-top: 10px; font-size: 12px; color: var(--ink-soft); }
.legal-content section { margin-top: 34px; }
.legal-content h2 { font-family: var(--font-display); font-weight: 400; font-size: 26px; }
.legal-content p, .legal-content li { margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
.legal-content ul { padding-left: 20px; }
.legal-content a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---- about ---- */
.about-quote { padding: 90px var(--gutter); text-align: center; }
.about-quote blockquote { font-family: var(--font-display); font-weight: 400; font-size: clamp(26px, 2.8vw, 44px); line-height: 1.3; letter-spacing: -.01em; max-width: 22ch; margin: 0 auto; }
.about-quote cite { display: block; margin-top: 18px; font-style: normal; font-size: 13px; color: var(--ink-soft); }
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); padding: 0 var(--gutter) 80px; }
.pillar { background: var(--warm-white); padding: 34px 30px 40px; }
.pillar__num { font-size: 12px; font-weight: 600; letter-spacing: .14em; color: var(--brass); }
.pillar__title { margin-top: 14px; font-family: var(--font-display); font-weight: 400; font-size: 26px; }
.pillar__copy { margin-top: 12px; font-size: 14px; line-height: 1.6; color: var(--ink-soft); }
.about-contact { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); padding: 0 var(--gutter) 90px; }
.about-contact h2 { font-family: var(--font-display); font-weight: 400; font-size: 26px; }
.about-contact p { margin-top: 12px; font-size: 15px; line-height: 1.7; color: var(--ink-soft); }
.about-contact a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---- 404 ---- */
.nf { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 60px var(--gutter); }
.nf__code { font-family: var(--font-display); font-size: clamp(80px, 12vw, 180px); line-height: 1; color: var(--brass); }
.nf__line { margin-top: 18px; font-size: 16px; color: var(--ink-soft); }
.nf__ctas { margin-top: 30px; display: flex; gap: 12px; }

@media (max-width: 1023px) {
  .quiz { flex-direction: column; }
  .quiz__intro, .quiz__panel { width: 100%; position: static; }
  .legal { flex-direction: column; }
  .legal__nav { position: static; width: 100%; flex-direction: row; flex-wrap: wrap; gap: 18px; }
  .pillars { grid-template-columns: 1fr; }
  .about-contact { grid-template-columns: 1fr; }
  .quiz-result.show { flex-direction: column; }
  .quiz-result__img { width: 100%; }
}
@media (max-width: 767px) {
  .quiz__answers { grid-template-columns: 1fr; }
  .quiz-answer { display: flex; align-items: center; gap: 14px; }
  .quiz-answer__fig { width: 72px; flex-shrink: 0; }
}

/* ---------- hero slider ---------- */
.hero__slides { position: absolute; inset: 0; }
.hero__slides .hero__img { opacity: 0; transition: opacity 1s var(--ease); }
.hero__slides .hero__img.is-on { opacity: 1; }
.hero__dots {
  position: absolute; left: 185px; bottom: 34px; z-index: 3;
  display: flex; gap: 8px;
}
.hero__dots i {
  width: 28px; height: 2px; background: rgba(255, 249, 238, .35);
  cursor: pointer; transition: background-color .3s var(--ease);
}
.hero__dots i.on { background: var(--warm-white); }
@media (max-width: 1279px) { .hero__dots { left: 72px; } }
@media (max-width: 767px) { .hero__dots { left: 24px; bottom: 20px; } }

.page-hero__img { display: block; width: 100%; aspect-ratio: 1857 / 620; object-fit: cover; }
/* the 3:1 plate is ~114px tall at 390px — relayout to a portrait crop on phones so the
   kicker/title/sub stack fits inside the frame instead of bleeding up under the header */
@media (max-width: 767px) { .page-hero__img { aspect-ratio: 4 / 5; } }

/* dark grade behind the locator hero text — the plate is bright cream marble, so the
   left/bottom text zone needs a heavier filter than the homepage slides; the product
   trio (center-right) stays visible under the lighter tail */
.page-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, rgba(11,11,13,.66) 0%, rgba(11,11,13,.46) 36%, rgba(11,11,13,.18) 64%, rgba(11,11,13,.06) 100%),
    linear-gradient(0deg, rgba(11,11,13,.52) 0%, rgba(11,11,13,.22) 34%, rgba(11,11,13,0) 60%),
    rgba(11,11,13,.14);
}
/* phones: the copy spans the full width of the portrait crop, so the bottom band carries it */
@media (max-width: 767px) {
  .page-hero::after {
    background:
      linear-gradient(0deg, rgba(11,11,13,.72) 0%, rgba(11,11,13,.5) 30%, rgba(11,11,13,.18) 55%, rgba(11,11,13,.04) 80%),
      rgba(11,11,13,.14);
  }
}
.page-hero__inner { z-index: 2; }

/* mega menus must never run past the viewport — cap and scroll on all widths */
.mega { max-height: calc(100vh - 90px); overflow-y: auto; }
.mega-panel__media { max-height: 400px; }
.mega-panel__media img, .mega-panel__media .slot { height: 100%; }

/* ============================================================
   CARD IMAGES FILL THE FRAME (reference behavior) + HERO INK
   ============================================================ */

/* photos bleed edge-to-edge in the card; cutout renders opt into contain */
.card__media > img { object-fit: cover; padding: 0; }
.card__media > img.contain { object-fit: contain; padding: 28px; background: var(--warm-white); }

/* all three hero slides sit on pale champagne — the headline reads in ink */
.hero__title { color: var(--ink); }
.hero__inner .btn-quiz { background: transparent; border: 1px solid var(--ink); color: var(--ink); }
.hero__inner .btn-quiz:hover { background: var(--ink); color: var(--warm-white); }
.hero__inner .btn-text { color: var(--ink); }
.hero__dots i { background: rgba(35, 32, 27, .22); }
.hero__dots i.on { background: var(--ink); }

/* white display text over lighter imagery gets a whisper of grounding */
.banner__title, .mood-hero__name { text-shadow: 0 2px 28px rgba(0, 0, 0, .28); }

/* landscape jar photos: keep the jar (lower-center of frame) in the card crop */
.card__media > img.crop-low { object-position: center 72%; }

.card__tag--soon { background: var(--jet); color: var(--warm-white); }

/* ============================================================
   HERO FILTER + WHITE TEXT · LOCATOR WORKING AREA
   ============================================================ */

/* dark filter over every hero slide so white type always reads */
.hero__slides::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(11,11,13,.58) 0%, rgba(11,11,13,.32) 48%, rgba(11,11,13,.14) 100%);
}
.hero__inner { z-index: 2; }
.hero__title { color: var(--warm-white); }
.hero__inner .btn-quiz { border-color: var(--warm-white); color: var(--warm-white); background: transparent; }
.hero__inner .btn-quiz:hover { background: var(--warm-white); color: var(--ink); }
.hero__inner .btn-text { color: var(--warm-white); }
.hero__dots { z-index: 3; }
.hero__dots i { background: rgba(255,249,238,.35); }
.hero__dots i.on { background: var(--warm-white); }

/* the locator's working area sits on the champagne canvas like every other inner page:
   hairline controls, warm-white list cards, and a light CARTO basemap warmed toward the
   brand so the map reads as part of the page rather than a foreign widget */
.loc-work { margin-top: 44px; padding: 44px var(--gutter) 56px; }
.loc-work .loc-controls { padding: 0 0 26px; }
.loc-work .loc-controls input[type="search"],
.loc-work .loc-controls select {
  height: 54px; border: 1px solid var(--hairline);
  color: var(--ink); background: var(--warm-white); font-size: 15px;
}
.loc-work .loc-controls select { padding: 0 46px 0 16px; } /* room for the custom chevron */
.loc-work .loc-controls input::placeholder { color: var(--ink-soft); }
.loc-work .loc-controls input:focus,
.loc-work .loc-controls select:focus { outline: none; border-color: var(--ink); }
.loc-work .loc-controls__count { color: var(--brass); font-size: 14px; }
.loc-work .loc-body { padding: 0; }
.loc-work .loc-list { background: transparent; }
.loc-work .loc-item { border-bottom: 1px solid rgba(35,32,27,.1); }
.loc-work .loc-item__meta { color: var(--brass); }
.loc-work .loc-map { background: #EAE0CC; border: 1px solid var(--hairline); }
.loc-work .loc-map .leaflet-container { background: #EAE0CC; }
.loc-work .loc-pending { padding: 20px 0 0; }

/* Positron tiles are neutral grey — sepia/saturate pulls them onto the champagne canvas */
.loc-work .leaflet-tile-pane { filter: sepia(.32) saturate(.7) brightness(1.01) contrast(.96); }

/* leaflet chrome in brand: square, warm-white, hairline, body font */
.loc-work .leaflet-bar { border: 1px solid var(--hairline); border-radius: 0; box-shadow: none; }
.loc-work .leaflet-bar a,
.loc-work .leaflet-bar a:first-child,
.loc-work .leaflet-bar a:last-child {
  width: 34px; height: 34px; line-height: 34px; border-radius: 0;
  background: var(--warm-white); color: var(--ink);
  border-bottom: 1px solid var(--hairline);
  font-family: var(--font-body); font-weight: 500;
}
.loc-work .leaflet-bar a:last-child { border-bottom: 0; }
.loc-work .leaflet-bar a:hover { background: var(--champagne); color: var(--ink); }
.loc-work .leaflet-popup-content-wrapper {
  background: var(--warm-white); color: var(--ink); border-radius: 0;
  box-shadow: 0 8px 28px rgba(35,32,27,.18);
  font-family: var(--font-body); font-size: 13px; line-height: 1.5;
}
.loc-work .leaflet-popup-content { margin: 14px 34px 14px 18px; }
.loc-work .leaflet-popup-content strong { font-family: var(--font-display); font-weight: 400; font-size: 17px; display: block; margin-bottom: 4px; }
.loc-work .leaflet-popup-content span { color: var(--ink-soft); }
.loc-work .leaflet-popup-tip { background: var(--warm-white); box-shadow: none; }
.loc-work .leaflet-container a.leaflet-popup-close-button { color: var(--ink-soft); font: 18px/22px var(--font-body); padding: 6px 8px 0 0; }
.loc-work .leaflet-container a.leaflet-popup-close-button:hover { color: var(--ink); }
.loc-work .leaflet-control-attribution {
  background: rgba(255,249,238,.88); color: var(--ink-soft);
  font: 11px/1.4 var(--font-body); padding: 2px 8px;
}
.loc-work .leaflet-control-attribution a { color: var(--ink); }

/* contact page — image hero (.page-hero, shared with the locator) → enquiry form with a
   proper header and two-up rows → structured trade facts + contact block */
.contact-wrap { display: flex; gap: var(--gap); padding: 44px var(--gutter) 90px; align-items: flex-start; }
.contact-form { width: 55%; background: var(--warm-white); padding: 40px 44px 44px; }
.contact-form__kicker { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }
.contact-form__title {
  margin-top: 10px; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(26px, 2.4vw, 38px); line-height: 1.15; letter-spacing: -.015em;
}
.cfield-row { display: flex; gap: 14px; }
.cfield-row .cfield { flex: 1 1 0; min-width: 0; }
.cfield { margin-top: 20px; }
.cfield label { display: block; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 8px; }
.cfield input, .cfield select, .cfield textarea {
  width: 100%; height: 52px; border: 1px solid var(--hairline); background: transparent;
  font: inherit; font-family: var(--font-ui); font-size: 15px; color: var(--ink); padding: 0 16px; border-radius: 0;
  transition: border-color .2s var(--ease);
}
.cfield input:focus, .cfield select:focus, .cfield textarea:focus { outline: none; border-color: var(--ink); }
.cfield input::placeholder, .cfield textarea::placeholder { color: var(--ink-soft); }
.cfield textarea { height: auto; min-height: 140px; padding: 14px 16px; resize: vertical; }
.contact-form__submit { margin-top: 28px; height: 52px; padding: 0 22px; border: 1px solid var(--ink); color: var(--ink); background: transparent; }
.contact-form__submit:hover { background: var(--ink); color: var(--warm-white); }
.contact-note { margin-top: 16px; font-size: 12px; line-height: 1.5; color: var(--ink-soft); }

.contact-side { width: 45%; padding: 0 0 0 44px; position: sticky; top: 44px; }
.contact-side__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.contact-side h2 { margin-top: 30px; font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 2.6vw, 44px); line-height: 1.12; letter-spacing: -.015em; }
.contact-side > p { margin-top: 16px; font-size: 15px; line-height: 1.6; color: var(--ink-soft); max-width: 44ch; }
.contact-side a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.contact-facts { margin-top: 26px; }
.contact-facts .factrow { padding: 14px 0; font-size: 14px; }
.contact-facts dd { max-width: 60%; }
.contact-mail { margin-top: 26px; }
.contact-mail p { display: flex; flex-direction: column; gap: 4px; padding: 14px 0; border-bottom: 1px solid rgba(35,32,27,.14); }
.contact-mail p:first-child { border-top: 1px solid rgba(35,32,27,.14); }
.contact-mail span { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.contact-mail a { font-family: var(--font-display); font-size: 22px; text-decoration: none; }
.contact-mail a:hover { text-decoration: underline; text-underline-offset: 4px; }
.contact-side__links { margin-top: 22px; font-size: 14px; }
@media (max-width: 1023px) {
  .contact-wrap { flex-direction: column; padding-top: 32px; }
  .contact-form, .contact-side { width: 100%; padding-left: 0; position: static; }
  .contact-side { margin-top: 12px; }
}
@media (max-width: 767px) {
  .contact-form { padding: 28px 20px 30px; }
  .cfield-row { flex-direction: column; gap: 0; }
  .contact-form__submit { width: 100%; justify-content: center; }
  .contact-side { margin-top: 20px; }
  .contact-side__img { aspect-ratio: 5 / 4; }
  .contact-facts dd { max-width: 55%; text-align: right; }
}

/* selects, everywhere: native chrome jams the chevron against the edge and ignores padding on
   some engines — draw our own (ink chevron, 16px inset) with room on both sides */
.loc-controls select, .cfield select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  padding-right: 46px; padding-left: 16px;
  background-color: var(--warm-white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2323201B' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 12px 8px;
  cursor: pointer;
}
.loc-controls select::-ms-expand, .cfield select::-ms-expand { display: none; }

/* ============================================================
   AGE GATE (date-of-birth entry) · COOKIE NOTICE · QUIZ POPUP
   ============================================================ */

.gate {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(11, 11, 13, .92);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.gate__card {
  background: var(--champagne); color: var(--ink);
  max-width: 480px; width: 100%; padding: 48px 44px 44px; text-align: center;
}
.gate__logo { height: 34px; width: auto; margin: 0 auto 26px; }
.gate__title { font-family: var(--font-display); font-weight: 400; font-size: 30px; line-height: 1.2; }
.gate__sub { margin-top: 12px; font-size: 14px; color: var(--ink-soft); }
.gate__dob {
  margin: 26px auto 0; display: block; width: 240px; height: 52px;
  border: 1px solid var(--hairline); background: var(--warm-white);
  font: inherit; font-family: var(--font-ui); font-size: 16px; color: var(--ink); text-align: center; padding: 0 14px;
}
.gate__btn {
  margin-top: 18px; width: 240px; height: 52px;
  border: 1px solid var(--ink); background: transparent; color: var(--ink);
  font-size: 15px; font-weight: 500;
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.gate__btn:hover { background: var(--ink); color: var(--warm-white); }
.gate__err { margin-top: 14px; font-size: 13px; color: #A94722; min-height: 18px; }
.gate__fine { margin-top: 20px; font-size: 11px; color: var(--ink-soft); }

.cookies {
  position: fixed; left: 24px; right: 24px; bottom: 24px; z-index: 90;
  background: var(--jet); color: var(--warm-white);
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  padding: 18px 24px;
}
.cookies p { font-size: 13px; line-height: 1.5; flex: 1; min-width: 260px; color: rgba(255,249,238,.85); }
.cookies a { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; }
.cookies__btn {
  height: 42px; padding: 0 22px;
  border: 1px solid rgba(255,249,238,.6); background: transparent; color: var(--warm-white);
  font-size: 14px; font-weight: 500;
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.cookies__btn:hover { background: var(--warm-white); color: var(--jet); }

.quizpop {
  position: fixed; right: 24px; bottom: 24px; z-index: 80;
  width: 320px; background: var(--warm-white); color: var(--ink);
  padding: 28px 28px 30px;
  box-shadow: 0 24px 48px -18px rgba(11,11,13,.4);
  transform: translateY(24px); opacity: 0; pointer-events: none;
  transition: transform .45s var(--ease), opacity .45s var(--ease);
}
.quizpop.show { transform: none; opacity: 1; pointer-events: auto; }
.quizpop__kicker { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--brass); }
.quizpop__title { margin-top: 8px; font-family: var(--font-display); font-weight: 400; font-size: 26px; line-height: 1.15; }
.quizpop__sub { margin-top: 8px; font-size: 13px; color: var(--ink-soft); }
.quizpop__btn {
  margin-top: 16px; display: inline-flex; align-items: center; height: 44px; padding: 0 18px;
  border: 1px solid var(--ink); color: var(--ink); font-size: 14px; font-weight: 500;
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.quizpop__btn:hover { background: var(--ink); color: var(--warm-white); }
.quizpop__close {
  position: absolute; top: 10px; right: 12px; font-size: 20px; line-height: 1;
  color: var(--ink-soft); padding: 6px;
}
.quizpop__close:hover { color: var(--ink); }
@media (max-width: 767px) {
  .cookies { left: 12px; right: 12px; bottom: 12px; }
  .quizpop { right: 12px; left: 12px; width: auto; bottom: 12px; }
}

/* ============================================================
   MOBILE LAYER — relayout, never shrink. Nav drawer (built by
   home.js), bottom-anchored hero/banner copy, 2-col product cards,
   PDP swipe gallery, filter row, 44px+ tap targets, hover→touch
   equivalents. Desktop is untouched above 1024px.
   ============================================================ */

/* --- burger: 44px target, animates to an × while the drawer is open --- */
.hdr__burger { width: 44px; height: 44px; margin-right: -8px; padding: 0; }
.hdr__burger span { margin: 6px 10px; transition: transform .3s var(--ease), opacity .2s var(--ease); }
.hdr.nav-open .hdr__burger span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.hdr.nav-open .hdr__burger span:nth-child(2) { opacity: 0; }
.hdr.nav-open .hdr__burger span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
.hdr.nav-open { background: #FFF8EA; }
.hdr.nav-open .hdr__burger span { background: var(--ink); }
/* the solid inner-page header is static (no z-index) — lift it above the fixed drawer */
.hdr--solid { position: relative; z-index: 40; }

/* --- drawer --- */
.mnav {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 39;
  background: #FFF8EA; color: var(--ink);
  padding: 106px var(--gutter) 40px; overflow-y: auto; -webkit-overflow-scrolling: touch;
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-6px);
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s .25s;
}
.mnav.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition: opacity .25s var(--ease), transform .25s var(--ease); }
body.nav-open { overflow: hidden; }
@media (min-width: 1024px) { .mnav { display: none; } }
.mnav__list { list-style: none; border-top: 1px solid var(--hairline); }
.mnav__item { border-bottom: 1px solid var(--hairline); }
.mnav__link, .mnav__toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%; min-height: 60px; padding: 14px 0; text-align: left;
  font-family: var(--font-display); font-weight: 400; font-size: 28px; line-height: 1.1;
  color: var(--ink);
}
.mnav__toggle svg { width: 16px; height: 16px; flex: none; transition: transform .25s var(--ease); }
.mnav__item.is-open .mnav__toggle svg { transform: rotate(45deg); }
.mnav__sub { list-style: none; display: none; padding: 0 0 16px; }
.mnav__item.is-open .mnav__sub { display: block; }
.mnav__sub--grid { display: none; grid-template-columns: 1fr 1fr; column-gap: 16px; }
.mnav__item.is-open .mnav__sub--grid { display: grid; }
.mnav__sub a {
  display: flex; align-items: center; min-height: 44px; padding: 6px 0;
  font-size: 15px; font-weight: 500; letter-spacing: .02em; color: var(--ink);
}
.mnav__cta {
  margin-top: 28px; display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 52px; width: 100%; background: var(--gold); color: var(--jet);
  font-size: 15px; font-weight: 500; letter-spacing: .02em;
}
.mnav__foot { margin-top: 22px; font-size: 12px; color: var(--ink-soft); }

/* --- touch devices: hover-only affordances get a resting state --- */
@media (hover: none) {
  .card__arrow { opacity: .55; }
  .card:hover .card__arrow { opacity: .55; }
}

/* --- ≤1023: rails, filters, tap targets --- */
@media (max-width: 1023px) {
  .railhead__btn { padding: 14px; }
  .social__nav { position: static; justify-content: flex-end; margin-top: 12px; }
  .social__nav button { padding: 12px 14px; }
  .filters { flex-wrap: wrap; gap: 4px 22px; padding: 16px var(--gutter) 10px; }
  .filters__chip { min-height: 44px; white-space: nowrap; }
  .filters__count { width: 100%; margin: 0; padding-bottom: 6px; }
  .foot__field { height: 46px; font-size: 14px; }
  .foot__btn { height: 46px; font-size: 13px; }
  .foot__links a { display: inline-block; padding: 7px 0; }
  .foot__legal a { display: inline-block; padding: 12px 22px 12px 0; margin-right: 0; }
  .news__field, .news__btn { height: 48px; font-size: 15px; }
  .pdp__back { display: inline-block; padding: 12px 0; }
  .loc-controls__count { min-height: 44px; display: inline-flex; align-items: center; }
}

/* --- ≤1023: hero copy sits low over a bottom band; the product stays in the top two-thirds --- */
@media (max-width: 1023px) {
  .hero { height: 100svh; min-height: 560px; max-height: 900px; }
  .hero__inner { justify-content: flex-end; padding: 0 40px 96px; }
  .hero__title { max-width: 560px; }
  .hero__slides::after {
    background: linear-gradient(0deg, rgba(11,11,13,.8) 0%, rgba(11,11,13,.52) 30%, rgba(11,11,13,.16) 56%, rgba(11,11,13,.06) 100%);
  }
  .hero__dots { left: 40px; bottom: 32px; }
}

/* --- ≤767: phones --- */
@media (max-width: 767px) {
  /* 116px, not 92 — the compact cookie notice is ~103px off the bottom on a first visit
     and was clipping the CTA row underneath it */
  .hero__inner { padding: 0 24px 116px; }
  .hero__title { font-size: clamp(36px, 10.2vw, 46px); max-width: none; }
  .hero__actions { margin-top: 26px; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 6px; }
  .hero__dots { left: 24px; bottom: 30px; }

  /* mood rail: taller peek so the labels stay clear, arrows above */
  .mood-tile { width: 66vw; }
  .mood-tile__label { font-size: 34px; left: 16px; bottom: 14px; }
  .railhead { padding: 0 12px; }

  /* image bands: copy anchored where the art is quiet */
  .philosophy { min-height: 0; padding: 72px 0; }
  .philosophy__inner { padding: 0 24px; }
  .philosophy__body { font-size: 24px; }
  .feeling__img { aspect-ratio: 4 / 3; object-position: 8% 30%; }
  .feeling__text { left: 24px; top: 30px; transform: none; font-size: 32px; }
  .banner { margin-top: 64px; }
  .banner__img { aspect-ratio: 4 / 5; object-position: 50% 62%; }
  .banner::after {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, rgba(11,11,13,.62) 0%, rgba(11,11,13,.28) 34%, rgba(11,11,13,0) 58%);
  }
  .banner__text { left: 24px; right: 24px; top: 28px; }
  .banner__title { font-size: 34px; }
  .banner .btn-line { margin-top: 18px; }
  /* display:flex again — the ≤1023 block switches .merch to block, which would park the copy
     at the top over the tote print; here it sits low on the band, tote uncovered above */
  .merch { display: flex; align-items: flex-end; min-height: 0; margin-top: 64px; padding: 0; aspect-ratio: 4 / 5; }
  .merch__img { object-position: 50% 30%; }
  .merch::after { background: linear-gradient(0deg, rgba(12,10,8,.82) 0%, rgba(12,10,8,.5) 36%, rgba(12,10,8,.1) 66%, rgba(12,10,8,0) 100%); }
  .merch__inner { padding: 0 24px 32px; }
  .merch__title { font-size: 38px; }
  .merch__sub { margin-top: 14px; }
  .merch .btn-solid { margin-top: 22px; }
  .split { margin-top: 64px; }
  .split__media img { aspect-ratio: 4 / 3; }

  /* product cards: two-up, like every mobile PLP */
  .prow { gap: 28px 12px; margin-top: 40px; }
  .prow .card { width: calc(50% - 6px); }
  .cgrid { grid-template-columns: repeat(2, 1fr); gap: 28px 12px; padding-bottom: 64px; }
  .cgrid .card { width: auto; }
  .card__media > img.contain { padding: 12px; }
  .card__lockup { bottom: 26px; }
  .card__lockup img { width: 88%; }
  .card__dots { left: 12px; bottom: 10px; }
  .card__tag { top: 10px; left: 10px; }
  .card__arrow { width: 32px; height: 32px; }
  .card__name { margin-top: 12px; }
  .card__cta { height: 44px; padding: 0 12px; }

  /* social rail */
  .social { margin-top: 72px; }
  .ugc { width: 72vw; }
  .ugc__link { padding: 8px 0; }

  /* newsletter: the column form collapsed the field to its text line — give it a real box,
     and keep the desktop "joined" look vertically: field on top, button sharing its bottom
     hairline (the desktop rule drops the button's left border for the row layout) */
  .news__form { flex-direction: column; gap: 0; }
  .news__field { flex: none; width: 100%; height: 52px; border-right: 1px solid var(--hairline); border-bottom: 0; }
  .news__form .news__btn { height: 52px; width: 100%; border-left: 1px solid var(--hairline); }

  /* footer */
  .foot { padding-top: 44px; }
  .foot__grid { row-gap: 32px; }
  .foot__field, .foot__btn { max-width: none; }

  /* PDP: swipe gallery with a peek, info below */
  .pdp { padding-top: 16px; }
  .pdp__gallery {
    /* .pdp is a column flex with align-items:flex-start — an auto width would shrink-wrap
       and collapse the percentage shots, so size it explicitly (bleeds to the page edges) */
    width: calc(100% + 2 * var(--gutter)); align-self: flex-start;
    flex-direction: row; gap: 10px;
    margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter);
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .pdp__gallery::-webkit-scrollbar { display: none; }
  .pdp__shot { flex: 0 0 86%; scroll-snap-align: start; aspect-ratio: 1 / 1; }
  .pdp__shot img { padding: 22px; }
  .pdp__info { padding-top: 22px; }

  /* cookie notice: compact on phones — the hero CTAs sit low now, so a 160px-tall bar
     buried them on a first visit. Text and button share one row, tighter type. */
  .cookies { left: 12px; right: 12px; bottom: 12px; gap: 12px; padding: 12px 14px; flex-wrap: nowrap; align-items: center; }
  .cookies p { font-size: 11.5px; line-height: 1.45; min-width: 0; }
  .cookies__btn { flex: none; height: 40px; padding: 0 16px; font-size: 13px; }

  /* locator controls: search full width, the two selects side by side, count on its own line */
  .loc-controls { gap: 10px; }
  .loc-controls input[type="search"] { flex: 1 1 100%; min-width: 0; }
  .loc-controls select { flex: 1 1 calc(50% - 5px); min-width: 0; }
  .loc-controls__count { flex: 1 1 100%; margin: 0; min-height: 0; padding-top: 4px; }

  /* mood page */
  .mood-hero { min-height: 70svh; }
  .mood-hero__inner { padding: 0 24px 32px; }
  .mood-profile { padding-top: 48px; }

  /* collection head */
  .page-head { padding-top: 40px; }
}

/* ============================================================
   UI TYPE — nav, every button/CTA and every form control resolve
   to the body sans (Source Sans 3). Kept as an explicit list so a
   control can't drift onto another face if the tokens change; the
   drawer's display-serif rows stay serif (they read as headings).
   ============================================================ */
.hdr__nav a,
.hdr__navbtn,
.hdr__cta,
.btn-quiz,
.btn-text,
.btn-line,
.btn-solid,
.card__cta,
.filters__chip,
.formatchip,
.news__btn,
.foot__btn,
.cookies__btn,
.gate__btn,
.quizpop__btn,
.quizpop__close,
.quiz-answer__label,
.quiz-retake,
.quiz-result__chip,
.mnav__cta,
.mnav__sub a,
.contact-form__submit,
.pdp__back,
button,
/* form controls too — these carry `font: inherit` in their component rules, which is why
   they need the family pinned alongside the buttons they sit next to */
input, select, textarea { font-family: var(--font-ui); }

/* the display-serif rows in the mobile drawer stay serif — they are headings, not buttons */
.mnav__link, .mnav__toggle { font-family: var(--font-display); }

/* The type scale is 400/500/600 — those are the only Source Sans 3 weights loaded. A bare
   <strong> (UA default 700) made the browser synthesise a fake bold in the legal docs, so
   pin emphasis to the real 600 cut. */
strong, b { font-weight: 600; }