/* CosmoPaw — currency switcher, injected by /js/cosmopaw.js into the nav top bar.
   Styled to sit beside the EN/SR language nav; uses the per-view :root tokens
   with safe fallbacks. Hidden on ≤900px (the top bar is hidden there, like the
   language switcher). */
/* Cart-drawer width — declared site-wide so the per-view drawer rule
   `width: var(--cart-drawer-w)` resolves on desktop/tablet. The views use the var but
   never declare it; without this it computes to `auto` → a narrow, shrink-to-fit panel.
   (Each view still overrides to 100vw at ≤560px; `max-width:100vw` caps it otherwise.) */
:root { --cart-drawer-w: 420px; }

/* ── Desktop-only line breaks — hidden on mobile so text reflows naturally ───── */
@media (max-width: 900px) { br.d-br { display: none; } }
/* ── Mobile-only line breaks — hidden on desktop ──────────────────────────────── */
@media (min-width: 901px) { br.m-br { display: none; } }

/* ── Text wrapping: prevent orphaned words on headings and slogan text ─────────
   text-wrap:balance  → browser distributes lines evenly (headings, short copy)
   text-wrap:pretty   → avoids single orphan word on last line (paragraphs)
   Gracefully ignored on older browsers. */
h1, h2, h3, h4,
.hero__title, .hero__sub,
.manifesto__text, .manifesto__quote,
.pillar__title, .pillar__body,
.process__title, .process__sub,
.about-manifesto__text, .about-manifesto__pull,
.about-section__body, .about-closing__body,
.section__label, .pillars__label,
.journal__intro, .journal__body,
.materials__title, .materials__sub,
.pdp__desc, .pdp__pull,
.note-card__text, .measure__text, .rule__text,
.page-header__desc, .chapter-sep__intro { text-wrap: pretty; }

h1, h2, h3,
.hero__title, .manifesto__quote,
.pillar__title, .process__title,
.materials__title, .about-manifesto__pull,
.rules__statement, .measure__title, .chapter-sep__name { text-wrap: balance; }

/* ── Mobile header: keep the fixed nav flush to the top edge on iOS ────────────
   The views set viewport-fit=cover, so the status-bar / notch / Dynamic Island
   region is part of the viewport. Three fixes (all no-ops on desktop):

   1) `html, body { overflow-x: clip }` — on iOS Safari, `overflow-x: hidden` on the
      root turns it into a scroll container, detaching `position: fixed` mid-scroll
      (gap appears above the nav). `clip` prevents overflow WITHOUT creating a scroll
      container. cosmopaw.css loads after the per-view <style> → wins the cascade.

   2) `.nav { top: -200px; padding-top: 200px }` (mobile only) — the nav element
      extends 200 px ABOVE the viewport. Its cream background fills that buffer, so no
      gap can appear regardless of iOS elastic-scroll bounce, URL-bar
      show/hide, safe-area rendering, or the notch/Dynamic Island inset. The equal
      padding-top cancels the offset so the first child (.nav__primary) starts exactly
      at viewport top (y = 0), unchanged visually.

   3) `padding-top: calc(env(safe-area-inset-top) + 6px)` on `.nav__primary` — the
      inner content row clears the notch / status-bar. env() = 0 on non-notch devices. */
html, body { overflow-x: clip; }

/* Nav scrolled state — fully opaque cream, no frosted-glass bleed-through.
   Per-view files use rgba(0.92) + backdrop-filter which makes the nav look
   semi-transparent. cosmopaw.css loads last → overrides site-wide. */
