/* ==========================================================================
   Astro Cheveux — base stylesheet
   Design tokens, typography, buttons, header, footer, cart drawer.
   Written mobile-first: the base rules are the mobile design; the
   `min-width: 1024px` blocks are the desktop design.
   ========================================================================== */

:root {
  /* Palette — from the brand design system */
  --ink:        #111111;
  --true-black: #000000;
  --charcoal:   #222222;
  --champagne:  #E5DCD3;
  --mist:       #F4F4F4;
  --cloud:      #E6E6E6;
  --white:      #FFFFFF;
  --midnight:   #19283A;
  --citrine:    #C6A15B;
  --muted:      #767676;

  /* Type */
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:  'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* Layout */
  --content-max: 1280px;
  --header-max:  1380px;
  --gutter: 24px;

  /* Elevation — nothing heavier than this, per the brief */
  --shadow: 0 0 24px rgba(17, 17, 17, 0.06);
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.is-locked { overflow: hidden; }

/* Keep the footer at the bottom of the viewport on short pages
   (an empty cart, a placed order) instead of floating mid-screen. */
body { min-height: 100vh; display: flex; flex-direction: column; }
body > * { flex-shrink: 0; }
body > main { flex: 1 0 auto; }

img { max-width: 100%; }

/* Components below set display on elements that also toggle [hidden]
   (waitlist form, FAQ answers, demo notes) — keep the attribute winning. */
[hidden] { display: none !important; }

h1, h2, h3, h4, p, figure { margin: 0; }

a { color: var(--ink); }

button { font-family: inherit; }

input, select, textarea { font-family: var(--sans); }

input::placeholder { color: #9a9a9a; font-family: var(--sans); }

:focus-visible {
  outline: 2px solid var(--citrine);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */

@keyframes acRise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.rise { animation: acRise .6s ease-out both; }

/* Gentle scroll-reveal — opacity + 12px translate, per the brief. */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .7s ease-out, transform .7s ease-out;
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Typography primitives
   -------------------------------------------------------------------------- */

.serif { font-family: var(--serif); font-weight: 500; }

.eyebrow {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--charcoal);
  line-height: 1.5;
}
.eyebrow--citrine { color: var(--citrine); }
.eyebrow--light   { color: rgba(255, 255, 255, 0.55); }

/* Section titles */
.h1 { font-family: var(--serif); font-weight: 500; font-size: 40px; line-height: 1.1; color: var(--ink); }
.h2 { font-family: var(--serif); font-weight: 500; font-size: 34px; line-height: 1.1; color: var(--ink); }
.h3 { font-family: var(--serif); font-weight: 500; font-size: 28px; line-height: 1.15; color: var(--ink); }
.h4 { font-family: var(--serif); font-weight: 500; font-size: 23px; line-height: 1.25; color: var(--ink); }

.lede { font-size: 16px; line-height: 1.6; color: var(--charcoal); text-wrap: pretty; }

/* Bracketed placeholders from the design brief — nothing invented ships.
   Kept as literal text so it is obvious what still needs real data. */
.ph { font-style: normal; }

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.section { padding: 64px var(--gutter); }
.section--flush { padding-left: 0; padding-right: 0; }
.section--tight { padding-top: 56px; padding-bottom: 56px; }

.section--white     { background: var(--white); }
.section--mist      { background: var(--mist); }
.section--champagne { background: var(--champagne); }
.section--midnight  { background: var(--midnight); color: var(--white); }

.wrap { max-width: var(--content-max); margin: 0 auto; width: 100%; }
.wrap--narrow { max-width: 800px; }

.pad-x { padding-left: var(--gutter); padding-right: var(--gutter); }

.section-head { display: flex; flex-direction: column; gap: 12px; }
.section-head .h2 { margin-top: 0; }

.rule { height: 1px; background: var(--cloud); border: 0; margin: 0; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 34px;
  /* Flex containers drop whitespace-only nodes, so labels like
     "Add to Cart — <span>[$X,XXX]</span>" need an explicit gap. */
  gap: 0.35em;
  border: 1px solid transparent;
  border-radius: 0;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background .25s, color .25s, border-color .25s;
  text-align: center;
}

.btn--primary {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
}
.btn--primary:hover { background: var(--midnight); border-color: var(--midnight); color: var(--white); }

.btn--secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn--secondary:hover { background: var(--champagne); color: var(--ink); }

/* On Midnight backgrounds */
.btn--ghost-light {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.85);
}
.btn--ghost-light:hover { background: rgba(255, 255, 255, 0.1); color: var(--white); }

.btn--citrine {
  background: transparent;
  color: var(--citrine);
  border-color: var(--citrine);
  height: 52px;
  padding: 0 28px;
  font-size: 12px;
  letter-spacing: 0.12em;
}
.btn--citrine:hover { background: var(--citrine); color: var(--midnight); }

.btn--block { width: 100%; }
.btn--sm { height: 44px; padding: 0 18px; font-size: 12px; letter-spacing: 0.1em; }

/* Tertiary — underlined text link with an arrow */
.link {
  font-size: 14px;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.link:hover { color: var(--midnight); }

.link--arrow-caps {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   Chips / pills — sharp corners, couture
   -------------------------------------------------------------------------- */

.chips { display: flex; flex-wrap: wrap; gap: 8px; }

.chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border: 1px solid var(--cloud);
  border-radius: 0;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--charcoal);
  background: transparent;
}

/* --------------------------------------------------------------------------
   Trust strip — 2x2 on mobile, 4-up on desktop
   -------------------------------------------------------------------------- */

.trust-strip { background: var(--champagne); padding: 44px var(--gutter); }
.trust-strip__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 20px; max-width: var(--content-max); margin: 0 auto; }
.trust-item { display: flex; flex-direction: column; gap: 10px; }
.trust-item svg { flex-shrink: 0; }
.trust-item__label { font-size: 14px; font-weight: 500; letter-spacing: 0.02em; }
.trust-item__sub { font-size: 13px; color: var(--charcoal); opacity: 0.75; margin-top: 3px; }

