/* STR — storefront styles */
:root {
  --bg: #0a0a0b;
  --bg-2: #0f0f11;
  --graphite: #17181b;
  --graphite-2: #202226;
  --graphite-3: #2b2d32;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.18);
  --silver: #b9bdc5;
  --silver-2: #d9dce1;
  --muted: #868a93;
  --text: #ececee;
  --white: #ffffff;
  --danger: #ff7a7a;
  --ok: #8fdcb0;
  --warn: #e8c987;
  --radius: 2px;
  --gutter: clamp(16px, 3vw, 40px);
  --header-base: 72px;
  --bar-h: 0px;
  --header-h: calc(var(--header-base) + var(--bar-h));
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;
  --bg-rgb: 10 10 11;
  --bg2-rgb: 15 15 17;
  --graphite-rgb: 23 24 27;
  --ink-rgb: 255 255 255;
  --title-grad: linear-gradient(180deg, #ffffff 0%, #c9ccd2 55%, #6d7077 100%);
  color-scheme: dark;
}
/* ---------------------------------------------------------------- light theme (toggle in the header) */
html[data-theme="light"] {
  --bg: #f3f2ef;
  --bg-2: #fbfaf8;
  --graphite: #e9e7e3;
  --graphite-2: #dfdcd7;
  --graphite-3: #cfccc6;
  --line: rgba(0, 0, 0, 0.09);
  --line-strong: rgba(0, 0, 0, 0.2);
  --silver: #4b4e55;
  --silver-2: #2b2d31;
  --muted: #7b7e86;
  --text: #141416;
  --white: #0a0a0b;
  --danger: #c0392b;
  --ok: #1e8a52;
  --warn: #9a6b12;
  --bg-rgb: 243 242 239;
  --bg2-rgb: 251 250 248;
  --graphite-rgb: 233 231 227;
  --ink-rgb: 0 0 0;
  --title-grad: linear-gradient(180deg, #0a0a0b 0%, #2b2d32 55%, #6d7077 100%);
  color-scheme: light;
}
html[data-theme="light"] ::selection { background: var(--text); color: var(--bg); }
html[data-theme="light"] .hero-media { opacity: min(1, calc(var(--hero-dim, 0.5) + 0.35)); }
html[data-theme="light"] .hero-media, html[data-theme="light"] .page-banner img { opacity: 0.85; filter: grayscale(1) contrast(0.95) brightness(1.08); }
html[data-theme="light"] .event-bar { background: var(--text); color: var(--bg); }
html[data-theme="light"] .event-bar-timer b, html[data-theme="light"] .event-bar-title { color: var(--bg); }
html[data-theme="light"] .live-dot { background: #e0352b; }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--silver); color: var(--bg); }
:focus-visible { outline: 1px solid var(--silver); outline-offset: 3px; }

.container { width: 100%; max-width: 1480px; margin: 0 auto; padding: 0 var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.eyebrow { font-family: var(--font-display); font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--muted); }
.display { font-family: var(--font-display); font-stretch: 125%; font-weight: var(--title-weight, 800); letter-spacing: -0.02em; line-height: 0.92; text-transform: var(--title-case, uppercase); }
.muted { color: var(--muted); }
.small { font-size: 13px; }

/* ---------------------------------------------------------------- page transitions */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 280ms var(--ease) both vt-out; }
::view-transition-new(root) { animation: 520ms var(--ease-out) both vt-in; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(14px); } }
main { animation: page-in 700ms var(--ease-out) both; }
@keyframes page-in { from { opacity: 0; transform: translateY(12px); } }
body.is-leaving main { opacity: 0; transform: translateY(-6px); transition: opacity 220ms var(--ease), transform 220ms var(--ease); }

/* ---------------------------------------------------------------- header */
.site-header {
  position: fixed; inset: var(--bar-h) 0 auto 0; z-index: 50; height: var(--header-base);
  display: flex; align-items: center;
  transition: background 400ms var(--ease), border-color 400ms var(--ease), transform 400ms var(--ease);
  border-bottom: 1px solid transparent;
  view-transition-name: site-header;
}
.site-header.is-solid { background: rgb(var(--bg-rgb) / 0.78); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); border-color: var(--line); }
.site-header.is-hidden { transform: translateY(calc(-100% - var(--bar-h))); }
.header-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
.logo { font-family: var(--font-display); font-stretch: 125%; font-weight: 900; font-size: var(--logo-size, 22px); letter-spacing: 0.32em; padding-left: 0.32em; justify-self: center; line-height: 1; }
.logo:hover { color: var(--white); }
.nav-main { display: flex; gap: clamp(18px, 2.2vw, 34px); }
.nav-link { position: relative; white-space: nowrap; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--silver); transition: color 200ms; }
.nav-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 400ms var(--ease-out); }
.nav-link:hover, .nav-link.is-active { color: var(--white); }
.nav-link:hover::after, .nav-link.is-active::after { transform: scaleX(1); transform-origin: left; }
.header-actions { display: flex; justify-content: flex-end; align-items: center; gap: 6px; }
.icon-btn { position: relative; display: inline-grid; place-items: center; width: 42px; height: 42px; border: 0; background: none; cursor: pointer; color: var(--silver); transition: color 200ms; }
.icon-btn:hover { color: var(--white); }
.icon-btn svg { width: 20px; height: 20px; }
.cart-count {
  position: absolute; top: 4px; right: 2px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
  background: var(--accent, var(--white)); color: var(--accent-ink, var(--bg)); font-size: 10px; font-weight: 700; line-height: 17px; text-align: center;
  transition: transform 300ms var(--ease-out);
}
.cart-count[data-count="0"] { transform: scale(0); }
.cart-count.is-bump { animation: bump 600ms var(--ease-out); }
@keyframes bump { 0% { transform: scale(1); } 30% { transform: scale(1.6); } 100% { transform: scale(1); } }
.account-dot { position: absolute; top: 9px; right: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }
.menu-toggle { display: none; }

/* search overlay */
.search-panel { position: fixed; inset: 0 0 auto 0; z-index: 60; background: rgb(var(--bg-rgb) / 0.96); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--line); transform: translateY(-100%); transition: transform 500ms var(--ease-out); padding: 28px 0; }
.search-panel.is-open { transform: none; }
.search-panel form { display: flex; gap: 16px; align-items: center; }
.search-panel input { flex: 1; background: none; border: 0; border-bottom: 1px solid var(--line-strong); font-family: var(--font-display); font-stretch: 112%; font-size: clamp(22px, 4vw, 40px); padding: 10px 0; outline: none; }

/* mobile drawer */
.drawer { position: fixed; inset: 0; z-index: 70; pointer-events: none; }
.drawer-scrim { position: absolute; inset: 0; background: rgba(0,0,0,0.6); opacity: 0; transition: opacity 400ms var(--ease); }
.drawer-panel {
  position: absolute; top: 0; bottom: 0; left: 0; width: min(88vw, 400px); background: var(--bg-2); border-right: 1px solid var(--line);
  transform: translateX(-100%); transition: transform 560ms var(--ease-out); display: flex; flex-direction: column; padding: 22px var(--gutter) 32px;
}
.drawer.is-open { pointer-events: auto; }
.drawer.is-open .drawer-scrim { opacity: 1; }
.drawer.is-open .drawer-panel { transform: none; }
.drawer-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; }
.drawer-nav { display: flex; flex-direction: column; gap: 4px; }
.drawer-nav a { font-family: var(--font-display); font-stretch: 125%; font-weight: 800; font-size: 34px; text-transform: uppercase; letter-spacing: -0.01em; padding: 6px 0; opacity: 0; transform: translateX(-16px); transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out), color 200ms; color: var(--silver-2); }
.drawer.is-open .drawer-nav a { opacity: 1; transform: none; transition-delay: calc(120ms + var(--i, 0) * 60ms); }
.drawer-nav a:hover { color: var(--white); }
.drawer-foot { margin-top: auto; display: grid; gap: 12px; border-top: 1px solid var(--line); padding-top: 22px; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--silver); }

/* ---------------------------------------------------------------- buttons & forms */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: var(--btn-h, 52px); padding: 0 30px; border: 1px solid var(--accent, var(--white)); background: var(--accent, var(--white)); color: var(--accent-ink, var(--bg));
  font-size: 12px; font-weight: 600; letter-spacing: var(--btn-spacing, 0.22em); text-transform: var(--btn-case, uppercase); cursor: pointer; overflow: hidden;
  transition: color 400ms var(--ease-out), background 400ms var(--ease-out), border-color 400ms, opacity 200ms;
  border-radius: var(--btn-radius, var(--radius)); isolation: isolate;
}
.btn::before { content: ""; position: absolute; inset: 0; background: var(--bg); transform: translateY(101%); transition: transform 500ms var(--ease-out); z-index: -1; }
.btn:hover { color: var(--white); }
.btn:hover::before { transform: none; }
.btn-ghost { background: transparent; color: var(--white); border-color: var(--line-strong); }
.btn-ghost::before { background: var(--white); }
.btn-ghost:hover { color: var(--bg); border-color: var(--white); }
.btn-danger { background: transparent; color: var(--danger); border-color: rgba(255,122,122,0.4); }
.btn-danger::before { background: var(--danger); }
.btn-danger:hover { color: var(--bg); }
.btn-block { width: 100%; }
.btn-sm { height: calc(var(--btn-h, 52px) - 12px); padding: 0 18px; font-size: 11px; }
.btn[disabled], .btn.is-loading { pointer-events: none; opacity: 0.7; }
.btn .spinner { display: none; }
.btn.is-loading .spinner { display: inline-block; }
.btn.is-loading .btn-label { opacity: 0.6; }
.spinner { width: 14px; height: 14px; border: 1.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 700ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.link { border-bottom: 1px solid var(--line-strong); padding-bottom: 1px; transition: border-color 200ms, color 200ms; }
.link:hover { border-color: var(--white); color: var(--white); }
.text-btn { background: none; border: 0; padding: 0; cursor: pointer; color: var(--silver); font-size: 13px; }
.text-btn:hover { color: var(--white); }

.form { display: grid; gap: 18px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.field { display: grid; gap: 7px; }
.field label, .label { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.input, .field input, .field select, .field textarea {
  width: 100%; height: 50px; padding: 0 16px; background: var(--graphite); border: 1px solid var(--line); border-radius: var(--radius);
  outline: none; transition: border-color 200ms, background 200ms; font-size: 15px;
}
.field textarea { height: auto; min-height: 140px; padding: 14px 16px; resize: vertical; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--silver) 50%), linear-gradient(135deg, var(--silver) 50%, transparent 50%); background-position: calc(100% - 20px) 22px, calc(100% - 15px) 22px; background-size: 5px 5px; background-repeat: no-repeat; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--silver); background: var(--graphite-2); }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: rgba(255,122,122,0.6); }
.field-error { color: var(--danger); font-size: 13px; }
.field-hint { color: var(--muted); font-size: 12px; }
.password-wrap { position: relative; }
.password-wrap input { padding-right: 64px; }
.password-toggle { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: 0; color: var(--muted); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; padding: 8px; }
.password-toggle:hover { color: var(--white); }
.strength { height: 2px; background: var(--graphite-3); position: relative; overflow: hidden; }
.strength span { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); background: var(--danger); transition: transform 400ms var(--ease-out), background 300ms; }
/* a box + text that may contain links: the text flows as one paragraph (no flex columns), the box sits on the left */
.check { position: relative; display: block; padding-left: 30px; min-height: 22px; font-size: 14px; line-height: 1.5; color: var(--silver); cursor: pointer; }
.check input { position: absolute; left: 0; top: 1px; margin: 0; appearance: none; flex: none; width: 18px; height: 18px; border: 1px solid var(--line-strong); background: var(--graphite); display: grid; place-items: center; cursor: pointer; }
.check input:checked { background: var(--accent, var(--white)); border-color: var(--accent, var(--white)); }
.check input:checked::after { content: ""; width: 9px; height: 5px; border: solid var(--bg); border-width: 0 0 2px 2px; transform: rotate(-45deg) translate(1px, -1px); }
.alert { padding: 14px 18px; border: 1px solid var(--line-strong); background: var(--graphite); font-size: 14px; }
.alert-error { border-color: rgba(255,122,122,0.4); color: #ffb3b3; background: rgba(255,122,122,0.06); }
.alert-ok { border-color: rgba(143,220,176,0.35); color: #bdf0d2; background: rgba(143,220,176,0.06); }
.alert-warn { border-color: rgba(232,201,135,0.35); color: #f2dfb5; background: rgba(232,201,135,0.06); }

/* ---------------------------------------------------------------- reveal */
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
[data-reveal].is-in { opacity: 1; transform: none; }
.no-js [data-reveal] { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- hero */
.hero { position: relative; min-height: 100svh; display: grid; align-items: end; padding: calc(var(--header-h) + 40px) 0 56px; overflow: hidden; }
.hero-media { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; opacity: var(--hero-dim, 0.5); filter: grayscale(1) contrast(1.05); }
.hero-media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); animation: hero-zoom 2.4s var(--ease-out) forwards; }
.hero-media div { overflow: hidden; }
.hero-media div:nth-child(2) img { animation-delay: 120ms; }
.hero-media div:nth-child(3) img { animation-delay: 240ms; }
@keyframes hero-zoom { to { transform: scale(1); } }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(var(--bg-rgb) / 0.2) 0%, rgb(var(--bg-rgb) / 0.35) 45%, var(--bg) 100%); pointer-events: none; }
.hero-content { position: relative; z-index: 2; }
.hero-title { font-size: clamp(110px, 28vw, 420px); margin: 0 0 0 -0.04em; color: var(--white); letter-spacing: -0.03em; }
.hero-title span { display: inline-block; transform: translateY(105%); animation: rise 1.1s var(--ease-out) forwards; background: var(--title-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero-title span { animation-delay: calc(var(--i, 0) * 90ms); }
.hero-title-long { font-size: clamp(64px, 15vw, 260px); }
.hero-title-mask { overflow: hidden; line-height: 0.86; }
@keyframes rise { to { transform: none; } }
.hero-bottom { display: flex; justify-content: space-between; align-items: end; gap: 32px; margin-top: 24px; flex-wrap: wrap; }
.hero-bottom p { max-width: 420px; margin: 0; color: var(--silver); font-size: 16px; }
.hero-scroll { position: absolute; right: var(--gutter); top: calc(var(--header-h) + 24px); z-index: 2; writing-mode: vertical-rl; font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--muted); }

.marquee { border-block: 1px solid var(--line); overflow: hidden; padding: 18px 0; background: var(--bg-2); }
.marquee-track { display: flex; gap: 48px; width: max-content; animation: marquee 38s linear infinite; }
.marquee-track span { font-family: var(--font-display); font-stretch: 125%; font-weight: 700; font-size: 13px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--silver); white-space: nowrap; }
.marquee-track span::after { content: "✕"; margin-left: 48px; color: var(--muted); font-size: 9px; vertical-align: middle; }
@keyframes marquee { to { transform: translateX(-50%); } }

.section { padding: clamp(64px, 10vw, 140px) 0; }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 40px; flex-wrap: wrap; }
.section-title { font-size: clamp(36px, 6vw, 84px); margin: 8px 0 0; }

.statement { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 6vw, 96px); align-items: center; }
.statement h2 { font-size: clamp(34px, 5vw, 72px); margin: 0; }
.statement p { color: var(--silver); font-size: 17px; max-width: 520px; }
.statement-media { aspect-ratio: var(--card-ratio, 4 / 5); overflow: hidden; background: var(--graphite); }
.statement-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease-out); }
.statement-media:hover img { transform: scale(1.04); }

/* ---------------------------------------------------------------- product grid & cards */
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px 14px; }
.product-card { position: relative; display: block; }
.card-media { position: relative; aspect-ratio: var(--card-ratio, 4 / 5); overflow: hidden; background: var(--graphite); transform-style: preserve-3d; transition: transform 600ms var(--ease-out); }
.card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 700ms var(--ease-out), transform 1.2s var(--ease-out); }
.card-media img + img { opacity: 0; transform: scale(1.06); }
.product-card:hover .card-media img:first-child { transform: scale(1.04); }
.product-card:hover .card-media img + img { opacity: 1; transform: scale(1); }
.card-media::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgb(var(--ink-rgb) / 0.10), transparent 45%); opacity: 0; transition: opacity 400ms; pointer-events: none; }
.product-card:hover .card-media::after { opacity: 1; }
.card-cta { position: absolute; left: 12px; right: 12px; bottom: 12px; height: 44px; display: grid; place-items: center; background: rgb(var(--bg-rgb) / 0.82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; transform: translateY(calc(100% + 14px)); transition: transform 500ms var(--ease-out); border: 1px solid var(--line); }
.product-card:hover .card-cta { transform: none; }
.card-info { display: flex; justify-content: space-between; gap: 12px; padding-top: 14px; }
.card-name { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
.card-color { font-size: 13px; color: var(--muted); }
.card-price { font-size: 13px; white-space: nowrap; text-align: right; }
.card-price s, .price s { color: var(--muted); margin-left: 6px; }
.badge { position: absolute; top: 12px; left: 12px; z-index: 2; padding: 5px 9px; background: var(--bg); border: 1px solid var(--line-strong); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; }

/* shop */
.page-head { padding-top: calc(var(--header-h) + clamp(40px, 8vw, 96px)); padding-bottom: clamp(28px, 4vw, 48px); }
.page-title { font-size: clamp(48px, 11vw, 168px); margin: 10px 0 0; }
.filters { display: flex; justify-content: space-between; gap: 16px; align-items: center; border-block: 1px solid var(--line); padding: 14px 0; margin-bottom: 36px; position: sticky; top: var(--header-h); background: rgb(var(--bg-rgb) / 0.88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); z-index: 10; }
.filter-list { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.filter-list::-webkit-scrollbar { display: none; }
.chip { flex: none; padding: 8px 14px; border: 1px solid var(--line); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--silver); transition: all 250ms; }
.chip:hover { border-color: var(--line-strong); color: var(--white); }
.chip.is-active { background: var(--accent, var(--white)); color: var(--accent-ink, var(--bg)); border-color: var(--accent, var(--white)); }
.empty { padding: 80px 0; text-align: center; color: var(--muted); }

/* product page */
.product-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, 1fr); gap: clamp(24px, 4vw, 72px); padding-top: calc(var(--header-h) + 24px); }
.gallery { display: grid; gap: 6px; }
.gallery-item { aspect-ratio: var(--card-ratio, 4 / 5); overflow: hidden; background: var(--graphite); cursor: zoom-in; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-out); }
.gallery-item.is-zoomed img { transform: scale(1.6); cursor: zoom-out; }
.product-info { position: sticky; top: calc(var(--header-h) + 24px); align-self: start; padding-bottom: 40px; }
.product-info h1 { font-size: clamp(34px, 4vw, 58px); margin: 12px 0 6px; }
.price { font-size: 20px; margin: 10px 0 26px; }
.product-desc { color: var(--silver); margin: 0 0 30px; max-width: 520px; }
.size-head { display: flex; justify-content: space-between; margin-bottom: 12px; }
.sizes { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; margin-bottom: 18px; border: 0; padding: 0; }
.size-opt { position: relative; }
.size-opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.size-opt span { display: grid; place-items: center; height: 50px; border: 1px solid var(--line); font-size: 13px; letter-spacing: 0.08em; transition: all 250ms var(--ease); }
.size-opt input:hover + span { border-color: var(--line-strong); }
.size-opt input:checked + span { background: var(--accent, var(--white)); color: var(--accent-ink, var(--bg)); border-color: var(--accent, var(--white)); }
.size-opt input:focus-visible + span { outline: 1px solid var(--silver); outline-offset: 2px; }
.size-opt.is-out span { color: var(--muted); background: repeating-linear-gradient(135deg, transparent 0 8px, rgb(var(--ink-rgb) / 0.025) 8px 9px); text-decoration: line-through; }
.size-opt.is-out input { cursor: not-allowed; }
.form-shake { animation: shake 420ms var(--ease); }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.accordion { border-top: 1px solid var(--line); margin-top: 32px; }
.accordion details { border-bottom: 1px solid var(--line); }
.accordion summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; padding: 18px 0; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: "+"; transition: transform 300ms var(--ease); }
.accordion details[open] summary::after { transform: rotate(45deg); }
.accordion .acc-body { padding: 0 0 20px; color: var(--silver); white-space: pre-line; }
.trust { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; font-size: 12px; color: var(--muted); }

/* fly-to-bag */
.fly { position: fixed; z-index: 100; pointer-events: none; overflow: hidden; border-radius: 2px; box-shadow: 0 30px 60px rgba(0,0,0,0.6); transition: transform 900ms cubic-bezier(0.6, -0.05, 0.25, 1), opacity 900ms ease, border-radius 900ms; }
.fly img { width: 100%; height: 100%; object-fit: cover; }

.toast { position: fixed; z-index: 90; right: var(--gutter); bottom: 24px; max-width: 360px; display: flex; gap: 14px; align-items: center; padding: 14px 16px; background: var(--graphite); border: 1px solid var(--line-strong); box-shadow: 0 24px 60px rgba(0,0,0,0.5); transform: translateY(140%); visibility: hidden; transition: transform 600ms var(--ease-out), visibility 0s 600ms; }
.toast.is-visible { transform: none; visibility: visible; transition: transform 600ms var(--ease-out), visibility 0s; }
.toast img { width: 52px; height: 64px; object-fit: cover; }
.toast-title { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; }
.toast-body { font-size: 13px; color: var(--muted); }
.toast.is-error { border-color: rgba(255,122,122,0.4); }

/* ---------------------------------------------------------------- cart & checkout */
.cart-layout, .checkout-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.cart-line { display: grid; grid-template-columns: 110px 1fr auto; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.cart-line:first-child { border-top: 1px solid var(--line); }
.cart-line img { width: 110px; aspect-ratio: 4 / 5; object-fit: cover; background: var(--graphite); }
.cart-line h3 { margin: 0; font-size: 14px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); margin-top: 14px; }
.qty button { width: 38px; height: 38px; background: none; border: 0; cursor: pointer; color: var(--silver); }
.qty button:hover { color: var(--white); background: var(--graphite); }
.qty span { min-width: 32px; text-align: center; font-size: 14px; }
.summary { position: sticky; top: calc(var(--header-h) + 24px); background: var(--bg-2); border: 1px solid var(--line); padding: 28px; }
.summary-row { display: flex; justify-content: space-between; padding: 8px 0; font-size: 14px; color: var(--silver); }
.summary-total { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 16px; color: var(--white); font-size: 17px; }
.summary-items { display: grid; gap: 14px; margin-bottom: 20px; }
.summary-item { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; font-size: 13px; }
.summary-item img { width: 56px; aspect-ratio: 4 / 5; object-fit: cover; background: var(--graphite); }
.checkout-step { border: 1px solid var(--line); padding: clamp(20px, 3vw, 32px); margin-bottom: 18px; background: var(--bg-2); }
.checkout-step h2 { font-family: var(--font-display); font-stretch: 112%; font-size: 15px; letter-spacing: 0.16em; text-transform: uppercase; margin: 0 0 20px; display: flex; gap: 14px; align-items: center; }
.step-num { display: inline-grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--line-strong); font-size: 11px; }
.auth-choice { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.auth-choice .btn { height: 48px; padding: 0 12px; }
.address-pick { display: grid; gap: 8px; margin-bottom: 20px; }
.address-pick label { display: flex; gap: 12px; padding: 14px; border: 1px solid var(--line); cursor: pointer; font-size: 14px; color: var(--silver); transition: border-color 200ms; }
.address-pick input { accent-color: var(--white); }
.address-pick label:has(input:checked) { border-color: var(--silver); color: var(--white); }
.checkout-pay-note { display: flex; gap: 10px; align-items: center; justify-content: center; color: var(--muted); font-size: 12px; margin-top: 14px; }

/* ---------------------------------------------------------------- auth pages */
.auth-wrap { min-height: 100svh; display: grid; grid-template-columns: 1fr 1fr; }
.auth-art { position: relative; overflow: hidden; background: var(--graphite); }
.auth-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.85; animation: hero-zoom 2.4s var(--ease-out) both; transform: scale(1.1); }
.auth-art .display { position: absolute; left: var(--gutter); bottom: 40px; font-size: clamp(60px, 10vw, 160px); color: rgba(255,255,255,0.9); mix-blend-mode: difference; }
.auth-panel { display: grid; align-items: center; padding: calc(var(--header-h) + 32px) var(--gutter) 48px; }
.auth-card { width: 100%; max-width: 440px; margin: 0 auto; }
.auth-card h1 { font-size: clamp(30px, 4.2vw, 60px); margin: 10px 0 12px; overflow-wrap: anywhere; hyphens: auto; }
.auth-card .lead { color: var(--silver); margin: 0 0 30px; }
.auth-alt { margin-top: 26px; font-size: 14px; color: var(--muted); }
.success-mark { width: 96px; height: 96px; margin-bottom: 26px; }
.success-mark circle { stroke: var(--line-strong); stroke-width: 1.5; fill: none; }
.success-mark .ring { stroke: var(--white); stroke-dasharray: 290; stroke-dashoffset: 290; animation: draw 1.1s var(--ease-out) 200ms forwards; transform: rotate(-90deg); transform-origin: center; }
.success-mark path { stroke: var(--white); stroke-width: 2; fill: none; stroke-dasharray: 60; stroke-dashoffset: 60; animation: draw 700ms var(--ease-out) 900ms forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.burst { position: relative; }
.burst i { position: absolute; left: 48px; top: 48px; width: 2px; height: 14px; background: var(--silver); opacity: 0; transform-origin: 1px -40px; animation: burst 900ms var(--ease-out) 1.2s forwards; }
@keyframes burst { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--r)) translateY(-26px); } }

/* ---------------------------------------------------------------- account */
.account-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); padding-bottom: 100px; }
.account-nav { position: sticky; top: calc(var(--header-h) + 24px); align-self: start; display: grid; gap: 2px; }
.account-nav a, .account-nav button { display: flex; justify-content: space-between; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); transition: color 200ms, padding 300ms var(--ease-out); background: none; border-top: 0; border-left: 0; border-right: 0; cursor: pointer; text-align: left; width: 100%; }
.account-nav a:hover, .account-nav button:hover { color: var(--white); padding-left: 6px; }
.account-nav a.is-active { color: var(--white); }
.account-nav a.is-active::after { content: ""; width: 6px; height: 6px; background: var(--accent, var(--white)); }
.panel { border: 1px solid var(--line); background: var(--bg-2); padding: clamp(20px, 3vw, 32px); margin-bottom: 18px; }
.panel h2 { font-family: var(--font-display); font-stretch: 112%; font-size: 14px; letter-spacing: 0.18em; text-transform: uppercase; margin: 0 0 18px; }
.panel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.stat { border: 1px solid var(--line); padding: 22px; background: var(--bg-2); }
.stat-value { font-family: var(--font-display); font-stretch: 125%; font-weight: 800; font-size: 38px; line-height: 1; margin-top: 12px; }
.order-card { display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: center; padding: 22px; border: 1px solid var(--line); background: var(--bg-2); margin-bottom: 10px; transition: border-color 300ms, transform 400ms var(--ease-out); }
.order-card:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.order-thumbs { display: flex; }
.order-thumbs img { width: 64px; aspect-ratio: 4/5; object-fit: cover; border: 2px solid var(--bg-2); background: var(--graphite); }
.order-thumbs img + img { margin-left: -22px; }
.order-meta { display: grid; gap: 4px; font-size: 13px; color: var(--silver); }
.order-meta strong { color: var(--white); font-weight: 500; letter-spacing: 0.06em; }
.pills { display: flex; gap: 6px; flex-wrap: wrap; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--line-strong); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--silver); white-space: nowrap; }
.pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.pill-ok { color: var(--ok); border-color: rgba(143,220,176,0.3); }
.pill-warn { color: var(--warn); border-color: rgba(232,201,135,0.3); }
.pill-bad { color: var(--danger); border-color: rgba(255,122,122,0.3); }
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 1px; background: var(--line-strong); }
.timeline li { position: relative; padding: 0 0 22px 30px; }
.timeline li::before { content: ""; position: absolute; left: 0; top: 6px; width: 11px; height: 11px; border-radius: 50%; background: var(--bg); border: 1px solid var(--silver); }
.timeline li:last-child::before { background: var(--white); box-shadow: 0 0 0 4px rgb(var(--ink-rgb) / 0.08); }
.timeline .t-title { font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; }
.timeline .t-date { font-size: 12px; color: var(--muted); }
.progress { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 8px 0 24px; }
.progress span { height: 2px; background: var(--graphite-3); position: relative; overflow: hidden; }
.progress span.is-done::after { content: ""; position: absolute; inset: 0; background: var(--accent, var(--white)); transform-origin: left; animation: grow 900ms var(--ease-out) both; animation-delay: calc(var(--i) * 140ms); }
@keyframes grow { from { transform: scaleX(0); } }
.progress-labels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.progress-labels .is-done { color: var(--white); }
.item-row { display: grid; grid-template-columns: 72px 1fr auto; gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.item-row img { width: 72px; aspect-ratio: 4/5; object-fit: cover; background: var(--graphite); }
.address-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.address-card { border: 1px solid var(--line); padding: 22px; background: var(--bg-2); display: grid; gap: 14px; font-size: 14px; color: var(--silver); }
.address-card.is-default { border-color: var(--line-strong); }
.address-actions { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.danger-zone { border-color: rgba(255,122,122,0.25); }
.kv { display: grid; grid-template-columns: 160px 1fr; gap: 8px 16px; font-size: 14px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }

/* ---------------------------------------------------------------- editorial */
.prose { max-width: 720px; color: var(--silver); font-size: 16px; }
.prose h2 { color: var(--white); font-family: var(--font-display); font-stretch: 112%; font-size: 18px; letter-spacing: 0.12em; text-transform: uppercase; margin: 48px 0 12px; }
.prose a { border-bottom: 1px solid var(--line-strong); }
.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--line); border: 1px solid var(--line); }
.values > div { background: var(--bg); padding: clamp(24px, 4vw, 48px); }
.values h3 { font-family: var(--font-display); font-stretch: 125%; font-size: 28px; margin: 18px 0 10px; text-transform: uppercase; }
.values p { color: var(--silver); margin: 0; }
.big-num { font-family: var(--font-display); font-size: 12px; color: var(--muted); letter-spacing: 0.2em; }

