/* ============================================================
   DANN'S DEN — shared stylesheet
   SOURCE OF TRUTH: .agents/skills/dannsden-style/SKILL.md
   Editorial streetwear gallery on bone-white — Vellum Cream
   color blocks, Golden Orange wordmark accent, flat ink-on-paper.
   All colors, type, spacing, radii and component specs come from
   the skill. Derived values are marked [DERIVED] with the reason.
   ============================================================ */

:root {
  /* ---- Colors (skill: Tokens — Colors) ---- */
  --color-obsidian: #000000;
  --color-bone-white: #ffffff;
  --color-vellum-cream: #f7f5e8;
  --color-charcoal: #231f20;   /* body copy on white/cream */
  --color-pewter: #888888;
  --color-golden-orange: #ea9804; /* accent from dannsden-style skill (was reference-brand rust) */

  /* ---- Surfaces (skill: Surfaces) ---- */
  --surface-bone-canvas: #ffffff;
  --surface-vellum-panel: #f7f5e8;
  --surface-obsidian-field: #000000;
  --surface-hero-panel: #ea9804; /* Golden Orange hero block per dannsden-style skill */

  /* ---- Typography (skill: Tokens — Typography) ---- */
  --font-site: 'PP Neue Montreal', 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* Hero accent line per updated skill: PP Neue Montreal Italic (Inter 700 italic substitute).
     The one italic, sentence-case element in the system — all other text stays upright uppercase. */
  --font-accent-italic: 'PP Neue Montreal Italic', 'PP Neue Montreal', 'Inter', 'Space Grotesk', sans-serif;
  /* Skill-sanctioned substitute loaded on the pages: Inter 500/700 */

  --text-caption: 10px;
  --leading-caption: 1.5;
  --tracking-caption: 1px;
  --text-body: 14px;
  --leading-body: 1.5;
  --tracking-body: 0.4px;
  --text-subheading: 18px;
  --leading-subheading: 1.3;
  --tracking-subheading: 0.5px;
  --text-heading-sm: 21px;
  --leading-heading-sm: 1.2;
  --tracking-heading-sm: 0.34px;
  --text-heading: 24px;
  --leading-heading: 1.2;
  --tracking-heading: 0.38px;
  --text-heading-lg: 33px;
  --leading-heading-lg: 1.15;
  --tracking-heading-lg: 0.53px;
  --text-display: 45px;
  --leading-display: 1.15;
  --tracking-display: 0.72px;

  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /* ---- Spacing (skill: Tokens — Spacing & Shapes) ---- */
  --spacing-4: 4px;
  --spacing-5: 5px;
  --spacing-10: 10px;
  --spacing-15: 15px;
  --spacing-18: 18px;
  --spacing-20: 20px;
  --spacing-23: 23px;
  --spacing-25: 25px;
  --spacing-30: 30px;
  --spacing-35: 35px;
  --spacing-40: 40px;
  --spacing-50: 50px;
  --spacing-70: 70px;

  /* ---- Layout (skill: Layout) ---- */
  --page-max-width: 1400px;
  --section-gap: 35px;   /* skill: 30-35px range */
  --card-padding: 20px;
  --element-gap: 4px;

  /* ---- Border radius (skill: Border Radius) ---- */
  --radius-tags: 50px;
  --radius-cards: 50px;
  --radius-buttons: 50px;
  --radius-navlinks: 40px;
  --radius-productimages: 15px;
}

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: hidden; /* the marquee's animated track must never create horizontal scroll (audit: 7px overflow at 320px) */
  background: var(--surface-bone-canvas);
  color: var(--color-charcoal);
  font-family: var(--font-site);
  font-weight: var(--font-weight-medium);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--color-obsidian); outline-offset: 2px; }
[hidden] { display: none !important; }
h1, h2, h3, p { margin: 0; }

/* ---------- SHELL ---------- */
.shell {
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding-left: var(--spacing-40);
  padding-right: var(--spacing-40);
}
.section { margin-top: var(--section-gap); }
.section--last { margin-bottom: var(--section-gap); }

.section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-20);
  margin-bottom: var(--spacing-20);
}
.section__title {
  font-size: var(--text-heading);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  text-transform: uppercase;
}
.section__meta {
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--color-pewter);
  text-align: right;
}

/* ---------- TYPE UTILITIES ---------- */
.t-caption {
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
}

/* ---------- ANNOUNCEMENT MARQUEE BAR (skill: Announcement Marquee Bar) ---------- */
.marquee {
  background: var(--surface-obsidian-field); /* full-bleed black */
  color: var(--color-bone-white);
  overflow: hidden;
  white-space: nowrap; /* never wrap or clip mid-message on small screens */
  padding-top: var(--spacing-4);  /* slim bar per template; skill: 2px [DERIVED to 4px] */
  padding-bottom: var(--spacing-4);
}
.marquee__track {
  display: inline-flex;
  animation: v-marquee 20s linear infinite; /* continuous right-to-left loop [DERIVED: duration] */
}
.marquee__span {
  font-size: 11px; /* template: 11px fine print */
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
/* Always-on infinite marquee: doubled identical spans + translateX(-50%) loop.
   Classic right-to-left travel (text moves leftward, new copies enter from the right).
   Pauses while hovered so the message can be read; reduced-motion only disables smooth scrolling. */
.marquee__item { padding: 0 16px; }
@keyframes v-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee:hover .marquee__track { animation-play-state: paused; }
@media (min-width: 821px) {
  .marquee__item { padding: 0 32px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---------- MAIN NAVIGATION HEADER (skill: Main Navigation Header) ---------- */
.nav {
  background: var(--color-bone-white);
  border-bottom: 1px solid var(--color-obsidian); /* 1px Obsidian hairline */
}
.nav__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding-top: var(--spacing-10);
  padding-bottom: var(--spacing-10);
}
.nav__wordmark {
  justify-self: start;
  font-size: 19px; /* template: large wordmark [DERIVED from skill's 14px logo spec] */
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-obsidian);
}
.nav__links {
  display: flex;
  column-gap: var(--spacing-40); /* template: wide spacing between large links */
  row-gap: var(--spacing-10);
  flex-wrap: wrap;
  justify-content: center;
}
.nav__link {
  font-size: 19px; /* template: ~19px nav links [DERIVED from skill's 14px spec] */
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-obsidian);
}
.nav__link:hover { text-decoration: underline; text-underline-offset: 4px; }
.nav__cart {
  justify-self: end;
  position: relative;
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  background: none;
  border: 0;
  border-left: 1px solid var(--color-obsidian); /* hairline divider before the boxed cart, per template */
  padding: 0 0 0 var(--spacing-20);
  cursor: pointer;
}
.nav__cart-box {
  width: 36px;
  height: 36px;
  border: 1px solid var(--color-obsidian); /* boxed cart icon per template */
  display: grid;
  place-items: center;
}
.cart__count {
  position: absolute;
  top: -4px;
  right: -8px;
  min-width: 18px;
  height: 18px;
  padding: 0 var(--spacing-4);
  border-radius: var(--radius-tags);
  background: var(--color-obsidian);
  color: var(--color-bone-white);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0;
  display: grid;
  place-items: center;
}