.nav--scrolled {
  background: var(--warm-white, #FAF6EE);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.cp-currency {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-right: 16px;
  font-family: var(--f-sans, 'Inter', -apple-system, sans-serif);
  font-size: 11px;
  letter-spacing: 0.12em;
}
.cp-currency__opt {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
  text-transform: uppercase;
  /* Inherit the nav's colour (ivory over the dark hero, ink when scrolled), like
     the language switcher — a fixed dark colour was invisible over the hero. */
  color: inherit;
  opacity: 0.7;
  transition: opacity 0.3s ease, color 0.3s ease;
}
.cp-currency__opt:hover { opacity: 1; }
/* Selected state carries a non-colour cue (underline) so it is distinguishable from
   :hover and does not rely on the champagne hue alone. */
.cp-currency__opt.is-active { opacity: 1; color: var(--champagne, #b79a60); text-decoration: underline; text-underline-offset: 3px; }
.cp-currency > span[aria-hidden] { opacity: 0.4; color: inherit; }

/* Nav language toggle — the active option gets an underline so "selected" reads
   differently from ":hover" (whose per-view CSS only shifts opacity/colour). Scoped
   here in the site-wide sheet because the .nav__lang link styles live in per-view CSS. */
.nav__lang a.is-active { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 900px) { .cp-currency { display: none; } }
/* Home page desktop: hide currency switcher from the top bar */
@media (min-width: 901px) { .nav--home .cp-currency { display: none; } }

/* Bilingual EN/SR toggle — site-wide. Pairs with the lang module in
   /js/cosmopaw.js (flips html[data-lang] + persists cp_lang) and the per-element
   <span data-lang-block="en|sr"> markup. Loaded on every page, so individual views
   no longer need their own inline copy of this rule.

   We hide the INACTIVE language with !important so it beats any view's own
   display rule on the wrapping span (e.g. `.hero__cta span{display:inline-block}`
   or `.hero__headline .line span{display:block}`, which otherwise out-specify a
   plain `[data-lang-block]` selector and leak the other language). The active
   language keeps its authored display — no `revert` needed. `:not([data-lang=sr])`
   covers the default/EN state even before the head script sets data-lang. */
html:not([data-lang="sr"]) [data-lang-block="sr"] { display: none !important; }
html[data-lang="sr"] [data-lang-block="en"] { display: none !important; }

/* ── Inventory: size picker + out-of-stock ──────────────────────────────────
   Site-wide so the garment product pages don't each carry their own copy. The
   whole selector targets the [data-size-picker] container (present on every
   garment PDP); /js/cosmopaw.js injects an editorial selector inside it from
   /api/catalog/availability — a "Size — [chosen]" label row, the pills, and a
   quiet stock note. Pills use the dedicated .cp-size class (deliberately NOT the
   per-view .pdp__size copy paragraph, which they used to collide with). Tokens
   come from each view's inline :root; fallbacks here match the storefront palette. */
[data-size-picker] { margin: 0 0 12px; }
/* "Check size measurements" accordion sits right under the size picker — tighten
   the gap to the pills and bold the summary so it reads clearly (overrides the
   per-view inline .pdp__measure; loaded last). Applies to all product pages. */
.pdp__measure { margin-top: -8px; padding-top: 2px; border-top: none; margin-bottom: 26px; }
.pdp__measure summary { font-weight: 600; }
.cp-sizes__head { display: flex; align-items: baseline; gap: 12px; margin: 0 0 13px; }
.cp-sizes__label {
  font-family: var(--f-sans, 'Inter', sans-serif);
  font-size: 10px; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--charcoal, #3A352E);
}
.cp-sizes__chosen {
  font-family: var(--f-serif, 'Playfair Display', serif); font-style: italic;
  font-size: 15px; line-height: 1; color: var(--ink, #13110f); min-height: 1em;
}
.cp-sizes__row { display: flex; flex-wrap: wrap; gap: 8px; }
.cp-size {
  position: relative;   /* anchor for the per-size measurements tooltip */
  min-width: 50px; padding: 11px 15px;
  font-family: var(--f-sans, 'Inter', sans-serif);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink, #13110f); background: transparent;
  border: 1px solid var(--beige, #d8cfc2); border-radius: 2px;
  cursor: pointer;
  transition: border-color 0.4s ease, background 0.4s ease, color 0.4s ease;
}
.cp-size:hover:not(:disabled) { border-color: var(--champagne, #b79a60); }
.cp-size:focus-visible {
  outline: none; border-color: var(--champagne, #b79a60);
  box-shadow: 0 0 0 2px rgba(191, 169, 132, 0.35);
}
.cp-size.is-active {
  border-color: var(--ink, #13110f);
  background: var(--ink, #13110f);
  color: var(--ivory, #f7f4ee);
}
.cp-size:disabled { cursor: not-allowed; opacity: 0.45; }     /* pending stock */
.cp-size.is-soldout {                                          /* sold out: muted + struck through */
  color: var(--ink-soft, #b0a99c);
  border-color: var(--beige, #e7e0d5);
  text-decoration: line-through;
  opacity: 0.7;
}
.cp-sizes__note {
  min-height: 1.1em; margin: 13px 0 0;
  font-family: var(--f-sans, 'Inter', sans-serif);
  font-size: 11px; letter-spacing: 0.06em;
  color: var(--charcoal, #3A352E);
}
/* Per-size measurements note — a bilingual tooltip on hover/keyboard-focus of a pill
   that has one (each piece's L can mean different measurements). On touch there is no
   hover, so selecting the size also echoes the note into .cp-sizes__note (see JS). */
.cp-size.has-note { cursor: help; }
.cp-size__tip {
  position: absolute;
  bottom: calc(100% + 9px); left: 50%;
  transform: translateX(-50%) translateY(4px);
  z-index: 30;
  width: max-content; min-width: 96px; max-width: 220px;
  padding: 8px 11px;
  background: var(--ink, #13110f); color: var(--ivory, #f7f4ee);
  font-family: var(--f-sans, 'Inter', sans-serif);
  font-size: 11px; letter-spacing: 0.03em; line-height: 1.5;
  text-transform: none;   /* pills are uppercase; the note reads sentence-case */
  border-radius: 3px; white-space: normal; text-align: center;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.cp-size__tip::after {   /* pointer */
  content: ''; position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--ink, #13110f);
}
.cp-size:hover .cp-size__tip,
.cp-size:focus-visible .cp-size__tip {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
/* Touch devices (phones/tablets) have no hover, so the floating tooltip only ever
   flashed on tap and could overflow the viewport ("ispada iz frame-a"). Hide it there
   — the measurements still show below the pills in .cp-sizes__note on tap (see JS). */
@media (hover: none) {
  .cp-size__tip { display: none !important; }
}
.pdp__cta.is-soldout, .pdp__cta:disabled,
.product-card__atb.is-soldout, .product-card__atb:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* ============================================================
   FULL-SCREEN MENU — shared site-wide (markup: <x-mobile-menu> via <x-footer>,
   opened by the inline #burger in each page's nav; behaviour in cosmopaw.js).
   Uses the per-page :root design tokens.
   ============================================================ */
.menu {
  position: fixed;
  inset: 0;
  background: rgba(19, 17, 15, 0.90);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  color: var(--ivory);
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  filter: blur(6px);
  transform: scale(1.015);
  transition: opacity 420ms var(--ease), visibility 0s linear 420ms, filter 420ms var(--ease), transform 420ms var(--ease);
  display: flex;
  flex-direction: column;
}
body.menu-open .menu {
  opacity: 1;
  visibility: visible;
  filter: blur(0px);
  transform: scale(1);
  transition: opacity 380ms var(--ease), visibility 0s, filter 380ms var(--ease), transform 380ms var(--ease);
}
.menu__header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(14px, 2.5vh, 42px) var(--gutter-d);
  position: relative;
}
@media (max-width: 1024px) { .menu__header { padding-left: var(--gutter-t); padding-right: var(--gutter-t); } }
@media (max-width: 768px)  { .menu__header { padding: 22px var(--gutter-m); } }
.menu__mark { display: flex; align-items: center; }
.menu__logo {
  height: 64px;
  width: auto;
  display: block;
  transition: height 650ms var(--ease-out);
}
body.menu-open .menu__logo { height: clamp(84px, 10vw, 124px); }
.menu__close {
  position: absolute;
  right: var(--gutter-d);
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--f-sans);
  font-size: 10.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(245, 241, 234, 0.50);
  transition: color var(--dur-s) var(--ease);
}
@media (max-width: 1024px) { .menu__close { right: var(--gutter-t); } }
@media (max-width: 768px)  { .menu__close { right: var(--gutter-m); } }
.menu__close svg { flex-shrink: 0; }
.menu__close:hover { color: var(--ivory); }
.menu__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.menu__nav { overflow-y: visible; }
.menu__nav {
  display: flex;
  flex-direction: column;
  gap: clamp(6px, calc((100vh - 280px) / 28), 18px);
  padding: clamp(16px, 2.5vh, 36px) var(--gutter-d) clamp(20px, 3vh, 44px);
  overflow-y: auto;
}
@media (max-width: 1024px) { .menu__nav { padding-left: var(--gutter-t); padding-right: var(--gutter-t); } }
@media (max-width: 768px)  { .menu__nav { padding-left: var(--gutter-m); padding-right: var(--gutter-m); } }
.menu__nav a {
  font-family: var(--f-serif);
  font-weight: 300;
  font-size: clamp(14px, calc((100vh - 280px) / 12), 42px);
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--ivory);
  display: flex;
  align-items: baseline;
  gap: 22px;
  width: max-content;
  max-width: 100%;
  position: relative;
  transition: color var(--dur-m) var(--ease);
}
.menu__nav a em { font-style: italic; color: var(--champagne); }
.menu__nav a .menu__nav-num {
  font-family: var(--f-sans);
  font-weight: 400;
  font-style: normal;
  font-size: 10.5px;
  letter-spacing: 0.28em;
  color: rgba(191, 169, 132, 0.55);
  align-self: center;
  position: relative;
  top: -0.1em;
}
.menu__nav a:hover { color: var(--champagne); }
.menu__aside { display: none; }
.menu__aside-quote {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.45;
  color: rgba(245, 241, 234, 0.50);
  max-width: 24ch;
}
.menu__aside-quote::before {
  content: "";
  display: block;
  width: 36px;
  height: 1px;
  background: var(--champagne);
  margin-bottom: 18px;
}
.menu__aside-meta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: var(--f-sans);
  font-size: 10.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(245, 241, 234, 0.35);
}
.menu__aside-meta a { transition: color var(--dur-s) var(--ease); }
.menu__aside-meta a:hover { color: var(--champagne); }

/* Utility row inside the burger menu — visible on all screen sizes */
.menu__utility {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 24px;
  padding: clamp(10px, 1.6vh, 22px) var(--gutter-d) clamp(14px, 2.2vh, 36px);
  margin-top: clamp(6px, 1vh, 14px);
  border-top: 1px solid rgba(245, 241, 234, 0.08);
}
@media (max-width: 900px) {
  .menu__utility { padding-left: var(--gutter-m); padding-right: var(--gutter-m); }
}
/* Mobile nav bar: burger left · logo centre · search + bag right. The actions
   live inside .nav so the icons inherit its colour (light over the hero, ink when
   scrolled). Search/bag were removed from the burger menu (they're on the bar). */
.nav__mobile-actions { display: none; }
.nav__icon--cart { position: relative; }
@media (max-width: 900px) {
  /* 3-column grid: burger (left) · logo (centre) · actions (right). Explicit
     placement is robust regardless of source order or the hidden nav links. */
  /* The .nav prefix + order:0 raise specificity above the home page's special
     "centered-logo" block (.nav__mark{order:-1}, justify-content) so all three sit
     on ONE grid row, vertically centred. Logo kept moderate so it doesn't tower
     over the small icons (a big stacked globe+wordmark can't sit inline otherwise). */
  /* Equal 1fr side columns keep the logo EXACTLY centred in the viewport regardless
     of the burger / icon widths; align-items + align-self center put the burger,
     logo and the search/cart/lang icons on one vertically-centred line.
     grid-row:1 on all three is essential: the logo (col 2) precedes the burger
     (col 1) in source order, so grid's sparse auto-placement would otherwise wrap
     the burger + actions onto a SECOND row (sitting below the logo). Pinning every
     item to row 1 forces the single shared line. The logo's small translateY then
     fine-tunes its visible globe mark onto the icons' centre (logo.webp carries
     more empty space below the mark than above). */
  /* TWO-ROW mobile bar so ALL items stay AND the logo is always centred: row 1 =
     burger (left) + logo (dead-centre); row 2 = every action (Search · Cart ·
     RSD/EUR/USD · EN/SR) centred under it. All four groups won't fit on one row
     beside a centred logo on a phone, so they wrap to their own row. minmax(0,1fr)
     keeps the row-1 side columns exactly equal → the logo never shifts off-centre. */
  .nav .nav__primary { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; column-gap: 8px; row-gap: 10px; padding-top: calc(env(safe-area-inset-top, 0px) + 6px); padding-bottom: 12px; }
  .nav .nav__primary .nav__burger { grid-column: 1; grid-row: 1; justify-self: start; align-self: center; margin: 0; order: 0; transform: none; }
  .nav .nav__primary .nav__mark { grid-column: 2; grid-row: 1; justify-self: center; align-self: center; margin: 0; order: 0; }
  .nav .nav__primary .nav__mark .nav__logo { display: block; height: 76px; transform: translateY(2px); }
  .nav .nav__mobile-actions { display: flex; align-items: center; justify-content: center; gap: 16px; grid-column: 1 / -1; grid-row: 2; justify-self: stretch; align-self: center; transform: none; }
  /* Row 2: Search · Cart · Currency · EN/SR, all centred under the logo. */
  .nav__mobile-actions .nav__lang--m { display: inline-flex; align-items: center; gap: 6px; font-size: 9px; letter-spacing: 0.14em; }
  .nav__mobile-actions .cp-currency--m { display: inline-flex; align-items: center; gap: 6px; font-size: 9px; letter-spacing: 0.14em; }
  /* ≥24px tap targets on the small mobile switchers — transparent padding grows the
     hit area (WCAG 2.5.8) while the glyph size stays discreet. */
  .nav__mobile-actions .cp-currency--m .cp-currency__opt { font-size: 9px; letter-spacing: inherit; padding: 8px 4px; min-height: 24px; display: inline-flex; align-items: center; }
  .nav__mobile-actions .nav__lang--m a { padding: 8px 4px; min-height: 24px; display: inline-flex; align-items: center; }
  /* Home: keep the original ONE-row bar (it has no currency switcher, so it fits) —
     leave it exactly as it was; only the other pages needed the two-row wrap. */
  .nav--home .nav__primary { grid-template-rows: auto; }
  .nav--home .nav__mobile-actions { grid-column: 3; grid-row: 1; justify-self: end; justify-content: flex-start; }
  /* Home mobile: transparent nav same as desktop — no background override.
     backdrop-filter:none prevents blurring a transparent nav. */
  .nav--home { -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (max-width: 400px) {
  .nav__mobile-actions { gap: 12px; }
  .nav__mobile-actions .nav__lang--m,
  .nav__mobile-actions .cp-currency--m { letter-spacing: 0.08em; }
}

/* Search panel — dark glass to match the full-screen hamburger menu (was light
   ivory). cosmopaw.css loads last, so these override the inline per-view rules
   site-wide without touching the 28 views. */
#search-panel {
  background: rgba(19, 17, 15, 0.95);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(245, 241, 234, 0.12);
}
#search-panel .search-inner svg { stroke: var(--champagne); }
#search-panel #search-input { color: var(--ivory); }
#search-panel #search-input::placeholder { color: var(--ivory); opacity: 0.5; }
#search-panel #search-close { color: var(--ivory); opacity: 0.7; border-color: rgba(245, 241, 234, 0.28); }
#search-panel #search-close:hover { opacity: 1; }
#search-panel .search-group-label { color: var(--ivory); opacity: 0.5; }
#search-panel .search-item { color: var(--ivory); }
#search-panel .search-item:hover,
#search-panel .search-item.is-focused { background: rgba(245, 241, 234, 0.09); }
#search-panel .search-item__thumb { background: rgba(245, 241, 234, 0.08); }
#search-panel .search-item__type { color: var(--ivory); opacity: 0.5; }
#search-panel .search-empty { color: var(--ivory); opacity: 0.7; }
.menu__util-switches { display: flex; align-items: center; gap: 24px; }
.menu__util-switch { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-sans); font-size: 9px; letter-spacing: 0.28em; text-transform: uppercase; }
.menu__util-switch > span { opacity: 0.35; color: #f5f0e6; -webkit-text-fill-color: #f5f0e6; }
.menu__util-switch button {
  -webkit-appearance: none; appearance: none;
  background: none; cursor: pointer; border: none; padding: 0;
  font-family: var(--f-sans); font-size: 9px; letter-spacing: 0.28em; text-transform: uppercase;
  color: rgba(245, 241, 234, 0.55); -webkit-text-fill-color: rgba(245, 241, 234, 0.55);
  transition: color var(--dur-s) var(--ease);
}
.menu__util-switch button:hover { color: #f5f0e6; -webkit-text-fill-color: #f5f0e6; }
.menu__util-switch button.is-active { color: #f5f0e6; -webkit-text-fill-color: #f5f0e6; }
@media (min-width: 901px) { .menu__util-switch[aria-label="Language"] { display: none; } }
@media (min-width: 901px) { .nav__mobile-actions .nav__icon,
  .nav__mobile-actions .nav__lang--m,
  .nav__mobile-actions .cp-currency--m { display: none; } }
/* On desktop the top bar already carries EN/SR, so the mobile-actions copy is a
   duplicate — it only showed in the scrolled/collapsed nav. Hide it ≥901px; the
   mobile bar (≤900px, where the top bar is gone) still shows it. */



.menu__util-links {
  display: flex; flex-direction: row; align-items: center; gap: 0; order: -1;
  font-family: var(--f-sans); font-size: 9px; letter-spacing: 0.28em; text-transform: uppercase;
  color: rgba(245, 241, 234, 0.55);
}
.menu__util-links a { color: inherit; transition: color var(--dur-s) var(--ease); }
.menu__util-links a:hover { color: var(--champagne); }
.menu__util-sep { margin: 0 12px; opacity: 0.35; }

body.menu-open .menu__nav a { animation: menuIn 700ms var(--ease-out) both; }
body.menu-open .menu__nav a:nth-child(1) { animation-delay:  80ms; }
body.menu-open .menu__nav a:nth-child(2) { animation-delay: 130ms; }
body.menu-open .menu__nav a:nth-child(3) { animation-delay: 180ms; }
body.menu-open .menu__nav a:nth-child(4) { animation-delay: 230ms; }
body.menu-open .menu__nav a:nth-child(5) { animation-delay: 280ms; }
body.menu-open .menu__nav a:nth-child(6) { animation-delay: 330ms; }
body.menu-open .menu__nav a:nth-child(7) { animation-delay: 380ms; }
body.menu-open .menu__nav a:nth-child(8) { animation-delay: 430ms; }
@keyframes menuIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  body.menu-open .menu__nav a { animation: none; }
}

/* ── Footer legal row — full-width centred bottom bar ─────────────────────────
   The row was moved out of the footer's right column (components/footer.blade.php)
   into its own full-width row under .site-footer__inner, so it centres across the
   whole footer instead of sitting right-aligned. Loaded last, this overrides the
   per-view inline footer CSS. `white-space: normal` lets it wrap centred on narrow
   widths (no horizontal overflow); on wide desktops it fits on a single line. */
.site-footer__legal {
  text-align: center;
  white-space: normal;
  letter-spacing: 0.1em;
  margin-top: clamp(28px, 3vw, 44px);
}

/* ── Product PDP gallery — stop it overflowing the page on mobile ──────────────
   The .pdp__hero is a 2-col grid that collapses to one 1fr column ≤900px, but a
   grid track's auto-minimum is its content's min-content — so the column expanded
   to the gallery's widest image (480–690px) and pushed the page past the viewport
   (content clipped by html{overflow-x:hidden}). min-width:0 lets the track shrink
   to the viewport so the gallery (overflow-x:auto) scrolls within it instead.
   Site-wide so all per-view product pages are covered in one place. */
.pdp__media, .pdp__gallery { min-width: 0; }

/* ── Footer credit (below the logo) — © line + "Designed & Developed by" ──────
   Site-wide override (the footer CSS is inline per-view). The logo + credit stack
   in a left column; centres on mobile where the footer columns stack. */
.site-footer__left { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.site-footer__credit {
  /* Pull up under the wordmark — logo.webp carries a tall transparent frame below
     the mark, which otherwise leaves a big gap above the credit. Scales with the
     logo (which is clamp(78–124px)). */
  margin: clamp(-14px, -0.9vw, -8px) 0 0;
  font-family: var(--f-sans, 'Inter', sans-serif);
  font-size: 9.5px; line-height: 1.85; letter-spacing: 0.16em;
  text-transform: uppercase; color: rgba(245, 240, 232, 0.42);
}
.site-footer__credit a {
  color: rgba(245, 240, 232, 0.62);
  border-bottom: 1px solid transparent;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.site-footer__credit a:hover { color: var(--champagne, #b79a60); border-bottom-color: var(--champagne, #b79a60); }
@media (max-width: 760px) { .site-footer__left { align-items: center; text-align: center; } }

/* ── Footer contact line — email + city wrap on small screens ─────────────── */
@media (max-width: 560px) {
  .site-footer__contact { text-align: center; }
  .site-footer__contact .site-footer__sep { display: none; }
  .site-footer__location { display: block; }
}

/* ── Footer top — centred brand quote + tagline (site-wide) ───────────────────
   The main slogan moved out of the right column into a prominent centred band at
   the footer top (per the brand spec). Base footer CSS is inline per-view; this
   override styles the new elements. Footer ground is dark → light text. */
.site-footer__top {
  text-align: center;
  padding-bottom: clamp(28px, 3vw, 44px);
  margin-bottom: clamp(28px, 3vw, 44px);
  border-bottom: 1px solid rgba(245, 240, 232, 0.12);
}
.site-footer__quote {
  font-family: var(--f-serif, 'Playfair Display', Georgia, serif);
  font-style: italic; font-weight: 400;
  font-size: clamp(20px, 2.6vw, 30px); line-height: 1.35;
  color: rgba(245, 240, 232, 0.92);
  margin: 0 auto; max-width: 30ch;
}
.site-footer__tagline {
  font-family: var(--f-sans, 'Inter', sans-serif);
  font-size: 10.5px; letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(245, 240, 232, 0.5);
  margin: 16px 0 0;
}

/* Footer newsletter sign-up (site-wide; footer CSS is inline per view). Dark ground. */
.site-footer__subscribe { margin: 0 0 22px; max-width: 340px; }
.site-footer__subscribe-label {
  display: block; margin: 0 0 10px;
  font-family: var(--f-sans, 'Inter', sans-serif);
  font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(245, 240, 232, 0.55);
}
.site-footer__subscribe-row { display: flex; gap: 8px; }
.site-footer__subscribe-input {
  flex: 1 1 auto; min-width: 0; padding: 10px 12px;
  background: transparent; color: rgba(245, 240, 232, 0.92);
  border: 1px solid rgba(245, 240, 232, 0.22); border-radius: 2px;
  font-family: var(--f-sans, 'Inter', sans-serif); font-size: 13px; letter-spacing: 0.02em;
}
.site-footer__subscribe-input::placeholder { color: rgba(245, 240, 232, 0.35); }
.site-footer__subscribe-input:focus { outline: none; border-color: var(--champagne, #b79a60); }
.site-footer__subscribe-btn {
  flex: 0 0 auto; padding: 10px 16px; cursor: pointer;
  background: var(--champagne, #b79a60); color: #1a1714;
  border: 1px solid var(--champagne, #b79a60); border-radius: 2px;
  font-family: var(--f-sans, 'Inter', sans-serif);
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  transition: opacity 0.3s ease;
}
.site-footer__subscribe-btn:hover { opacity: 0.85; }
.site-footer__subscribe-btn:disabled { opacity: 0.5; cursor: default; }
.site-footer__subscribe-msg {
  min-height: 1em; margin: 10px 0 0;
  font-family: var(--f-sans, 'Inter', sans-serif); font-size: 11px; letter-spacing: 0.04em;
  color: var(--champagne, #b79a60);
}
.site-footer__subscribe-msg:empty { display: none; }

/* ── Free-shipping hint in the cart drawer ────────────────────────────────────
   Site-wide (the cart-drawer CSS is inline per-view). Understated line above the
   checkout button; turns champagne once the subtotal clears the threshold.
   Populated by cosmopaw.js (renderFreeship). */
.cart-freeship {
  margin: 0 0 14px;
  text-align: center;
  font-family: var(--f-sans, 'Inter', sans-serif);
  font-size: 10.5px; line-height: 1.55; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--charcoal, #6b6355);
}
.cart-freeship:empty { display: none; }
.cart-freeship.is-unlocked { color: var(--champagne, #b79a60); }

/* ── Section eyebrow labels — darker, more legible on the light (ivory) sections ──
   The small uppercase "— MANIFESTO —"-style labels used --champagne-dim (a muted
   gold) that read washed-out on ivory. Darken the TEXT to --charcoal site-wide.
   Loaded last → overrides each view's inline colour. ONLY the light-background
   eyebrows are listed (they used --champagne-dim); the dark-band eyebrows
   (.hero__eyebrow, .atelier-band__label, .process__video-caption__label, and the
   dark legal/journal .page-header__label) keep their bright --champagne so they stay
   legible on dark. The flanking dash rules keep their champagne accent. */
.about-closing__eyebrow,
.about-hero__label,
.about-manifesto__eyebrow,
.about-principle__label,
.about-section__label,
.apost__eyebrow,
.archive-record__label,
.bespoke-form__label,
.ce-soon__label,
.chapter-sep__label,
.collection-intro__label,
.composition__label,
.contact-header__label,
.contact-option__category,
.filter-row__label,
.form-editorial__label,
.hero__index-m__label,
.latest__status,
.manifesto__label,
.note-card__label,
.pdp__eyebrow,
.pdp-section__label,
.pillars__label,
.rules__label,
.section__label,
.sort-control__label { color: var(--charcoal, #3A352E) !important; }

/* ── Section spacing ~20% reduction site-wide ─────────────────────────────────
   All per-view padding values × 0.8. Loaded last → overrides per-view <style>.
   Page-header padding-top is intentionally untouched (nav clearance). */

/* ── index.blade.php ── */
.section         { padding: clamp(77px, 9.6vw, 160px) 0; }
.latest          { padding-top: clamp(45px, 4.8vw, 77px); padding-bottom: clamp(45px, 4.8vw, 77px); }
.materials       { padding-top: clamp(45px, 4.8vw, 77px); }
.journal         { padding-top: clamp(45px, 4.8vw, 77px); padding-bottom: clamp(45px, 4.8vw, 77px); }
.process         { padding-top: clamp(45px, 4.8vw, 77px); }
.manifesto       { padding: clamp(45px, 5.6vw, 88px) 0 clamp(45px, 4.8vw, 77px); }
.pillars         { padding: clamp(45px, 4.8vw, 77px) 0; }
.quote           { padding: clamp(38px, 4.8vw, 70px) 0; }
@media (max-width: 768px) {
  .manifesto     { padding-top: clamp(32px, 7.2vw, 51px); }
}

/* ── shop.blade.php ── */
.collection-intro  { padding: clamp(42px, 5.6vw, 70px) 0; }
.shop-content      { padding-top: clamp(29px, 4vw, 48px); padding-bottom: clamp(77px, 9.6vw, 128px); }
.to-top            { padding-top: clamp(45px, 6.4vw, 88px); }

/* ── about.blade.php ── */
.about-manifesto   { padding: clamp(77px, 9.6vw, 134px) 0; }
.about-section     { padding: clamp(64px, 8vw, 115px) 0; }
.about-principle   { padding: clamp(90px, 11.2vw, 160px) 0; }
.about-companions  { padding: clamp(77px, 9.6vw, 134px) 0; }
.about-closing     { padding: clamp(90px, 11.2vw, 160px) 0; }

/* ── matching.blade.php ── */
.ce-soon           { padding-top: clamp(70px, 9.6vw, 141px); padding-bottom: clamp(70px, 9.6vw, 141px); }
.composition       { padding: clamp(51px, 7.2vw, 96px) 0; }
.sets              { padding-top: clamp(58px, 8vw, 102px); padding-bottom: clamp(77px, 10.4vw, 134px); }

/* ── journal.blade.php ── */
.journal-section       { padding-top: clamp(45px, 5.6vw, 77px); padding-bottom: clamp(77px, 9.6vw, 128px); }
.article-feature-wrap  { padding-top: clamp(38px, 4.8vw, 67px); }

/* ── archive.blade.php ── */
.archive-section   { padding-top: clamp(26px, 3.2vw, 45px); padding-bottom: clamp(77px, 9.6vw, 128px); }

/* ── contact.blade.php ── */
.contact-form-section  { padding: clamp(64px, 8vw, 112px) 0 clamp(77px, 9.6vw, 128px); }

/* ── materials.blade.php ── */
.materials-section { padding: clamp(32px, 4vw, 58px) 0 clamp(77px, 9.6vw, 128px); }

/* ── Process label: gold on dark video background ───────────────────────────── */
.process .section__label { color: var(--champagne, #b79a60) !important; }

/* ── Eyebrow labels: centered, no side dashes (pillars + process) ───────────── */
.pillars__label {
  justify-content: center;
  width: 100%;
}
.pillars__label::before,
.pillars__label::after { display: none; }

.process .section__label,
.section.materials .section__label {
  display: flex;
  justify-content: center;
  width: 100%;
}
.process .section__label::before,
.section.materials .section__label::before { display: none; content: none; }

/* ── Pillars: long-dash prefix, no gold underline, tighter desktop spacing ─── */
.pillar__numeral::before   { content: "— "; }
.pillar__numeral           { margin-bottom: 14px; }
.pillar__title::before     { display: none; }
@media (min-width: 901px) {
  .pillar                  { padding-top: clamp(20px, 2vw, 28px); }
}
@media (max-width: 900px) {
  .pillar                  { padding-top: 20px; }
}