@font-face{font-family:'Archivo Black Fallback';src:local('Arial');size-adjust:121.52%;ascent-override:72.25%;descent-override:17.28%;line-gap-override:0%}
@font-face{font-family:'Anton Fallback';src:local('Arial');size-adjust:86.57%;ascent-override:135.88%;descent-override:38.02%;line-gap-override:0%}
@font-face{font-family:'Bebas Neue Fallback';src:local('Arial');size-adjust:71.32%;ascent-override:126.2%;descent-override:42.07%;line-gap-override:0%}
@font-face{font-family:'Montserrat Fallback';src:local('Arial');size-adjust:105.76%;ascent-override:91.53%;descent-override:23.73%;line-gap-override:0%}
@font-face{font-family:'Playfair Display Fallback';src:local('Georgia');size-adjust:100.08%;ascent-override:108.11%;descent-override:25.08%;line-gap-override:0%}
@font-face{font-family:'DM Serif Display Fallback';src:local('Georgia');size-adjust:98.84%;ascent-override:104.81%;descent-override:33.89%;line-gap-override:0%}
@font-face{font-family:'Space Grotesk Fallback';src:local('Arial');size-adjust:104.83%;ascent-override:93.87%;descent-override:27.85%;line-gap-override:0%}
@font-face{font-family:'DM Sans Fallback';src:local('Arial');size-adjust:101.39%;ascent-override:97.84%;descent-override:30.58%;line-gap-override:0%}
@font-face{font-family:'Inter Fallback';src:local('Arial');size-adjust:104.88%;ascent-override:92.37%;descent-override:23%;line-gap-override:0%}
@font-face{font-family:'Handjet Fallback';src:local('Courier New');size-adjust:57.16%;ascent-override:154.36%;descent-override:41.16%;line-gap-override:0%}
@font-face{font-family:'DotGothic16 Fallback';src:local('Courier New');size-adjust:83.32%;ascent-override:139.22%;descent-override:34.57%;line-gap-override:0%}
@font-face{font-family:'VT323 Fallback';src:local('Courier New');size-adjust:66.66%;ascent-override:120.02%;descent-override:30%;line-gap-override:0%}
@font-face{font-family:'Geist Pixel Fallback';src:local('Courier New');size-adjust:86.01%;ascent-override:116.85%;descent-override:34.3%;line-gap-override:0%}
@font-face{font-family:'Archivo Black';font-style:normal;font-display:swap;font-weight:400;src:url(/app/fonts/archivo-black-latin-v43fbb5903f.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Archivo Black';font-style:normal;font-display:swap;font-weight:400;src:url(/app/fonts/archivo-black-latin-ext-v43fbb5903f.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Anton';font-style:normal;font-display:swap;font-weight:400;src:url(/app/fonts/anton-latin-v43fbb5903f.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Anton';font-style:normal;font-display:swap;font-weight:400;src:url(/app/fonts/anton-latin-ext-v43fbb5903f.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Bebas Neue';font-style:normal;font-display:swap;font-weight:400;src:url(/app/fonts/bebas-neue-latin-v43fbb5903f.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Bebas Neue';font-style:normal;font-display:swap;font-weight:400;src:url(/app/fonts/bebas-neue-latin-ext-v43fbb5903f.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Montserrat';font-style:normal;font-display:swap;font-weight:100 900;src:url(/app/fonts/montserrat-latin-v43fbb5903f.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Montserrat';font-style:normal;font-display:swap;font-weight:100 900;src:url(/app/fonts/montserrat-latin-ext-v43fbb5903f.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Playfair Display';font-style:normal;font-display:swap;font-weight:400 900;src:url(/app/fonts/playfair-display-latin-v43fbb5903f.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Playfair Display';font-style:normal;font-display:swap;font-weight:400 900;src:url(/app/fonts/playfair-display-latin-ext-v43fbb5903f.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'DM Serif Display';font-style:normal;font-display:swap;font-weight:400;src:url(/app/fonts/dm-serif-display-latin-v43fbb5903f.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'DM Serif Display';font-style:normal;font-display:swap;font-weight:400;src:url(/app/fonts/dm-serif-display-latin-ext-v43fbb5903f.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Space Grotesk';font-style:normal;font-display:swap;font-weight:300 700;src:url(/app/fonts/space-grotesk-latin-v43fbb5903f.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Space Grotesk';font-style:normal;font-display:swap;font-weight:300 700;src:url(/app/fonts/space-grotesk-latin-ext-v43fbb5903f.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'DM Sans';font-style:normal;font-display:swap;font-weight:100 1000;src:url(/app/fonts/dm-sans-latin-v43fbb5903f.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'DM Sans';font-style:normal;font-display:swap;font-weight:100 1000;src:url(/app/fonts/dm-sans-latin-ext-v43fbb5903f.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-display:swap;font-weight:100 900;src:url(/app/fonts/inter-latin-v43fbb5903f.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-display:swap;font-weight:100 900;src:url(/app/fonts/inter-latin-ext-v43fbb5903f.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Handjet';font-style:normal;font-display:swap;font-weight:100 900;src:url(/app/fonts/handjet-latin-v43fbb5903f.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Handjet';font-style:normal;font-display:swap;font-weight:100 900;src:url(/app/fonts/handjet-latin-ext-v43fbb5903f.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'DotGothic16';font-style:normal;font-display:swap;font-weight:400;src:url(/app/fonts/dotgothic16-latin-v43fbb5903f.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'DotGothic16';font-style:normal;font-display:swap;font-weight:400;src:url(/app/fonts/dotgothic16-latin-ext-v43fbb5903f.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'VT323';font-style:normal;font-display:swap;font-weight:400;src:url(/app/fonts/vt323-latin-v43fbb5903f.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'VT323';font-style:normal;font-display:swap;font-weight:400;src:url(/app/fonts/vt323-latin-ext-v43fbb5903f.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Geist Pixel';font-style:normal;font-display:swap;font-weight:400;src:url(/app/fonts/geist-pixel-latin-v43fbb5903f.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Geist Pixel';font-style:normal;font-display:swap;font-weight:400;src:url(/app/fonts/geist-pixel-latin-ext-v43fbb5903f.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* Hero player captions: self-hosted Montserrat ExtraBold (SIL OFL 1.1). */
@font-face {
  font-family: 'Hero Caption Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/app/fonts/montserrat-latin-ext-800-v43fbb5903f.woff2') format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Hero Caption Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/app/fonts/montserrat-latin-800-v43fbb5903f.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
:root {
  --paper: #f7f6f2;
  --ink: #171813;
  --olive: #a79955;
  --muted: #686962;
  --line: #dcdcd4;
  --white: #fff;
  --danger: #a6352b;
  /* Theme tokens: Studio → Tema overrides these on <html> (server-rendered). */
  --theme-outline: #a79955;
  --on-accent: #171813;
  --surface: #eeede8;
  --image-bg: #f7f6f2;
  --hero-bg: #efeee8;
  --header-bg: rgb(247, 246, 242);
  --font-display: 'Archivo Black', 'Arial Black', sans-serif;
  --font-display-weight: 400;
  --font-body: 'DM Sans', Arial, sans-serif;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
button,
a,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}
button,
a {
  touch-action: manipulation;
}
button {
  cursor: pointer;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  border: 0;
  background: none;
}
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
img {
  max-width: 100%;
  display: block;
}
svg {
  flex-shrink: 0;
}
input,
textarea,
select {
  border: 1px solid var(--line);
  background: transparent;
  border-radius: 0;
  padding: 13px 12px;
  width: 100%;
  min-height: 46px;
}
input[type='checkbox'] {
  width: 18px;
  min-height: 18px;
  accent-color: var(--ink);
}
textarea {
  resize: vertical;
  min-height: 120px;
}
label {
  font-size: 13px;
  display: block;
}
label > input,
label > select,
label > textarea {
  margin-top: 7px;
}
h1,
h2,
h3,
p {
  margin-top: 0;
}
h1,
h2,
h3 {
  font-weight: 500;
}
h1 {
  font-size: clamp(34px, 5vw, 70px);
  line-height: 1.02;
  letter-spacing: -0.055em;
}
p {
  line-height: 1.6;
}
small,
.small {
  font-size: 12px;
}
hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 24px 0;
}
:focus-visible {
  outline: 2px solid #706321;
  outline-offset: 4px;
}
.skip {
  position: fixed;
  top: -100px;
  background: #fff;
  padding: 15px;
  z-index: 999;
}
.skip:focus {
  top: 0;
}
.label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
}
.muted {
  color: var(--muted);
}
.brand {
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  font-size: clamp(17px, 2.3vw, 30px);
  letter-spacing: -0.055em;
  line-height: 1;
  white-space: nowrap;
}
.brand small {
  font-family: var(--font-body);
  display: block;
  text-align: center;
  font-size: 8px;
  letter-spacing: 0.35em;
  margin-top: 6px;
}
.site-header {
  position: sticky;
  top: 0;
  background: var(--header-bg);
  z-index: 40;
  display: grid;
  grid-template-columns: 1fr minmax(0, auto) 1fr;
  align-items: center;
  min-height: 88px;
  border-bottom: 1px solid var(--line);
  padding: 16px 40px;
  gap: 14px;
}
.header-left,
.header-right {
  display: flex;
  align-items: center;
  gap: 18px;
}
.header-right {
  justify-content: flex-end;
}
.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 8px;
  gap: 6px;
}
.lang-switch {
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.lang-switch a {
  padding: 10px 2px;
}
.lang-switch .current {
  border-bottom: 1px solid;
}
.header-menu-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.bag-count {
  font-size: 10px;
}
.intro {
  --hero-fill: #f2fa28;
  --hero-ink: #151610;
  --hero-h: 480px;
  --hero-gap: var(--hp-gap, 48px);
  --hp-media-h: calc(var(--hero-h) * var(--hp-size, 73) / 100);
  overflow: hidden;
  position: relative;
  border-bottom: 1px solid var(--line);
  height: var(--hero-h);
  background: var(--hp-bg, var(--hero-bg));
}
.intro-meta {
  position: absolute;
  top: 25px;
  left: 40px;
  right: 40px;
  display: flex;
  justify-content: space-between;
  z-index: 3;
}
/* This is a broad reference-inspired draft, not an identified source font. */
.intro-word {
  position: absolute;
  inset: 135px 0 auto;
  text-align: center;
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  font-size: clamp(76px, 18vw, 260px);
  line-height: 1;
  letter-spacing: -0.055em;
  color: var(--hero-fill);
  -webkit-text-stroke: clamp(5px, 0.95vw, 13px) var(--hero-ink);
  paint-order: stroke fill;
  text-shadow: 0 4px 0 var(--hero-ink);
  margin: 0;
  z-index: 2;
  pointer-events: none;
}
/* The compressed draft keeps real text and a colored interior. */
.intro[data-hero-style='condensed'] .intro-word {
  top: 112px;
  left: 50%;
  right: auto;
  width: max-content;
  font-size: clamp(110px, 22vw, 300px);
  letter-spacing: -0.035em;
  transform: translateX(-50%) scaleX(0.65) scaleY(1.08) rotate(-0.6deg);
  filter: url('#hero-word-wear');
}
.hero-fx {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.hero-photo-window {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* The track repeats the hero colour so its photos can multiply against it. */
  background: inherit;
}
.hero-sequence {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--hero-gap);
  padding-inline-end: var(--hero-gap);
  min-width: 100vw;
}
.hero-preview-note {
  margin: 0;
  padding: 10px 18px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--ink);
  background: #eeead6;
  text-align: center;
}
/*
 * Hero player. The animated track is its own compositing group, so it paints the
 * hero colour (inherited) and each photo multiplies against that: white studio
 * backdrops disappear while captions keep their own colours. Retro filters sit on
 * the photos, never on the track, and only transform is animated.
 */
.hero-track {
  position: absolute;
  top: 0;
  bottom: 0;
  padding-bottom: 26px;
  display: flex;
  width: max-content;
  gap: 0;
  align-items: center;
  background: inherit;
  animation: drift var(--hp-speed, 38s) linear infinite;
  will-change: transform;
}
/* Shown once its first photos are settled (home-page.ts), so a photo taking its
   real width never moves visible pieces (no layout shift); the motion runs anyway. */
.hero-track:not([data-ready]) {
  visibility: hidden;
}
.intro[data-hp-direction='right'] .hero-track {
  animation-direction: reverse;
}
@media (hover: hover) {
  .intro[data-hp-hover-pause='true']:hover .hero-track {
    animation-play-state: paused;
  }
}
.hero-item {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  margin: 0;
}
.hero-item img {
  flex: 0 0 auto;
  height: var(--hp-media-h);
  width: auto;
  max-width: 34vw;
  object-fit: contain;
  mix-blend-mode: multiply;
  /* Push the light studio backdrop to white so multiply removes it entirely. */
  filter: brightness(1.09) contrast(1.03);
}
/* Hidden until the backdrop is cut out (photo-fit-dom.ts): iOS Safari ignores the
   multiply above inside the animated track, so a white box must never flash. */
.hero-item img:not([data-cutout]) {
  opacity: 0;
}
.hero-item img[data-cutout] {
  transition: opacity 0.25s ease;
  mix-blend-mode: normal;
  filter: none;
}
/* A photo that cannot be cut out is shown whole as a framed print in the page
   colour, so nothing depends on a blend mode that iOS ignores in the track. */
.hero-item img[data-cutout='original'] {
  padding: 6px;
  background: var(--paper);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 14%, transparent);
}
.intro[data-hp-retro-base='film'] .hero-item img,
.intro[data-hp-retro-base='vhs'] .hero-item img {
  filter: brightness(1.09) sepia(var(--hp-sepia)) saturate(var(--hp-saturate))
    contrast(var(--hp-contrast));
}
.intro[data-hp-retro-base='vhs'] .hero-item img {
  filter: brightness(1.09) url('#hero-vhs') sepia(var(--hp-sepia))
    saturate(var(--hp-saturate)) contrast(var(--hp-contrast));
}
.intro[data-hp-tilt='true'] .hero-item:nth-child(3n + 2) img {
  transform: rotate(-8deg);
  height: calc(var(--hp-media-h) * 0.87);
}
.intro[data-hp-tilt='true'] .hero-item:nth-child(3n) img {
  transform: rotate(8deg);
}
.hero-caption {
  position: relative;
  display: flex;
  flex-direction: column;
  align-self: flex-end;
  margin: 0 0 calc(var(--hp-media-h) * 0.14) calc(var(--hp-media-h) * -0.16);
  max-width: calc(var(--hp-media-h) * 0.95);
  font-family: var(--hp-caption-font, sans-serif);
  font-weight: 800;
  font-size: max(11px, calc(var(--hp-media-h) * 0.072));
  line-height: 1.08;
  letter-spacing: -0.01em;
  text-wrap: balance;
  pointer-events: none;
}
.intro[data-hp-caption-position='below'] .hero-item {
  flex-direction: column;
  align-items: center;
}
.intro[data-hp-caption-position='below'] .hero-caption {
  align-self: center;
  align-items: center;
  text-align: center;
  margin: calc(var(--hp-media-h) * -0.16) 0 0;
}
.hero-caption-brand {
  text-transform: uppercase;
}
/* Reel captions: bright fill, thick dark outline and a soft dark glow. */
.intro[data-hp-captions='capcut'] .hero-caption,
.intro[data-hp-captions='neon'] .hero-caption {
  color: #f2f52a;
  text-shadow:
    0.07em 0 0 #15140c,
    -0.07em 0 0 #15140c,
    0 0.07em 0 #15140c,
    0 -0.07em 0 #15140c,
    0.05em 0.05em 0 #15140c,
    -0.05em 0.05em 0 #15140c,
    0.05em -0.05em 0 #15140c,
    -0.05em -0.05em 0 #15140c,
    0 0 0.3em rgb(12 11 4 / 0.75),
    0 0 0.7em rgb(12 11 4 / 0.45);
}
.intro[data-hp-captions='neon'] .hero-caption {
  color: #a6ff1a;
}
.intro[data-hp-captions='minimal'] .hero-caption {
  color: var(--ink);
  font-size: max(9px, calc(var(--hp-media-h) * 0.04));
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.hero-retro-layer,
.hero-grain {
  position: absolute;
  pointer-events: none;
  z-index: 1;
}
/* Warm tone, slight vignette and (VHS) scanlines in one multiply layer. */
.hero-retro-layer {
  inset: 0;
  mix-blend-mode: multiply;
  background:
    repeating-linear-gradient(
      to bottom,
      rgb(0 0 0 / var(--hp-scanlines, 0)) 0 1px,
      transparent 1px 3px
    ),
    radial-gradient(
      ellipse at 50% 45%,
      transparent 52%,
      rgb(34 22 6 / var(--hp-vignette, 0)) 100%
    ),
    linear-gradient(
      rgb(255 176 92 / var(--hp-warmth, 0)),
      rgb(255 176 92 / var(--hp-warmth, 0))
    );
}
.hero-grain {
  inset: -24px;
  width: calc(100% + 48px);
  height: calc(100% + 48px);
  opacity: var(--hp-grain, 0);
  mix-blend-mode: overlay;
  animation: hero-grain 0.8s steps(4) infinite;
}
/*
 * Reel presets: hero-retro-canvas paints animated grain, scanlines, fringing,
 * vignette and flicker over the photos. It blends (overlay) and ignores the
 * pointer, so the multiply cut-outs below are untouched. While it runs, the CSS
 * layers keep only the warm tone so nothing is applied twice.
 */
.hero-retro-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: overlay;
}
.intro[data-hp-canvas='on'] .hero-grain {
  display: none;
}
.intro[data-hp-canvas='on'] .hero-retro-layer {
  background: linear-gradient(
    rgb(255 176 92 / var(--hp-warmth, 0)),
    rgb(255 176 92 / var(--hp-warmth, 0))
  );
}
/* Camcorder OSD: real text, crisp above the canvas, never interactive. */
.hero-osd {
  position: absolute;
  top: 22px;
  left: 28px;
  z-index: 3;
  display: grid;
  gap: 2px;
  pointer-events: none;
  font-family:
    'VCR OSD Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas,
    'Courier New', monospace;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.15;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #f4f4ee;
  text-shadow:
    1.5px 0 0 rgb(255 0 80 / 0.7),
    -1.5px 0 0 rgb(0 220 255 / 0.7),
    0 0 6px rgb(0 0 0 / 0.55);
}
.hero-osd-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hero-osd-label:empty {
  display: none;
}
.hero-osd-dot {
  width: 0.62em;
  height: 0.62em;
  border-radius: 50%;
  background: #ff2a2a;
  box-shadow: 0 0 6px rgb(255 42 42 / 0.8);
  animation: hero-osd-blink 1s steps(1) infinite;
}
.hero-osd[data-osd='date'] {
  top: auto;
  bottom: 64px;
  color: #ff8a2a;
  font-size: 17px;
  letter-spacing: 0.14em;
  text-shadow:
    0 0 4px rgb(255 110 20 / 0.85),
    0 0 10px rgb(255 80 0 / 0.45);
}
@keyframes hero-osd-blink {
  50% {
    opacity: 0;
  }
}
@keyframes hero-grain {
  25% {
    transform: translate(-9px, 6px);
  }
  50% {
    transform: translate(7px, -11px);
  }
  75% {
    transform: translate(-5px, -4px);
  }
}
@keyframes drift {
  to {
    transform: translateX(-50%);
  }
}
.intro-bottom {
  position: absolute;
  bottom: 25px;
  left: 40px;
  right: 40px;
  display: flex;
  justify-content: space-between;
  align-items: end;
  z-index: 3;
}
.intro-bottom p {
  font-size: 14px;
  max-width: 220px;
  margin: 0;
}
.text-link {
  display: inline-flex;
  gap: 18px;
  align-items: center;
  border-bottom: 1px solid;
  padding: 8px 0;
  font-size: 12px;
}
.pause {
  position: absolute;
  right: 40px;
  top: 60px;
  font-size: 11px;
  z-index: 4;
  padding: 8px;
}
.ticker {
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  padding: 13px 0;
  display: flex;
  justify-content: center;
  gap: 40px;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ticker span:nth-child(even) {
  color: var(--olive);
}
/* Every line hidden in Studio ("-" or "."): no empty strip stays behind. */
.ticker:empty,
.footer-word:empty {
  display: none;
}
.section {
  padding: 54px 40px;
}
.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-bottom: 26px;
  gap: 20px;
}
.section-heading h1,
.section-heading h2 {
  margin: 0;
  font-size: clamp(28px, 4vw, 49px);
  letter-spacing: -0.055em;
  line-height: 1.05;
}
.section-heading p {
  margin: 0;
  max-width: 240px;
  font-size: 13px;
}
/* Owner copy may hold a long link or hashtag with no break opportunity. */
.section-heading p,
.collection-slogan,
.collection-intro {
  min-width: 0;
  overflow-wrap: anywhere;
  /* Safari before 15.4 ignores `anywhere`. */
  word-break: break-word;
}
.collection-strip,
.category-strip {
  display: flex;
  overflow: auto;
  scrollbar-width: none;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: 24px;
  gap: 0;
  scroll-snap-type: x proximity;
}
.collection-strip::-webkit-scrollbar,
.category-strip::-webkit-scrollbar {
  display: none;
}
.collection-strip a,
.category-strip a {
  white-space: nowrap;
  padding: 16px 23px;
  border-right: 1px solid var(--line);
  font-size: 12px;
  scroll-snap-align: start;
}
/* Collections are the primary strip; type categories are a quieter filter below. */
.collection-strip {
  margin-bottom: 0;
}
.collection-strip a {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.collection-strip + .category-strip {
  border-top: 0;
}
.collection-strip + .category-strip a {
  padding-top: 12px;
  padding-bottom: 12px;
  font-size: 11px;
}
/* Shop page header (#49): the collection, type or "all" title as a big display
   word and its description in readable body text directly beneath it. */
.collection-header {
  margin: 34px 0 30px;
}
.collection-head > h1 {
  min-width: 0;
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  font-size: min(
    clamp(40px, 7vw, 96px),
    calc((100vw - 80px) / (var(--title-chars, 8) * 0.74))
  );
  line-height: 0.92;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  overflow-wrap: break-word;
  text-wrap: balance;
}
/* Owner's short line ("NOTHING HAUNTS U…"): beside the title, under it on phones. */
.collection-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 32px;
}
.collection-slogan {
  flex: 0 1 34ch;
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.1em;
  text-align: right;
  color: var(--ink);
}
.collection-header .collection-intro {
  margin: 16px 0 0;
  max-width: 60ch;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink);
  white-space: pre-line;
}
.collection-strip a.active,
.category-strip a.active {
  background: var(--ink);
  color: var(--paper);
}
.collection-strip a:hover,
.category-strip a:hover {
  background: var(--olive);
  color: var(--on-accent);
}
/* GİRİŞ catalogue tabs (Studio → Tema → Katalog: "Kutulu"). Collections and
   types become bold boxed cells; the active one is filled with the accent.
   The pair swipes with snap and stays pinned under the sticky header while
   the grid scrolls beneath it. Classic keeps the thin strip above. */
[data-catalog-tabs='boxed'] .catalog-tabs {
  --tabs-bleed: 40px;
  position: sticky;
  top: calc(var(--header-h, 88px) - 1px);
  z-index: 30;
  margin: 0 calc(var(--tabs-bleed) * -1) 24px;
  padding: 10px 0;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
[data-catalog-tabs='boxed'] .collection-strip,
[data-catalog-tabs='boxed'] .category-strip {
  margin: 0;
  padding: 0 var(--tabs-bleed);
  border: 0;
  gap: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--tabs-bleed);
}
/* Trailing room so the last tab can snap clear of the edge (Safari ignores
   end padding on a flex scroller). */
[data-catalog-tabs='boxed'] .collection-strip::after,
[data-catalog-tabs='boxed'] .category-strip::after {
  content: '';
  flex: 0 0 var(--tabs-bleed);
}
[data-catalog-tabs='boxed'] .collection-strip a,
[data-catalog-tabs='boxed'] .category-strip a,
[data-catalog-tabs='boxed'] .collection-strip + .category-strip a {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 104px;
  max-width: 160px;
  min-height: 56px;
  padding: 8px 16px;
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: 0.01em;
  text-align: center;
  text-transform: uppercase;
  white-space: normal;
  overflow-wrap: normal;
  hyphens: none;
  text-wrap: balance;
  scroll-snap-align: center;
}
/* Neighbouring cells share one border, like a single row of boxes. */
[data-catalog-tabs='boxed'] .collection-strip a + a,
[data-catalog-tabs='boxed'] .category-strip a + a {
  border-left-width: 0;
}
[data-catalog-tabs='boxed'] .collection-strip + .category-strip {
  margin-top: 8px;
}
[data-catalog-tabs='boxed'] .collection-strip + .category-strip a {
  min-width: 88px;
  min-height: 44px;
  padding: 6px 14px;
  border-width: 1.5px;
  font-size: 12px;
}
[data-catalog-tabs='boxed'] .collection-strip + .category-strip a + a {
  border-left-width: 0;
}
[data-catalog-tabs='boxed'] .collection-strip a.active,
[data-catalog-tabs='boxed'] .category-strip a.active {
  background: var(--olive);
  color: var(--on-accent);
}
@media (hover: hover) {
  [data-catalog-tabs='boxed'] .collection-strip a:not(.active):hover,
  [data-catalog-tabs='boxed'] .category-strip a:not(.active):hover {
    background: var(--surface);
    color: var(--ink);
  }
}
[data-catalog-tabs='boxed'] .collection-strip a:focus-visible,
[data-catalog-tabs='boxed'] .category-strip a:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: -6px;
}
@media (max-width: 1000px) {
  [data-catalog-tabs='boxed'] .catalog-tabs {
    --tabs-bleed: 24px;
  }
}
@media (max-width: 650px) {
  [data-catalog-tabs='boxed'] .catalog-tabs {
    --tabs-bleed: 16px;
    top: calc(var(--header-h, 72px) - 1px);
    padding: 8px 0;
  }
  [data-catalog-tabs='boxed'] .collection-strip a {
    min-width: 96px;
    max-width: 136px;
    min-height: 54px;
    padding: 6px 12px;
    font-size: 14px;
  }
}
.catalog-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 25px;
}
.catalog-toolbar select {
  width: auto;
  max-width: 190px;
  min-height: 38px;
  font-size: 11px;
  border: 0;
  padding: 8px 24px 8px 0;
}
.catalog-toolbar .filter-button {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  font-size: 12px;
}
.filter-panel {
  border: 1px solid var(--line);
  padding: 22px;
  margin-bottom: 25px;
  display: flex;
  gap: 20px;
  align-items: end;
  flex-wrap: wrap;
}
.filter-panel label {
  flex: 1;
  min-width: 140px;
}
.filter-panel[hidden] {
  display: none;
}
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 38px 18px;
}
.product-card {
  min-width: 0;
  position: relative;
}
/* The room at the top keeps the badge and the save button from covering a piece
   that fills its photo. */
.product-picture {
  --card-pad: 16px;
  --card-pad-top: 44px;
  position: relative;
  background: var(--image-bg, var(--surface));
  aspect-ratio: 3/4;
  overflow: hidden;
  display: block;
}
.product-picture > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  padding: var(--card-pad-top) var(--card-pad) var(--card-pad);
  transition: transform 0.5s ease;
}
.product-card:hover .product-picture > img {
  transform: scale(1.035);
}
.product-card .favorite {
  position: absolute;
  right: 9px;
  top: 9px;
  z-index: 2;
  min-width: 36px;
  min-height: 36px;
  background: rgba(247, 246, 242, 0.8);
}
.favorite.saved svg {
  fill: var(--ink);
}
.product-badge {
  position: absolute;
  left: 12px;
  top: 15px;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  /* A paper chip keeps the badge readable on dark or busy photographs. */
  padding: 4px 7px;
  line-height: 1.2;
  color: var(--ink);
  background: var(--paper);
  max-width: calc(100% - 64px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.product-badge:empty {
  display: none;
}
.product-info {
  padding: 13px 0 0;
}
.product-info .brandline {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: 6px;
}
.product-info h3 {
  font-size: 14px;
  margin: 0 0 8px;
  font-weight: 450;
  line-height: 1.35;
}
.product-info-bottom {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
}
.product-info .price {
  font-weight: 600;
}
.empty {
  padding: 70px 20px;
  text-align: center;
  border: 1px solid var(--line);
  grid-column: 1/-1;
}
.empty h2 {
  font-size: 28px;
  letter-spacing: -0.04em;
}
.empty p {
  max-width: 400px;
  margin: 0 auto 22px;
  color: var(--muted);
  font-size: 14px;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 15px 22px;
  min-height: 48px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  font-size: 12px;
  transition: background 0.2s;
}
.btn:hover {
  background: #444736;
}
.btn.secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn.secondary:hover {
  background: var(--surface);
}
.btn.full {
  width: 100%;
}
.btn.danger {
  background: var(--danger);
  border-color: var(--danger);
}
.editorial {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.editorial-copy {
  padding: 70px 8vw;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
}
.editorial-copy h2 {
  font-size: clamp(35px, 4.8vw, 72px);
  line-height: 1;
  letter-spacing: -0.055em;
  max-width: 430px;
  margin: 25px 0;
}
.editorial-copy p {
  font-size: 14px;
  max-width: 350px;
  color: var(--muted);
}
.editorial-solo {
  grid-template-columns: 1fr;
}
.editorial-image {
  background: var(--image-bg, #e5e3d8);
  min-height: 450px;
  padding: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.editorial-image img {
  width: 100%;
  height: 480px;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.site-footer {
  padding: 55px 40px 25px;
}
.footer-top {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 70px;
}
.footer-top h2 {
  font-size: 28px;
  letter-spacing: -0.04em;
}
.footer-top p {
  font-size: 13px;
  color: var(--muted);
  max-width: 280px;
}
.footer-links {
  display: flex;
  gap: 60px;
}
.footer-links div {
  display: grid;
  gap: 12px;
  align-content: start;
  font-size: 12px;
}
.footer-word {
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  font-size: clamp(70px, 16vw, 220px);
  letter-spacing: -0.065em;
  line-height: 0.9;
  overflow: hidden;
  white-space: nowrap;
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--line);
  margin-top: 25px;
  padding-top: 20px;
  font-size: 10px;
  color: var(--muted);
}
dialog {
  border: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  max-height: 100dvh;
  max-width: 100vw;
}
dialog::backdrop {
  background: rgba(20, 22, 16, 0.38);
  backdrop-filter: blur(2px);
}
.drawer {
  position: fixed;
  inset: 0 0 0 auto;
  margin: 0;
  width: 500px;
  height: 100dvh;
  padding: 28px;
  overflow: auto;
}
.dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
}
.dialog-head h2 {
  margin: 0;
  font-size: 27px;
  letter-spacing: -0.04em;
}
.drawer-nav {
  display: grid;
  gap: 0;
  margin-top: 30px;
}
.drawer-nav a {
  font-family: var(--font-menu, var(--font-body));
  font-weight: var(--font-menu-weight, 400);
  font-size: 30px;
  letter-spacing: -0.04em;
  border-bottom: 1px solid var(--line);
  padding: 15px 10px;
  margin-inline: -10px;
}
/* Same accent as the catalogue tabs when the pointer lands on a menu line. */
@media (hover: hover) {
  .drawer-nav a:hover {
    background: var(--olive);
    color: var(--on-accent);
  }
}
.drawer-nav a:focus-visible {
  background: var(--olive);
  color: var(--on-accent);
}
.drawer-nav a[aria-current='page'] {
  text-decoration: underline;
  text-underline-offset: 6px;
}
.drawer-categories .label {
  margin-bottom: 4px;
}
.drawer-categories a {
  font-size: 19px;
  padding: 11px 10px;
}
.drawer-foot {
  margin-top: 40px;
  font-size: 13px;
}
.search-dialog {
  width: min(680px, 100%);
  padding: 30px;
}
.search-dialog form {
  display: flex;
  gap: 12px;
}
.cart-row {
  display: grid;
  grid-template-columns: 85px 1fr;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.cart-row img {
  width: 85px;
  height: 105px;
  object-fit: contain;
  background: var(--image-bg, var(--surface));
  mix-blend-mode: multiply;
}
.cart-row h3 {
  font-size: 14px;
  margin: 0 0 5px;
}
.quantity {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  margin-top: 12px;
}
.quantity button {
  width: 32px;
  height: 32px;
}
.quantity span {
  font-size: 12px;
  min-width: 26px;
  text-align: center;
}
.cart-row .remove {
  font-size: 11px;
  text-decoration: underline;
  margin-left: 15px;
}
.summary-line {
  display: flex;
  justify-content: space-between;
  margin: 16px 0;
  font-size: 13px;
}
.summary-total {
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 19px;
}
/* The last bag row already draws the rule; one line, not two. */
.cart-row + .summary-total {
  border-top: 0;
  padding-top: 4px;
}
.payment-frame {
  margin: 22px 0;
  border: 1px solid var(--line);
  background: #fff;
}
.payment-frame iframe {
  display: block;
  width: 100%;
  min-height: 680px;
  border: 0;
}
.note {
  padding: 17px;
  border: 1px solid var(--line);
  font-size: 12px;
  line-height: 1.6;
  background: var(--surface);
  margin: 18px 0;
}
.error {
  color: var(--danger);
  font-size: 13px;
  line-height: 1.5;
}
.breadcrumbs {
  display: flex;
  gap: 12px;
  padding: 25px 40px;
  font-size: 11px;
  color: var(--muted);
}
.product-detail {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 6vw;
  padding: 0 40px 70px;
}
.product-copy {
  padding-top: 30px;
  align-self: start;
  position: sticky;
  top: 120px;
}
.product-copy h1 {
  font-size: clamp(33px, 4vw, 54px);
  margin: 18px 0 23px;
}
.product-price {
  font-size: 22px;
  margin-bottom: 28px;
}
/* Condition meter: warm pip ramp + visible score and tier label. */
.condition-meter {
  --cm-ink: #2b2a22;
  --cm-track: #ebe8de;
  margin: -6px 0 28px;
  padding: 16px 18px 18px;
  border-radius: 18px;
  background:
    radial-gradient(
      120% 140% at 100% 0%,
      color-mix(in srgb, var(--meter-color) 16%, transparent),
      transparent 60%
    ),
    #fffdf7;
  border: 1px solid color-mix(in srgb, var(--meter-color) 30%, #e4e1d6);
  color: var(--cm-ink);
  max-width: 460px;
}
.cm-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.cm-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.cm-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px 5px 9px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--cm-ink);
  background: color-mix(in srgb, var(--meter-color) 24%, #fff);
  border: 1px solid color-mix(in srgb, var(--meter-color) 55%, transparent);
}
.cm-chip svg {
  flex: none;
  color: color-mix(in srgb, var(--meter-color) 70%, #000);
}
.cm-main {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 12px;
}
.cm-score {
  flex: none;
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.cm-score small {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--muted);
  margin-left: 2px;
}
.cm-pips {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 5px;
  min-width: 0;
}
.cm-pip {
  display: block;
  height: 16px;
  border-radius: 999px;
  background: var(--cm-track);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 6%);
}
.cm-pip[data-fill='full'] {
  background: var(--c);
  box-shadow: inset 0 -3px 0 rgb(0 0 0 / 10%);
}
.cm-pip[data-fill='half'] {
  background: linear-gradient(90deg, var(--c) 50%, var(--cm-track) 50%);
}
@media (prefers-reduced-motion: no-preference) {
  .cm-pip[data-fill='full'],
  .cm-pip[data-fill='half'] {
    animation: cm-pip-in 420ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
    animation-delay: calc(var(--i) * 45ms);
  }
}
@keyframes cm-pip-in {
  from {
    transform: scaleY(0.2);
    opacity: 0;
  }
}
@media (max-width: 420px) {
  .condition-meter {
    padding: 14px 14px 16px;
  }
  .cm-score {
    font-size: 34px;
  }
  .cm-pips {
    gap: 4px;
  }
  .cm-pip {
    height: 14px;
  }
}
.product-description {
  font-size: 14px;
  white-space: pre-line;
  color: var(--muted);
  margin: 25px 0;
}
.variant-picks {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 12px 0 22px;
}
.variant-picks button {
  border: 1px solid var(--line);
  padding: 12px 17px;
  font-size: 12px;
}
.variant-picks button.active {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}
.detail-actions {
  display: flex;
  gap: 10px;
  margin-top: 24px;
}
.detail-actions > .btn {
  flex: 1;
}
details {
  border-bottom: 1px solid var(--line);
  padding: 17px 0;
  font-size: 13px;
}
summary {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  list-style: none;
}
summary::after {
  content: '+';
}
details[open] summary::after {
  content: '−';
}
details p {
  margin: 15px 0 0;
  color: var(--muted);
  white-space: pre-line;
}
.page {
  max-width: 1150px;
  margin: auto;
  padding: 65px 40px 100px;
  min-height: 60vh;
}
.prose {
  max-width: 720px;
}
.prose h1 {
  margin: 20px 0 40px;
}
.prose .body-copy {
  white-space: pre-line;
  font-size: 16px;
  line-height: 1.9;
}
.checkout-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 70px;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.form-grid .wide {
  grid-column: 1/-1;
}
.checkbox {
  display: flex;
  align-items: start;
  gap: 10px;
  line-height: 1.5;
  font-size: 12px;
}
.checkbox input {
  flex-shrink: 0;
  margin-top: 2px;
}
.order-summary {
  background: var(--surface);
  padding: 27px;
  align-self: start;
  position: sticky;
  top: 120px;
}
.order-summary h2 {
  font-size: 24px;
  letter-spacing: -0.03em;
}
.order-summary .cart-row {
  grid-template-columns: 60px 1fr;
}
.order-summary .cart-row img {
  width: 60px;
  height: 80px;
}
.progress-list {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 0;
  margin: 40px 0;
}
.progress-list li {
  flex: 1;
  border-top: 2px solid var(--line);
  padding-top: 15px;
  font-size: 12px;
}
.progress-list li.done {
  border-color: var(--olive);
}
#toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translate(-50%, 20px);
  background: var(--ink);
  color: #fff;
  padding: 16px 25px;
  z-index: 300;
  max-width: calc(100vw - 30px);
  width: max-content;
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
  transition: 0.2s;
}
#toast.visible {
  opacity: 1;
  transform: translate(-50%, 0);
}
.initial-load {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-family: var(--font-display);
  font-size: 28px;
  gap: 20px;
}
.loading-skeleton {
  height: 300px;
  background: var(--surface);
}
.no-wrap {
  white-space: nowrap;
}
@media (max-width: 1000px) {
  .site-header {
    padding: 12px 24px;
  }
  .header-left,
  .header-right {
    gap: 8px;
  }
  .header-menu-label {
    display: none;
  }
  .section {
    padding: 40px 24px;
  }
  .product-grid {
    gap: 30px 14px;
  }
  .footer-links {
    gap: 30px;
  }
  .checkout-grid {
    gap: 30px;
  }
  .product-detail {
    padding: 0 24px 50px;
    gap: 30px;
  }
  .intro-meta,
  .intro-bottom {
    left: 24px;
    right: 24px;
  }
}
@media (max-width: 650px) {
  .site-header {
    min-height: 72px;
    padding: 10px 14px;
    gap: 4px;
  }
  .brand {
    font-size: 18px;
  }
  .brand small {
    font-size: 6px;
  }
  .header-left,
  .header-right {
    gap: 0;
  }
  .header-left .search-open,
  .header-right .favorite-link {
    display: none;
  }
  .header-right .lang-switch {
    font-size: 9px;
    margin-right: 2px;
  }
  .icon-button {
    min-width: 36px;
    padding: 6px;
  }
  .icon-button svg {
    width: 20px;
  }
  .intro {
    --hero-h: 370px;
    /* Phones keep the meta and intro lines clear of the pieces. */
    --hp-media-h: calc(var(--hero-h) * var(--hp-size, 73) * 0.78 / 100);
  }
  .hero-item img {
    max-width: 58vw;
  }
  .hero-osd {
    top: 16px;
    left: 18px;
    font-size: 12px;
  }
  .hero-osd[data-osd='date'] {
    bottom: 58px;
    font-size: 13px;
  }
  .intro-meta {
    top: 19px;
    left: 19px;
    right: 19px;
  }
  .intro-meta .label {
    font-size: 8px;
  }
  .intro-word {
    font-size: 19.4vw;
    top: 120px;
    -webkit-text-stroke-width: 6px;
    text-shadow: 0 3px 0 var(--hero-ink);
  }
  .intro[data-hero-style='condensed'] .intro-word {
    top: 102px;
    font-size: 27.5vw;
    -webkit-text-stroke-width: 8px;
  }
  .hero-track {
    padding-bottom: 32px;
  }
  .intro-bottom {
    bottom: 22px;
    left: 19px;
    right: 19px;
  }
  .intro-bottom p {
    font-size: 11px;
    max-width: 150px;
  }
  .intro-bottom .text-link {
    font-size: 10px;
    gap: 9px;
  }
  .pause {
    right: 15px;
    top: 42px;
    font-size: 9px;
  }
  .ticker {
    justify-content: flex-start;
    padding-left: 18px;
    gap: 25px;
    font-size: 8px;
  }
  /* Phones drop the last item, unless it is the only one left (S-110). */
  .ticker span:last-child:not(:first-child) {
    display: none;
  }
  .section {
    padding: 35px 16px;
  }
  .section-heading {
    align-items: center;
    margin-bottom: 22px;
  }
  .section-heading h2,
  .section-heading h1 {
    font-size: 31px;
  }
  .section-heading p {
    font-size: 11px;
    max-width: 130px;
  }
  .collection-strip,
  .category-strip {
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
  }
  .collection-strip a,
  .category-strip a {
    padding: 14px 17px;
    font-size: 11px;
  }
  .collection-header {
    margin: 22px 0 20px;
  }
  .collection-head > h1 {
    font-size: min(
      clamp(36px, 11vw, 48px),
      calc((100vw - 32px) / (var(--title-chars, 8) * 0.74))
    );
    letter-spacing: -0.04em;
  }
  .collection-head {
    display: block;
  }
  .collection-slogan {
    margin: 10px 0 0;
    text-align: left;
  }
  .collection-header .collection-intro {
    margin-top: 10px;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.005em;
  }
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 11px;
  }
  .product-info h3 {
    font-size: 12px;
  }
  .product-info .brandline {
    font-size: 8px;
  }
  .product-info-bottom {
    font-size: 10px;
    flex-wrap: wrap;
  }
  .product-badge {
    left: 8px;
    top: 12px;
    font-size: 7px;
  }
  .product-card .favorite {
    right: 5px;
    top: 5px;
    min-width: 30px;
    min-height: 30px;
  }
  .product-card .favorite svg {
    width: 16px;
  }
  .catalog-toolbar {
    gap: 8px;
    margin-bottom: 16px;
  }
  .catalog-toolbar select {
    font-size: 10px;
    max-width: 150px;
    /* The result count shares this row: the select gives way on the narrowest phones. */
    min-width: 0;
    flex: 0 1 auto;
  }
  .editorial {
    grid-template-columns: 1fr;
  }
  .editorial-copy {
    padding: 45px 25px;
  }
  .editorial-copy h2 {
    font-size: 46px;
  }
  .editorial-image {
    min-height: 320px;
    padding: 24px 25px 32px;
  }
  .editorial-image img {
    height: 360px;
  }
  .footer-top {
    flex-direction: column;
    margin-bottom: 45px;
  }
  .site-footer {
    padding: 40px 20px 23px;
  }
  .footer-links {
    justify-content: space-between;
  }
  .footer-bottom {
    font-size: 8px;
    gap: 15px;
  }
  .drawer {
    width: 100%;
    padding: 22px;
  }
  .breadcrumbs {
    padding: 20px 16px;
    font-size: 10px;
  }
  .product-detail {
    grid-template-columns: 1fr;
    padding: 0 16px 35px;
    gap: 22px;
  }
  .product-copy {
    position: static;
    padding: 0;
  }
  .product-copy h1 {
    font-size: 37px;
    margin: 14px 0 20px;
  }
  .page {
    padding: 40px 18px 70px;
  }
  .checkout-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .order-summary {
    position: static;
  }
  .form-grid {
    gap: 17px 12px;
  }
  .prose h1 {
    font-size: 42px;
  }
  .prose .body-copy {
    font-size: 14px;
  }
  .filter-panel {
    padding: 15px;
    gap: 14px;
  }
  .filter-panel label {
    min-width: 120px;
  }
  .progress-list li {
    font-size: 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .hero-track {
    transform: translateX(-100px);
    will-change: auto;
  }
}

.footer-word {
  font-size: clamp(34px, 8.6vw, 140px);
}
@media (max-width: 650px) {
  .footer-word {
    font-size: 8.3vw;
  }
}
.editorial-image {
  overflow: hidden;
}
@media (max-width: 370px) {
  .brand {
    font-size: 15px;
  }
  .site-header {
    padding-inline: 8px;
  }
  .header-right .lang-switch {
    font-size: 8px;
  }
  .header-right .icon-button {
    min-width: 28px;
  }
  .intro-meta .label {
    font-size: 7px;
  }
  .section-heading p {
    font-size: 10px;
    max-width: 110px;
  }
}

/* Quiet, purposeful motion and visible states for the shopping flow. */
body.dialog-open {
  overflow: hidden;
}
main {
  animation: page-arrive 0.25s ease-out both;
}
@keyframes page-arrive {
  from {
    opacity: 0.45;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
dialog[open] {
  animation: dialog-arrive 0.24s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
dialog[open]::backdrop {
  animation: backdrop-arrive 0.2s ease both;
}
@keyframes dialog-arrive {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes backdrop-arrive {
  from {
    background: transparent;
  }
  to {
    background: rgba(20, 22, 16, 0.38);
  }
}
.drawer[open] {
  animation: drawer-arrive 0.28s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@keyframes drawer-arrive {
  from {
    transform: translateX(35px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
button,
a,
input,
select,
summary {
  outline-offset: 4px;
}
:focus-visible {
  outline: 2px solid var(--ink);
}
.favorite svg {
  transition:
    transform 0.18s ease,
    fill 0.18s ease;
}
.favorite:active svg {
  transform: scale(0.86);
}
.variant-picks button,
.collection-strip a,
.category-strip a {
  transition:
    background-color 0.18s,
    border-color 0.18s,
    color 0.18s;
}
.quantity button {
  width: 40px;
  height: 40px;
}
.quantity button:hover:not(:disabled) {
  background: var(--line);
}
.summary-line {
  gap: 20px;
}
.summary-line > span:last-child {
  flex-shrink: 0;
}
.checkout-back {
  margin: 20px 0 28px;
}
#checkout-error:empty {
  display: none;
}
#checkout-error:focus {
  outline: none;
}
.return-request {
  margin: 18px 0;
  border: 1px solid var(--line);
  padding: 14px 17px;
  max-width: 650px;
}
.return-request summary {
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.return-request form {
  display: grid;
  gap: 14px;
  padding-top: 8px;
}
.return-request fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}
.return-request textarea {
  width: 100%;
}
.order-lookup {
  display: flex;
  align-items: end;
  gap: 14px;
  margin: 30px 0;
  max-width: 650px;
}
.order-lookup label {
  flex: 1;
  min-width: 0;
}
[aria-busy='true'] {
  cursor: progress;
}
@media (max-width: 650px) {
  .order-lookup {
    flex-direction: column;
    align-items: stretch;
  }
  .search-dialog form {
    align-items: end;
  }
  .search-dialog {
    padding: 22px;
  }
  .search-dialog h2 {
    font-size: 23px;
  }
}
@media (prefers-reduced-motion: reduce) {
  main,
  dialog[open],
  dialog[open]::backdrop,
  .drawer[open] {
    animation: none !important;
  }
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }
}

/* Owner feedback 1 Nov: products float as cut-outs (no photo squares) at near
   full hero height; the hero player rules above implement it. */
.intro-meta,
.intro-bottom,
.pause {
  z-index: 3;
}

/* Studio theme wordmark (ref. Rent Club Paris): solid and outlined words take
   their font, colours, case, spacing and size from theme tokens. Each word may
   carry its own stroke ("çerçeve") colour and width via --w-stroke*. */
.intro[data-hero-color] .intro-word,
.intro[data-hero-color][data-hero-style='condensed'] .intro-word {
  font-size: calc(
    clamp(40px, 7.2vw, 132px) * var(--word-scale, 1) * var(--word-fit, 1)
  );
  letter-spacing: var(--word-spacing, -0.07em);
  text-transform: var(--word-case, uppercase);
  white-space: nowrap;
  color: var(--olive);
  -webkit-text-stroke: 0 transparent;
  text-shadow: none;
}
.intro[data-hero-color] .intro-word .word-solid {
  color: var(--olive);
  -webkit-text-stroke: var(--w-stroke, 0px)
    var(--w-stroke-color, var(--theme-outline));
  paint-order: stroke fill;
  text-shadow: var(--word-shadow, none);
}
.intro[data-hero-color] .intro-word .word-outline {
  color: transparent;
  -webkit-text-stroke: max(2px, var(--w-stroke, 0.03em))
    var(--w-stroke-color, var(--theme-outline));
  text-shadow: none;
  filter: drop-shadow(0 0 0.5px var(--paper))
    drop-shadow(0 0 0.035em color-mix(in srgb, var(--paper) 85%, transparent));
}
@media (max-width: 650px) {
  .intro[data-hero-color] .intro-word,
  .intro[data-hero-color][data-hero-style='condensed'] .intro-word {
    top: 118px;
    font-size: calc(17vw * var(--word-scale, 1) * var(--word-fit, 1));
    line-height: 0.95;
    white-space: normal;
  }
  .intro[data-hero-color] .intro-word span {
    display: block;
  }
}
/* Studio theme header logo: text (scaled) or an uploaded PNG/WebP image. */
.site-header .brand {
  font-size: calc(clamp(17px, 2.3vw, 30px) * var(--logo-scale, 1));
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}
/* The Worker paints the app's own header, footer and home hero first
   (data-shell on #app). The app's render then replaces that HTML in place, so
   its main must not replay the arrival fade/slide, which moved the page 5px. */
#app[data-shell] > main {
  animation: none;
}
/* On phones the app shrinks the wordmark to the screen width (fitWordmark), which
   needs the real text width. The server copy waits for it, invisible, instead
   of showing a larger wordmark first. CSS alone shows it after 2.5 s if the app
   never runs; with reduced motion there is no animation and it shows at once. */
@media (max-width: 650px) {
  .intro[data-shell-hero] .intro-word {
    animation: shell-word 0.2s ease-out 2.5s both;
  }
  #app[data-shell] .intro:not([data-shell-hero]) .intro-word {
    animation: shell-word 0.2s ease-out both;
  }
}
@keyframes shell-word {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* Crawlable copy that the app's layout has no visible place for. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.brand-image {
  display: block;
  height: calc(clamp(28px, 3.4vw, 46px) * var(--logo-scale, 1));
  width: auto;
  max-width: min(46vw, 340px);
  margin: 0 auto;
  object-fit: contain;
}
.theme-preview-note {
  margin: 0;
  padding: 8px 18px;
  font-size: 11px;
  line-height: 1.5;
  color: #171813;
  background: #eeead6;
  text-align: center;
}
@media (max-width: 650px) {
  .site-header .brand {
    font-size: calc(18px * var(--logo-scale, 1));
  }
  .brand-image {
    height: calc(26px * var(--logo-scale, 1));
  }
}
@media (max-width: 370px) {
  .site-header .brand {
    font-size: calc(15px * var(--logo-scale, 1));
  }
}
.intro-bottom .text-link {
  margin-left: auto;
}
/* Contact links: page block and compact footer row. Glyphs inherit currentColor. */
.contact-block {
  margin-top: 40px;
}
.contact-block h2.label {
  margin: 0 0 18px;
}
.seller-block {
  margin-top: 40px;
}
.seller-block h2.label {
  margin: 0 0 18px;
}
.seller-block dl {
  margin: 0;
  display: grid;
  gap: 14px;
}
.seller-block dt {
  font-size: 12px;
  color: var(--muted);
}
.seller-block dd {
  margin: 2px 0 0;
  overflow-wrap: anywhere;
  white-space: pre-line;
}
.contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}
.contact-list a {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 8px 0;
  font-size: 15px;
  overflow-wrap: anywhere;
}
.contact-list a:hover .contact-value,
.contact-list a:focus-visible .contact-value {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.contact-icon {
  display: inline-flex;
  flex: none;
}
.contact-icon svg {
  display: block;
}
.contact-key {
  color: var(--muted);
}
.contact-list.compact {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin-top: 18px;
}
.contact-list.compact a {
  gap: 9px;
  font-size: 12px;
}
.contact-list.compact svg {
  width: 16px;
  height: 16px;
}

/* Product gallery and lightbox (product-gallery.ts). Fixed aspect boxes keep the
   page from shifting while photographs load. */
.product-media {
  min-width: 0;
}
.product-gallery {
  --gallery-bg: var(--image-bg, #eeede8);
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.product-gallery.single {
  grid-template-columns: minmax(0, 1fr);
}
.gallery-frame {
  position: relative;
  grid-column: 2;
  grid-row: 1;
  aspect-ratio: 4/5;
  background: var(--gallery-bg);
  overflow: hidden;
}
.product-gallery.single .gallery-frame {
  grid-column: 1;
}
.gallery-track {
  display: flex;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.gallery-track::-webkit-scrollbar {
  display: none;
}
.gallery-slide {
  flex: 0 0 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: zoom-in;
}
.gallery-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  user-select: none;
  -webkit-user-drag: none;
  transition:
    transform 0.2s ease-out,
    opacity 0.2s ease;
}
.gallery-slide.zooming img {
  transform: scale(2);
  transition: none;
}
.gallery-slide.gallery-video {
  cursor: auto;
}
.gallery-slide video {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  background: var(--gallery-bg);
}
.gallery-slide:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: -4px;
}
.gallery-arrow {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(247, 246, 242, 0.88);
  color: var(--ink);
  opacity: 0;
  transition: opacity 0.18s;
}
.gallery-arrow.prev {
  left: 12px;
}
.gallery-arrow.next {
  right: 12px;
}
.gallery-frame:hover .gallery-arrow,
.gallery-arrow:focus-visible {
  opacity: 1;
}
.gallery-count {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 3px 9px;
  border-radius: 20px;
  background: rgba(247, 246, 242, 0.88);
  font-size: 11px;
  letter-spacing: 0.04em;
  pointer-events: none;
}
.gallery-rail {
  grid-column: 1;
  grid-row: 1;
  align-self: stretch;
  contain: size;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  scrollbar-width: none;
}
.gallery-rail::-webkit-scrollbar {
  display: none;
}
.gallery-thumb {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: 4/5;
  overflow: hidden;
  padding: 4px;
  border: 1px solid transparent;
  background: var(--gallery-bg);
  transition: border-color 0.18s;
}
.gallery-thumb.active {
  border-color: var(--ink);
}
.gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.play-badge {
  position: absolute;
  inset: 50% auto auto 50%;
  translate: -50% -50%;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  padding-left: 2px;
  border-radius: 50%;
  background: rgba(23, 24, 19, 0.78);
  color: #fff;
}
/* Touch: arrows stay visible (≥44px) next to swipe; the counter reads "2 / 7". */
@media (hover: none), (pointer: coarse) {
  .gallery-arrow {
    width: 44px;
    height: 44px;
    opacity: 1;
    box-shadow: 0 1px 6px rgba(20, 22, 16, 0.12);
  }
  .gallery-arrow.prev {
    left: 8px;
  }
  .gallery-arrow.next {
    right: 8px;
  }
  .gallery-slide {
    cursor: pointer;
  }
  .gallery-count {
    font-size: 12px;
    padding: 4px 10px;
  }
}
@media (max-width: 650px) {
  .product-gallery {
    grid-template-columns: minmax(0, 1fr);
  }
  .gallery-frame {
    grid-column: 1;
    aspect-ratio: 3/4;
    margin-inline: -16px;
  }
  .gallery-rail {
    grid-row: 2;
    contain: none;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
  }
  .gallery-thumb {
    width: 60px;
    scroll-snap-align: start;
  }
}

.lightbox {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  background: rgb(14, 14, 12);
  color: #f7f6f2;
  overflow: hidden;
  overscroll-behavior: contain;
}
.lightbox[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  animation: lightbox-arrive 0.2s ease-out both;
}
@keyframes lightbox-arrive {
  from {
    opacity: 0;
  }
}
.lightbox-bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: max(8px, env(safe-area-inset-top))
    max(12px, env(safe-area-inset-right)) 8px
    max(18px, env(safe-area-inset-left));
}
.lightbox-count {
  font-size: 12px;
  letter-spacing: 0.08em;
}
.lightbox-tools {
  display: flex;
  gap: 4px;
}
.lightbox .icon-button {
  color: inherit;
  border-radius: 50%;
}
.lightbox .icon-button:disabled {
  opacity: 0.35;
}
.lightbox .icon-button:focus-visible {
  outline: 2px solid #f7f6f2;
  outline-offset: 2px;
}
.lightbox-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  padding: 0 max(0px, env(safe-area-inset-right)) env(safe-area-inset-bottom)
    max(0px, env(safe-area-inset-left));
}
.lightbox-media {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transform-origin: center;
  will-change: transform;
  cursor: zoom-in;
  -webkit-user-drag: none;
}
video.lightbox-media {
  cursor: auto;
  width: 100%;
}
.lightbox.zoomed .lightbox-media {
  cursor: grab;
}
.lightbox-media.animating {
  transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.lightbox-nav {
  position: absolute;
  z-index: 2;
  top: 50%;
  translate: 0 -50%;
  background: rgba(14, 14, 12, 0.5);
}
.lightbox-nav.prev {
  left: max(10px, env(safe-area-inset-left));
}
.lightbox-nav.next {
  right: max(10px, env(safe-area-inset-right));
}
.lightbox.zoomed .lightbox-nav {
  opacity: 0;
  pointer-events: none;
}
@media (hover: none), (pointer: coarse) {
  .lightbox-nav {
    bottom: max(16px, env(safe-area-inset-bottom));
    top: auto;
    translate: none;
    width: 48px;
    height: 48px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .lightbox[open],
  .lightbox-media.animating,
  .gallery-slide img,
  .gallery-arrow {
    animation: none !important;
    transition: none !important;
  }
}

/* Photo frames (photo-fit-dom.ts). A photo stays whole in the 3:4 card.
   A photo with a light studio edge is lifted so that edge is pure white;
   multiply then shows exactly the theme image backdrop, so no lighter box shows
   (the desktop look, on every screen). A dark flat edge paints the frame in its
   own colour. Only a 3:4 photo without a light edge fills the card, and the box
   stays the same size while the edge is being read, so nothing jumps. */
.product-picture[data-fit='cover'][data-backdrop='theme'] > img,
.product-picture[data-fit='cover'][data-backdrop='match'] > img {
  padding: 0;
  object-fit: cover;
  mix-blend-mode: normal;
  clip-path: inset(1px);
}
.product-picture[data-backdrop='lift'] > img {
  filter: brightness(var(--photo-lift, 1));
  mix-blend-mode: multiply;
}
.product-picture[data-backdrop='match'],
.gallery-slide[data-backdrop='match'],
.gallery-thumb[data-backdrop='match'],
.editorial-image[data-backdrop='match'] {
  background: var(--photo-bg);
}
.product-picture[data-backdrop='match'] > img,
.gallery-slide[data-backdrop='match'] > img,
.gallery-thumb[data-backdrop='match'] > img,
.editorial-image[data-backdrop='match'] > img {
  mix-blend-mode: normal;
}
/* Gallery and home page photos: a light backdrop is really cut out, so the piece
   keeps its exact colours on any backdrop and the page shows through, even where a
   browser ignores the multiply. The white photo never flashes while that runs. */
.gallery-slide[data-backdrop='pending'] > img,
.gallery-thumb[data-backdrop='pending'] > img,
.editorial-image[data-backdrop='pending'] > img {
  opacity: 0;
}
.product-picture[data-backdrop='cutout'] > img,
.gallery-slide[data-backdrop='cutout'] > img,
.gallery-thumb[data-backdrop='cutout'] > img,
.editorial-image[data-backdrop='cutout'] > img {
  mix-blend-mode: normal;
  filter: none;
}
.gallery-thumb > img,
.editorial-image > img {
  transition: opacity 0.2s ease;
}
/* Studio JPEGs often carry a hairline darker border; sizing the photo to its own
   box lets clip-path trim it so no outline shows. A stored cut-out (#131) sits in
   the same box on the theme backdrop, so every card shares one colour. */
.product-picture[data-backdrop='cutout'] > img,
.product-picture[data-backdrop='lift'] > img {
  position: absolute;
  inset: var(--card-pad-top) var(--card-pad) var(--card-pad);
  margin: auto;
  width: auto;
  height: auto;
  max-width: calc(100% - 2 * var(--card-pad));
  max-height: calc(100% - var(--card-pad-top) - var(--card-pad));
  padding: 0;
  object-fit: contain;
  clip-path: inset(1px);
}
@media (max-width: 1000px) {
  .product-picture {
    --card-pad: 12px;
    --card-pad-top: 38px;
  }
}
@media (max-width: 650px) {
  .product-picture {
    --card-pad: 8px;
    --card-pad-top: 30px;
  }
}

/* Phones and tablets (#26): 44px tap targets, 16px form text (no iOS focus
   zoom) and readable small print. Visual sizes stay; hit areas grow. */
@media (pointer: coarse), (max-width: 650px) {
  input:not([type='checkbox']):not([type='radio']),
  select,
  textarea {
    font-size: 16px;
  }
  .catalog-toolbar select {
    font-size: 16px;
    min-height: 44px;
  }
  .lang-switch a {
    display: inline-grid;
    place-items: center;
    min-width: 30px;
    min-height: 44px;
    padding: 0 2px;
  }
  .lang-switch .current {
    border-bottom: 0;
    text-decoration: underline;
    text-underline-offset: 5px;
  }
  .pause {
    min-height: 44px;
    padding: 8px 10px;
  }
  .text-link {
    min-height: 44px;
  }
  .collection-strip a,
  .category-strip a,
  .collection-strip + .category-strip a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .filter-button,
  .variant-picks button,
  .breadcrumbs a,
  .footer-links a,
  .footer-bottom a,
  .contact-list a,
  .cart-row .remove {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .footer-links div {
    gap: 0;
  }
  .breadcrumbs {
    padding-block: 8px;
    align-items: center;
  }
  summary {
    min-height: 44px;
    align-items: center;
  }
  details {
    padding: 6px 0;
  }
  details p {
    margin: 4px 0 12px;
  }
  .quantity button {
    width: 44px;
    height: 44px;
  }
  label.checkbox {
    min-height: 44px;
    align-items: center;
  }
}
@media (max-width: 650px) {
  .brand small {
    font-size: 8px;
    letter-spacing: 0.3em;
  }
  .header-right .lang-switch {
    font-size: 11px;
    gap: 2px;
  }
  .pause {
    font-size: 11px;
    top: 34px;
    right: 10px;
  }
  .intro-meta .label,
  .ticker {
    font-size: 10px;
  }
  .section-heading p {
    font-size: 12px;
  }
  .collection-strip a,
  .category-strip a {
    font-size: 12px;
  }
  .product-info h3 {
    font-size: 13px;
  }
  .product-info .brandline {
    font-size: 10px;
  }
  .product-info-bottom {
    font-size: 12px;
  }
  .product-badge {
    font-size: 9px;
  }
  /* 44px save target; the heart keeps its size. */
  .product-card .favorite {
    right: 0;
    top: 0;
    min-width: 44px;
    min-height: 44px;
    background: transparent;
  }
  .product-card .favorite svg {
    width: 18px;
  }
  .catalog-toolbar select {
    max-width: 170px;
  }
  .filter-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
  .filter-panel label {
    min-width: 0;
  }
  .footer-bottom {
    font-size: 11px;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 15px;
  }
  .breadcrumbs {
    font-size: 12px;
    flex-wrap: wrap;
    gap: 0 12px;
  }
}
@media (max-width: 370px) {
  .brand small {
    font-size: 7px;
    letter-spacing: 0.24em;
  }
  .header-right .lang-switch {
    font-size: 10px;
  }
  .intro-meta .label {
    font-size: 9px;
  }
  .section-heading p {
    font-size: 11px;
  }
}
@media (max-width: 650px) {
  .icon-button,
  .header-right .icon-button {
    min-width: 44px;
  }
}
/* 320px: the wordmark keeps its full width; icons stay 44px tall. */
@media (max-width: 370px) {
  .site-header {
    padding-inline: 4px;
  }
  .icon-button,
  .header-right .icon-button {
    min-width: 40px;
    padding: 6px 4px;
  }
  .lang-switch a {
    min-width: 26px;
  }
  .header-right .lang-switch {
    gap: 0;
  }
}
/* Touch screens keep :hover after a tap; the card zoom is for mouse hover only. */
@media (hover: none) {
  .product-card:hover .product-picture > img {
    transform: none;
  }
}
/* Touch selects: WebKit draws a short native pill that ignores min-height.
   A flat field with a currentColor chevron keeps 44px+ and follows the theme. */
@media (pointer: coarse), (max-width: 650px) {
  select {
    -webkit-appearance: none;
    appearance: none;
    min-height: 44px;
    padding-right: 34px;
    background-image:
      linear-gradient(45deg, transparent 50%, currentColor 50%),
      linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position:
      calc(100% - 18px) 50%,
      calc(100% - 13px) 50%;
    background-size: 5px 5px;
    background-repeat: no-repeat;
  }
  .catalog-toolbar select {
    padding-right: 24px;
    background-position:
      calc(100% - 10px) 50%,
      calc(100% - 5px) 50%;
  }
}

/* Customer accounts (#33, #53). Mobile first: one column, 16px inputs,
   44px targets; tablets/desktop add a side navigation. */
.account-link {
  position: relative;
}
.account-link-start {
  display: none;
}
@media (max-width: 650px) {
  .site-header .account-link-start {
    display: inline-flex;
  }
  .site-header .account-link-end {
    display: none;
  }
  /* Room for the account icon without shrinking the wordmark: the TR/EN pair
     keeps its 44px-tall targets but drops the slash, and the header tightens. */
  .site-header {
    gap: 0;
    padding-inline: 8px;
  }
  .site-header .header-right .lang-switch {
    gap: 0;
    margin-right: 0;
  }
  .site-header .lang-switch > span {
    display: none;
  }
}
/* 320px phones: the menu + account pair narrows like the right-hand icons so
   the wordmark keeps its full width (targets stay 44px tall). */
@media (max-width: 370px) {
  .site-header {
    padding-inline: 8px;
  }
  .header-left .icon-button {
    min-width: 28px;
    padding-inline: 4px;
  }
}
.account-link.signed-in::after {
  content: '';
  position: absolute;
  top: 9px;
  right: 9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--olive);
}
.account-auth {
  display: grid;
  justify-items: center;
}
.account-auth-card {
  width: 100%;
  max-width: 440px;
}
.account-auth-card h1,
.account-head h1 {
  font-size: clamp(34px, 8vw, 54px);
  margin: 14px 0 18px;
  overflow-wrap: anywhere;
}
.account-lede {
  font-size: 15px;
}
.account-form {
  display: grid;
  gap: 18px;
}
.account-form h3,
.account-block h3 {
  font-size: 20px;
  margin: 0;
}
.account-field {
  display: grid;
}
.account-field input,
.account-field select,
.account-field textarea,
.combo input {
  font-size: 16px;
  min-height: 48px;
}
.field-hint {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.password-wrap {
  position: relative;
  display: block;
  margin-top: 7px;
}
.account-field > label {
  font-size: 13px;
}
.password-wrap input {
  padding-right: 52px;
}
.password-wrap .reveal {
  position: absolute;
  right: 2px;
  bottom: 2px;
  min-width: 44px;
  min-height: 44px;
  color: var(--muted);
}
.password-wrap .reveal[aria-pressed='true'] {
  color: var(--ink);
}
.forgot-link {
  justify-self: start;
  min-height: 44px;
}
.account-switch {
  margin-top: 26px;
  font-size: 14px;
}
.account-switch a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.google-button {
  gap: 12px;
  font-size: 14px;
  min-height: 52px;
  background: var(--white);
}
.or-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 22px 0;
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.or-divider::before,
.or-divider::after {
  content: '';
  flex: 1;
  border-top: 1px solid var(--line);
}
.consent {
  display: grid;
  gap: 10px;
  border: 0;
  padding: 0;
  margin: 0;
}
.consent .checkbox {
  font-size: 14px;
  min-height: 44px;
  align-items: center;
}
.consent .checkbox input {
  width: 22px;
  min-height: 22px;
  margin: 0;
}
.consent a,
.iys-note {
  font-size: 12px;
}
.account-head {
  margin-bottom: 8px;
}
.account-email {
  margin-top: -8px;
  overflow-wrap: anywhere;
}
.verify-banner .text-link {
  min-height: 44px;
}
.account-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 56px;
  margin-top: 28px;
}
.account-nav {
  display: grid;
  align-content: start;
  border-top: 1px solid var(--line);
}
.account-nav a,
.account-logout {
  display: flex;
  align-items: center;
  min-height: 52px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  text-align: left;
}
.account-nav a.active {
  font-weight: 700;
  box-shadow: inset 3px 0 0 var(--olive);
  padding-left: 14px;
}
.account-logout {
  color: var(--muted);
  width: 100%;
}
.account-content {
  min-width: 0;
}
.account-content > h2 {
  font-size: 30px;
  letter-spacing: -0.04em;
  margin-bottom: 22px;
}
.account-content .product-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.account-content .empty h3 {
  font-size: 22px;
}
.account-block {
  display: grid;
  gap: 14px;
  justify-items: start;
  border-top: 1px solid var(--line);
  padding-top: 26px;
  margin-top: 34px;
}
.account-block > label {
  width: 100%;
}
.danger-zone h3 {
  color: var(--danger);
}
.address-list {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
/* Checkout: the contract texts open in place and scroll inside their own box. */
.contract-texts details:first-child {
  border-top: 1px solid var(--line);
}
.contract-texts details p {
  max-height: 280px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.pay-total {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 18px 0 12px;
}
.pay-total[hidden] {
  display: none;
}
/* Phones: the delivery summary is far below, so the button says why it waits. */
.pay-reason {
  display: none;
  margin: 12px 0 8px;
}
@media (max-width: 650px) {
  .pay-reason:not(:empty) {
    display: block;
  }
}
.pay-total strong {
  font-size: 22px;
  font-weight: 600;
}
.pay-total .small {
  flex-basis: 100%;
}
.account-orders {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: grid;
  gap: 10px;
}
.account-order a {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 22px;
  gap: 14px;
  align-items: center;
  min-height: 88px;
  padding: 12px;
  border: 1px solid var(--line);
  background: var(--white);
  color: inherit;
  text-decoration: none;
}
.account-order img,
.account-order a > span:first-child {
  width: 64px;
  height: 80px;
  object-fit: cover;
  background: var(--line);
}
.account-order-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.account-order-status {
  font-weight: 600;
}
.account-order-items {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.address-card {
  border: 1px solid var(--line);
  background: var(--white);
  padding: 18px 18px 8px;
}
.address-card.default {
  border-color: var(--olive);
  box-shadow: inset 0 3px 0 var(--olive);
}
.address-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.address-card p {
  font-size: 14px;
  margin: 0 0 6px;
  overflow-wrap: anywhere;
}
.badge {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--olive);
  color: var(--ink);
  padding: 4px 8px;
}
.address-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0 18px;
}
.address-actions .text-link {
  min-height: 44px;
  min-width: 44px;
  justify-content: center;
  font-size: 13px;
  border-bottom: 0;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.danger-link {
  color: var(--danger);
}
.address-form {
  border: 1px solid var(--line);
  background: var(--white);
  padding: 22px 18px;
  margin-bottom: 22px;
  scroll-margin-top: 90px;
}
.label-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border: 0;
  padding: 0;
  margin: 0;
}
.label-chips legend {
  margin-bottom: 8px;
}
.chip {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--line);
  font-size: 14px;
}
.chip.active {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}
.label-chips input {
  flex: 1 1 120px;
  width: auto;
  min-width: 0;
  font-size: 16px;
  min-height: 44px;
}
.tr-fields,
.intl-fields {
  display: grid;
  gap: 18px;
}
.tr-fields[hidden],
.intl-fields[hidden] {
  display: none;
}
.combo {
  position: relative;
  font-size: 13px;
}
.combo label {
  display: block;
  margin-bottom: 7px;
}
.combo-list {
  position: absolute;
  z-index: 30;
  left: 0;
  right: 0;
  top: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: min(46vh, 320px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: var(--white);
  border: 1px solid var(--ink);
  border-top: 0;
  box-shadow: 0 12px 28px rgba(23, 24, 19, 0.12);
}
.combo-list li {
  display: flex;
  align-items: center;
  min-height: 46px;
  padding: 8px 14px;
  font-size: 16px;
  border-bottom: 1px solid var(--surface);
  cursor: pointer;
}
.combo-list li[aria-selected='true'],
.combo-list li:hover {
  background: var(--surface);
}
.combo-list .combo-empty {
  color: var(--muted);
  cursor: default;
}
.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.saved-address select {
  font-size: 16px;
}
.checkout-account {
  margin: 0;
}
.checkout-account a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
@media (max-width: 800px) {
  .account-layout {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 18px;
  }
  /* Phones: sections become a sticky, horizontally scrolling tab strip. */
  .account-nav {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    border-top: 0;
    border-bottom: 1px solid var(--line);
    margin: 0 -18px;
    padding: 0 18px;
    position: sticky;
    top: 72px;
    z-index: 20;
    background: var(--paper);
  }
  .account-nav::-webkit-scrollbar {
    display: none;
  }
  .account-nav a,
  .account-logout {
    flex: 0 0 auto;
    border-bottom: 2px solid transparent;
    padding: 0 12px;
    min-height: 48px;
    white-space: nowrap;
  }
  .account-nav a.active {
    box-shadow: none;
    border-bottom-color: var(--ink);
    padding-left: 12px;
  }
  .account-logout {
    width: auto;
  }
  /* Clear the sticky header (72px) and section strip (48px) when scrolled to. */
  .account-content h2,
  .address-form,
  .address-card {
    scroll-margin-top: 136px;
  }
  .combo input {
    scroll-margin-top: 166px;
  }
  .account-content .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .account-content > h2 {
    font-size: 26px;
  }
  .form-actions .btn {
    flex: 1 1 140px;
  }
}
@media (max-width: 650px) {
  .account-auth {
    padding-top: 28px;
  }
  .address-list {
    grid-template-columns: 1fr;
  }
  .address-form {
    margin: 0 -18px 22px;
    border-left: 0;
    border-right: 0;
  }
}

/* #73: a piece without a designer keeps the card rows aligned (no
   placeholder text such as "VESTIGE EDIT"). */
.product-info .brandline:empty::before {
  content: '\00a0';
}

/* #72: while online sales are closed the checkout address explains it. */
.sales-soon .label {
  display: block;
  margin-bottom: 14px;
}
.sales-soon h1 {
  font-size: clamp(26px, 6vw, 40px);
  letter-spacing: -0.04em;
  line-height: 1.05;
  margin: 0 auto 14px;
  max-width: 18ch;
}
.sales-soon-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.sales-soon-actions .btn {
  min-height: 46px;
  flex: 0 1 220px;
}
.collection-empty .label {
  display: block;
  margin-bottom: 12px;
}

/* Reduced motion keeps feedback without movement: dialogs, the menu drawer and
   the lightbox still fade in (opacity only, short) instead of appearing cold. */
@media (prefers-reduced-motion: reduce) {
  dialog[open],
  dialog[open]::backdrop,
  .drawer[open],
  .lightbox[open] {
    animation: reduced-fade 0.15s ease-out both !important;
  }
}
@keyframes reduced-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* The motion control sits over moving photos: a solid chip, at least 24px tall. */
.pause {
  min-height: 24px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 0 0 1px var(--line);
}

/* Small text links keep at least a 24px target with a mouse; touch screens and
   phones already get 44px (the pointer: coarse block above). */
@media (pointer: fine) and (min-width: 651px) {
  .breadcrumbs a,
  .footer-links a,
  .footer-bottom a,
  .lang-switch a {
    display: inline-flex;
    align-items: center;
    min-block-size: 24px;
  }
  .product-info > a {
    display: block;
    min-block-size: 24px;
  }
}