/* Journey storefront. Mobile-first (from 360px), colours and metrics from packages/design-tokens/journey.css. */
:root {
  --canvas: var(--journey-color-bg-canvas);
  --surface: var(--journey-color-bg-surface);
  --subtle: var(--journey-color-bg-subtle);
  --ink: var(--journey-color-text-primary);
  --muted: var(--journey-color-text-secondary);
  --accent: var(--journey-color-brand-accent);
  --line: var(--journey-color-border-subtle);
  --control: var(--journey-color-border-control);
  --sale: var(--journey-color-status-error-fg);
  --gutter: 16px;
  --max: 1440px;
  /* Shape of the reference the owner works from (12 STOREEZ, 2026-11-10): controls, tags and photos are near-square. */
  --shape: var(--journey-radius-sm);
  /* Montserrat (self-hosted, Cyrillic and ₽) from the token; the same family on every device, as in the Figma Web styles. */
  --font: var(--journey-font-family-sans);
  --display: var(--journey-font-family-sans);
  --on-action: var(--journey-color-text-on-action);
  /* Photo: the shop shoots 2:3, and every product photo is shown whole (owner, 2026-11-10; 3:4 cut heads and hems). */
  --photo-ratio: 2 / 3;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 120px; }
body { margin: 0; background: var(--canvas); color: var(--ink); font: 16px/1.5 var(--font); min-height: 100vh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; }
main { flex: 1; width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter) 64px; outline: none; }
a { color: inherit; }
/* The hidden attribute always wins: a component's own display (grid panels, flex rows) must not show a hidden block. */
[hidden] { display: none !important; }
img { max-width: 100%; height: auto; display: block; }
/* <picture> only chooses the file (format, width); the <img> inside is laid out as if it stood alone. */
picture { display: contents; }
/* Type: Montserrat; headings in sentence case, regular weight, calm sizes (the owner's reference, 2026-11-10). Capitals with
   tracking are for small labels only (.eyebrow, tags). */
h1, h2, h3 { font-family: var(--display); font-weight: 400; letter-spacing: 0.01em; line-height: 1.25; margin: 0; }
h1 { font-size: clamp(22px, 3.4vw, 30px); }
h2 { font-size: 22px; }
p { margin: 0; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.lead { font-size: 18px; color: var(--muted); max-width: 36em; }
.eyebrow { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); font-weight: 600; margin-bottom: 8px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 8px; top: -60px; background: var(--ink); color: var(--on-action); padding: 10px 14px; border-radius: 10px; z-index: 30; }
.skip-link:focus { top: 8px; }
:focus-visible { outline: var(--journey-stroke-focus) solid var(--journey-color-focus-ring); outline-offset: 2px; }

.demo-banner { margin: 0; background: var(--ink); color: var(--canvas); font-size: 12px; text-align: center; padding: 6px var(--gutter); letter-spacing: 0.02em; }

/* Cookie banner (docs/web-storefront.md «Cookie и Яндекс.Метрика»): in the normal flow above the header, never over the
   checkout or buy buttons. Shown only while <html data-consent="unset"> (set by consent.js before the first paint), so a
   stored choice never makes the page jump; without JavaScript it stays hidden and no analytics runs. */
/* Cookie banner: at the bottom of the screen, above the phone tab bar; cookies.js measures it into --cookie-height so the
   page keeps that much room below. */
.cookie-banner { display: none; position: fixed; z-index: 26; left: 0; right: 0; bottom: var(--tabbar-height, 0px); background: var(--surface); border-top: var(--journey-stroke-default) solid var(--line); box-shadow: var(--journey-effect-floating); outline: none; }
html[data-consent="unset"] body { padding-bottom: var(--cookie-height, 0px); }
html[data-consent="unset"] .cookie-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--journey-spacing-12) var(--journey-spacing-24); padding: var(--journey-spacing-12) var(--gutter); }
.cookie-banner:focus-visible { outline: var(--journey-stroke-focus) solid var(--journey-color-focus-ring); outline-offset: calc(-1 * var(--journey-stroke-focus)); }
.cookie-text { flex: 1 1 320px; max-width: 46em; font-size: var(--journey-type-footnote-size); line-height: var(--journey-type-footnote-line); color: var(--muted); }
.cookie-text a { color: var(--ink); }
.cookie-actions { display: flex; flex-wrap: wrap; gap: var(--journey-spacing-8); }
.cookie-actions .button { flex: 1 0 auto; min-height: var(--journey-size-target-ios); padding: 0 var(--journey-spacing-16); font-size: var(--journey-type-subheadline-size); }
/* A button that reads as a footer link («Настройки cookie»): the same colour, size and hover as the links around it. */
.link-button { background: none; border: 0; padding: 0; font: inherit; color: var(--muted); cursor: pointer; text-align: left; min-height: var(--journey-size-target-ios); }
.link-button:hover { color: var(--ink); }
.footer-cookie { display: flex; flex-wrap: wrap; align-items: center; gap: var(--journey-spacing-8) var(--journey-spacing-24); }
/* PaletteSwitch: two-option segmented control, the chosen option filled like a selected chip. 44 px targets. */
.palette-switch { display: inline-flex; align-items: center; gap: var(--journey-spacing-4); }
.palette-switch[hidden] { display: none; }
.palette-switch-label { color: var(--muted); margin-right: var(--journey-spacing-8); }
.palette-option { min-height: var(--journey-size-target-ios); padding: 0 var(--journey-spacing-16); border: var(--journey-stroke-default) solid var(--control); border-radius: var(--shape); background: transparent; color: var(--ink); font: inherit; cursor: pointer; }
.palette-option[aria-pressed="true"] { background: var(--journey-color-action-primary); border-color: var(--journey-color-action-primary); color: var(--on-action); }

/* Header */
/* Header: the page's own background with a hairline under it; on the home page it lies transparent over the campaign shot. */
.site-header { position: sticky; top: 0; z-index: 20; background: var(--canvas); border-bottom: 1px solid var(--line); transition: background-color .2s, color .2s, border-color .2s; }
.bar { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); height: 56px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--journey-spacing-12); position: relative; }
/* Menu (phones and tablets, as the old site's burger): search, «Главная», «Каталог» with the categories, «Лукбук», «Избранное»,
   the cabinet and the language. A <details>: opens without scripts; app.js closes it on Esc and on a tap outside. */
.menu { justify-self: start; }
.menu > summary { list-style: none; width: var(--journey-size-target-ios); height: var(--journey-size-target-ios); display: grid; place-items: center; border-radius: var(--journey-radius-full); cursor: pointer; margin-left: calc(-1 * var(--journey-spacing-8)); }
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary svg { width: var(--journey-size-icon-large); height: var(--journey-size-icon-large); }
.menu-panel { position: absolute; left: 0; right: 0; top: 100%; z-index: 22; max-height: calc(100dvh - 120px); overflow: auto; display: grid; gap: var(--journey-spacing-8); padding: var(--journey-spacing-16) var(--gutter) var(--journey-spacing-24); background: var(--journey-color-bg-surface); color: var(--journey-color-text-primary); border-bottom: var(--journey-stroke-default) solid var(--journey-color-border-subtle); box-shadow: var(--journey-effect-floating); --ink: var(--journey-color-text-primary); --muted: var(--journey-color-text-secondary); }
.menu-search { display: flex; align-items: center; gap: var(--journey-spacing-4); border: var(--journey-stroke-default) solid var(--journey-color-border-control); border-radius: var(--shape); padding-left: var(--journey-spacing-16); }
.menu-search input { flex: 1; min-width: 0; height: var(--journey-size-target-ios); border: 0; background: transparent; color: inherit; font: inherit; outline: none; }
.menu-search:focus-within { outline: var(--journey-stroke-focus) solid var(--journey-color-focus-ring); outline-offset: 2px; }
.menu-links { display: grid; }
.menu-links a { display: flex; align-items: center; justify-content: space-between; min-height: var(--journey-size-control); text-decoration: none; color: var(--journey-color-text-primary); font: var(--journey-type-headline); border-bottom: var(--journey-stroke-default) solid var(--journey-color-border-subtle); }
.menu-sub { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--journey-spacing-16); padding: var(--journey-spacing-4) 0 var(--journey-spacing-8) var(--journey-spacing-16); border-bottom: var(--journey-stroke-default) solid var(--journey-color-border-subtle); }
.menu-sub a { min-height: var(--journey-size-target-ios); font: var(--journey-type-subheadline); color: var(--journey-color-text-secondary); border-bottom: 0; }
.menu-sub a[aria-current] { color: var(--journey-color-text-primary); font-weight: 600; }
/* The information pages live in the menu on phones, where the footer has no link columns. */
.menu-info { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--journey-spacing-16); padding-top: var(--journey-spacing-8); }
.menu-info a { min-height: var(--journey-size-target-ios); font: var(--journey-type-footnote); color: var(--journey-color-text-secondary); border-bottom: 0; }
.menu-lang { padding-top: var(--journey-spacing-8); font-size: var(--journey-type-subheadline-size); }
/* Logo: the vector wordmark from the library (.journey-wordmark in journey.css), in the text colour. */
.wordmark { display: inline-flex; align-items: center; min-height: var(--journey-size-target-ios); color: var(--ink); text-decoration: none; grid-column: 2; }
.wordmark .journey-wordmark { height: var(--journey-size-icon); }
.primary-nav { display: none; gap: 22px; font-size: 15px; }
.primary-nav a, .category-strip a { text-decoration: none; color: var(--muted); }
.primary-nav a:hover, .primary-nav a[aria-current], .category-strip a[aria-current] { color: var(--ink); }
.header-actions { display: flex; gap: 4px; grid-column: 3; justify-self: end; }
/* Phones: the bar keeps the cabinet and Корзина; search and «Избранное» are in the menu. */
.header-actions .icon-link[href="/search"], .header-actions .fav-link { display: none; }
.primary-nav .nav-drop { display: none; }
/* LanguageSwitch: «RU» in the header from 1024 px and in the footer on phones. A placeholder until the translation: Russian is
   current, «English — скоро» is listed but is not a control. */