.section-foot { text-align: center; margin-top: 32px; padding: 0 var(--gutter); }

/* --------------------------------------------------------------------------
   Star rating
   -------------------------------------------------------------------------- */

.stars { color: var(--citrine); letter-spacing: 3px; font-size: 13px; }

.trust-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--charcoal);
  line-height: 1.6;
}
.trust-row .sep { color: var(--cloud); }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.field {
  width: 100%;
  min-width: 0;
  height: 52px;
  border: 1px solid var(--cloud);
  border-radius: 0;
  background: var(--white);
  padding: 0 16px;
  font-size: 15px;
  color: var(--ink);
}
.field:focus { border-color: var(--ink); outline: none; }
.field:focus-visible { outline: 2px solid var(--citrine); outline-offset: -2px; }

.field-grid { display: grid; gap: 10px; margin-top: 10px; }
.field-grid--2 { grid-template-columns: 1fr 1fr; }
.field-grid--csz { grid-template-columns: 1.4fr 0.8fr 0.8fr; }

/* Checkbox built as a button so it keeps the sharp-square look */
.checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  text-align: left;
  font-family: var(--sans);
}
.checkbox__box {
  width: 18px;
  height: 18px;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--white);
  font-size: 12px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.checkbox[aria-checked="true"] .checkbox__box { background: var(--ink); }
.checkbox[aria-checked="true"] .checkbox__box::after { content: '✓'; }
.checkbox__label { font-size: 13px; line-height: 1.4; color: var(--charcoal); }

/* Radio row (delivery / payment method) */
.radio-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--cloud);
  background: var(--white);
  cursor: pointer;
  font-family: var(--sans);
  text-align: left;
}
.radio-row[aria-checked="true"] { border-color: var(--ink); }
.radio-row__dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0.5;
}
.radio-row[aria-checked="true"] .radio-row__dot { opacity: 1; }
.radio-row__dot::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink);
  display: none;
}
.radio-row[aria-checked="true"] .radio-row__dot::after { display: block; }

/* --------------------------------------------------------------------------
   Announcement bar
   -------------------------------------------------------------------------- */

.announce {
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--midnight);
  color: var(--white);
  font-size: 12px;
  letter-spacing: 0.08em;
  padding: 10px 16px;
  text-align: center;
}
/* Only the first message shows on mobile, per the brief */
.announce__full { display: none; }
.announce__short { display: inline; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--cloud);
  transition: box-shadow .25s;
}
.site-header.is-stuck { box-shadow: var(--shadow); }