/* ---------------------------------------------------------------- footer */
.site-footer { border-top: 1px solid var(--line); margin-top: 80px; padding: 64px 0 32px; background: var(--bg-2); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; }
.footer-grid h4 { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); font-weight: 500; margin: 0 0 16px; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; font-size: 14px; color: var(--silver); }
.footer-grid a:hover { color: var(--white); }
.footer-word { font-size: clamp(90px, 22vw, 340px); margin: 48px 0 0; color: transparent; -webkit-text-stroke: 1px var(--line-strong); line-height: 0.8; user-select: none; }
.footer-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 24px; font-size: 12px; color: var(--muted); }

/* ---------------------------------------------------------------- admin */
.admin-body { background: #08080a; }
.admin-main { padding: 34px clamp(16px, 3.4vw, 48px) 90px; min-width: 0; max-width: 1500px; }
.admin-main h1 { font-family: var(--font-display); font-stretch: 112%; font-size: 28px; margin: 0 0 24px; text-transform: uppercase; letter-spacing: 0.02em; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); background: var(--bg-2); }
table.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th, .table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.table th { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.table tr:hover td { background: rgb(var(--ink-rgb) / 0.02); }
.table img { width: 40px; aspect-ratio: 4/5; object-fit: cover; }
.admin-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-bottom: 28px; }
.admin-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr); gap: 18px; align-items: start; }
.admin-grid > *, .form-row > *, .variant-row > * { min-width: 0; }
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; align-items: end; }
.toolbar .field { min-width: 160px; }
.toolbar input, .toolbar select { height: 42px; }
.variant-row { display: grid; grid-template-columns: 1fr 1fr 80px auto; gap: 10px; align-items: center; margin-bottom: 8px; }
.variant-row input { height: 42px; }
.thumbs { display: flex; gap: 10px; flex-wrap: wrap; }
.thumbs figure { margin: 0; width: 110px; display: grid; gap: 6px; }
.thumbs img { width: 110px; aspect-ratio: 4/5; object-fit: cover; background: var(--graphite); }
.thumbs form { display: inline; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1100px) {
  .product-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  :root { --header-base: 62px; }
  .nav-main, .header-actions .hide-mobile { display: none; }
  .menu-toggle { display: inline-grid; }
  /* equal side columns: the logo sits in the real middle of the screen (one icon left, three right) */
  .header-inner { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; }
  .menu-toggle { justify-self: start; }
  .logo { justify-self: center; font-size: 19px; }
  .header-actions { gap: 0; }
  .icon-btn { width: 38px; }
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 8px; }
  .product-layout, .cart-layout, .checkout-layout, .statement, .admin-grid { grid-template-columns: 1fr; }
  .product-info, .summary { position: static; }
  .gallery { grid-auto-flow: column; grid-auto-columns: 88%; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); scrollbar-width: none; }
  .gallery::-webkit-scrollbar { display: none; }
  .gallery-item { scroll-snap-align: center; }
  .auth-wrap { grid-template-columns: 1fr; }
  .auth-art { display: none; }
  .account-layout { grid-template-columns: 1fr; }
  .account-nav { position: sticky; top: var(--header-h); z-index: 5; display: flex; overflow-x: auto; gap: 18px; background: rgb(var(--bg-rgb) / 0.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); border-bottom: 1px solid var(--line); scrollbar-width: none; }
  .account-nav::-webkit-scrollbar { display: none; }
  .account-nav a, .account-nav button { flex: none; width: auto; border: 0; padding: 14px 0; }
  .account-nav a.is-active::after { display: none; }
  .account-nav a.is-active { box-shadow: inset 0 -1px 0 var(--white); }
  .account-nav a:hover, .account-nav button:hover { padding-left: 0; }
  .panel-grid { grid-template-columns: 1fr; }
  .values { grid-template-columns: 1fr; }
  .hero-media { grid-template-columns: 1fr 1fr; }
  .hero-media div:nth-child(3) { display: none; }
  .card-cta { display: none; }
}
@media (max-width: 600px) {
  .form-row { grid-template-columns: 1fr; }
  .auth-choice { grid-template-columns: 1fr; }
  .order-card { grid-template-columns: 1fr; gap: 14px; }
  .cart-line { grid-template-columns: 84px 1fr; }
  .cart-line img { width: 84px; }
  .cart-line .line-price { grid-column: 2; }
  .kv { grid-template-columns: 1fr; gap: 2px; }
  .kv dd { margin-bottom: 10px; }
  .footer-grid { grid-template-columns: 1fr; }
  .toast { left: 16px; right: 16px; max-width: none; }
  .variant-row { grid-template-columns: 1fr 1fr; }
  .hero-scroll { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1; transform: none; }
  .marquee-track { animation: none; }
}

/* ================================================================ v2 additions */
/* utilities */
.mb { margin-bottom: 18px; }
.mt { margin-top: 18px; }
.mt-s { margin-top: 8px; }
.pb { padding-bottom: 80px; }
.center { text-align: center; }
.right { text-align: right; }
.narrow { max-width: 560px; }
.narrow-alert { max-width: 720px; margin-bottom: 32px; }
.break { word-break: break-all; }
.white { color: var(--white); }
.silver { color: var(--silver); }
.ok-text { color: var(--ok); }
.warn-text { color: var(--warn); }
.danger-text { color: var(--danger) !important; }
.upper { text-transform: uppercase; }
.tight-top { margin-top: -8px !important; }
.stack { display: grid; gap: 10px; }
.stack-s { display: grid; gap: 10px; align-content: end; }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 28px; }
.page-min { min-height: 70vh; }
.page-head-tight { padding-bottom: 28px; }
.page-title-md { font-size: clamp(42px, 8vw, 116px); }
.section-tight { padding-top: 0; }
.center-cta { text-align: center; padding: clamp(64px, 10vw, 120px) 0 0; }
.empty-word { font-size: clamp(40px, 8vw, 90px); color: var(--graphite-3); margin: 0; }
.spinner-lg { width: 28px; height: 28px; margin-bottom: 26px; display: block; }
.logo-start { justify-self: start; padding-left: 0; }
.addr { margin: 0; color: var(--silver); }
.alert-row { display: flex; justify-content: space-between; gap: 16px; align-items: center; flex-wrap: wrap; }
.toolbar-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.toolbar-row p { margin: 0; }
.stat-text { margin-top: 12px; }
.stat-money { font-size: 28px; }
.footer-lead { max-width: 340px; margin-top: 18px; }
.summary-title { margin: 0 0 18px; }
.summary-discount { color: var(--ok); }
.step-lead { margin: -8px 0 18px; }
.statement-top { align-items: start; }
.about-statement { margin-bottom: clamp(64px, 10vw, 120px); align-items: start; }
.about-media { margin-top: 32px; max-width: 420px; }
.order-head { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.order-total { font-size: 28px; }
.order-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.order-card-flat { margin: 0; }
.small-prose { font-size: 14px; margin-bottom: 18px; }
textarea.short, .field textarea.short { min-height: 90px; }
.drawer-text-btn { letter-spacing: inherit; text-transform: inherit; font-size: inherit; text-align: left; }
.badge-sale { background: var(--accent, var(--white)); color: var(--accent-ink, var(--bg)); border-color: var(--accent, var(--white)); }

/* language switch */
.lang-switch { position: relative; }
.lang-switch summary { list-style: none; cursor: pointer; height: 42px; display: grid; place-items: center; padding: 0 10px; font-size: 11px; letter-spacing: 0.18em; color: var(--silver); }
.lang-switch summary::-webkit-details-marker { display: none; }
.lang-switch summary:hover, .lang-switch[open] summary { color: var(--white); }
.lang-menu { position: absolute; right: 0; top: 44px; min-width: 150px; background: var(--bg-2); border: 1px solid var(--line-strong); padding: 6px; display: grid; box-shadow: 0 20px 50px rgba(0,0,0,0.5); animation: drop 260ms var(--ease-out); }
@keyframes drop { from { opacity: 0; transform: translateY(-6px); } }
.lang-menu a { padding: 10px 12px; font-size: 13px; color: var(--silver); }
.lang-menu a:hover, .lang-menu a.is-active { color: var(--white); background: var(--graphite); }
.drawer-langs, .footer-langs, .admin-langs, .lang-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.drawer-langs a, .admin-langs a { padding: 6px 10px; border: 1px solid var(--line); font-size: 11px; letter-spacing: 0.16em; }
.drawer-langs a.is-active, .admin-langs a.is-active { background: var(--accent, var(--white)); color: var(--accent-ink, var(--bg)); border-color: var(--accent, var(--white)); }
.footer-langs { margin-top: 20px; font-size: 13px; color: var(--muted); }
.footer-langs a.is-active { color: var(--white); }
.footer-langs a + a::before { content: "·"; margin-right: 8px; color: var(--muted); }

/* slide-out bag */
.bag { position: fixed; inset: 0; z-index: 75; pointer-events: none; }
.bag-scrim { position: absolute; inset: 0; background: rgba(0,0,0,0.55); opacity: 0; transition: opacity 400ms var(--ease); }
.bag-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(92vw, 440px); background: var(--bg-2); border-left: 1px solid var(--line); transform: translateX(100%); transition: transform 560ms var(--ease-out); display: flex; flex-direction: column; }
.bag.is-open { pointer-events: auto; }
.bag.is-open .bag-scrim { opacity: 1; }
.bag.is-open .bag-panel { transform: none; }
.bag-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.bag-body { flex: 1; overflow-y: auto; display: flex; flex-direction: column; }
.bag-loading { display: grid; place-items: center; flex: 1; }
.bag-lines { padding: 8px 20px; flex: 1; }
.bag-line { display: grid; grid-template-columns: 72px 1fr auto; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); animation: page-in 500ms var(--ease-out) both; }
.bag-line img { width: 72px; aspect-ratio: 4/5; object-fit: cover; background: var(--graphite); }
.bag-name { font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; }
.bag-qty { display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; border: 1px solid var(--line); }
.bag-qty button { width: 30px; height: 30px; background: none; border: 0; color: var(--silver); cursor: pointer; }
.bag-qty button:hover { color: var(--white); }
.bag-qty span { min-width: 22px; text-align: center; font-size: 13px; }
.bag-price { font-size: 14px; }
.bag-foot { padding: 18px 20px 24px; border-top: 1px solid var(--line); display: grid; gap: 10px; background: var(--bg-2); }
.bag-foot p { margin: 0; }
.bag-empty { padding: 60px 24px; text-align: center; }
.bag-empty .display { font-size: 48px; color: var(--graphite-3); margin: 0; }

/* phone field */
.phone-group { display: grid; grid-template-columns: minmax(120px, 42%) 1fr; gap: 6px; }
.field .phone-group select { padding-right: 34px; text-overflow: ellipsis; }

/* address autocomplete */
.address-field { position: relative; }
.address-suggestions { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% - 2px); margin: 0; padding: 4px; list-style: none; background: var(--bg-2); border: 1px solid var(--line-strong); box-shadow: 0 24px 60px rgba(0,0,0,0.55); max-height: 300px; overflow-y: auto; animation: drop 220ms var(--ease-out); }
.address-suggestions li { padding: 11px 12px; cursor: pointer; font-size: 14px; color: var(--silver); display: flex; gap: 10px; align-items: baseline; }
.address-suggestions li small { color: var(--muted); }
.address-suggestions li[aria-selected="true"], .address-suggestions li:hover { background: var(--graphite-2); color: var(--white); }
.address-suggestions li.is-empty { cursor: default; font-size: 13px; color: var(--muted); }
.address-suggestions li.is-empty:hover { background: none; color: var(--muted); }
.address-suggestions .credit { font-size: 10px; color: var(--muted); padding: 6px 12px 2px; cursor: default; }
.address-suggestions .credit:hover { background: none; color: var(--muted); }

/* shipping methods */
.ship-methods { display: grid; gap: 8px; }
.ship-method { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 16px; border: 1px solid var(--line); cursor: pointer; transition: border-color 250ms, background 250ms; }
.ship-method:hover { border-color: var(--line-strong); }
.ship-method:has(input:checked) { border-color: var(--silver); background: var(--graphite); }
.ship-method input { accent-color: var(--white); width: 16px; height: 16px; }
.ship-method-body { display: grid; gap: 2px; }
.ship-method-name { font-size: 14px; letter-spacing: 0.04em; }
.ship-method-time { font-size: 13px; color: var(--ok); }
.ship-method-desc { font-size: 12px; color: var(--muted); }
.ship-method-price { font-size: 14px; white-space: nowrap; }
.ship-row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.ship-table { display: grid; gap: 2px; background: var(--line); border: 1px solid var(--line); margin: 12px 0 16px; }
.ship-table-row { display: grid; grid-template-columns: 1.4fr 1fr 0.8fr 1.4fr; gap: 16px; padding: 16px; background: var(--bg); font-size: 14px; color: var(--silver); }
.ship-table-row strong { color: var(--white); font-weight: 500; }

/* promo */
.promo { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px; }
.promo summary { list-style: none; cursor: pointer; }
.promo summary::-webkit-details-marker { display: none; }
.promo-form { display: flex; gap: 8px; margin-top: 12px; }
.promo-form .input { height: 40px; text-transform: uppercase; }
.promo-applied { display: flex; gap: 12px; align-items: center; }
.summary-total small { font-size: 12px; }
.cart-actions { display: flex; gap: 18px; align-items: center; }
.cart-actions > form { margin-top: 14px; }

/* collections */
.collection-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.collection-card { position: relative; display: block; aspect-ratio: var(--card-ratio, 4 / 5); overflow: hidden; background: var(--graphite); }
.collection-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-out), filter 600ms; filter: brightness(0.7); }
.collection-card:hover img { transform: scale(1.05); filter: brightness(0.55); }
.collection-card-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px; background: linear-gradient(180deg, transparent, rgb(var(--bg-rgb) / 0.85)); }
.collection-card-body h3 { font-size: clamp(30px, 3.4vw, 48px); margin: 8px 0; }
.collection-card-body p { color: var(--silver); font-size: 14px; margin: 0 0 14px; max-width: 380px; }
.page-banner { position: relative; padding: calc(var(--header-h) + clamp(80px, 14vw, 180px)) 0 clamp(36px, 5vw, 60px); margin-bottom: 36px; overflow: hidden; border-bottom: 1px solid var(--line); }
.page-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.35; filter: grayscale(1); animation: hero-zoom 2.4s var(--ease-out) both; transform: scale(1.1); }
.page-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(var(--bg-rgb) / 0.3), var(--bg)); }
.page-banner .container { position: relative; z-index: 2; }
.page-lead { color: var(--silver); max-width: 560px; font-size: 16px; }

/* modal (size guide) */
dialog.modal { width: min(92vw, 640px); max-height: 86vh; background: var(--bg-2); color: var(--text); border: 1px solid var(--line-strong); padding: 24px; box-shadow: 0 40px 100px rgba(0,0,0,0.6); }
dialog.modal[open] { animation: modal-in 420ms var(--ease-out); }
dialog.modal::backdrop { background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); }
@keyframes modal-in { from { opacity: 0; transform: translateY(16px) scale(0.98); } }
.modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.modal-head h2 { margin: 0; }
.size-table th, .size-table td { white-space: nowrap; }
.size-head { align-items: center; gap: 12px; }
.size-head .text-btn { margin-left: auto; text-decoration: underline; text-underline-offset: 3px; }

/* oauth */
.oauth { display: grid; gap: 10px; margin-bottom: 18px; }
.oauth-btn { gap: 12px; letter-spacing: 0.12em; }
.oauth-btn svg { flex: none; }
.oauth-or { display: flex; align-items: center; gap: 14px; color: var(--muted); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; margin-top: 6px; }
.oauth-or::before, .oauth-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.identity-row { display: grid; grid-template-columns: 1.2fr 2fr auto; gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 14px; }

/* admin additions */
.admin-spacer { flex: 1; }
.quick-links { display: flex; gap: 10px; flex-wrap: wrap; }
.tr-block { display: grid; gap: 10px; }
.tr-lang { border: 1px solid var(--line); padding: 0 16px; }
.tr-lang summary { cursor: pointer; padding: 14px 0; font-size: 13px; letter-spacing: 0.08em; }
.tr-lang[open] { padding-bottom: 16px; }
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.media-card { display: grid; gap: 10px; align-content: start; margin: 0; }
.media-card h2 { margin: 6px 0 0; }
.media-card p { margin: 0; }
.media-preview { aspect-ratio: 4 / 5; background: var(--graphite); overflow: hidden; }
.media-preview img { width: 100%; height: 100%; object-fit: cover; }
.media-form { display: grid; gap: 8px; }
.file-input { height: auto !important; padding: 12px !important; font-size: 13px !important; }
.country-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px 18px; }
.country-grid-narrow { grid-template-columns: 1fr 1fr; }
.pick-list { display: grid; gap: 8px; max-height: 420px; overflow-y: auto; margin-bottom: 14px; }
.pick-row { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.order-input { width: 64px; height: 34px; background: var(--graphite); border: 1px solid var(--line); padding: 0 8px; }
.cover-preview { width: 100%; aspect-ratio: 4/5; object-fit: cover; margin-bottom: 12px; }
.thumb-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.seg { display: inline-flex; border: 1px solid var(--line-strong); }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; opacity: 0; }
.seg span { display: block; padding: 10px 18px; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--silver); }
.seg input:checked + span { background: var(--white); color: var(--bg); }
.align-end { align-self: end; padding-bottom: 14px; }
[data-discount-form][data-target="shipping"] [data-only="products"], [data-discount-form][data-target="products"] [data-only="shipping"] { display: none; }

@media (max-width: 900px) {
  .ship-table-row { grid-template-columns: 1fr 1fr; }
  .order-grid { grid-template-columns: 1fr; }
  .identity-row { grid-template-columns: 1fr auto; }
  .identity-row > :nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  .lang-switch.hide-mobile { display: none; }
}
@media (max-width: 600px) {
  .phone-group { grid-template-columns: 112px 1fr; }
  .collection-grid { grid-template-columns: 1fr; }
  .promo-form { flex-direction: column; }
  .country-grid-narrow { grid-template-columns: 1fr; }
}
.address-field.is-searching::after { content: ""; position: absolute; right: 16px; top: 39px; width: 14px; height: 14px; border: 1.5px solid var(--silver); border-right-color: transparent; border-radius: 50%; animation: spin 700ms linear infinite; }

/* sale prices */
.badges { position: absolute; top: 12px; left: 12px; z-index: 2; display: flex; gap: 6px; flex-wrap: wrap; }
.badges .badge { position: static; }
.badge-sale { background: var(--accent, var(--white)); color: var(--accent-ink, var(--bg)); border-color: var(--accent, var(--white)); font-weight: 700; }
.card-price { display: grid; justify-items: end; gap: 2px; }
.card-price .price-old { margin: 0; }
.price-now { color: var(--white); font-weight: 600; }
.price-old { color: var(--muted); text-decoration-thickness: 1px; }
.card-sale { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ok); }
.price-sale { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.price-sale .price-now { font-size: 24px; }
.price-sale .price-old { font-size: 17px; margin: 0; }
.pill-sale { background: var(--accent, var(--white)); color: var(--accent-ink, var(--bg)); border-color: var(--accent, var(--white)); font-weight: 700; }
.pill-sale::before { display: none; }
.sale-note { margin: 0 0 22px; font-size: 13px; color: var(--ok); }
.sale-note strong { font-weight: 600; letter-spacing: 0.04em; }
.sale-offer { color: var(--silver); margin-top: -12px; }
.bag-price { text-align: right; }

/* ================================================================ v3 additions */
/* wishlist heart */
.wish-btn { position: absolute; top: 10px; right: 10px; z-index: 3; width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgb(var(--bg-rgb) / 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); cursor: pointer; color: var(--white); opacity: 0; transition: opacity 300ms, transform 300ms var(--ease-out); }
.product-card:hover .wish-btn, .wish-btn.is-saved, .wish-btn:focus-visible { opacity: 1; }
.wish-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; transition: fill 250ms; }
.wish-btn.is-saved svg { fill: currentColor; }
.wish-btn.is-pop { animation: bump 500ms var(--ease-out); }
.wish-btn-lg { position: static; opacity: 1; width: 46px; height: 46px; flex: none; background: var(--graphite); border: 1px solid var(--line); }
.title-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
@media (pointer: coarse) { .wish-btn { opacity: 1; } }
.badge-drop { background: var(--bg); border-color: var(--silver); }

/* back in stock */
.notify-form { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.notify-form p { margin: 0 0 10px; }
.notify-row { display: flex; gap: 8px; flex-wrap: wrap; }
.notify-row select, .notify-row input { height: 40px; background: var(--graphite); border: 1px solid var(--line); padding: 0 12px; min-width: 0; }
.notify-row input { flex: 1; }
.notify-msg { margin-top: 8px; }

/* drops */
.drop-box, .drop-hero { display: grid; gap: 8px; padding: 22px; border: 1px solid var(--line-strong); background: var(--bg-2); }
.drop-hero { margin-top: 26px; max-width: 560px; background: rgb(var(--bg2-rgb) / 0.8); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.countdown { display: flex; align-items: baseline; gap: 4px; font-family: var(--font-display); font-stretch: 125%; font-weight: 800; font-size: 34px; line-height: 1; }
.countdown small { font-size: 12px; color: var(--muted); margin-right: 12px; font-weight: 500; }
.countdown-lg { font-size: clamp(40px, 7vw, 72px); }
.countdown-lg small { font-size: 14px; }
.remind-form { display: flex; gap: 8px; flex-wrap: wrap; }
.remind-form .input { flex: 1; min-width: 200px; height: 52px; }

/* pickup lockers */
.pickup-field { margin-top: 14px; }
.pickup-search { height: 44px; margin-bottom: 6px; }
.field select[size] { height: auto; padding: 6px; background-image: none; }
.field select[size] option { padding: 8px; }
.field select[size] option:checked { background: var(--white); color: var(--bg); }
.pay-step-note { margin: 0 0 12px; }

/* embedded payment */
.payment-element { min-height: 120px; }
.pay-loading { display: flex; gap: 10px; align-items: center; color: var(--muted); font-size: 14px; padding: 24px 0; }
.pay-address { margin: -6px 0 6px; line-height: 1.7; }

/* account: orders */
.order-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.return-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.return-row > div { flex-basis: 100%; }
.product-grid-3 { grid-template-columns: repeat(3, 1fr); }
.code-input { font-size: 22px !important; letter-spacing: 0.3em; text-align: center; }

/* admin analytics */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; background: var(--line); border: 1px solid var(--line); margin: 14px 0 22px; }
.kpis > div { background: var(--bg-2); padding: 16px; display: grid; gap: 6px; }
.kpis strong { font-family: var(--font-display); font-stretch: 112%; font-size: 24px; font-weight: 800; }
.bars { display: flex; align-items: flex-end; gap: 3px; height: 180px; border-bottom: 1px solid var(--line-strong); }
.bar { flex: 1; height: 100%; display: flex; align-items: flex-end; }
.bar span { width: 100%; height: max(var(--h), 1px); background: linear-gradient(180deg, var(--white), var(--silver)); opacity: 0.85; transform-origin: bottom; animation: grow-up 900ms var(--ease-out) both; }
.bar:hover span { opacity: 1; background: var(--white); }
@keyframes grow-up { from { transform: scaleY(0); } }
.bars-axis { display: flex; justify-content: space-between; margin-top: 6px; }
.hbar { margin-bottom: 12px; }
.hbar-label { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; margin-bottom: 5px; }
.hbar-track { height: 6px; background: var(--graphite-3); }
.hbar-track span { display: block; height: 100%; background: var(--silver); transform-origin: left; animation: grow 900ms var(--ease-out) both; }
.seg-links { display: flex; gap: 6px; }

/* admin security */
.qr-row { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.qr svg { display: block; width: 200px; height: 200px; }
.secret { display: block; margin-top: 6px; font-size: 15px; letter-spacing: 0.12em; word-break: break-all; color: var(--white); }
.codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.codes code { padding: 10px; background: var(--graphite); border: 1px solid var(--line); text-align: center; letter-spacing: 0.1em; }
.steps { padding-left: 18px; color: var(--silver); }

@media (max-width: 900px) {
  .kpis { grid-template-columns: 1fr 1fr; }
  .product-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
.pickup-chosen { margin-top: 8px; padding: 10px 12px; border: 1px solid var(--silver); font-size: 13px; color: var(--white); }
.pickup-chosen::before { content: "✓ "; color: var(--ok); }
@media (max-width: 360px) {
  .icon-btn { width: 32px; }
  .icon-btn svg { width: 18px; height: 18px; }
  .logo { font-size: 16px; letter-spacing: 0.22em; padding-left: 0.22em; }
  .header-inner { gap: 8px; }
  .container { padding: 0 12px; }
}

/* ================================================================ delivery chooser */
.delivery { display: grid; gap: 14px; }
.delivery-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line-strong); }
.delivery-tab { display: flex; align-items: center; gap: 12px; padding: 16px; background: transparent; border: 0; color: var(--silver); cursor: pointer; text-align: left; transition: background 300ms var(--ease), color 300ms; position: relative; }
.delivery-tab + .delivery-tab { border-left: 1px solid var(--line-strong); }
.delivery-tab svg { width: 26px; height: 26px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; }
.delivery-tab:hover { color: var(--white); background: var(--graphite); }
.delivery-tab.is-active { background: var(--accent, var(--white)); color: var(--accent-ink, var(--bg)); }
.delivery-tab-text { display: grid; gap: 2px; }
.delivery-tab-title { font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.delivery-tab-sub { font-size: 12px; opacity: 0.7; }
.delivery-panel { display: grid; gap: 14px; animation: page-in 400ms var(--ease-out) both; }

.ship-options { display: grid; gap: 8px; }
.ship-option { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 16px 18px; border: 1px solid var(--line); cursor: pointer; transition: border-color 250ms, background 250ms; }
.ship-option input { position: absolute; opacity: 0; pointer-events: none; }
.ship-option-dot { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--line-strong); display: grid; place-items: center; transition: border-color 200ms; }
.ship-option-dot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent, var(--white)); transform: scale(0); transition: transform 250ms var(--ease-out); }
.ship-option:hover { border-color: var(--line-strong); }
.ship-option:has(input:checked) { border-color: var(--silver); background: var(--graphite); }
.ship-option:has(input:checked) .ship-option-dot { border-color: var(--white); }
.ship-option:has(input:checked) .ship-option-dot::after { transform: scale(1); }
.ship-option:has(input:focus-visible) { outline: 1px solid var(--silver); outline-offset: 2px; }
.ship-option-body { display: grid; gap: 2px; min-width: 0; }
.ship-option-name { font-size: 14px; letter-spacing: 0.03em; }
.ship-option-time { font-size: 12px; color: var(--ok); }
.ship-option-desc { font-size: 12px; color: var(--muted); }
.ship-option-price { font-size: 14px; white-space: nowrap; }