.lang-switch { position: relative; font-size: var(--journey-type-subheadline-size); }
.lang-switch summary { list-style: none; display: grid; place-items: center; min-width: var(--journey-size-target-ios); height: var(--journey-size-target-ios); padding: 0 var(--journey-spacing-8); border-radius: var(--shape); cursor: pointer; font-weight: 500; }
.lang-switch summary::-webkit-details-marker { display: none; }
.lang-switch summary:hover { background: var(--subtle); }
.lang-menu { position: absolute; right: 0; top: 100%; z-index: 21; min-width: 200px; display: grid; padding: var(--journey-spacing-8); background: var(--journey-color-bg-surface); color: var(--journey-color-text-primary); border: var(--journey-stroke-default) solid var(--journey-color-border-subtle); border-radius: var(--shape); box-shadow: var(--journey-effect-floating); }
.lang-menu > span { display: flex; align-items: center; gap: var(--journey-spacing-8); min-height: var(--journey-size-target-ios); padding: 0 var(--journey-spacing-12); border-radius: var(--journey-radius-md); white-space: nowrap; }
.lang-menu [aria-current] { background: var(--journey-color-bg-subtle); font-weight: 600; }
.lang-menu [aria-disabled] { color: var(--journey-color-disabled-text); }
.header-actions .lang-switch { display: none; }
/* SearchForm: one field and Button Primary in a row; results are the catalog grid. */
.search-form { display: flex; gap: var(--journey-spacing-8); align-items: end; max-width: 640px; margin-bottom: var(--journey-spacing-24); }
.search-form .field { flex: 1; margin: 0; }
.search-form .button { flex: none; }
.icon-link { position: relative; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; }
.icon-link svg { width: 24px; height: 24px; }
.icon-link:hover { background: var(--subtle); }
.cart-count { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--ink); color: var(--on-action); font-size: 11px; font-weight: 600; display: grid; place-items: center; padding: 0 5px; }
.cart-count[hidden] { display: none; }
/* Second level of the menu (product owner, 2026-11-10): the site has two top sections, «Каталог» and «Лукбук»; «Все», «Новинки»,
   «Скидки» and the product types belong to the catalog. On the catalog pages they are a quiet row of text links under the
   header, the current one underlined — not buttons, and «Лукбук» is not among them. */
.category-strip { display: none; gap: var(--journey-spacing-4) var(--journey-spacing-24); overflow-x: auto; padding: 0 var(--gutter); scrollbar-width: none; max-width: var(--max); margin: 0 auto; }
.category-strip::-webkit-scrollbar { display: none; }
/* CategoryChip: the same 44 px target as the iOS chips (size/target-ios). */
.category-strip a { flex: none; display: inline-flex; align-items: center; min-height: var(--journey-size-target-ios); font-size: var(--journey-type-footnote-size); letter-spacing: 0.04em; border-bottom: var(--journey-stroke-default) solid transparent; }
.category-strip a[aria-current] { border-bottom-color: var(--ink); }

/* Buttons */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--journey-size-control); padding: 0 26px; border-radius: var(--shape); border: 1px solid transparent; font: 400 15px/1 var(--font); letter-spacing: 0.03em; text-decoration: none; cursor: pointer; transition: background .15s; }
.button.primary { background: var(--journey-color-action-primary); color: var(--journey-color-text-on-action); }
.button.primary:hover { background: var(--journey-color-action-hover); }
.button.primary:active { background: var(--journey-color-action-pressed); }
.button.secondary { background: var(--surface); color: var(--ink); border-color: var(--control); }
.button.wide { width: 100%; min-height: var(--journey-size-control-large); }
.button:disabled, .button.disabled, .button[aria-disabled="true"] { background: var(--journey-color-disabled-bg); color: var(--journey-color-disabled-text); cursor: not-allowed; border-color: transparent; }
.text-button { background: none; border: 0; padding: 10px 0; font: 500 15px var(--font); color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.text-link { color: var(--accent); font-size: 15px; font-weight: 500; text-underline-offset: 3px; }

/* Home: Hero with a media place (the selection's photos or silhouettes now, a campaign photo later). */
.hero { padding: var(--journey-spacing-32) 0 var(--journey-spacing-24); display: grid; gap: var(--journey-spacing-24); }
.hero-copy { display: grid; gap: var(--journey-spacing-16); justify-items: start; align-content: center; }
.hero-media { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--journey-spacing-12); }
.hero-tile { aspect-ratio: var(--photo-ratio); background: var(--surface); border-radius: var(--shape); overflow: hidden; display: grid; place-items: center; }
.hero-tile img { width: 100%; height: 100%; object-fit: cover; }
/* ProductRail: one snapping row; the number of products never leaves a half-empty grid row. On phones the third card
   peeks in (2.4 cards per screen), so the row reads as scrollable. */
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * var(--journey-spacing-12)) / 2.4); gap: var(--journey-spacing-12); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; padding-bottom: var(--journey-spacing-8); }
.rail-item { scroll-snap-align: start; min-width: 0; }
.hero h1 { font-size: clamp(26px, 6vw, 40px); }
/* Hero «Campaign»: shots of the shoot across the whole width, 2:3 each (three side by side from 720 px, one on phones), a scrim
   for the text, and the header transparent over it (body[data-hero] + [data-over-hero], set by app.js; without scripts the
   header stays solid above the hero). Text and the button are text/on-action over the photo. */
body[data-hero="campaign"] { overflow-x: clip; }
.hero.hero-campaign { position: relative; display: block; padding: 0; width: 100vw; margin-left: calc(50% - 50vw); margin-top: calc(-1 * var(--header-height, 0px)); color: var(--on-action); }
.hero-frames { display: grid; grid-template-columns: minmax(0, 1fr); max-height: 88vh; overflow: hidden; }
.hero-frame { aspect-ratio: var(--photo-ratio); background: var(--subtle); overflow: hidden; }
.hero-frame + .hero-frame { display: none; }
.hero-frame img { width: 100%; height: 100%; object-fit: cover; }
.hero-campaign::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, color-mix(in srgb, var(--journey-color-action-pressed) 45%, transparent), transparent 28%, transparent 50%, color-mix(in srgb, var(--journey-color-action-pressed) 62%, transparent)); }
.hero-campaign .hero-copy { position: absolute; z-index: 1; left: var(--gutter); right: var(--gutter); bottom: var(--journey-spacing-32); max-width: 34em; }
.hero-campaign .eyebrow, .hero-campaign .lead { color: var(--on-action); }
.hero-campaign h1 { font-size: clamp(26px, 5vw, 44px); }
.hero-campaign .button.secondary { background: transparent; color: var(--on-action); border-color: var(--on-action); }
.hero-campaign .button.secondary:hover { background: color-mix(in srgb, var(--on-action) 16%, transparent); }
body[data-over-hero] .site-header { --ink: var(--on-action); --muted: color-mix(in srgb, var(--on-action) 84%, transparent); background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: transparent; color: var(--on-action); }
body[data-over-hero] .site-header .wordmark, body[data-over-hero] .site-header .icon-link { color: var(--on-action); }
body[data-over-hero] .site-header .icon-link:hover { background: color-mix(in srgb, var(--on-action) 16%, transparent); }
@media (min-width: 720px) {
  .hero-frames { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero-frames-1 { grid-template-columns: minmax(0, 1fr); }
  .hero-frames-1 .hero-frame { aspect-ratio: 16 / 9; }
  .hero-frames-1 .hero-frame img { object-position: 50% 22%; }
  .hero-frames-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-frame + .hero-frame { display: block; }
}
.section { padding-top: 32px; }
.section-more { display: flex; justify-content: center; margin: var(--journey-spacing-32) 0 0; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
/* Section tiles: a rail of large photos, the caption over the photo (as the reference's «Подборки»). */
.tiles { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - var(--journey-spacing-8)) / 1.6); gap: var(--journey-spacing-8); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; padding-bottom: var(--journey-spacing-8); }
/* CategoryTile: a 2:3 photo of the category and its name under it; no card around it, the photo is the tile. */
.tile { display: grid; text-decoration: none; scroll-snap-align: start; min-width: 0; color: var(--on-action); }
.tile > * { grid-area: 1 / 1; }
.tile-title, .tile-count { align-self: end; z-index: 1; padding: 0 var(--journey-spacing-16); }
.tile-title { padding-bottom: calc(var(--journey-spacing-16) + 22px); }
.tile-count { padding-bottom: var(--journey-spacing-16); }
.tile-art { position: relative; }
.tile-art::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--journey-color-action-pressed) 55%, transparent)); pointer-events: none; }
.tile-art { aspect-ratio: var(--photo-ratio); background: var(--surface); border-radius: var(--shape); overflow: hidden; display: grid; place-items: center; }
.tile-art img { width: 100%; height: 100%; object-fit: cover; }
.tile-title { font-size: 17px; }
.tile-count { font-size: 13px; }

/* Product grid */
/* ProductGrid: large photos almost edge to edge, the text is one quiet line under each. */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--journey-spacing-24) var(--journey-spacing-8); }
.card-link { display: grid; gap: var(--journey-spacing-8); text-decoration: none; }
.card-media { position: relative; aspect-ratio: var(--photo-ratio); background: var(--surface); border-radius: var(--shape); overflow: hidden; display: grid; place-items: center; }
/* The photo fills the frame whatever its own proportions (absolute, not a grid item): a 3:4 file must not leave a strip
   under the badges. Badges lie over the photo, in its top left corner. */
