/* COPALI. Layout: editorial, asymmetric, sharp corners; one dark color-block (MAMA).
   Tokens come from the existing brand (burgundy #69051d, pink #ffb6c9, Fraunces + Hanken Grotesk)
   and from the photographs (plaster walls, steel windows, pink drawstrings). Light theme by design. */

:root {
  --paper: #efeeeb;
  --paper-2: #e3e1dd;
  --ink: #141213;
  --ink-2: #4b4547;
  --line: #cbc7c2;
  --line-strong: #857e7a;
  --accent: #69051d;
  --accent-ink: #fff3f6;
  --pink: #ffb6c9;
  --night: #1c191a;
  --night-ink: #ede7e4;
  --night-2: #a99f9d;
  --danger: #a1122f;

  --f-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --f-ui: "Hanken Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;

  --t-xs: 0.75rem;
  --t-sm: 0.875rem;
  --t-md: 1rem;
  --t-lg: 1.25rem;
  --t-xl: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
  --t-2xl: clamp(2.6rem, 1.4rem + 5vw, 6rem);
  --t-mega: clamp(5.25rem, 24vw, 30rem);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --gutter: max(16px, env(safe-area-inset-left, 0px), 4vw);
  --gutter-r: max(16px, env(safe-area-inset-right, 0px), 4vw);
  --nav-h: 64px;
  --z-nav: 40;
  --z-menu: 35;
  --z-drawer: 60;
  --z-veil: 70;
  --z-cursor: 80;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
/* scroll-padding: anchors (/#kolekcija), scrollIntoView and keyboard focus stop below the fixed nav. */
/* scrollbar-gutter: the open drawer hides the page's scrollbar (overflow: hidden); a kept gutter
   stops the page behind it from widening and shifting. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + 12px); scrollbar-gutter: stable; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--t-md)/1.55 var(--f-ui);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
picture { display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, p, ul, ol, figure, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 400; line-height: 1.02; text-wrap: balance; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--pink); color: var(--ink); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 16px; top: -60px; z-index: 100; background: var(--ink); color: var(--paper); padding: 10px 14px; text-decoration: none; }
.skip:focus { top: 12px; }

/* Media frames: every photo sits in an overflow-hidden frame so reveals can mask it. */
.frame { position: relative; overflow: hidden; background: var(--paper-2); }
.frame img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Buttons ---------- */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 52px; padding: 0 28px;
  border: 1px solid var(--ink); background: transparent; color: var(--ink);
  font: 600 var(--t-xs)/1 var(--f-ui); letter-spacing: 0.16em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: color 0.45s var(--ease-out);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink);
  clip-path: inset(100% 0 0 0); transition: clip-path 0.5s var(--ease-out);
}
@media (hover: hover) {
  .btn:hover { color: var(--paper); }
  .btn:hover::before { clip-path: inset(0 0 0 0); }
  .btn--solid:hover { color: var(--accent-ink); }
}
.btn:active { transform: translateY(1px); }
.btn--solid { background: var(--ink); color: var(--paper); }
.btn--solid::before { background: var(--accent); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.btn__label { position: relative; display: block; overflow: hidden; }
.btn__label > span { display: block; }
.link { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }

/* ---------- Navigation ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-nav);
  height: calc(var(--nav-h) + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) var(--gutter-r) 0 var(--gutter);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  transition: background-color 0.4s var(--ease-out), border-color 0.4s var(--ease-out);
  border-bottom: 1px solid transparent;
}
body[data-page="home"] .nav:not(.is-solid) .nav__brand:not(:focus-visible) { opacity: 0; }
.nav { view-transition-name: site-nav; }
.nav.is-solid { background: color-mix(in srgb, var(--paper) 92%, transparent); border-color: var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
/* The open menu scrolls under the nav on short phones: give the nav its own background then. */
html:has(#menu:not([hidden])) .nav { background: var(--paper); border-color: var(--line); }
.nav__brand { transition: opacity 0.4s var(--ease-out); justify-self: start; font: 400 1.35rem/1 var(--f-display); letter-spacing: 0.32em; text-decoration: none; padding: 8px 0; }
.nav__links { display: flex; gap: 28px; }
.nav__links a, .nav__menu {
  font: 600 var(--t-xs)/1 var(--f-ui); letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none;
  padding: 10px 0; background: none; border: 0; cursor: pointer;
}
.nav__links a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 0.45s var(--ease-out); }
.nav__links a:hover, .nav__links a[aria-current="page"] { background-size: 100% 1px; } /* current page: the hover underline stays */
.nav__end { justify-self: end; display: flex; align-items: center; gap: 18px; }
.nav__order {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; min-width: 44px; padding: 0 2px;
  background: none; border: 0; cursor: pointer;
  font: 600 var(--t-xs)/1 var(--f-ui); letter-spacing: 0.14em; text-transform: uppercase;
}
.nav__thumbs { display: flex; }
.nav__thumbs img { width: 22px; height: 28px; object-fit: cover; margin-left: -8px; outline: 2px solid var(--paper); }
.nav__thumbs img:first-child { margin-left: 0; }
.nav__count {
  display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px;
  background: var(--pink); color: var(--ink); font-variant-numeric: tabular-nums; overflow: hidden; letter-spacing: 0;
}
.nav__count > span { display: block; }
.nav__menu { display: none; min-height: 44px; padding: 0 8px; }

.menu {
  position: fixed; inset: 0; z-index: var(--z-menu); background: var(--paper);
  padding: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + 24px) var(--gutter-r) 32px var(--gutter);
  display: grid; align-content: start; gap: 32px; overflow-y: auto;
}
.menu[hidden] { display: none; }
.menu__list { display: grid; gap: 4px; }
.menu__list a { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); text-decoration: none; font: 400 1.65rem/1.1 var(--f-display); }
.menu__list a[aria-current="page"] { border-bottom-color: var(--ink); }
.menu__list small { font: 500 var(--t-sm)/1 var(--f-ui); color: var(--ink-2); white-space: nowrap; }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: max(660px, 100dvh); overflow: clip; background: var(--paper); isolation: isolate; }
/* Centred by auto margins, not translate: GSAP (the depth tween moves this element) turns a CSS
   translate into a fixed px transform, which stays wrong after a resize, a rotation or late fonts. */