/* ---------- SPLIT EDITORIAL HERO (skill: Split Editorial Hero) ---------- */
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 50/50 split, full-bleed; hard edge */
  min-height: 680px;
}
.hero__media { position: relative; }
.hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Hero cover videos (left: logo motion, right: commercial reel) */
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__panel {
  position: relative;
  overflow: hidden; /* clip the cover video to the panel half */
  display: grid;
  place-content: center;
}
/* Dark pool behind the wordmark only — reel stays visible toward the edges */
.hero__scrim {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 64% 58% at 50% 47%, rgba(17, 17, 17, 0.55), rgba(17, 17, 17, 0) 72%);
  pointer-events: none;
}
.hero__panel-content {
  position: relative;
  z-index: 2; /* wordmark stack above video + scrim */
  display: grid;
  justify-items: center;
  text-align: center;
  gap: var(--spacing-15);
  padding: var(--spacing-50) var(--spacing-40);
}
.hero__brand {
  font-size: 20px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-bone-white); /* legible over the reel + dark scrim */
}
.hero__title {
  font-family: var(--font-accent-italic); /* skill: single italic accent line ("The Den") */
  font-style: italic; /* Inter fallback needs the explicit style; ignored by true italic faces */
  font-size: clamp(84px, 9vw, 128px);
  font-weight: var(--font-weight-bold); /* italic matches the slot's 700 weight per skill */
  line-height: 0.9;
  letter-spacing: 0;
  text-transform: none; /* sentence case — the one element exempt from the uppercase rule */
  color: var(--color-bone-white);
}
.hero__sub {
  font-size: 14px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-bone-white);
}
/* VOIR pills: bottom-left of the photo AND bottom-left of the panel, per template */
.hero__pill {
  position: absolute;
  left: var(--spacing-40);
  bottom: var(--spacing-40);
  background: transparent;
  border-color: var(--color-bone-white);
  color: var(--color-bone-white);
}
.hero__pill:hover { background: var(--color-bone-white); color: var(--color-obsidian); }
.hero__pill--panel { position: static; align-self: start; justify-self: start; margin-top: var(--spacing-20); }
.hero__look {
  position: absolute;
  right: var(--spacing-40);
  bottom: var(--spacing-40);
  display: grid;
  gap: var(--element-gap);
  justify-items: end;
  text-align: right;
  color: var(--color-bone-white);
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.hero__look-sub { text-transform: none; font-size: 11px; color: var(--color-bone-white); }
/* Stack the hero on narrow screens [DERIVED] */
@media (max-width: 820px) {
  .hero { grid-template-columns: 1fr; }
  .hero__media { min-height: 420px; }
  .hero__look { display: none; }
}
/* Text-first hero on the smallest phones: the wordmark stack and the
   SHOP NOW pill render before the media card so the primary CTA is
   visible without scrolling at 375x667 (audit item 3). Colorways keep
   the desktop order above 760px. */
@media (max-width: 760px) {
  .hero__panel { order: -1; }
}
/* Smallest-phone trim: fewer gutter pixels than the 40px shell/footer
   padding so 320px keeps full-width content (audit item 2), and lets
   the one-column footer grid shrink below its min-content. */
@media (max-width: 479px) {
  .shell { padding-left: 20px; padding-right: 20px; }
  .hero__panel-content { padding: var(--spacing-40) 20px; }
  .footer-split__grid { gap: var(--spacing-30); }
  .footer-split__grid > * { min-width: 0; }
  .footer-split__title { font-size: clamp(30px, 9vw, 42px); }
}

/* ---------- VOIR PILL BUTTON (skill: VOIR Pill Button) ---------- */
.btn {
  display: inline-block;
  border-radius: var(--radius-buttons); /* 50px */
  padding: 13px 28px;
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  border: 1px solid var(--color-obsidian);
  transition: background 0.15s ease, color 0.15s ease;
}
.btn--ghost { background: transparent; color: var(--color-obsidian); }
.btn--ghost:hover { background: var(--color-obsidian); color: var(--color-bone-white); } /* skill: hover fills black, text white */
.btn--filled {
  background: var(--color-obsidian);
  border-color: var(--color-obsidian);
  color: var(--color-bone-white);
}
.btn--filled:hover { background: var(--color-charcoal); border-color: var(--color-charcoal); } /* [DERIVED: pressed state toward Charcoal] */
.btn--block { display: block; width: 100%; }

/* ---------- PRODUCT GRID (skill: 4-column, 30px gap, dense and uniform) ---------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-30);
}
/* Responsive breakpoints [DERIVED: 2-col ≤1024px, 1-col ≤560px — the skill is desktop-spec] */
@media (max-width: 1024px) { .product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .product-grid { grid-template-columns: 1fr; }
  .section__head { flex-direction: column; align-items: flex-start; gap: var(--spacing-5); }
}

/* ---------- PRODUCT GRID CARD (skill: Product Grid Card) ---------- */
.card {
  background: var(--color-bone-white); /* white ground, NO border, NO shadow */
  padding: var(--card-padding); /* 20px internal padding */
  display: flex;
  flex-direction: column;
}
.card__media {
  position: relative;
  display: block;
  text-decoration: none;
}
.card__img {
  width: 100%;
  aspect-ratio: 4 / 5; /* skill: square or 4:5 */
  object-fit: cover;
  border-radius: var(--radius-productimages); /* 15px */
}
.card__name {
  margin-top: var(--spacing-20);
  font-size: 12px; /* skill: 12px weight 500 uppercase 0.047em, centered */
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.047em;
  text-transform: uppercase;
  text-align: center;
  color: var(--color-obsidian);
}
a.card__name-link { text-decoration: none; }
a.card__name-link:hover .card__name { text-decoration: underline; text-underline-offset: 3px; } /* [DERIVED: hover affordance] */
.card__body { display: grid; gap: var(--element-gap); justify-items: center; }

/* ---------- SIZE SELECTOR (skill: Size Selector — inline on the card) ---------- */
.card__sizes {
  margin-top: var(--spacing-10);
  display: flex;
  gap: var(--spacing-5); /* skill: 4-5px gaps between codes */
  justify-content: center;
}
.size-chip {
  font-size: 10px; /* skill: 10px weight 500 uppercase 0.039em */
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.039em;
  text-transform: uppercase;
  color: var(--color-pewter); /* default: Pewter */
  cursor: pointer;
}
.size-chip:hover { color: var(--color-obsidian); }
.size-chip.is-active {
  color: var(--color-obsidian); /* active: Obsidian with underline */
  text-decoration: underline;
  text-underline-offset: 3px;
}
.size-chip .sep { padding: 0 6px 0 0; } /* separator spacing */

/* ---------- ÉPUISÉ SOLD-OUT BADGE (skill: ÉPUISÉ Sold-Out Badge) ---------- */
.card__tag {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* centered over the product image */
  display: inline-block;
  border-radius: var(--radius-tags); /* 50px pill */
  padding: 10px 20px; /* skill: 10px vertical / 20px horizontal */
  font-size: 12px; /* 12px weight 500 uppercase 0.047em */
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.047em;
  text-transform: uppercase;
  background: var(--color-bone-white);
  color: var(--color-obsidian);
  pointer-events: none;
}

/* ---------- PRICE ---------- */
.price {
  font-size: 12px; /* skill: price 12px weight 500 below sizes, centered */
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.047em;
  text-transform: uppercase;
  color: var(--color-obsidian);
}
.price s { color: var(--color-pewter); margin-right: var(--spacing-5); } /* [DERIVED: was-price strike — muted so the live price leads] */

/* ---------- EDITORIAL GALLERY GRID (skill: full-bleed 2-col, tiles butt together,
   no gaps/radius/shadows, caption + circular VIEW overlay, videos as a minority) ---------- */
.egrid {
  margin-top: var(--section-gap);
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.egrid__tile { position: relative; margin: 0; }
.egrid__tile img,
.egrid__tile video {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5; /* portrait-leaning, consistent across photo + video tiles */
  object-fit: cover;
}
/* subtle bottom gradient for caption legibility only — never a full-tile overlay */
.egrid__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 70px 24px 22px;
  background: linear-gradient(to top, rgba(17, 17, 17, 0.62), rgba(17, 17, 17, 0));
  color: var(--color-bone-white);
  display: grid;
  justify-items: start;
  gap: var(--element-gap);
}
.egrid__name {
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.047em;
  text-transform: uppercase;
}
.egrid__status {
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.75;
}
.egrid__view {
  margin-top: var(--spacing-10);
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid var(--color-bone-white);
  border-radius: var(--radius-buttons); /* 50px pill, outlined ghost per skill */
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.047em;
  text-transform: uppercase;
  color: var(--color-bone-white);
  text-decoration: none;
}
.egrid__view:hover { background: var(--color-bone-white); color: var(--color-obsidian); }
@media (max-width: 820px) {
  .egrid { grid-template-columns: 1fr; }
}

/* ---------- NEWSLETTER FOOTER SPLIT (skill: brand links left, email capture right) ---------- */
.footer-split {
  margin-top: var(--section-gap);
  background: var(--color-bone-white);
  padding: var(--spacing-50) 0 var(--spacing-30);
}
.footer-split__grid {
  display: grid;
  grid-template-columns: 2fr 3fr; /* left column narrower per skill */
  gap: var(--spacing-50);
  align-items: start;
}
.footer-split__mark {
  font-size: var(--text-body); /* 14px weight 700 uppercase 0.064em, matches nav wordmark */
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.064em;
  text-transform: uppercase;
  color: var(--color-obsidian);
}
/* Accepted payment marks (footer + cart drawer). One SVG sprite
   (assets/icons/payment-marks.svg) referenced via <use>; filled with
   currentColor so each context picks its own ink: obsidian in the
   footer, bone on the dark summary card. Marks are the official
   wordmark geometry (Simple Icons, CC0) tinted grayscale. */
.dd-pay {
  display: flex;
  align-items: center;
  gap: var(--spacing-14, 14px);
}
.dd-pay__mark {
  width: auto;
  flex: none;
  display: block;
  color: inherit;
}
.dd-pay__mark use {
  fill: currentColor;
}
/* The three glyphs sit at different fractions of the 24px viewBox
   (VISA is a low wide wordmark, the circles core is mid-box), so each
   gets its own CSS height to land on ~equal visual weight. */
/* nth-of-type (not nth-child): the drawer row starts with a <span>,
   which would shift nth-child indexing off the marks. */
.dd-pay__mark:nth-of-type(1) { height: 26px; }
.dd-pay__mark:nth-of-type(2) { height: 18px; }
.dd-pay__mark:nth-of-type(3) { height: 17px; }
.footer-split__pay {
  margin-top: 40px;
  color: var(--color-obsidian);
  opacity: 0.9;
}
/* Cart drawer: row under the checkout button, replaces the old
   text-only payment line at the same visual weight. */
.cart-summary__payments {
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-align: center;
  color: rgba(255, 255, 255, 0.55);
}
/* Slightly tighter in the compact summary card, same proportions. */
.cart-summary__payments .dd-pay__mark:nth-of-type(1) { height: 22px; }
.cart-summary__payments .dd-pay__mark:nth-of-type(2) { height: 15px; }
.cart-summary__payments .dd-pay__mark:nth-of-type(3) { height: 14px; }

.footer-split__links {  margin-top: 60px; /* generous vertical gap below the brand mark per skill */
  display: grid;
  gap: var(--spacing-18);
  justify-items: start;
}
.footer-split__service {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-10);
  padding: 10px 20px;
  border: 1px solid var(--color-obsidian); /* hairline */
  border-radius: var(--radius-buttons); /* 50px pill */
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-obsidian);
  text-decoration: none;
}
.footer-split__service:hover { background: var(--color-obsidian); color: var(--color-bone-white); }
/* COOKIE SETTINGS is an action (reopens the banner), not a destination —
   rendered as a real <button>; reset the UA styles so the shared class's
   link typography applies untouched. */
button.footer-split__link {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.footer-split__link {
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-obsidian);
  text-decoration: none;
}
.footer-split__link:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer-split__club {
  font-size: var(--text-body); /* 14px weight 700 uppercase, Golden Orange */
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-golden-orange);
}
.footer-split__title {
  margin-top: var(--element-gap);
  font-size: clamp(30px, 4vw, 45px); /* heading-lg/display slot per skill */
  font-weight: var(--font-weight-bold);
  line-height: 1.15;
  letter-spacing: 0.016em;
  text-transform: uppercase;
  color: var(--color-obsidian);
  max-width: 14em;
}
.footer-split__form {
  margin-top: var(--spacing-35); /* 30-40px gap below the heading per skill */
  display: flex;
  align-items: baseline;
  gap: var(--spacing-20);
  flex-wrap: nowrap; /* input + SUBSCRIBE stay on one line at every width */
}
/* Honeypot [security]: off-screen and 1px, never focusable, invisible to
   people and screen readers — present only for bots that fill every input.
   Shared by the footer form and the newsletter popup. */