.card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.card-link:hover .card-media img, .card-link:hover .art { transform: scale(1.03); }
.art { width: 82%; height: 82%; transition: transform .4s; }
.card { position: relative; min-width: 0; }
/* Badges sit together at the top left; the top right belongs to the «Избранное» toggle. */
.badges { position: absolute; top: 10px; left: 10px; right: 56px; display: flex; flex-wrap: wrap; gap: var(--journey-spacing-4); }
.badge { background: var(--surface); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 8px; border-radius: var(--shape); }
.badge.sale { color: var(--sale); }
/* «Избранное» (docs/customer-account.md): an icon button over the card photo and a labelled button on the product page.
   Outline when off, filled with the brand accent when on (aria-pressed); a 44 pt target. */
.fav-toggle { position: absolute; top: var(--journey-spacing-4); right: var(--journey-spacing-4); width: var(--journey-size-target-ios); height: var(--journey-size-target-ios); display: grid; place-items: center; padding: 0; border: 0; border-radius: var(--journey-radius-full); background: transparent; color: var(--ink); cursor: pointer; }
.fav-toggle svg { width: 22px; height: 22px; }
.fav-toggle[aria-pressed="true"] svg path, .fav-button[aria-pressed="true"] svg path, .icon-link[href$="#favorites"]:hover svg path { fill: currentColor; }
.fav-toggle[aria-pressed="true"], .fav-button[aria-pressed="true"] { color: var(--accent); }
.fav-toggle:disabled, .fav-button:disabled { opacity: .6; cursor: progress; }
.fav-button { min-height: var(--journey-size-target-ios); padding: 0 var(--journey-spacing-16); flex: none; }
.fav-button svg { width: 20px; height: 20px; }
/* The size of a favourite in the account (owner, 2026-11-11): «Размер» under the card. */
.fav-item { display: grid; align-content: start; gap: var(--journey-spacing-8); min-width: 0; }
.title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--journey-spacing-12); }
.size-suggestion { margin: 0 0 var(--journey-spacing-8); font-size: var(--journey-type-subheadline-size); color: var(--ink); }
.size-suggestion[hidden] { display: none; }
/* «Скоро в продаже» and «Сообщить о поступлении» (docs/restock-subscriptions.md). */
.badge.soon, .stock-note.soon { color: var(--ink); }
.restock { margin-top: var(--journey-spacing-16); }
/* The archive (2026-11-11, docs/web-storefront.md «Архив»): an archived favourite is greyed with «Больше не продаётся»; its own
   page says «Эта вещь больше не продаётся» over a muted photo, with similar items in stock below. */
.card-archived .card-media img, .card-archived .card-media svg, .archived-media img, .archived-media svg { filter: grayscale(1); opacity: .7; }
.card-archived .card-title { color: var(--muted); }
.archived-media { position: relative; aspect-ratio: var(--photo-ratio); background: var(--surface); border-radius: var(--shape); overflow: hidden; display: grid; place-items: center; }
.archived-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.product-archived .buy { display: grid; gap: var(--journey-spacing-12); align-content: start; justify-items: start; }
.archived-note { margin: 0; }
/* RestockAction, state «Вы в списке ожидания»: takes the place of the button; success tone, quiet «Отписаться». */
.restock-waiting { display: grid; gap: var(--journey-spacing-8); justify-items: start; padding: var(--journey-spacing-16); border-radius: var(--shape); background: var(--journey-color-status-success-bg); }
.restock-waiting-title { display: flex; align-items: center; gap: var(--journey-spacing-8); font: var(--journey-type-headline); color: var(--journey-color-status-success-fg); }
.restock-waiting-title svg { width: var(--journey-size-icon); height: var(--journey-size-icon); flex: none; }
.restock-waiting .text-button { min-height: var(--journey-size-target-ios); }
.restock-waiting-sub { margin: 0; font-weight: 600; }
.restock-waiting p { margin: 0; }
/* SizeChip with its stock label (owner's spec 2026-11-11): the size, and under it «В наличии», «Осталось мало», «Последний»,
   «Нет в наличии» or «Подписка». Few and last use the warning tone, «Подписка» the brand accent; the 44 px target stays. */