.site-header__inner {
  max-width: var(--header-max);
  margin: 0 auto;
  height: 64px;
  padding: 0 8px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  transition: height .25s;
}

.site-header__logo { display: flex; align-items: center; text-decoration: none; justify-self: center; }
.site-header__logo img { max-height: 36px; width: auto; display: block; }

.icon-btn {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  position: relative;
  color: var(--ink);
  text-decoration: none;
}
.hamburger { justify-self: start; }

.header-utils { display: flex; align-items: center; justify-content: flex-end; justify-self: end; }

/* Mobile header is hamburger · logo · cart. The mobile design drops the
   search and account icons entirely rather than crowding the bar. */
.header-utils .icon-btn:nth-child(-n+2) { display: none; }

.cart-count {
  position: absolute;
  top: 6px;
  right: 4px;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--white);
  font-size: 9px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.cart-count[hidden] { display: none; }

/* Desktop nav is hidden on mobile */
.site-nav, .header-cta { display: none; }

/* Mobile full-screen menu — Champagne, serif headings, 48px tap targets */
.mobile-menu {
  position: fixed;
  inset: 0;
  background: var(--champagne);
  z-index: 200;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform .3s ease;
  visibility: hidden;
}
.mobile-menu.is-open { transform: none; visibility: visible; }

.mobile-menu__top {
  height: 64px;
  padding: 0 8px 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(17, 17, 17, 0.12);
  flex-shrink: 0;
}
.mobile-menu__top img { max-height: 32px; width: auto; display: block; }

.mobile-menu__close {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 26px;
  font-weight: 300;
  color: var(--ink);
  line-height: 1;
}

.mobile-menu__body { flex: 1; overflow-y: auto; padding: 16px 24px 24px; }

.mobile-menu__group-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 30px;
  color: var(--ink);
  padding: 14px 0 6px;
}
.mobile-menu__sub { display: flex; flex-direction: column; }
.mobile-menu__sub a {
  min-height: 48px;
  display: flex;
  align-items: center;
  font-size: 15px;
  color: var(--ink);
  text-decoration: none;
}
.mobile-menu__sub a span { color: var(--muted); margin-left: 8px; }

.mobile-menu__divider { height: 1px; background: rgba(17, 17, 17, 0.12); margin: 16px 0; }

.mobile-menu__link {
  min-height: 56px;
  display: flex;
  align-items: center;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 30px;
  color: var(--ink);
  text-decoration: none;
}

.mobile-menu__foot {
  padding: 16px 24px 24px;
  border-top: 1px solid rgba(17, 17, 17, 0.12);
  flex-shrink: 0;
}
.mobile-menu__foot .btn { height: 56px; }
.mobile-menu__foot .btn + .btn { margin-top: 10px; }

/* --------------------------------------------------------------------------
   Cart drawer — shared across every page
   -------------------------------------------------------------------------- */

.drawer-scrim {
  position: fixed;
  inset: 0;
  background: rgba(17, 17, 17, 0.35);
  z-index: 300;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s;
}
.drawer-scrim.is-open { opacity: 1; visibility: visible; }

.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 420px;
  background: var(--white);
  z-index: 301;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .32s cubic-bezier(.4, 0, .2, 1);
  visibility: hidden;
}
.cart-drawer.is-open { transform: none; visibility: visible; }

.cart-drawer__top {
  height: 64px;
  padding: 0 8px 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--cloud);
  flex-shrink: 0;
}
.cart-drawer__title {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}
.cart-drawer__body { flex: 1; overflow-y: auto; padding: 24px; }
.cart-drawer__foot { border-top: 1px solid var(--cloud); padding: 20px 24px; flex-shrink: 0; }

/* Free-shipping / craft reassurance band inside the drawer */
.drawer-note {
  background: var(--champagne);
  padding: 12px 14px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink);
}
.drawer-note svg { flex-shrink: 0; margin-top: 2px; }