.footer-split__hp,
.nlpop__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}
.footer-split__input {
  flex: 1 1 auto;
  min-width: 0; /* allow the underline input to shrink so the button never wraps */
  max-width: 420px;
  border: 0;
  border-bottom: 1px solid var(--color-obsidian); /* underline-only input */
  background: transparent;
  padding: var(--spacing-10) 2px;
  font-family: inherit;
  font-size: var(--text-body);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-body);
  text-transform: uppercase;
  color: var(--color-obsidian);
  outline: none;
}
.footer-split__input::placeholder { color: var(--color-pewter); }
.footer-split__submit {
  flex-shrink: 0;
  background: none;
  border: 0;
  padding: 0;
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.047em;
  text-transform: uppercase;
  color: var(--color-obsidian);
  cursor: pointer;
}
.footer-split__submit:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer-split__copyright {
  margin: var(--spacing-40) var(--spacing-40) 0;
  text-align: right; /* bottom-right corner per skill */
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.033em;
  color: var(--color-pewter);
}
@media (max-width: 820px) {
  .footer-split__grid { grid-template-columns: 1fr; }
  .footer-split__links { margin-top: var(--spacing-30); }
}

/* ---------- NEWSLETTER MODAL (skill: Newsletter Modal; anchored bottom-right card per template) ---------- */
.modal {
  position: fixed;
  right: 24px;
  bottom: 64px; /* clears the fixed cookie bar */
  z-index: 60;
  width: min(360px, calc(100vw - 32px));
  background: var(--color-bone-white); /* white card, no border, no shadow, no scrim */
  padding: var(--spacing-18) var(--spacing-20) var(--spacing-15);
}
.modal[hidden] { display: none; }
.modal__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-10);
}
.modal__header {
  font-size: 13px; /* 'JOIN THE DEN' — Golden Orange, bold */
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-golden-orange);
}
.modal__close {
  background: none;
  border: 0;
  padding: 0 var(--spacing-4);
  font-size: 18px;
  font-weight: var(--font-weight-medium);
  line-height: 1;
  cursor: pointer;
}
.modal__offer {
  margin-top: var(--spacing-10);
  font-size: 15px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-obsidian);
}
.modal__blurb {
  margin-top: var(--spacing-10);
  font-size: 10px;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-pewter);
}
.modal__form {
  margin-top: var(--spacing-15);
  display: flex;
  align-items: flex-end;
  gap: var(--spacing-15);
}
.modal__input {
  flex: 1;
  min-width: 0;
  border: 0;
  border-bottom: 1px solid var(--color-obsidian); /* 1px black bottom border only, no fill */
  background: transparent;
  padding: var(--spacing-5) 0;
  font-family: inherit;
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-obsidian);
  outline: none;
}
.modal__input::placeholder { color: var(--color-pewter); }
.modal__submit {
  background: none;
  border: 0;
  padding: 0;
  font-size: 11px; /* 'VALIDER' — small bold text action per template */
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-obsidian);
  cursor: pointer;
}
.modal__submit:hover { text-decoration: underline; text-underline-offset: 3px; }
.modal__legal {
  margin-top: var(--spacing-10);
  font-size: 9px;
  line-height: 1.4;
  color: var(--color-pewter);
}
.modal__legal a { color: inherit; }

/* ---------- COOKIE CONSENT BANNER [DERIVED: the skill defines only the
   text-only strip — upgraded to a real consent banner reusing the same
   spec (full-width black bar, 11px/500 fine print). The two decision
   pills reuse the filled/ghost VOIR variants at identical size so
   accept and reject carry EQUAL visual weight (never a de-emphasized
   reject); the policy link is caption type, underline on hover.] ---------- */
.cookie {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  /* Above the newsletter popup (.nlpop, z 60): consent must stay
     clickable while the popup is open — a real visitor should never
     have to dismiss one layer to reach the other. */
  z-index: 70;
  background: var(--surface-obsidian-field); /* full-width black bar */
  color: var(--color-bone-white);
  font-size: 11px; /* 11px weight 500 fine print, per template */
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.02em;
  padding: var(--spacing-15) var(--spacing-20);
}
.cookie__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-20);
}
.cookie__text {
  margin: 0;
  max-width: 72ch;
  text-transform: uppercase;
}
/* Desktop shows the full consent copy; the µmobile short variant is hidden. */
.cookie__text--short { display: none; }
.cookie__policy {
  color: inherit;
}
.cookie__policy:hover { text-decoration: underline; text-underline-offset: 3px; }
.cookie__actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-10);
  flex: none;
}
.cookie__btn {
  appearance: none;
  border-radius: 50px; /* pill per skill */
  padding: 9px 22px;
  border: 1px solid var(--color-bone-white);
  font-family: inherit;
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
}
.cookie__btn--accept { background: var(--color-bone-white); color: var(--color-obsidian); }
.cookie__btn--reject { background: transparent; color: var(--color-bone-white); }
/* Hover swaps the two treatments — identical surface area either way. */
.cookie__btn--accept:hover { background: transparent; color: var(--color-bone-white); }
.cookie__btn--reject:hover { background: var(--color-bone-white); color: var(--color-obsidian); }
/* Preferences entry point: same pill as the two decisions, hairline ghost
   so it never competes with Accept / Reject. Reopened at any time from the
   footer "Cookie settings" control. */
.cookie__btn--prefs {
  background: transparent;
  color: var(--color-bone-white);
  border-color: rgba(255, 255, 255, 0.45);
}
.cookie__btn--prefs:hover { border-color: var(--color-bone-white); }
.cookie__btn:focus-visible {
  outline: 2px solid var(--color-bone-white);
  outline-offset: 2px;
}

/* ---------- COOKIE PREFERENCES PANEL [DERIVED: modal on the site's own
   primitives — obsidian scrim, bone card, 1px hairlines, pill actions.
   Strictly-necessary row is fixed ON (no control), analytics row is a
   real switch (role=switch, aria-checked) that starts OFF. Built by
   js/consent.js on first open, so it exists on every storefront page
   without editing each HTML file. ---------- */
.ck-prefs {
  position: fixed;
  inset: 0;
  z-index: 80; /* above the banner (70) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-20);
}
.ck-prefs[hidden] { display: none; }
html.ck-prefs-open { overflow: hidden; }
.ck-prefs__scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);
}
.ck-prefs__card {
  position: relative;
  width: 100%;
  max-width: 470px;
  max-height: calc(100vh - 2 * var(--spacing-20));
  overflow-y: auto;
  background: var(--color-bone-white);
  color: var(--color-obsidian);
  padding: 34px 28px 28px;
}
.ck-prefs__title {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ck-prefs__intro {
  margin: 0 0 8px;
  font-size: 10px;
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: var(--color-pewter);
}
.ck-prefs__link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ck-prefs__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-20);
  padding: var(--spacing-18) 0;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}
.ck-prefs__copy { flex: 1 1 auto; }
.ck-prefs__name {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.ck-prefs__desc {
  margin: 0;
  font-size: 10px;
  line-height: 1.6;
  letter-spacing: 0.03em;
  color: var(--color-pewter);
}
.ck-prefs__always {
  flex: none;
  align-self: center;
  font-size: 9px;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-pewter);
  white-space: nowrap;
}
.ck-prefs__switch {
  position: relative;
  flex: none;
  width: 46px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--color-obsidian);
  border-radius: 50px;
  background: transparent;
  cursor: pointer;
  transition: background 0.18s ease;
}
.ck-prefs__switch[aria-checked="true"] { background: var(--color-obsidian); }
.ck-prefs__knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-obsidian);
  transition: transform 0.18s ease, background 0.18s ease;
}
.ck-prefs__switch[aria-checked="true"] .ck-prefs__knob {
  transform: translateX(20px);
  background: var(--color-bone-white);
}
.ck-prefs__switch:focus-visible {
  outline: 2px solid var(--color-obsidian);
  outline-offset: 2px;
}
.ck-prefs__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-10);
  margin-top: 24px;
}
.ck-prefs__save,
.ck-prefs__reject {
  appearance: none;
  border-radius: 50px;
  padding: 11px 22px;
  font-family: inherit;
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid var(--color-obsidian);
}
.ck-prefs__save {
  flex: 1 1 auto;
  background: var(--color-obsidian);
  color: var(--color-bone-white);
}
.ck-prefs__save:hover { background: transparent; color: var(--color-obsidian); }
.ck-prefs__reject {
  flex: 0 0 auto;
  background: transparent;
  color: var(--color-obsidian);
}
.ck-prefs__reject:hover { background: var(--color-obsidian); color: var(--color-bone-white); }
.ck-prefs__save:focus-visible,
.ck-prefs__reject:focus-visible {
  outline: 2px solid var(--color-obsidian);
  outline-offset: 2px;
}
.ck-prefs__close {
  position: absolute;
  top: 8px;
  right: 10px;
  padding: 6px 8px;
  border: 0;
  background: none;
  color: inherit;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.ck-prefs__close:focus-visible {
  outline: 2px solid var(--color-obsidian);
  outline-offset: 2px;
}
@media (max-width: 760px) {
  /* COMPACT FIRST-VISIT STRIP: a single ≤~50px row so it can never cover
     the hero SHOP NOW pill on a 360×640 phone (pill bottom ≈ 587px; the
     old stacked strip was ~169px tall and swallowed it). One line of
     private-policy-first fine print + two equal-weight compact pills.
     The full copy stays in the DOM/screen-reader stream; visually it
     ellipsizes into the row. The sticky-CTA still steps aside below. */
  .cookie { padding: 8px 10px; }
  .cookie__inner { flex-direction: row; align-items: center; gap: 8px; }
  .cookie__text--long { display: none; }
  .cookie__text {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px;
    letter-spacing: 0.04em;
  }
  .cookie__text--short { display: inline; }
  .cookie__actions { gap: 6px; flex: none; }
  .cookie__btn {
    flex: none;
    padding: 5px 10px;
    font-size: 10px;
    letter-spacing: 0.02em;
  }
}

