/* 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; }

.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.5;
  transition: opacity 0.3s ease, color 0.3s ease;
}
.cp-currency__opt:hover { opacity: 1; }
.cp-currency__opt.is-active { opacity: 1; color: var(--champagne, #b79a60); }
.cp-currency > span[aria-hidden] { opacity: 0.4; color: inherit; }

@media (max-width: 900px) { .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 26px; }
.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(--champagne-dim, #b79a60);
}
.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 {
  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(--champagne-dim, #b79a60);
}
.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). */
  .nav .nav__primary { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding-top: 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; gap: 16px; grid-column: 3; grid-row: 1; justify-self: end; align-self: center; transform: none; }
  /* EN/SR toggle sits with the icons (Search · Cart · EN/SR) */
  .nav__mobile-actions .nav__lang--m { display: inline-flex; gap: 4px; font-size: 9px; letter-spacing: 0.14em; }
}
@media (max-width: 400px) {
  .nav__mobile-actions { gap: 12px; }
  .nav__mobile-actions .nav__lang--m { letter-spacing: 0.1em; }
}

/* 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; }
.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; }
}