/* Cart line items — shared by drawer, cart page, checkout summary */
.line-item { display: flex; gap: 14px; padding: 20px 0; border-bottom: 1px solid var(--cloud); }
.line-item:first-child { padding-top: 0; }
.line-item__media { flex-shrink: 0; position: relative; }
.line-item__media img {
  width: 82px;
  height: 106px;
  object-fit: cover;
  background: var(--champagne);
  display: block;
}
.line-item__main { flex: 1; min-width: 0; }
.line-item__name { font-family: var(--serif); font-weight: 500; font-size: 20px; color: var(--ink); line-height: 1.2; }
.line-item__variant { font-size: 12px; color: var(--charcoal); margin-top: 3px; }
.line-item__meta { font-size: 11px; color: var(--charcoal); opacity: 0.7; margin-top: 4px; }
.line-item__price { font-size: 14px; font-weight: 500; color: var(--ink); white-space: nowrap; }
.line-item__actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }

.qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--cloud);
}
.qty button {
  width: 34px;
  height: 34px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 15px;
  color: var(--ink);
  line-height: 1;
}
.qty button:disabled { opacity: 0.35; cursor: default; }
.qty__value { min-width: 30px; text-align: center; font-size: 14px; color: var(--ink); }

.remove-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  font-size: 12px;
  color: var(--charcoal);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Order summary rows */
.sum-row { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; color: var(--charcoal); margin-top: 10px; }
.sum-row strong { color: var(--ink); font-weight: 500; }
.sum-total { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-top: 16px; }
.sum-total__label { font-size: 15px; font-weight: 500; color: var(--ink); }
.sum-total__value { font-size: 21px; font-weight: 500; color: var(--ink); }
.sum-finance { font-size: 12px; color: var(--charcoal); opacity: 0.8; margin-top: 4px; text-align: right; }

.cart-empty { text-align: center; padding: 48px 0; }
.cart-empty .h3 { margin-bottom: 10px; }
.cart-empty p { font-size: 14px; color: var(--charcoal); margin-bottom: 24px; }

/* --------------------------------------------------------------------------
   Newsletter + footer
   -------------------------------------------------------------------------- */

.newsletter { background: var(--midnight); text-align: center; padding: 64px var(--gutter) 56px; }
.newsletter__inner { max-width: 560px; margin: 0 auto; }
.newsletter .h3 { color: var(--white); }
.newsletter p { font-size: 14px; line-height: 1.6; color: var(--cloud); margin-top: 12px; }
.newsletter__form { display: flex; flex-direction: column; gap: 14px; margin-top: 28px; }
.newsletter__input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(230, 230, 230, 0.5);
  color: var(--white);
  padding: 12px 4px;
  font-size: 15px;
}
.newsletter__input:focus { border-bottom-color: var(--citrine); outline: none; }
.newsletter__input::placeholder { color: rgba(255, 255, 255, 0.5); }
.newsletter__note { font-size: 13px; color: rgba(255, 255, 255, 0.55); margin-top: 14px; }

.site-footer { background: var(--midnight); color: var(--white); border-top: 1px solid rgba(255, 255, 255, 0.12); padding: 48px var(--gutter) 0; }
.site-footer__brand img { height: 52px; width: auto; display: block; }
.site-footer__brand p { font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, 0.65); margin-top: 14px; max-width: 260px; }
.site-footer__social { font-size: 12px; color: rgba(255, 255, 255, 0.4); margin-top: 14px; }

.site-footer__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 36px 24px; margin-top: 40px; }
.site-footer__col { display: flex; flex-direction: column; gap: 12px; }
.site-footer__col-title {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 4px;
}
.site-footer__col a { font-size: 14px; color: rgba(255, 255, 255, 0.75); text-decoration: none; }
.site-footer__col a:hover { color: var(--white); }

.site-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin-top: 40px;
  padding: 20px 0 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
}
.pay-badges { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; align-items: center; }
.pay-badge {
  padding: 4px 8px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.6);
}

/* The mark carries its own card, so it takes none of the text badge's box.
   Height is what lines the row up — the marks are drawn 100×60, and widths
   differ enough between brands that fixing width instead would distort them. */
.pay-badge--mark {
  padding: 0;
  border: 0;
  height: 26px;
  width: auto;
  display: block;
}
.site-footer__legal { font-size: 12px; color: rgba(255, 255, 255, 0.5); text-align: center; }

/* The build credit. The global `a` colour is ink, which is invisible on the
   dark panel — the footer's own link colours apply instead. */