.chip.labeled { height: auto; min-height: var(--journey-size-target-ios); min-width: 72px; padding: var(--journey-spacing-4) var(--journey-spacing-12); gap: 0; text-align: center; }
.chip-size { line-height: 1.25; }
.chip-note { font-size: var(--journey-type-caption-size); line-height: var(--journey-type-caption-line); font-weight: 400; color: var(--muted); white-space: nowrap; }
.chip.level-few .chip-note, .chip.level-last .chip-note { color: var(--journey-color-status-warning-fg); }
.chip.level-subscribe .chip-note { color: var(--accent); font-weight: 600; }
/* The label says it in words, so the diagonal sold-out mark is not drawn over it. */
.chip.labeled::after { display: none; }
.chip.level-subscribe { color: var(--ink); }
.chip.waiting { border-color: var(--journey-color-status-success-fg); }
/* «Узнать о поступлении»: a centred dialog; on phones a sheet from the bottom. */
.restock-dialog { width: min(480px, calc(100vw - 2 * var(--gutter))); max-height: calc(100dvh - 2 * var(--gutter)); padding: 0; border: 0; border-radius: var(--journey-radius-md); background: var(--journey-color-bg-surface); color: var(--journey-color-text-primary); box-shadow: var(--journey-effect-floating); }
.restock-dialog::backdrop { background: color-mix(in srgb, var(--journey-color-action-pressed) 40%, transparent); }
.restock-dialog-body { display: grid; gap: var(--journey-spacing-12); padding: var(--journey-spacing-16) var(--journey-spacing-20) var(--journey-spacing-20); }
.restock-dialog-body p { margin: 0; }
.restock-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: var(--journey-spacing-16); }
.restock-dialog-head h2 { font: var(--journey-type-title-3); font-weight: 600; }
.restock-dialog-target { font-weight: 600; }
.restock-dialog [data-restock-steps], .restock-dialog form, .restock-done { display: grid; gap: var(--journey-spacing-12); }
.restock-dialog [hidden] { display: none; }
@media (max-width: 719px) {
  .restock-dialog { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: var(--journey-radius-md) var(--journey-radius-md) 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
}
/* «Подписки» in the account: a card per size, photo 2:3. */
.restock-cards { list-style: none; margin: 0 0 var(--journey-spacing-12); padding: 0; display: grid; gap: var(--journey-spacing-16); }
.restock-card { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--journey-spacing-16); align-items: start; }
.restock-card-media { aspect-ratio: var(--photo-ratio); border-radius: var(--shape); overflow: hidden; background: var(--subtle); display: grid; place-items: center; }
.restock-card-media img { width: 100%; height: 100%; object-fit: cover; }
.restock-card-body { display: grid; gap: var(--journey-spacing-4); justify-items: start; }
.restock-card-body p { margin: 0; }
.restock-card-title { font-weight: 600; text-decoration: none; }
.restock-card .text-button { min-height: var(--journey-size-target-ios); }
.card-body { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--journey-spacing-12); row-gap: 2px; align-items: center; padding: 0 2px; }
.card-body > * { grid-column: 1 / -1; }
.card-body > .price { grid-column: 1; }
.card-body > .dots { grid-column: 2; margin-top: 2px; }
.card-title { font-size: 14px; font-weight: 400; letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-subtitle { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.price { font-size: 15px; font-weight: 400; letter-spacing: 0.03em; margin-top: 2px; }
.price.large { font-size: 24px; margin: 8px 0 4px; }
.price.small { font-size: 15px; }
.price-now.sale { color: var(--sale); }
.price-old { color: var(--muted); font-weight: 400; font-size: .85em; margin-left: 4px; }
.dots { display: flex; gap: 4px; margin-top: 4px; }
.dot { width: 12px; height: 12px; }
.stock-note { font-size: 13px; color: var(--muted); }
.empty { color: var(--muted); padding: 32px 0; }

/* Breadcrumbs */
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 16px 0 0; margin: 0; font-size: 13px; color: var(--muted); }
.crumbs li + li::before { content: "/"; margin-right: 6px; opacity: .6; }
.crumbs a { text-decoration: none; }
.listing .section-head { margin-top: 4px; }
/* FilterBar form: a GET form; scripts submit it on change and hide the button (apps/web/app.js). The box «Показать товары не в
   наличии» is gone (2026-11-11): sold-out models are listed at the end with «Нет в наличии» until they go to the archive. */
.stock-filter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--journey-spacing-8) var(--journey-spacing-16); margin: 0 0 var(--journey-spacing-16); }
.stock-filter .check { min-height: var(--journey-size-target-ios); align-items: center; }
.stock-filter .check input { margin: 0; }
/* FilterBar: «Цвет», «Размер» (folded lists of checkboxes) and «Сортировка» in one row that wraps. */
.listing-filters { align-items: flex-start; }
.filter { position: relative; }
.filter > summary, .filter-sort select { list-style: none; display: inline-flex; align-items: center; gap: var(--journey-spacing-8); min-height: var(--journey-size-target-ios); padding: 0 var(--journey-spacing-16); border: var(--journey-stroke-default) solid var(--control); border-radius: var(--shape); background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; }
.filter > summary::-webkit-details-marker { display: none; }
.filter[open] > summary { border-color: var(--ink); }
.filter-count { display: inline-grid; place-items: center; min-width: var(--journey-size-icon); height: var(--journey-size-icon); padding: 0 var(--journey-spacing-4); border-radius: var(--journey-radius-full); background: var(--journey-color-action-primary); color: var(--on-action); font-size: var(--journey-type-caption-size); }
.filter-options { position: absolute; z-index: 5; top: calc(100% + var(--journey-spacing-4)); left: 0; min-width: 220px; max-height: 320px; overflow: auto; display: grid; padding: var(--journey-spacing-8) var(--journey-spacing-12); background: var(--surface); border: var(--journey-stroke-default) solid var(--line); border-radius: var(--shape); box-shadow: var(--journey-effect-floating); }
.filter-options .check { min-height: var(--journey-size-target-ios); align-items: center; }
.filter-options .check span { display: inline-flex; align-items: center; gap: var(--journey-spacing-8); }
.filter-options .dot { width: 14px; height: 14px; }
.filter-sort { display: inline-flex; align-items: center; gap: var(--journey-spacing-8); margin-left: auto; }
.filter-sort span { color: var(--muted); }
.filter-reset { min-height: var(--journey-size-target-ios); display: inline-flex; align-items: center; }
.card-sizes { font-size: var(--journey-type-footnote-size); color: var(--muted); letter-spacing: 0.02em; }
/* ContactForm «Написать нам»: paired fields from 720 px, one column on phones; the honeypot is off-screen. */
.contact { margin-top: var(--journey-spacing-32); padding-top: var(--journey-spacing-24); border-top: var(--journey-stroke-default) solid var(--line); display: grid; gap: var(--journey-spacing-8); scroll-margin-top: 120px; }
.contact-form { display: grid; gap: var(--form-gap); margin-top: var(--journey-spacing-8); }
.contact-form[hidden] { display: none; }
.contact-row { display: grid; gap: var(--journey-spacing-16); grid-template-columns: minmax(0, 1fr); }
.contact-form .button { justify-self: start; }
.contact-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (min-width: 720px) { .contact-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* SubscribeForm: the e-mail field and Button Secondary in one row, the consent box under them. */
.subscribe { display: grid; gap: var(--journey-spacing-12); align-content: start; min-width: 0; }
.subscribe-row { display: grid; gap: var(--journey-spacing-8); }
.subscribe-row .field { flex: 1; margin: 0; }
.subscribe-row .button { width: 100%; }
.subscribe .text-button { justify-self: start; }
.footer-social { display: grid; gap: var(--journey-spacing-8); align-content: start; }
.footer-bottom { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; align-items: center; gap: var(--journey-spacing-16); }
.to-top { border: var(--journey-stroke-default) solid var(--control); }
.stock-filter [data-stock-apply][hidden] { display: none; }
.product-stock { font-size: 15px; font-weight: 600; color: var(--ink); }

/* Product page */
.product { display: grid; gap: 24px; padding-top: 16px; }
.gallery-wrap { position: relative; min-width: 0; }
.slide[data-zoomable] { cursor: zoom-in; }
/* ZoomViewer (apps/web/zoom.js): the photo on the whole screen over bg/surface; controls are IconButton Surface, 44 px. */
.zoom-open { overflow: hidden; }
.zoom { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--surface); color: var(--ink); overflow: hidden; }
.zoom::backdrop { background: var(--surface); }
.zoom-stage { position: absolute; inset: 0; overflow: hidden; touch-action: none; cursor: zoom-in; user-select: none; -webkit-user-select: none; }
.zoom-stage[data-zoomed="true"] { cursor: grab; }
.zoom-stage img { width: 100%; height: 100%; object-fit: contain; transform-origin: 0 0; will-change: transform; -webkit-user-drag: none; }
.zoom-button { position: absolute; width: var(--journey-size-target-ios); height: var(--journey-size-target-ios); display: grid; place-items: center; padding: 0; border: var(--journey-stroke-default) solid var(--line); border-radius: var(--journey-radius-full); background: var(--surface); color: var(--ink); cursor: pointer; box-shadow: var(--journey-effect-floating); }
.zoom-button svg { width: var(--journey-size-icon-large); height: var(--journey-size-icon-large); }
.zoom-button:disabled { color: var(--journey-color-disabled-text); box-shadow: none; cursor: default; }
.zoom-close { top: calc(var(--journey-spacing-16) + env(safe-area-inset-top, 0px)); right: var(--journey-spacing-16); }
.zoom-prev, .zoom-next { top: 50%; margin-top: calc(var(--journey-size-target-ios) / -2); }
.zoom-prev { left: var(--journey-spacing-16); }
.zoom-next { right: var(--journey-spacing-16); }
.zoom-scale { position: absolute; right: var(--journey-spacing-16); bottom: calc(var(--journey-spacing-16) + env(safe-area-inset-bottom, 0px)); display: flex; gap: var(--journey-spacing-8); }
.zoom-scale .zoom-button { position: static; }
.zoom-count { position: absolute; left: 0; right: 0; bottom: calc(var(--journey-spacing-24) + env(safe-area-inset-bottom, 0px)); margin: 0; text-align: center; font: var(--journey-type-footnote); color: var(--muted); pointer-events: none; }
/* Neighbouring photos: a slice of each at the very edge of the screen, smaller than the current photo. The slice takes the
   outer half of the field beside the photo, the inner half stays empty — a little panorama. Shown only when the field is
   at least 96 px wide (zoom.js sets data-zoom-peek and --zoom-slice); a click turns to that photo; hidden while the photo is zoomed. */
.zoom-side { position: absolute; top: 16%; height: 68%; padding: 0; border: 0; background: none; cursor: pointer; opacity: .85; transition: opacity .2s; z-index: 1; display: none; }
.zoom[data-zoom-peek="true"] .zoom-side:not([hidden]) { display: block; }
.zoom-side:hover { opacity: 1; }
.zoom-side img { height: 100%; width: auto; max-width: none; display: block; }
.zoom-side-prev { right: calc(100% - var(--zoom-slice, 0px)); }
.zoom-side-next { left: calc(100% - var(--zoom-slice, 0px)); }
.zoom:has(.zoom-stage[data-zoomed="true"]) .zoom-side { visibility: hidden; }
.zoom-button, .zoom-scale { z-index: 2; }
/* Phones: fingers turn and zoom; the arrows and ± stay for keyboards and pointers only. */
@media (hover: none) and (pointer: coarse) { .zoom-prev, .zoom-next, .zoom-scale { display: none; } }
.gallery-badge { position: absolute; top: var(--journey-spacing-12); left: var(--journey-spacing-12); margin: 0; }
/* Product title: Web/Title2 on phones, Web/Title1 from 720 px, two lines at most in normal weight: the photo leads, not the name. */
.buy h1 { font: var(--journey-type-title-2); letter-spacing: -0.01em; }
.gallery { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory; gap: 8px; border-radius: var(--shape); scrollbar-width: none; }
.gallery::-webkit-scrollbar { display: none; }
.slide { margin: 0; aspect-ratio: var(--photo-ratio); background: var(--surface); border-radius: var(--shape); overflow: hidden; display: grid; place-items: center; scroll-snap-align: start; }
.slide img { width: 100%; height: 100%; object-fit: cover; }
.buy { display: grid; gap: 4px; align-content: start; }
.buy .subtitle { color: var(--muted); }
.picker { display: grid; gap: 18px; margin-top: 12px; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { font-weight: 600; margin-bottom: 10px; padding: 0; }
.swatches, .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch { position: relative; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; border: 1.5px solid transparent; }
.swatch svg { width: 34px; height: 34px; }
.swatch input, .chip input, .option input { position: absolute; opacity: 0; pointer-events: none; }
.swatch:has(input:checked) { border-color: var(--ink); }
.swatch:has(input:focus-visible), .chip:has(input:focus-visible), .option:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.swatch.sold-out::after { content: ""; position: absolute; width: 1px; height: 34px; background: var(--ink); opacity: .5; transform: rotate(45deg); }
.chip { position: relative; min-width: 56px; height: 44px; padding: 0 14px; border-radius: var(--shape); border: 1px solid var(--line); background: var(--surface); display: grid; place-items: center; font-weight: 500; cursor: pointer; }
.chip:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
/* Choice «можно ждать»: a sold-out size keeps the surface and its target and carries the diagonal mark of Choice
   (ShowUnavailableMark); grey disabled fill is not used, because the size can be chosen to wait for it. */
.chip.unavailable { color: var(--muted); overflow: hidden; }
.chip.unavailable::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top right, transparent calc(50% - 0.5px), var(--control) calc(50% - 0.5px), var(--control) calc(50% + 0.5px), transparent calc(50% + 0.5px)); pointer-events: none; }
/* A sold-out size stays selectable: it offers «Сообщить о поступлении» (docs/restock-subscriptions.md). */
.chip.unavailable:has(input:checked) { color: var(--ink); }
.chip.unknown:not(.labeled) span::after { content: " ?"; color: var(--muted); }
.notice.small { font-size: var(--journey-type-footnote-size); }
.sizes[aria-invalid="true"] .chip:not(.unavailable) { border-color: var(--journey-color-status-error-fg); }
.buy-action { display: grid; gap: var(--journey-spacing-8); }
.buy-action-price { display: none; }
/* «Сообщить о поступлении»: the hint about the cart does not apply, and on phones the bar has no price, so the label fits one line. */
.picker:has([data-restock-mode]) > .hint { display: none; }
.availability { font-size: 15px; color: var(--muted); min-height: 1.5em; }
.availability[data-state="available"] { color: var(--journey-color-status-success-fg); }
.availability[data-state="unknown"] { color: var(--journey-color-status-warning-fg); }
.hint { font-size: 13px; color: var(--muted); }
.toast { background: var(--journey-color-status-success-bg); color: var(--journey-color-status-success-fg); border-radius: var(--shape); padding: 12px 14px; font-size: 15px; }
.toast a { font-weight: 600; }
/* «О модели» takes the whole width of the page (owner, 2026-11-11), like the blocks under it. */
.product-details { display: grid; gap: 28px; margin-top: 40px; }
/* Disclosure: a folded block of the product page («Размеры и замеры», «Состав и уход», «Доставка…»). 56 px row, chevron. */
.product-more { margin-top: var(--journey-spacing-32); border-bottom: var(--journey-stroke-default) solid var(--line); }
.disclosure { border-top: var(--journey-stroke-default) solid var(--line); }
.disclosure > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--journey-spacing-16); min-height: var(--journey-size-control-large); cursor: pointer; font: var(--journey-type-headline); }
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary::after { content: ""; flex: none; width: 10px; height: 10px; border-right: var(--journey-stroke-focus) solid currentColor; border-bottom: var(--journey-stroke-focus) solid currentColor; transform: rotate(45deg); margin-right: var(--journey-spacing-4); transition: transform .15s; }
.disclosure[open] > summary::after { transform: rotate(-135deg); }
.disclosure-body { display: grid; gap: var(--journey-spacing-12); padding-bottom: var(--journey-spacing-24); }
@media (prefers-reduced-motion: reduce) { .disclosure > summary::after { transition: none; } }
.detail-block { display: grid; gap: 10px; border-top: 1px solid var(--line); padding-top: 20px; }
.detail-block h2 { font-size: 18px; }
.bullets { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.table-scroll { overflow-x: auto; }
.measurements { border-collapse: collapse; font-size: 14px; min-width: 100%; }
.measurements caption { text-align: left; color: var(--muted); padding-bottom: 8px; }
.measurements th, .measurements td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: center; white-space: nowrap; }
.measurements th[scope=row] { text-align: left; font-weight: 500; }
.size-guide summary { cursor: pointer; color: var(--accent); font-weight: 500; padding: 8px 0; }