/* ---------- SHOP HEAD + FILTERS [DERIVED: the skill defines no shop/filter
   components. Type and shapes reuse skill primitives only: title = 24px/700
   heading token; filter pills = VOIR ghost variant (1px Obsidian border, 50px
   radius, 14px/500 uppercase 0.058em); active filter = filled VOIR variant
   (Obsidian fill, Bone White text); status line = caption token in Pewter] ---------- */
.shop-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-20);
}
.shop-head__title {
  font-size: var(--text-heading);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  text-transform: uppercase;
}
.filters {
  margin-top: var(--spacing-20);
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-10);
}
.filter.is-active {
  background: var(--color-obsidian);
  color: var(--color-bone-white);
}
.shop-status {
  margin-top: var(--spacing-20);
  margin-bottom: var(--spacing-15);
}

/* ---------- BREADCRUMBS [DERIVED: no breadcrumb component in the skill —
   caption token type, Pewter, Obsidian hairline underneath] ---------- */
.breadcrumbs {
  display: flex;
  align-items: center;
  gap: var(--spacing-5);
  padding-top: var(--spacing-20);
  padding-bottom: var(--spacing-20);
  border-bottom: 1px solid var(--color-obsidian);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--color-pewter);
}
.breadcrumbs a { color: var(--color-pewter); text-decoration: none; }
.breadcrumbs a:hover { color: var(--color-obsidian); text-decoration: underline; text-underline-offset: 3px; }
.breadcrumbs [id='crumb-name'] { color: var(--color-obsidian); }

/* ---------- PDP [DERIVED layout: composed from skill pieces — media reuses the
   15px product-image radius and ÉPUISÉ badge spec; size picker reuses the
   inline Size Selector; CTA is the filled VOIR pill; description/body copy in
   Charcoal per skill role; meta rows separated by 1px Obsidian hairlines;
   grid gap is the 30px section-gap scale point] ---------- */
.pdp {
  margin-top: var(--section-gap);
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--spacing-30);
  align-items: start;
}
.pdp__media {
  position: relative;
  display: block;
}
.pdp__media .card__img {
  aspect-ratio: 4 / 5;
  width: 100%;
  object-fit: cover;
  border-radius: var(--radius-productimages); /* 15px, per skill */
}
.pdp__thumbs {
  margin-top: var(--spacing-15);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-15);
}
.pdp__thumb {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: var(--radius-productimages);
}
.pdp__thumb img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-productimages);
}
.pdp__thumb.is-active img {
  outline: 1px solid var(--color-obsidian);
  outline-offset: 2px;
}
.pdp__name {
  font-size: var(--text-heading);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  text-transform: uppercase;
  color: var(--color-obsidian);
}
.pdp__price {
  margin-top: var(--spacing-10);
  font-size: var(--text-subheading); /* 18px price ladder step above the card's 12px */
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.047em;
  text-transform: uppercase;
  color: var(--color-obsidian);
}
.pdp__desc {
  margin-top: var(--spacing-20);
  max-width: 46ch;
  color: var(--color-charcoal); /* body copy on white per skill color role */
}
.pdp__label {
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--color-pewter);
  margin-bottom: var(--spacing-10);
}
.pdp .card__sizes { justify-content: flex-start; } /* card spec centers sizes; PDP aligns them into the info column */
.card__sizes--pdp { margin-top: 0; }
.pdp__meta {
  margin: var(--spacing-30) 0 0;
  border-top: 1px solid var(--color-obsidian); /* 1px Obsidian hairline */
}
.pdp__meta > div {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: var(--spacing-20);
  padding: var(--spacing-15) 0;
  border-bottom: 1px solid var(--color-obsidian);
}
.pdp__meta dt {
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--color-pewter);
}
.pdp__meta dd {
  margin: 0;
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--color-obsidian);
}
.pdp .btn--block { margin-top: var(--spacing-30); }
.btn:disabled { cursor: not-allowed; }

/* Responsive [DERIVED: single-column stack below 820px, matching the hero breakpoint] */
@media (max-width: 820px) {
  .pdp { grid-template-columns: 1fr; }
}

/* ---------- PDP CAMPAIGN HERO + COLOR SELECTOR [DERIVED: no PDP spec in the
   skill — campaign photo runs full-bleed in natural aspect (no radius, per
   Imagery: object is the hero); color chips reuse the ghost pill treatment
   (1px Obsidian border, 50px radius, uppercase, tracked) with a Pewter-ringed
   swatch dot so the White colorway stays visible on the white card] ---------- */
.pdp__media--campaign {
  position: static;
}
.pdp__campaign {
  display: block;
  width: 100%;
  height: auto;
}
.pdp__colors {
  flex-wrap: wrap;
  row-gap: var(--spacing-10);
}
.color-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-10);
  border: 1px solid var(--color-obsidian);
  border-radius: var(--radius-buttons);
  padding: 8px 15px;
  background: transparent;
  font-family: inherit;
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--color-obsidian);
  cursor: pointer;
}
.color-chip__dot {
  width: 12px;
  height: 12px;
  border-radius: 50px;
  border: 1px solid var(--color-pewter);
  flex: none;
}
.color-chip:hover { background: var(--color-obsidian); color: var(--color-bone-white); }
.color-chip.is-active {
  background: var(--color-obsidian);
  color: var(--color-bone-white);
}

/* ---------- PDP CARE ROW [DERIVED: extended care copy lives inside the meta table;
   runs sentence case for legibility while dt labels keep the caption spec] ---------- */
.pdp__meta dd.pdp__care {
  text-transform: none;
  letter-spacing: var(--tracking-body);
  line-height: 1.55;
  max-width: 46ch;
  color: var(--color-charcoal);
}

/* ---------- FOOTER SPLIT INLINE FEEDBACK [DERIVED: Klaviyo subscribe result —
   success in the Golden Orange accent, errors in a plain legible red] ---------- */
.footer-split__msg {
  margin-top: var(--spacing-15);
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.footer-split__msg.is-ok { color: var(--color-golden-orange); }
.footer-split__msg.is-err { color: #b3261e; }

/* ---------- FAQ & TERMS PAGE [DERIVED: new page composed from skill primitives —
   caption eyebrow, heading token, 1px Obsidian hairline rows, uppercase question
   line; answers run sentence case for legibility] ---------- */
.faq { max-width: 980px; }
.faq__eyebrow {
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--color-pewter);
}
.faq__title {
  margin-top: var(--spacing-10);
  font-size: var(--text-heading-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-heading-lg);
  letter-spacing: var(--tracking-heading-lg);
  text-transform: uppercase;
  color: var(--color-obsidian);
}
.faq__list { margin-top: var(--spacing-30); border-bottom: 1px solid var(--color-obsidian); }
.faq__item { border-top: 1px solid var(--color-obsidian); }
.faq__q {
  width: 100%;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-20);
  background: none;
  border: 0;
  padding: var(--spacing-20) 0;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: var(--text-subheading);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-subheading);
  text-transform: uppercase;
  color: var(--color-obsidian);
}
.faq__q:hover { text-decoration: underline; text-underline-offset: 4px; }
.faq__chev { flex: none; font-size: 16px; line-height: 1; }
.faq__a { display: none; }
.faq__item.is-open .faq__a { display: block; }
.faq__a-inner {
  max-width: 62ch;
  padding: 0 0 var(--spacing-25);
  line-height: 1.55;
  color: var(--color-charcoal);
}
.faq__a-inner p + p { margin-top: var(--spacing-15); } /* spacing between bold-subheaded blocks */
.faq__a-inner .faq__note {
  margin-top: var(--spacing-10);
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--color-pewter);
}


/* ---------- LEGAL PAGES [DERIVED: Aviso Legal + Privacy Policy share the FAQ typography
   (eyebrow / heading-lg title / 62ch comfortable line length) without the accordion;
   one uppercase heading per section, bullet lists for data blocks] ---------- */
.legal { max-width: 980px; }
.legal__anchors {
  margin-top: var(--spacing-30);
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-10);
}
.legal__anchor {
  padding: 8px 15px;
  border: 1px solid var(--color-obsidian);
  border-radius: var(--radius-buttons); /* pill, matches faq-subnav pills */
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-obsidian);
}
.legal__anchor:hover { background: var(--color-obsidian); color: var(--color-bone-white); }
.legal__doc {
  margin-top: var(--spacing-40);
  max-width: 62ch;
  scroll-margin-top: calc(var(--dd-nav-h, 56px) + 84px);
}
.legal__divider {
  margin: var(--spacing-40) 0 0;
  border: 0;
  border-top: 1px solid var(--color-obsidian);
}
.legal__section {
  margin-top: var(--spacing-30);
  scroll-margin-top: calc(var(--dd-nav-h, 56px) + 84px);
}
.legal__section h2 {
  font-size: var(--text-subheading); /* 18px weight 700 uppercase per skill heading slot */
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-subheading);
  text-transform: uppercase;
  color: var(--color-obsidian);
}
.legal__section p {
  margin-top: var(--spacing-10);
  line-height: 1.55;
  color: var(--color-charcoal);
}
.legal__section ul {
  margin-top: var(--spacing-10);
  padding-left: 18px;
  color: var(--color-charcoal);
}
.legal__section li {
  line-height: 1.55;
  margin-top: var(--spacing-5);
}
.legal__section li p { margin-top: 0; }
.legal__intro {
  margin-top: var(--spacing-30);
  line-height: 1.55;
  color: var(--color-charcoal);
}
.legal__fineprint {
  margin-top: var(--spacing-25);
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--color-pewter);
}