.site-footer__credit a { color: rgba(255, 255, 255, 0.75); text-decoration: none; }
.site-footer__credit a:hover { color: var(--white); }

/* --------------------------------------------------------------------------
   Carousels — manual only, never auto-rotating

   One rail at every width: full-width cards on phones, two-up on tablets,
   three-up on desktop. --per-view tells the script how many cards make a
   page; it slides a page at a time and the dots count pages, not cards.
   -------------------------------------------------------------------------- */

.carousel {
  --per-view: 1;
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--gutter);
  padding: 32px var(--gutter) 8px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.carousel::-webkit-scrollbar { display: none; }
.carousel > * { flex: 0 0 100%; scroll-snap-align: start; }

/* Fewer cards than one page: nothing to slide, so the row sits centered. */
.carousel.is-static { justify-content: center; }

/* The dot is 6px, but the thing you tap is 24px.
 *
 * WCAG 2.2 measures the target, not the ink: a 6px dot 6px from its neighbour
 * fails 2.5.8 twice over — too small, and too close to be told apart by a
 * fingertip. So the button became a transparent 24x24 cell and the dot moved
 * into a pseudo-element. Cells sit flush (gap: 0), which puts 24px between
 * centres exactly. The dots look the same; the row is wider because the space
 * between them is now real. */
.dots { display: flex; justify-content: center; gap: 0; margin-top: 20px; }
.dots button {
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: none;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.dots button::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: #D8D2CA;
  transition: width .25s ease, background .25s ease;
}
.dots button.is-active::before { width: 20px; background: var(--ink); }

/* Prev / dots / next — injected by initCarousels(), hidden at one page. */
.carousel-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 20px; }
.carousel-nav[hidden] { display: none; }
.carousel-nav .dots { margin-top: 0; }
.carousel-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--ink);
  opacity: 0.55;
  cursor: pointer;
  transition: opacity .2s ease;
}
.carousel-arrow:hover:not(:disabled),
.carousel-arrow:focus-visible { opacity: 1; }
.carousel-arrow:disabled { opacity: 0.18; cursor: default; }

/* --------------------------------------------------------------------------
   FAQ accordion
   -------------------------------------------------------------------------- */

.faq { display: flex; flex-direction: column; }
.faq__item { background: var(--white); border: 1px solid var(--cloud); }
.faq__item + .faq__item { margin-top: -1px; }
.faq__q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  min-height: 56px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  text-align: left;
}
.faq__icon { font-size: 20px; font-weight: 300; color: var(--charcoal); line-height: 1; }
.faq__a { font-size: 14px; line-height: 1.65; color: var(--charcoal); padding: 0 20px 20px; }
.faq__item[data-open="false"] .faq__a { display: none; }

/* --------------------------------------------------------------------------
   Signature constellation motif — used exactly twice per page
   -------------------------------------------------------------------------- */

.motif { display: block; margin-top: 14px; max-width: 100%; height: auto; }

.motif--bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.1;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Media — ratio boxes with a Champagne ground so a slow/blocked image
   still reads as an intentional surface rather than a hole.
   -------------------------------------------------------------------------- */

.media { position: relative; overflow: hidden; background: var(--champagne); }
.media > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.media--3-4 { aspect-ratio: 3 / 4; }
.media--4-3 { aspect-ratio: 4 / 3; }
.media--3-2 { aspect-ratio: 3 / 2; }
.media--1-1 { aspect-ratio: 1 / 1; }

/* Image zoom on hover, 1.03 max */
.media--zoom > img { transition: transform .6s ease; }
@media (hover: hover) {
  a:hover > .media--zoom > img,
  .media--zoom:hover > img { transform: scale(1.03); }
}

.media__caption {
  padding: 12px 4px 4px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--charcoal);
}

/* Text that only earns its space on wider screens */
.wide-only { display: none; }

/* Skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--white);
  padding: 12px 20px;
  z-index: 400;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.skip-link:focus { left: 0; }

/* ==========================================================================
   DESKTOP — the desktop design takes over here
   ========================================================================== */