/* Корзина, checkout, order, account */
.narrow { max-width: 760px; margin: 0 auto; display: grid; gap: 20px; padding-top: 24px; }
.app-root { display: grid; gap: 16px; }
.empty-state { display: grid; gap: 16px; justify-items: start; padding: 24px 0; }
.lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.line { display: grid; grid-template-columns: 88px 1fr auto; gap: 14px; background: var(--surface); border-radius: var(--shape); padding: 12px; align-items: start; }
.line.missing { grid-template-columns: 1fr auto; }
.line-media { aspect-ratio: var(--photo-ratio); background: var(--subtle); border-radius: var(--shape); overflow: hidden; display: grid; place-items: center; }
.line-media img { width: 100%; height: 100%; object-fit: cover; }
.line-body { display: grid; gap: 2px; min-width: 0; }
.line-title { font-weight: 600; text-decoration: none; }
.line-warning { color: var(--sale); font-size: 14px; }
.remove { padding: 0; font-size: 14px; }
.stepper { display: inline-flex; align-items: center; margin-top: 8px; border: 1px solid var(--line); border-radius: 999px; width: max-content; }
.stepper button { width: 40px; height: 40px; border: 0; background: none; font-size: 20px; cursor: pointer; color: var(--ink); border-radius: 50%; }
.stepper button:disabled { color: var(--line); cursor: not-allowed; }
.stepper output { min-width: 24px; text-align: center; font-weight: 600; }
.summary, .card-panel { background: var(--surface); border-radius: var(--shape); padding: 18px; display: grid; gap: 10px; }
.card-panel h2, .summary-title { font-size: 18px; }
.card-panel.attention { background: var(--journey-color-status-warning-bg); }
.card-panel .actions { display: flex; gap: 10px; flex-wrap: wrap; }
.summary-row { display: flex; justify-content: space-between; gap: 12px; }
.summary-row.total { font-weight: 700; font-size: 18px; border-top: 1px solid var(--line); padding-top: 10px; }
.summary-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 15px; }
.summary-lines li { display: flex; justify-content: space-between; gap: 12px; }
.summary-lines li > span:last-child { white-space: nowrap; }
.notice { background: var(--journey-color-status-info-bg); color: var(--journey-color-status-info-fg); padding: 12px 14px; border-radius: var(--shape); font-size: 15px; }
.notice.error { background: var(--journey-color-status-error-bg); color: var(--journey-color-status-error-fg); }
.notice[hidden] { display: none; }
.checkout, .checkout-main, .checkout-aside { display: grid; gap: 18px; align-content: start; }
/* OrderSummaryHeader and StatusBadge (tones are the status/* token pairs). */
.order-header { display: grid; gap: var(--journey-spacing-12); justify-items: start; }
.order-header .button { justify-self: stretch; }
.status-badges { display: flex; flex-wrap: wrap; gap: var(--journey-spacing-8); }
.status-badge { display: inline-flex; align-items: center; padding: var(--journey-spacing-4) var(--journey-spacing-12); border-radius: var(--shape); font-size: var(--journey-type-subheadline-size); font-weight: 600; background: var(--subtle); color: var(--ink); }
.status-badge[data-tone="success"] { background: var(--journey-color-status-success-bg); color: var(--journey-color-status-success-fg); }
.status-badge[data-tone="warning"] { background: var(--journey-color-status-warning-bg); color: var(--journey-color-status-warning-fg); }
.status-badge[data-tone="error"] { background: var(--journey-color-status-error-bg); color: var(--journey-color-status-error-fg); }
.status-badge[data-tone="info"] { background: var(--journey-color-status-info-bg); color: var(--journey-color-status-info-fg); }
.step { background: var(--surface); border-radius: var(--shape); padding: 18px; display: grid; gap: 10px; }
.step legend { float: left; width: 100%; font-size: 18px; margin-bottom: 4px; }
.field { display: grid; gap: 6px; font-size: 14px; color: var(--muted); }
.field input, .field select, .field textarea { font: 16px var(--font); color: var(--ink); min-height: var(--journey-size-control); border: 1px solid var(--control); border-radius: var(--shape); padding: 0 14px; background: var(--surface); width: 100%; }
/* Select: the native arrow sits flush to the border, so the control draws its own chevron with the same inner offset
   as the text on the left. */
.field select, .filter-sort select { appearance: none; -webkit-appearance: none; padding-right: calc(var(--journey-spacing-16) * 2 + 10px); background-repeat: no-repeat; background-size: 6px 6px;
  background-image: linear-gradient(45deg, transparent calc(50% - 1px), var(--ink) calc(50% - 1px), var(--ink) calc(50% + 1px), transparent calc(50% + 1px)), linear-gradient(135deg, transparent calc(50% - 1px), var(--ink) calc(50% - 1px), var(--ink) calc(50% + 1px), transparent calc(50% + 1px));
  background-position: right calc(var(--journey-spacing-16) + 5px) center, right var(--journey-spacing-16) center; }
.field input[readonly], .field textarea[readonly] { background: var(--subtle); }
.field textarea { padding: var(--journey-spacing-12); resize: vertical; }
/* Field «error» state: the border and the message under the field in the status-error colour (Field component, tokens only). */
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--journey-color-status-error-fg); box-shadow: inset 0 0 0 1px var(--journey-color-status-error-fg); }
.field-error { color: var(--journey-color-status-error-fg); font-size: var(--journey-type-footnote-size); }
.field-error[hidden] { display: none; }
.options { display: grid; gap: 8px; }
/* Consent box of the checkout and the profile: a native checkbox, unticked by default; links stay underlined. */
.check { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; padding: 8px 0; font-size: 15px; cursor: pointer; }
.check[hidden] { display: none; }
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--ink); }
.check a, .legal-note a { text-decoration: underline; text-underline-offset: 2px; }
.option { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 14px; border: 1px solid var(--line); border-radius: var(--shape); cursor: pointer; }
.option:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.option-body { display: grid; gap: 2px; }
.option-title { font-weight: 500; }
.option-price { font-weight: 600; white-space: nowrap; }
/* «Как с вами связаться»: four short options, two per row from 360 px; an unanswered required choice outlines every option. */
.options.channels { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.option:has(input[aria-invalid="true"]) { border-color: var(--journey-color-status-error-fg); }
/* DeliveryDetails: the СДЭК office picker and the courier address inside the «Доставка» step (tokens only). */
.delivery-details { display: grid; gap: var(--journey-spacing-12); padding-top: var(--journey-spacing-12); border-top: var(--journey-stroke-default) solid var(--line); }
.details-title { font-size: var(--journey-type-headline-size); font-weight: 600; letter-spacing: 0; }
.point-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--journey-spacing-8); }
.point { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--journey-spacing-12); align-items: center; padding: var(--journey-spacing-12) var(--journey-spacing-16); border: var(--journey-stroke-default) solid var(--line); border-radius: var(--shape); color: var(--ink); }
.point.chosen { border-color: var(--ink); box-shadow: inset 0 0 0 var(--journey-stroke-default) var(--ink); }
.point .button { padding: 0 var(--journey-spacing-16); }
.point .text-button { min-height: var(--journey-size-target-ios); }
.tags { display: flex; flex-wrap: wrap; gap: var(--journey-spacing-4); margin-top: var(--journey-spacing-4); }
.tag { font-size: var(--journey-type-footnote-size); padding: 0 var(--journey-spacing-8); border-radius: var(--shape); background: var(--subtle); color: var(--ink); }
/* Two fields side by side: label, input and error share rows (subgrid), so a label on two lines never shifts the inputs. */
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto auto; column-gap: var(--journey-spacing-12); row-gap: var(--journey-spacing-4); }
.field-row .field-cell { grid-row: span 3; grid-template-rows: subgrid; gap: var(--journey-spacing-4); }
.field-row .field { display: contents; }
.field-row .field > span { align-self: end; }
.field-cell { display: grid; gap: var(--journey-spacing-4); align-content: start; }
/* Address suggestions: a listbox under the street field (combobox pattern), floating over the fields below. */
.combo { position: relative; }
.suggestions { list-style: none; margin: var(--journey-spacing-4) 0 0; padding: var(--journey-spacing-4); position: absolute; left: 0; right: 0; top: 100%; z-index: 5; background: var(--surface); border: var(--journey-stroke-default) solid var(--line); border-radius: var(--shape); box-shadow: var(--journey-effect-floating); }
.suggestions[hidden] { display: none; }
.suggestions li { display: flex; align-items: center; min-height: var(--journey-size-target-ios); padding: 0 var(--journey-spacing-12); border-radius: var(--journey-radius-md); color: var(--ink); cursor: pointer; }
.suggestions li[aria-selected="true"], .suggestions li:hover { background: var(--subtle); }
.status-line { font-weight: 600; font-size: 17px; }
.order-timeline { list-style: none; margin: 0 0 12px; padding: 0; }
.order-timeline li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0 6px 20px; position: relative; color: var(--muted); }
.order-timeline li::before { content: ""; position: absolute; left: 0; top: 13px; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.order-timeline li[aria-current="step"] { color: var(--ink); font-weight: 600; }
.order-timeline li[data-state="cancelled"][aria-current="step"] { color: var(--sale); }
.status-line[data-state="paid"], .status-line[data-state="reserved"] { color: var(--journey-color-status-success-fg); }
.order-list { list-style: none; margin: 0; padding: 0; display: grid; }
.order-row { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); text-decoration: none; flex-wrap: wrap; }
.message { justify-items: start; padding-top: 64px; }
/* «Личный кабинет» (apps/web/account.js) */
/* AccountLayout: a menu of sections and one section at a time. AccountNavItem is a 44 px row; the current one sits on bg/subtle.
   Phones: the menu alone, then the chosen section with a way back. From 1024 px: the menu on the left, «Мои заказы» by default. */