/* Footer newsletter consent small print (below the email input, both surfaces) */
.footer-split__consent {
  margin-top: var(--spacing-10);
  max-width: 46em;
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--color-pewter);
}
.footer-split__consent a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 560px) {
  .faq__q { font-size: var(--text-body); }
}

/* ---------- CART DRAWER [DERIVED: no drawer component in the skill —
   composed from skill tokens: Bone White surface, 1px Obsidian hairlines
   between lines and around sections, tracked uppercase labels, pill CTAs,
   flat (no shadows), Golden Orange as the only accent] ---------- */
.cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity 0.32s ease;
  z-index: 90;
}
.cart-overlay.is-open { opacity: 1; }

.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100vw; /* full-width cart-review experience [DERIVED from the
     reference: a dedicated bag page, not a half-screen drawer] */
  max-width: none;
  background: var(--color-bone-white);
  border-left: 1px solid var(--color-obsidian); /* hairline edge, flat */
  transform: translateX(100%);
  transition: transform 0.32s ease;
  z-index: 100;
  display: flex;
  flex-direction: column;
}
.cart-drawer.is-open { transform: translateX(0); }
@media (max-width: 1099px) {
  .cart-drawer { width: 100%; } /* always full-width */
}

/* No motion for visitors who ask for reduced motion */
@media (prefers-reduced-motion: reduce) {
  .cart-overlay,
  .cart-drawer { transition: none; }
}

.cart-drawer__head {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-15);
  padding: 26px 48px 22px; /* room to breathe across the full viewport */
  border-bottom: 1px solid var(--color-obsidian); /* hairline under the head */
}
.cart-drawer__title {
  margin-right: auto;
  font-size: 32px; /* reference: 32-36px bag heading [DERIVED] */
  font-weight: var(--font-weight-bold);
  line-height: 1;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.cart-drawer__count {
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption);
  color: var(--color-pewter);
  white-space: nowrap;
}
.cart-drawer__close {
  align-self: center;
  background: none;
  border: 0;
  padding: 0 2px;
  font-size: 20px;
  line-height: 1;
  color: var(--color-obsidian);
  cursor: pointer;
}

.cart-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 28px 48px 56px;
}

/* Two-column bag view: products left (~55-62%), summary right (~38-45%) —
   reference proportions; collapses to one column below 1100px */
.cart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--spacing-30);
  align-items: start;
}
@media (min-width: 1100px) {
  .cart-layout { grid-template-columns: minmax(0, 1fr) 360px; gap: 72px; }
  .cart-summary { position: sticky; top: 0; } /* card stays visible on long lists */
}

.cart-lines { border-top: 1px solid var(--color-obsidian); } /* hairline above the list */
.cart-line {
  display: flex;
  gap: 24px;
  padding: 30px 0; /* generous editorial row height on the wide canvas */
  border-bottom: 1px solid var(--color-obsidian); /* hairline between lines */
}
.cart-lines .cart-line:first-child { padding-top: 30px; }
.cart-line__thumb {
  width: 110px;
  height: 140px; /* prominent imagery: 80-120w x 100-150h window */
  object-fit: cover;
  border-radius: var(--radius-productimages); /* 15px per skill */
  flex: none;
}
.cart-line__info { flex: 1; min-width: 0; }
.cart-line__name {
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.047em;
  text-transform: uppercase;
}
.cart-line__variant {
  margin-top: 4px;
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.04em;
  color: var(--color-pewter);
}
.cart-line__unit {
  margin-top: 4px;
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-pewter);
}

.qty-stepper {
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-obsidian); /* thin bordered pill */
  border-radius: var(--radius-buttons); /* 50px */
}
.qty-stepper__btn {
  width: 32px;
  height: 32px;
  background: none;
  border: 0;
  font-size: 14px;
  line-height: 1;
  color: var(--color-obsidian);
  cursor: pointer;
}
.qty-stepper__btn:disabled { color: var(--color-pewter); cursor: default; }
.qty-stepper__num {
  min-width: 24px;
  text-align: center;
  font-size: 11px;
  font-weight: var(--font-weight-medium);
}
.cart-line__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex: none;
}
.cart-line__price {
  font-size: 14px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.02em;
}
.cart-line__remove {
  background: none;
  border: 0;
  padding: 2px 4px;
  font-size: 16px;
  line-height: 1;
  color: var(--color-pewter);
  cursor: pointer;
}
.cart-line__remove:hover { color: var(--color-obsidian); }

/* Summary panel: the system's Black Field surface, integrated into the
   cart composition (no card border — the panel reads as part of the
   page, hairlines inside supply the structure) */
.cart-summary {
  background: var(--color-obsidian);
  color: var(--color-bone-white);
  border-radius: 22px;
  padding: 30px 30px 26px;
  color-scheme: dark; /* native select renders dark inside the panel */
}
.cart-summary :focus-visible { outline-color: var(--color-bone-white); }
.cart-summary__head {
  font-size: var(--text-caption);
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.64);
}
.cart-summary__note {
  margin-top: 6px;
  font-size: 10px;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.64);
}
.cart-summary__note--free { color: var(--color-golden-orange); } /* accent only */
.cart-summary__rows {
  margin-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.18); /* hairline under the note */
}
.cart-summary__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14); /* hairline inside card */
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.06em;
}
.cart-summary__row > span:first-child { color: rgba(255, 255, 255, 0.64); }
.cart-summary__row--total {
  border-bottom: 0; /* the row above supplies the hairline */
  padding: 14px 0 2px;
  font-size: 15px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.02em;
}
.cart-summary__row--total > span:first-child { color: var(--color-bone-white); }
.cart-summary__label { flex: none; }

/* ---------- Custom SHIP TO dropdown (replaces the native <select>) ----------
   Closed: white pill, black uppercase text, 9px chevron.
   Open:   white panel, 1px Black hairline, 15px radius (the skill's
   soft-rounded count), no shadow; Soft Linen hover; Golden Orange
   selected marker. Palette is the fixed dannsden set — no OS blue. */
.cart-region-dd { position: relative; flex: none; }
.cart-region-dd__trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: inherit;
  font-size: 10px;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-obsidian);
  background: var(--color-bone-white);
  border: 0;
  border-radius: var(--radius-buttons); /* 50px pill */
  padding: 5px 9px 5px 12px;
  cursor: pointer;
}
.cart-region-dd__trigger:hover { background: var(--color-soft-linen); }
.cart-region-dd__trigger:focus-visible {
  outline: 1px solid var(--color-golden-orange);
  outline-offset: 2px;
}
.cart-region-dd__chevron {
  flex: none;
  color: var(--color-obsidian);
  transition: transform 140ms ease;
}
.cart-region-dd.is-open .cart-region-dd__chevron { transform: rotate(180deg); }

.cart-region-dd__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 172px;
  z-index: 20;
  padding: 6px 6px 5px;
  background: var(--color-bone-white);
  border: 1px solid var(--color-obsidian); /* 1px Black hairline */
  border-radius: var(--radius-productimages); /* 15px soft panel */
  box-shadow: none;
}
.cart-region-dd__menu:not([hidden]) {
  animation: cart-region-dd-in 140ms ease both;
}
@keyframes cart-region-dd-in {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cart-region-dd__opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 8px 9px 8px 11px;
  background: none;
  border: 0;
  border-left: 2px solid transparent;
  border-radius: var(--radius-productimages); /* 15px, soft-cornered per skill */
  font-family: inherit;
  font-size: 10px;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-obsidian);
  cursor: pointer;
}
.cart-region-dd__opt:hover { background: var(--color-soft-linen); } /* Soft Linen tint, never blue */
.cart-region-dd__opt:focus-visible {
  outline: 1px solid var(--color-obsidian);
  outline-offset: 1px;
}
.cart-region-dd__opt.is-selected { border-left-color: var(--color-golden-orange); }
.cart-region-dd__mark {
  min-width: 10px;
  text-align: right;
  font-size: 10px;
  line-height: 1;
  color: var(--color-golden-orange);
}
@media (prefers-reduced-motion: reduce) {
  .cart-region-dd__menu:not([hidden]) { animation: none; }
  .cart-region-dd__chevron { transition: none; }
}
/* Mobile: same component, tighter menu offset for the smaller rows */
@media (max-width: 899px) {
  .cart-region-dd__menu { min-width: 158px; top: calc(100% + 7px); }
}

/* Primary checkout action inside the dark panel: inverted white pill —
   the black base pill would vanish against the panel (black-on-black) */
.cart-summary .btn--filled {
  background: var(--color-bone-white);
  border-color: var(--color-bone-white);
  color: var(--color-obsidian);
}
.cart-summary .btn--filled:hover {
  background: rgba(255, 255, 255, 0.86);
  border-color: rgba(255, 255, 255, 0.86);
}
.cart-drawer__checkout { margin-top: 22px; letter-spacing: 0.1em; }
.cart-drawer__checkout:disabled { opacity: 0.6; cursor: default; }

/* ---------- Review order step [UI ENHANCEMENTS] ----------
   A frozen read-only confirmation inserted before the Stripe handoff:
   quantities are plain text (QTY — price each), no steppers,
   no remove, no region select. hairline separations already come
   from .cart-lines. */
.cart-review__qty {
  margin-top: 4px;
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-pewter);
}
/* Small understated text links (reference: ← CONTINUE SHOPPING / ← BACK) */
.cart-drawer__continue,
.cart-drawer__back {
  margin-top: 20px;
  background: none;
  border: 0;
  padding: 2px 0;
  font-family: inherit;
  font-size: 10px;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--color-obsidian);
  cursor: pointer;
}
.cart-drawer__continue:hover,
.cart-drawer__back:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Legal line under the pay button: caption type on the dark summary
   card, links underlined so they read as links without competing with
   the button. Shown on the cart step and the review step. */