.locker-box { display: grid; gap: 10px; }
.locker-head { display: flex; justify-content: space-between; align-items: baseline; }
.locker-search { position: relative; display: block; }
.locker-search svg { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); fill: none; stroke: var(--muted); stroke-width: 1.5; }
.locker-search input { width: 100%; height: 50px; padding: 0 16px 0 44px; background: var(--graphite); border: 1px solid var(--line); outline: none; font-size: 15px; transition: border-color 200ms; }
.locker-search input:focus { border-color: var(--silver); }
.locker-count { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.locker-list { max-height: 340px; overflow-y: auto; border: 1px solid var(--line); background: var(--bg); overscroll-behavior: contain; scrollbar-width: thin; }
.locker-city { position: sticky; top: 0; z-index: 1; padding: 8px 14px; background: var(--graphite); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); }
.locker-item { display: grid; gap: 2px; width: 100%; padding: 12px 14px 12px 40px; background: none; border: 0; border-bottom: 1px solid var(--line); text-align: left; cursor: pointer; position: relative; color: var(--text); transition: background 200ms; }
.locker-item::before { content: ""; position: absolute; left: 14px; top: 16px; width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--line-strong); }
.locker-item:hover, .locker-item:focus-visible { background: var(--graphite); outline: none; }
.locker-item.is-selected { background: var(--graphite-2); }
.locker-item.is-selected::before { background: var(--accent, var(--white)); border-color: var(--accent, var(--white)); box-shadow: inset 0 0 0 3px var(--graphite-2); }
.locker-item-name { font-size: 14px; }
.locker-item-addr { font-size: 12px; color: var(--muted); }
.locker-empty { padding: 22px 14px; color: var(--muted); font-size: 14px; }
.locker-more { margin: 12px; width: calc(100% - 24px); }
.locker-chosen { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 16px; border: 1px solid var(--white); background: var(--graphite); animation: page-in 400ms var(--ease-out) both; }
.locker-chosen div { display: grid; gap: 2px; min-width: 0; }
.locker-chosen strong { font-weight: 500; font-size: 14px; }
.locker-chosen span { font-size: 12px; color: var(--silver); }
.locker-check { width: 28px; height: 28px; border-radius: 50%; background: var(--accent, var(--white)); color: var(--accent-ink, var(--bg)); display: grid; place-items: center; font-size: 13px; font-weight: 700; }
.locker-change { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 600px) {
  .delivery-tab { padding: 14px 12px; gap: 10px; }
  .delivery-tab svg { width: 22px; height: 22px; }
  .locker-list { max-height: 300px; }
}

/* ================================================================ intro (first visit) */
.intro { position: fixed; inset: 0; z-index: 300; display: grid; place-content: center; gap: 26px; background: var(--bg);
  clip-path: inset(0 0 0 0); animation: intro-out 900ms var(--ease) 3.4s forwards; }   /* CSS fallback if JS never runs */
.intro.is-done { animation: intro-out 800ms var(--ease) forwards; }
.intro-logo { display: flex; justify-content: center; gap: 0.3em; padding-left: 0.3em; overflow: hidden; font-family: var(--font-display); font-stretch: 125%; font-weight: 900; font-size: clamp(56px, 12vw, 140px); line-height: 0.9; }
.intro-logo span { display: inline-block; transform: translateY(105%); animation: rise 900ms var(--ease-out) forwards;
  background: var(--title-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.intro-logo span:nth-child(2) { animation-delay: 90ms; }
.intro-logo span:nth-child(3) { animation-delay: 180ms; }
.intro-text { margin: 0; padding: 0 24px; text-align: center; font-size: clamp(11px, 1.6vw, 13px); letter-spacing: 0.34em; text-transform: uppercase; color: var(--silver); }
.intro-text span { display: inline-block; opacity: 0; filter: blur(8px); transform: translateY(8px); animation: intro-word 700ms var(--ease-out) forwards; animation-delay: calc(450ms + var(--i) * 170ms); }
.intro.is-done .intro-text { animation: intro-text-out 400ms var(--ease) forwards; }
@keyframes intro-word { to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes intro-text-out { to { opacity: 0; transform: translateY(-10px); } }
.intro.is-done .intro-logo span { animation: intro-letters-out 600ms var(--ease) forwards; }
.intro.is-done .intro-logo span:nth-child(2) { animation-delay: 50ms; }
.intro.is-done .intro-logo span:nth-child(3) { animation-delay: 100ms; }
@keyframes intro-letters-out { from { transform: translateY(0); } to { transform: translateY(-105%); } }
@keyframes intro-out { to { clip-path: inset(0 0 100% 0); visibility: hidden; } }
body:has(.intro) main { animation-delay: 1700ms; }
body:has(.intro) .hero-title span { animation-delay: calc(1800ms + var(--i, 0) * 90ms); }
@media (prefers-reduced-motion: reduce) { .intro { display: none; } }

/* ================================================================ event bar (top) */
body:has(.event-bar) { --bar-h: 38px; }
.event-bar { position: fixed; inset: 0 0 auto 0; z-index: 51; height: var(--bar-h); display: flex; align-items: center; background: var(--graphite); color: var(--text); border-bottom: 1px solid var(--line-strong);
  transition: transform 400ms var(--ease); view-transition-name: event-bar; animation: bar-in 600ms var(--ease-out) both; }
.event-bar.is-hidden { transform: translateY(-100%); }
.event-bar.is-closing { transform: translateY(-100%); }
@keyframes bar-in { from { transform: translateY(-100%); } }
.event-bar-link { flex: 1; min-width: 0; height: 100%; display: flex; align-items: center; justify-content: center; gap: 14px; padding: 0 12px 0 48px;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; }
.event-bar-kind { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); }
.event-bar-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.event-bar-timer { font-variant-numeric: tabular-nums; letter-spacing: 0.08em; }
.event-bar-timer { color: var(--silver); }
.event-bar-timer b { color: var(--white); font-family: var(--font-display); font-stretch: 112%; font-weight: 800; font-size: 13px; letter-spacing: 0.06em; }
.event-bar-more { transition: transform 300ms var(--ease-out); }
.event-bar-link:hover .event-bar-more { transform: translateX(4px); }
.event-bar-close { width: 48px; height: 100%; display: grid; place-items: center; background: none; border: 0; color: inherit; cursor: pointer; flex: none; }
.event-bar-close svg { width: 16px; height: 16px; }
.event-bar.is-live .event-bar-kind { color: #ff8a84; }
.event-bar-close { color: var(--silver); }
.event-bar-close:hover, .event-bar-link:hover .event-bar-title { color: var(--white); }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: #ff5f57; box-shadow: 0 0 0 0 rgba(255, 95, 87, 0.6); animation: live-pulse 1.6s infinite; flex: none; }
@keyframes live-pulse { 70% { box-shadow: 0 0 0 7px rgba(255, 95, 87, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 95, 87, 0); } }
@media (max-width: 600px) {
  .event-bar-link { justify-content: flex-start; padding-left: 16px; gap: 10px; font-size: 10px; letter-spacing: 0.1em; }
  .event-bar-kind { display: none; }
  .event-bar.is-live .event-bar-kind { display: inline-flex; font-size: 0; gap: 0; }
  .event-bar-timer { margin-left: auto; }
  .event-bar-more { display: none; }
}

/* ================================================================ countdown timer */
.timer { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; max-width: 520px; }
.timer-unit { display: grid; justify-items: center; gap: 6px; padding: 16px 6px 12px; border: 1px solid var(--line-strong); background: rgb(var(--graphite-rgb) / 0.72);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.timer-num { display: block; font-family: var(--font-display); font-stretch: 125%; font-weight: 800; font-size: clamp(30px, 5vw, 46px); line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--white); }
.timer-num.is-tick { animation: timer-tick 450ms var(--ease-out); }
@keyframes timer-tick { from { transform: translateY(-30%); opacity: 0.2; } }
.timer-label { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
.timer-lg { max-width: 680px; gap: 10px; }
.timer-lg .timer-unit { padding: 22px 6px 16px; }
.timer-lg .timer-num { font-size: clamp(38px, 8vw, 80px); }
.timer-sm { gap: 6px; max-width: 360px; }
.timer-sm .timer-unit { padding: 10px 4px 8px; gap: 4px; }
.timer-sm .timer-num { font-size: 24px; }
.timer-sm .timer-label { font-size: 9px; letter-spacing: 0.16em; }
.timer-live { grid-column: 1 / -1; font-family: var(--font-display); font-stretch: 125%; font-weight: 800; text-transform: uppercase; font-size: 22px; color: var(--white); }
.timer-caption { margin: 18px 0 10px; }

/* ================================================================ event cards */
.event-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }
.event-card { display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--line); background: var(--bg-2); overflow: hidden; }
.event-card-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--graphite); display: grid; place-items: center; }
.event-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); filter: grayscale(0.2); }
.event-card:hover .event-card-media img { transform: scale(1.04); }
.event-card-word { font-size: clamp(60px, 10vw, 140px); color: var(--graphite-3); }
.event-card-body { display: grid; align-content: start; gap: 6px; padding: clamp(18px, 2.4vw, 30px); }
.event-card-kind { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--silver); }
.event-card.is-live .event-card-kind { color: #ff8a84; }
.event-card-title { font-size: clamp(26px, 2.8vw, 42px); margin: 4px 0 2px; overflow-wrap: anywhere; hyphens: auto; }
.event-card-title a:hover { color: var(--silver-2); }
.event-card-sub { margin: 0; color: var(--silver); }
.event-card-place { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; color: var(--muted); }
.event-card-place svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.event-card-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.event-card-big { grid-column: 1 / -1; grid-template-rows: none; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.event-card-big .event-card-media { aspect-ratio: auto; min-height: 380px; }
.event-card-big .event-card-body { align-content: center; padding: clamp(24px, 4vw, 56px); }
.event-card-big .event-card-title { font-size: clamp(32px, 3.6vw, 60px); }
@media (max-width: 800px) {
  .event-list { grid-template-columns: 1fr; }
  .event-card-big { grid-template-columns: 1fr; }
  .event-card-big .event-card-media { min-height: 0; aspect-ratio: 4 / 3; }
}

/* ================================================================ event page */
.event-hero { position: relative; padding: calc(var(--header-h) + clamp(60px, 10vw, 140px)) 0 clamp(40px, 6vw, 72px); margin-bottom: 40px; overflow: hidden; border-bottom: 1px solid var(--line); }
.event-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.32; filter: grayscale(0.3); }
.event-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(var(--bg-rgb) / 0.35) 0%, rgb(var(--bg-rgb) / 0.92) 100%); }
.event-hero-inner { position: relative; z-index: 1; }
.event-hero-title { font-size: clamp(40px, 8vw, 128px); margin: 10px 0 12px; max-width: 14ch; overflow-wrap: anywhere; hyphens: auto; }
.event-facts { display: flex; flex-wrap: wrap; gap: 12px 40px; margin: 24px 0 8px; }
.event-facts dt { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
.event-facts dd { margin: 4px 0 0; font-size: 15px; color: var(--white); }
.event-live { display: inline-flex; align-items: center; gap: 10px; margin: 24px 0 0; font-family: var(--font-display); font-stretch: 125%; font-weight: 800; font-size: 22px; text-transform: uppercase; }
.event-live.is-past { color: var(--muted); }
.event-text { margin: 0 0 56px; }
.drop-hero .timer { margin: 12px 0 14px; }

/* ================================================================ hero: photo count + drop countdown */
.hero-media-2 { grid-template-columns: repeat(2, 1fr); }
.hero-media-1 { grid-template-columns: 1fr; }
.hero-media-1 img { object-position: center 30%; }
@media (max-width: 900px) { .hero-media-1 { grid-template-columns: 1fr; } .hero-media-2 { grid-template-columns: repeat(2, 1fr); } }
.hero-drop { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 20px 40px; margin-top: 28px;
  animation: page-in 900ms var(--ease-out) 400ms both; }
body:has(.intro) .hero-drop { animation-delay: 2100ms; }
.hero-drop-head { min-width: 0; }
.hero-drop-title { font-size: clamp(30px, 4.4vw, 64px); margin: 10px 0 8px; overflow-wrap: anywhere; }
.hero-drop-title a:hover { color: var(--silver-2); }
.hero-drop-when { margin: 0; color: var(--silver); font-size: 14px; }
.hero-drop-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; }
.timer-hero { min-width: min(520px, 100%); gap: 8px; }
.timer-hero .timer-unit { padding: 18px 8px 12px; background: rgb(var(--bg-rgb) / 0.55); }
.timer-hero .timer-num { font-size: clamp(34px, 5vw, 64px); }
@media (max-width: 900px) {
  .hero-drop { grid-template-columns: 1fr; }
  .timer-hero { min-width: 0; }
}

/* product card: not for sale yet */
.card-soon { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 10px; background: rgb(var(--bg-rgb) / 0.82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid var(--line-strong); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--white); text-align: center; }
.card-soon svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; }
.hero-count-panel { margin-bottom: 20px; }
.hero-count-form { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.hero-count-opt { position: relative; display: grid; gap: 8px; padding: 10px; border: 1px solid var(--line); cursor: pointer; font-size: 13px; }
.hero-count-opt input { position: absolute; opacity: 0; }
.hero-count-opt:has(input:checked) { border-color: var(--white); background: var(--graphite); }
.hero-count-thumbs { display: grid; grid-auto-flow: column; gap: 2px; width: 150px; height: 84px; background: var(--graphite-2); }
.hero-count-thumbs img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); opacity: 0.8; min-width: 0; }

/* admin: e-mail previews */
.email-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 18px; align-items: start; }
.email-list { display: grid; gap: 2px; position: sticky; top: 20px; }
.email-list a { padding: 10px 14px; font-size: 13px; color: var(--silver); border-left: 2px solid transparent; }
.email-list a:hover { color: var(--white); background: var(--graphite); }
.email-list a.is-active { color: var(--white); background: var(--graphite-2); border-left-color: var(--white); }
.email-stage { border: 1px solid var(--line); background: var(--bg-2); }
.email-stage-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.email-stage-head strong { display: block; font-weight: 500; margin-top: 2px; }
.email-devices { padding: 0; background: #050506; }
.email-frame { display: block; width: 100%; height: 1150px; border: 0; background: #050506; }
@media (max-width: 900px) { .email-layout { grid-template-columns: 1fr; } .email-list { position: static; grid-auto-flow: column; overflow-x: auto; } .email-list a { white-space: nowrap; } }

/* ================================================================ admin shell v2 */
.admin-shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }
.admin-side { position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; gap: 18px; padding: 22px 14px 18px;
  background: var(--bg-2); border-right: 1px solid var(--line); scrollbar-width: thin; }
.admin-brand { display: flex; align-items: baseline; gap: 10px; padding: 0 10px; }
.admin-brand .logo { font-size: 18px; padding-left: 0; }
.admin-tag { font-size: 9px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line-strong); padding: 3px 6px; }
.admin-search { position: relative; }
.admin-search svg { position: absolute; left: 11px; top: 50%; width: 15px; height: 15px; transform: translateY(-50%); fill: none; stroke: var(--muted); stroke-width: 1.6; }
.admin-search input { width: 100%; height: 38px; padding: 0 10px 0 33px; background: var(--graphite); border: 1px solid var(--line); outline: none; font-size: 12px; }
.admin-search input:focus { border-color: var(--line-strong); }
.admin-nav { display: grid; gap: 16px; }
.admin-nav-group { display: grid; gap: 1px; }
.admin-nav-title { padding: 0 10px 6px; font-size: 9px; letter-spacing: 0.26em; text-transform: uppercase; color: #5f636b; }
.admin-side .nav { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 10px; font-size: 13px; color: var(--silver); background: none; border: 0;
  border-left: 2px solid transparent; cursor: pointer; text-align: left; transition: background 200ms, color 200ms; }
.admin-side .nav:hover { background: var(--graphite); color: var(--white); }
.admin-side .nav.is-active { background: var(--graphite-2); color: var(--white); border-left-color: var(--white); }
.nav-ico { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0.85; }
.nav-badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: 10px; background: var(--white); color: var(--bg);
  font-size: 11px; font-weight: 600; letter-spacing: 0; }
.nav-badge-float { position: absolute; top: 4px; right: 2px; min-width: 17px; height: 17px; font-size: 10px; }
.admin-me { margin-top: auto; display: grid; gap: 4px; padding-top: 16px; border-top: 1px solid var(--line); }
.admin-me-row { display: flex; align-items: center; gap: 10px; padding: 0 10px 8px; min-width: 0; }
.admin-avatar { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--graphite-3); font-family: var(--font-display); font-weight: 800; font-size: 13px; }
.admin-me-text { display: grid; min-width: 0; line-height: 1.3; }
.admin-me-text strong { font-size: 13px; font-weight: 500; }
.admin-me-text span { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-langs { padding: 2px 10px 8px; }
.admin-topbar, .admin-scrim { display: none; }
.admin-main > h1, .admin-main .toolbar-row h1 { font-family: var(--font-display); font-stretch: 112%; font-size: clamp(24px, 2.6vw, 32px); }
.panel { transition: border-color 300ms; }
.table thead th { position: sticky; top: 0; background: var(--bg-2); z-index: 1; }
.table tbody tr { transition: background 150ms; }
.table tbody tr:hover td { background: rgb(var(--ink-rgb) / 0.035); }
@media (max-width: 1000px) {
  .admin-shell { grid-template-columns: 1fr; }
  .admin-topbar { position: sticky; top: 0; z-index: 40; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; height: 56px; padding: 0 8px;
    background: rgb(var(--bg2-rgb) / 0.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
  .admin-topbar .logo { justify-self: center; font-size: 17px; }
  .admin-topbar .icon-btn { position: relative; }
  .admin-side { position: fixed; z-index: 60; inset: 0 auto 0 0; width: min(300px, 86vw); transform: translateX(-100%); transition: transform 380ms var(--ease-out); }
  .admin-shell.is-menu-open .admin-side { transform: none; box-shadow: 30px 0 60px rgba(0,0,0,0.5); }
  .admin-scrim { position: fixed; inset: 0; z-index: 55; background: rgba(0,0,0,0.55); opacity: 0; pointer-events: none; transition: opacity 300ms; display: block; }
  .admin-shell.is-menu-open .admin-scrim { opacity: 1; pointer-events: auto; }
  .admin-main { padding-top: 22px; }
}

/* admin dashboard v2 */
.dash-head { display: flex; justify-content: space-between; align-items: end; gap: 18px; flex-wrap: wrap; margin-bottom: 22px; }
.dash-head h1 { margin: 6px 0 0 !important; font-size: clamp(28px, 3.4vw, 44px) !important; }
.todo { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin-bottom: 14px; }
.todo-item { position: relative; display: grid; gap: 4px; padding: 18px 20px; border: 1px solid var(--line); background: var(--bg-2); border-top: 2px solid var(--silver);
  transition: transform 300ms var(--ease-out), border-color 200ms, background 200ms; }
.todo-item:hover { transform: translateY(-2px); background: var(--graphite); }
.todo-item strong { font-family: var(--font-display); font-stretch: 125%; font-weight: 800; font-size: 34px; line-height: 1; color: var(--white); }
.todo-item span { font-size: 13px; color: var(--silver); }
.todo-item i { position: absolute; right: 18px; top: 18px; font-style: normal; color: var(--muted); transition: transform 300ms var(--ease-out); }
.todo-item:hover i { transform: translateX(4px); color: var(--white); }
.todo-ok { border-top-color: var(--ok); } .todo-warn { border-top-color: var(--warn); } .todo-bad { border-top-color: var(--danger); }
.todo.is-clear { grid-template-columns: 1fr; }
.todo-clear { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border: 1px solid var(--line); background: var(--bg-2); }
.todo-clear div { display: grid; gap: 2px; } .todo-clear span { font-size: 13px; color: var(--muted); }
.todo-check { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 50%; background: rgba(143,220,176,0.12); color: var(--ok); font-weight: 700; }
.setup { margin-bottom: 18px; }
.setup-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.setup-head h2 { margin: 0; }
.setup-bar { height: 3px; background: var(--graphite-3); margin: 14px 0 6px; }
.setup-bar span { display: block; height: 100%; background: var(--ok); transition: width 600ms var(--ease-out); }
.setup-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 24px; }
.setup-list li { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.setup-list li div { display: grid; gap: 2px; font-size: 13px; }
.setup-list li span { color: var(--muted); font-size: 12px; }
.setup-list li a { border-bottom: 1px solid var(--line-strong); }
.setup-list li.is-done strong { color: var(--muted); font-weight: 400; text-decoration: line-through; text-decoration-color: var(--graphite-3); }
.setup-dot { width: 20px; height: 20px; flex: none; margin-top: 1px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-strong); font-size: 11px; color: var(--bg); }
.setup-list li.is-done .setup-dot { background: var(--ok); border-color: var(--ok); }
@media (max-width: 700px) {
  .admin-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .admin-stats .stat { padding: 16px; min-width: 0; }
  .admin-stats .eyebrow { font-size: 9px; letter-spacing: 0.1em; hyphens: auto; }
  .admin-stats .stat-value { font-size: 24px; white-space: nowrap; }
  .dash-head .quick-links { gap: 6px; }
  .dash-head .btn-sm { height: 36px; padding: 0 12px; font-size: 10px; }
  .todo { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
  .todo-item { padding: 14px; } .todo-item strong { font-size: 28px; }
}

/* payment: Apple Pay / Google Pay + accepted methods */
.express { display: grid; gap: 18px; margin-bottom: 18px; }
.express-element { min-height: 50px; }
.pay-divider { display: flex; align-items: center; gap: 14px; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.pay-divider::before, .pay-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.pay-methods { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; padding: 0; }
.pm { height: 26px; min-width: 42px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; gap: 2px; border: 1px solid var(--line-strong);
  background: var(--graphite); font-size: 11px; font-weight: 600; letter-spacing: 0.02em; color: var(--silver-2); }
.pm-visa { font-style: italic; font-weight: 800; letter-spacing: 0.06em; }
.pm-mc i { width: 12px; height: 12px; border-radius: 50%; background: #c9ccd2; opacity: 0.9; }
.pm-mc i + i { margin-left: -5px; background: #7d8189; mix-blend-mode: screen; }
.pm-apple svg { width: 13px; height: 13px; fill: currentColor; margin-top: -2px; }
.pm-google b { font-weight: 700; margin-right: 1px; }
.footer-pay .pay-methods { margin-top: 0; }
.checkout-methods { display: grid; justify-items: center; gap: 0; margin: 4px 0 14px; }
.footer-pay { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* newsletter band */
.newsletter { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 24px 48px; align-items: end; padding: 0 0 48px; margin-bottom: 48px; border-bottom: 1px solid var(--line); }
.newsletter-title { font-size: clamp(30px, 4vw, 56px); margin: 10px 0 10px; }
.newsletter-form { display: grid; gap: 10px; }
.newsletter-row { display: flex; gap: 8px; }
.newsletter-row .input { flex: 1; min-width: 0; height: 52px; }
.newsletter-row .btn { height: 52px; }
.newsletter-msg:empty { display: none; }
@media (max-width: 800px) { .newsletter { grid-template-columns: 1fr; } .newsletter-row { flex-direction: column; } .newsletter-row .input { flex: none; width: 100%; } }
.code-box { display: inline-block; margin: 18px 0; padding: 20px 28px; border: 1px dashed var(--line-strong); font-family: ui-monospace, Menlo, monospace; font-size: 26px; letter-spacing: 0.18em; color: var(--white); }
.narrow-page { max-width: 760px; }

/* gift cards */
.gift-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 72px); align-items: start; padding-bottom: 56px; }
.gift-visual { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 22px; }
.gift-card-art { position: relative; aspect-ratio: 1.586; padding: clamp(20px, 3vw, 34px); border: 1px solid var(--line-strong); border-radius: 14px; overflow: hidden;
  background: radial-gradient(120% 140% at 0% 0%, var(--graphite-3) 0%, var(--graphite) 48%, var(--bg) 100%); box-shadow: 0 40px 80px rgba(0,0,0,0.55);
  transform: perspective(1000px) rotateX(6deg) rotateY(-10deg); transition: transform 700ms var(--ease-out); display: grid; grid-template-rows: auto 1fr auto; }
.gift-card-art:hover { transform: perspective(1000px) rotateX(0) rotateY(0); }
.gift-card-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.09) 50%, transparent 65%); }
.gift-card-logo { font-family: var(--font-display); font-stretch: 125%; font-weight: 900; font-size: clamp(22px, 3vw, 32px); letter-spacing: 0.3em; color: var(--white); }
.gift-card-tag { position: absolute; right: clamp(20px, 3vw, 34px); top: clamp(24px, 3vw, 38px); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--muted); }
.gift-card-amount { align-self: end; font-family: var(--font-display); font-stretch: 125%; font-weight: 800; font-size: clamp(36px, 6vw, 64px); line-height: 1;
  background: var(--title-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.gift-card-to { margin-top: 10px; min-height: 1.2em; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--silver); }
.gift-points { display: grid; gap: 6px; padding-left: 18px; margin: 0; }
.gift-form { display: grid; gap: 16px; }
.gift-form fieldset { border: 0; padding: 0; margin: 0; }
.gift-form legend { margin-bottom: 10px; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.gift-amounts { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; }
.gift-amount { position: relative; cursor: pointer; }
.gift-amount input { position: absolute; opacity: 0; }
.gift-amount span { display: grid; place-items: center; height: 52px; border: 1px solid var(--line-strong); font-size: 15px; transition: background 200ms, color 200ms, border-color 200ms; }
.gift-amount:hover span { border-color: var(--silver); }
.gift-amount input:checked + span { background: var(--accent, var(--white)); color: var(--accent-ink, var(--bg)); border-color: var(--accent, var(--white)); }
.gift-amount input:focus-visible + span { outline: 1px solid var(--silver); outline-offset: 2px; }
.gift-custom { margin-top: 8px; }
.gift-balance { padding: 36px var(--gutter) 80px; border-top: 1px solid var(--line); }
@media (max-width: 860px) { .gift-layout { grid-template-columns: 1fr; } .gift-visual { position: static; } }
.card-preorder { color: var(--warn); }
.card-rating { color: var(--silver-2); }
.preorder-note { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 14px 0 10px; font-size: 13px; color: var(--silver); }
.sc-table input { width: 64px; height: 34px; padding: 0 8px; background: var(--graphite); border: 1px solid var(--line); }
.sc-table td, .sc-table th { padding: 6px 8px; }

/* reviews */
.reviews { padding-top: clamp(40px, 6vw, 80px); padding-bottom: 20px; }
.reviews-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 48px; align-items: end; margin-bottom: 14px; }
.reviews-score { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 10px; }
.reviews-score strong { font-family: var(--font-display); font-stretch: 125%; font-weight: 800; font-size: clamp(48px, 7vw, 84px); line-height: 1; }
.stars { --r: 0; position: relative; display: inline-block; font-size: 16px; letter-spacing: 3px; line-height: 1; }
.stars::before { content: "★★★★★"; color: var(--graphite-3); }
.stars::after { content: "★★★★★"; position: absolute; left: 0; top: 0; width: calc(var(--r) / 5 * 100%); overflow: hidden; color: var(--white); white-space: nowrap; }
.reviews-bars { display: grid; gap: 6px; font-size: 12px; }
.hbar-row { display: grid; grid-template-columns: 34px 1fr 28px; gap: 10px; align-items: center; }
.hbar-row .hbar-track { height: 4px; }
.fit-scale { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.fit-scale span { padding: 5px 10px; border: 1px solid var(--line); color: var(--muted); }
.fit-scale span.is-top { border-color: var(--white); color: var(--white); }
.review { padding: 22px 0; border-top: 1px solid var(--line); display: grid; gap: 10px; max-width: 760px; }
.review header { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.review p { margin: 0; color: var(--silver); white-space: pre-line; }
.review-photos { display: flex; gap: 8px; flex-wrap: wrap; }
.review-photos img { width: 92px; height: 115px; object-fit: cover; border: 1px solid var(--line); transition: transform 300ms var(--ease-out); }
.review-photos a:hover img { transform: scale(1.03); }
.verified { color: var(--ok); }
.review-reply { border-left: 2px solid var(--line-strong); padding: 6px 0 6px 14px; }
.review-reply p { margin-top: 4px; }
.fit-tip { margin: 12px 0 4px; font-size: 14px; }
@media (max-width: 760px) { .reviews-head { grid-template-columns: 1fr; } }
/* review form */
.star-input { display: inline-flex; flex-direction: row-reverse; gap: 4px; }
.star-input input { position: absolute; opacity: 0; }
.star-input label { font-size: 30px; line-height: 1; color: var(--graphite-3); cursor: pointer; transition: color 150ms, transform 150ms; }
.star-input label:hover, .star-input label:hover ~ label, .star-input input:checked ~ label { color: var(--white); }
.star-input label:active { transform: scale(0.9); }
.star-input input:focus-visible + label { outline: 1px solid var(--silver); outline-offset: 2px; }
.review-item { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 16px; padding: 20px 0; border-top: 1px solid var(--line); }
.review-item img { width: 72px; height: 90px; object-fit: cover; background: var(--graphite); }
.review-done { color: var(--ok); }
/* admin: reviews, gift cards, channels */
.review-admin { display: grid; gap: 10px; margin-bottom: 12px; }
.review-admin-head { display: flex; justify-content: space-between; gap: 12px; align-items: start; }
.review-admin-body { margin: 0; color: var(--silver); white-space: pre-line; }
.review-admin-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.review-admin-actions .input { flex: 1; min-width: 200px; height: 40px; }
.inline-actions { display: inline-flex; gap: 4px; align-items: center; white-space: nowrap; }
.copy-code { display: inline-block; padding: 8px 12px; background: var(--graphite); border: 1px solid var(--line); word-break: break-all; font-size: 13px; }
.steps-list { margin: 0; padding-left: 20px; display: grid; gap: 10px; color: var(--silver); font-size: 14px; }
.bulk-bar { position: sticky; bottom: 12px; z-index: 5; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; padding: 12px 14px;
  background: rgb(var(--graphite-rgb) / 0.94); border: 1px solid var(--line-strong); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.bulk-bar select { height: 40px; background: var(--graphite); border: 1px solid var(--line); padding: 0 10px; }
.table td.pick, .table th.pick { width: 36px; }
/* legal pages */
.legal-updated { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.seller-card { padding: 16px 18px; border: 1px solid var(--line); background: var(--bg-2); color: var(--text); line-height: 1.7; margin: 8px 0 14px; }
.legal-table { font-size: 13px; margin: 10px 0 14px; }
.legal-table td, .legal-table th { white-space: normal; vertical-align: top; }
.legal-form { padding: 18px 20px; border: 1px dashed var(--line-strong); }
.legal-form p { margin: 0 0 10px; }
.prose ol, .prose ul { padding-left: 20px; display: grid; gap: 8px; }
.reviews-empty { margin: 8px 0 0; font-size: 18px; color: var(--silver); }
/* admin: messages */
.inbox { border: 1px solid var(--line); background: var(--bg-2); }
.inbox-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 14px 16px; border-bottom: 1px solid var(--line); transition: background 150ms; }
.inbox-row:hover { background: var(--graphite); }
.inbox-row.is-new { box-shadow: inset 3px 0 0 var(--white); }
.inbox-row.is-new .inbox-subject { color: var(--white); font-weight: 600; }
.inbox-avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--graphite-3); font-weight: 700; }
.inbox-main { display: grid; gap: 2px; min-width: 0; }
.inbox-top { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.inbox-subject { font-size: 14px; color: var(--silver-2); }
.inbox-snippet { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-meta { display: grid; justify-items: end; gap: 6px; white-space: nowrap; }
.inbox-count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--graphite-3); display: inline-grid; place-items: center; color: var(--text); }
.thread { display: grid; gap: 12px; margin-bottom: 16px; }
.bubble { max-width: 85%; padding: 14px 16px; border: 1px solid var(--line); background: var(--bg-2); }
.bubble.is-out { justify-self: end; background: var(--graphite-2); border-color: var(--line-strong); }
.bubble-head { margin-bottom: 6px; }
.bubble-body { white-space: pre-line; color: var(--silver-2); line-height: 1.65; }
.reply-box textarea { min-height: 150px; }
.reply-actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.hero-video-admin { display: grid; gap: 12px; margin-top: 14px; max-width: 560px; }
.hero-video-admin video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--graphite); border: 1px solid var(--line); }
.hero-media-video { grid-template-columns: 1fr; opacity: 0.62; filter: grayscale(0.35) contrast(1.05); }
.hero-media-video video { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); animation: hero-zoom 2.4s var(--ease-out) forwards; }