.account-layout { display: grid; gap: var(--journey-spacing-24); }
.account-nav { display: grid; gap: var(--journey-spacing-4); align-content: start; }
.account-who { padding: 0 var(--journey-spacing-12) var(--journey-spacing-8); overflow-wrap: anywhere; }
.account-nav-item { display: flex; align-items: center; justify-content: space-between; gap: var(--journey-spacing-12); min-height: var(--journey-size-target-ios); padding: 0 var(--journey-spacing-12); border-radius: var(--journey-radius-md); text-decoration: none; }
.account-nav-item:hover, .account-nav-item[aria-current] { background: var(--subtle); }
.account-nav-item[aria-current] { font-weight: 600; }
.account-logout { justify-self: start; min-height: var(--journey-size-target-ios); padding: 0 var(--journey-spacing-12); margin-top: var(--journey-spacing-8); }
.account-content { min-width: 0; }
.account-section { display: none; gap: var(--journey-spacing-20); }
.account-layout[data-active="orders"] [data-section="orders"], .account-layout[data-active="loyalty"] [data-section="loyalty"], .account-layout[data-active="favorites"] [data-section="favorites"], .account-layout[data-active="recent"] [data-section="recent"],
.account-layout[data-active="restock"] [data-section="restock"], .account-layout[data-active="details"] [data-section="details"], .account-layout[data-active="sizes"] [data-section="sizes"],
.account-layout[data-active="marketing"] [data-section="marketing"] { display: grid; }
.account-layout:not([data-active=""]) .account-nav { display: none; }
.account-back { justify-self: start; display: inline-flex; align-items: center; min-height: var(--journey-size-target-ios); }
.account-back::before { content: "←"; margin-right: var(--journey-spacing-8); }
.account-block { display: grid; gap: var(--journey-spacing-12); }
.account-block > h2 { font: var(--journey-type-title-2); }
@media (min-width: 1024px) {
  body[data-page="account"] .narrow { max-width: var(--max); }
  .account-layout { grid-template-columns: 260px minmax(0, 1fr); gap: var(--journey-spacing-48); align-items: start; }
  .account-layout:not([data-active=""]) .account-nav { display: grid; }
  .account-layout[data-active=""] [data-section="orders"] { display: grid; }
  .account-layout[data-active=""] [data-nav="orders"] { background: var(--subtle); font-weight: 600; }
  .account-back { display: none; }
  .account-content .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Form rhythm: one step (--form-gap) between a field and whatever follows it — the next field, a box or the button — in
   every form of the site, so a button never sticks to the field above it. */
:root { --form-gap: var(--journey-spacing-16); }
form:where(:not([class], [action])), .stack { display: grid; gap: var(--form-gap); }
form:where(:not([class], [action])) > .text-button { justify-self: start; }
.stack .button { justify-self: start; }
.saved-list { list-style: none; margin: 0; padding: 0; display: grid; }
.saved-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--journey-spacing-8) var(--journey-spacing-12); padding: var(--journey-spacing-8) 0; border-bottom: var(--journey-stroke-default) solid var(--line); }
.saved-row > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.row-actions { display: flex; gap: var(--journey-spacing-16); }
.row-actions .text-button { min-height: var(--journey-size-target-ios); }
.add-address summary { cursor: pointer; color: var(--accent); font-weight: 500; min-height: var(--journey-size-target-ios); display: flex; align-items: center; }
.add-address[open] summary { margin-bottom: var(--journey-spacing-8); }
.card-panel .grid { gap: var(--journey-spacing-16) var(--journey-spacing-12); }
@media (min-width: 720px) { .card-panel .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Service links above the header bar: delivery, try-on, contacts (information pages). */

/* Information pages */
.info-page h1 { margin-bottom: 4px; }
.draft-banner { display: grid; gap: 4px; margin: 0; padding: 12px 14px; border-radius: var(--shape); background: var(--journey-color-status-warning-bg); color: var(--journey-color-status-warning-fg); font-size: 14px; }
/* Text style «prose» for long pages: body size, a line of at most ~68 characters, blocks spaced by spacing/24 before headings. */
.prose { display: grid; gap: var(--journey-spacing-12); font-size: var(--journey-type-body-size); line-height: 1.55; max-width: 68ch; }
.prose h2 { font-size: var(--journey-type-title-2-size); margin-top: var(--journey-spacing-24); }
.prose h3 { font-size: 18px; margin-top: 8px; }
.prose ul, .prose ol { margin: 0; padding-left: 22px; display: grid; gap: 6px; }
.prose a { text-underline-offset: 2px; }
mark.todo { background: var(--journey-color-status-warning-bg); color: var(--journey-color-status-warning-fg); border-radius: 3px; padding: 0 3px; }
.requisites { display: grid; gap: 8px; margin: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--shape); background: var(--surface); }
.requisites div { display: grid; grid-template-columns: minmax(110px, 30%) 1fr; gap: 12px; }
.requisites dt { color: var(--muted); font-size: 14px; }
.requisites dd { margin: 0; overflow-wrap: anywhere; }
.size-table { margin: 0; display: grid; gap: 8px; }
.size-table figcaption { font-weight: 600; }
.buy-links { margin-top: 16px; color: var(--muted); }
.buy-links a { color: var(--muted); }
.message-links { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 8px; font-size: 15px; }
.message-links a { color: var(--muted); }

/* Footer: a full-width band of the second background with the content held to the page width, as on the old site: «Следите за
   за нами», the subscription, the link columns; under them the settings, the copyright in the centre and «Наверх». */
.site-footer { border-top: var(--journey-stroke-default) solid var(--line); margin-top: var(--journey-spacing-48); font-size: var(--journey-type-subheadline-size); }
.footer-inner { max-width: var(--max); margin: 0 auto; padding: var(--journey-spacing-16) var(--gutter) var(--journey-spacing-24); display: grid; gap: var(--journey-spacing-24); grid-template-columns: minmax(0, 1fr); }
/* On phones the footer is only the settings line and the copyright (the reference drops it altogether there); the pages are
   in the menu. From 720 px: link columns, a hairline, then the subscription and the shop's pages on the networks. */
.footer-links, .site-footer .subscribe, .footer-social { display: none; }
.site-footer nav { display: grid; gap: var(--journey-spacing-12); align-content: start; }
.footer-title { font-size: 17px; font-weight: 400; color: var(--ink); margin-bottom: var(--journey-spacing-8); }
.site-footer a { text-decoration: none; color: var(--journey-color-text-secondary); }
.site-footer a:hover, .site-footer a[aria-current] { color: var(--ink); }
.footer-social .share-links { gap: var(--journey-spacing-4) var(--journey-spacing-24); }
.footer-social .share-link { border: 0; padding: 0; }
.footer-social .share-link:hover { background: none; }
.footer-copy { text-align: center; margin: 0; }
.footer-note { grid-column: 1 / -1; text-align: center; margin: 0; }