.cart-drawer__terms {
  margin: var(--spacing-10) 0 0;
  font-size: 9px;
  line-height: 1.6;
  letter-spacing: 0.03em;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
}
.cart-drawer__terms-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cart-drawer__terms-link:hover { color: #fff; }

/* Checkout failure feedback [DERIVED: same inline pattern as the footer
   subscribe error — Golden Orange accent, tracked caption text] */
.cart-drawer__checkout-error {
  margin-top: var(--spacing-10);
  font-size: 10px;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.04em;
  color: var(--color-golden-orange);
  text-align: center;
}

.cart-empty {
  height: 100%;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-20);
  text-align: center;
}
.cart-empty__title {
  font-size: 15px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.06em;
}

/* Mobile bag: full-width drawer, smaller heading, 80x100 thumbs */
@media (max-width: 899px) {
  .cart-drawer__head { padding: 20px; }
  .cart-drawer__title { font-size: 28px; }
  .cart-drawer__body { padding: 20px 20px 36px; }
  .cart-line { gap: 16px; padding: 20px 0; }
  .cart-lines .cart-line:first-child { padding-top: 20px; }
  .cart-line__thumb { width: 80px; height: 100px; }
  .cart-summary { padding: 24px 22px 22px; }
}

/* Tablet / small desktop (900-1099px): full-width single column with
   larger canvas padding than mobile */
@media (min-width: 900px) and (max-width: 1099px) {
  .cart-drawer__head { padding: 26px 40px 22px; }
  .cart-drawer__body { padding: 28px 40px 48px; }
}

/* ---------- PDP SIZE BUTTONS + VALIDATION HINT [DERIVED: size chips become
   real buttons (grid cards keep their static spans); focus uses a 1px
   Obsidian outline offset — outlines only, never shadows] ---------- */
button.size-chip {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
button.size-chip:focus-visible {
  outline: 1px solid var(--color-obsidian);
  outline-offset: 3px;
}
.pdp__size-hint {
  margin-top: var(--spacing-10);
  font-size: 10px;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.04em;
  color: var(--color-golden-orange); /* accent for the error message */
}

/* ---------- BODY LOCK while the drawer is open ---------- */
body.cart-locked { overflow: hidden; }

/* ---------- ORDER CONFIRMATION (success.html) [DERIVED: centered stack of
   skill primitives — caption eyebrow, heading token, 1px hairline, body copy,
   filled pill CTA; flat, Bone White on Obsidian-type hierarchy] ---------- */
.success {
  min-height: 46vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--spacing-20) 0;
}
.success__eyebrow {
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--color-pewter);
}
.success__title {
  margin-top: var(--spacing-10);
  font-size: var(--text-heading-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-heading-lg);
  letter-spacing: var(--tracking-heading-lg);
  text-transform: uppercase;
}
.success__rule {
  width: 100%;
  max-width: 320px;
  border: 0;
  border-top: 1px solid var(--color-obsidian); /* hairline separator */
  margin: var(--spacing-25) 0;
}
.success__text {
  font-size: var(--text-body);
  letter-spacing: var(--tracking-body);
  color: var(--color-charcoal);
  max-width: 42ch;
}
.success__cta { margin-top: var(--spacing-30); align-self: center; }
/* Support note under the confirmation CTA — same type as success__text, quieter framing */
.success__support { margin-top: var(--spacing-25); color: var(--color-pewter); }
.success__support a { color: inherit; text-decoration: underline; text-underline-offset: 0.15em; }

/* ============================================================
   UI ENHANCEMENTS — vanilla JS/CSS per dannsden-style skill.
   1. Newsletter popup   2. Success alert (reusable)
   3. Product hover crossfade   4. FAQ sticky sub-nav
   5. Preloader   6. Compact sticky header   7. Cart review polish
   All [DERIVED] from skill tokens: Bone White canvas, Obsidian ink,
   1px hairlines, 50px pills, uppercase tracked type, ZERO shadows.
   ============================================================ */

/* ---------- 6. COMPACT STICKY HEADER ----------
   The nav becomes sticky (the one sticky element the skill allows) and
   condenses once the hero has scrolled past; condensed sizes step down
   to the skill's original 14px logo/link spec. */
.nav {
  position: sticky;
  top: 0;
  z-index: 30;
}
.nav__inner,
.nav__wordmark,
.nav__link,
.nav__cart-box {
  transition: font-size 0.25s ease, padding 0.25s ease, width 0.25s ease, height 0.25s ease;
}
.nav.is-compact .nav__inner { padding-top: 6px; padding-bottom: 6px; }
.nav.is-compact .nav__wordmark { font-size: 14px; }
.nav.is-compact .nav__link { font-size: 14px; }
.nav.is-compact .nav__cart-box { width: 30px; height: 30px; }
/* Sticky header must never cover anchor targets */
#collections, #archives { scroll-margin-top: calc(var(--dd-nav-h, 56px) + 16px); }

/* ---------- 1. NEWSLETTER POPUP (skill: Newsletter Modal, centered variant) ----------
   Session-once popup; the form reuses the footer's Klaviyo subscribe flow.
   White card, hairline divider between header and body, underline input,
   text-action SUBSCRIBE — no borders, no shadows on the card itself. */
.nlpop {
  position: fixed;
  inset: 0;
  z-index: 60; /* above cookie bar (50), below cart drawer (100) */
  display: grid;
  place-items: center;
  padding: var(--spacing-20);
  background: rgba(0, 0, 0, 0.4); /* same scrim as the cart overlay */
  opacity: 0;
  transition: opacity 0.25s ease;
}
.nlpop.is-open { opacity: 1; }
.nlpop__card {
  position: relative;
  width: min(440px, 100%);
  background: var(--color-bone-white);
  padding: var(--spacing-30) var(--spacing-35) var(--spacing-25);
  transform: translateY(14px);
  transition: transform 0.3s ease;
}
.nlpop.is-open .nlpop__card { transform: none; }
.nlpop__close {
  position: absolute;
  top: var(--spacing-10);
  right: var(--spacing-15);
  background: none;
  border: 0;
  padding: 0 var(--spacing-5);
  font-size: 20px;
  line-height: 1;
  color: var(--color-obsidian);
  cursor: pointer;
}
.nlpop__close:hover { color: var(--color-golden-orange); }
.nlpop__club {
  font-size: var(--text-body); /* 14px/700 uppercase 0.05em — footer-split__club match */
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-golden-orange);
}
.nlpop__offer {
  margin-top: var(--spacing-10);
  font-size: var(--text-subheading);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-obsidian);
}
.nlpop__blurb {
  margin-top: var(--spacing-10);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--color-pewter);
}
.nlpop__rule {
  border: 0;
  border-top: 1px solid var(--color-obsidian); /* skill: hairline divider header→body */
  margin: var(--spacing-20) 0;
}
.nlpop__form {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-15);
}
.nlpop__input {
  flex: 1;
  min-width: 0;
  border: 0;
  border-bottom: 1px solid var(--color-obsidian); /* underline-only input per skill */
  background: transparent;
  padding: var(--spacing-10) 2px;
  font-family: inherit;
  font-size: var(--text-body);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-body);
  text-transform: uppercase;
  color: var(--color-obsidian);
  outline: none;
}
.nlpop__input::placeholder { color: var(--color-pewter); }
.nlpop__submit {
  flex-shrink: 0;
  background: none;
  border: 0;
  padding: 0;
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.047em;
  text-transform: uppercase;
  color: var(--color-obsidian);
  cursor: pointer;
}
.nlpop__submit:hover { text-decoration: underline; text-underline-offset: 3px; }
.nlpop__submit:disabled { color: var(--color-pewter); cursor: default; text-decoration: none; }
.nlpop__msg {
  margin-top: var(--spacing-15);
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.nlpop__msg.is-ok { color: var(--color-golden-orange); }
.nlpop__msg.is-err { color: #b3261e; }
.nlpop__legal {
  margin-top: var(--spacing-10);
  font-size: 9px;
  line-height: 1.4;
  color: var(--color-pewter);
}

/* ---------- 2. SUCCESS ALERT (reusable checkmark + entrance) ----------
   JS: window.DDAlert (js/site.js). Content stays fully visible
   without JS — animations only run once .dd-alert-in is applied. */
.dd-check circle,
.dd-check path {
  fill: none;
  stroke: var(--color-obsidian);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dd-check circle { stroke-width: 2.5; stroke-dasharray: 189; stroke-dashoffset: 0; }
.dd-check path { stroke-width: 3; stroke-dasharray: 34; stroke-dashoffset: 0; }
.dd-alert-in .dd-check circle { animation: dd-draw 0.55s ease-out both; }
.dd-alert-in .dd-check path { animation: dd-draw 0.3s ease-out 0.5s both; }
@keyframes dd-draw { from { stroke-dashoffset: 189; } to { stroke-dashoffset: 0; } }
.dd-alert-in .dd-check path { animation-name: dd-draw-34; }
@keyframes dd-draw-34 { from { stroke-dashoffset: 34; } to { stroke-dashoffset: 0; } }
/* Entrance: staggered rise for the stack's children — opt-in via class,
   so a no-JS page never hides content */
.dd-alert-in > * { animation: dd-rise 0.5s ease both; }
.dd-alert-in > *:nth-child(1) { animation-delay: 0s; }
.dd-alert-in > *:nth-child(2) { animation-delay: 0.12s; }
.dd-alert-in > *:nth-child(3) { animation-delay: 0.2s; }
.dd-alert-in > *:nth-child(4) { animation-delay: 0.28s; }
.dd-alert-in > *:nth-child(5) { animation-delay: 0.36s; }
.dd-alert-in > *:nth-child(6) { animation-delay: 0.44s; }
.dd-alert-in > *:nth-child(7) { animation-delay: 0.52s; }
@keyframes dd-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
/* The checkmark sits between the page top and the eyebrow */
.success .dd-check { margin-bottom: var(--spacing-25); }

/* ---------- 3. PRODUCT HOVER CROSSFADE (front → back) ----------
   The back view is absolutely stacked over the front and crossfades on
   hover. Gated behind (hover: hover) so touch devices simply get no
   effect — the tap still navigates to the PDP. */
.card__img--back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-productimages);
  opacity: 0;
  transition: opacity 0.45s ease;
}
@media (hover: hover) and (pointer: fine) {
  .card__media:hover .card__img--back { opacity: 1; }
}

/* ---------- 4. FAQ STICKY SUB-NAV + SCROLL-SPY ----------
   Pills reuse the shop filter treatment (ghost pill, filled when active).
   Sticks directly under the compacting header; height tracked via the
   --dd-nav-h custom property that the header scroll handler maintains. */
.faq-subnav {
  position: sticky;
  top: calc(var(--dd-nav-h, 56px) - 1px);
  z-index: 40;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-10);
  padding: var(--spacing-15) 0;
  background: var(--color-bone-white);
  border-bottom: 1px solid var(--color-obsidian);
}
.faq-subnav__pill {
  padding: 8px 15px;
  border: 1px solid var(--color-obsidian);
  border-radius: var(--radius-buttons);
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-obsidian);
  transition: background 0.15s ease, color 0.15s ease;
}
.faq-subnav__pill:hover { background: var(--color-obsidian); color: var(--color-bone-white); }
.faq-subnav__pill.is-active { background: var(--color-obsidian); color: var(--color-bone-white); }
.faq__item { scroll-margin-top: calc(var(--dd-nav-h, 56px) + 84px); }