@media (min-width: 1024px) {
  :root { --gutter: 48px; }

  .h1 { font-size: 72px; line-height: 1.05; }
  .h2 { font-size: 44px; }
  .h3 { font-size: 32px; }
  .h4 { font-size: 24px; }
  .lede { font-size: 16px; }

  .section { padding: 120px var(--gutter); }
  .section--tight { padding: 72px var(--gutter); }

  .announce { min-height: 44px; padding: 12px 24px; }
  .announce__full { display: inline; }
  .announce__short { display: none; }

  /* Header: 80px, shrinks to 60px on scroll */
  .site-header__inner {
    height: 80px;
    padding: 0 24px;
    grid-template-columns: auto 1fr auto;
    gap: 20px;
  }
  .site-header.is-stuck .site-header__inner { height: 60px; }
  .site-header__logo { justify-self: start; }
  .site-header__logo img { max-height: 44px; transition: max-height .25s; }
  .site-header.is-stuck .site-header__logo img { max-height: 34px; }

  .hamburger, .mobile-menu { display: none; }

  .wide-only { display: inline; }

  .site-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(16px, 2.5vw, 34px);
    min-width: 0;
  }
  .site-nav__link {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
  }

  .has-dropdown { position: relative; height: 80px; display: flex; align-items: center; transition: height .25s; }
  .site-header.is-stuck .has-dropdown { height: 60px; }

  .dropdown {
    position: absolute;
    top: 100%;
    left: -28px;
    min-width: 320px;
    background: var(--white);
    border: 1px solid var(--cloud);
    box-shadow: var(--shadow);
    padding: 8px 0;
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease, visibility .18s;
  }
  .has-dropdown:hover .dropdown,
  .has-dropdown:focus-within .dropdown { opacity: 1; visibility: visible; }

  .dropdown a {
    padding: 13px 24px;
    font-size: 14px;
    color: var(--ink);
    text-decoration: none;
    transition: background .2s;
  }
  .dropdown a:hover { background: var(--champagne); color: var(--ink); }
  .dropdown a span { color: var(--muted); }
  .dropdown__rule { height: 1px; background: var(--cloud); margin: 8px 0; }

  .header-utils { gap: clamp(14px, 1.6vw, 22px); }
  .header-utils .icon-btn,
  .header-utils .icon-btn:nth-child(-n+2) { display: flex; width: 18px; height: 18px; }
  .header-utils .cart-count { top: -6px; right: -8px; }

  /* Book a Fitting lives in the header permanently — it must never scroll away */
  .header-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 18px;
    background: var(--ink);
    color: var(--white);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: background .25s;
  }
  .header-cta:hover { background: var(--midnight); color: var(--white); }

  /* Trust strip */
  .trust-strip { padding: 60px var(--gutter); }
  .trust-strip__grid { grid-template-columns: repeat(4, 1fr); gap: 40px; }
  .trust-item { flex-direction: row; gap: 16px; align-items: flex-start; }
  .trust-item svg { margin-top: 2px; }

  .section-foot { margin-top: 52px; padding: 0; }
  /* Carousels page three-up on desktop, sliding a full row at a time */
  .carousel {
    --per-view: 3;
    gap: 24px;
    scroll-padding-left: 0;
    padding: 56px 0 0;
  }
  .carousel > * { flex-basis: calc((100% - 48px) / 3); }

  .faq__q { font-size: 16px; padding: 22px 28px; }
  .faq__a { font-size: 15px; line-height: 1.65; padding: 0 28px 24px; }

  .field-grid { gap: 12px; }

  .newsletter { padding: 96px var(--gutter) 88px; }
  .newsletter p { font-size: 15px; }
  .newsletter__form { flex-direction: row; gap: 12px; margin-top: 32px; }
  .newsletter__form .newsletter__input { flex: 1; }
  .newsletter__form .btn { height: 48px; }
  .newsletter__note { margin-top: 16px; }

  .site-footer { padding: 0; }
  .site-footer__inner {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 72px var(--gutter);
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 48px;
  }
  .site-footer__brand img { height: 64px; }
  .site-footer__brand p { margin-top: 16px; }
  .site-footer__social { margin-top: 20px; }
  .site-footer__cols { display: contents; }
  .site-footer__col-title { margin-bottom: 6px; }

  .site-footer__bottom-wrap { border-top: 1px solid rgba(255, 255, 255, 0.12); }
  .site-footer__bottom {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 24px var(--gutter);
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    border-top: none;
  }
  .pay-badges { justify-content: flex-start; }
  .pay-badge { padding: 4px 10px; font-size: 10px; }
  .pay-badge--mark { padding: 0; height: 28px; }
  .site-footer__legal { font-size: 13px; }

  .line-item__media img { width: 96px; height: 124px; }
  .line-item__name { font-size: 22px; }
}