/* Checkout header «focused» at every width: logo, profile and Корзина, no category menus (desktop menu: see 1024 px). */
/* CategoryChip row: on the catalog pages only (the menu and «Каталог» lead there); never on the checkout. */
body[data-page="catalog"] .category-strip { display: flex; }
/* Лукбук (docs/lookbooks.md): the owner's stories. Photos lead, the copy stays narrow, product cards are the catalog's own. */
.lookbook-tiles { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--journey-spacing-24); }
.lookbook-tile { display: grid; gap: var(--journey-spacing-8); text-decoration: none; }
.lookbook-tile-media { aspect-ratio: var(--photo-ratio); background: var(--surface); border-radius: var(--shape); overflow: hidden; display: block; }
.lookbook-tile-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.lookbook-tile:hover .lookbook-tile-media img { transform: scale(1.03); }
.lookbook-tile-title { font-size: var(--journey-type-title-3-size); font-weight: 600; letter-spacing: -0.01em; }
.lookbook { display: grid; gap: var(--journey-spacing-48); padding-top: var(--journey-spacing-24); }
/* Lookbook «Collection» (owner, 2026-11-10, as on the old site): the key photo with the title, the description, «Цвета» and
   «Материалы» and Share beside it; below, every photo of the collection in one 2:3 grid, each opening in ZoomViewer. */
.lookbook-head { display: grid; gap: var(--journey-spacing-24); align-items: start; }
.lookbook-cover { margin: 0; aspect-ratio: var(--photo-ratio); background: var(--surface); border-radius: var(--shape); overflow: hidden; }
.lookbook-cover img { width: 100%; height: 100%; object-fit: cover; }
.lookbook-intro { display: grid; gap: var(--journey-spacing-16); justify-items: start; align-content: start; }
.lookbook-intro h1 { font: var(--journey-type-title-1); letter-spacing: -0.01em; }
.lookbook-text { display: grid; gap: var(--journey-spacing-12); font-size: var(--journey-type-body-size); line-height: 1.55; max-width: 62ch; }
.lookbook-facts { display: grid; gap: var(--journey-spacing-8); }
/* Share: ВКонтакте, Telegram and «Скопировать ссылку» as text chips, 44 px. No Meta networks (product owner, 2026-11-10). */
.share { display: grid; gap: var(--journey-spacing-8); justify-items: start; }
.share-title { font-weight: 600; }
.share-links { display: flex; flex-wrap: wrap; gap: var(--journey-spacing-8); }
/* Share on the lookbook: IconButtons; the arrow opens a popover with «Скопировать ссылку». */
.share .share-link { padding: 0; border: var(--journey-stroke-default) solid var(--control); width: var(--journey-size-target-ios); height: var(--journey-size-target-ios); min-height: 0; justify-content: center; border-radius: var(--journey-radius-full); }
.share-more { position: relative; display: inline-flex; }
.share-more[hidden], .share-pop[hidden] { display: none; }
.share-pop { position: absolute; z-index: 5; left: 0; top: calc(100% + var(--journey-spacing-8)); padding: var(--journey-spacing-4); background: var(--surface); border: var(--journey-stroke-default) solid var(--line); border-radius: var(--shape); box-shadow: 0 var(--journey-spacing-8) var(--journey-spacing-24) color-mix(in srgb, var(--ink) 12%, transparent); }
.share-copy { display: inline-flex; align-items: center; min-height: var(--journey-size-target-ios); padding: 0 var(--journey-spacing-16); border: 0; border-radius: var(--shape); background: none; color: var(--ink); font: inherit; white-space: nowrap; cursor: pointer; }
.share-copy:hover { background: var(--subtle); }
.share-link { display: inline-flex; align-items: center; min-height: var(--journey-size-target-ios); padding: 0 var(--journey-spacing-16); border: var(--journey-stroke-default) solid var(--control); border-radius: var(--shape); background: transparent; color: var(--ink); font: inherit; text-decoration: none; cursor: pointer; }
.share-link:hover { background: var(--subtle); }
.lookbook-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--journey-spacing-12); }
/* A look is not a box here: its photos and products join the collection's grid; a titled look is introduced on a row of its own,
   and the products of all looks follow the photos. */
.look, .look-photos, .look-items, .look-items > .grid { display: contents; }
.look-copy { grid-column: 1 / -1; order: 1; display: grid; gap: var(--journey-spacing-8); max-width: 40em; padding-top: var(--journey-spacing-16); }
.look-copy h2 { font: var(--journey-type-title-2); }
.look-text { display: grid; gap: var(--journey-spacing-12); color: var(--ink); }
/* BuyLook action: a quiet half-transparent label at the bottom of the photo, centred. With a mouse it appears when the pointer is over
   the photo (or the button has keyboard focus); on touch screens, where nothing hovers, it is always there. The rest of the
   photo still opens ZoomViewer. */
.look-cell { order: 1; position: relative; min-width: 0; }
.look-cell .look-buy { position: absolute; left: 50%; bottom: var(--journey-spacing-16); transform: translateX(-50%); white-space: nowrap; min-height: var(--journey-size-target-ios); padding: 0 var(--journey-spacing-16); border-color: transparent; background: color-mix(in srgb, var(--surface) 45%, transparent); color: color-mix(in srgb, var(--ink) 78%, transparent); font-size: var(--journey-type-footnote-size); letter-spacing: 0.06em; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity .2s, background-color .2s; }
.look-cell:hover .look-buy, .look-cell .look-buy:focus-visible { opacity: 1; }
.look-cell .look-buy:hover { background: color-mix(in srgb, var(--surface) 85%, transparent); color: var(--ink); }
@media (hover: none) { .look-cell .look-buy { opacity: 1; } }
/* BuyLook: the products of a look in a sheet — photo, title and colour, price, the sizes in stock — and one button that puts
   the chosen ones into the Корзина. A product without a chosen size is left out; a sold-out one only says so. */
.buy-look { width: min(560px, 100vw); max-width: 100vw; max-height: 100dvh; margin: auto 0 0 auto; height: 100dvh; padding: 0; border: 0; background: var(--journey-color-bg-surface); color: var(--journey-color-text-primary); box-shadow: var(--journey-effect-floating); }
.buy-look::backdrop { background: color-mix(in srgb, var(--journey-color-action-pressed) 40%, transparent); }
.buy-look-body { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; }
.buy-look-head { display: flex; align-items: center; justify-content: space-between; gap: var(--journey-spacing-16); padding: var(--journey-spacing-16) var(--journey-spacing-20); border-bottom: var(--journey-stroke-default) solid var(--journey-color-border-subtle); }
.buy-look-head h2 { font: var(--journey-type-title-3); font-weight: 600; }
.buy-look-list { list-style: none; margin: 0; padding: 0 var(--journey-spacing-20); overflow: auto; }
.buy-look-item { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: var(--journey-spacing-16); padding: var(--journey-spacing-16) 0; border-bottom: var(--journey-stroke-default) solid var(--journey-color-border-subtle); }
.buy-look-media { aspect-ratio: var(--photo-ratio); border-radius: var(--journey-radius-md); overflow: hidden; background: var(--journey-color-bg-subtle); display: grid; place-items: center; }
.buy-look-media img { width: 100%; height: 100%; object-fit: cover; }
.buy-look-info { display: grid; gap: var(--journey-spacing-8); align-content: start; }
.buy-look-info a { font-weight: 600; text-decoration: none; }
.buy-look-foot { display: grid; gap: var(--journey-spacing-8); padding: var(--journey-spacing-16) var(--journey-spacing-20) calc(var(--journey-spacing-16) + env(safe-area-inset-bottom, 0px)); border-top: var(--journey-stroke-default) solid var(--journey-color-border-subtle); }
.look-photo { margin: 0; aspect-ratio: var(--photo-ratio); background: var(--surface); border-radius: var(--shape); overflow: hidden; }
.look-photo img { width: 100%; height: 100%; object-fit: cover; }
.look-photo[data-zoomable] { cursor: zoom-in; }
.look-items-title { grid-column: 1 / -1; order: 2; font: var(--journey-type-title-2); padding-top: var(--journey-spacing-32); }
.look-items .card { order: 3; }

/* TabBar (phones, as in the owner's reference): Избранное, Каталог, the wordmark for the home page, Корзина, Профиль — always
   at hand at the bottom of the screen. Not on the checkout, which stays focused. 56 px targets. */
.tabbar { display: none; }
@media (max-width: 719.98px) {
  :root { --tabbar-height: calc(56px + env(safe-area-inset-bottom, 0px)); }
  body[data-page="checkout"] { --tabbar-height: 0px; }
  body { padding-bottom: var(--tabbar-height); }
  html[data-consent="unset"] body { padding-bottom: calc(var(--tabbar-height) + var(--cookie-height, 0px)); }
  .tabbar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; z-index: 25; left: 0; right: 0; bottom: 0; height: var(--tabbar-height); padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--canvas); border-top: var(--journey-stroke-default) solid var(--line); }
  body[data-page="checkout"] .tabbar { display: none; }
  /* Product owner, 2026-11-11: with the TabBar on screen the header keeps the menu and the wordmark only — «Профиль» and
     «Корзина» live in the bar. The checkout has no TabBar, so its header keeps both. */
  body:not([data-page="checkout"]) .header-actions > a[href="/account"], body:not([data-page="checkout"]) .header-actions > .cart-link { display: none; }
  .tabbar a { display: grid; justify-items: center; align-content: center; gap: 2px; min-width: 0; text-decoration: none; color: var(--journey-color-text-secondary); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; }
  .tabbar a[aria-current] { color: var(--ink); box-shadow: inset 0 2px 0 var(--ink); }
  .tabbar-icon { position: relative; display: grid; place-items: center; width: var(--journey-size-icon-large); height: var(--journey-size-icon-large); }
  .tabbar-icon svg { width: 22px; height: 22px; }
  .tabbar-icon .cart-count { position: absolute; top: -6px; right: -10px; }
  .tabbar-home .journey-wordmark { height: 13px; color: var(--ink); }
}
/* Phones: the buy action is a StickyBuyBar (price and Button Primary, Floating shadow); the header gets compact on the
   product page and on the checkout (no category strip), and the service links live in the footer. */