.hero__word {
  position: absolute; left: 0; right: 0; margin-inline: auto; width: max-content; top: calc(var(--nav-h) + 3vh); z-index: 4;
  color: var(--paper); mix-blend-mode: difference;
  font: 300 var(--t-mega)/0.78 var(--f-display); letter-spacing: -0.045em; white-space: nowrap;
  font-variation-settings: "opsz" 144;
}
.hero__word .char { display: inline-block; }
.hero__main { position: absolute; right: 9vw; top: calc(var(--nav-h) + 14vh); width: min(33vw, 34rem); aspect-ratio: 3 / 4; z-index: 2; }
/* The landing photo is landscape: the picture must fill the frame for object-fit to crop it. */
.hero__main picture { display: block; height: 100%; }
.hero__float { position: absolute; left: 6vw; bottom: 10vh; width: min(18vw, 19rem); aspect-ratio: 4 / 5; z-index: 3; }
.hero__copy { position: absolute; left: calc(6vw + min(18vw, 19rem) + 3vw); bottom: 10vh; z-index: 3; display: grid; gap: 22px; width: min(24rem, calc(100vw - 9vw - min(33vw, 34rem) - 6vw - min(18vw, 19rem) - 6vw)); }
.hero__line { font: 300 italic var(--t-xl)/1.1 var(--f-display); padding-bottom: 0.08em; text-wrap: balance; }
.hero__meta { font-size: var(--t-sm); color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* ---------- Statement ---------- */
.statement { padding: clamp(96px, 12vw, 180px) var(--gutter-r) clamp(72px, 10vw, 140px) var(--gutter); }
.statement__text { max-width: 19ch; margin-left: 18vw; font: 300 var(--t-2xl)/1.04 var(--f-display); letter-spacing: -0.02em; text-wrap: balance; }
.statement__text em { font-style: italic; }

/* ---------- Editorial: Comfy Chic ---------- */
.editorial {
  position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 2vw;
  padding: 40px var(--gutter-r) clamp(56px, 7vw, 112px) var(--gutter);
}
.editorial__big { grid-column: 1 / span 6; grid-row: 1 / span 3; aspect-ratio: 3 / 4; }
.editorial__float { grid-column: 6 / span 3; grid-row: 2; aspect-ratio: 4 / 5; margin-top: -6vw; z-index: 2; outline: 12px solid var(--paper); }
.editorial__small { grid-column: 10 / span 3; grid-row: 1; aspect-ratio: 3 / 4; margin-top: 10vw; }
.editorial__copy { grid-column: 9 / span 4; grid-row: 2; align-self: center; display: grid; gap: 28px; }
.editorial__copy h2 { font-size: var(--t-2xl); font-weight: 300; letter-spacing: -0.02em; }
.editorial__copy h2 em { font-style: italic; }
.swatch-list { display: grid; }
.swatch-list a {
  display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 14px;
  padding: 14px 0; border-top: 1px solid var(--line); text-decoration: none;
}
.swatch-list li:last-child a { border-bottom: 1px solid var(--line); }
/* weight 300: the only italic Fraunces the page loads (tools/build.mjs fonts link). */
.swatch-list a:hover .swatch-list__name { font-style: italic; font-weight: 300; }
.swatch { width: 22px; height: 22px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgb(20 18 19 / 0.18); }
.swatch-list__name { font: 400 1.4rem/1 var(--f-display); }
.swatch-list__price { font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
.editorial__size { font-size: var(--t-sm); color: var(--ink-2); }
/* Collection descriptions (the client's text for the model): body size, quiet colour, a readable measure. */
.editorial__desc { margin: 0; max-width: 38ch; font-size: var(--t-md); line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }

/* ---------- Journey (horizontal collection) ---------- */
.journey { position: relative; padding: 0 0 clamp(64px, 8vw, 120px); }
.journey__head { display: flex; justify-content: space-between; align-items: end; gap: 24px; padding: 0 var(--gutter-r) 28px var(--gutter); }
.journey__head h2 { font-size: var(--t-2xl); font-weight: 300; letter-spacing: -0.02em; }
.journey__counter { display: flex; align-items: baseline; font: 300 var(--t-xl)/1 var(--f-display); font-variant-numeric: tabular-nums; }
.journey__num { display: inline-grid; height: 1em; overflow: hidden; }
.journey__num > span { display: block; grid-area: 1 / 1; }
.journey__of { color: var(--ink-2); font-size: 0.55em; margin-left: 0.25em; }
.journey__track {
  display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  padding: 4px var(--gutter-r) 8px var(--gutter); scrollbar-width: thin;
}
.panel { flex: none; width: min(78vw, 26rem); scroll-snap-align: start; display: grid; gap: 16px; align-content: start; }
.panel__media { display: block; aspect-ratio: 3 / 4; }
.panel__meta { display: grid; grid-template-columns: auto 1fr auto; column-gap: 14px; row-gap: 2px; align-items: baseline; }
.panel__idx { font: 500 var(--t-xs)/1 var(--f-ui); letter-spacing: 0.12em; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.panel__name { position: relative; font: 600 0.8125rem/1.35 var(--f-ui); letter-spacing: 0.12em; } /* keeps the sr-only variant inside the scrolling track */
.panel__name a { text-decoration: none; }
.panel__price { font-size: var(--t-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
.panel__detail { grid-column: 2 / -1; font: italic 300 1.2rem/1.15 var(--f-display); color: var(--ink); }

/* Desktop pinned mode (added by JS when motion is allowed). */
.journey.is-pinned { padding-bottom: 0; }
.journey.is-pinned .journey__stage { height: 100dvh; display: grid; grid-template-rows: auto 1fr; grid-template-columns: minmax(0, 1fr); padding-top: calc(var(--nav-h) + 4vh); overflow: clip; }
.journey.is-pinned .journey__track { overflow: visible; scroll-snap-type: none; gap: 5vw; align-items: center; height: 100%; padding: 2vh 37vw 4vh; }
.journey.is-pinned .panel:nth-child(odd) { align-self: start; }
.journey.is-pinned .panel:nth-child(even) { align-self: end; }
.journey.is-pinned .panel { position: relative; isolation: isolate; }
.journey.is-pinned .panel__idx { position: absolute; z-index: -1; top: -0.62em; left: -0.32em; font: 200 clamp(7rem, 12vw, 11rem)/1 var(--f-display); letter-spacing: -0.04em; color: var(--paper-2); }
.journey.is-pinned .panel__meta { grid-template-columns: 1fr auto; }
.journey.is-pinned .panel__detail { grid-column: 1 / -1; }
.journey.is-pinned .panel { width: min(26vw, 40vh); }
.journey.is-pinned .panel { transform-origin: 50% 60%; }

/* ---------- Marquee ---------- */
.marquee { overflow: hidden; padding: clamp(28px, 4vw, 56px) 0; border-block: 1px solid var(--line); }
.marquee__track { display: flex; width: max-content; will-change: transform; }
.marquee__item { display: flex; align-items: center; gap: 0.35em; padding-right: 0.35em; font: 300 clamp(3.5rem, 11vw, 10rem)/0.9 var(--f-display); letter-spacing: -0.03em; white-space: nowrap; }
.marquee__cross { color: var(--accent); font-weight: 200; font-size: 0.6em; }
.marquee__item em { font-style: italic; }

/* ---------- MAMA (single dark color block) ---------- */
.mama { position: relative; background: var(--accent); color: var(--accent-ink); padding: clamp(96px, 12vw, 180px) var(--gutter-r) clamp(96px, 12vw, 180px) var(--gutter); overflow: clip; }
.mama__title { font: 300 clamp(3rem, 1rem + 9vw, 11rem)/0.86 var(--f-display); letter-spacing: -0.035em; max-width: 9ch; }
.mama__desc { max-width: 44ch; margin: clamp(28px, 3vw, 44px) 0 0 calc(100% / 12); font: 300 clamp(1.15rem, 1rem + 0.6vw, 1.5rem)/1.5 var(--f-display); color: var(--accent-ink); text-wrap: pretty; }
.mama__pair { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 2vw; align-items: start; margin-top: clamp(48px, 7vw, 110px); }
.mama__item { display: grid; gap: 14px; align-content: start; min-width: 0; text-decoration: none; }
.mama__item--a { grid-column: 2 / span 5; }
.mama__item--b { grid-column: 8 / span 4; margin-top: 16vw; }
.mama__item .frame { aspect-ratio: 3 / 4; background: #4d0315; }
.mama :focus-visible { outline-color: var(--pink); }
.mama__label { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; font-size: var(--t-sm); color: rgb(255 182 201 / 0.85); }
.mama__label b { font: 300 italic 1.6rem/1 var(--f-display); color: var(--accent-ink); }
.mama__facts { display: flex; gap: 40px; margin-top: 48px; padding-left: calc((100% / 12) * 1); font-size: var(--t-sm); color: rgb(255 182 201 / 0.85); }
.mama__facts strong { display: block; font: 300 var(--t-xl)/1.1 var(--f-display); color: var(--accent-ink); }

/* ---------- Shop grid ---------- */
.shop { padding: clamp(96px, 12vw, 180px) var(--gutter-r) clamp(64px, 8vw, 120px) var(--gutter); }
.shop__title { font-size: var(--t-2xl); font-weight: 300; letter-spacing: -0.02em; margin-bottom: clamp(36px, 5vw, 72px); }
/* Category pages (/trenerke/ ...): the same grid as 'Svi komadi', opening under the nav. */
.shop--page { min-height: 70vh; padding-top: calc(var(--nav-h) + clamp(32px, 6vh, 72px)); }
.shop__empty { color: var(--ink-2); }
.shop--page .crumbs { padding-inline: 0; } /* the section already has the gutter (the mobile .crumbs padding is for product pages) */
.shop__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px) 2vw; align-items: start; }
.shop__grid > li:nth-child(1) { grid-column: 1 / span 5; }
.shop__grid > li:nth-child(2) { grid-column: 7 / span 3; margin-top: 12vw; }
.shop__grid > li:nth-child(3) { grid-column: 10 / span 3; }
.shop__grid > li:nth-child(4) { grid-column: 2 / span 3; }
.shop__grid > li:nth-child(5) { grid-column: 6 / span 4; margin-top: -6vw; }
.shop__grid > li:nth-child(6) { grid-column: 10 / span 3; margin-top: 8vw; }
.shop__grid > li:nth-child(7) { grid-column: 4 / span 5; }

.card { perspective: 1000px; }
.card__link { display: grid; gap: 14px; text-decoration: none; }
.card__media { position: relative; aspect-ratio: 3 / 4; transform-style: preserve-3d; }
.card__media .frame { position: absolute; inset: 0; }
.card__b { clip-path: inset(100% 0 0 0); transition: clip-path 0.7s var(--ease-out); }
.card__b img { transform: scale(1.08); transition: transform 1s var(--ease-out); }
.card__link:hover .card__b, .card__link:focus-visible .card__b { clip-path: inset(0 0 0 0); }
.card__link:hover .card__b img, .card__link:focus-visible .card__b img { transform: scale(1); }
.card__meta { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: baseline; }
.card__name { font: 600 0.8125rem/1.35 var(--f-ui); letter-spacing: 0.12em; grid-column: 1; grid-row: 1; }
.card__price { font-size: var(--t-sm); font-variant-numeric: tabular-nums; white-space: nowrap; grid-column: 2; grid-row: 1; }
.card__detail { font: italic 300 1.2rem/1.15 var(--f-display); color: var(--ink); grid-column: 1 / -1; }
.card__cta { font: 600 var(--t-xs)/1 var(--f-ui); letter-spacing: 0.14em; text-transform: uppercase; overflow: hidden; height: 1em; }
.card__cta > span { display: block; translate: 0 105%; transition: translate 0.5s var(--ease-out); }
.card__link:hover .card__cta > span, .card__link:focus-visible .card__cta > span { translate: 0 0; }

/* ---------- How to order ---------- */
.howto {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 2vw; row-gap: 40px;
  padding: clamp(80px, 10vw, 160px) var(--gutter-r) clamp(96px, 12vw, 180px) var(--gutter); border-top: 1px solid var(--line);
}
.howto__title { grid-column: 1 / span 5; font-size: var(--t-2xl); font-weight: 300; letter-spacing: -0.02em; }
.howto__steps { grid-column: 7 / span 6; display: grid; }
.howto__steps li { display: grid; grid-template-columns: 4.5rem 1fr; gap: 4px 20px; padding: 26px 0; border-top: 1px solid var(--line); }
.howto__n { grid-row: span 2; font: 300 3rem/0.9 var(--f-display); color: var(--accent); font-variant-numeric: tabular-nums; }
.howto__steps h3 { font-size: 1.5rem; }
.howto__steps p { color: var(--ink-2); max-width: 44ch; }
.howto__note { grid-column: 7 / span 6; justify-self: start; max-width: 52ch; text-wrap: balance; }

/* ---------- Footer ---------- */
.foot { padding: clamp(64px, 8vw, 120px) var(--gutter-r) calc(24px + env(safe-area-inset-bottom, 0px)) var(--gutter); background: var(--paper); border-top: 1px solid var(--line); overflow: clip; }
.foot__cols { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 2vw; row-gap: 32px; }
.foot__col { display: grid; gap: 10px; align-content: start; }
.foot__col:nth-child(1) { grid-column: 1 / span 5; }
.foot__col:nth-child(2) { grid-column: 7 / span 3; }
.foot__col:nth-child(3) { grid-column: 10 / span 3; }
.foot__col li a { display: inline-block; padding: 6px 0; font-size: var(--t-sm); letter-spacing: 0.06em; }
.foot__label { font: 600 var(--t-xs)/1 var(--f-ui); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
.foot__col a { text-decoration: none; }
.foot__col a:hover { text-decoration: underline; }
.foot__note { color: var(--ink-2); font-size: var(--t-sm); }
.foot__word { margin-top: clamp(48px, 8vw, 120px); font: 300 clamp(4.5rem, 25vw, 32rem)/0.74 var(--f-display); letter-spacing: -0.04em; text-align: center; white-space: nowrap; transform-origin: 50% 100%; }
/* position + z-index: the scrubbed wordmark above is transformed and would otherwise paint over this row. */
.foot__base { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px 24px; margin-top: 28px; font-size: var(--t-xs); color: var(--ink-2); }

/* Studio credit. CueFlow letters: each is followed by its own copy one line below (text-shadow);
   the brand box clips to one line, so lifting a letter by one line shows the copy rolling in.
   Motion path: the letters rise in when the footer appears (.is-in from motion.js), roll on
   hover/focus, and the arrow leaves top-right while its copy comes in from bottom-left. */
.credit { display: inline-flex; align-items: baseline; gap: 0.4em; padding: 10px 0; margin: -10px 0; color: var(--ink-2); text-decoration: none; transition: color 0.3s var(--ease-out); }
.credit:hover, .credit:focus-visible { color: var(--ink); }
.credit:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
/* block, not flex: flex would make each letter its own item and copied text would read 'C u e F l o w'. */
.credit__brand, .credit__arrow { display: block; overflow: hidden; line-height: 1.25; white-space: nowrap; }
.credit__brand { color: var(--ink); font-weight: 600; letter-spacing: 0.04em; }
.credit__brand span, .credit__arrow i { display: inline-block; font-style: normal; transition: transform 0.55s var(--ease-out); }
.credit__brand span { text-shadow: 0 1.25em currentColor; transition-delay: calc(var(--i) * 28ms); }
.credit__arrow i { text-shadow: -1.25em 1.25em currentColor; }
.credit:hover .credit__brand span, .credit:focus-visible .credit__brand span { transform: translateY(-1.25em); }
.credit:hover .credit__arrow i, .credit:focus-visible .credit__arrow i { transform: translate(1.25em, -1.25em); }
.js.motion-ok .credit:not(.is-in) .credit__brand span { transform: translateY(1.25em); }
.js.motion-ok .credit:not(.is-in) .credit__by, .js.motion-ok .credit:not(.is-in) .credit__arrow { opacity: 0; }
.credit__by, .credit__arrow { transition: opacity 0.6s var(--ease-out), color 0.3s var(--ease-out); }
@media (max-width: 767px) {
  .credit { order: 3; flex-basis: 100%; }
}

/* ---------- Founder page: typography only, calm ---------- */
.about {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 2vw; row-gap: clamp(28px, 4vw, 56px);
  align-content: start; min-height: 88vh;
  padding: calc(var(--nav-h) + clamp(56px, 10vh, 120px)) var(--gutter-r) clamp(96px, 12vw, 180px) var(--gutter);
}
.about__label { grid-column: 1 / span 4; display: flex; align-items: center; gap: 12px; font: 600 var(--t-xs)/1 var(--f-ui); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); }
.about__cross { color: var(--accent); font: 200 1.6rem/1 var(--f-display); letter-spacing: 0; }
.about__name { grid-column: 1 / -1; font: 300 clamp(4.5rem, 2rem + 13vw, 15rem)/0.86 var(--f-display); letter-spacing: -0.04em; padding-bottom: 0.06em; }
.about__text { grid-column: 5 / span 7; max-width: 34ch; font: 300 clamp(1.45rem, 1rem + 1.35vw, 2.35rem)/1.38 var(--f-display); letter-spacing: -0.005em; text-wrap: pretty; }
.about__cta { grid-column: 5 / span 7; }

/* ---------- Legal pages (built only when filled) ---------- */
.legal { max-width: 46rem; padding: calc(var(--nav-h) + clamp(48px, 8vh, 96px)) var(--gutter-r) clamp(80px, 10vw, 140px) var(--gutter); display: grid; gap: 32px; }
.legal__title { font: 300 clamp(2.6rem, 1.4rem + 4vw, 4.5rem)/1 var(--f-display); letter-spacing: -0.02em; }
.legal__facts { display: grid; margin: 0; border-top: 1px solid var(--line); }
.legal__facts div { display: grid; grid-template-columns: minmax(8rem, 1fr) 2fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.legal__facts dt { color: var(--ink-2); font-size: var(--t-sm); }
.legal__facts dd { margin: 0; }
.legal__section { display: grid; gap: 12px; }
.legal__section h2 { font: 400 1.5rem/1.15 var(--f-display); }
.legal__section p { max-width: 65ch; color: var(--ink); }

/* ---------- Product detail ---------- */
.pdp { padding: calc(var(--nav-h) + 24px) var(--gutter-r) 0 var(--gutter); }
.crumbs { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: var(--t-sm); color: var(--ink-2); margin-bottom: 24px; }
.crumbs a { text-decoration: none; display: inline-block; padding: 11px 0; margin: -11px 0; }
.crumbs a:hover { text-decoration: underline; }
.pdp__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 4vw; align-items: start; }
.pdp__gallery { display: grid; gap: 2vw; }
.pdp__shot { aspect-ratio: 3 / 4; }
.pdp__shot:nth-child(3n + 2) { width: 72%; margin-left: auto; }
.pdp__count { display: none; }
/* Sticks at --info-top, which product.js moves with the scroll in both directions: a column taller
   than the screen (description, open care list) is read to its last line on the way down and shows
   its top again on the way up. Without the script it sticks under the nav. */
/* transition: none: the reduced-motion rule below gives every element a 0.01 ms transition; on this
   column that would make a --info-top change report the old position for a frame. */
.pdp__info { position: sticky; top: var(--info-top, calc(var(--nav-h) + 24px)); display: grid; gap: 26px; padding-bottom: 40px; transition: none !important; }
.pdp__idx { font: 500 var(--t-xs)/1 var(--f-ui); letter-spacing: 0.14em; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pdp__name { font: 300 clamp(2.4rem, 1.2rem + 3.6vw, 4.6rem)/0.95 var(--f-display); letter-spacing: -0.025em; }
.pdp__variant { font: 300 italic var(--t-xl)/1.1 var(--f-display); margin-top: 6px; }
.pdp__price { font: 400 var(--t-xl)/1 var(--f-display); font-variant-numeric: tabular-nums; }
.siblings { display: grid; gap: 10px; }
.siblings__label, .field-label { font: 600 var(--t-xs)/1 var(--f-ui); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
.siblings ul { display: flex; flex-wrap: wrap; gap: 8px; }
.siblings a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px 0 10px; border: 1px solid var(--line-strong); text-decoration: none; font-size: var(--t-sm); }
.siblings a[aria-current="page"] { border-color: var(--ink); }
.siblings a:hover { border-color: var(--ink); }
.add-form { display: grid; gap: 22px; }
.sizes { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }
.sizes legend { padding: 0; margin-bottom: 10px; }
.sizes__opts { display: flex; flex-wrap: wrap; gap: 8px; }
.size-opt { position: relative; }
.size-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.size-opt span { display: inline-grid; place-items: center; min-width: 64px; min-height: 44px; padding: 0 16px; border: 1px solid var(--line-strong); font-size: var(--t-sm); }
.size-opt input:checked + span { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.size-opt input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }
/* Windows High Contrast drops the background, the only cue for the chosen size: use system colours. */
@media (forced-colors: active) {
  .size-opt input:checked + span { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; }
  .size-opt input:checked:focus-visible + span { outline-color: CanvasText; }
}
/* The error sits on the "Veličina" line, so showing or hiding it never moves the sizes or the order button. */
.sizes { position: relative; }
.size-error { position: absolute; top: 0; right: 0; margin: 0; color: var(--danger); font-size: var(--t-sm); line-height: 1; }
.qty { display: inline-grid; grid-template-columns: 44px 48px 44px; border: 1px solid var(--line-strong); width: max-content; }
.qty button[aria-disabled="true"] { opacity: 0.35; cursor: not-allowed; }
.qty button { min-height: 44px; border: 0; background: none; cursor: pointer; font-size: 1.1rem; }
.qty button:hover { background: var(--paper-2); }
.qty output { display: grid; place-items: center; font-variant-numeric: tabular-nums; }
.qty-wrap { display: grid; gap: 10px; }
.add-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.btn--add { min-width: 15.5rem; }
.pdp__status { font-size: var(--t-sm); color: var(--ink-2); min-height: 1.4em; }
.pdp__status button { background: none; border: 0; padding: 0; min-height: 44px; cursor: pointer; text-decoration: underline; text-underline-offset: 0.2em; }
/* Product details: under the order button, not above it, so the button keeps its place on screen.
   Description in the display face (it is the product's voice), material and care in the UI face,
   care collapsed (reference text), the client's closing line as an italic sign-off. */
.pdp__details { display: grid; gap: 24px; padding-top: 26px; border-top: 1px solid var(--line); }
.pdp__about { display: grid; gap: 10px; }
.pdp__about .field-label { margin: 0; }
.pdp__desc { margin: 0; max-width: 40ch; font: 300 clamp(1.12rem, 1rem + 0.4vw, 1.3rem)/1.5 var(--f-display); letter-spacing: -0.003em; text-wrap: pretty; }
.pdp__mat { margin: 0; font-size: var(--t-sm); line-height: 1.65; }
.pdp__care { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pdp__care summary { display: flex; justify-content: space-between; align-items: center; min-height: 48px; cursor: pointer; list-style: none; }
.pdp__care summary::-webkit-details-marker { display: none; }
.pdp__care summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.pdp__care-icon { position: relative; width: 12px; height: 12px; flex: none; }
/* The strokes are borders, not backgrounds: Windows High Contrast keeps borders and drops backgrounds. */
.pdp__care-icon::before, .pdp__care-icon::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid; transition: transform 0.35s var(--ease-out); }
.pdp__care-icon::after { transform: rotate(90deg); }
.pdp__care[open] .pdp__care-icon::after { transform: rotate(0deg); }
.pdp__care ul { display: grid; gap: 9px; margin: 0; padding: 2px 0 22px; list-style: none; font-size: var(--t-sm); line-height: 1.5; color: var(--ink-2); }
.pdp__care li { position: relative; padding-left: 22px; }
.pdp__care li::before { content: ""; position: absolute; left: 0; top: 0.75em; width: 12px; height: 1px; background: var(--line-strong); }
.pdp__note { margin: 0; font: 300 italic var(--t-lg)/1.35 var(--f-display); color: var(--accent); text-wrap: balance; }
.pending { display: grid; gap: 6px; font-size: var(--t-sm); color: var(--ink-2); }
.pending b { color: var(--ink); font-weight: 600; }
.more { padding: clamp(96px, 12vw, 180px) 0 clamp(64px, 8vw, 120px); }
.more__title { font-size: var(--t-xl); font-weight: 300; margin-bottom: 32px; }
.more__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2vw; }
.more__grid > li:nth-child(1) { grid-column: 1 / span 4; }
.more__grid > li:nth-child(2) { grid-column: 6 / span 3; margin-top: 6vw; }
.more__grid > li:nth-child(3) { grid-column: 10 / span 3; }
.buybar { display: none; }

/* ---------- Drawer ---------- */
/* 100vw: the kept scrollbar gutter (html) would otherwise leave a bare strip at the right edge. */
.drawer { position: fixed; inset: 0; z-index: var(--z-drawer); width: 100vw; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; overflow: hidden; color: var(--ink); }
.drawer::backdrop { background: transparent; }
.drawer__scrim { position: absolute; inset: 0; background: rgb(20 18 19 / 0.45); }
.drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(480px, 100%);
  display: grid; grid-template-rows: auto 1fr; background: var(--paper);
  padding-right: env(safe-area-inset-right, 0px);
}
.drawer__head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: calc(18px + env(safe-area-inset-top, 0px)) 24px 18px; border-bottom: 1px solid var(--line); }
.drawer__head h2 { font: 400 1.6rem/1 var(--f-display); }
.drawer__close { min-height: 44px; padding: 0 4px; background: none; border: 0; cursor: pointer; font: 600 var(--t-xs)/1 var(--f-ui); letter-spacing: 0.14em; text-transform: uppercase; }
/* Only .drawer__scroll scrolls; the foot sits below it, never over it, so a focused field
   (Tab, or the phone keyboard's Next) can never end up hidden under the foot (WCAG 2.4.11). */
.drawer__body { overflow: hidden; display: grid; grid-template-rows: minmax(0, 1fr); min-height: 0; }
.drawer__view { min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.drawer__scroll { overflow-y: auto; overscroll-behavior: contain; min-height: 0; padding: 8px 24px 24px; }
.drawer__foot { display: grid; gap: 14px; padding: 18px 24px calc(18px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); background: var(--paper); }
@media (max-width: 767px) and (max-height: 700px) {
  .drawer__foot { gap: 10px; padding-top: 12px; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
}
/* Very short screens (landscape phones, 400% zoom): head and foot would leave no room for the
   form, so the whole drawer body scrolls and the foot follows the fields instead of covering them. */
@media (max-height: 480px) {
  .drawer__body { overflow-y: auto; overscroll-behavior: contain; display: block; }
  .drawer__view { display: block; }
  .drawer__scroll { overflow: visible; }
}
.drawer__total { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.drawer__total span { font-size: var(--t-sm); color: var(--ink-2); }
.drawer__total strong { font: 400 1.6rem/1 var(--f-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.drawer__foot .btn { width: 100%; }
.drawer__terms { margin: 0; font-size: var(--t-sm); line-height: 1.45; color: var(--ink-2); text-wrap: pretty; }
.drawer__note { font-size: var(--t-xs); color: var(--ink-2); }
.lines { display: grid; }
.line { display: grid; grid-template-columns: 72px 1fr auto; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--line); overflow: hidden; }
.line__img { width: 72px; aspect-ratio: 3 / 4; object-fit: cover; background: var(--paper-2); }
.line__info { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; align-content: start; min-width: 0; }
.line__name { font: 600 0.8125rem/1.35 var(--f-ui); letter-spacing: 0.1em; }
.line__name a { text-decoration: none; }
.line__detail { font-size: var(--t-sm); color: var(--ink-2); }
.line__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 8px; }
.line__actions .qty { grid-template-columns: 44px 40px 44px; }
.line__actions .qty button { min-height: 44px; }
.line__remove { min-height: 44px; background: none; border: 0; padding: 0 4px; cursor: pointer; font-size: var(--t-sm); text-decoration: underline; text-underline-offset: 0.2em; color: var(--ink-2); }
.line__price { align-self: start; font-size: var(--t-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
.empty { display: grid; gap: 18px; justify-items: start; padding: 32px 0; }
.empty p { color: var(--ink-2); }
.empty h3 { font: 300 2rem/1.05 var(--f-display); }
.form { display: grid; gap: 16px; padding-top: 16px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 6px; min-width: 0; }
.field label { font-size: var(--t-sm); font-weight: 500; }
.field label .opt { color: var(--ink-2); font-weight: 400; }
.field input, .field textarea {
  width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 0; background: #fbfaf8; color: var(--ink);
  font: 400 var(--t-md)/1.4 var(--f-ui);
}
.field textarea { min-height: 96px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: 2px solid var(--ink); outline-offset: 0; border-color: var(--ink); }
.field [aria-invalid="true"] { border-color: var(--danger); }
.field__error { color: var(--danger); font-size: var(--t-sm); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.off-note { padding: 12px 14px; background: var(--pink); color: var(--ink); font-size: var(--t-sm); }
.back { justify-self: start; min-height: 44px; background: none; border: 0; padding: 0; cursor: pointer; font-size: var(--t-sm); text-decoration: underline; text-underline-offset: 0.2em; }
.success { display: grid; gap: 18px; padding: 28px 0; }
.success__tag { justify-self: start; font: 600 var(--t-xs)/1 var(--f-ui); letter-spacing: 0.14em; text-transform: uppercase; background: var(--ink); color: var(--paper); padding: 6px 8px; }
.success h3 { font: 300 clamp(2.2rem, 1.6rem + 2vw, 3rem)/0.98 var(--f-display); letter-spacing: -0.02em; }
.success__id { font-variant-numeric: tabular-nums; color: var(--ink-2); font-size: var(--t-sm); }
.success__facts { display: grid; margin: 0; border-top: 1px solid var(--line); }
.success__facts div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.success__facts dt { font-size: var(--t-sm); color: var(--ink-2); }
.success__facts dd { margin: 0; font: 400 1.35rem/1.1 var(--f-display); font-variant-numeric: tabular-nums; }
.form-error { margin: 0; padding: 12px 14px; border-left: 3px solid var(--danger); background: #f9e6ea; color: var(--danger); font-size: var(--t-sm); }
.success details { border-top: 1px solid var(--line); padding-top: 14px; }
.success summary { cursor: pointer; font-size: var(--t-sm); font-weight: 600; }
.success pre { margin: 12px 0 0; padding: 14px; background: #fbfaf8; border: 1px solid var(--line); white-space: pre-wrap; font: 400 0.8rem/1.5 ui-monospace, "Cascadia Mono", Consolas, monospace; overflow-x: auto; }

/* ---------- Cursor, veil, fly ---------- */
.cursor { position: fixed; left: 0; top: 0; z-index: var(--z-cursor); pointer-events: none; width: 0; height: 0; display: none; }
.cursor.is-on { display: block; }
.cursor { view-transition-name: cursor; }
::view-transition-group(cursor) { display: none; }
.cursor__dot {
  position: absolute; left: -44px; top: -44px; width: 88px; height: 88px; border-radius: 50%; background: var(--ink);
  display: grid; place-items: center; transform: scale(0.114); transition: transform 0.35s var(--ease-out), background-color 0.35s var(--ease-out);
}
.cursor__label { opacity: 0; font: 600 10px/1 var(--f-ui); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); transition: opacity 0.2s; }
.cursor.is-label .cursor__dot { transform: scale(1); background: var(--pink); }
.cursor.is-press .cursor__dot { transform: scale(0.08); }
.cursor.is-label.is-press .cursor__dot { transform: scale(0.9); }
.cursor.is-label .cursor__label { opacity: 1; transition-delay: 0.1s; }
.cursor.is-hidden .cursor__dot { transform: scale(0); }
[data-cursor-hide] { cursor: none; }
.veil { position: fixed; inset: 0; z-index: var(--z-veil); background: var(--ink); color: var(--paper); display: grid; place-items: center; pointer-events: none; clip-path: inset(100% 0 0 0); }
.veil__word { font: 300 clamp(2.5rem, 8vw, 6rem)/1 var(--f-display); letter-spacing: 0.3em; padding-left: 0.3em; }
.veil.is-loader { clip-path: inset(0 0 0 0); }
.veil__bar { position: absolute; left: 50%; bottom: 18vh; width: min(220px, 50vw); height: 1px; translate: -50% 0; background: rgb(239 238 235 / 0.25); overflow: hidden; }
.veil__bar i { position: absolute; inset: 0; background: var(--pink); transform-origin: 0 50%; transform: scaleX(0); }
.fly { position: fixed; z-index: var(--z-cursor); pointer-events: none; object-fit: cover; }

/* Initial states that the motion layer animates in. Only when JS + motion are on. */
.js.motion-ok [data-reveal] { clip-path: inset(0 0 100% 0); }
.js.motion-ok [data-reveal="left"] { clip-path: inset(0 100% 0 0); }
.js.motion-ok [data-reveal="diag"] { clip-path: polygon(0 0, 0 0, 0 0, 0 0); }
.js.is-loading .veil, .js.is-veiled .veil { clip-path: inset(0 0 0 0); }
.js.is-veiled .veil__bar { display: none; }
.js.motion-ok .hero__word, .js.motion-ok .hero__line { visibility: hidden; }
.js.motion-ok.is-split .hero__word, .js.motion-ok.is-split .hero__line { visibility: visible; }
/* The intro also brings in the nav, the CTA and the price line: until it is built they stay hidden,
   or a repeat visit (no loader) shows them, hides them and fades them in again. */
.js.motion-ok:not(.is-split) [data-page="home"] .nav,
.js.motion-ok:not(.is-split) .hero__cta,
.js.motion-ok:not(.is-split) .hero__meta { opacity: 0; }

/* View transitions: cross-document, shared product image. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: 0.35s var(--ease-io) both vt-out; }
  ::view-transition-new(root) { animation: 0.5s var(--ease-out) both vt-in; }
  ::view-transition-group(product-hero) { animation-duration: 0.65s; animation-timing-function: var(--ease-out); }
  ::view-transition-old(product-hero), ::view-transition-new(product-hero) { animation-duration: 0.65s; }
}
@keyframes vt-out { to { opacity: 0; translate: 0 -24px; } }
@keyframes vt-in { from { opacity: 0; translate: 0 24px; } }

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
  .nav__links { display: none; }
  .nav { grid-template-columns: 1fr auto; }
  .nav__menu { display: inline-block; }
  .editorial__copy { grid-column: 9 / span 4; }
  .howto__title { grid-column: 1 / -1; }
  .howto__steps, .howto__note { grid-column: 1 / -1; }
}

@media (max-width: 1024px) and (min-width: 768px) and (orientation: portrait) {
  .hero { min-height: auto; padding: calc(var(--nav-h) + 16px) 0 56px; display: grid; }
  .hero__word { position: relative; left: auto; top: auto; translate: none; justify-self: center; font-size: 24vw; }
  /* 4 / 3: the landing photo's own shape. This wide, an upright crop would enlarge it past its pixels. */
  .hero__main { position: relative; right: auto; top: auto; aspect-ratio: 4 / 3; width: calc(100% - var(--gutter) - var(--gutter-r)); margin: -2vw var(--gutter-r) 0 var(--gutter); }
  .hero__float { display: none; }
  .hero__copy { position: relative; left: auto; bottom: auto; width: auto; margin: 28px var(--gutter-r) 0 var(--gutter); }
}
@media (hover: none) { .card__b { display: none; } }

/* ---------- Mobile: its own layout, not a shrunk desktop ---------- */
@media (max-width: 767px) {
  :root { --nav-h: 58px; }
  .nav__brand { font-size: 1.15rem; letter-spacing: 0.26em; }
  .nav__order .nav__label { display: none; }
  .nav__thumbs { display: none; }

  .hero { min-height: auto; padding: calc(var(--nav-h) + 16px) 0 48px; display: grid; }
  .hero__word { position: relative; left: auto; top: auto; translate: none; justify-self: center; font-size: 25.5vw; }
  .hero__main { position: relative; right: auto; top: auto; width: calc(100% - 32px); aspect-ratio: 4 / 5; margin: -2vw 16px 0; }
  .hero__float { display: none; }
  .hero__copy { position: relative; left: auto; bottom: auto; width: auto; margin: 22px 16px 0; gap: 16px; }
  .hero__line { font-size: 1.9rem; }
  .hero__cta .btn { width: 100%; }

  .statement { padding-top: 80px; padding-bottom: 64px; }
  .statement__text { margin-left: 0; font-size: 2.35rem; }

  .editorial { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 0; padding-top: 24px; }
  .editorial__big { grid-column: 1 / -1; grid-row: auto; }
  .editorial__float { grid-column: 3 / -1; grid-row: auto; margin-top: -18vw; }
  .editorial__small { display: none; }
  .editorial__copy { grid-column: 1 / -1; grid-row: auto; margin-top: 40px; }

  .mama__pair { grid-template-columns: 1fr 1fr; column-gap: 12px; }
  .mama__item--a, .mama__item--b { grid-column: auto; margin-top: 0; }
  .mama__item--b { margin-top: 18vw; }
  .mama__facts { padding-left: 0; }

  .shop__grid { grid-template-columns: 1fr 1fr; gap: 36px 12px; }
  .shop__grid > li:nth-child(n) { grid-column: auto; margin-top: 0; }
  .shop__grid > li:nth-child(3n + 1) { grid-column: 1 / -1; }
  .card__name { font-size: 1.1rem; }
  .card__meta { grid-template-columns: 1fr; }
  .card__price { grid-column: 1; grid-row: auto; }
  .card__detail { font-size: 1.05rem; }
  .card__cta { display: none; }

  .howto__steps li { grid-template-columns: 3rem 1fr; }
  .howto__n { font-size: 2.2rem; }
  .howto__cta .btn { width: 100%; }

  .foot__col:nth-child(n) { grid-column: 1 / -1; }

  .about { padding-top: calc(var(--nav-h) + 48px); min-height: auto; }
  .about__label, .about__text, .about__cta { grid-column: 1 / -1; }
  .about__name { font-size: 26vw; }
  .about__text { font-size: 1.45rem; }
  .about__cta .btn { width: 100%; }

  .pdp { padding-left: 0; padding-right: 0; }
  .crumbs { padding: 0 16px; }
  .pdp__idx { display: none; }
  [data-page="product"] .foot { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
  .pdp__grid { grid-template-columns: 1fr; gap: 28px; }
  .pdp__gallery { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 16px; scrollbar-width: none; }
  .pdp__gallery::-webkit-scrollbar { display: none; }
  .pdp__shot { flex: none; width: 84vw; scroll-snap-align: center; }
  .pdp__shot:nth-child(3n + 2) { width: 84vw; margin-left: 0; }
  .pdp__count { display: block; padding: 0 16px; margin-top: -16px; font-size: var(--t-sm); color: var(--ink-2); font-variant-numeric: tabular-nums; }
  .pdp__info { position: static; padding: 0 16px 40px; }
  .btn--add { width: 100%; }
  .more { padding-left: 16px; padding-right: 16px; }
  .more__grid { grid-template-columns: 1fr 1fr; gap: 28px 12px; }
  .more__grid > li:nth-child(n) { grid-column: auto; margin-top: 0; }
  .more__grid > li:nth-child(3) { grid-column: 1 / -1; }

  .buybar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-nav);
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--paper); border-top: 1px solid var(--line);
    translate: 0 110%; transition: translate 0.4s var(--ease-out);
  }
  .buybar.is-visible { translate: 0 0; }
  .buybar__info { display: grid; min-width: 0; }
  .buybar__info b { font: 400 1rem/1.15 var(--f-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .buybar__info span { font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
  .buybar .btn { min-height: 46px; padding: 0 18px; }

  .drawer__panel { top: auto; left: 0; width: 100%; height: min(92dvh, 100%); }
  .form__row { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* Landscape phones: a portrait-sized photo would fill two or three screens before the price and
   the order button; cap it at one screen (object-fit keeps the crop). */
@media (orientation: landscape) and (max-height: 500px) {
  .hero__main { max-height: calc(100svh - var(--nav-h) - 24px); }
}
/* Only the one-column product gallery; the two-column one would shrink the main photo. */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 767px) {
  .pdp__shot { max-height: calc(100svh - var(--nav-h) - 24px); }
}

/* The pinned journey pads for the nav itself: anchors and scrollIntoView land exactly at the pin. */
.journey.is-pinned { scroll-margin-top: calc(-1 * (var(--nav-h) + env(safe-area-inset-top, 0px) + 12px)); }

/* Short desktop screens: a tighter info column keeps the order button on screen at load with the
   variant row (MAMA) as well: name, variant and price also scale with the height, and the
   01 / 07 index steps aside. */
@media (min-width: 768px) and (max-height: 820px) {
  .pdp__info { gap: 18px; }
  .pdp__idx { display: none; }
  .pdp__name { font-size: min(clamp(2.4rem, 1.2rem + 3.6vw, 4.6rem), 7.5vh); }
  .pdp__variant, .pdp__price { font-size: min(var(--t-xl), 4.5vh); }
}
/* Laptops at 150 % scaling and browser windows with toolbars (640 px and less): one step tighter. */
@media (min-width: 768px) and (max-height: 640px) {
  .pdp { padding-top: calc(var(--nav-h) + 14px); }
  .crumbs { margin-bottom: 14px; }
  .pdp__info { gap: 12px; }
  .pdp__name { font-size: min(clamp(2.4rem, 1.2rem + 3.6vw, 4.6rem), 6.4vh); }
  .add-form { gap: 16px; }
}

/* The phone buy bar covers the bottom of the screen: focus scrolling always keeps a control above it
   (also when that scroll is what brings the bar in), and on very short screens (landscape, 400 %
   zoom) the bar stays away, it would cover most of them. */
@media (max-width: 767px) and (min-height: 401px) {
  html:has(.buybar) { scroll-padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-height: 400px) {
  .buybar { display: none; }
}