/* shop filters */
.filter-actions { display: flex; align-items: center; gap: 14px; flex: none; }
.filter-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--line-strong); background: none; color: var(--text);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer; transition: border-color 200ms; }
.filter-toggle:hover { border-color: var(--white); }
.filter-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.filter-toggle .nav-badge { margin-left: 2px; }
.filter-panel { position: fixed; inset: 0; z-index: 80; pointer-events: none; }
.filter-scrim { position: absolute; inset: 0; background: rgba(0,0,0,0.55); opacity: 0; transition: opacity 300ms; }
.filter-sheet { position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 100%); display: flex; flex-direction: column; gap: 4px; padding: 22px 24px;
  background: var(--bg-2); border-left: 1px solid var(--line); overflow-y: auto; transform: translateX(100%); transition: transform 450ms var(--ease-out); }
.filter-panel.is-open { pointer-events: auto; }
.filter-panel.is-open .filter-scrim { opacity: 1; }
.filter-panel.is-open .filter-sheet { transform: none; }
.filter-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.filter-group { border: 0; border-top: 1px solid var(--line); padding: 18px 0; margin: 0; display: grid; gap: 10px; }
.filter-group legend { padding: 0; margin-bottom: 10px; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); float: left; width: 100%; }
.radio-row { display: flex; gap: 10px; align-items: center; font-size: 14px; cursor: pointer; }
.filter-sizes { display: flex; flex-wrap: wrap; gap: 6px; }
.size-chip { position: relative; cursor: pointer; }
.size-chip input { position: absolute; opacity: 0; }
.size-chip span { display: grid; place-items: center; min-width: 48px; height: 40px; padding: 0 12px; border: 1px solid var(--line-strong); font-size: 13px; transition: all 200ms; }
.size-chip input:checked + span { background: var(--accent, var(--white)); color: var(--accent-ink, var(--bg)); border-color: var(--accent, var(--white)); }
.size-chip input:focus-visible + span { outline: 1px solid var(--silver); outline-offset: 2px; }
.price-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; }
.filter-foot { position: sticky; bottom: -22px; margin-top: auto; display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; padding: 16px 0 22px; background: var(--bg-2); }
.active-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: -18px 0 24px; }

/* quick view */
.quick-btn { position: absolute; right: 12px; bottom: 12px; z-index: 3; width: 38px; height: 38px; display: none; place-items: center; border-radius: 50%;
  background: rgb(var(--bg-rgb) / 0.8); border: 1px solid var(--line-strong); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.quick-btn svg { width: 16px; height: 16px; fill: none; stroke: var(--white); stroke-width: 1.6; }
@media (hover: none), (max-width: 900px) { .quick-btn { display: grid; } }
dialog.qv-modal { width: min(980px, calc(100% - 24px)); max-height: calc(100dvh - 24px); padding: 0; overflow: auto; }
dialog.qv-modal::backdrop { background: rgba(0,0,0,0.7); backdrop-filter: blur(4px); }
dialog.qv-modal[open] { animation: qv-in 450ms var(--ease-out); }
@keyframes qv-in { from { opacity: 0; transform: translateY(18px) scale(0.98); } }
.qv-close { position: absolute; right: 10px; top: 10px; z-index: 5; background: rgb(var(--bg-rgb) / 0.7); border-radius: 50%; }
.qv { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.qv-gallery { background: var(--graphite); display: grid; align-content: start; }
.qv-main { aspect-ratio: var(--card-ratio, 4 / 5); overflow: hidden; }
.qv-main img { width: 100%; height: 100%; object-fit: cover; animation: page-in 400ms var(--ease-out); }
.qv-thumbs { display: flex; gap: 2px; padding: 2px; overflow-x: auto; }
.qv-thumb { width: 64px; flex: none; aspect-ratio: 4 / 5; padding: 0; border: 1px solid transparent; background: none; cursor: pointer; opacity: 0.55; transition: opacity 200ms; }
.qv-thumb.is-active, .qv-thumb:hover { opacity: 1; border-color: var(--white); }
.qv-thumb img { width: 100%; height: 100%; object-fit: cover; }
.qv-info { display: grid; align-content: start; gap: 12px; padding: clamp(22px, 3vw, 40px); }
.qv-title { font-size: clamp(28px, 3.2vw, 44px); margin: 0; }
.qv-price { margin: 0; font-size: 17px; }
.qv-desc { margin: 0; }
.qv-more { justify-self: start; margin-top: 4px; }
@media (max-width: 760px) { .qv { grid-template-columns: 1fr; } .qv-main { aspect-ratio: 1; } }

/* sticky add-to-bag on phones */
.sticky-buy { display: none; }
@media (max-width: 900px) {
  .sticky-buy { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: flex; align-items: center; gap: 12px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: rgb(var(--bg2-rgb) / 0.94); border-top: 1px solid var(--line-strong); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    transform: translateY(110%); transition: transform 400ms var(--ease-out); }
  .sticky-buy.is-visible { transform: none; }
  .sticky-buy-info { display: grid; min-width: 0; flex: 1; line-height: 1.3; }
  .sticky-buy-info strong { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sticky-buy-info span { font-size: 12px; color: var(--silver); }
  .sticky-buy .btn { flex: none; height: 46px; padding: 0 20px; }
}
/* bag icon bump after the fly animation */
.js-cart-link.is-bumped { animation: bag-bump 600ms var(--ease-out); }
@keyframes bag-bump { 0% { transform: scale(1); } 30% { transform: scale(1.35) rotate(-8deg); } 60% { transform: scale(0.92); } 100% { transform: scale(1); } }

/* 404 */
.lost { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px 48px; align-items: center; min-height: 82vh; padding-top: calc(var(--header-h) + 30px); }
.lost-code { margin: 0; font-size: clamp(110px, 17vw, 300px); line-height: 0.8; color: transparent; -webkit-text-stroke: 1px var(--line-strong); display: flex; overflow: hidden; }
.lost-code span { display: inline-block; animation: lost-float 6s var(--ease) infinite; }
.lost-code span:nth-child(2) { animation-delay: -2s; -webkit-text-stroke-color: var(--silver); }
.lost-code span:nth-child(3) { animation-delay: -4s; }
@keyframes lost-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4%); } }
.lost-title { font-size: clamp(36px, 5vw, 72px); margin: 8px 0 14px; }
.lost-search { position: relative; margin: 22px 0 6px; max-width: 420px; }
.lost-search svg { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); fill: none; stroke: var(--muted); stroke-width: 1.5; }
.lost-search input { width: 100%; height: 52px; padding: 0 16px 0 44px; background: var(--graphite); border: 1px solid var(--line); outline: none; font-size: 15px; }
.lost-search input:focus { border-color: var(--silver); }
@media (max-width: 860px) { .lost { grid-template-columns: 1fr; min-height: 0; } .lost-code { font-size: 38vw; } }
@media (prefers-reduced-motion: reduce) { .lost-code span { animation: none; } }

/* motion: parallax, split titles, cursor */
[data-parallax], .page-banner img, .event-hero-img, .statement-media img, .look-media img { translate: 0 var(--py, 0px); will-change: translate; }
.split-word { display: inline-block; white-space: nowrap; overflow: hidden; vertical-align: top; padding-bottom: 0.04em; }
.split-char { display: inline-block; transform: translateY(105%); transition: transform 900ms var(--ease-out); transition-delay: calc(var(--c) * 22ms); }
.is-split-in .split-char { transform: none; }
html.has-cursor, html.has-cursor a, html.has-cursor button, html.has-cursor label, html.has-cursor summary, html.has-cursor [role=button] { cursor: none; }
html.has-cursor input, html.has-cursor textarea, html.has-cursor select { cursor: auto; }
.cursor { position: fixed; left: 0; top: 0; z-index: 400; pointer-events: none; opacity: 0; transition: opacity 250ms; mix-blend-mode: difference; }
.cursor.is-on { opacity: 1; }
.cursor::before { content: ""; position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: #fff;
  transition: transform 300ms var(--ease-out), width 300ms var(--ease-out), height 300ms var(--ease-out), left 300ms var(--ease-out), top 300ms var(--ease-out), background 300ms; }
.cursor.is-link::before { left: -20px; top: -20px; width: 40px; height: 40px; background: transparent; border: 1px solid #fff; }
.cursor.is-down::before { transform: scale(0.7); }
.cursor.is-text { opacity: 0; }
.cursor.is-view { mix-blend-mode: normal; }
.cursor.is-view::before { left: -42px; top: -42px; width: 84px; height: 84px; background: rgba(255,255,255,0.92); }
.cursor-label { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%) scale(0.6); opacity: 0; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: #0a0a0b; font-weight: 600; white-space: nowrap; transition: opacity 250ms, transform 300ms var(--ease-out); }
.cursor.is-view .cursor-label { opacity: 1; transform: translate(-50%, -50%) scale(1); }
@media (pointer: coarse) { .cursor { display: none; } }

/* lookbook */
.lookbook { display: grid; gap: clamp(48px, 8vw, 120px); margin: 0 0 clamp(56px, 8vw, 110px); }
.look-media { margin: 0; overflow: hidden; background: var(--graphite); }
.look-media img { width: 100%; height: 108%; object-fit: cover; display: block; }
.look-full .look-media { height: min(92vh, 1000px); }
.look-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.look-pair .look-media { aspect-ratio: 4 / 5; }
.look-pair .look-media:nth-child(2) { margin-top: clamp(40px, 10vw, 160px); }
.look-text { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, 1fr); gap: 32px clamp(32px, 6vw, 96px); align-items: start; margin-top: clamp(24px, 4vw, 48px); }
.look-text .lookbook-title { font-size: clamp(34px, 5vw, 80px); margin: 10px 0 16px; }
.look-body { margin: 0; max-width: 560px; color: var(--silver); font-size: 17px; line-height: 1.7; white-space: pre-line; }
.look-text-only .look-text, .look-text .look-text { margin-top: 0; }
.look-shop { display: grid; gap: 8px; }
.look-item { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 8px; border: 1px solid var(--line); background: var(--bg-2); transition: border-color 200ms, background 200ms; }
.look-item:hover { border-color: var(--line-strong); background: var(--graphite); }
.look-item img { width: 56px; height: 70px; object-fit: cover; }
.look-item > span { display: grid; min-width: 0; }
.look-item strong { font-weight: 500; font-size: 14px; }
.look-price { font-size: 14px; padding-right: 44px; }
.look-quick { display: grid; right: 10px; bottom: auto; top: 50%; transform: translateY(-50%); }
@media (max-width: 800px) { .look-text { grid-template-columns: 1fr; } .look-full .look-media { height: 70vh; } }
/* admin lookbook */
.look-admin { border: 1px solid var(--line); margin-top: 8px; }
.look-admin > summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 12px; cursor: pointer; list-style: none; }
.look-admin > summary::-webkit-details-marker { display: none; }
.look-admin-thumbs { display: flex; gap: 2px; }
.look-admin-thumbs img { width: 48px; height: 60px; object-fit: cover; }
.look-admin-text { width: 48px; height: 60px; display: grid; place-items: center; background: var(--graphite); font-family: var(--font-display); }
.look-admin-actions { display: flex; gap: 10px; }
.look-form { padding: 14px 12px 18px; border-top: 1px solid var(--line); }
.look-pick { display: flex; flex-wrap: wrap; gap: 6px; max-height: 220px; overflow-y: auto; }
.look-admin-new > summary { grid-template-columns: 1fr; }