@media (max-width: 719.98px) {
  body[data-page="product"] main { padding-bottom: calc(var(--journey-size-control-large) + var(--journey-spacing-32)); }
  .buy-action { position: fixed; z-index: 15; left: 0; right: 0; bottom: var(--tabbar-height, 0px); grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--journey-spacing-16);
    padding: var(--journey-spacing-12) var(--gutter); background: var(--surface); box-shadow: var(--journey-effect-floating); border-top: var(--journey-stroke-default) solid var(--line); }
  /* While the cookie banner is up, the buy action is not a bar: it stays in its place on the page, so the banner never
     covers the way to buy and the bottom of a phone screen is not three bars deep. */
  html[data-consent="unset"] .buy-action { position: static; padding: 0; background: none; box-shadow: none; border-top: 0; }
  .buy-action-price { display: block; margin: 0; font-size: var(--journey-type-headline-size); font-weight: 600; white-space: nowrap; }
  .buy-action:has([data-restock-mode]) { grid-template-columns: minmax(0, 1fr); }
  .buy-action:has([data-restock-mode]) .buy-action-price { display: none; }
  .buy-action-price .price-old { display: block; margin: 0; }
}
@media (min-width: 720px) {
  :root { --gutter: 32px; }
  .rail { grid-auto-columns: calc((100% - 2 * var(--journey-spacing-20)) / 3); gap: var(--journey-spacing-20); }
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 20px; }
  .product { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 48px; align-items: start; }
  .gallery.many { grid-auto-flow: row; grid-auto-columns: auto; overflow: visible; }
  .buy { position: sticky; top: 140px; }
  .buy h1 { font: var(--journey-type-title-1); letter-spacing: -0.01em; }
  .footer-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: var(--journey-spacing-32) var(--journey-spacing-48); padding-top: var(--journey-spacing-48); }
  .footer-links { display: grid; order: -1; grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--journey-spacing-32) var(--journey-spacing-24); padding-bottom: var(--journey-spacing-32); border-bottom: var(--journey-stroke-default) solid var(--line); }
  .site-footer .subscribe { display: grid; max-width: 480px; }
  .footer-social { display: grid; }
  .footer-bottom { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); border-top: var(--journey-stroke-default) solid var(--line); padding-top: var(--journey-spacing-16); }
  .footer-bottom .footer-cookie { justify-self: start; }
  .footer-bottom .to-top { justify-self: end; }
  .lookbook-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--journey-spacing-32) var(--journey-spacing-20); }
  .lookbook-head { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--journey-spacing-48); }
  .lookbook-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--journey-spacing-20); }
}
@media (min-width: 1024px) {
  /* Header from 1024 px, as on the old site: «Каталог» and «Лукбук» on the left, the wordmark in the centre, search, favourites,
     the cabinet and Корзина on the right. The categories open under «Каталог» (hover or keyboard focus); on the catalog pages
     they are also a row of chips, so a touch screen needs no hover. */
  .bar { height: var(--journey-size-control-large); gap: var(--journey-spacing-24); }
  .menu { display: none; }
  .header-actions .icon-link[href="/search"], .header-actions .fav-link { display: grid; }
  .wordmark .journey-wordmark { height: var(--journey-size-icon-large); }
  .header-actions .lang-switch { display: block; }
  .primary-nav { display: flex; align-self: stretch; gap: var(--journey-spacing-24); grid-column: 1; }
  .primary-nav > a { display: flex; align-items: center; }
  .nav-drop { display: none; position: absolute; left: var(--gutter); top: 100%; z-index: 21; min-width: 240px; padding: var(--journey-spacing-8); background: var(--surface); border: var(--journey-stroke-default) solid var(--line); border-radius: var(--shape); box-shadow: var(--journey-effect-floating); }
  .primary-nav:has(> a:first-child:hover) .nav-drop, .primary-nav:has(> a:first-child:focus-visible) .nav-drop, .nav-drop:hover, .nav-drop:focus-within { display: grid; }
  .nav-drop a { display: flex; align-items: center; min-height: var(--journey-size-target-ios); padding: 0 var(--journey-spacing-12); border-radius: var(--journey-radius-md); color: var(--journey-color-text-primary); }
  .nav-drop a:hover, .nav-drop a[aria-current] { background: var(--subtle); }
  body[data-page="catalog"] .category-strip { justify-content: flex-start; flex-wrap: wrap; }
  .hero-campaign .hero-copy { left: max(var(--gutter), calc(50% - var(--max) / 2 + var(--gutter))); bottom: var(--journey-spacing-64); }
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--journey-spacing-48); padding: var(--journey-spacing-48) 0; }
  .rail { grid-auto-columns: calc((100% - 3 * var(--journey-spacing-20)) / 4); }
  /* Template «Checkout»: form and the order summary side by side; the header is «focused» (logo and Корзина only). */
  body[data-page="checkout"] .narrow { max-width: var(--max); }
  .checkout { grid-template-columns: minmax(0, 1.4fr) minmax(320px, 1fr); gap: var(--journey-spacing-32); align-items: start; }
  .checkout-aside { position: sticky; top: 96px; }
  body[data-page="checkout"] .primary-nav { visibility: hidden; }
  body[data-page="checkout"] .header-actions .icon-link[href="/search"], body[data-page="checkout"] .fav-link, body[data-page="checkout"] .header-actions .lang-switch { display: none; }
  .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tiles { grid-auto-columns: calc((100% - 3 * var(--journey-spacing-8)) / 3.4); }
  :root { --gutter: 40px; }
  .grid { gap: var(--journey-spacing-32) var(--journey-spacing-8); }
  .lookbook-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lookbook-gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  html { scroll-padding-top: 80px; }
  .buy { top: 96px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }
/* Visible on the private production instance only. Normal document flow keeps navigation usable on small screens. */
.private-access-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 20px; padding: 10px 16px; background: #292922; color: #f7f4ed; font-size: 14px; line-height: 1.5; }
.private-access-banner form { margin: 0; }
.private-access-banner button { color: inherit; background: transparent; border: 1px solid currentColor; border-radius: 4px; padding: 6px 10px; font: inherit; cursor: pointer; }
.private-access-banner button:focus-visible { outline: 2px solid #f7f4ed; outline-offset: 3px; }

/* «Задать вопрос» (owner, 2026-11-11; docs/web-storefront.md): a small round button at the bottom right of every page and its
   panel of messengers. It floats above everything fixed at the bottom of the screen — the phone tab bar, the cookie banner
   (--cookie-height, measured by cookies.js) and the product page's buy bar — so it never covers them. Tokens only. */
.ask { --ask-bottom: calc(var(--tabbar-height, 0px) + var(--ask-lift, 0px) + var(--journey-spacing-16) + env(safe-area-inset-bottom, 0px)); }
html[data-consent="unset"] .ask { --ask-lift: var(--cookie-height, 0px); }
.ask-toggle { position: fixed; z-index: 24; right: var(--gutter); bottom: var(--ask-bottom); width: var(--journey-size-control); height: var(--journey-size-control); display: grid; place-items: center; padding: 0; border: 0; border-radius: var(--journey-radius-full); background: var(--journey-color-action-primary); color: var(--journey-color-icon-on-action); box-shadow: var(--journey-effect-floating); cursor: pointer; transition: background .15s; }
.ask-toggle:hover { background: var(--journey-color-action-hover); }
.ask-toggle:active { background: var(--journey-color-action-pressed); }
.ask-toggle svg { width: var(--journey-size-icon-large); height: var(--journey-size-icon-large); }
.ask-panel { position: fixed; z-index: 27; right: var(--gutter); bottom: calc(var(--ask-bottom) + var(--journey-size-control) + var(--journey-spacing-12)); width: min(360px, calc(100vw - 2 * var(--gutter))); max-height: calc(100dvh - var(--ask-bottom) - var(--journey-size-control) - var(--journey-spacing-32)); overflow: auto; display: grid; gap: var(--journey-spacing-12); padding: var(--journey-spacing-16) var(--journey-spacing-20) var(--journey-spacing-20); background: var(--surface); color: var(--ink); border: var(--journey-stroke-default) solid var(--line); border-radius: var(--journey-radius-md); box-shadow: var(--journey-effect-floating); }
.ask-head { display: flex; align-items: center; justify-content: space-between; gap: var(--journey-spacing-8); margin-right: calc(-1 * var(--journey-spacing-8)); }
.ask-title { font: var(--journey-type-headline); }
.ask-channels { display: grid; gap: var(--journey-spacing-8); }
.ask-more { display: grid; gap: var(--journey-spacing-8); justify-items: start; padding: var(--journey-spacing-12); background: var(--subtle); border-radius: var(--shape); }
.ask-number { font: var(--journey-type-headline); letter-spacing: 0.02em; }
.ask-fallback { display: grid; gap: var(--journey-spacing-4); padding-top: var(--journey-spacing-12); border-top: var(--journey-stroke-default) solid var(--line); color: var(--muted); }
.ask-fallback a { color: var(--ink); }
/* The end of the page clears the button: the footer's last row (with «Наверх») is never under it. */
.site-footer { padding-bottom: calc(var(--journey-size-control) + var(--journey-spacing-16)); }
@media (max-width: 719.98px) {
  /* Above the product page's buy bar (while it is a bar: with the cookie banner up it stands in the page). */
  html:not([data-consent="unset"]) body[data-page="product"] .ask { --ask-lift: calc(var(--journey-size-control-large) + 2 * var(--journey-spacing-12) + var(--journey-stroke-default)); }
}
@media (min-width: 720px) { .ask { --ask-bottom: calc(var(--ask-lift, 0px) + var(--journey-spacing-24)); } }