/* ---------- 5. PRELOADER (brand stamp) ----------
   Injected by js/preloader.js (no-JS visitors never see it); fades out
   as soon as the DOM is parsed — never longer than a hard 300ms cap. */
.dd-preloader {
  position: fixed;
  inset: 0;
  z-index: 200; /* above everything, briefly */
  background: var(--color-bone-white);
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--spacing-15);
  transition: opacity 0.25s ease;
}
.dd-preloader.is-done { opacity: 0; pointer-events: none; }
.dd-preloader__brand {
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--color-pewter);
}
.dd-preloader__name {
  font-size: var(--text-heading);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  text-transform: uppercase;
  color: var(--color-obsidian);
}
.dd-preloader__name.is-swap { animation: dd-pre-swap 0.42s ease both; }
@keyframes dd-pre-swap { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.dd-preloader__rule {
  width: 40px;
  height: 1px;
  background: var(--color-obsidian); /* hairline, flat */
}

/* ---------- 404 page — native rebuild of the Watermelon UI error-7
   structure in the dannsden skill language [Golden-orange display numeral
   echoes the split-hero wordmark accent; heading on the display token
   (skill type-scale max); flat, hairlines only, pill buttons]. ---------- */
.nf {
  min-height: 62vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-top: var(--spacing-70);
  padding-bottom: var(--spacing-70);
}
.nf__num {                       /* brand accent: like the hero "THE DEN" line */
  font-size: var(--text-display);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--color-golden-orange);
}
.nf__title {
  font-size: var(--text-display);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--color-obsidian);
  margin-top: var(--spacing-10);
}
.nf__copy {
  font-size: var(--text-body);
  letter-spacing: var(--tracking-body);
  text-transform: uppercase;
  color: var(--color-charcoal);
  max-width: 520px;
  margin-top: var(--spacing-18);
}
.nf__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-15);
  margin-top: var(--spacing-25);
}
.nf__back {                      /* secondary pill with the inline ArrowLeft */
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-10);
}

/* PDP: product not found / hidden — centered statement in place of the
   gallery + info columns; related row hidden from JS */
.pdp-unavailable {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--spacing-50) 0 var(--spacing-70);
}
.pdp-unavailable__code {
  font-size: var(--text-caption);
  letter-spacing: 1px;
  color: var(--color-pewter);
  text-transform: uppercase;
}
.pdp-unavailable__title {
  font-size: var(--text-heading-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-heading-lg);
  text-transform: uppercase;
  color: var(--color-obsidian);
  margin-top: var(--spacing-10);
}
.pdp-unavailable__copy {
  font-size: var(--text-body);
  letter-spacing: var(--tracking-body);
  color: var(--color-charcoal);
  max-width: 520px;
  margin-top: var(--spacing-18);
}
.pdp-unavailable .btn { margin-top: var(--spacing-25); }

/* ---------- STICKY MOBILE CTA (audit item 1) ----------
   Fixed bottom action bar, phones only (<= 760px): SHOP NOW on the
   storefront pages, ADD TO CART on the PDP (js/site.js wires it through
   the same guarded add as the inline button). Bone-white bar + Obsidian
   hairline keeps the brand's flat editorial look; the .btn--filled
   pill rides on top. Desktop markup exists but never displays. */
.sticky-cta { display: none; }
@media (max-width: 760px) {
  .sticky-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 65; /* below the cookie strip (70) — while consent is pending the
       :has() rule below lifts the CTA above it instead; below cart drawer (100) */
    display: flex;
    padding: 10px 20px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--color-bone-white);
    border-top: 1px solid var(--color-obsidian);
  }
  /* BUY BAR: price + live size/color readout left, ADD TO CART pill right.
     js/site.js syncs the readout on every size/color click; before a size
     is chosen it reads "Select Size". */
  .sticky-cta__info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding-right: 14px;
  }
  .sticky-cta__price {
    font-size: 16px;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.02em;
    color: var(--color-obsidian);
  }
  .sticky-cta__variant {
    font-size: 11px;
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-pewter);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .sticky-cta__btn { flex: 0 0 auto; }
  /* Keep page content clear of the bar (price + variant + pill ≈ 58px + padding + safe area) */
  body { padding-bottom: 96px; }
  /* Consent banner pending → the strip owns the bottom edge; the sticky CTA
     steps aside. A hardcoded offset would sandwich the bar behind taller
     mobile strip heights (and sticky + strip + hero CTA can't all fit a
     640px-tall viewport anyway). The bar returns once the choice is made. */
  body:has(.cookie:not([hidden])) .sticky-cta { display: none; }
}

/* ---------- 8. SIZE GUIDE MODAL (PDP) [DERIVED from skill primitives —
   same scrim + bone card + caption type as the newsletter popup (1.
   nlpop): obsidian text on bone-white, hairline-table rules, underline
   text-trigger, no heavy chrome] */
.sizeguide {
  position: fixed;
  inset: 0;
  z-index: 66; /* above the newsletter popup (60): the guide opened by the user
     must never sit behind a triggered popup; below the consent strip (70)
     and the cart drawer (100) */
  display: grid;
  place-items: center;
  padding: var(--spacing-20);
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.sizeguide.is-open { opacity: 1; }
.sizeguide__backdrop { position: absolute; inset: 0; cursor: pointer; }
.sizeguide__card {
  position: relative;
  width: min(480px, 100%);
  max-height: calc(100vh - 40px);
  overflow: auto;
  background: var(--color-bone-white);
  padding: var(--spacing-30) var(--spacing-35) var(--spacing-25);
  transform: translateY(14px);
  transition: transform 0.3s ease;
}
.sizeguide.is-open .sizeguide__card { transform: none; }
.sizeguide__close {
  position: absolute;
  top: var(--spacing-10);
  right: var(--spacing-15);
  background: none;
  border: 0;
  padding: 0 var(--spacing-5);
  font-size: 20px;
  line-height: 1;
  color: var(--color-obsidian);
  cursor: pointer;
}
.sizeguide__close:hover { color: var(--color-golden-orange); }
.sizeguide__eyebrow {
  font-size: var(--text-body);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-golden-orange);
}
.sizeguide__title {
  margin-top: var(--spacing-10);
  font-size: clamp(22px, 3vw, 30px);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.016em;
  text-transform: uppercase;
  color: var(--color-obsidian);
}
.sizeguide__sub {
  margin-top: var(--spacing-5);
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-pewter);
}
.sizeguide__table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--spacing-20);
  font-size: 13px;
  color: var(--color-obsidian);
}
.sizeguide__table th,
.sizeguide__table td {
  border-bottom: 1px solid var(--color-pewter);
  padding: 10px 8px;
  text-align: left;
}
.sizeguide__table thead th {
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-bottom-width: 2px;
  border-bottom-color: var(--color-obsidian);
}
.sizeguide__table tbody th {
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.03em;
}
.sizeguide__note {
  margin-top: var(--spacing-20);
  font-size: 12px;
  line-height: 1.55;
  letter-spacing: 0.02em;
  color: var(--color-pewter);
  text-transform: uppercase;
}
/* The SIZE GUIDE trigger itself: caption-type text link inline with the
   SELECT SIZE label. It is an action (opens the dialog), not navigation. */