/* ================================================================ performance */
/* Off-screen sections and the footer are only rendered when they come close to the viewport. */
.section, .site-footer, .reviews, .lookbook .look { content-visibility: auto; contain-intrinsic-size: auto 900px; }
/* Lite mode (weak device / data saver): same look, no expensive effects. */
.lite *, .lite *::before, .lite *::after { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.lite .site-header.is-solid, .lite .filters, .lite .search-panel, .lite .sticky-buy, .lite .admin-topbar { background: var(--bg) !important; }
.lite .card-cta, .lite .card-soon, .lite .quick-btn, .lite .qv-close, .lite .timer-unit, .lite .drop-hero { background: rgb(var(--bg-rgb) / 0.92) !important; }
.lite main, .lite .hero-media img, .lite .hero-media video, .lite .page-banner img, .lite .auth-art img { animation: none !important; transform: none !important; }
.lite [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
.lite .hero-title span { animation-duration: 400ms; }
.lite .marquee-track { animation-duration: 90s; }
.lite .card-media img { transition: none; }
.lite .live-dot { animation: none; }

/* ================================================================ Admin → Design (variables come from the <style> in base.html) */
.logo-img { height: calc(var(--logo-size, 22px) * 1.5); width: auto; max-width: 180px; object-fit: contain; }
.logo:has(.logo-img) { letter-spacing: 0; padding-left: 0; }
.card-media, .collection-card, .statement-media, .look-media, .gallery-item, .auth-art, .qv-modal, .drop-box, .drop-hero, .timer-unit, .bag-line img { border-radius: var(--card-radius, 0); }
.card-media, .collection-card, .statement-media, .look-media, .gallery-item { overflow: hidden; }
.panel, .chip, .seg label, .ship-option, .locker-item, .toast, .alert, .lang-menu { border-radius: var(--radius); }
html[data-motion="off"] main, html[data-motion="off"] .hero-media img, html[data-motion="off"] .page-banner img, html[data-motion="off"] .auth-art img { animation: none !important; transform: none !important; }
html[data-motion="off"] [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
html[data-motion="off"] .hero-title span { animation-duration: 1ms; animation-delay: 0ms !important; }
.theme-pick { display: flex; flex-wrap: wrap; gap: 12px; }
.theme-pick-opt { display: grid; gap: 8px; cursor: pointer; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--silver); }
.theme-pick-opt input { position: absolute; opacity: 0; pointer-events: none; }
.theme-pick-art { width: 150px; aspect-ratio: 16 / 10; padding: 14px; display: grid; align-content: end; gap: 6px; background: var(--a); border: 1px solid var(--line-strong); border-radius: var(--card-radius, 2px); transition: outline-color 200ms; outline: 2px solid transparent; outline-offset: 3px; }
.theme-pick-art i { display: block; height: 6px; border-radius: 3px; background: var(--b); width: 70%; }
.theme-pick-art i:nth-child(2) { width: 45%; background: var(--d); }
.theme-pick-art i:nth-child(3) { width: 36%; height: 14px; background: var(--c); border-radius: var(--btn-radius, 2px); }
.theme-pick-opt input:checked + .theme-pick-art { outline-color: var(--white); }
.theme-pick-opt input:focus-visible + .theme-pick-art { outline-color: var(--silver); }
.theme-pick-opt:has(input:checked) { color: var(--white); }

/* ================================================================ Admin → Design / Site photos */
.design-tabs { position: sticky; top: 0; z-index: 5; display: flex; gap: 6px; overflow-x: auto; padding: 10px 0; margin-bottom: 14px; background: var(--bg); scrollbar-width: none; }
.design-tabs a { flex: none; padding: 8px 14px; border: 1px solid var(--line); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--silver); border-radius: 2px; }
.design-tabs a:hover { color: var(--white); border-color: var(--line-strong); }
.design-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
.design-forms > .panel { scroll-margin-top: 70px; }
.design-save { padding-top: 4px; }
.design-preview-wrap { position: sticky; top: 64px; display: grid; gap: 10px; }
.design-preview-bar { display: flex; justify-content: space-between; align-items: center; }
.seg-sm label span { padding: 6px 10px; font-size: 10px; }
.design-preview { --pv-bg: #0a0a0b; --pv-surface: #17181b; --pv-text: #ececee; --pv-muted: #868a93; --pv-accent: #fff; --pv-accent-ink: #000;
  background: var(--pv-bg); color: var(--pv-text); font-family: var(--pv-body); padding: 18px; border: 1px solid var(--line-strong); display: grid; gap: 12px; overflow: hidden; }
.pv-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pv-muted); }
.pv-logo { font-family: var(--pv-display); font-weight: 900; font-size: var(--pv-logo, 22px); letter-spacing: 0.2em; color: var(--pv-text); }
.pv-logo img { height: calc(var(--pv-logo, 22px) * 1.4); width: auto; }
.pv-eyebrow { margin: 10px 0 0; font-size: 9px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--pv-muted); }
.pv-title { margin: 0; font-family: var(--pv-display); font-weight: var(--pv-weight, 800); text-transform: var(--pv-case, uppercase); font-size: 56px; line-height: 0.9; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.design-preview.is-gradient .pv-title { background: linear-gradient(180deg, var(--pv-text), var(--pv-muted)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.pv-text { margin: 0; font-size: 12px; color: var(--pv-muted); }
.pv-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.pv-btn { display: inline-grid; place-items: center; height: var(--pv-btn-h, 42px); padding: 0 18px; background: var(--pv-accent); color: var(--pv-accent-ink); border: 1px solid var(--pv-accent);
  border-radius: var(--pv-btn-r, 2px); font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: var(--pv-btn-case, uppercase); }
.design-preview.is-outline .pv-btn:not(.pv-btn-ghost) { background: transparent; color: var(--pv-accent); }
.pv-btn-ghost { background: transparent; color: var(--pv-text); border-color: color-mix(in srgb, var(--pv-text) 25%, transparent); }
.pv-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-size: 11px; }
.pv-card { display: grid; gap: 3px; }
.pv-card-img { aspect-ratio: 4 / 5; border-radius: var(--pv-card-r, 2px); background: linear-gradient(160deg, color-mix(in srgb, var(--pv-surface) 60%, var(--pv-text) 12%), var(--pv-surface)); margin-bottom: 4px; }
.pv-muted { color: var(--pv-muted); }
.pv-input { height: 38px; display: flex; align-items: center; padding: 0 12px; font-size: 11px; color: var(--pv-muted); background: var(--pv-surface); border-radius: min(var(--pv-card-r, 2px), 12px); border: 1px solid color-mix(in srgb, var(--pv-text) 10%, transparent); }
.design-logo { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 18px; align-items: start; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.design-logo-preview { height: 90px; display: grid; place-items: center; background: var(--graphite); }
.design-logo-preview img { max-height: 60px; max-width: 150px; }
.design-presets { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 18px; }
.design-preset { display: grid; gap: 6px; padding: 8px; background: none; border: 1px solid var(--line); color: var(--silver); cursor: pointer; border-radius: 2px; }
.design-preset:hover, .design-preset.is-active { border-color: var(--white); color: var(--white); }
.design-preset-art { display: flex; width: 110px; height: 28px; overflow: hidden; }
.design-preset-art i { flex: 1; }
.design-colors { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.design-colors h3 { grid-column: 1 / -1; margin: 6px 0 0; }
.design-color { display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 8px; border: 1px solid var(--line); cursor: pointer; }
.design-color input { grid-row: 1 / 3; width: 40px; height: 40px; padding: 0; border: 1px solid var(--line-strong); background: none; cursor: pointer; }
.design-color span { font-size: 12px; }
.design-shapes { display: flex; flex-wrap: wrap; gap: 10px; }
.design-shape { display: grid; justify-items: center; gap: 8px; padding: 12px 14px; border: 1px solid var(--line); cursor: pointer; color: var(--silver); }
.design-shape input { position: absolute; opacity: 0; pointer-events: none; }
.design-shape-art { width: 84px; height: 30px; background: var(--white); }
.design-shape:has(input:checked) { border-color: var(--white); color: var(--white); }
.design-flags { display: grid; gap: 4px; }
.design-flag { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 14px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.design-flag > span:last-child { display: grid; gap: 2px; }
.design-flag input[type=checkbox] { position: absolute; opacity: 0; pointer-events: none; }
.design-switch { position: relative; width: 42px; height: 24px; border-radius: 12px; background: var(--graphite-3); transition: background 200ms; }
.design-switch::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--silver); transition: transform 250ms var(--ease-out), background 200ms; }
.design-flag input:checked + .design-switch { background: var(--ok); }
.design-flag input:checked + .design-switch::after { transform: translateX(18px); background: #0a0a0b; }
.design-flag input:focus-visible + .design-switch { outline: 1px solid var(--silver); outline-offset: 3px; }
.design-lang { border: 1px solid var(--line); padding: 0 16px; }
.design-lang > summary { padding: 14px 0; cursor: pointer; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; }
.design-lang[open] > summary { border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.design-lang > .form { padding-bottom: 16px; }
.admin-group-title { font-family: var(--font-display); font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin: 30px 0 12px; scroll-margin-top: 70px; }
.media-card h3 { margin: 4px 0 0; font-size: 15px; }
.focus-pick { position: relative; cursor: crosshair; }
.focus-dot { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 2px rgba(0,0,0,0.5); opacity: 0; transition: opacity 200ms, left 250ms var(--ease-out), top 250ms var(--ease-out); pointer-events: none; }
.focus-pick.has-focus .focus-dot, .focus-pick:hover .focus-dot { opacity: 1; }
.focus-hint { margin: 8px 0 0; }
.drop-zone { position: relative; display: grid; place-items: center; min-height: 64px; padding: 10px; border: 1px dashed var(--line-strong); color: var(--silver); text-align: center; cursor: pointer; transition: border-color 200ms, background 200ms; }
.drop-zone .file-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop-zone:hover, .drop-zone.is-over { border-color: var(--white); background: var(--graphite); }
.drop-zone:has(input:valid) span::before { content: "✓ "; color: var(--ok); }
@media (max-width: 1100px) {
  .design-layout { grid-template-columns: 1fr; }
  .design-preview-wrap { position: static; order: -1; }
}
@media (max-width: 640px) { .design-logo { grid-template-columns: 1fr; } }

/* ================================================================ Design → layout (data-* on <html>) */
html[data-header="left"] .header-inner { grid-template-columns: auto 1fr auto; }
html[data-header="left"] .logo { order: -1; justify-self: start; padding-left: 0; }
html[data-header="left"] .nav-main { padding-left: clamp(12px, 2vw, 32px); }
html[data-header="burger"] .nav-main { display: none; }
html[data-header="burger"] .menu-toggle { display: inline-grid; justify-self: start; }
@media (max-width: 900px) {
  html[data-header="left"] .menu-toggle { order: -2; }
}
html[data-hero="center"] .hero { align-items: center; text-align: center; }
html[data-hero="center"] .hero-content { display: grid; justify-items: center; }
html[data-hero="center"] .hero-title { margin: 0; }
html[data-hero="center"] .hero-bottom { flex-direction: column; align-items: center; }
html[data-hero="center"] .hero-bottom p { max-width: 520px; }
html[data-hero="center"] .hero::after { background: radial-gradient(ellipse at center, rgb(var(--bg-rgb) / 0.15) 0%, rgb(var(--bg-rgb) / 0.55) 70%, var(--bg) 100%); }
@media (min-width: 901px) {
  html[data-hero="split"] .hero-media { inset: 0 0 0 46%; opacity: 1; }
  html[data-hero="split"] .hero::after { background: linear-gradient(90deg, var(--bg) 46%, rgb(var(--bg-rgb) / 0) 62%); }
  html[data-hero="split"] .hero { align-items: center; }
  html[data-hero="split"] .hero-content > * { max-width: 46%; }
  html[data-hero="split"] .hero-title { font-size: clamp(80px, 13vw, 230px); }
  html[data-hero="split"] .hero-bottom { flex-direction: column; align-items: start; }
  html[data-hero="split"] .hero-scroll { display: none; }
  html[data-hero="split"] .hero-drop { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- Design: site templates */
.tpl-panel-head { display: flex; justify-content: space-between; align-items: start; gap: 16px; flex-wrap: wrap; }
.tpl-panel-head p { margin: 0 0 16px; max-width: 640px; }
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.tpl-card { display: grid; gap: 10px; align-content: start; padding: 10px; border: 1px solid var(--line); background: var(--bg); transition: border-color 200ms, transform 300ms var(--ease-out); }
.tpl-card:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.tpl-card.is-active { border-color: var(--ok); }
.tpl-card .btn { width: 100%; }
.tpl-meta { display: grid; gap: 2px; min-height: 58px; }
.tpl-on { display: grid; place-items: center; height: 40px; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ok); border: 1px solid rgba(143,220,176,0.35); }
.tpl-art { aspect-ratio: 4 / 3; display: grid; grid-template-rows: auto 1fr auto; gap: 7px; padding: 9px; background: var(--a); color: var(--b); overflow: hidden; }
.tpl-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px; }
.tpl-menu { height: 3px; width: 26px; background: var(--m); border-radius: 2px; }
.tpl-icons { justify-self: end; width: 18px; height: 3px; background: var(--m); border-radius: 2px; }
.tpl-logo { font-family: var(--f), sans-serif; font-weight: 900; font-size: 10px; letter-spacing: 0.2em; }
.tpl-h-left .tpl-top { grid-template-columns: auto 1fr auto; } .tpl-h-left .tpl-logo { order: -1; }
.tpl-h-burger .tpl-menu { width: 10px; box-shadow: 0 3px 0 var(--m), 0 -3px 0 var(--m); height: 2px; }
.tpl-hero { position: relative; display: grid; align-items: end; overflow: hidden; border-radius: min(var(--k), 6px); }
.tpl-photo { position: absolute; inset: 0; background: linear-gradient(160deg, color-mix(in srgb, var(--d) 70%, var(--b) 18%), var(--d) 70%); opacity: 0.9; }
.tpl-copy { position: relative; display: grid; gap: 5px; padding: 6px; justify-items: start; }
.tpl-title { font-family: var(--f), sans-serif; font-weight: var(--w); text-transform: var(--tc); font-size: 30px; line-height: 0.85; letter-spacing: -0.02em; }
.tpl-btn { width: 44px; height: 11px; background: var(--c); border: 1px solid var(--c); border-radius: var(--r); }
.tpl-btn.is-outline { background: transparent; }
.tpl-hero-center .tpl-hero { align-items: center; } .tpl-hero-center .tpl-copy { justify-items: center; }
.tpl-hero-split .tpl-photo { left: 48%; opacity: 1; }
.tpl-hero-split .tpl-title { font-size: 22px; }
.tpl-cards { display: grid; gap: 4px; }
.tpl-cards i { aspect-ratio: var(--ratio); max-height: 34px; background: var(--d); border-radius: min(var(--k), 6px); }
.tpl-cols-2 { grid-template-columns: repeat(2, 1fr); } .tpl-cols-3 { grid-template-columns: repeat(3, 1fr); } .tpl-cols-4 { grid-template-columns: repeat(4, 1fr); }

/* ---------------------------------------------------------------- Design: layout choices */
.lay-picks { display: flex; flex-wrap: wrap; gap: 10px; }
.lay-pick { display: grid; gap: 8px; justify-items: center; width: 150px; padding: 10px; border: 1px solid var(--line); cursor: pointer; color: var(--silver); text-align: center; transition: border-color 200ms; }
.lay-pick input { position: absolute; opacity: 0; pointer-events: none; }
.lay-pick:has(input:checked) { border-color: var(--white); color: var(--white); }
.lay-pick:has(input:focus-visible) { outline: 1px solid var(--silver); outline-offset: 3px; }
.lay-art { position: relative; width: 120px; height: 72px; background: var(--graphite); display: block; }
.lay-art i { position: absolute; background: var(--muted); border-radius: 2px; }
/* header */
.lay-header_layout-center i:nth-child(1) { left: 8px; top: 9px; width: 30px; height: 4px; }
.lay-header_layout-center i:nth-child(2) { left: 48px; top: 7px; width: 24px; height: 8px; background: var(--white); }
.lay-header_layout-center i:nth-child(3) { right: 8px; top: 9px; width: 18px; height: 4px; }
.lay-header_layout-left i:nth-child(1) { left: 38px; top: 9px; width: 30px; height: 4px; }
.lay-header_layout-left i:nth-child(2) { left: 8px; top: 7px; width: 24px; height: 8px; background: var(--white); }
.lay-header_layout-left i:nth-child(3) { right: 8px; top: 9px; width: 18px; height: 4px; }
.lay-header_layout-burger i:nth-child(1) { left: 8px; top: 8px; width: 12px; height: 2px; box-shadow: 0 4px 0 var(--muted); }
.lay-header_layout-burger i:nth-child(2) { left: 48px; top: 7px; width: 24px; height: 8px; background: var(--white); }
.lay-header_layout-burger i:nth-child(3) { right: 8px; top: 9px; width: 18px; height: 4px; }
[class*="lay-header_layout"] i:nth-child(4) { left: 0; right: 0; top: 22px; bottom: 0; background: var(--graphite-3); border-radius: 0; }
/* hero */
[class*="lay-hero_layout"] i:nth-child(1) { inset: 0; background: var(--graphite-3); border-radius: 0; }
.lay-hero_layout-bottom i:nth-child(2) { left: 8px; bottom: 16px; width: 62px; height: 16px; background: var(--white); }
.lay-hero_layout-bottom i:nth-child(3) { left: 8px; bottom: 7px; width: 40px; height: 4px; }
.lay-hero_layout-bottom i:nth-child(4) { right: 8px; bottom: 7px; width: 24px; height: 7px; background: var(--silver); }
.lay-hero_layout-center i:nth-child(2) { left: 29px; top: 22px; width: 62px; height: 16px; background: var(--white); }
.lay-hero_layout-center i:nth-child(3) { left: 40px; top: 43px; width: 40px; height: 4px; }
.lay-hero_layout-center i:nth-child(4) { left: 48px; top: 52px; width: 24px; height: 7px; background: var(--silver); }
.lay-hero_layout-split i:nth-child(1) { left: 56%; }
.lay-hero_layout-split i:nth-child(2) { left: 8px; top: 22px; width: 50px; height: 14px; background: var(--white); }
.lay-hero_layout-split i:nth-child(3) { left: 8px; top: 41px; width: 40px; height: 4px; }
.lay-hero_layout-split i:nth-child(4) { left: 8px; top: 50px; width: 24px; height: 7px; background: var(--silver); }
/* product photo shape */
[class*="lay-card_ratio"] i { top: 50%; transform: translateY(-50%); background: var(--graphite-3); }
[class*="lay-card_ratio"] i:nth-child(1) { left: 8px; } [class*="lay-card_ratio"] i:nth-child(2) { left: 35px; }
[class*="lay-card_ratio"] i:nth-child(3) { left: 62px; } [class*="lay-card_ratio"] i:nth-child(4) { left: 89px; }
.lay-card_ratio-portrait i { width: 23px; height: 29px; }
.lay-card_ratio-tall i { width: 23px; height: 31px; }
.lay-card_ratio-square i { width: 23px; height: 23px; }
/* products per row */
[class*="lay-grid_cols"] i { top: 14px; height: 44px; background: var(--graphite-3); }
.lay-grid_cols-2 i:nth-child(1) { left: 8px; width: 49px; } .lay-grid_cols-2 i:nth-child(2) { left: 63px; width: 49px; } .lay-grid_cols-2 i:nth-child(n+3) { display: none; }
.lay-grid_cols-3 i:nth-child(1) { left: 8px; width: 32px; } .lay-grid_cols-3 i:nth-child(2) { left: 44px; width: 32px; } .lay-grid_cols-3 i:nth-child(3) { left: 80px; width: 32px; } .lay-grid_cols-3 i:nth-child(4) { display: none; }
.lay-grid_cols-4 i { width: 23px; } .lay-grid_cols-4 i:nth-child(1) { left: 8px; } .lay-grid_cols-4 i:nth-child(2) { left: 35px; } .lay-grid_cols-4 i:nth-child(3) { left: 62px; } .lay-grid_cols-4 i:nth-child(4) { left: 89px; }

/* ---------------------------------------------------------------- Site photos: banner studio */
.studio-wrap { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 16px; margin-bottom: 18px; scroll-margin-top: 70px; }
.studio { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #0a0a0b; border: 1px solid var(--line-strong); color: #fff; container-type: inline-size; }
.studio-media { position: absolute; inset: 0; display: grid; gap: 2px; opacity: var(--dim, 0.5); transition: opacity 200ms, filter 300ms; }
.studio-media.is-bw { filter: grayscale(1) contrast(1.05); }
.studio-n-1 { grid-template-columns: 1fr; } .studio-n-2 { grid-template-columns: repeat(2, 1fr); } .studio-n-3 { grid-template-columns: repeat(3, 1fr); }
.studio-media img, .studio-media video { width: 100%; height: 100%; object-fit: cover; transition: object-position 300ms var(--ease-out); }
.studio-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,11,0.15) 0%, rgba(10,10,11,0.3) 45%, #0a0a0b 100%); }
.studio-copy { position: absolute; left: 5%; right: 5%; bottom: 6%; display: grid; gap: 1.2cqw; }
.studio-eyebrow { font-size: max(8px, 1.2cqw); letter-spacing: 0.28em; text-transform: uppercase; color: #9a9ea6; }
.studio-title { font-family: var(--font-display); font-stretch: 125%; font-weight: 800; font-size: 19cqw; line-height: 0.82; letter-spacing: -0.03em; text-transform: uppercase;
  background: linear-gradient(180deg, #fff 0%, #c9ccd2 55%, #6d7077 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; overflow-wrap: anywhere; }
.studio-row { display: flex; justify-content: space-between; align-items: end; gap: 4cqw; }
.studio-text { max-width: 46cqw; font-size: max(9px, 1.6cqw); line-height: 1.45; color: #c4c7cd; }
.studio-btn { flex: none; padding: 1.4cqw 2.6cqw; background: #fff; color: #0a0a0b; font-size: max(7px, 1.1cqw); font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; }
.studio-tag { position: absolute; top: 12px; left: 12px; padding: 5px 10px; background: rgba(10,10,11,0.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: #d9dce1; }
.studio-tag:hover { color: #fff; }
.studio-controls { display: grid; gap: 12px; align-content: start; padding: 18px; border: 1px solid var(--line); background: var(--bg-2); }
.studio-block { display: grid; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.studio-block:last-child { border-bottom: 0; padding-bottom: 0; }
.studio-options .design-flag { border-bottom: 0; padding: 4px 0; }
.studio-count { display: flex; gap: 8px; }
.studio-count label { display: grid; gap: 6px; justify-items: center; cursor: pointer; color: var(--silver); }
.studio-count input { position: absolute; opacity: 0; pointer-events: none; }
.studio-count-art { display: flex; gap: 2px; width: 64px; height: 40px; padding: 3px; border: 1px solid var(--line); transition: border-color 200ms; }
.studio-count-art i { flex: 1; background: var(--graphite-3); }
.studio-count label:has(input:checked) { color: var(--white); }
.studio-count label:has(input:checked) .studio-count-art { border-color: var(--white); }
.studio-count label:has(input:checked) .studio-count-art i { background: var(--silver); }
.lang-panel > .label { margin: 0; }
@media (max-width: 1000px) { .studio-wrap { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- Site photos: photo cards */
.ph-group-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 34px 0 12px; scroll-margin-top: 70px; }
.ph-group-head .admin-group-title { margin: 0; }
.ph-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.ph-card { position: relative; display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--line); background: var(--bg-2); transition: border-color 200ms, transform 300ms var(--ease-out); scroll-margin-top: 70px; }
.ph-card:hover { border-color: var(--line-strong); }
.ph-card.is-over { border-color: var(--white); transform: scale(1.01); }
.ph-card > form { position: relative; }
.ph-img { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--graphite); }
.ph-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-out), object-position 300ms var(--ease-out); }
.ph-card:hover .ph-img img { transform: scale(1.03); }
.ph-img::after { content: ""; position: absolute; inset: auto 0 0 0; height: 40%; background: linear-gradient(180deg, transparent, rgba(0,0,0,0.55)); pointer-events: none; }
.ph-badge { position: absolute; top: 10px; left: 10px; z-index: 2; padding: 4px 9px; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; background: rgba(10,10,11,0.72); color: #b9bdc5; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.ph-badge.is-own { color: #0a0a0b; background: var(--ok); }
.ph-saved { position: absolute; top: 10px; right: 10px; z-index: 2; padding: 4px 9px; font-size: 11px; background: var(--ok); color: #0a0a0b; }
.ph-drop { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; background: rgba(10,10,11,0.75); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0; transition: opacity 200ms; pointer-events: none; }
.ph-card.is-over .ph-drop { opacity: 1; }
.ph-center { position: absolute; left: 10px; bottom: 10px; z-index: 2; padding: 4px 9px; background: rgba(10,10,11,0.72); color: #d9dce1; }
.ph-body { display: grid; gap: 12px; align-content: space-between; padding: 14px 16px 16px; }
.ph-body h3 { margin: 0 0 4px; font-size: 15px; }
.ph-body p { margin: 0; }
.ph-upload { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ph-upload .warn-text { flex-basis: 100%; margin: 0; }
.ph-pick { cursor: pointer; }
.ph-pick:focus-within { outline: 1px solid var(--silver); outline-offset: 3px; }
.ph-links { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--line); }

/* ================================================================ store kiosk */
.kiosk-body { overflow: hidden; overscroll-behavior: none; }
.kiosk-body main { animation: none; }
.kiosk { --k-pad: clamp(18px, 3vw, 44px); position: relative; height: 100dvh; display: grid; grid-template-rows: auto 1fr; overflow: hidden;
  user-select: none; -webkit-user-select: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  background: radial-gradient(120% 90% at 100% 0%, rgb(var(--ink-rgb) / 0.05), transparent 60%), var(--bg); }
.kiosk[data-demo] { grid-template-rows: auto auto 1fr; }
.k-ico { width: 24px; height: 24px; flex: none; }
.k-top { position: relative; z-index: 3; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px var(--k-pad); }
.k-top .logo { font-size: calc(var(--logo-size, 22px) * 1.1); }
.k-top-right { display: flex; align-items: center; gap: 10px; }
.k-langs { display: flex; padding: 4px; border-radius: 999px; background: rgb(var(--ink-rgb) / 0.06); border: 1px solid var(--line); }
.k-langs a { height: 44px; padding: 0 20px; display: grid; place-items: center; border-radius: 999px; font-size: 14px; letter-spacing: 0.06em; color: var(--silver); transition: background 250ms, color 250ms; }
.k-langs a.is-active { background: var(--accent, var(--white)); color: var(--accent-ink, var(--bg)); }
.k-icon-btn { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-strong); background: rgb(var(--ink-rgb) / 0.04); color: var(--text); cursor: pointer; }
.k-icon-btn:active { transform: scale(0.94); }
.k-icon-btn.is-on { background: var(--warn); color: #0a0a0b; }
.k-eyebrow { margin: 0; font-size: 13px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--muted); }
.k-screen { display: none; position: relative; min-height: 0; padding: clamp(14px, 2.4vw, 36px) var(--k-pad) var(--k-pad); }
.k-screen.is-on { display: grid; animation: k-in 500ms var(--ease-out); }
@keyframes k-in { from { opacity: 0; transform: translateY(16px); } }
.k-title { font-size: clamp(34px, 4.7vw, 92px); margin: 10px 0 14px; line-height: 0.95; hyphens: manual; }
.k-welcome-copy { min-width: 0; }
.k-h2 { font-size: clamp(28px, 3.2vw, 44px); margin: 0; }
.k-lead { font-size: clamp(17px, 1.7vw, 22px); line-height: 1.5; color: var(--silver); max-width: 620px; margin: 0; }
.k-muted { color: var(--muted); }

/* big tappable buttons */
.k-big { display: flex; align-items: center; gap: 18px; min-height: 96px; padding: 18px 26px; text-align: left; cursor: pointer;
  border: 1px solid var(--line-strong); background: rgb(var(--ink-rgb) / 0.05); color: var(--text); border-radius: max(var(--btn-radius, 2px), 14px);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: transform 200ms var(--ease-out), background 200ms; }
.k-big .k-ico { width: 34px; height: 34px; }
.k-big span { display: grid; gap: 3px; }
.k-big b { font-size: 19px; letter-spacing: 0.02em; }
.k-big small { font-size: 14px; color: var(--muted); }
.k-big-main { background: var(--accent, var(--white)); color: var(--accent-ink, var(--bg)); border-color: transparent; box-shadow: 0 20px 50px rgb(0 0 0 / 0.3); }
.k-big-main small { color: inherit; opacity: 0.7; }
.k-big:active, .k-pill:active, .k-pay:active { transform: scale(0.97); }
.k-pill { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 22px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line-strong); background: rgb(var(--ink-rgb) / 0.05); color: var(--text); font-size: 15px; font-weight: 500; transition: transform 200ms var(--ease-out); }
.k-pill .k-ico { width: 20px; height: 20px; }
.k-pill-main { background: var(--accent, var(--white)); color: var(--accent-ink, var(--bg)); border-color: transparent; min-height: 60px; padding: 0 34px; font-size: 16px; font-weight: 600; }

/* 1 · welcome */
.k-welcome { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-rows: 1fr auto; align-items: center; gap: 24px clamp(20px, 4vw, 60px); overflow: hidden; }
.k-welcome-copy, .k-tag-art, .k-howto { position: relative; z-index: 1; }
.k-cta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 30px; max-width: 760px; }
.k-tag-art { display: grid; place-items: center; }
.k-tag { position: relative; width: min(300px, 80%); aspect-ratio: 5 / 7; padding: 26px 24px; display: grid; grid-template-rows: auto 1fr; gap: 18px; overflow: hidden;
  background: #fbfaf7; color: #0a0a0b; border-radius: 16px; box-shadow: 0 40px 90px rgb(0 0 0 / 0.45); transform: rotate(-6deg); animation: k-float 6s ease-in-out infinite; }
.k-tag::before { content: ""; position: absolute; top: 16px; left: 50%; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 3px #d9d6cf; }
.k-tag b { margin-top: 26px; text-align: center; font-family: var(--font-display); letter-spacing: 0.3em; font-size: 22px; }
.k-tag-bars { align-self: end; height: 46%; background: repeating-linear-gradient(90deg, #0a0a0b 0 3px, transparent 3px 5px, #0a0a0b 5px 6px, transparent 6px 10px, #0a0a0b 10px 14px, transparent 14px 16px, #0a0a0b 16px 17px, transparent 17px 21px); }
.k-laser { position: absolute; left: 6%; right: 6%; top: 60%; height: 3px; border-radius: 2px; background: #ff3b30; box-shadow: 0 0 18px 3px rgb(255 59 48 / 0.7); animation: k-laser 2.2s ease-in-out infinite; }
@keyframes k-laser { 0%, 100% { transform: translateY(-34px); opacity: 0.9; } 50% { transform: translateY(34px); opacity: 1; } }
@keyframes k-float { 0%, 100% { transform: rotate(-6deg) translateY(0); } 50% { transform: rotate(-4deg) translateY(-12px); } }
.k-howto { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.k-howto li { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 14px; background: rgb(var(--ink-rgb) / 0.04); border: 1px solid var(--line); font-size: 16px; color: var(--silver); }
.k-howto b { display: inline-grid; place-items: center; width: 26px; height: 26px; margin-right: 6px; border-radius: 50%; background: var(--accent, var(--white)); color: var(--accent-ink, var(--bg)); font-size: 13px; }

/* 2 · bag */
.k-bag { grid-template-columns: minmax(0, 1fr) minmax(330px, 410px); gap: clamp(16px, 2.6vw, 36px); align-items: stretch; }
.k-lines-wrap { display: grid; grid-template-rows: auto 1fr; gap: 16px; min-height: 0; }
.k-bag-head { display: flex; justify-content: space-between; align-items: end; gap: 14px; flex-wrap: wrap; }
.k-hint { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; color: var(--muted); font-size: 15px; }
.k-hint .k-ico { width: 20px; height: 20px; }
.k-bag-tools { display: flex; gap: 10px; flex-wrap: wrap; }
.k-lines { list-style: none; margin: 0; padding: 0 4px 24px 0; overflow-y: auto; display: grid; align-content: start; gap: 12px; overscroll-behavior: contain;
  -webkit-mask-image: linear-gradient(180deg, #000 92%, transparent); mask-image: linear-gradient(180deg, #000 92%, transparent); }
.k-line { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto auto; gap: 18px; align-items: center; padding: 12px 18px 12px 12px;
  border: 1px solid var(--line); background: var(--bg-2); border-radius: max(var(--card-radius, 0px), 14px); }
.k-line.is-new { animation: k-new 1.4s var(--ease-out); }
@keyframes k-new { 0% { transform: translateY(-14px) scale(0.98); opacity: 0; border-color: var(--accent, var(--white)); box-shadow: 0 0 0 3px rgb(var(--ink-rgb) / 0.2); } 30% { opacity: 1; transform: none; } }
.k-line-img { aspect-ratio: var(--card-ratio, 4 / 5); background: var(--graphite); overflow: hidden; border-radius: 10px; }
.k-line-img img { width: 100%; height: 100%; object-fit: cover; }
.k-line-info { display: grid; gap: 3px; min-width: 0; font-size: 15px; color: var(--muted); }
.k-line-info b { font-size: 19px; color: var(--text); overflow-wrap: break-word; }
.k-line-info strong { color: var(--text); }
.k-line-price { color: var(--silver); }
.k-qty { display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: 999px; background: rgb(var(--ink-rgb) / 0.06); }
.k-qty button { width: 52px; height: 52px; border: 0; border-radius: 50%; background: var(--bg); font-size: 22px; cursor: pointer; color: var(--text); box-shadow: 0 2px 8px rgb(0 0 0 / 0.2); }
.k-qty button:active { transform: scale(0.92); }
.k-qty button:disabled { opacity: 0.3; }
.k-qty output { min-width: 36px; text-align: center; font-size: 20px; font-weight: 600; }
.k-line-total { font-size: 20px; min-width: 104px; text-align: right; }
.k-summary { display: grid; align-content: start; gap: 14px; padding: 26px; border: 1px solid var(--line); background: var(--bg-2); border-radius: max(var(--card-radius, 0px), 18px); overflow-y: auto; }
.k-row { display: flex; justify-content: space-between; gap: 12px; font-size: 17px; color: var(--silver); }
.k-ok { color: var(--ok); }
.k-total { display: grid; gap: 4px; padding: 16px 0 6px; border-top: 1px solid var(--line); }
.k-total span { font-size: 14px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.k-total b { font-family: var(--font-display); font-weight: 800; font-size: clamp(40px, 4.4vw, 58px); line-height: 1; letter-spacing: -0.02em; }
.k-code { position: relative; display: flex; gap: 8px; width: 100%; }
.k-code .input { height: 56px; flex: 1; min-width: 0; padding-left: 46px; font-size: 16px; border-radius: 999px; }
.k-code-ico { position: absolute; left: 16px; top: 16px; color: var(--muted); pointer-events: none; }
.k-code-ico .k-ico { width: 22px; height: 22px; }
.k-code-wide { max-width: 640px; }
.k-code-msg { margin: -4px 0 0; min-height: 1em; }
.k-pay { position: relative; display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; height: 84px; border: 0; cursor: pointer;
  border-radius: max(var(--btn-radius, 2px), 18px); background: var(--accent, var(--white)); color: var(--accent-ink, var(--bg));
  font-size: 20px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; box-shadow: 0 24px 50px rgb(0 0 0 / 0.35); transition: transform 200ms var(--ease-out), opacity 200ms; }
.k-pay .k-ico { width: 28px; height: 28px; }
.k-pay:disabled { opacity: 0.35; box-shadow: none; }
.k-pay .spinner { display: none; } .k-pay.is-loading .spinner { display: inline-block; } .k-pay.is-loading .k-ico { display: none; }
.k-pay-note { margin: 0; text-align: center; color: var(--muted); font-size: 14px; }
.k-restart { justify-self: center; padding: 12px; font-size: 15px; }

/* 3 · pay */
.k-pay-screen { grid-template-columns: auto minmax(0, 560px); justify-content: center; align-content: center; align-items: center; gap: clamp(28px, 6vw, 96px); }
@media (max-width: 1150px) { .k-pay-screen { grid-template-columns: auto minmax(0, 1fr); } .k-qr-wrap { margin-left: 16px; } }
.k-qr-wrap { position: relative; justify-self: center; }
.k-qr { position: relative; z-index: 1; padding: 22px; background: #fff; border-radius: 24px; box-shadow: 0 40px 100px rgb(0 0 0 / 0.45); }
.k-qr svg { display: block; width: min(44vh, 400px); height: auto; }
.k-qr-ring { position: absolute; inset: -14px; border-radius: 34px; border: 2px solid var(--accent, var(--white)); opacity: 0.6; animation: k-ring 2.4s ease-out infinite; }
@keyframes k-ring { 0% { transform: scale(0.96); opacity: 0.7; } 100% { transform: scale(1.08); opacity: 0; } }
.k-amount { font-size: clamp(52px, 6.4vw, 96px); margin: 4px 0 22px; }
.k-steps { margin: 0 0 24px; padding: 0; list-style: none; display: grid; gap: 14px; font-size: 18px; color: var(--silver); }
.k-steps li { display: flex; align-items: center; gap: 14px; }
.k-steps span { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-strong); color: var(--text); font-weight: 600; }
.k-wait { display: flex; align-items: center; gap: 6px; margin: 0 0 22px; color: var(--muted); font-size: 16px; }
.k-wait i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent, var(--white)); animation: k-dot 1.2s infinite; }
.k-wait i:nth-child(2) { animation-delay: 150ms; } .k-wait i:nth-child(3) { animation-delay: 300ms; margin-right: 6px; }
@keyframes k-dot { 0%, 80%, 100% { opacity: 0.2; transform: scale(0.8); } 40% { opacity: 1; transform: scale(1); } }

/* 3b · e-mail, 4 · done */
.k-email, .k-done { place-content: center; justify-items: center; text-align: center; gap: 18px; }
.k-check { width: 132px; height: 132px; }
.k-check circle { fill: var(--ok); opacity: 0.16; transform-origin: center; animation: k-pop 600ms var(--ease-out) both; }
.k-check path { fill: none; stroke: var(--ok); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; animation: k-draw 700ms 250ms var(--ease-out) forwards; }
@keyframes k-pop { from { transform: scale(0.3); opacity: 0; } }
@keyframes k-draw { to { stroke-dashoffset: 0; } }
.k-progress { width: min(360px, 70vw); height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; margin-top: 8px; }
.k-progress i { display: block; height: 100%; background: var(--ok); transform-origin: left; animation: k-countdown 20s linear forwards; }
@keyframes k-countdown { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* toast */
.k-toast { position: absolute; left: 50%; bottom: 26px; z-index: 30; display: flex; align-items: center; gap: 14px; max-width: min(92vw, 660px); padding: 10px 26px 10px 10px;
  background: var(--danger); color: #0a0a0b; font-size: 17px; font-weight: 600; border-radius: 999px; box-shadow: 0 24px 60px rgb(0 0 0 / 0.45); transform: translateX(-50%); }
.k-toast:not(:has(img:not([hidden]))) { padding-left: 26px; }
.k-toast.is-ok { background: var(--ok); }
.k-toast.is-in { animation: k-toast 450ms var(--ease-out); }
.k-toast img { width: 48px; height: 48px; object-fit: cover; border-radius: 50%; }
@keyframes k-toast { from { transform: translate(-50%, 30px) scale(0.95); opacity: 0; } }

/* catalogue */
.k-dialog { width: min(1180px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 26px; background: var(--bg-2); color: var(--text); border: 1px solid var(--line-strong); border-radius: max(var(--card-radius, 0px), 22px); }
.k-dialog[open] { animation: k-in 400ms var(--ease-out); }
.k-dialog::backdrop { background: rgb(0 0 0 / 0.7); backdrop-filter: blur(6px); }
.k-dialog-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.k-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
.k-product { display: grid; gap: 10px; align-content: start; padding: 10px; border-radius: 16px; background: rgb(var(--ink-rgb) / 0.03); border: 1px solid var(--line); }
.k-product-img { aspect-ratio: var(--card-ratio, 4 / 5); background: var(--graphite); overflow: hidden; border-radius: 10px; }
.k-product-img img { width: 100%; height: 100%; object-fit: cover; }
.k-product-info { display: flex; justify-content: space-between; gap: 8px; font-size: 16px; }
.k-product-info span { color: var(--silver); white-space: nowrap; }
.k-sizes { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 6px; }
.k-size { height: 54px; padding: 0 8px; border: 1px solid var(--line-strong); background: var(--bg); color: var(--text); font-size: 16px; font-weight: 600; cursor: pointer; border-radius: 12px; }
.k-size:active { background: var(--accent, var(--white)); color: var(--accent-ink, var(--bg)); }
.k-size:disabled { opacity: 0.3; text-decoration: line-through; cursor: not-allowed; }

.k-demo-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px var(--k-pad); background: var(--warn); color: #0a0a0b; font-size: 14px; }
.k-demo-bar .btn { background: #0a0a0b; color: #fff; border-color: #0a0a0b; }
.k-phone { text-align: center; padding-top: calc(var(--header-h) + 20px); }
.k-phone .k-check { margin: 0 auto 10px; }

/* tablets in landscape (Lenovo Tab ≈ 1000–1280 px wide): item rows get two lines */
@media (max-width: 1150px) {
  .k-bag { grid-template-columns: minmax(0, 1fr) minmax(290px, 340px); }
  .k-summary { padding: 20px; }
  .k-line { grid-template-columns: 80px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 14px; row-gap: 4px; }
  .k-line-img { grid-row: 1 / 3; }
  .k-line-info { grid-column: 2; }
  .k-qty { grid-column: 3; grid-row: 1 / 3; }
  .k-line-total { grid-column: 2; grid-row: 2; text-align: left; min-width: 0; font-size: 18px; }
  .k-qty button { width: 48px; height: 48px; }
}
@media (max-width: 1000px) and (orientation: portrait), (max-width: 760px) {
  .kiosk-body { overflow: auto; }
  .kiosk { height: auto; min-height: 100dvh; }
  .k-welcome { grid-template-columns: 1fr; text-align: left; }
  .k-tag-art { display: none; }
  .k-cta { grid-template-columns: 1fr; }
  .k-howto { grid-template-columns: 1fr; }
  .k-bag, .k-pay-screen { grid-template-columns: 1fr; }
  .k-lines { overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .k-line { grid-template-columns: 76px minmax(0, 1fr) auto; }
  .k-line-total { grid-column: 2 / -1; text-align: left; }
}
/* admin → kiosk */
.kiosk-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.kiosk-stats .stat { display: grid; gap: 4px; }
.kiosk-stats b { font-family: var(--font-display); font-size: 30px; }
.kiosk-admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; align-items: start; }
.kiosk-admin-grid .panel { margin: 0; }
.kiosk-admin-grid + .panel { margin-top: 18px; }
.kiosk-devices { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; }
.kiosk-devices li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--line); }
.kiosk-devices li > div { display: grid; gap: 2px; }
.kiosk-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--graphite-3); }
.kiosk-dot.is-on { background: var(--ok); box-shadow: 0 0 0 4px rgba(143,220,176,0.15); }
.kiosk-needs { margin: 0 0 14px; padding-left: 18px; display: grid; gap: 8px; }
@media (max-width: 700px) { .kiosk-stats { grid-template-columns: 1fr; } }

/* printable tags: 5 × 3.4 cm */
.tags { display: grid; grid-template-columns: repeat(auto-fill, 50mm); gap: 4mm; }
.tag { width: 50mm; height: 34mm; padding: 2.5mm 3mm; display: grid; grid-template-rows: auto auto auto 1fr auto; background: #fff; color: #000; border: 0.2mm dashed #999; overflow: hidden; break-inside: avoid; font-family: var(--font-body); }
.tag-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 8pt; }
.tag-brand { letter-spacing: 0.2em; font-family: var(--font-display); }
.tag-price { font-size: 10pt; }
.tag-name { font-size: 7.5pt; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tag-meta { font-size: 7pt; }
.tag-codes { display: flex; align-items: center; gap: 1.5mm; min-height: 0; }
.tag-bar { flex: 1; min-width: 0; }
.tag-bar svg { width: 100%; height: 11mm; display: block; }
.tag-qr svg { width: 11mm; height: 11mm; display: block; }
.tag-sku { font-family: ui-monospace, Menlo, monospace; font-size: 6pt; text-align: center; letter-spacing: 0.05em; }
@media print {
  @page { size: A4; margin: 8mm; }
  .admin-side, .admin-topbar, .no-print, .toast, .admin-scrim, .app-bar { display: none !important; }
  .app-page { padding: 0; width: auto; }
  .admin-shell { display: block; } .admin-main { padding: 0; max-width: none; }
  body { background: #fff; }
  .tag { border-color: #ccc; }
}

/* ================================================================ kiosk: staff, closed state, take-out requests */
.k-logo-btn { border: 0; background: none; color: inherit; cursor: pointer; padding: 6px 4px; }
.k-staff-chip { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 999px; background: var(--ok); color: #0a0a0b; font-weight: 600; font-size: 14px; }
.k-staff-chip .k-ico { width: 18px; height: 18px; }
.k-help { min-height: 52px; }
.k-closed { place-content: center; justify-items: center; text-align: center; gap: 16px; }
.k-closed-ico { display: grid; place-items: center; width: 110px; height: 110px; border-radius: 50%; background: rgb(var(--ink-rgb) / 0.06); border: 1px solid var(--line-strong); }
.k-closed-ico .k-ico { width: 46px; height: 46px; }
.k-line .k-take { min-height: 48px; padding: 0 18px; font-size: 14px; }
.k-line.is-pending { border-color: var(--warn); background: color-mix(in srgb, var(--bg-2) 88%, var(--warn)); }
.k-wait-pill { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 999px; background: var(--warn); color: #0a0a0b; font-size: 13px; font-weight: 600; white-space: nowrap; }
.k-wait-pill i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: k-dot 1.2s infinite; }
.k-wait-pill i:nth-child(2) { animation-delay: 150ms; } .k-wait-pill i:nth-child(3) { animation-delay: 300ms; }
@media (max-width: 1150px) { .k-line .k-take, .k-wait-pill { grid-column: 3; grid-row: 1 / 3; } }

.k-staff-login { width: min(860px, calc(100vw - 32px)); }
.k-staff-login-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
.k-staff-card-side { display: grid; justify-items: center; gap: 16px; text-align: center; font-size: 17px; color: var(--silver); }
.k-staff-card-side p { margin: 0; }
.k-staff-card-art { position: relative; width: 240px; aspect-ratio: 85.6 / 54; padding: 16px; display: grid; align-content: space-between; border-radius: 14px; overflow: hidden;
  background: linear-gradient(135deg, #1c1d21, #0a0a0b); border: 1px solid var(--line-strong); color: #fff; box-shadow: 0 24px 60px rgb(0 0 0 / 0.4); animation: k-float 6s ease-in-out infinite; }
.k-staff-card-art b { font-family: var(--font-display); letter-spacing: 0.3em; font-size: 15px; }
.k-staff-card-art span { font-size: 10px; letter-spacing: 0.3em; color: #8fdcb0; }
.k-staff-card-art i { position: absolute; left: 16px; right: 16px; bottom: 16px; height: 26px; background: repeating-linear-gradient(90deg, #fff 0 2px, transparent 2px 4px, #fff 4px 5px, transparent 5px 8px); opacity: 0.8; }
.k-pin { display: grid; gap: 14px; justify-items: center; }
.k-pin p { margin: 0; color: var(--silver); font-size: 17px; }
.k-pin-dots { display: flex; gap: 12px; }
.k-pin-dots i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line-strong); transition: background 150ms, transform 150ms; }
.k-pin-dots i.is-on { background: var(--accent, var(--white)); border-color: transparent; transform: scale(1.1); }
.k-keypad { display: grid; grid-template-columns: repeat(3, 76px); gap: 10px; }
.k-keypad button { height: 66px; border-radius: 18px; border: 1px solid var(--line-strong); background: rgb(var(--ink-rgb) / 0.05); color: var(--text); font-size: 24px; font-weight: 600; cursor: pointer; display: grid; place-items: center; }
.k-keypad button:active { transform: scale(0.94); background: rgb(var(--ink-rgb) / 0.12); }
.k-keypad .k-key-ok { background: var(--accent, var(--white)); color: var(--accent-ink, var(--bg)); border-color: transparent; font-size: 18px; }

.k-staff { width: min(1200px, calc(100vw - 24px)); height: min(860px, calc(100dvh - 24px)); display: none; }
.k-staff[open] { display: grid; grid-template-rows: auto 1fr; }
.k-staff::backdrop { background: rgb(0 0 0 / 0.85); }
.k-staff-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; min-height: 0; }
.k-staff-main { overflow-y: auto; display: grid; align-content: start; gap: 14px; padding-right: 4px; }
.k-staff-h { margin: 6px 0 0; font-size: 16px; } .k-staff-h small { color: var(--muted); font-weight: 400; }
.k-staff-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.k-staff-lines li { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); }
.k-staff-lines .k-line-img { width: 64px; }
.k-staff-side { display: grid; align-content: start; gap: 14px; padding: 20px; border-radius: 18px; background: var(--bg); border: 1px solid var(--line); }
.k-staff-state { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.k-state-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 0 4px rgb(255 122 122 / 0.2); }
.k-state-dot.is-on { background: var(--ok); box-shadow: 0 0 0 4px rgb(143 220 176 / 0.2); }
.k-staff-toggle { height: 72px; font-size: 16px; letter-spacing: 0.06em; }
.k-staff-toggle.is-end { background: var(--danger); color: #0a0a0b; }
.k-req { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 12px; border-radius: 14px; border: 1px solid var(--warn); background: color-mix(in srgb, var(--bg) 85%, var(--warn)); }
.k-req img, .k-req-ico { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; }
.k-req-ico { display: grid; place-items: center; background: var(--warn); color: #0a0a0b; font-weight: 800; font-size: 24px; }
.k-req div { display: grid; gap: 2px; } .k-req span { color: var(--silver); font-size: 14px; }
.k-req .k-pill { min-height: 48px; }
@media (max-width: 900px) {
  .k-staff-login-grid, .k-staff-grid { grid-template-columns: 1fr; }
  .k-req { grid-template-columns: 48px minmax(0, 1fr); } .k-req .k-pill { grid-column: span 2; }
}

/* ================================================================ Account → Work */
.work-stores { display: grid; gap: 10px; }
.work-store { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); }
.work-store > div { display: grid; gap: 3px; }
.work-store.is-on { border-color: var(--ok); }
.form-inline-row { display: flex; gap: 8px; flex-wrap: wrap; }
.form-inline-row .input { width: 180px; height: 44px; letter-spacing: 0.3em; }
.work-start .work-cam { position: relative; display: grid; justify-items: center; gap: 12px; margin: 10px 0 24px; padding: 14px; border: 1px dashed var(--line-strong); border-radius: var(--radius); }
.work-cam video { display: none; width: 100%; max-height: 50vh; object-fit: cover; border-radius: 10px; background: #000; }
.work-cam .k-viewfinder { display: none; }
.work-start.is-scanning .work-cam video { display: block; }
.work-cam-text { margin: 0; text-align: center; color: var(--silver); }
.work { padding-top: calc(var(--header-h) + 24px); padding-bottom: 60px; }
.work-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; }
.work-head p { margin: 4px 0 0; }
.work-head-actions { display: flex; gap: 10px; flex-wrap: wrap; }
[data-work-sound].is-on { border-color: var(--ok); color: var(--ok); }
.work-count { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 8px; border-radius: 13px; background: var(--warn); color: #0a0a0b; font-size: 13px; letter-spacing: 0; vertical-align: middle; }
.work-requests { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.work-req { display: grid; gap: 10px; padding: 16px; border: 1px solid var(--warn); border-radius: 14px; background: color-mix(in srgb, var(--bg-2) 88%, var(--warn)); animation: k-in 400ms var(--ease-out); }
.work-req-tags { border-color: var(--ok); background: color-mix(in srgb, var(--bg-2) 90%, var(--ok)); }
.work-req-error { border-color: var(--danger); background: color-mix(in srgb, var(--bg-2) 90%, var(--danger)); }
.work-req-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.work-req-item, .work-req-items li { display: flex; align-items: center; gap: 12px; }
.work-req-item img, .work-req-items img { width: 54px; height: 54px; object-fit: cover; border-radius: 8px; }
.work-req-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.work-req-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.work-req-actions .btn { min-height: 48px; }
.work-kiosks { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.work-kiosk { display: grid; gap: 6px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-2); }
.work-kiosk.is-open { border-color: var(--line-strong); }
.work-kiosk.is-offline { opacity: 0.6; }
.work-kiosk-top { display: flex; justify-content: space-between; align-items: center; }
.work-kiosk-bag { font-size: 15px; }
.work-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--graphite-3); }
.work-dot.is-on { background: var(--ok); box-shadow: 0 0 0 4px rgb(143 220 176 / 0.18); }
.work-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.work-log li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }

/* ================================================================ Admin → Stores & staff */
.stores-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; align-items: start; }
.store-card { margin: 0; }
.store-card > summary { display: flex; justify-content: space-between; align-items: start; gap: 12px; cursor: pointer; list-style: none; }
.store-card > summary > div:first-child { display: grid; gap: 2px; }
.store-card.is-off { opacity: 0.6; }
.store-badges { display: flex; flex-wrap: wrap; gap: 6px; justify-content: end; }
.pill-ok { color: var(--ok); border-color: rgb(143 220 176 / 0.4); }
.store-new { display: grid; gap: 12px; border-style: dashed; }
.check-list { display: flex; flex-wrap: wrap; gap: 10px 18px; padding-top: 6px; }
.staff-list { display: grid; gap: 12px; margin-top: 14px; }
.staff-card { margin: 0; display: grid; gap: 14px; }
.staff-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; align-items: center; }
.staff-head > div:nth-child(2) { display: grid; }
.staff-head > div:last-child { grid-column: 1 / -1; }
.staff-actions { display: grid; gap: 12px; }
.staff-stores { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-check { cursor: pointer; }
.chip-check input { position: absolute; opacity: 0; pointer-events: none; }
.chip-check span { display: inline-block; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; color: var(--silver); }
.chip-check input:checked + span { background: var(--white); color: var(--bg); border-color: var(--white); }
.chip-check input:focus-visible + span { outline: 1px solid var(--silver); outline-offset: 2px; }
.staff-links { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.kiosk-store-pick select { margin-top: 6px; height: 36px; padding: 0 10px; background: var(--graphite); border: 1px solid var(--line); color: var(--text); }

/* printable staff card: 85.6 × 54 mm */
.staff-cards { display: flex; flex-wrap: wrap; gap: 6mm; }
.staff-print { width: 85.6mm; height: 54mm; padding: 4mm 5mm; display: grid; grid-template-rows: auto auto auto 1fr auto; border-radius: 3.5mm; overflow: hidden;
  background: linear-gradient(135deg, #1c1d21, #0a0a0b); color: #fff; -webkit-print-color-adjust: exact; print-color-adjust: exact; font-family: var(--font-body); break-inside: avoid; }
.staff-print-top { display: flex; justify-content: space-between; align-items: baseline; }
.staff-print-brand { font-family: var(--font-display); letter-spacing: 0.3em; font-size: 12pt; }
.staff-print-top span { font-size: 7pt; letter-spacing: 0.3em; color: #8fdcb0; }
.staff-print-name { margin-top: 2mm; font-size: 12pt; font-weight: 600; }
.staff-print-stores { font-size: 7pt; color: #b9bdc5; }
.staff-print-codes { display: flex; align-items: end; gap: 2mm; }
.staff-print-bar { flex: 1; min-width: 0; background: #fff; padding: 1.2mm; border-radius: 1mm; }
.staff-print-bar svg { width: 100%; height: 11mm; display: block; }
.staff-print-qr svg { width: 15mm; height: 15mm; display: block; border-radius: 1mm; }
.staff-print-code { margin-top: 1mm; font-family: ui-monospace, Menlo, monospace; font-size: 6.5pt; letter-spacing: 0.1em; color: #b9bdc5; }
@media (max-width: 760px) { .k-help span { display: none; } .k-help { padding: 0 14px; } .k-langs a { padding: 0 12px; } }

/* ================================================================ kiosk: always-on camera scanner */
.k-cam { position: absolute; left: var(--k-pad); bottom: var(--k-pad); z-index: 20; width: 210px; aspect-ratio: 4 / 3; border-radius: 22px; overflow: hidden;
  background: #000; color: #fff; border: 2px solid rgb(255 255 255 / 0.12); box-shadow: 0 20px 50px rgb(0 0 0 / 0.45);
  transition: width 450ms var(--ease-out), height 450ms var(--ease-out), left 450ms var(--ease-out), bottom 450ms var(--ease-out), border-radius 450ms, border-color 300ms, box-shadow 300ms; }
.k-cam video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 400ms; }
.k-cam video.is-mirror { transform: scaleX(-1); }
.k-cam[data-state="on"] video, .k-cam[data-state="paused"] video { opacity: 1; }
.k-cam[data-state="paused"] video { filter: grayscale(1) brightness(0.45); }
/* glowing while it scans */
.k-cam[data-state="on"] { border-color: var(--ok); box-shadow: 0 0 0 4px rgb(143 220 176 / 0.25), 0 0 34px rgb(143 220 176 / 0.45), 0 20px 50px rgb(0 0 0 / 0.45); animation: k-cam-glow 2.4s ease-in-out infinite; }
@keyframes k-cam-glow { 50% { box-shadow: 0 0 0 7px rgb(143 220 176 / 0.12), 0 0 52px rgb(143 220 176 / 0.6), 0 20px 50px rgb(0 0 0 / 0.45); } }
.k-cam.is-hit { animation: k-cam-hit 650ms var(--ease-out); }
.k-cam.is-miss { animation: k-cam-miss 650ms var(--ease-out); }
@keyframes k-cam-hit { 0% { transform: scale(1); } 30% { transform: scale(1.06); border-color: #fff; box-shadow: 0 0 0 10px rgb(143 220 176 / 0.5), 0 0 80px rgb(143 220 176 / 0.9); } }
@keyframes k-cam-miss { 20%, 60% { transform: translateX(-6px); border-color: var(--danger); } 40%, 80% { transform: translateX(6px); border-color: var(--danger); } }
.k-cam .k-viewfinder { width: 74%; top: 50%; box-shadow: none; border-radius: 12px; opacity: 0; transition: opacity 300ms; }
.k-cam[data-state="on"] .k-viewfinder { opacity: 1; }
.k-cam-state { position: absolute; left: 10px; top: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 7px; max-width: calc(100% - 20px); padding: 5px 11px; border-radius: 999px;
  background: rgb(0 0 0 / 0.65); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-size: 11px; letter-spacing: 0.08em; }
.k-cam-state i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #868a93; }
.k-cam-state b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-cam[data-state="on"] .k-cam-state i { background: var(--ok); animation: live-pulse 1.6s infinite; box-shadow: 0 0 8px var(--ok); }
.k-cam[data-state="denied"] .k-cam-state, .k-cam[data-state="unsupported"] .k-cam-state, .k-cam[data-state="insecure"] .k-cam-state { white-space: normal; }
.k-cam[data-state="denied"] .k-cam-state b, .k-cam[data-state="unsupported"] .k-cam-state b, .k-cam[data-state="insecure"] .k-cam-state b { white-space: normal; font-weight: 500; line-height: 1.3; }
.k-cam-grow { position: absolute; inset: 0; z-index: 1; border: 0; background: none; cursor: pointer; }
.k-cam-hint, .k-cam-bar, .k-cam-last { display: none; }
/* big: full screen */
.k-cam.is-big { left: 0; bottom: 0; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; border-width: 0; z-index: 60; animation: none; }
.k-cam.is-big .k-cam-grow { display: none; }
.k-cam.is-big .k-viewfinder { width: min(72vw, 560px); top: 46%; box-shadow: 0 0 0 100vmax rgb(0 0 0 / 0.5); border-radius: 22px; }
.k-cam.is-big .k-cam-state { left: 50%; top: 22px; transform: translateX(-50%); font-size: 14px; padding: 8px 16px; }
.k-cam.is-big .k-cam-hint { display: block; position: absolute; left: 0; right: 0; top: 70px; margin: 0; padding: 0 24px; text-align: center; font-size: 19px; z-index: 2; text-shadow: 0 2px 10px rgb(0 0 0 / 0.6); }
.k-cam.is-big .k-cam-bar { display: flex; position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; justify-content: center; align-items: center; gap: 22px; padding: 26px; background: linear-gradient(transparent, rgb(0 0 0 / 0.7)); }
.k-cam.is-big .k-cam-bar .k-icon-btn { width: 64px; height: 64px; color: #fff; border-color: rgb(255 255 255 / 0.35); background: rgb(255 255 255 / 0.1); }
.k-cam.is-big .k-cam-done { min-width: 200px; background: #fff; color: #0a0a0b; }
.k-cam.is-big .k-cam-last:not([hidden]) { display: block; position: absolute; left: 50%; bottom: 130px; transform: translateX(-50%); z-index: 2; max-width: 90vw; padding: 14px 24px; border-radius: 999px; background: #8fdcb0; color: #0a0a0b; font-size: 17px; font-weight: 600; text-align: center; }
.k-cam.is-big .k-cam-last.is-bad { background: #ff7a7a; }
.k-cam.is-big .k-cam-last.is-in { animation: k-toast 400ms var(--ease-out); }
.kiosk[data-state="pay"] .k-cam:not(.is-big), .kiosk[data-state="done"] .k-cam:not(.is-big) { opacity: 0; pointer-events: none; transform: translateY(20px); }
.k-cam { transition-property: width, height, left, bottom, border-radius, border-color, box-shadow, opacity, transform; }



@media (max-width: 1150px) { .k-cam { width: 160px; }  }
@media (max-width: 1000px) and (orientation: portrait), (max-width: 760px) {
  .k-cam { position: fixed; width: 130px; left: 14px; bottom: 14px; border-radius: 16px; }
  .k-welcome .k-howto { margin-left: 0; }
}

/* ================================================================ kiosk: animations */
.k-screen.is-on > * { animation: k-rise 600ms var(--ease-out) both; }
.k-screen.is-on > *:nth-child(2) { animation-delay: 60ms; } .k-screen.is-on > *:nth-child(3) { animation-delay: 120ms; }
.k-screen.is-on > *:nth-child(4) { animation-delay: 180ms; } .k-screen.is-on > *:nth-child(5) { animation-delay: 240ms; }
@keyframes k-rise { from { opacity: 0; transform: translateY(22px); } }
.k-welcome .k-title { background: linear-gradient(100deg, var(--text) 40%, var(--accent, var(--white)) 50%, var(--text) 60%) 0 0 / 300% 100%; -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; animation: k-shine 6s ease-in-out infinite; }
@keyframes k-shine { 0%, 60% { background-position: 100% 0; } 100% { background-position: 0 0; } }
.k-big-main { position: relative; overflow: hidden; }
.k-big-main::after, .k-pay:not(:disabled)::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgb(255 255 255 / 0.45) 50%, transparent 65%) -150% 0 / 200% 100% no-repeat;
  animation: k-sheen 3.6s ease-in-out infinite; pointer-events: none; }
.k-pay { overflow: hidden; }
@keyframes k-sheen { 0%, 55% { background-position: -150% 0; } 100% { background-position: 250% 0; } }
.k-pay:not(:disabled) { animation: k-breathe 2.8s ease-in-out infinite; }
@keyframes k-breathe { 50% { transform: scale(1.015); box-shadow: 0 30px 60px rgb(0 0 0 / 0.45); } }
.k-total b.is-bump { animation: k-bump 500ms var(--ease-out); }
@keyframes k-bump { 30% { transform: scale(1.08); color: var(--accent, var(--white)); } }
.k-howto li { animation: k-rise 600ms var(--ease-out) both; }
.k-howto li:nth-child(2) { animation-delay: 120ms; } .k-howto li:nth-child(3) { animation-delay: 240ms; }
.k-howto li .k-ico { animation: k-ico 3s ease-in-out infinite; }
.k-howto li:nth-child(2) .k-ico { animation-delay: 1s; } .k-howto li:nth-child(3) .k-ico { animation-delay: 2s; }
@keyframes k-ico { 0%, 70%, 100% { transform: none; } 80% { transform: translateY(-4px) rotate(-6deg); } 90% { transform: translateY(0) rotate(4deg); } }
.k-qr-wrap { animation: k-flipin 700ms var(--ease-out) both; }
@keyframes k-flipin { from { opacity: 0; transform: perspective(900px) rotateY(-50deg) scale(0.9); } }
.k-steps li { animation: k-rise 500ms var(--ease-out) both; }
.k-steps li:nth-child(1) { animation-delay: 250ms; } .k-steps li:nth-child(2) { animation-delay: 400ms; } .k-steps li:nth-child(3) { animation-delay: 550ms; }
.k-closed-ico { animation: k-lock 4s ease-in-out infinite; }
@keyframes k-lock { 0%, 85%, 100% { transform: none; } 88% { transform: rotate(-10deg); } 92% { transform: rotate(8deg); } 96% { transform: rotate(-4deg); } }
.k-staff[open], .k-staff-login[open] { animation: k-sheet 450ms var(--ease-out); }
@keyframes k-sheet { from { opacity: 0; transform: translateY(40px) scale(0.98); } }
.k-req { animation: k-rise 450ms var(--ease-out) both; }
.k-confetti { position: absolute; inset: 0; z-index: 70; pointer-events: none; overflow: hidden; }
.k-confetti i { position: absolute; top: -20px; left: var(--x); width: 10px; height: 16px; border-radius: 2px; background: var(--ok); animation: k-fall 2.6s var(--d) cubic-bezier(0.25, 0.6, 0.4, 1) forwards; }
.k-confetti i[style*="--c:1"] { background: var(--accent, var(--white)); width: 8px; height: 8px; border-radius: 50%; }
.k-confetti i[style*="--c:2"] { background: var(--warn); }
@keyframes k-fall { to { transform: translateY(105vh) rotate(var(--r)); opacity: 0.2; } }
.k-receipt { display: flex; align-items: center; gap: 18px; padding: 14px 22px 14px 14px; border-radius: 18px; background: #fff; color: #0a0a0b; text-align: left; animation: k-rise 600ms 300ms var(--ease-out) both; }
.k-receipt-qr svg { display: block; width: 110px; height: 110px; }
.k-receipt div:last-child { display: grid; gap: 4px; }
.k-receipt .k-eyebrow { color: #6b6e75; }
.k-receipt b { font-family: ui-monospace, Menlo, monospace; font-size: 20px; letter-spacing: 0.04em; }
.k-receipt small { max-width: 260px; color: #4d5057; font-size: 13px; line-height: 1.4; }
@media (prefers-reduced-motion: reduce) { .kiosk *, .kiosk *::before, .kiosk *::after { animation: none !important; } }

/* ================================================================ store payment page (customer's phone) */
.store-pay-body { background: var(--bg); }
.sp { max-width: 560px; margin: 0 auto; padding: 18px 18px 60px; display: grid; gap: 18px; }
.sp-top { display: flex; justify-content: space-between; align-items: center; }
.sp-langs { display: flex; gap: 4px; }
.sp-langs a { padding: 6px 10px; border-radius: 999px; font-size: 12px; color: var(--silver); border: 1px solid var(--line); }
.sp-langs a.is-active { background: var(--white); color: var(--bg); border-color: var(--white); }
.sp-head { display: grid; gap: 8px; padding-top: 10px; animation: k-rise 600ms var(--ease-out) both; }
.sp-badge { justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: rgb(143 220 176 / 0.12); color: var(--ok); font-size: 12px; letter-spacing: 0.08em; }
.sp-badge svg { width: 16px; height: 16px; }
.sp-title { font-size: clamp(34px, 10vw, 54px); margin: 0; line-height: 0.95; }
.sp-sub { margin: 0; color: var(--muted); font-size: 14px; }
.sp-card { padding: 16px; border-radius: 18px; background: var(--bg-2); border: 1px solid var(--line); display: grid; gap: 10px; }
.sp-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.sp-items li { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 12px; align-items: center; animation: k-rise 500ms calc(var(--i) * 80ms + 150ms) var(--ease-out) both; }
.sp-items img { width: 54px; height: 66px; object-fit: cover; border-radius: 8px; background: var(--graphite); }
.sp-items div { display: grid; gap: 2px; min-width: 0; } .sp-items b { font-size: 15px; } .sp-items span { font-size: 13px; color: var(--muted); }
.sp-row { display: flex; justify-content: space-between; font-size: 14px; color: var(--silver); }
.sp-ok { color: var(--ok); }
.sp-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 12px; border-top: 1px solid var(--line); }
.sp-total span { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.sp-total b { font-family: var(--font-display); font-size: 34px; font-weight: 800; }
.sp-timer { margin: 0; text-align: center; font-size: 13px; color: var(--muted); }
.sp-timer b { color: var(--text); font-variant-numeric: tabular-nums; }
.sp-pay { display: grid; gap: 14px; }
.sp-btn { height: 58px; font-size: 14px; }
.sp-note { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: 12px; color: var(--muted); }
.sp-state { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 30px 0; }
.sp-state .display { font-size: 30px; margin: 0; }
.k-viewfinder { position: absolute; left: 50%; aspect-ratio: 16 / 10; transform: translate(-50%, -50%); pointer-events: none; }
.k-viewfinder span { position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(#fff, #fff) left top / 34px 4px, linear-gradient(#fff, #fff) left top / 4px 34px, linear-gradient(#fff, #fff) right top / 34px 4px, linear-gradient(#fff, #fff) right top / 4px 34px,
              linear-gradient(#fff, #fff) left bottom / 34px 4px, linear-gradient(#fff, #fff) left bottom / 4px 34px, linear-gradient(#fff, #fff) right bottom / 34px 4px, linear-gradient(#fff, #fff) right bottom / 4px 34px;
  background-repeat: no-repeat; }
.k-viewfinder .k-laser { top: 50%; }
.work-cam .k-viewfinder { width: 70%; top: 45%; }
.work-start.is-scanning .work-cam .k-viewfinder { display: block; }
.work-cam { overflow: hidden; }
.work-check { margin: 18px 0 6px; padding: 16px; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--bg-2); display: grid; gap: 12px; }
.work-check-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.work-check-form .input { flex: 1; min-width: 180px; height: 44px; text-transform: uppercase; font-family: ui-monospace, Menlo, monospace; }
.work-check video { width: 100%; max-height: 40vh; object-fit: cover; border-radius: 10px; background: #000; }
.work-check-result { display: grid; gap: 10px; padding: 14px; border-radius: 12px; animation: k-in 300ms var(--ease-out); }
.work-check-result.is-ok { background: rgb(143 220 176 / 0.12); border: 1px solid var(--ok); }
.work-check-result.is-bad { background: rgb(255 122 122 / 0.12); border: 1px solid var(--danger); }
.work-check-head { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.work-check-head b { font-size: 20px; }

/* ================================================================ Design → countdown timer looks ([data-timer] on <html> or on an admin preview) */
.timer { zoom: var(--timer-scale, 1); }
[data-timer-labels="0"] .timer-label { display: none; }
[data-timer-seconds="0"] .timer { grid-template-columns: repeat(3, minmax(0, 1fr)); }
[data-timer-seconds="0"] .timer .timer-unit:last-child { display: none; }
[data-timer-accent="1"] .timer-num { color: var(--accent, var(--white)); }
/* outline: thin frames, no fill */
[data-timer="outline"] .timer-unit { background: transparent; border: 1px solid var(--line-strong); border-radius: max(var(--card-radius, 0px), 10px); }
[data-timer="outline"] .timer-num { font-weight: 600; }
/* minimal: big digits with colons, no boxes */
[data-timer="minimal"] .timer { gap: 0; }
[data-timer="minimal"] .timer-unit { background: none; border: 0; padding: 4px 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
[data-timer="minimal"] .timer-unit:not(:last-child) .timer-num::after { content: ":"; position: absolute; right: -0.18em; opacity: 0.35; }
[data-timer-seconds="0"][data-timer="minimal"] .timer-unit:nth-child(3) .timer-num::after, [data-timer="minimal"][data-timer-seconds="0"] .timer-unit:nth-child(3) .timer-num::after { content: none; }
[data-timer="minimal"] .timer-num { position: relative; width: 100%; text-align: center; font-weight: 300; letter-spacing: -0.02em; font-size: clamp(36px, 6vw, 58px); }
[data-timer="minimal"] .timer-sm .timer-num { font-size: 28px; }
/* flip: split cards like an old airport board */
[data-timer="flip"] .timer-unit { position: relative; padding: 14px 6px 10px; border: 0; border-radius: 10px; overflow: hidden;
  background: linear-gradient(180deg, color-mix(in srgb, var(--graphite-3) 85%, #fff 15%) 0 50%, var(--graphite-2) 50% 100%); box-shadow: 0 10px 24px rgb(0 0 0 / 0.35), inset 0 1px 0 rgb(255 255 255 / 0.08); }
[data-timer="flip"] .timer-unit::after { content: ""; position: absolute; left: 0; right: 0; top: calc(50% - 6px); height: 2px; background: rgb(0 0 0 / 0.45); }
[data-timer="flip"] .timer-num { color: var(--white); }
[data-timer-accent="1"][data-timer="flip"] .timer-num { color: var(--accent, var(--white)); }
[data-timer="flip"] .timer-num.is-tick { animation: timer-flip 520ms var(--ease-out); transform-origin: 50% 60%; }
@keyframes timer-flip { 0% { transform: perspective(300px) rotateX(-80deg); opacity: 0.3; } 100% { transform: none; opacity: 1; } }
/* glass: frosted rounded tiles with a soft glow */
[data-timer="glass"] .timer-unit { border-radius: 18px; border: 1px solid rgb(var(--ink-rgb) / 0.14); background: rgb(var(--ink-rgb) / 0.06);
  backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); box-shadow: inset 0 1px 0 rgb(var(--ink-rgb) / 0.12), 0 18px 40px rgb(0 0 0 / 0.25); }
[data-timer="glass"] .timer-num { text-shadow: 0 0 24px rgb(var(--ink-rgb) / 0.35); }
[data-timer-accent="1"][data-timer="glass"] .timer-num { text-shadow: 0 0 26px var(--accent, var(--white)); }

/* Admin → Design: timer picker */
.timer-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.timer-pick { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; color: var(--silver); }
.timer-pick input { position: absolute; opacity: 0; pointer-events: none; }
.timer-pick:has(input:checked) { border-color: var(--white); color: var(--white); }
.timer-pick .timer { zoom: 0.62; max-width: none; }
.timer-preview { padding: 26px; border: 1px solid var(--line); border-radius: 14px; background: radial-gradient(120% 120% at 0 0, var(--graphite-2), var(--bg)); }

/* kiosk lock */
html:has(.kiosk-body), .kiosk-body { overscroll-behavior: none; -webkit-touch-callout: none; }
.kiosk img { -webkit-user-drag: none; user-select: none; }
.k-alarm { place-content: center; justify-items: center; text-align: center; gap: 16px; background: radial-gradient(80% 60% at 50% 40%, rgb(255 122 122 / 0.16), transparent 70%); }
.k-alarm-ico { border-color: var(--danger); color: var(--danger); animation: k-alarm 1.4s ease-in-out infinite; }
@keyframes k-alarm { 50% { box-shadow: 0 0 0 16px rgb(255 122 122 / 0.12), 0 0 60px rgb(255 122 122 / 0.35); } }
.k-resume { position: fixed; inset: 0; z-index: 90; display: grid; place-content: center; justify-items: center; gap: 18px; border: 0; cursor: pointer;
  background: rgb(var(--bg-rgb) / 0.92); color: var(--text); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: 22px; }
.k-resume span { display: grid; place-items: center; width: 110px; height: 110px; border-radius: 50%; background: var(--accent, var(--white)); color: var(--accent-ink, var(--bg)); animation: k-breathe 2s ease-in-out infinite; }
.k-resume .k-ico { width: 44px; height: 44px; }

/* ================================================================ STR Staff app (Account → Work → store) */
.work-body main { animation: none; }
.wa { max-width: 1280px; margin: 0 auto; padding: calc(env(safe-area-inset-top, 0px) + 18px) 16px calc(env(safe-area-inset-bottom, 0px) + 96px); display: grid; gap: 16px; }
.wa-top { display: flex; justify-content: space-between; align-items: end; gap: 12px; flex-wrap: wrap; }
.wa-top p { margin: 2px 0; }
.wa-title { margin: 0; font-family: var(--font-display); font-size: clamp(26px, 6vw, 40px); line-height: 1; text-transform: uppercase; letter-spacing: -0.01em; }
.wa-top-actions { display: flex; gap: 8px; align-items: center; }
.wa-round { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-strong); background: none; font-size: 18px; cursor: pointer; filter: grayscale(1); opacity: 0.6; }
.wa-round.is-on { filter: none; opacity: 1; border-color: var(--ok); box-shadow: 0 0 0 3px rgb(143 220 176 / 0.2); }
.wa-alarm { padding: 14px 16px; border-radius: 14px; background: var(--danger); color: #0a0a0b; font-weight: 700; animation: k-alarm 1.4s ease-in-out infinite; }
.wa-tab { display: none; } .wa-tab.is-on { display: grid; gap: 14px; animation: k-in 300ms var(--ease-out); }
.wa-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: repeat(4, 1fr); padding: 8px 8px calc(env(safe-area-inset-bottom, 0px) + 8px);
  background: rgb(var(--bg-rgb) / 0.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid var(--line); }
.wa-nav button { position: relative; display: grid; justify-items: center; gap: 3px; padding: 6px 4px; border: 0; background: none; color: var(--muted); font-size: 11px; cursor: pointer; border-radius: 12px; }
.wa-nav button svg { width: 24px; height: 24px; }
.wa-nav button.is-on { color: var(--text); background: rgb(var(--ink-rgb) / 0.06); }
.wa-badge { position: absolute; top: 2px; left: calc(50% + 6px); min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--danger); color: #0a0a0b; font-size: 11px; line-height: 20px; }
.wa-kiosks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 14px; }
.wa-kiosk { display: grid; gap: 12px; padding: 16px; border-radius: 18px; border: 1px solid var(--line); background: var(--bg-2); transition: border-color 300ms; }
.wa-kiosk.is-offline { opacity: 0.6; }
.wa-kiosk > header { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.wa-kiosk > header > div { display: flex; align-items: center; gap: 8px; }
.wa-kiosk > header b { font-size: 17px; }
.wa-kiosk > header small { color: var(--muted); }
.wa-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--graphite-3); }
.wa-dot.is-on { background: var(--ok); box-shadow: 0 0 0 3px rgb(143 220 176 / 0.2); }
.wa-state { padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; background: rgb(var(--ink-rgb) / 0.08); white-space: nowrap; }
.wa-s-bag .wa-state { background: rgb(143 220 176 / 0.16); color: var(--ok); }
.wa-s-pay .wa-state, .wa-s-email .wa-state { background: var(--warn); color: #0a0a0b; animation: k-breathe 1.6s ease-in-out infinite; }
.wa-s-done .wa-state { background: var(--ok); color: #0a0a0b; }
.wa-s-alarm { border-color: var(--danger); } .wa-s-alarm .wa-state { background: var(--danger); color: #0a0a0b; animation: k-alarm 1.2s infinite; }
.wa-s-closed .wa-state { color: var(--muted); }
.wa-s-pay, .wa-s-bag { border-color: var(--line-strong); }
.wa-screen { display: grid; gap: 10px; padding: 12px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line); min-height: 90px; }
.wa-empty { margin: auto; color: var(--muted); font-size: 14px; }
.wa-paying { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: rgb(232 201 135 / 0.14); border: 1px solid var(--warn); }
.wa-paying span { grid-column: 1; font-size: 12px; color: var(--muted); }
.wa-paying .btn { grid-column: 2; grid-row: 1 / 3; }
.wa-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.wa-lines li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: center; animation: k-rise 350ms var(--ease-out) both; }
.wa-lines li.is-pending { padding: 6px; margin: -6px; border-radius: 10px; background: rgb(232 201 135 / 0.12); }
.wa-lines img { width: 44px; height: 54px; object-fit: cover; border-radius: 8px; background: var(--graphite); }
.wa-lines div:nth-child(2) { display: grid; min-width: 0; } .wa-lines b { font-size: 14px; } .wa-lines span { font-size: 12px; color: var(--muted); }
.wa-line-act { display: flex; gap: 4px; }
.wa-line-act button { min-width: 38px; height: 38px; padding: 0 8px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--bg-2); color: var(--text); font-weight: 600; cursor: pointer; }
.wa-line-act button.is-hot { background: var(--warn); color: #0a0a0b; border-color: transparent; }
.wa-line-act button:disabled { opacity: 0.35; }
.wa-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 8px; border-top: 1px solid var(--line); }
.wa-total span { font-size: 13px; color: var(--muted); } .wa-total b { font-family: var(--font-display); font-size: 24px; }
.wa-k-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.wa-k-actions .btn { flex: 1; min-height: 46px; }
.wa-more { border-top: 1px solid var(--line); padding-top: 8px; }
.wa-more summary { cursor: pointer; font-size: 12px; color: var(--muted); list-style: none; }
.wa-more-body { display: grid; gap: 10px; padding-top: 10px; }
.wa-more-body input[type=range] { width: 100%; }
.wa-more-links { display: flex; gap: 16px; }
.wa-activity { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 210px; overflow-y: auto; font-size: 12px; }
.wa-act { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 5px 0; border-bottom: 1px dashed var(--line); animation: k-rise 300ms var(--ease-out) both; }
.wa-act > span { color: var(--muted); font-variant-numeric: tabular-nums; }
.wa-act em { font-style: normal; display: inline-flex; align-items: center; gap: 6px; color: var(--silver); }
.wa-act em img { width: 20px; height: 24px; object-fit: cover; border-radius: 4px; }
.wa-act small { color: var(--muted); }
.wa-act-paid b, .wa-act-opened b { color: var(--ok); }
.wa-act-left b, .wa-act-unknown_code b, .wa-act-abandoned b, .wa-act-pay_cancelled b { color: var(--danger); }
.wa-act-asked_remove b, .wa-act-help b, .wa-act-screen_pay b { color: var(--warn); }
.wa-receipts-head { display: flex; align-items: baseline; gap: 6px; } .wa-receipts-head b { font-family: var(--font-display); font-size: 28px; }
.wa-receipts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.wa-receipts li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 12px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); }
.wa-receipts li > div { display: grid; gap: 2px; min-width: 0; }
.wa-receipts li b { font-family: ui-monospace, Menlo, monospace; } .wa-receipts li span, .wa-receipts li small { font-size: 12px; color: var(--muted); }
.wa-sheet { width: min(460px, calc(100vw - 24px)); padding: 20px; border-radius: 20px; border: 1px solid var(--line-strong); background: var(--bg-2); color: var(--text); }
.wa-sheet::backdrop { background: rgb(0 0 0 / 0.6); }
.wa-sheet form { display: grid; gap: 14px; } .wa-sheet h3 { margin: 0; }
.wa-sheet-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.work-req.is-alarm { border-color: var(--danger); animation: k-alarm 1.4s infinite; }
@media (min-width: 900px) { .wa-nav { left: 50%; right: auto; bottom: 16px; transform: translateX(-50%); width: 520px; border-radius: 20px; border: 1px solid var(--line-strong); } }

/* kiosk: slim staff menu, help in the summary, pairing screen */
.k-staff-slim { width: min(620px, calc(100vw - 24px)); height: auto; }
.k-staff-slim[open] { display: grid; grid-template-rows: auto auto; gap: 8px; }
.k-staff-app { display: flex; gap: 12px; align-items: flex-start; margin: 4px 0 0; padding: 14px; border-radius: 14px; background: rgb(143 220 176 / 0.1); color: var(--silver); font-size: 15px; }
.k-staff-app .k-ico { color: var(--ok); }
.k-help-big { min-height: 72px; margin-top: 6px; }
.k-help-big .k-ico { width: 28px; height: 28px; }
.k-pair-screen { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(24px, 5vw, 80px); padding: clamp(24px, 5vw, 70px); }
.k-pair-code { display: grid; justify-items: center; gap: 16px; }
.k-pair-digits { display: flex; gap: 8px; }
.k-pair-digits span { display: grid; place-items: center; width: 56px; height: 72px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line-strong);
  font-family: var(--font-display); font-size: 38px; font-weight: 800; animation: k-rise 500ms calc(var(--i) * 70ms) var(--ease-out) both; }
.k-pairing .k-qr svg { width: min(36vh, 300px); }
.k-code-input { font-family: ui-monospace, Menlo, monospace; font-size: 22px !important; letter-spacing: 0.3em; }
@media (max-width: 900px) { .k-pair-screen { grid-template-columns: 1fr; } }
.work-tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.work-tool { display: grid; gap: 4px; padding: 16px; border-radius: 14px; border: 1px solid var(--line-strong); background: var(--bg); color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.work-tool:hover { border-color: var(--white); }

/* Admin → Reports */
.rep-filter { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.rep-filter .field { min-width: 160px; }
.rep-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; }
.rep-kpis .stat { display: grid; gap: 6px; } .rep-kpis b { font-family: var(--font-display); font-size: 26px; }
.rep-bars { display: flex; align-items: flex-end; gap: 3px; height: 160px; padding-top: 10px; }
.rep-bar { flex: 1; min-width: 0; height: 100%; display: grid; grid-template-rows: 1fr auto; gap: 4px; }
.rep-bar i { align-self: end; height: max(var(--h), 2px); border-radius: 3px 3px 0 0; background: linear-gradient(var(--silver-2), var(--graphite-3)); transition: height 600ms var(--ease-out); }
.rep-bar:hover i { background: var(--white); }
.rep-bar span { font-size: 10px; color: var(--muted); text-align: center; }
.rep-days .rep-bar:nth-child(odd) span { visibility: hidden; }
.rep-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; align-items: start; }
.rep-grid .panel { margin: 0; }
.rep-sizes { display: flex; flex-wrap: wrap; gap: 8px; }
.rep-sizes span { display: grid; justify-items: center; min-width: 58px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; font-size: 13px; color: var(--muted); }
.rep-sizes b { font-size: 18px; color: var(--text); }
.k-staff-row { display: flex; flex-wrap: wrap; gap: 8px; }
.k-receipt-bar svg { display: block; width: 180px; height: 44px; margin-top: 6px; }
.k-receipt { flex-wrap: wrap; }
/* STR app start screen */
.app-home-body main { animation: none; }
.ah { max-width: 1100px; margin: 0 auto; padding: calc(env(safe-area-inset-top, 0px) + 24px) 20px 40px; display: grid; gap: 22px; }
.ah-top { display: flex; justify-content: space-between; align-items: center; }
.ah-title { margin: 10px 0 0; font-size: clamp(34px, 6vw, 72px); }
.ah-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.ah-tile { display: grid; align-content: start; gap: 8px; padding: 26px; min-height: 220px; border-radius: 22px; border: 1px solid var(--line-strong); background: var(--bg-2);
  transition: transform 250ms var(--ease-out), border-color 250ms; animation: k-rise 500ms var(--ease-out) both; }
.ah-tile:nth-child(2) { animation-delay: 80ms; } .ah-tile:nth-child(3) { animation-delay: 160ms; }
.ah-tile:active { transform: scale(0.98); } .ah-tile:hover { border-color: var(--white); }
.ah-tile b { font-family: var(--font-display); font-size: 24px; text-transform: uppercase; }
.ah-tile > span:last-child { color: var(--muted); font-size: 15px; line-height: 1.5; }
.ah-ico { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; background: rgb(var(--ink-rgb) / 0.06); margin-bottom: 8px; }
.ah-ico svg { width: 34px; height: 34px; }
.ah-kiosk { background: linear-gradient(135deg, var(--graphite-2), var(--bg-2)); }
.ah-native { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding-top: 14px; border-top: 1px solid var(--line); }
.ah-native h2 { width: 100%; margin: 0; }

/* kiosk: the camera works unseen (frames keep flowing — not display:none). The beacon sits next to the tablet's camera
   (staff choose the side and place), a soft spot glows on the screen edge right at the camera. */
.k-cam:not(.is-big) { position: fixed; left: 0; bottom: 0; width: 2px; height: 2px; opacity: 0; pointer-events: none; border: 0; box-shadow: none; animation: none; }
.kiosk { --cam-pos: 50%; }
.kiosk[data-cam-place="start"] { --cam-pos: 20%; }
.kiosk[data-cam-place="end"] { --cam-pos: 80%; }
.k-beacon { position: absolute; z-index: 25; display: inline-flex; align-items: center; gap: 10px; max-width: 46vw; padding: 10px 20px 10px 14px;
  border-radius: 999px; border: 1px solid var(--line-strong); background: rgb(var(--bg-rgb, 10 10 11) / 0.82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  color: var(--text); font: 600 16px/1.2 var(--font-body, inherit); cursor: pointer; transition: border-color 300ms, box-shadow 300ms, background 300ms;
  left: var(--cam-pos); top: 12px; translate: -50% 0; }
.k-beacon svg { flex: none; width: 20px; height: 20px; transition: rotate 300ms; }
.k-beacon i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #868a93; }
.k-beacon span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kiosk[data-cam-side="bottom"] .k-beacon { top: auto; bottom: 12px; }
.kiosk[data-cam-side="bottom"] .k-beacon svg { rotate: 180deg; }
.kiosk[data-cam-side="left"] .k-beacon, .kiosk[data-cam-side="right"] .k-beacon { flex-direction: column; max-width: none; max-height: 60vh; padding: 14px 10px; top: var(--cam-pos); translate: 0 -50%; }
.kiosk[data-cam-side="left"] .k-beacon { left: 12px; }
.kiosk[data-cam-side="right"] .k-beacon { left: auto; right: 12px; }
.kiosk[data-cam-side="left"] .k-beacon span, .kiosk[data-cam-side="right"] .k-beacon span { writing-mode: vertical-rl; }
.kiosk[data-cam-side="left"] .k-beacon span { rotate: 180deg; }
.kiosk[data-cam-side="left"] .k-beacon svg { rotate: -90deg; }
.kiosk[data-cam-side="right"] .k-beacon svg { rotate: 90deg; }
.kiosk[data-cam-side="left"] .k-screen { padding-left: calc(var(--k-pad) + 52px); }
.kiosk[data-cam-side="right"] .k-screen { padding-right: calc(var(--k-pad) + 52px); }
.kiosk[data-cam-side="bottom"] .k-screen { padding-bottom: calc(var(--k-pad) + 56px); }
.kiosk[data-cam-side="left"] .k-beacon svg { order: -1; }
.k-beacon[data-state="on"] { border-color: var(--ok); box-shadow: 0 0 0 4px rgb(143 220 176 / 0.18), 0 0 30px rgb(143 220 176 / 0.35); }
.k-beacon[data-state="on"] i { background: var(--ok); box-shadow: 0 0 8px var(--ok); animation: live-pulse 1.6s infinite; }
.k-beacon[data-state="on"] svg { color: var(--ok); animation: k-beacon-nudge 1.8s var(--ease-out) infinite; }
.k-beacon[data-state="paused"] { opacity: 0.45; }
.k-beacon[data-state="denied"], .k-beacon[data-state="unsupported"], .k-beacon[data-state="insecure"], .k-beacon[data-state="off"] { color: var(--silver); }
.k-beacon[data-state="denied"] svg, .k-beacon[data-state="unsupported"] svg, .k-beacon[data-state="insecure"] svg, .k-beacon[data-state="off"] svg { display: none; }
.k-beacon.is-hit { animation: k-beacon-hit 700ms var(--ease-out); }
.k-beacon.is-miss { animation: k-beacon-miss 700ms var(--ease-out); }
@keyframes k-beacon-nudge { 0%, 100% { transform: translateY(2px); } 50% { transform: translateY(-3px); } }
@keyframes k-beacon-hit { 0% { background: rgb(143 220 176 / 0.95); color: #0a0a0b; transform: scale(1.08); } 100% { transform: none; } }
@keyframes k-beacon-miss { 0% { background: rgb(255 122 122 / 0.95); color: #0a0a0b; } 25% { transform: translateX(-6px); } 50% { transform: translateX(6px); } 75% { transform: translateX(-3px); } 100% { transform: none; } }
/* the glow on the screen edge, right at the camera */
.k-cam-spot { position: absolute; z-index: 24; width: 220px; height: 220px; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(closest-side, rgb(143 220 176 / 0.55), rgb(143 220 176 / 0.12) 55%, transparent); left: var(--cam-pos); top: 0; translate: -50% -50%; transition: opacity 500ms; }
.kiosk[data-cam-side="bottom"] .k-cam-spot { top: auto; bottom: 0; translate: -50% 50%; }
.kiosk[data-cam-side="left"] .k-cam-spot { left: 0; top: var(--cam-pos); translate: -50% -50%; }
.kiosk[data-cam-side="right"] .k-cam-spot { left: auto; right: 0; top: var(--cam-pos); translate: 50% -50%; }
.kiosk[data-cam-on] .k-cam-spot { opacity: 1; animation: k-spot 2.6s ease-in-out infinite; }
@keyframes k-spot { 50% { opacity: 0.45; scale: 0.85; } }
.kiosk[data-state="pay"] .k-beacon, .kiosk[data-state="done"] .k-beacon, .kiosk[data-state="email"] .k-beacon,
.kiosk[data-state="pay"] .k-cam-spot, .kiosk[data-state="done"] .k-cam-spot, .kiosk[data-state="email"] .k-cam-spot { visibility: hidden; }
@media (max-width: 760px) { .k-beacon { font-size: 13px; padding: 8px 14px 8px 10px; max-width: 52vw; } }
@media (prefers-reduced-motion: reduce) { .k-beacon svg, .k-beacon i, .k-cam-spot { animation: none !important; } }

/* "Where is the camera?" — a tablet drawing; tap the spot where the camera is */
.cam-pick { border: 0; margin: 0; padding: 0; min-width: 0; }
.cam-pick legend { padding: 0; margin-bottom: 10px; font-weight: 600; }
.cam-pick-body { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.cam-pick-tablet { position: relative; flex: none; width: 200px; aspect-ratio: 16 / 10; margin: 14px; border-radius: 18px; border: 3px solid var(--line-strong); background: rgb(var(--ink-rgb) / 0.04); }
.cam-pick-screen { position: absolute; inset: 14px; display: grid; place-items: center; border-radius: 8px; background: rgb(var(--ink-rgb) / 0.05); color: var(--muted); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; }
.cam-pick-dot { --p: 50%; position: absolute; width: 30px; height: 30px; display: grid; place-items: center; cursor: pointer; translate: -50% -50%; }
.cam-pick-dot[data-place="start"] { --p: 18%; } .cam-pick-dot[data-place="end"] { --p: 82%; }
.cam-pick-dot[data-side="top"] { left: var(--p); top: -1.5px; }
.cam-pick-dot[data-side="bottom"] { left: var(--p); top: calc(100% + 1.5px); }
.cam-pick-dot[data-side="left"] { left: -1.5px; top: var(--p); }
.cam-pick-dot[data-side="right"] { left: calc(100% + 1.5px); top: var(--p); }
.cam-pick-dot input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.cam-pick-dot i { width: 14px; height: 14px; border-radius: 50%; background: var(--bg-2); border: 2px solid var(--muted); transition: transform 200ms, background 200ms, box-shadow 200ms; }
.cam-pick-dot:hover i { border-color: var(--text); transform: scale(1.15); }
.cam-pick-dot input:checked + i { width: 18px; height: 18px; background: var(--ok); border-color: var(--ok); box-shadow: 0 0 0 5px rgb(143 220 176 / 0.25), 0 0 16px rgb(143 220 176 / 0.6); }
.cam-pick-dot input:focus-visible + i { outline: 2px solid var(--text); outline-offset: 3px; }
.cam-pick-help { max-width: 260px; margin: 0; color: var(--muted); }
.k-staff .cam-pick { padding: 16px 18px; border-radius: 16px; border: 1px solid var(--line); }

/* ---------------------------------------------------------------- STR app shell (tablet app screens) */
.app-bar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px clamp(16px, 3vw, 36px);
  background: rgb(var(--bg-rgb, 10 10 11) / 0.86); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); }
.app-back { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 14px; border: 1px solid var(--line-strong); color: var(--text); transition: background 200ms; }
.app-back:active { background: rgb(var(--ink-rgb) / 0.08); }
.app-back svg { width: 22px; height: 22px; }
.app-bar-title { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 1; }
.app-bar-title .logo { font-size: 18px; flex: none; }
.app-bar-title b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 17px; padding-left: 14px; border-left: 1px solid var(--line-strong); }
.app-bar-user { display: flex; align-items: center; gap: 10px; color: var(--muted); min-width: 0; }
.app-bar-user .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.app-avatar { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%; background: var(--text); color: var(--bg); font-weight: 700; }
.app-page { width: min(1180px, 100%); margin: 0 auto; padding: clamp(18px, 3vw, 40px) clamp(16px, 3vw, 36px) 60px; display: grid; gap: 18px; }
.app-page > * { min-width: 0; }
.app-lead { margin: 0; max-width: 70ch; }
.app-body main { animation: none; }
.app-body .panel { border-radius: 22px; }
@media (max-width: 600px) { .app-bar-user .small { display: none; } }

/* app start screen */
.ah .ah-title { margin: 4px 0 6px; font-size: clamp(34px, 6vw, 72px); }
.ah-tile { position: relative; }
.ah-go { position: absolute; right: 22px; top: 22px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-strong);
  font-style: normal; color: var(--muted); transition: transform 250ms var(--ease-out), color 250ms, border-color 250ms; }
.ah-tile:hover .ah-go, .ah-tile:active .ah-go { transform: translateX(4px); color: var(--text); border-color: var(--text); }
.ah-native { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.ah-native h2, .ah-native [data-app-version] { grid-column: 1 / -1; }
.ah-set-form { display: contents; }
.ah-set { display: grid; gap: 4px; text-align: left; padding: 18px 20px; border-radius: 18px; border: 1px solid var(--line); background: var(--bg-2); color: var(--text); cursor: pointer; font: inherit; transition: border-color 200ms; }
.ah-set:hover { border-color: var(--line-strong); }
.ah-set b { font-size: 16px; } .ah-set span { color: var(--muted); font-size: 14px; overflow: hidden; text-overflow: ellipsis; }

/* kiosks: each kiosk card has name, store and the camera picker */
.km-edit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.km-edit .cam-pick, .km-edit button { grid-column: 1 / -1; }
.km-edit button { justify-self: start; }

/* website: download the STR app */
.dl { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center;
  padding-top: calc(var(--header-h, 72px) + clamp(30px, 6vw, 80px)); padding-bottom: clamp(50px, 8vw, 110px); }
.dl-title { margin: 8px 0 14px; font-size: clamp(40px, 7vw, 96px); }
.dl-lead { font-size: clamp(17px, 1.6vw, 20px); color: var(--silver); max-width: 52ch; margin: 0 0 22px; }
.dl-points { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 10px; }
.dl-points li { display: grid; gap: 2px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg-2); }
.dl-points span { color: var(--muted); font-size: 15px; }
.dl-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 12px; }
.dl-side { display: grid; gap: 20px; justify-items: center; }
.dl-qr { display: grid; gap: 10px; justify-items: center; padding: 22px; border-radius: 24px; background: #fff; color: #0a0a0b; }
.dl-qr svg { width: min(260px, 60vw); height: auto; }
.dl-steps { margin: 0; padding-left: 22px; display: grid; gap: 8px; color: var(--silver); max-width: 34ch; }
@media (max-width: 860px) { .dl { grid-template-columns: 1fr; } }
.ah-native { align-items: stretch; } .ah-set { height: 100%; align-content: start; }
.ah .ah-tiles { margin-top: 10px; }
/* camera at the top corner: the beacon goes just under the header row (logo / languages stay free) */
.kiosk[data-cam-side="top"]:not([data-cam-place="center"]) .k-beacon { top: 84px; }
.app-error-detail { max-width: 70ch; max-height: 240px; overflow: auto; white-space: pre-wrap; font-size: 12px; background: var(--bg-2); padding: 10px; border-radius: 8px; }

/* ---------------------------------------------------------------- kiosk: how to pay (tap card on the tablet / phone QR) */
.k-choose { align-content: center; justify-items: center; gap: 22px; text-align: center; }
.k-choose .k-h2 { margin: 0; }
.k-choose-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 340px)); gap: 20px; width: 100%; justify-content: center; }
.k-choice { display: grid; justify-items: center; gap: 10px; padding: 34px 26px 28px; border-radius: 28px; border: 1px solid var(--line-strong); background: var(--bg-2);
  color: var(--text); font: inherit; cursor: pointer; transition: transform 250ms var(--ease-out), border-color 250ms, box-shadow 250ms; animation: k-rise 600ms var(--ease-out) both; }
.k-choice:nth-child(2) { animation-delay: 90ms; }
.k-choice:active { transform: scale(0.97); }
.k-choice:hover { border-color: var(--text); }
.k-choice b { font-size: 22px; }
.k-choice small { color: var(--muted); font-size: 15px; line-height: 1.4; max-width: 26ch; }
.k-choice-tap { border-color: rgb(143 220 176 / 0.6); box-shadow: 0 0 0 4px rgb(143 220 176 / 0.12), 0 20px 60px rgb(0 0 0 / 0.35); }
.k-choice-art { position: relative; display: grid; place-items: center; width: 150px; height: 110px; margin-bottom: 6px; }
.k-choice-art > svg { width: 84px; height: 84px; }
.k-card-art { position: absolute; width: 112px; height: 72px; border-radius: 10px; background: linear-gradient(135deg, #f4f4f2, #b9bcc3); box-shadow: 0 12px 30px rgb(0 0 0 / 0.45);
  animation: k-card-tap 2.4s var(--ease-out) infinite; }
.k-card-art::before { content: ""; position: absolute; left: 14px; top: 22px; width: 22px; height: 17px; border-radius: 4px; background: #d4b26a; }
.k-waves { position: absolute; right: -6px; top: 6px; color: var(--ok); }
.k-waves svg { width: 46px; height: 46px; animation: k-waves 2.4s ease-out infinite; }
@keyframes k-card-tap { 0%, 100% { transform: translate(-14px, 10px) rotate(-8deg); } 45%, 60% { transform: translate(6px, -4px) rotate(-2deg); } }
@keyframes k-waves { 0%, 35% { opacity: 0; transform: scale(0.7); } 55% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.15); } }
.k-tap { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: center; gap: clamp(20px, 5vw, 70px); }
.k-tap-art { position: relative; display: grid; place-items: center; height: min(52vh, 420px); border-radius: 40px; border: 1px solid var(--line);
  background: radial-gradient(circle at 50% 45%, rgb(143 220 176 / 0.16), transparent 62%), var(--bg-2); }
.k-tap-art .k-card-art { width: 220px; height: 140px; border-radius: 18px; }
.k-tap-art .k-card-art::before { left: 26px; top: 44px; width: 42px; height: 32px; }
.k-tap-art .k-waves { right: 22%; top: 18%; } .k-tap-art .k-waves svg { width: 80px; height: 80px; }
.k-tap-copy { display: grid; gap: 18px; align-content: center; }
.k-tap-copy .k-h2 { margin: 0; }
.kiosk.is-tapping .k-tap-art { box-shadow: 0 0 0 6px rgb(143 220 176 / 0.15), 0 0 80px rgb(143 220 176 / 0.25); }
@media (max-width: 760px) { .k-choose-grid, .k-tap { grid-template-columns: 1fr; } .k-tap-art { height: 220px; } }

/* no connection */
.k-offline { position: absolute; inset: 0; z-index: 80; display: grid; place-content: center; justify-items: center; gap: 12px; text-align: center;
  background: rgb(var(--bg-rgb, 10 10 11) / 0.88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: k-in 400ms var(--ease-out); }
.k-offline[hidden] { display: none; }
.k-offline-ico { display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%; border: 1px solid var(--line-strong); color: var(--warn); animation: k-breathe 2.4s ease-in-out infinite; }
.k-offline-ico svg { width: 44px; height: 44px; }
.k-offline b { font-family: var(--font-display); font-size: clamp(28px, 4vw, 46px); text-transform: uppercase; }
.k-offline p { margin: 0; color: var(--silver); font-size: 18px; }
.k-offline-dots { display: flex; gap: 8px; } .k-offline-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--text); animation: live-pulse 1.2s infinite; }
.k-offline-dots i:nth-child(2) { animation-delay: 0.2s; } .k-offline-dots i:nth-child(3) { animation-delay: 0.4s; }
@keyframes k-breathe { 50% { transform: scale(1.06); box-shadow: 0 0 40px rgb(232 201 135 / 0.25); } }

/* screensaver */
.k-saver { position: absolute; inset: 0; z-index: 70; overflow: hidden; background: #000; opacity: 0; transition: opacity 600ms; cursor: pointer; }
.k-saver.is-on { opacity: 1; }
.k-saver img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.12); transition: opacity 1.6s ease, transform 9s linear; filter: brightness(0.62); }
.k-saver img.is-on { opacity: 1; transform: scale(1); }
/* over the video: where to scan (top), the next collection with its countdown (middle), the shop address (bottom) */
.k-saver::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(rgb(0 0 0 / 0.55), transparent 22%, transparent 62%, rgb(0 0 0 / 0.7)), radial-gradient(60% 50% at 50% 50%, rgb(0 0 0 / 0.35), transparent); }
.k-saver-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.k-saver-top, .k-saver-center, .k-saver-bottom { position: absolute; left: 0; right: 0; z-index: 1; display: flex; justify-content: center; align-items: center; color: #fff; text-align: center; }
.k-saver-top { top: 0; gap: 12px; flex-wrap: wrap; padding: 28px 24px; }
.k-saver-chip { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: 999px; background: rgb(255 255 255 / 0.12); border: 1px solid rgb(255 255 255 / 0.3);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-weight: 600; font-size: 17px; animation: k-breathe 2.6s ease-in-out infinite; }
.k-saver-chip:nth-child(2) { animation-delay: 1.3s; }
.k-saver-chip .k-ico { width: 22px; height: 22px; }
.k-saver-chip-text { width: 100%; font-size: 15px; opacity: 0.8; }
.k-saver-center { top: 50%; translate: 0 -50%; flex-direction: column; gap: 14px; padding: 0 24px; }
.k-saver-logo { font-size: 26px; opacity: 0.85; }
.k-saver-eyebrow { margin: 6px 0 0; font-size: 15px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ok); }
.k-saver-title { font-size: clamp(42px, 7vw, 104px); line-height: 0.95; overflow-wrap: anywhere; animation: k-rise 900ms var(--ease-out) both; }
.k-saver-timer { --timer-scale: 1.25; color: #fff; }
.k-saver-bottom { bottom: 0; flex-direction: column; gap: 4px; padding: 26px 24px 30px; }
.k-saver-bottom span { font-size: 13px; letter-spacing: 0.24em; text-transform: uppercase; opacity: 0.7; }
.k-saver-bottom b { font-size: clamp(20px, 2.6vw, 30px); letter-spacing: 0.04em; }
@media (prefers-reduced-motion: reduce) { .k-saver img { transition: opacity 1s; transform: none !important; } .k-card-art, .k-waves svg, .k-offline-ico, .k-saver-chip { animation: none !important; } }
.kiosk[data-state="choose"] .k-beacon, .kiosk[data-state="tap"] .k-beacon, .kiosk[data-state="choose"] .k-cam-spot, .kiosk[data-state="tap"] .k-cam-spot,
.kiosk.is-offline .k-beacon, .kiosk.is-offline .k-cam-spot { visibility: hidden; }

/* Work: every kiosk at a glance; a kiosk with an open request glows */
.wa-overview { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.wa-overview[hidden] { display: none; }
.wa-tile { display: grid; gap: 6px; text-align: left; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--bg-2); color: var(--text); font: inherit; cursor: pointer;
  transition: border-color 250ms, transform 200ms; }
.wa-tile:active { transform: scale(0.97); }
.wa-tile-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .wa-tile-top b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-tile-state { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.wa-tile-bag { font-size: 14px; font-weight: 600; }
.wa-tile-ask { display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--danger); color: #0a0a0b; font-style: normal; font-size: 12px; font-weight: 700; }
.wa-tile.has-ask, .wa-kiosk.has-ask { border-color: var(--danger); animation: wa-ask 1.6s ease-in-out infinite; }
.wa-tile.wa-s-alarm { border-color: var(--danger); background: rgb(255 122 122 / 0.08); }
.wa-tile.is-offline { opacity: 0.6; }
.wa-kiosk.is-flash { animation: wa-flash 1s var(--ease-out); }
@keyframes wa-ask { 50% { box-shadow: 0 0 0 4px rgb(255 122 122 / 0.2), 0 0 24px rgb(255 122 122 / 0.25); } }
@keyframes wa-flash { 0% { box-shadow: 0 0 0 6px rgb(143 220 176 / 0.5); } 100% { box-shadow: none; } }

/* app start screen: update card */
.ah-update { display: flex; align-items: center; gap: 16px; width: 100%; text-align: left; padding: 16px 20px; border-radius: 18px; border: 1px solid var(--ok);
  background: rgb(143 220 176 / 0.08); color: var(--text); font: inherit; cursor: pointer; animation: k-rise 600ms var(--ease-out) both; }
.ah-update[hidden] { display: none; }
.ah-update b { display: block; font-size: 17px; } .ah-update small { color: var(--muted); font-size: 14px; }
.ah-update-ico { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 50%; background: var(--ok); color: #0a0a0b; }
.ah-update-ico svg { width: 24px; height: 24px; }
.ah-update.is-busy .ah-update-ico svg { animation: k-waves-down 1.2s ease-in-out infinite; }
@keyframes k-waves-down { 50% { transform: translateY(3px); } }
/* app tiles: gentle lift */
.ah-tile { transition: transform 300ms var(--ease-out), border-color 300ms, box-shadow 300ms; }
.ah-tile:hover { box-shadow: 0 24px 60px rgb(0 0 0 / 0.35); transform: translateY(-3px); }

/* app: tags */
.tags-form .seg { margin: 4px 0 8px; }
.tags-help p { margin: 6px 0 0; }
.tags-title { margin: 0 0 6px; font-size: 28px; }
.ah-denied { display: grid; gap: 10px; justify-items: start; }
.ah-denied h2 { margin: 0; }
.ah-signin { border-color: var(--text); }
.stat-link { color: inherit; text-decoration: none; transition: border-color 200ms; } .stat-link:hover { border-color: var(--line-strong); }

/* kiosk: call staff — a bell next to the languages; it rings and turns green once staff are called */
.k-bell { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 20px 0 14px; border-radius: 999px; border: 1px solid var(--line-strong);
  background: rgb(var(--ink-rgb) / 0.05); color: var(--text); font: 600 15px/1 var(--font-body, inherit); cursor: pointer; transition: background 250ms, border-color 250ms, color 250ms; }
.k-bell:active { transform: scale(0.96); }
.k-bell-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgb(var(--ink-rgb) / 0.08); }
.k-bell-ico .k-ico { width: 20px; height: 20px; transform-origin: 50% 15%; }
.k-bell.is-sent { border-color: var(--ok); background: rgb(143 220 176 / 0.12); color: var(--ok); }
.k-bell.is-sent .k-bell-ico { background: var(--ok); color: #0a0a0b; }
.k-bell.is-sent .k-bell-ico .k-ico { animation: k-ring 1.2s ease-in-out 3; }
@keyframes k-ring { 0%, 100% { transform: rotate(0); } 10%, 30%, 50% { transform: rotate(16deg); } 20%, 40% { transform: rotate(-16deg); } 60% { transform: rotate(0); } }
@media (max-width: 760px) { .k-bell-label { display: none; } .k-bell { padding: 0 8px; } }
@media (prefers-reduced-motion: reduce) { .k-bell.is-sent .k-bell-ico .k-ico { animation: none; } }

/* kiosk background — chosen in Admin → Design → Self-checkout background */
.k-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: var(--bg); }
.k-bg i { display: none; }
.k-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: var(--k-dim, 0.22); filter: var(--k-photo-filter, grayscale(1)); }
[data-bg="photo"] .k-bg::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--bg) 20%, rgb(var(--bg-rgb) / 0.55) 60%, rgb(var(--bg-rgb) / 0.15)), linear-gradient(0deg, var(--bg), transparent 45%); }
[data-bg="gradient"] .k-bg { background: radial-gradient(110% 90% at 100% 0%, var(--k-c2), transparent 62%), radial-gradient(90% 80% at 0% 100%, color-mix(in srgb, var(--k-c2) 45%, transparent), transparent 60%), var(--k-c1); }
[data-bg="solid"] .k-bg { background: var(--k-c1); }
[data-bg="aurora"] .k-bg { background: var(--k-c1); }
[data-bg="aurora"] .k-bg i { display: block; position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; filter: blur(90px); opacity: 0.55; background: var(--k-c2); }
[data-bg="aurora"] .k-bg i:nth-child(1), [data-bg="aurora"] .k-bg i:first-child { left: -20vmax; top: -30vmax; animation: k-aurora-a 26s ease-in-out infinite alternate; }
[data-bg="aurora"] .k-bg i:nth-child(2) { right: -25vmax; top: 10vmax; background: color-mix(in srgb, var(--k-c2) 60%, #7a5cff); opacity: 0.35; animation: k-aurora-b 32s ease-in-out infinite alternate; }
[data-bg="aurora"] .k-bg i:nth-child(3) { left: 20vmax; bottom: -40vmax; background: color-mix(in srgb, var(--k-c2) 55%, #2fd3c5); opacity: 0.3; animation: k-aurora-a 38s ease-in-out infinite alternate-reverse; }
@keyframes k-aurora-a { to { transform: translate(18vmax, 12vmax) scale(1.15); } }
@keyframes k-aurora-b { to { transform: translate(-16vmax, -10vmax) scale(0.9); } }
@media (prefers-reduced-motion: reduce) { [data-bg="aurora"] .k-bg i { animation: none; } }
.kiosk { background: var(--bg); }

/* admin: self-checkout background picker + preview */
.kbg-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.kbg-pick { position: relative; display: grid; gap: 8px; cursor: pointer; }
.kbg-pick input { position: absolute; opacity: 0; }
.kbg-pick .kbg-swatch { height: 86px; border-radius: 12px; border: 2px solid var(--line); overflow: hidden; position: relative; }
.kbg-pick input:checked + .kbg-swatch { border-color: var(--text); box-shadow: 0 0 0 3px rgb(var(--ink-rgb) / 0.15); }
.kbg-photos { display: flex; flex-wrap: wrap; gap: 8px; }
.kbg-photo { position: relative; cursor: pointer; }
.kbg-photo input { position: absolute; opacity: 0; }
.kbg-photo img { width: 96px; height: 64px; object-fit: cover; border-radius: 8px; border: 2px solid var(--line); filter: grayscale(0.3); }
.kbg-photo input:checked + img { border-color: var(--text); filter: none; }
.kbg-preview { position: relative; height: 260px; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: #0a0a0b; color: #ececee; margin-top: 6px; }
.kbg-preview .k-bg { --bg: #0a0a0b; --bg-rgb: 10 10 11; }
.kbg-preview .kbg-copy { position: absolute; left: 24px; bottom: 22px; z-index: 1; display: grid; gap: 6px; }
.kbg-preview .kbg-copy b { font-family: var(--font-display, inherit); font-size: 30px; text-transform: uppercase; line-height: 1; }
.kbg-preview .kbg-copy span { font-size: 13px; opacity: 0.7; }
.kbg-preview[data-bg="aurora"] .k-bg i { filter: blur(40px); width: 260px; height: 260px; }

/* pairing screen: back to the app's main menu */
.k-back-btn { text-decoration: none; }
.k-back-btn .k-ico { width: 20px; height: 20px; }
.k-pairing .k-top .logo { font-size: 18px; opacity: 0.7; }
/* long words (Latvian “Pašapkalpošanās”) wrap inside the app tiles */
.ah-tile b { overflow-wrap: anywhere; hyphens: auto; }

/* app → Kiosks: two ways to add a kiosk, then the kiosks of each store */
.km { display: grid; gap: 18px; }
.km-new { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 16px; align-items: start; }
.km-card { position: relative; display: grid; gap: 12px; padding-top: 30px; }
.km-card h2 { margin: 0; font-size: 20px; padding-right: 50px; }
.km-step { position: absolute; top: 22px; right: 22px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--text); color: var(--bg); font-weight: 800; font-size: 17px; }
.km-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 14px; }
.km-kiosk { display: grid; gap: 12px; }
.km-kiosk-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.km-kiosk-head b { font-size: 17px; }
.km .admin-group-title { margin: 14px 0 0; }
.store-delete { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
/* admin: self-checkout screensaver video */
.kvid { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 18px; align-items: start; }
.kvid-preview { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; border: 1px solid var(--line); background: #000; }
.kvid-empty { display: grid; place-items: center; padding: 14px; text-align: center; }
.kvid-forms { display: grid; gap: 10px; }
@media (max-width: 700px) { .kvid { grid-template-columns: 1fr; } }

/* kiosk start screen: video (or photos) full screen; the next collection with its countdown in the middle;
   where to hold the tag and the shop address at the bottom. The header (logo, languages, bell) stays on top. */
.k-welcome { grid-template-columns: 1fr; grid-template-rows: 1fr auto auto; justify-items: center; align-items: center; text-align: center; gap: 18px;
  padding-bottom: clamp(22px, 3vw, 40px); overflow: visible; }
.k-welcome-media { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: #000; pointer-events: none; }
.k-welcome-media::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(rgb(0 0 0 / 0.6), transparent 26%, transparent 55%, rgb(0 0 0 / 0.78)), radial-gradient(70% 55% at 50% 48%, rgb(0 0 0 / 0.3), transparent); }
.k-welcome-video, .k-welcome-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.k-welcome-media img { opacity: 0; transform: scale(1.1); transition: opacity 1.6s ease, transform 9s linear; filter: brightness(0.7); }
.k-welcome-media img.is-on { opacity: 1; transform: scale(1); }
.k-welcome > :not(.k-welcome-media) { position: relative; z-index: 1; color: #fff; }
.k-welcome-center { display: grid; justify-items: center; gap: 14px; align-self: center; }
.k-welcome-eyebrow { margin: 0; font-size: 15px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--ok); }
.k-welcome-title { margin: 0; font-size: clamp(48px, 8vw, 120px); line-height: 0.92; overflow-wrap: anywhere; animation: k-rise 900ms var(--ease-out) both; }
.k-welcome-timer { --timer-scale: 1.3; color: #fff; }
.k-welcome-hint { display: grid; justify-items: center; gap: 10px; }
.k-welcome-chip { display: inline-flex; align-items: center; gap: 14px; padding: 16px 28px; border-radius: 999px; background: rgb(255 255 255 / 0.12);
  border: 1px solid rgb(143 220 176 / 0.6); box-shadow: 0 0 0 4px rgb(143 220 176 / 0.12), 0 0 40px rgb(143 220 176 / 0.25);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: clamp(18px, 2vw, 24px); animation: k-breathe 2.6s ease-in-out infinite; }
.k-welcome-chip .k-ico { width: 28px; height: 28px; color: var(--ok); }
.k-welcome-hint-text { font-size: 16px; opacity: 0.8; }
.k-welcome-site { display: grid; gap: 2px; }
.k-welcome-site span { font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; opacity: 0.65; }
.k-welcome-site b { font-size: clamp(18px, 2.2vw, 26px); letter-spacing: 0.04em; }
.kiosk[data-state="welcome"] .k-top { color: #fff; }
@media (prefers-reduced-motion: reduce) { .k-welcome-chip { animation: none; } .k-welcome-media img { transition: opacity 1s; transform: none !important; } }
.kvid-sub { margin: 20px 0 4px; font-size: 16px; }
.kvid-photos { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; margin-top: 10px; }
.kvid-photo { margin: 0; display: grid; gap: 4px; justify-items: center; }
.kvid-photo img { width: 140px; height: 90px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }
.kvid-add { width: 200px; }

/* ================================================================ phone: more motion (respects "Animations" off and reduced motion) */
@media (max-width: 900px) {
  html:not([data-motion="off"]) .product-card[data-reveal] .card-media img { transform: scale(1.12); transition: transform 1.4s var(--ease-out); }
  html:not([data-motion="off"]) .product-card[data-reveal].is-in .card-media img { transform: scale(1); }
  html:not([data-motion="off"]) .product-card[data-reveal] .card-info { opacity: 0; transform: translateY(10px); transition: opacity 700ms var(--ease-out) 250ms, transform 700ms var(--ease-out) 250ms; }
  html:not([data-motion="off"]) .product-card[data-reveal].is-in .card-info { opacity: 1; transform: none; }
  html:not([data-motion="off"]) .site-header .logo { animation: m-logo 900ms var(--ease-out) both; }
  html:not([data-motion="off"]) .site-header .icon-btn { animation: m-drop 700ms var(--ease-out) both; }
  html:not([data-motion="off"]) .site-header .header-actions .icon-btn:nth-child(3) { animation-delay: 80ms; }
  html:not([data-motion="off"]) .site-header .header-actions .icon-btn:nth-child(4) { animation-delay: 160ms; }
  html:not([data-motion="off"]) .newsletter-title { background-size: 200% 100%; animation: m-shine 6s linear infinite; }
}
/* touch: everything you tap answers with a small press */
@media (hover: none) {
  .btn, .icon-btn, .chip, .seg label, .product-card, .size-btn, .wish-btn, .quick-btn, .footer-grid a, .drawer-nav a {
    transition: transform 180ms var(--ease-out), opacity 300ms, background 200ms, color 200ms, border-color 200ms; -webkit-tap-highlight-color: transparent; }
  .btn:active, .icon-btn:active, .chip:active, .seg label:active, .size-btn:active, .wish-btn:active, .quick-btn:active { transform: scale(0.94); }
  .product-card:active { transform: scale(0.98); }
  .footer-grid a:active, .drawer-nav a:active { opacity: 0.6; }
}
@keyframes m-logo { from { opacity: 0; letter-spacing: 0.7em; } }
@keyframes m-drop { from { opacity: 0; transform: translateY(-10px); } }
@keyframes m-shine { 0% { background-position: 0% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  .product-card .card-media img, .product-card .card-info, .site-header .logo, .site-header .icon-btn, .newsletter-title { animation: none !important; transition: none !important; transform: none !important; opacity: 1 !important; }
}
.k-welcome-text { margin: 4px 0 0; max-width: 34ch; font-size: clamp(17px, 2vw, 24px); line-height: 1.4; opacity: 0.9; animation: k-rise 900ms var(--ease-out) 200ms both; }
.kvid-texts { margin-top: 6px; }
.kvid-langs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 12px; }
.kvid-lang { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin: 0; display: grid; gap: 8px; }
.kvid-lang legend { padding: 0 6px; font-weight: 600; }

/* kiosk start screen: more motion */
.k-split-ch { display: inline-block; animation: k-letter 900ms var(--ease-out) both; animation-delay: calc(var(--i) * 45ms + 150ms); }
@keyframes k-letter { from { opacity: 0; transform: translateY(0.45em) rotate(6deg); filter: blur(6px); } }
.k-welcome-video { animation: k-kenburns 40s ease-in-out infinite alternate; }
@keyframes k-kenburns { from { transform: scale(1); } to { transform: scale(1.12) translate(-1.5%, -1%); } }
.k-welcome-glow { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; mix-blend-mode: screen; }
.k-welcome-glow i { position: absolute; width: 40vmax; height: 40vmax; border-radius: 50%; filter: blur(70px); opacity: 0.22; background: var(--k-c2, #2c4a3d); }
.k-welcome-glow i:nth-child(1) { left: -10vmax; top: 20%; animation: k-float-a 22s ease-in-out infinite alternate; }
.k-welcome-glow i:nth-child(2) { right: -12vmax; top: -10vmax; background: color-mix(in srgb, var(--k-c2, #2c4a3d) 50%, #7a5cff); animation: k-float-b 28s ease-in-out infinite alternate; }
.k-welcome-glow i:nth-child(3) { left: 30%; bottom: -20vmax; background: color-mix(in srgb, var(--k-c2, #2c4a3d) 50%, #2fd3c5); animation: k-float-a 34s ease-in-out infinite alternate-reverse; }
@keyframes k-float-a { to { transform: translate(14vmax, -8vmax) scale(1.2); } }
@keyframes k-float-b { to { transform: translate(-12vmax, 10vmax) scale(0.85); } }
.k-welcome-timer .timer-unit { animation: k-rise 800ms var(--ease-out) both, k-timer-glow 3.2s ease-in-out 1s infinite; }
.k-welcome-timer .timer-unit:nth-child(2) { animation-delay: 90ms, 1.4s; } .k-welcome-timer .timer-unit:nth-child(3) { animation-delay: 180ms, 1.8s; } .k-welcome-timer .timer-unit:nth-child(4) { animation-delay: 270ms, 2.2s; }
@keyframes k-timer-glow { 50% { box-shadow: 0 0 0 1px rgb(143 220 176 / 0.35), 0 0 30px rgb(143 220 176 / 0.25); } }
.k-welcome-site { animation: k-rise 900ms var(--ease-out) 500ms both; }
.k-welcome-eyebrow { animation: k-rise 700ms var(--ease-out) both; }
@media (prefers-reduced-motion: reduce) { .k-split-ch, .k-welcome-video, .k-welcome-glow i, .k-welcome-timer .timer-unit { animation: none !important; } }

/* kiosk staff menu: sound picker */
.k-sound-pick { border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; margin: 0; display: grid; gap: 12px; }
.k-sound-pick legend { padding: 0 6px; font-weight: 600; }
.k-sound-list { display: flex; flex-wrap: wrap; gap: 8px; }
.k-sound-list label { position: relative; cursor: pointer; }
.k-sound-list input { position: absolute; opacity: 0; }
.k-sound-list span { display: inline-block; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line-strong); font-size: 15px; transition: background 200ms, color 200ms; }
.k-sound-list input:checked + span { background: var(--text); color: var(--bg); border-color: var(--text); }
.k-sound-vol { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--muted); }
.k-sound-vol input { flex: 1; }
.kbg-preview .kbg-copy small { font-size: 13px; opacity: 0.8; max-width: 40ch; }