/* Intermediate widths: keep the stacked layout but stop content from
   stretching to unreadable line lengths on tablets. */
@media (min-width: 640px) and (max-width: 1023px) {
  .section { padding: 80px 40px; }
  .stack-cap { max-width: 640px; margin-left: auto; margin-right: auto; }
  .carousel { --per-view: 2; }
  .carousel > * { flex-basis: calc((100% - 16px) / 2); }
}

/* --------------------------------------------------------------------------
   Global primitives that used to live in woo.css

   These three were stranded in the WooCommerce bridge, which is why that
   sheet had to load on every template. Nothing here is Woo-specific: the
   skip link is on every page, and the overflow clip is what stops the
   off-canvas cart drawer panning the whole document sideways.
   -------------------------------------------------------------------------- */

.screen-reader-text {
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

.screen-reader-text:focus {
  clip-path: none;
  height: auto;
  width: auto;
  z-index: 100000;
  display: block;
  padding: 15px 23px 14px;
  background: var(--white);
  color: var(--ink);
  font-size: 14px;
  left: 5px;
  top: 5px;
  text-decoration: none;
}

.carousel,
.shade-row,
.filter-bar,
.compare__scroll,
.gallery__thumbs { position: relative; }

html, body { overflow-x: clip; }

/* --------------------------------------------------------------------------
   Journal cards

   Lived in home.css until 1.5.12, which meant they only had styling on the
   front page — single.php renders the same component as its related-articles
   block, where home.css never loads, so every post showed raw inline links.
   They are a shared component, so they live here.

   The grid is auto-fit rather than a fixed three columns: a post excludes
   itself from its own related list, so this block legitimately renders two
   cards as often as three, and a fixed grid would strand one in a gap.
   -------------------------------------------------------------------------- */

.journal__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  margin-top: 36px;
}

.journal-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--ink);
}

.journal-card__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 23px;
  line-height: 1.25;
  margin-top: 16px;
  transition: color .25s ease;
}
.journal-card:hover .journal-card__title { color: var(--midnight); }

.journal-card p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--charcoal);
  margin-top: 6px;
}

/* Pushed to the foot of the card so reading times line up across the row
   however uneven the titles and excerpts above them are. */
.journal-card__read {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--charcoal);
  opacity: 0.65;
  margin-top: auto;
  padding-top: 12px;
}

@media (min-width: 640px) {
  .journal__grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 28px;
  }
}

@media (min-width: 1024px) {
  .journal__grid { gap: 32px; margin-top: 56px; }
  .journal-card__title { font-size: 24px; margin-top: 20px; }
  .journal-card p { margin-top: 8px; }
}

/* --------------------------------------------------------------------------
   Waitlist form

   Lived in home.css until 1.5.14, so it was only styled on the homepage —
   but the same form renders in the shop grid and the compare table, and now
   on the product page of any line that has not launched. None of those load
   home.css, so Aurora's waitlist was arriving as raw inputs everywhere
   except the front page.
   -------------------------------------------------------------------------- */

.waitlist { display: flex; gap: 8px; margin-top: 20px; }
.waitlist .field { height: 48px; border-color: var(--ink); padding: 0 14px; font-size: 14px; }
.waitlist .btn { flex-shrink: 0; height: 48px; }
.waitlist__note { font-size: 13px; color: var(--charcoal); margin-top: 10px; }

/* The product page's own waitlist, where the add-to-cart form would be. */
.pdp__waitlist { margin-top: 20px; }
.pdp__waitlist-note { font-size: 13px; line-height: 1.5; color: var(--charcoal); }
.pdp__waitlist .waitlist { margin-top: 12px; }

@media (min-width: 1024px) {
  .waitlist { margin-top: 24px; }
  .waitlist .field { height: 44px; }
  .waitlist .btn { height: 44px; }
  .pdp__waitlist .waitlist { margin-top: 12px; }
}