.pdp__sizeguide {
  background: none;
  border: 0;
  padding: 0 0 0 var(--spacing-10);
  margin-left: var(--spacing-5);
  font-family: inherit;
  font: inherit;
  color: var(--color-obsidian);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.pdp__sizeguide:hover { color: var(--color-golden-orange); }
.pdp__sizeguide:focus-visible {
  outline: 2px solid var(--color-obsidian);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .sizeguide,
  .sizeguide__card { transition: none; }}

/* ---------- Reduced motion: all new motion collapses to instant states ---------- */
@media (prefers-reduced-motion: reduce) {
  .nlpop,
  .nlpop__card,
  .nav__inner,
  .nav__wordmark,
  .nav__link,
  .nav__cart-box,
  .card__img--back,
  .dd-preloader { transition: none; }
  .nf .btn { transition: none; }           /* 404 rebuild: no motion at all */
  .dd-alert-in .dd-check circle,
  .dd-alert-in .dd-check path,
  .dd-alert-in > *,
  .dd-preloader__name.is-swap { animation: none; }
  .dd-check circle,
  .dd-check path { stroke-dashoffset: 0; }
}

/* ---------- DROP LIST (drop.html) — FW26 pre-launch capture ----------
   Skill tokens only: Soft Linen #e0e2db hero, White manifesto,
   Obsidian/Ink text, Golden Orange reserved for the CTA and link
   hovers. Deliberately flat — no shadows, square media, pill radius
   on the buttons only. */
.drop-page {
  --color-soft-linen: #e0e2db;  /* skill: Soft Linen */
  --color-ink: #1a1a1a;         /* skill: Ink — body copy on linen */
}

/* This page has no cart button: two columns so the wordmark keeps its
   full width instead of being squeezed by the empty third track. */
.drop-page .nav__inner { grid-template-columns: auto 1fr; }
.drop-page .nav__links { justify-content: flex-end; }

/* Visually hidden heading kept for the document outline */
.drop-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Hero: full-bleed film behind the copy. The section owns the screen
   height, the loop is an absolutely positioned backdrop (z 1), a flat
   40% veil (z 5) keeps white type legible, and the copy column (z 10)
   floats above both at a 600px measure. */
.drop-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100svh;
  overflow: hidden;
  background: var(--color-obsidian); /* poster/decoder stand-in */
}
.drop-hero__copy {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: 600px;
  padding: clamp(56px, 8vw, 96px) clamp(24px, 5vw, 70px);
  color: var(--color-bone-white);
}
.drop-eyebrow {
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-bone-white);
}
.drop-title {
  margin-top: 14px;
  font-family: var(--font-accent-italic);
  font-style: italic;
  font-weight: var(--font-weight-bold);
  font-size: clamp(3.5rem, 8vw, 7rem);
  line-height: 0.92;
  letter-spacing: -0.02em;
  color: var(--color-bone-white);
}
.drop-sub {
  margin-top: 18px;
  font-size: clamp(14px, 1.25vw, 18px);
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.86);
}

/* Inline capture over the film: white hairline field + white pill with
   ink label, never a boxed card. */
.drop-form {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 520px;
  margin-top: clamp(26px, 3.5vw, 40px);
}
.drop-form__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 12px 2px;
  border: 0;
  border-bottom: 1px solid var(--color-bone-white);
  border-radius: 0;
  background: transparent;
  font: inherit;
  font-size: 15px;
  letter-spacing: 0.01em;
  color: var(--color-bone-white);
}
.drop-form__input::placeholder { color: var(--color-bone-white); opacity: 0.78; }
.drop-form__input:focus-visible { outline: 2px solid var(--color-bone-white); outline-offset: 4px; }
.drop-form__btn {
  flex: 0 0 auto;
  padding: 14px 28px;
  border: 1px solid var(--color-bone-white);
  border-radius: var(--radius-buttons); /* 50px pill — the only rounded shape on the page */
  background: var(--color-bone-white);
  color: var(--color-obsidian);
  font: inherit;
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.drop-form__btn:hover { background: var(--color-golden-orange); border-color: var(--color-golden-orange); color: var(--color-obsidian); }
.drop-form__btn[disabled] { opacity: 0.55; cursor: progress; }
.drop-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.drop-form__msg {
  margin-top: 16px;
  font-size: 14px;
  letter-spacing: 0.01em;
  color: var(--color-bone-white);
}
.drop-form__msg.is-err { text-decoration: underline; text-underline-offset: 3px; }

/* The film bleeds edge to edge behind everything. No radius, no shadow. */
.drop-hero__media {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.drop-hero__media img,
.drop-hero__media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Flat 40% black veil: white type never sits on raw footage */
.drop-hero__veil {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: rgba(0, 0, 0, 0.4);
  pointer-events: none;
}

/* Manifesto: white, 50vh, one paragraph at 24px capped at 40 characters a line */
.drop-manifesto {
  display: grid;
  place-items: center;
  min-height: 50vh;
  padding: clamp(48px, 8vw, 80px) var(--spacing-25);
  background: var(--color-bone-white);
}
.drop-manifesto__text {
  max-width: 40ch;
  font-size: 1.5rem;
  line-height: 1.35;
  letter-spacing: 0.015em;
  color: var(--color-ink);
  text-align: center;
  text-wrap: balance;
}

/* Drop preview: three columns, no prices, whole tile is the link */
.drop-preview {
  padding-top: clamp(48px, 7vw, 70px);
  padding-bottom: clamp(48px, 7vw, 70px);
}
.drop-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-30);
}
.drop-card {
  display: block;
  text-decoration: none;
  color: var(--color-obsidian);
}
.drop-card__media { display: block; overflow: hidden; }
.drop-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0;
  transition: opacity 0.2s ease;
}
.drop-card:hover img { opacity: 0.88; }
.drop-card__name {
  display: block;
  margin-top: 14px;
  font-size: 12px;
  letter-spacing: 0.047em;
  text-transform: uppercase;
  text-align: center;
}
.drop-card:hover .drop-card__name {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Collection link: Obsidian for AA contrast, Golden Orange on hover */
.drop-explore {
  display: block;
  margin-top: clamp(36px, 5vw, 56px);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  color: var(--color-obsidian);
  transition: color 0.15s ease;
}
.drop-explore:hover,
.drop-explore:focus-visible { color: var(--color-golden-orange); }

/* Slim footer */
.drop-foot { border-top: 1px solid var(--color-obsidian); }
.drop-foot__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-15) var(--spacing-30);
  padding-top: var(--spacing-25);
  padding-bottom: var(--spacing-25);
}
.drop-foot__copy {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.drop-foot__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-20);
}
.drop-foot__link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-obsidian);
  cursor: pointer;
}
.drop-foot__link:hover { color: var(--color-golden-orange); }

/* Discreet passcode entry: its own line under the footer links */
.drop-foot__gate {
  flex-basis: 100%;
  margin-top: 2px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-align: left;
  color: var(--color-ink);
  cursor: pointer;
  transition: color 0.15s ease;
}
.drop-foot__gate:hover {
  color: var(--color-golden-orange);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.drop-foot__gate:focus-visible { outline: 2px solid var(--color-obsidian); outline-offset: 4px; }

/* Passcode dialog: flat white panel, hairline border, no shadow and no
   radius. The pill button is the only rounded shape, as on the page. */
.gate-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 20px;
}
.gate-modal[hidden] { display: none; }
.gate-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);
}
.gate-modal__panel {
  position: relative;
  width: 100%;
  max-width: 380px;
  padding: 32px 26px 26px;
  background: var(--color-bone-white);
  border: 1px solid var(--color-obsidian);
}
.gate-modal__close {
  position: absolute;
  top: 6px;
  right: 8px;
  padding: 4px 8px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 20px;
  line-height: 1;
  color: var(--color-obsidian);
  cursor: pointer;
}
.gate-modal__close:focus-visible { outline: 2px solid var(--color-obsidian); outline-offset: 2px; }
.gate-modal__brand {
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.gate-modal__title {
  margin-top: 10px;
  font-family: var(--font-accent-italic);
  font-style: italic;
  font-weight: var(--font-weight-bold);
  font-size: 2rem;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--color-obsidian);
}
.gate-modal__sub {
  margin-top: 10px;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--color-ink);
}
.gate-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 24px;
}
.gate-form__label {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink);
}
.gate-form__input {
  width: 100%;
  padding: 10px 2px;
  border: 0;
  border-bottom: 1px solid var(--color-obsidian);
  border-radius: 0;
  background: transparent;
  font: inherit;
  font-size: 15px;
  letter-spacing: 0.02em;
  color: var(--color-obsidian);
}
.gate-form__input:focus-visible { outline: 2px solid var(--color-obsidian); outline-offset: 4px; }
.gate-form__btn {
  width: 100%;
  margin-top: 8px;
  padding: 14px 24px;
  border: 1px solid var(--color-obsidian);
  border-radius: var(--radius-buttons);
  background: var(--color-obsidian);
  color: var(--color-bone-white);
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.gate-form__btn:hover { background: var(--color-golden-orange); border-color: var(--color-golden-orange); color: var(--color-obsidian); }
.gate-form__btn[disabled] { opacity: 0.55; cursor: progress; }
.gate-form__msg {
  font-size: 13px;
  line-height: 1.4;
  color: #b3261e; /* 6.3:1 on white — errors only */
}

/* Dialog open: the page underneath does not scroll */
.gate-open { overflow: hidden; }

/* Phones: the film still fills the screen, the copy column goes
   full width and the button sits under the field, so the headline,
   subtitle and form all land inside the first screen. */
@media (max-width: 820px) {
  .drop-hero { min-height: 100svh; }
  .drop-hero__copy { max-width: none; padding: 28px 22px 32px; }
  .drop-title { margin-top: 10px; }
  .drop-sub { margin-top: 12px; font-size: 13px; letter-spacing: 0; }
  .drop-form {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    max-width: none;
    margin-top: 22px;
  }
  .drop-form__btn { width: 100%; padding: 15px 24px; }
  .drop-foot__gate { margin-top: 6px; }
  .drop-grid { grid-template-columns: repeat(2, 1fr); gap: var(--spacing-20); }
}
@media (max-width: 560px) {
  .drop-grid { grid-template-columns: 1fr; }
  /* Two links plus the wordmark must stay on one row on a phone */
  .drop-page .nav__wordmark,
  .drop-page .nav__link { font-size: 14px; }
  .drop-page .nav__links { column-gap: var(--spacing-15); }
}
@media (prefers-reduced-motion: reduce) {
  .drop-form__btn,
  .drop-card img,
  .drop-explore,
  .drop-foot__gate,
  .gate-form__btn { transition: none; }
}