/* fonts.css */
/* Шрифти як у Release (13.10.2026): Poppins — основний (лише латиниця: кирилиці в Poppins нема,
   перевірено в Google Fonts API 13.10), кирилиця автоматично йде на Montserrat нижче;
   Cormorant italic — курсивні акценти в заголовках (<em>), з кирилицею. Усі — OFL, див. OFL.txt у теках. */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/poppins/poppins-normal-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20B3, U+20B5-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/poppins/poppins-normal-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/poppins/poppins-normal-500-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20B3, U+20B5-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/poppins/poppins-normal-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/poppins/poppins-normal-600-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20B3, U+20B5-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/poppins/poppins-normal-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Cormorant'; font-style: italic; font-weight: 400; font-display: swap; src: url('/fonts/cormorant/cormorant-italic-400-cyrillic-ext.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Cormorant'; font-style: italic; font-weight: 400; font-display: swap; src: url('/fonts/cormorant/cormorant-italic-400-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Cormorant'; font-style: italic; font-weight: 400; font-display: swap; src: url('/fonts/cormorant/cormorant-italic-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20B3, U+20B5-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Cormorant'; font-style: italic; font-weight: 400; font-display: swap; src: url('/fonts/cormorant/cormorant-italic-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Montserrat (варіативний, 400–600), © The Montserrat Project Authors, SIL Open Font License 1.1 — див. OFL.txt.
   Свої копії замість Google Fonts: без запиту до сторонніх серверів і без зсуву при завантаженні. */
/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/fonts/montserrat/montserrat-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/fonts/montserrat/montserrat-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/fonts/montserrat/montserrat-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20B3, U+20B5-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/fonts/montserrat/montserrat-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* tokens.css */
/* CORNER by Levishko — дизайн-токени вітрини.
   Єдине джерело кольору, шрифту й відступів (CLAUDE.md, «Дизайн»).
   Величини заміряні зі зразка Release (13.10.2026), код — власний. */

:root {
  /* --- кольори -------------------------------------------------------- */
  --c-bg: #ffffff;
  --c-fg: #111111;
  --c-fg-muted: #65706e;          /* «другорядний текст» Release (color-scheme-1), 5.1:1 на білому */
  --c-fg-soft: rgba(17, 17, 17, 0.8);   /* описи й довгий текст — як у Release */
  --c-line: #ebebeb;              /* рамки й лінії Release */
  --c-line-strong: #111111;
  --c-surface: #f8f8f8;           /* тло порожніх рамок (у зразку — і під фото товару) */
  --c-photo-bg: #f8f8f8;          /* як у Release; білі пекшоти CORNER лягають через multiply — без рамки */
  --c-sale: #c25151;              /* ціна зі знижкою — як у Release, 6.2:1 */
  --c-sale-badge: #d42020;        /* тло бейджа знижки; у Release #EF2D2D — білий на ньому 4.1:1, нижче норми */
  --c-tag: #5e5a59;               /* бейджі статусу (нема / під замовлення) — «tag» Release */
  --c-on-sale: #ffffff;
  --c-overlay: rgba(17, 17, 17, 0.45);
  --c-footer-bg: #111111;
  --c-footer-fg: #ffffff;
  --c-focus: #111111;

  /* --- шрифт ----------------------------------------------------------- */
  /* Як у Release: Poppins (латиниця, цифри) + Cormorant italic для акцентів (<em> у заголовках).
     У Poppins нема кирилиці (Google Fonts API, 13.10) — кирилиця падає на Montserrat. Зміна — лише тут. */
  --font: "Poppins", "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-accent: "Cormorant", Georgia, "Times New Roman", serif;

  --fs-xxs: 0.625rem;   /* 10px — кнопки, меню, хлібні крихти */
  --fs-xs: 0.75rem;     /* 12px — назва в картці, ціна в картці, підписи */
  --fs-sm: 0.875rem;    /* 14px — основний текст */
  --fs-md: 1rem;
  --fs-lg: 1.3125rem;   /* 21px — назва товару */
  --fs-xl: 1.6875rem;   /* 27px */
  --fs-xxl: 2.9375rem;  /* 47px — заголовок сторінки */

  --lh-body: 1.6;
  --lh-tight: 1.0;
  --ls-heading: -0.04em;
  --ls-caps: 0.1em;     /* кнопки */
  --ls-nav: 0.14em;     /* меню */
  --ls-label: 0.17em;   /* «РОЗМІР» */
  --ls-card: 0.04em;    /* назва в картці */

  /* --- відступи й сітка ---------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 72px;

  --gutter: 36px;                 /* поля сторінки на десктопі */
  --page-max: 1680px;
  --grid-gap-x: 24px;
  --grid-gap-y: 72px;
  --header-h: 66px;
  --photo-ratio: 3 / 4;           /* як у Release; фото 4:5 заповнюють кадр (cover), обріз ~3 % з боків */

  /* --- форма ---------------------------------------------------------- */
  --radius-pill: 50px;
  --radius-badge: 4px;
  --radius-input: 8px;
  --hairline: 0.5px;
  --option-size: 26px;
  --tap: 44px;                    /* мінімальна ціль дотику */

  /* --- рух (заміряно в зразку: секції 300 мс, фото 600 мс, перший екран 850–1150 мс) --- */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);   /* поява: швидкий старт, м'яке гальмування */
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);    /* зникнення: прискорення */
  --t-fast: 0.2s;
  --t-base: 0.3s;
  --t-reveal: 0.45s;
  --t-image: 0.6s;
  --t-slow: 0.7s;
  --t-hero: 1.15s;
  --reveal-shift: 12px;                        /* ui-ux-pro-max: 8–16 px, щоб читалось як проявлення */
  --stagger: 60ms;
}

@media (max-width: 989px) {
  :root {
    --gutter: 16px;
    --grid-gap-x: 16px;             /* Release на телефоні: 16 px між картками */
    --grid-gap-y: 40px;
    --fs-xxl: 1.6875rem;            /* 27 px — заголовки на телефоні, як у Release */
    --header-h: 64px;
  }
}

/* shop.css */
/* CORNER by Levishko — вітрина. Власний код; вигляд — за зразком Release.
   Кольори, шрифт і відступи — лише з tokens.css. */

/* ---------------------------------------------------------------- база */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--c-bg); color: var(--c-fg);
  font: 400 var(--fs-sm)/var(--lh-body) var(--font);
  -webkit-font-smoothing: antialiased;
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 3px; }
[hidden] { display: none !important; }   /* атрибут hidden сильніший за display компонентів */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: var(--space-4); top: -100px; z-index: 100; background: var(--c-fg); color: var(--c-bg); padding: var(--space-2) var(--space-4); }
.skip-link:focus { top: var(--space-2); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

.container { width: 100%; max-width: var(--page-max); margin: 0 auto; padding: 0 var(--gutter); }
.caps { font-size: var(--fs-xxs); letter-spacing: var(--ls-nav); text-transform: uppercase; }
.muted { color: var(--c-fg-muted); }
.rte p + p, .rte p + ul, .rte ul + p { margin-top: 1em; }
.rte ul { list-style: disc; padding-left: 1.2em; }
.rte a { text-decoration: underline; text-underline-offset: 3px; }
.rte h2, .rte h3 { font-weight: 500; line-height: 1.3; margin: 1.8em 0 0.6em; letter-spacing: -0.02em; }
.rte > h2:first-child, .rte > h3:first-child { margin-top: 0; }
.rte h2 { font-size: var(--fs-lg); }
.rte h3 { font-size: var(--fs-md); }
.rte figure { margin: var(--space-5) 0; }

/* ---------------------------------------------------------------- кнопки */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 45px; padding: 16px 24px; border: var(--hairline) solid var(--c-fg);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xxs); line-height: 1; letter-spacing: var(--ls-caps); text-transform: uppercase;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
  cursor: pointer;
}
.btn--filled { background: var(--c-fg); color: var(--c-bg); }
.btn--filled:hover { background: transparent; color: var(--c-fg); }
.btn--outline { background: transparent; color: var(--c-fg); }
.btn--outline:hover { background: var(--c-fg); color: var(--c-bg); }
.btn--light { border-color: var(--c-bg); color: var(--c-bg); background: transparent; }
.btn--light:hover { background: var(--c-bg); color: var(--c-fg); }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; }
.btn.is-loading { position: relative; color: transparent; }
.btn.is-loading::after {
  content: ""; position: absolute; width: 14px; height: 14px; border: 1.5px solid currentColor;
  border-color: var(--c-bg) transparent var(--c-bg) transparent; border-radius: 50%; animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.link-caps {
  font-size: var(--fs-xxs); letter-spacing: var(--ls-caps); text-transform: uppercase;
  padding-bottom: 4px; border-bottom: var(--hairline) solid currentColor; min-height: 24px; display: inline-flex; align-items: center;
}
/* зона натискання 44px без зміни вигляду (ui-ux-pro-max: touch target) */
.link-caps, .stockist__link { position: relative; }
.link-caps::before, .stockist__link::before { content: ""; position: absolute; inset: -10px -4px; }

/* ---------------------------------------------------------------- шапка */
.header {
  position: sticky; top: 0; z-index: 40; background: var(--c-bg); color: var(--c-fg);
  border-bottom: var(--hairline) solid transparent;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.header.is-scrolled { border-bottom-color: var(--c-line); }
.header__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: var(--header-h); }
.header__logo { display: block; justify-self: center; }
.header__logo img { height: 40px; width: auto; transition: filter var(--t-fast) var(--ease); }   /* файл — чорний логотип на прозорому */
.header__right { justify-self: end; display: flex; align-items: center; gap: var(--space-2); }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; min-width: var(--tap); min-height: var(--tap); position: relative; }
.icon-btn svg { width: 20px; height: 20px; }
.cart-count {
  position: absolute; top: 6px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: var(--c-fg); color: var(--c-bg); font-size: 9px; line-height: 16px; text-align: center;
}
.cart-count[hidden] { display: none; }
.lang-switch { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--space-2); }

/* прозора шапка над першим екраном головної */
.has-hero .header:not(.is-scrolled) { position: fixed; left: 0; right: 0; background: transparent; color: var(--c-bg); }
.has-hero .header:not(.is-scrolled) .header__logo img { filter: invert(1); }
.has-hero .header:not(.is-scrolled) .cart-count { background: var(--c-bg); color: var(--c-fg); }

/* меню десктопа */
.nav { display: flex; align-items: center; gap: var(--space-5); }
.nav__link {
  display: inline-flex; align-items: center; gap: 4px; min-height: var(--tap);
  font-size: var(--fs-xxs); letter-spacing: var(--ls-nav); text-transform: uppercase;
}
.nav__link svg { width: 10px; height: 10px; transition: transform var(--t-fast) var(--ease); }
.nav__item { position: relative; }
.nav__item:hover > .nav__link svg, .nav__item:focus-within > .nav__link svg { transform: rotate(180deg); }
.nav__dropdown {
  position: absolute; top: 100%; left: calc(var(--space-4) * -1); min-width: 220px; padding: var(--space-4);
  background: var(--c-bg); color: var(--c-fg); border: var(--hairline) solid var(--c-line);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), visibility var(--t-fast);
}
.nav__item:hover > .nav__dropdown, .nav__item:focus-within > .nav__dropdown { opacity: 1; visibility: visible; transform: none; }
.nav__dropdown a { display: flex; align-items: center; min-height: 36px; font-size: var(--fs-xxs); letter-spacing: var(--ls-nav); text-transform: uppercase; }
.nav__dropdown a:hover, .nav__link:hover { text-decoration: underline; text-underline-offset: 4px; }
.menu-toggle { display: none; }

@media (max-width: 989px) {
  .nav { display: none; }
  .menu-toggle { display: inline-flex; }
  .header__logo img { height: 32px; }
}

/* ---------------------------------------------------------------- висувні панелі */
.drawer { position: fixed; inset: 0; z-index: 60; visibility: hidden; }
.drawer.is-open { visibility: visible; }
.drawer__overlay { position: absolute; inset: 0; background: var(--c-overlay); opacity: 0; transition: opacity var(--t-fast) var(--ease); }
.drawer.is-open .drawer__overlay { opacity: 1; }
.drawer__panel {
  position: absolute; top: 0; bottom: 0; width: min(600px, 100%); background: var(--c-bg); color: var(--c-fg);
  display: flex; flex-direction: column; transition: transform 0.45s cubic-bezier(0.74, -0.01, 0.26, 1);
}
.drawer--right .drawer__panel { right: 0; transform: translateX(100%); }
.drawer--left .drawer__panel { left: 0; transform: translateX(-100%); width: min(420px, 100%); }
.drawer.is-open .drawer__panel { transform: none; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-5) var(--space-6) var(--space-4); }
.drawer__title { font-size: 2.25rem; line-height: 1.1; font-weight: 400; letter-spacing: var(--ls-heading); }
.drawer__title sup { font-size: var(--fs-xs); margin-left: 2px; }
.drawer__body { flex: 1; overflow-y: auto; padding: 0 var(--space-6); }
.drawer__foot { border-top: var(--hairline) solid var(--c-line); padding: var(--space-5) var(--space-6); }
@media (max-width: 989px) {
  .drawer__head, .drawer__body, .drawer__foot { padding-left: var(--space-4); padding-right: var(--space-4); }
}
body.is-locked { overflow: hidden; }

.mobile-menu a, .mobile-menu summary { display: flex; align-items: center; justify-content: space-between; min-height: 52px; border-bottom: var(--hairline) solid var(--c-line); font-size: var(--fs-xs); letter-spacing: var(--ls-nav); text-transform: uppercase; cursor: pointer; }
.mobile-menu summary::-webkit-details-marker { display: none; }
.mobile-menu summary svg { width: 12px; height: 12px; transition: transform var(--t-fast) var(--ease); }
.mobile-menu details[open] summary svg { transform: rotate(180deg); }
.mobile-menu details a { padding-left: var(--space-4); }
.mobile-menu__lang { margin-top: var(--space-5); }

/* ---------------------------------------------------------------- перший екран */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 520px; overflow: hidden; background: #000; color: var(--c-bg); }
.hero picture, .hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__content { position: absolute; left: 0; right: 0; bottom: 12vh; display: flex; justify-content: center; }

/* ---------------------------------------------------------------- заголовок сторінки */
.page-head { padding: var(--space-7) 0 var(--space-6); text-align: center; }
.breadcrumbs { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); font-size: var(--fs-xxs); font-weight: 500; letter-spacing: var(--ls-caps); text-transform: uppercase; }
.breadcrumbs li + li::before { content: "/"; margin-right: var(--space-2); }
.breadcrumbs a { text-decoration: underline; text-underline-offset: 3px; }
 /* курсивний акцент у заголовках, як у Release: <em> = Cormorant italic, на 20 % більший */
h1 em, h2 em, h3 em, .page-title em, .section__title em, .banner__title em, .hero__title em {
  font-family: var(--font-accent); font-style: italic; font-weight: 400; font-size: 1.2em; letter-spacing: -0.02em; line-height: 0.8;
}
.page-title { font-size: var(--fs-xxl); font-weight: 400; line-height: var(--lh-tight); letter-spacing: var(--ls-heading); }
.page-count { margin-top: var(--space-3); color: var(--c-fg-muted); font-size: var(--fs-xs); }

/* ---------------------------------------------------------------- сітка товарів */
.product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--grid-gap-y) var(--grid-gap-x); padding-bottom: var(--space-8); }
@media (max-width: 989px) { .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.card { position: relative; display: flex; flex-direction: column; gap: var(--space-3); }
.card__media { position: relative; display: block; aspect-ratio: var(--photo-ratio); background: var(--c-photo-bg); overflow: hidden; }
.card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; transition: opacity var(--t-slow) var(--ease); }
.card__media img + img { opacity: 0; mix-blend-mode: normal; }  /* друге фото (на моделі) — без змішування */
/* заміна фото при наведенні: перше зникає повністю. multiply змішує шари між собою — без цього
   перше фото просвічує крізь друге («примарний» одяг, знайдено 14.10) */
@media (hover: hover) {
  .card:hover .card__media img + img { opacity: 1; }
  .card:hover .card__media img:first-child:not(:only-child) { opacity: 0; }
}
/* Свайп фото в каталозі (телефон, власниця 20.10). Верстка картки НЕ змінюється: фото лишаються шарами одне на
   одному в тому самому кадрі, змішування multiply — з сірим тлом кадру, як було. Стрічка з прокруткою (як у Release)
   тут не годиться: iOS Safari малює вміст прокручуваного блоку окремим шаром, multiply перестає бачити сіре тло, і фото
   стають білими (власниця, iPhone, 20.10). Тому кадри зсуває shop.js на дотик: pan-y лишає вертикальну прокрутку
   браузеру, горизонтальний жест — нам. Фото з третього існують лише для свайпу: ширше — приховані (lazy — не вантажаться). */
.card__media img:nth-child(n+3) { display: none; }
@media (max-width: 749px) {
  /* z-index 1: над невидимим шаром «уся картка клікабельна» (.card__title a::after, inset 0) — без цього палець на
     реальному телефоні влучає в той шар, а не у фото, і свайп не отримує дотиків (діагностика на iPhone 20.10).
     «+» (z 2) і SOLD OUT (z 1, далі в розмітці) лишаються зверху; тап по фото — те саме посилання на товар. */
  .card__media--swipe { touch-action: pan-y; z-index: 1; }
  .card__media--swipe img:nth-child(n+3) { display: block; }
  /* решта кадрів — за правим краєм, обрізані; змішування multiply, як у галереї товару: пекшот на білому третім кадром
     лягає на те саме сіре тло, а не білим прямокутником (на моделі — різниця ~3 %, непомітна) */
  .card__media--swipe img:not(:first-child) { opacity: 1; transform: translateX(100%); mix-blend-mode: multiply; }
  .card__media--swipe img { -webkit-user-drag: none; user-select: none; }
}
.card__badges { position: absolute; top: var(--space-3); left: var(--space-3); z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); }
.badge { display: inline-block; padding: 4px 8px; border-radius: var(--radius-badge); font-size: var(--fs-xxs); line-height: 1.25; letter-spacing: var(--ls-caps); text-transform: uppercase; font-weight: 500; }
.badge--sale { background: var(--c-sale-badge); color: var(--c-on-sale); }
.badge--soldout { background: var(--c-tag); color: var(--c-bg); }
.badge--backorder { background: var(--c-tag); color: var(--c-bg); }
.card__title { font-size: var(--fs-xs); font-weight: 600; line-height: 1.25; letter-spacing: var(--ls-card); text-transform: uppercase; }
.card__title a::after { content: ""; position: absolute; inset: 0; }   /* уся картка клікабельна */
.card__sizes { font-size: var(--fs-xs); color: var(--c-fg-muted); }

.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); }
.price--card { font-size: var(--fs-sm); }
.price__old { text-decoration: line-through; color: var(--c-fg); }
.price__sale { color: var(--c-sale); }

/* ---------------------------------------------------------------- товар */
.product { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--space-6); padding: var(--space-4) 0 var(--space-8); }
.product__gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); align-content: start; }
.product__gallery figure { aspect-ratio: var(--photo-ratio); background: var(--c-photo-bg); overflow: hidden; }
.product__gallery button { display: block; width: 100%; height: 100%; cursor: zoom-in; }
.product__gallery img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.product__thumbs { display: none; }
.product__info { position: sticky; top: calc(var(--header-h) + var(--space-4)); align-self: start; display: flex; flex-direction: column; gap: var(--space-5); }
.product__title { font-size: var(--fs-lg); font-weight: 400; line-height: 1.25; letter-spacing: var(--ls-heading); }
.product__price { font-size: var(--fs-sm); }
.product__sku { font-size: var(--fs-xs); color: var(--c-fg-muted); }

.option { border: 0; margin: 0; padding: 0; min-width: 0; }
.option__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-3); }
.option__label { font-size: var(--fs-xs); letter-spacing: var(--ls-label); text-transform: uppercase; }
.option__label b { font-weight: 600; }
.option__values { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.option__value input { position: absolute; opacity: 0; pointer-events: none; }
.option__value span {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--tap); min-height: var(--tap); padding: 0 var(--space-3);
  border: var(--hairline) solid var(--c-line); font-size: var(--fs-xxs); letter-spacing: var(--ls-caps); text-transform: uppercase;
  cursor: pointer; transition: border-color var(--t-fast) var(--ease);
}
.option__value span:hover { border-color: var(--c-fg); }
.option__value input:checked + span { border-color: var(--c-fg); box-shadow: inset 0 0 0 1px var(--c-fg); }
.option__value input:focus-visible + span { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.option__value.is-unavailable span { color: var(--c-fg-muted); }
.option__value.is-unavailable span::after {   /* перекреслений розмір, як у зразку */
  content: ""; position: absolute; left: 6px; right: 6px; top: 50%; border-top: var(--hairline) solid var(--c-fg-muted); transform: rotate(-20deg);
}
.product__actions { display: flex; flex-direction: column; gap: var(--space-3); }
.product__note { font-size: var(--fs-xs); color: var(--c-fg-muted); }

.accordion { border-top: var(--hairline) solid var(--c-line); }
.accordion details { border-bottom: var(--hairline) solid var(--c-line); }
.accordion summary {
  display: flex; align-items: center; justify-content: space-between; min-height: 52px; cursor: pointer; list-style: none;
  font-size: var(--fs-xxs); letter-spacing: var(--ls-caps); text-transform: uppercase;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary svg { width: 12px; height: 12px; transition: transform var(--t-fast) var(--ease); }
.accordion details[open] summary svg { transform: rotate(45deg); }
.accordion__body { padding: 0 0 var(--space-5); }

/* липка смуга «в кошик», коли основна кнопка поза екраном */
.sticky-buy {
  position: fixed; left: 0; right: 0; top: 0; z-index: 35; background: var(--c-bg); border-bottom: var(--hairline) solid var(--c-line);
  transform: translateY(-100%); transition: transform 0.3s var(--ease);
}
.sticky-buy.is-visible { transform: translateY(var(--header-h)); }
.sticky-buy__inner { display: flex; align-items: center; gap: var(--space-4); padding-top: var(--space-2); padding-bottom: var(--space-2); }
.sticky-buy__img { width: 36px; aspect-ratio: var(--photo-ratio); object-fit: cover; mix-blend-mode: multiply; background: var(--c-photo-bg); }
.sticky-buy__name { font-size: var(--fs-xs); font-weight: 600; }
.sticky-buy .btn { margin-left: auto; min-height: 36px; padding: 12px 20px; }

@media (max-width: 989px) {
  .product { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); padding-top: 0; }
  .product__gallery { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 0; margin: 0 calc(var(--gutter) * -1); scrollbar-width: none; }
  .product__gallery::-webkit-scrollbar { display: none; }
  .product__gallery figure { flex: 0 0 100%; scroll-snap-align: start; }
  .product__thumbs { display: flex; gap: var(--space-2); overflow-x: auto; }
  .product__thumbs button { flex: 0 0 64px; aspect-ratio: var(--photo-ratio); background: var(--c-photo-bg); border: 1px solid var(--c-line); }
  .product__thumbs button[aria-current="true"] { border-color: var(--c-fg); }
  .product__thumbs img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
  .product__info { position: static; }
  .sticky-buy { top: auto; bottom: 0; transform: translateY(100%); border-bottom: 0; border-top: var(--hairline) solid var(--c-line); }
  .sticky-buy.is-visible { transform: none; }
}

/* ---------------------------------------------------------------- діалоги */
dialog.modal { border: 0; padding: 0; max-width: min(560px, calc(100vw - 32px)); width: 100%; color: var(--c-fg); background: var(--c-bg); }
dialog.modal::backdrop { background: var(--c-overlay); }
.modal__head { display: flex; justify-content: space-between; align-items: center; padding: var(--space-5) var(--space-5) var(--space-3); }
.modal__title { font-size: var(--fs-lg); font-weight: 400; letter-spacing: var(--ls-heading); }
.modal__body { padding: 0 var(--space-5) var(--space-5); }
.size-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); text-align: center; }
.size-table th, .size-table td { padding: var(--space-3) var(--space-2); border-bottom: var(--hairline) solid var(--c-line); }
.size-table th { font-weight: 500; font-size: var(--fs-xs); letter-spacing: var(--ls-caps); text-transform: uppercase; }
.size-table__note { display: none; }
/* Таблиця розмірів на телефоні (ТЗ власниці 20.10, PDF «Mobile size guide»). Одиниці переїжджають із заголовків колонок у
   примітку під таблицею (заголовки в один рядок); хрестик без рамки фокусу — її малював iOS Safari, бо showModal ставить
   фокус на першу кнопку («чорна квадратна рамка»); зона дотику 44×44 лишається. Вікно — по центру; за нестачі висоти
   гортається всередині. Комп'ютер без змін (там «, см» у заголовках і без примітки). */
@media (max-width: 749px) {
  #size-guide { max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; }
  #size-guide .modal__head { padding: 20px 12px 8px 24px; }
  #size-guide .modal__title { font-size: 21px; font-weight: 400; line-height: 1.3; text-align: left; }
  #size-guide [data-modal-close]:focus { outline: none; }
  #size-guide [data-modal-close] svg { width: 20px; height: 20px; }
  #size-guide .modal__body { padding: 0 24px 24px; }
  .size-table__unit { display: none; }
  .size-table th, .size-table td { height: 48px; padding: 0 4px; vertical-align: middle; border-bottom: var(--hairline) solid var(--c-line); }
  .size-table th { font-size: 11px; font-weight: 500; letter-spacing: 0.08em; }
  .size-table td { font-size: 14px; font-weight: 400; }
  .size-table td:first-child { font-weight: 500; }
  .size-table__note { display: block; margin-top: 16px; font-size: 11px; line-height: 1.4; color: var(--c-fg-muted); }
}

.field { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.field label { font-size: var(--fs-xs); }
.input { width: 100%; min-height: 45px; padding: 0 var(--space-4); border: var(--hairline) solid var(--c-fg); border-radius: var(--radius-input); font: inherit; font-size: var(--fs-md); background: var(--c-bg); color: var(--c-fg); }
.form-msg { font-size: var(--fs-xs); margin-top: var(--space-2); }
.form-msg.is-error { color: var(--c-sale); }
.hp { position: absolute; left: -9999px; }

.lightbox { position: fixed; inset: 0; z-index: 80; background: rgba(0, 0, 0, 0.92); display: none; align-items: center; justify-content: center; }
.lightbox.is-open { display: flex; }
.lightbox img { max-width: 92vw; max-height: 88vh; width: auto; height: auto; object-fit: contain; }
.lightbox button { position: absolute; color: #fff; min-width: var(--tap); min-height: var(--tap); }
.lightbox__close { top: var(--space-4); right: var(--space-4); }
.lightbox__prev { left: var(--space-4); top: 50%; }
.lightbox__next { right: var(--space-4); top: 50%; }
.lightbox svg { width: 24px; height: 24px; }

/* ---------------------------------------------------------------- кошик */
.cart-line { display: grid; grid-template-columns: 100px 1fr auto; gap: var(--space-4); padding: var(--space-4) 0; border-bottom: var(--hairline) solid var(--c-line); }
.cart-line__img { aspect-ratio: var(--photo-ratio); background: var(--c-photo-bg); object-fit: cover; mix-blend-mode: multiply; width: 100px; }
.cart-line__name { font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--ls-card); text-transform: uppercase; }
.cart-line__meta { font-size: var(--fs-xs); color: var(--c-fg-muted); margin-top: var(--space-1); }
.cart-line__side { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; font-size: var(--fs-xs); }
.cart-line__remove { min-width: var(--tap); min-height: var(--tap); display: inline-flex; align-items: center; justify-content: flex-end; }
.cart-line__remove svg { width: 16px; height: 16px; }
.cart-line.is-unavailable { opacity: 0.55; }
.cart-empty { padding: var(--space-7) 0; text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-5); }
.cart-total { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--space-3); }
.cart-total__label { font-size: var(--fs-lg); letter-spacing: var(--ls-heading); }
.cart-total__value { font-size: var(--fs-lg); font-weight: 500; }
.cart-note { font-size: var(--fs-xs); color: var(--c-fg-muted); margin-bottom: var(--space-4); }
.cart-terms { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--fs-xs); margin-bottom: var(--space-4); }
.cart-terms input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--c-fg); }
.cart-terms a { text-decoration: underline; }
.cart-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.cart-page { display: grid; grid-template-columns: minmax(0, 1fr) 432px; gap: var(--space-8); padding: var(--space-6) 0 var(--space-8); align-items: start; }
.breadcrumbs--center { justify-content: center; padding-top: var(--space-7); }
.cart-page__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); }
.cart-page__head .page-title sup, .drawer__title sup { font-size: var(--fs-xs); letter-spacing: 0; margin-left: 4px; vertical-align: super; }
.cart-page__cols { display: flex; justify-content: space-between; padding-bottom: var(--space-3); border-bottom: var(--hairline) solid var(--c-line);
                   font-size: var(--fs-xxs); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--c-fg-muted); }
.cart-page__summary { position: sticky; top: calc(var(--header-h) + var(--space-4)); align-self: start; padding: var(--space-6); background: rgba(17, 17, 17, 0.05); }
@media (max-width: 989px) { .cart-page { grid-template-columns: 1fr; gap: var(--space-5); } .cart-actions { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- колекції */
.collection-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-7) var(--grid-gap-x); padding-bottom: var(--space-8); }
.collection-card { display: flex; flex-direction: column; gap: var(--space-3); }
.collection-card__media { aspect-ratio: 3 / 4; background: var(--c-surface); overflow: hidden; }
.collection-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
@media (hover: hover) { .collection-card:hover img { transform: scale(1.03); } }
.collection-card__title { text-align: center; font-size: clamp(1.5rem, 2.5vw, 2.25rem); line-height: 1.25; letter-spacing: var(--ls-heading); }
@media (max-width: 989px) { .collection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--grid-gap-x); } }

.story { max-width: 760px; margin: 0 auto; text-align: center; padding-bottom: var(--space-7); }
.story__intro { font-size: var(--fs-md); }
.story__more { margin-top: var(--space-5); text-align: left; }
.story__more summary { list-style: none; display: flex; justify-content: center; cursor: pointer; }
.story__more summary::-webkit-details-marker { display: none; }
.story__more[open] summary { display: none; }
.story__more .rte { margin-top: var(--space-4); }
.gallery { columns: 2; column-gap: var(--grid-gap-x); padding-bottom: var(--space-8); }
.gallery button { display: block; width: 100%; margin-bottom: var(--grid-gap-x); break-inside: avoid; cursor: zoom-in; background: var(--c-surface); }
.gallery img { width: 100%; }
.article { max-width: 760px; margin: 0 auto; padding-bottom: var(--space-8); }
.article figure img { width: 100%; }
@media (max-width: 600px) { .gallery { columns: 1; } }

/* ---------------------------------------------------------------- текстові сторінки */
.text-page { max-width: 760px; margin: 0 auto; padding-bottom: var(--space-8); }
.text-page video { margin: 0 auto; max-height: 70vh; }

/* ---------------------------------------------------------------- підвал */
.footer { background: var(--c-footer-bg); color: var(--c-footer-fg); padding: var(--space-8) 0 0; }
.footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-6); }
.footer__heading { font-size: var(--fs-xxs); font-weight: 500; letter-spacing: var(--ls-caps); text-transform: uppercase; margin-bottom: var(--space-4); color: rgba(255, 255, 255, 0.6); }
.footer__list a { display: inline-flex; min-height: var(--tap); align-items: center; font-weight: 500; }
.footer__list a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer__brand img { width: min(260px, 70%); filter: invert(1); }
.footer__tagline { margin-top: var(--space-4); max-width: 420px; color: rgba(255, 255, 255, 0.75); }
.footer__social { display: flex; gap: var(--space-2); margin-top: var(--space-5); }
.footer__social a { min-width: var(--tap); min-height: var(--tap); display: inline-flex; align-items: center; justify-content: center; }
.footer__social svg { width: 20px; height: 20px; }
.footer__bottom { margin-top: var(--space-8); padding: var(--space-5) 0; border-top: var(--hairline) solid rgba(255, 255, 255, 0.2); font-size: var(--fs-xs); color: rgba(255, 255, 255, 0.6); display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.footer__grid > * { min-width: 0; }
@media (max-width: 989px) { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer__brand { grid-column: 1 / -1; } }

/* ---------------------------------------------------------------- 404 */
.not-found { padding: var(--space-8) 0; text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-5); }

/* ---------------------------------------------------------------- повідомлення */
.toast { position: fixed; left: 50%; bottom: var(--space-5); z-index: 90; transform: translate(-50%, 200%); background: var(--c-fg); color: var(--c-bg); padding: var(--space-3) var(--space-5); border-radius: var(--radius-pill); font-size: var(--fs-xs); transition: transform 0.3s var(--ease); }
.toast.is-visible { transform: translate(-50%, 0); }
.accordion__body { color: var(--c-fg-soft); }

/* ---------------------------------------------------------------- телефон як у Release (14.10) */
.menu-toggle__close { display: none; }
.footer__col summary { list-style: none; display: flex; align-items: center; justify-content: space-between; cursor: default; }
.footer__col summary::-webkit-details-marker { display: none; }
.footer__col summary svg { display: none; width: 14px; height: 14px; transition: transform var(--t-fast) var(--ease); }
@media (max-width: 989px) {
  /* меню на весь екран під шапкою; шапка лишається зверху, бургер стає хрестиком */
  body.menu-open .header { z-index: 70; background: var(--c-bg); color: var(--c-fg); border-bottom-color: var(--c-line); }
  body.menu-open .header .header__logo img { filter: none; }
  body.menu-open .menu-toggle__open { display: none; }
  body.menu-open .menu-toggle__close { display: inline-flex; }
  .drawer--left { top: var(--header-h); }
  .drawer--left .drawer__overlay { display: none; }
  .drawer--left .drawer__panel { width: 100%; transform: translateY(-8px); opacity: 0; transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); }
  .drawer--left.is-open .drawer__panel { transform: none; opacity: 1; }
  .drawer--left .drawer__head { display: none; }
  .mobile-menu { padding-top: var(--space-2); display: flex; flex-direction: column; }
  .mobile-menu > a, .mobile-menu > details > summary { min-height: 61px; font-size: 1.3125rem; letter-spacing: var(--ls-heading); text-transform: none; }
  .mobile-menu summary svg { width: 16px; height: 16px; }
  .mobile-menu details[open] summary svg { transform: rotate(45deg); }
  .mobile-menu__sub { display: flex; flex-direction: column; padding: var(--space-2) 0 var(--space-3); border-bottom: var(--hairline) solid var(--c-line); }
  .mobile-menu details .mobile-menu__sub a { min-height: 44px; border: 0; padding-left: 0; font-size: var(--fs-md); letter-spacing: 0; text-transform: none; color: var(--c-fg-soft); }
  .mobile-menu__foot { margin-top: auto; padding: var(--space-5) 0 calc(var(--space-5) + env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: space-between; }
  .mobile-menu__foot a { border: 0; min-height: var(--tap); }
  .mobile-menu .mobile-menu__lang { font-size: var(--fs-xs); letter-spacing: var(--ls-nav); text-transform: uppercase; }
  .mobile-menu__social { display: flex; gap: var(--space-2); }
  .mobile-menu__social a { min-width: var(--tap); justify-content: center; }
  .mobile-menu__social svg { width: 18px; height: 18px; }

  /* підвал: розгортальні списки (Release: рядок 72 px) */
  .footer__col { border-bottom: var(--hairline) solid rgba(255, 255, 255, 0.2); }
  .footer__col summary { min-height: 72px; margin: 0; cursor: pointer; }
  .footer__col summary svg { display: block; }
  .footer__col[open] summary svg { transform: rotate(45deg); }
  .footer__col .footer__list { padding-bottom: var(--space-4); }
  .footer__grid { grid-template-columns: 1fr; gap: 0; }
  .footer__brand { padding-bottom: var(--space-6); }
}
@media (max-width: 989px) {
  /* відкрите меню сильніше за прозору шапку поверх банера */
  body.menu-open .header, .has-hero.menu-open .header:not(.is-scrolled) { background: var(--c-bg); color: var(--c-fg); }
  .has-hero.menu-open .header:not(.is-scrolled) .header__logo img { filter: none; }
  .has-hero.menu-open .header:not(.is-scrolled) .cart-count { background: var(--c-fg); color: var(--c-bg); }
}
/* швидке додавання на дотикових екранах — світла заокруглена кнопка, як у Release */
@media (hover: none) {
  .card__quick { background: rgba(255, 255, 255, 0.92); color: var(--c-fg); border-radius: 8px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); }
  .card__quick:hover { background: var(--c-bg); }
}

/* банер згоди на cookies (як Complianz на живому; лише коли ввімкнено трекери) */
.consent { position: fixed; z-index: 90; left: var(--space-4); right: var(--space-4); bottom: var(--space-4); max-width: 560px;
  padding: var(--space-5); background: var(--c-bg); color: var(--c-fg); border: 1px solid var(--c-line); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); }
.consent__text { font-size: var(--fs-xs); line-height: 1.55; margin: 0 0 var(--space-4); color: var(--c-fg-soft); }
.consent__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.consent__actions .btn { flex: 1 1 140px; }

/* ---------------------------------------------------------------- ТЗ №1 (16.10): каталог */
/* позначки на фото: текст без плашки — SALE червоний, SOLD OUT стриманий */
.card__flag { position: absolute; top: var(--space-3); left: var(--space-3); z-index: 1; pointer-events: none;
  font-size: var(--fs-xxs); line-height: 1.25; letter-spacing: var(--ls-caps); text-transform: uppercase; font-weight: 500; }
.card__flag--sale { color: var(--c-sale); }
.card__flag--soldout { color: var(--c-fg); }
.price__new { color: var(--c-fg); }
.price--card { flex-wrap: nowrap; }

/* «+»: чорна квадратна, менша, щоб не закривала силует; ціль дотику лишається 44 px */
.card .card__quick { width: 34px; height: 34px; right: var(--space-2); bottom: var(--space-2); }
.card .card__quick svg { width: 15px; height: 15px; }
.card__quick::before { content: ""; position: absolute; inset: -5px; }
@media (hover: none) {
  .card .card__quick, .card .card__quick:hover { background: var(--c-fg); color: var(--c-bg); border-radius: var(--radius-badge); box-shadow: none; }
}

/* сортування над сіткою */
.sortbar { display: flex; justify-content: flex-start; padding: var(--space-4) 0 var(--space-5); }
.sortbar__menu { position: relative; }
.sortbar__toggle { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tap); cursor: pointer; list-style: none;
  font-size: var(--fs-xs); letter-spacing: var(--ls-caps); text-transform: uppercase; }
.sortbar__toggle::-webkit-details-marker { display: none; }
.sortbar__toggle svg { width: 12px; height: 12px; transition: transform var(--t-fast) var(--ease); }
.sortbar__menu[open] .sortbar__toggle svg { transform: rotate(180deg); }
.sortbar__list { position: absolute; z-index: 30; left: 0; top: 100%; min-width: 230px; margin: 0; padding: var(--space-2) 0; list-style: none;
  background: var(--c-bg); border: var(--hairline) solid var(--c-line); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); }
.sortbar__list a { display: flex; align-items: center; min-height: var(--tap); padding: 0 var(--space-4); font-size: var(--fs-sm); color: var(--c-fg-muted); }
.sortbar__list a:hover { color: var(--c-fg); }
.sortbar__list a[aria-current="true"] { color: var(--c-fg); font-weight: 600; }
.sortbar__list a[aria-current="true"]::after { content: "✓"; margin-left: auto; padding-left: var(--space-3); font-weight: 400; }

/* довгий e-mail у підвалі не розпирає сторінку на вузьких ноутбуках */
.footer__list a { overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- 16.10 (Георгій): ціни й позначки як у каталозі скрізь */
.price__sale { color: var(--c-fg); }   /* нова ціна — чорна: товар, швидке додавання, кошик, оформлення */
.product__flag { display: inline-block; margin-bottom: var(--space-2); font-size: var(--fs-xxs); line-height: 1.25;
  letter-spacing: var(--ls-caps); text-transform: uppercase; font-weight: 500; color: var(--c-fg); }
.product__flag--sale { color: var(--c-sale); }

/* ---------------------------------------------------------------- ТЗ №7: шапка, головна, підвал, мобільне меню */
/* логотип більший приблизно на 20 % */
.header__logo img { height: 48px; }
@media (max-width: 989px) { .header__logo img { height: 38px; } }
@media (max-width: 359px) { .header__logo img { height: 32px; } }
.header__right { gap: 0; }

/* вибір мови — глобус із випадним списком */
.lang-menu { position: relative; }
.lang-menu > summary { list-style: none; cursor: pointer; }
.lang-menu > summary::-webkit-details-marker { display: none; }
.lang-menu__list { position: absolute; right: 0; top: 100%; z-index: 30; min-width: 160px; margin: 0; padding: var(--space-2) 0; list-style: none;
  background: var(--c-bg); color: var(--c-fg); border: var(--hairline) solid var(--c-line); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); }
.lang-menu__list a { display: flex; align-items: center; min-height: var(--tap); padding: 0 var(--space-4); font-size: var(--fs-sm); color: var(--c-fg-muted); }
.lang-menu__list a:hover, .lang-menu__list a[aria-current="true"] { color: var(--c-fg); }
.lang-menu__list a[aria-current="true"] { font-weight: 600; }

/* кнопка «Магазин» на першому екрані — більша на ~15–20 %, тонкий контур, легкий шрифт */
.btn--hero { min-height: 54px; padding: 19px 34px; font-size: calc(var(--fs-xs) * 1.15); font-weight: 400; }

/* банер актуальної колекції: напис по центру, одразу за ним підвал */
.banner--home { align-items: center; margin-bottom: 0; }
.banner--home .banner__content { gap: var(--space-3); }
.banner--home + * { margin-top: 0; }

/* підвал: «Інформація» і «Зв'язок» — дві колонки, на телефоні одна під одною; білі іконки без підкладок */
.footer__grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-7); }
@media (max-width: 749px) { .footer__grid--two { grid-template-columns: 1fr; gap: var(--space-6); } }
.footer__label { margin-top: var(--space-3); font-size: var(--fs-xxs); letter-spacing: var(--ls-caps); text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }
.footer__addr { margin-top: var(--space-1); font-weight: 500; }
.footer__bottom { align-items: center; }
.footer__bottom .footer__social { margin-top: 0; gap: var(--space-1); }
.footer__social a { color: #fff; background: none; }
.footer__social svg { width: 22px; height: 22px; }

/* мобільне меню: бокова панель ~85 % ширини, праворуч затемнена сторінка */
.drawer--side { z-index: 80; }
.drawer--side .drawer__panel { left: 0; width: min(85vw, 420px); transform: translateX(-100%); }
.drawer--side.is-open .drawer__panel { transform: none; }
.side-menu__head { display: grid; grid-template-columns: var(--tap) 1fr var(--tap); align-items: center; padding-top: var(--space-3); padding-bottom: var(--space-3); border-bottom: var(--hairline) solid var(--c-line); }
.side-menu__logo { justify-self: center; height: 32px; width: auto; }
.side-menu { display: flex; flex-direction: column; overscroll-behavior: contain; }
.side-menu__item { display: flex; align-items: center; justify-content: space-between; min-height: 58px; border-bottom: var(--hairline) solid var(--c-line);
  font-size: 1.1875rem; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; list-style: none; }
.side-menu__item::-webkit-details-marker { display: none; }
.side-menu__sign svg { width: 18px; height: 18px; }
.side-menu__sign svg + svg, .side-menu__group[open] .side-menu__sign svg:first-child { display: none; }
.side-menu__group[open] .side-menu__sign svg + svg { display: inline; }
.side-menu__sub { display: flex; flex-direction: column; padding: var(--space-2) 0 var(--space-3) var(--space-3); border-bottom: var(--hairline) solid var(--c-line); }
.side-menu__sub a { display: flex; align-items: center; min-height: 44px; font-size: 0.9375rem; letter-spacing: 0.04em; text-transform: uppercase; }
.side-menu__sub--titles a { text-transform: none; }   /* назви колекцій — як на обкладинках */

/* пошук: панель праворуч (на телефоні — на весь екран) */
.search-form { flex: 1; display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.search-form svg { width: 20px; height: 20px; flex: none; }
.search-form__input { flex: 1; min-width: 0; min-height: var(--tap); border: 0; border-bottom: var(--hairline) solid var(--c-fg); font: inherit; font-size: var(--fs-md); background: none; color: inherit; border-radius: 0; }
.search-form__input:focus { outline: none; border-bottom-width: 2px; }
.search-results { list-style: none; margin: 0; padding: var(--space-2) 0; }
.search-result { display: grid; grid-template-columns: 64px 1fr; gap: var(--space-4); align-items: center; padding: var(--space-3) 0; border-bottom: var(--hairline) solid var(--c-line); }
.search-result__img { aspect-ratio: var(--photo-ratio); background: var(--c-photo-bg); }
.search-result__img img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.search-result__body { display: flex; flex-direction: column; gap: var(--space-1); }
.search-result__name { font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--ls-card); text-transform: uppercase; }
.search-result__flag { font-size: var(--fs-xxs); letter-spacing: var(--ls-caps); text-transform: uppercase; }
.search-result__flag.is-sale { color: var(--c-sale); }
.search-empty { padding: var(--space-5) 0; color: var(--c-fg-muted); }
@media (max-width: 989px) {
  .drawer.drawer--search .drawer__panel { top: 0; height: 100%; border-radius: 0; transform: translateX(100%); }
  .drawer.drawer--search.is-open .drawer__panel { transform: none; }
}
/* три іконки праворуч не мають зсувати логотип з центру на вузьких телефонах */
@media (max-width: 420px) {
  .header__right .icon-btn, .header__left .icon-btn { min-width: 36px; width: 36px; }
  .header__right svg { width: 21px; height: 21px; }
}

/* ---------------------------------------------------------------- ТЗ №9 §01: товарні картки скрізь (каталог, головна, рекомендації, колекції) */
/* назва й ціна — один блок (≈8–10 px); ціни в ряду на одній лінії, навіть коли назви різної довжини */
.product-grid > li, .slider__item { display: flex; }
.card { flex: 1; gap: 0; }
.card__visual { margin-bottom: var(--space-3); }
.card__title { flex-grow: 1; }
.card .price--card { margin-top: 8px; line-height: 1.3; }

/* ---------------------------------------------------------------- ТЗ №9 §04: «Повідомити про наявність» — стримано */
.modal--notify { max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; }
.modal--notify .modal__title { font-size: 17px; letter-spacing: 0; }
.modal__close { display: inline-flex; align-items: center; justify-content: center; width: var(--tap); height: var(--tap); margin-right: -10px;
  background: none; border: 0; padding: 0; cursor: pointer; color: inherit; }
.modal__close svg { width: 20px; height: 20px; }
/* телефон (ТЗ 20.10): без квадратної рамки фокусу — iOS Safari малює її, бо showModal ставить фокус на хрестик;
   зона дотику 44×44 і розташування ті самі */
@media (max-width: 749px) { #notify [data-modal-close]:focus { outline: none; } }
.notify__text { font-size: var(--fs-xs); line-height: 1.5; color: var(--c-fg-muted); margin-bottom: var(--space-4); }
.notify__item { padding: var(--space-3) 0; margin-bottom: var(--space-4); border-top: var(--hairline) solid var(--c-line); border-bottom: var(--hairline) solid var(--c-line);
  font-size: var(--fs-xs); letter-spacing: var(--ls-card); text-transform: uppercase; }
.notify .field { margin-bottom: var(--space-4); }
.notify .field label { display: block; margin-bottom: 6px; font-size: var(--fs-xs); }
.notify .input { width: 100%; }
.notify .input[aria-invalid="true"] { border-color: var(--c-sale); }
.phone-input { display: grid; grid-template-columns: 108px 1fr; gap: var(--space-2); }
.notify .field__error { margin-top: 4px; font-size: var(--fs-xs); color: var(--c-sale); }
.notify__legal { margin-top: var(--space-4); font-size: var(--fs-xxs); line-height: 1.5; color: var(--c-fg-muted); }
.notify__legal a { text-decoration: underline; text-underline-offset: 2px; }
.notify__done { padding: var(--space-4) 0 var(--space-2); font-size: var(--fs-sm); line-height: 1.5; }

/* ТЗ №9 §05: «Під замовлення» — компактно, тонка лінія ліворуч, перед «Описом» */
.preorder { margin: var(--space-5) 0 var(--space-4); padding-left: var(--space-4); border-left: 1px solid var(--c-fg); font-size: var(--fs-xs); line-height: 1.55; color: var(--c-fg-muted); }
.preorder__title { margin-bottom: 4px; font-size: var(--fs-xxs); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--c-fg); font-weight: 500; }
.product[data-preorder] [data-stock-note] { display: none; }

/* ================================================================ ТЗ №8 (повторні правки, 18.10) */
/* шапка: логотип ще +20 % (38 → 46 px на телефоні, 48 → 58 на комп'ютері), точно по центру */
.header__logo img { height: 58px; }
@media (max-width: 989px) { .header__logo img { height: 46px; } }
@media (max-width: 359px) { .header__logo img { height: 38px; } }
/* іконки як у Release: 24 px, лінія 1 px; праворуч крок 32 px і 12 px до краю; бургер — 16 px від краю */
.header .icon-btn svg { width: 24px; height: 24px; stroke-width: 1; }
.header__right .icon-btn, .header__right .lang-menu > summary { min-width: 32px; width: 32px; min-height: var(--tap); }
.header__right { margin-right: -8px; }
.header__left .menu-toggle { min-width: 32px; width: 32px; margin-left: -4px; justify-content: flex-start; padding-left: 4px; }
.header .icon-btn:focus:not(:focus-visible) { outline: none; }   /* без «квадратної рамки» після дотику */
@media (max-width: 420px) {
  .header__right .icon-btn, .header__left .icon-btn { min-width: 32px; width: 32px; }
  .header__right svg { width: 24px; height: 24px; }
}
.cart-count { pointer-events: none; }

/* перший екран — усе фото посилання */
.hero__link { position: absolute; inset: 0; display: block; }

/* «Нові надходження / Just arrived» — типографіка й відступи як у мобільній секції Release */
.section--new-in { padding-top: 48px; }
.section--new-in .section__head { align-items: baseline; margin-bottom: 24px; }
.section--new-in .section__title { font-size: 27px; font-weight: 400; line-height: 1.15; letter-spacing: -0.04em; text-transform: none; }
.section--new-in .link-caps { font-size: 12px; letter-spacing: 0.1em; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.section--new-in + .banner--home { margin-top: 56px; }

/* підвал: рівні пари відступів 56 / 56 (зовнішні) і 36 / 36 (між групами); низ — по центру */
.footer { padding-top: 56px; }
.footer__grid--two { gap: 36px var(--space-7); }
.footer__contacts { display: flex; flex-direction: column; gap: 36px; }
.footer .footer__heading { margin-bottom: var(--space-3); }
.footer__list li + li { margin-top: 2px; }
.footer__list a { min-height: 36px; }
.footer__bottom { margin-top: 56px; }
.footer__bottom--center { flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); text-align: center; padding-bottom: var(--space-6); }
.footer__bottom--center .footer__social { justify-content: center; }

/* мобільне меню: панель під шапкою (шапка не рухається, бургер стає хрестиком), 22 / 17 px */
@media (max-width: 989px) {
  .drawer--side { z-index: 60; top: var(--header-h); }
  body.menu-open .header { z-index: 70; }
}
.drawer--side .drawer__panel { outline: none; }
.side-menu { padding-top: var(--space-2); }
.side-menu__item { min-height: 54px; font-size: 22px; letter-spacing: 0.02em; }
.side-menu__sub { padding: 2px 0 var(--space-3) 0; }
.side-menu__sub a { min-height: 38px; font-size: 17px; letter-spacing: 0.02em; }
.side-menu__sign svg { width: 16px; height: 16px; stroke-width: 1; }
/* 48 px від банера (правило .section з pages.css підключається пізніше — тому подвійний клас) */
.section.section--new-in { padding-top: 48px; }
.section--new-in .section__head { gap: 8px; }
.section--new-in .section__title { white-space: nowrap; }
@media (max-width: 369px) { .section--new-in .section__title { white-space: normal; } }
/* бургер на одній лінії з правими іконками */
.menu-toggle > span { display: inline-flex; align-items: center; }
.menu-toggle > .menu-toggle__close { display: none; }
body.menu-open .menu-toggle > .menu-toggle__open { display: none; }
body.menu-open .menu-toggle > .menu-toggle__close { display: inline-flex; }

/* ================================================================ ТЗ №13 (18.10) */
/* шапка над першим екраном: завжди закріплена — при прокручуванні змінюється лише фон і колір, без стрибка */
.has-hero .header { position: fixed; top: 0; left: 0; right: 0;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease); }
.has-hero .header .header__logo img { transition: filter 0.3s var(--ease); }

/* вибір мови: лише два написи під глобусом — без фону, рамки й тіні; колір — за станом шапки */
.lang-menu__list { top: calc(100% + 6px); right: -32px; left: auto; min-width: 0; padding: 0; background: none; border: 0; box-shadow: none;
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.lang-menu__list a { position: relative; display: block; min-height: 0; padding: 0; font-size: 14px; line-height: 17px; font-weight: 400; white-space: nowrap;
  color: rgba(0, 0, 0, 0.4); }
.lang-menu__list a::before { content: ""; position: absolute; left: -8px; right: -8px; top: -14px; bottom: -14px; }   /* зона дотику ~45 px */
.lang-menu__list a[aria-current="true"] { color: #000; font-weight: 500; }
.lang-menu__list a:hover { color: #000; }
.has-hero .header:not(.is-scrolled) .lang-menu__list a { color: rgba(255, 255, 255, 0.6); }
.has-hero .header:not(.is-scrolled) .lang-menu__list a[aria-current="true"],
.has-hero .header:not(.is-scrolled) .lang-menu__list a:hover { color: #fff; }

/* пошук: компактна біла панель зверху, під нею видно сторінку (як у Release) */
.drawer--top .drawer__panel { top: 0; left: 0; right: 0; bottom: auto; width: 100%; height: auto; max-height: 85vh; border-radius: 0;
  transform: translateY(-100%); overflow-y: auto; overscroll-behavior: contain; }
.drawer.drawer--top.is-open .drawer__panel { transform: none; }
.drawer.drawer--search .drawer__panel, .drawer.drawer--search.is-open .drawer__panel { top: 0; height: auto; }
.drawer--top .drawer__panel:focus { outline: none; }
/* заміри Release 19.10 (375 px): поле 32 px від верху панелі; ряд 28 px — лупа 24, текст 21 px, кнопка закриття 28;
   лінія #ebebeb на всю ширину блоку (і під ×) — 24 px нижче ряду; ще 24 — заголовок 10 px/500, +1.4 px, далі 16 — кнопки
   43 px (16/24, 10 px, +1 px, радіус 50, проміжок 10); знизу 16 + 24. Поля кнопок 18 замість 24: кирилиця ширша, а 4 запити
   власниці мають стати в один ряд на 375 px (ТЗ 19.10); на вужчих — перенос, шрифт не зменшується */
.search-bar { display: flex; align-items: center; gap: 0; margin: 0 var(--gutter); padding: 32px 0 24px; border-bottom: 1px solid #ebebeb; }
.search-bar .search-form { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; height: 28px; border: 0; }
.search-bar .search-form svg { width: 24px; height: 24px; stroke-width: 1; flex: none; }
.search-bar .search-form__input { flex: 1; min-width: 0; height: 48px; min-height: 0; margin: -10px 0; padding: 0 16px 0 0; border: 0; font-size: 21px; font-weight: 400;
  line-height: 1.25; background: none; color: var(--c-fg); }
/* Release (код теми): .field--search .field__input — 2.1rem = 21 px, Poppins 400, line-height 1.25; колір — як у заголовка
   «Popular searches» (#111 × 0.5) на прохання власниці 19.10 */
.search-bar .search-form__input::placeholder { font-family: var(--font); font-size: 21px; font-weight: 400; letter-spacing: normal; color: rgba(17, 17, 17, 0.5); opacity: 1; }
/* телефон: 19 px замість 21 у Release — рішення власниці 19.10 (текст у полі й плейсхолдер однаково) */
@media (max-width: 749px) { .search-bar .search-form__input, .search-bar .search-form__input::placeholder { font-size: 19px; } }
.search-bar .search-form__input:focus { outline: none; border: 0; }
.search-bar .search-form__input::-webkit-search-cancel-button { display: none; }
.search-bar__close { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px; margin: 0; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.search-bar__close svg { width: 28px; height: 28px; stroke-width: 1; }
.search-popular { margin: 0 var(--gutter); padding: 24px 0 40px; }
.search-popular__label { margin: 0 0 16px; font-family: var(--font); font-size: 10px; font-weight: 500; line-height: 1.25; letter-spacing: 1.4px; text-transform: uppercase;
  color: #111; opacity: 0.5; }   /* Release: колір тексту #111 з прозорістю 0.5 — звідси світло-сірий */
.search-popular__list { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.search-chip { display: inline-flex; align-items: center; justify-content: center; padding: 16px 18px; border: 1px solid #ebebeb; border-radius: 50px;
  font-size: 10px; font-weight: 400; line-height: 1; letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; color: var(--c-fg);
  transition: border-color var(--t-fast) var(--ease); }
.search-chip:hover { border-color: var(--c-fg); }
/* 4 запити — завжди один ряд (уточнення 19.10): на вузьких телефонах кнопки ділять ширину рядка, вільне місце йде в бокові
   поля порівну (EN на 375 px — ~15 px замість 18); шрифт, висота й рамка ті самі */
@media (max-width: 400px) {
  .search-popular__list { flex-wrap: nowrap; }
  .search-popular__list > li { display: flex; flex: 1 1 auto; }
  .search-chip { flex: 1 1 auto; padding-left: 8px; padding-right: 8px; }
}
.search-results-wrap { padding: 0 var(--gutter) var(--space-3); }

/* сторінка результатів пошуку («Всі вироби» з ?q=): поле з запитом, як у панелі, і скільки знайдено */
.search-page { display: flex; align-items: center; gap: 8px; max-width: 640px; margin: var(--space-5) 0 0; padding-bottom: 12px; border-bottom: 1px solid #ebebeb; }
.search-page svg { width: 24px; height: 24px; stroke-width: 1; flex: none; }
.search-page__input { flex: 1; min-width: 0; height: 40px; padding: 0; border: 0; background: none; font: inherit; font-size: 21px; color: var(--c-fg); border-radius: 0; }
.search-page__input:focus { outline: none; }
.search-page__input::-webkit-search-cancel-button { display: none; }
.search-page__count, .sortbar__count { margin: 12px 0 0; font-size: 10px; font-weight: 500; letter-spacing: 1.4px; text-transform: uppercase; color: var(--c-fg-muted); }
/* лічильник товарів біля «Фільтрів» (власниця 19.10) — той самий стиль, що «Знайдено: N»; праворуч, по центру рядка */
.sortbar { align-items: center; justify-content: space-between; gap: var(--space-4); }
.sortbar__count { margin: 0; white-space: nowrap; }
.search-page + .search-page__count + .sortbar, .search-page__count + .sortbar { margin-top: var(--space-3); }
.search-results-wrap:empty { display: none; }

/* кошик: на телефоні — повний екран; заголовок 27 px Regular з лічильником; тонкий × без рамки; порожній стан по центру */
@media (max-width: 989px) {
  .drawer.drawer--cart .drawer__panel { top: 0; height: 100%; width: 100%; border-radius: 0; transform: translateX(100%); }
  .drawer.drawer--cart.is-open .drawer__panel { transform: none; }
}
.drawer--cart .drawer__title { font-size: 27px; font-weight: 400; letter-spacing: -0.02em; line-height: 1.2; }
.drawer--cart .drawer__title sup { margin-left: 3px; font-size: 13px; letter-spacing: 0; vertical-align: super; }
.drawer--cart .drawer__head .icon-btn svg, .drawer .drawer__head .icon-btn svg { width: 20px; height: 20px; stroke-width: 1; }
.drawer__panel:focus, .drawer .icon-btn:focus:not(:focus-visible) { outline: none; }
.drawer--cart .drawer__body { display: flex; flex-direction: column; }
.drawer--cart .drawer__body > .cart-empty { flex: 1; justify-content: center; padding: 0 0 var(--space-8); }

/* ТЗ «перемикання мов»: контраст над будь-яким фоном — білий текст із difference (над темним білий, над світлим чорний) */
.lang-menu__list--float { position: fixed; z-index: 55; left: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  margin: 0; padding: 0; list-style: none; background: none; border: 0; box-shadow: none; mix-blend-mode: difference; }
.lang-menu__list--float a, .has-hero .header:not(.is-scrolled) ~ .lang-menu__list--float a { color: rgba(255, 255, 255, 0.6); }
.lang-menu__list--float a[aria-current="true"], .lang-menu__list--float a:hover { color: #fff; }

/* «Нові надходження / Just arrived» (уточнення 18.10): менші, одне підкреслення, відступи — пропорції Release (заміряно на 375 px) */
.section--new-in .section__title { font-size: 24px; letter-spacing: -0.03em; }
.section--new-in .link-caps { font-size: 11px; letter-spacing: 0.1em; text-decoration: none; }       /* лише власна тонка лінія знизу */
.section--new-in .section__head { margin-bottom: 22px; }                                             /* заголовок → картки ≈ як у Release */
.section--new-in + .banner--home { margin-top: 104px; }                                              /* ціна → банер: 64 → 104 px, як у Release */
.section.section--new-in { padding-top: 51px; }              /* текст заголовка рівно 48 px від банера */
.section--new-in .section__head { margin-bottom: 26px; }     /* текст заголовка → фото 62 px, як у Release */
.section--new-in + .banner--home { margin-top: 40px; }       /* запасне; точний відступ «ціна → банер = банер → заголовок» ставить shop.js (19.10) */
/* назва → ціна однаково обома мовами (19.10): у каруселі назва не розтягується до висоти сусідньої дворядкової —
   ціна завжди 8 px під останнім рядком назви (так було лише в EN, де всі назви в один рядок) */
.section--new-in .card__title { flex-grow: 0; }
/* Телефон (ТЗ власниці 21.10 — узгоджена система, CSS-відступи між блоками, однакові для UA й EN; раніше тут були
   «видимі» 55 / 30 / 55 з поправками за мовою й скриптом): головний банер → рядок заголовка 48; рядок заголовка →
   карусель 24; нижня межа каруселі (низ карток) → банер колекції 32 — стабільно, без підгонки скриптом (shop.js
   на телефоні її більше не ставить). Ціна — як у каталозі. */
@media (max-width: 749px) {
  .section.section--new-in { padding-top: 48px; }
  .section--new-in .section__head { margin-bottom: 24px; }
  .section--new-in .slider { padding-bottom: 0; }
  .section--new-in + .banner--home { margin-top: 32px; }
  .section--new-in .card .price--card { font-size: 12px; font-weight: 400; line-height: 1.25; letter-spacing: 0.04em; }
  /* EXPLORE / ДИВИТИСЯ на банері колекції: 10 → 11 px як VIEW ALL (тестово, 20.10); висота рядка лишається 16 px,
     розрядка 0.1em з .link-caps росте разом зі шрифтом */
  .banner--home .link-caps { font-size: 11px; line-height: 16px; }
}

/* Перший екран на телефоні (ТЗ власниці 19.10, фото IMG_5453 4000×6000 без правок → mobile-5453): на всю видиму висоту
   (100svh з базового .hero), під прозорою шапкою, cover. Кадрування: по горизонталі — центр; якщо екран ширший за 2:3
   і фото вписується по ширині — прив'язка до верху, щоб обличчя не різалось. Без смуг і затемнень */
@media (max-width: 749px) {
  .hero img { object-position: 50% 0; }
}

/* Футер на телефоні (ТЗ власниці 19.10). Відступи — ВИДИМІ, між літерами: шрифт 14 px / 22.4 — верх великої літери
   на 6.2 px нижче верху рядка, базова лінія на 6.2 px вище низу; заголовок 10 px / 16 — літери з 4 px від верху, 4.5 під лінією.
   • між рядками (посилання; телефон–email): лінія → верх літер наступного = 18 → крок 28 = рядок 22.4 + gap 5.6, без margin;
   • заголовок блоку → перший рядок 22 (11 + 4.5 + 6.2); між блоками 52 (6.2 + 42 + 4);
   • банер → «ІНФОРМАЦІЯ» і адреса → лінія над соцмережами — одне значення --footer-edge (60), мінус зсув літер у рядку.
   Зона дотику посилань лишається ~28 px через ::before, на розкладку не впливає. */
@media (max-width: 749px) {
  .footer { --footer-edge: 60px; padding-top: calc(var(--footer-edge) - 4px); }
  .footer__bottom { margin-top: calc(var(--footer-edge) - 6.2px); }
  .footer .footer__heading { margin-bottom: 11px; }
  .footer__list { display: flex; flex-direction: column; gap: 5.6px; }
  .footer__list li + li { margin-top: 0; }
  .footer__list a { min-height: 0; position: relative; }
  .footer__list a::before { content: ""; position: absolute; inset: -2.8px 0; }
  .footer__grid--two { row-gap: 42px; }
  .footer__contacts { gap: 42px; }
  /* ТЗ власниці 21.10 — узгоджена система, CSS-відступи: верх футера 48 (було 56), між основними блоками
     («Інформація», «Зв’язок», «Офіс») 48 (було 42). Решта — як вище. */
  .footer { padding-top: 48px; }
  .footer__grid--two { row-gap: 48px; }
  .footer__contacts { gap: 48px; }
  /* ТЗ 21.10 (2), з роздільною лінією (border-top нижньої зони, 1 px): «Офіс» → лінія 48; лінія → іконки 32;
     іконки → copyright 24; copyright → низ 32. Іконка 22 px стоїть у зоні дотику 44×44 (по 11 px зверху й знизу),
     тож відступи до видимої іконки: padding-top 32 − 11 = 21, gap 24 − 11 = 13. */
  .footer__bottom, .footer__bottom--center { margin-top: 48px; padding-top: 21px; padding-bottom: 32px; gap: 13px; }
  .footer__group .footer__list a { font-weight: 500; }   /* телефон і email — однакова насиченість */
}
/* Мобільне меню (ТЗ власниці 19.10, друга редакція): основні пункти 16 px, підкатегорії й колекції 13 px і на 12 px праворуч; увесь текст
/* Мобільне меню (ТЗ власниці 19.10): основні пункти 18 px, підкатегорії й колекції 16 px (було 22 / 17); увесь текст
   меню — Montserrat (і латиниця теж: ARCHIVE SALE і назви колекцій більше не йдуть на Poppins і не виглядають жирнішими),
   насиченість 400 для всіх пунктів одного рівня. Висоти рядків (54 / 38), відступи, лінії, стрілки, ширина — без змін. */
.side-menu, .side-menu * { font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif; }
.side-menu__item { font-size: 16px; font-weight: 400; }                       /* 18 → 16 (тестово, власниця 19.10) */
.side-menu__sub a { font-size: 14px; font-weight: 400; padding-left: 12px; min-height: 33px; } /* 16 → 13 → 14 (тестово); на 12 px праворуч; рядок 38 → 35 → 33 (власниця 19.10) */

/* Ціна в картках каталогу — як у Release (тестово, власниця 19.10): 12 px / 1.25 / +0.04em (було 14 / 1.3 / 0).
   Лише сітка каталогу (.product-grid — усі категорії й результати пошуку); «Нові надходження» на головній — без змін. */
.product-grid .card .price--card { font-size: 12px; line-height: 1.25; letter-spacing: 0.04em; }

/* Каталог на телефоні (тестово, власниця 19.10): єдиний інтервал ~30 px — шапка → «Фільтри» без змін (29.4),
   «Фільтри» → перший ряд фото: padding-bottom 24 → 16, ціна → наступний ряд: row-gap 40 → 30. Картки — без змін. */
@media (max-width: 749px) {
  .sortbar { padding-bottom: 16px; }
  .product-grid { row-gap: 32px; }   /* ТЗ 21.10: єдина система CORNER — між рядами 30 → 32; спільна сітка каталогу, каруселі не чіпає */
}

/* ТЗ 21.10: після перегляду фото, відкритого дотиком, — без рамки фокуса на фото й на хрестику перегляду
   (клас ставить shop.js лише для дотику/миші; з клавіатури рамка лишається) */
.no-ring:focus, .no-ring:focus-visible { outline: none; }

/* motion.css */
/* CORNER by Levishko — рух і мікровзаємодії (етап 4б).
   Поведінка — за заміром зразка Release (секції 300 мс, фото 600 мс, перший екран 850–1150 мс);
   правила — ui-ux-pro-max: поява 300–450 мс зі зсувом 12 px, вихід швидший за вхід,
   без JS нічого не ховається (клас .js на <html>), prefers-reduced-motion поважаємо. */

/* ---------------------------------------------------------------- поява при прокрутці */
.js [data-reveal] { opacity: 0; transform: translateY(var(--reveal-shift)); }
.js [data-reveal].is-revealed {
  opacity: 1; transform: none;
  transition: opacity var(--t-reveal) var(--ease-out), transform var(--t-reveal) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

/* фото проявляються, коли завантажились */
.js img.is-fading { opacity: 0; }
.js img.is-fading.is-loaded { opacity: 1; transition: opacity var(--t-image) var(--ease); }

/* Запобіжник: якщо скрипт появи не запустився (помилка, старий браузер), прихований елемент
   усе одно з'являється через 2.5 с. Лише тоді: shop.js ставить .reveal-on на <html>, коли
   спостерігач запущено. Раніше запобіжник діяв завжди й через 2.5 с показував усе нижче екрана
   без руху — поява при прокрутці працювала лише перші секунди (знайдено 14.10). */
@keyframes reveal-safety { to { opacity: 1; transform: none; } }
.js:not(.reveal-on) [data-reveal]:not(.is-revealed) { animation: reveal-safety 0.01s linear 2.5s forwards; }

/* ---------------------------------------------------------------- перший екран */
@keyframes hero-settle { from { transform: scale(1.06); } to { transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(120%); } to { opacity: 1; transform: none; } }
.hero img { animation: hero-settle 2.4s var(--ease-out) both; }
.hero__content { overflow: hidden; padding: 4px; }
.hero__content .btn { animation: rise var(--t-hero) var(--ease-out) 0.2s both; }

/* ---------------------------------------------------------------- посилання */
.u-link, .breadcrumbs a, .footer__list a, .nav__dropdown a {
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  transition: background-size var(--t-base) var(--ease-out);
}
.footer__list a, .nav__dropdown a { background-size: 0 1px; }
.u-link:hover, .breadcrumbs a:hover { background-size: 0 1px; background-position: 100% 100%; }
.footer__list a:hover, .nav__dropdown a:hover { background-size: 100% 1px; text-decoration: none; }
.nav__link { position: relative; }
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 10px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right; transition: transform var(--t-base) var(--ease-out);
}
.nav__item > .nav__link::after { right: 14px; }
.nav__link:hover { text-decoration: none; }
.nav__link:hover::after, .nav__item:focus-within > .nav__link::after { transform: scaleX(1); transform-origin: left; }

/* кнопки: заливка змінюється плавно (у зразку 300 мс) */
.btn { transition-duration: var(--t-base); }

/* ---------------------------------------------------------------- панелі */
/* вхід 400 мс з гальмуванням, вихід 250 мс із прискоренням */
.drawer { transition: visibility 0s linear 0.25s; }
.drawer.is-open { transition: visibility 0s; }
.drawer.is-open .drawer__panel { transition: transform 0.4s var(--ease-out); }
.drawer:not(.is-open) .drawer__panel { transition: transform 0.25s var(--ease-in); }
.drawer.is-open .drawer__overlay { transition: opacity 0.4s var(--ease-out); }
.drawer:not(.is-open) .drawer__overlay { transition: opacity 0.25s var(--ease-in); }
/* на телефоні панелі кошика виїжджають знизу, як у зразку */
@media (max-width: 989px) {
  .drawer--right .drawer__panel { top: auto; height: min(88vh, 100%); width: 100%; transform: translateY(100%); border-radius: 12px 12px 0 0; }
}

/* лічильник кошика «підстрибує», коли додали товар */
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
.cart-count.is-bumped { animation: bump 0.45s var(--ease-out); }

/* акордеони відкриваються плавно (висоту веде JS) */
.accordion__body, .story__more > .rte { overflow: hidden; }

/* ---------------------------------------------------------------- картка */
.card__visual { position: relative; }
.card__quick {
  position: absolute; right: var(--space-3); bottom: var(--space-3); z-index: 2;
  width: var(--tap); height: var(--tap); display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-fg); color: var(--c-bg); border-radius: var(--radius-badge);
  opacity: 0; transform: translateY(6px);
  transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out), background var(--t-fast);
}
.card__quick svg { width: 18px; height: 18px; }
.card__quick:hover { background: #333; }
.card:hover .card__quick, .card__quick:focus-visible { opacity: 1; transform: none; }
@media (hover: none) { .card__quick { opacity: 1; transform: none; } }
@media (hover: hover) {
  .card__media img { transition: opacity var(--t-slow) var(--ease), transform 1.2s var(--ease-out); }
  .card:hover .card__media img { transform: scale(1.02); }
}

.quick { display: grid; grid-template-columns: 120px 1fr; gap: var(--space-4); padding-bottom: var(--space-5); }
.quick__img { aspect-ratio: var(--photo-ratio); width: 120px; object-fit: cover; background: var(--c-photo-bg); }
.quick__name { font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--ls-card); text-transform: uppercase; margin-bottom: var(--space-2); }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal], .js img.is-fading { opacity: 1 !important; transform: none !important; }
  .hero img, .hero__content .btn { animation: none !important; }
}

/* pages.css */
/* CORNER by Levishko — сторінки зі структурою: Контакти, Про нас, Магазини (етап 4б). */

/* ---------------------------------------------------------------- контакти */
.contacts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); align-items: start; padding-bottom: var(--space-8); }
.contacts__list { margin: 0; display: flex; flex-direction: column; gap: var(--space-6); }
.contacts__item { padding-bottom: var(--space-5); border-bottom: var(--hairline) solid var(--c-line); }
.contacts__label { font-size: var(--fs-xxs); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-fg-muted); margin-bottom: var(--space-3); }
.contacts__value { margin: 0; font-size: var(--fs-lg); letter-spacing: var(--ls-heading); line-height: 1.35; }
.contacts__social { margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.contacts__social .btn svg { width: 16px; height: 16px; }
.contacts__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.contacts__map { display: block; aspect-ratio: 1; overflow: hidden; background: var(--c-surface); }
.contacts__map img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
@media (hover: hover) { .contacts__map:hover img { transform: scale(1.03); } }
@media (max-width: 989px) {
  .contacts { grid-template-columns: 1fr; gap: var(--space-7); }
  .contacts__value { font-size: var(--fs-md); }
}

/* ---------------------------------------------------------------- про нас */
.about__media { margin-bottom: var(--space-8); background: var(--c-surface); overflow: hidden; }
.about__media img { width: 100%; }
.about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); align-items: start; padding-bottom: var(--space-8); }
.about__lead { position: sticky; top: calc(var(--header-h) + var(--space-5)); font-size: var(--fs-xl); line-height: 1.3; letter-spacing: var(--ls-heading); }
.about__text { display: flex; flex-direction: column; gap: var(--space-6); }
.about__text .btn { align-self: flex-start; }
@media (max-width: 989px) {
  .about__media { margin-bottom: var(--space-6); }
  .about { grid-template-columns: 1fr; gap: var(--space-5); }
  .about__lead { position: static; font-size: var(--fs-lg); }
}

/* ---------------------------------------------------------------- магазини */
.stockists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gap-x); padding-bottom: var(--space-8); }
.stockist { padding: var(--space-6); background: var(--c-surface); display: flex; flex-direction: column; justify-content: flex-end; gap: var(--space-2); min-height: 200px; transition: background var(--t-base) var(--ease); }
.stockist:hover { background: #f1f1f1; }
.stockist__kind { font-size: var(--fs-xxs); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-fg-muted); }
.stockist__name { font-size: var(--fs-lg); font-weight: 400; letter-spacing: var(--ls-heading); }
.stockist__link { align-self: flex-start; }
@media (max-width: 600px) { .stockists { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- секції головної (за зразком) */
.section { padding: var(--space-8) 0 0; }
.section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); }
.section__title { font-size: var(--fs-xxl); font-weight: 400; line-height: 1; letter-spacing: var(--ls-heading); }
.section__actions { display: flex; align-items: center; gap: var(--space-4); }
.slider__nav { display: flex; gap: var(--space-1); }
.slider__nav svg { width: 18px; height: 18px; }
.slider {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * var(--grid-gap-x)) / 4); gap: var(--grid-gap-x);
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: var(--space-2);
}
.slider::-webkit-scrollbar { display: none; }
.slider__item { scroll-snap-align: start; }
@media (max-width: 989px) {
  .slider { grid-auto-columns: 72%; }
  .slider__nav { display: none; }
}

.banner { position: relative; margin-top: var(--space-8); min-height: 80vh; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; background: #000; color: var(--c-bg); }
.banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, 0.5)); }
.banner__content { position: relative; z-index: 1; text-align: center; padding: var(--space-8) var(--gutter); display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
.banner__kicker { font-size: var(--fs-xxs); letter-spacing: var(--ls-label); text-transform: uppercase; }
.banner__title { font-size: var(--fs-xxl); font-weight: 400; line-height: 1; letter-spacing: var(--ls-heading); }

.section--related { padding-bottom: var(--space-4); }

/* активний пункт меню (ui-ux-pro-max: поточний розділ має бути видно) */
.nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__dropdown a[aria-current="page"] { background-size: 100% 1px; }

/* ---------------------------------------------------------------- оформлення й подяка (макет)
   Вигляд — як оформлення Shopify, яким закінчується Release: мінімальна шапка, ліворуч форма з
   підписами всередині полів, праворуч сіра панель замовлення на всю висоту. */
.is-checkout { --co-line: #dedede; --co-panel: #f5f5f5; --co-radius: 12px; }
.co-header { border-bottom: 1px solid var(--co-line); background: var(--c-bg); }
.co-header__inner { max-width: 1120px; margin: 0 auto; padding: var(--space-4) var(--gutter); display: flex; align-items: center; justify-content: space-between; }
.co-header__logo img { width: 112px; height: auto; }
.co-footer { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); justify-content: center; padding: var(--space-5) var(--gutter);
             border-top: 1px solid var(--co-line); font-size: var(--fs-xs); }
.co-footer a { text-decoration: underline; text-underline-offset: 3px; color: var(--c-fg-muted); }

.co { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: calc(100vh - 74px); }
.co__main { display: flex; justify-content: flex-end; padding: var(--space-7) var(--space-7) var(--space-8); }
.co__aside { background: var(--co-panel); border-left: 1px solid var(--co-line); padding: var(--space-7) var(--space-7) var(--space-8); }
.co__inner { width: 100%; max-width: 560px; }
.co__inner--aside { max-width: 440px; position: sticky; top: var(--space-7); }

.co-steps { list-style: none; margin: 0 0 var(--space-5); padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); font-size: var(--fs-xs); color: var(--c-fg-muted); }
.co-steps li + li::before { content: "›"; margin-right: var(--space-2); }
.co-steps a { text-decoration: underline; text-underline-offset: 3px; }
.co-steps [aria-current] { color: var(--c-fg); font-weight: 500; }

.co-block { margin-bottom: var(--space-6); }
.co-block__title { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; margin-bottom: var(--space-4); }
.co-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.co-hint { font-size: var(--fs-xs); color: var(--c-fg-muted); margin-top: var(--space-2); }
.co-hint--top { margin: calc(var(--space-3) * -1) 0 var(--space-3); }
.co-hint--center { text-align: center; }

/* поле з підписом усередині (плаваючий) */
.fl { position: relative; margin-bottom: var(--space-3); }
.fl__input { display: block; width: 100%; height: 52px; padding: 22px 13px 6px; border: 1px solid var(--co-line); border-radius: var(--co-radius);
             background: var(--c-bg); font: inherit; font-size: 16px; color: var(--c-fg); transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.fl__input:focus { outline: none; border-color: var(--c-fg); box-shadow: 0 0 0 1px var(--c-fg); }
.fl__label { position: absolute; left: 14px; top: 16px; font-size: 16px; color: var(--c-fg-muted); pointer-events: none;
             transition: top var(--t-fast) var(--ease), font-size var(--t-fast) var(--ease); }
.fl__input:focus + .fl__label, .fl__input:not(:placeholder-shown) + .fl__label,
.fl--select .fl__label, .fl--static .fl__label { top: 7px; font-size: 11px; }
.fl--select .fl__input { appearance: none; padding-right: 40px; background: var(--c-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='1.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 14px; }
.fl--select .fl__input:disabled { background-color: #fafafa; color: var(--c-fg-muted); }
.fl__input--static { display: flex; align-items: center; background: #fafafa; }
.fl--area .fl__input { height: auto; min-height: 96px; resize: vertical; padding-top: 26px; }
.fl .fl__input[aria-invalid="true"] { border-color: var(--c-sale); box-shadow: 0 0 0 1px var(--c-sale); }
/* поле з підказками НП: список під полем, у кольорах форми */
.fl--combo { position: relative; }
.fl--combo .fl__input:disabled { background-color: #fafafa; color: var(--c-fg-muted); }
.combo__list { position: absolute; z-index: 20; left: 0; right: 0; top: 52px; max-height: 288px; overflow-y: auto; margin: 4px 0 0; padding: 4px 0; list-style: none;
  background: var(--c-bg); border: 1px solid var(--co-line); border-radius: var(--co-radius); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); }
.combo__list [role="option"] { padding: 10px 13px; font-size: 14px; line-height: 1.35; cursor: pointer; }
.combo__list [role="option"][aria-selected="true"], .combo__list [role="option"]:hover { background: #f5f5f5; }
.combo__note { padding: 10px 13px; font-size: 13px; color: var(--c-fg-muted); }
.combo__hint { margin: 4px 0 0; font-size: 12px; color: var(--c-fg-muted); }
@media (max-width: 749px) { .combo__list [role="option"] { padding: 12px 13px; min-height: 44px; } }
.field__error { font-size: var(--fs-xs); color: var(--c-sale); margin-top: var(--space-1); }

/* способи оплати — одна рамка, варіанти через лінію (як у Shopify) */
.pay-group { border: 1px solid var(--co-line); border-radius: var(--co-radius); overflow: hidden; }
.pay-option { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4); cursor: pointer; transition: background var(--t-fast) var(--ease); }
.pay-option + .pay-option { border-top: 1px solid var(--co-line); }
.pay-option:has(input:checked) { background: #f6f6f6; box-shadow: inset 0 0 0 1px var(--c-fg); border-radius: var(--co-radius); }
.pay-option input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--c-fg); flex: none; }
.pay-option__body { display: flex; flex-direction: column; gap: 2px; }
.pay-option__title { font-weight: 500; }
.pay-option__text { font-size: var(--fs-xs); color: var(--c-fg-muted); }
/* Телефон (ТЗ власниці 20.10, референс CENC): розкривні варіанти без стрілок. Рядок варіанта — біле тло; обраний — тонка
   чорна рамка (::after поверх, щоб її не перекривало сіре тло пояснення); пояснення лише в обраного, на --co-panel.
   Один варіант завжди обраний (radio) — розгорнуто рівно одне пояснення. Логіка й значення card/cod не змінюються. */
@media (max-width: 749px) {
  .pay-option { position: relative; flex-wrap: wrap; gap: 0; padding: 0; }
  .pay-option:has(input:checked) { background: var(--c-bg); box-shadow: none; }
  .pay-option:has(input:checked)::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--c-fg);
    border-radius: var(--co-radius); pointer-events: none; }
  .pay-option input { margin: 17px 0 0 16px; }
  .pay-option__body { display: contents; }
  .pay-option__title { flex: 1; padding: 16px 16px 16px 12px; }
  .pay-option__text { flex: 0 0 100%; padding: 14px 16px 16px; background: var(--co-panel); line-height: 1.5;
    border-top: 1px solid var(--co-line); border-radius: 0 0 var(--co-radius) var(--co-radius); }
  .pay-option:not(:has(input:checked)) .pay-option__text { display: none; }
}

.co-submit { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 56px; margin-top: var(--space-5); border: 0; border-radius: var(--co-radius);
             background: var(--c-fg); color: var(--c-bg); font: 600 15px var(--font); cursor: pointer; transition: background var(--t-fast) var(--ease); text-decoration: none; }
.co-submit:hover { background: #333; }
.co-submit.is-loading { opacity: 0.7; pointer-events: none; }
.co-submit--inline { width: auto; padding: 0 var(--space-6); display: inline-flex; }

/* панель замовлення: мініатюра з кружечком кількості, назва, ціна */
.co-lines .cart-line { grid-template-columns: 64px 1fr auto; align-items: center; gap: var(--space-4); padding: var(--space-2) 0; border: 0; }
.co-lines .cart-line > :first-child { position: relative; display: block; width: 64px; }
.co-lines .cart-line > :first-child::after { content: "1"; position: absolute; top: -8px; right: -8px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
             background: rgba(17, 17, 17, 0.6); color: #fff; font-size: 11px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.co-lines .cart-line__img { width: 64px; border: 1px solid var(--co-line); border-radius: 8px; background: var(--c-bg); mix-blend-mode: normal; }
.co-lines .cart-line__name { font-size: var(--fs-sm); text-transform: none; letter-spacing: 0; font-weight: 500; }
.co-lines .cart-line__side { font-size: var(--fs-sm); justify-content: center; }
.co-lines .cart-line__remove { display: none; }
.co-lines .cart-empty { padding: var(--space-5) 0; }
.co-sum { display: flex; justify-content: space-between; font-size: var(--fs-sm); padding: var(--space-1) 0; }
.co-sum:first-of-type { margin-top: var(--space-5); }
.co-sum__muted { color: var(--c-fg-muted); }
.co-sum--total { font-size: 1.1875rem; font-weight: 600; padding-top: var(--space-3); }
.co-sum--total small { font-size: var(--fs-xs); font-weight: 400; color: var(--c-fg-muted); margin-right: 4px; }

/* подяка */
.co-thanks__head { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-5); }
.co-thanks__check { flex: none; width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--c-fg); display: flex; align-items: center; justify-content: center; }
.co-thanks__check svg { width: 24px; height: 24px; }
.co-thanks__number { font-size: var(--fs-xs); color: var(--c-fg-muted); }
.co-thanks__title { font-size: 1.5rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }
.co-box { border: 1px solid var(--co-line); border-radius: var(--co-radius); padding: var(--space-5); margin-bottom: var(--space-4); }
.co-box__title { font-size: var(--fs-md); font-weight: 600; margin-bottom: var(--space-2); }
.thanks__meta { margin: var(--space-3) 0 0; display: grid; gap: var(--space-2); font-size: var(--fs-sm); }
.thanks__meta div { display: grid; grid-template-columns: 120px 1fr; gap: var(--space-3); }
.thanks__meta dt { color: var(--c-fg-muted); }
.thanks__meta dd { margin: 0; }
.co-thanks__media video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #000; border-radius: var(--co-radius); margin: var(--space-2) 0 var(--space-4); }
.co-thanks__foot { display: flex; justify-content: flex-end; }

@media (max-width: 989px) {
  .co { grid-template-columns: 1fr; min-height: 0; }
  .co__aside { order: -1; border-left: 0; border-bottom: 1px solid var(--co-line); padding: var(--space-5) var(--gutter); }
  .co__main { justify-content: stretch; padding: var(--space-5) var(--gutter) var(--space-7); }
  .co__inner, .co__inner--aside { max-width: none; position: static; }
  .co-row { grid-template-columns: 1fr; gap: 0; }
  .co-thanks__foot { justify-content: stretch; }
  .co-submit--inline { width: 100%; }
}

/* ---------------------------------------------------------------- головна в складі Release (13.10) */
/* дві плитки колекцій на всю ширину, без проміжку; заголовок по центру */
.tiles { display: grid; grid-template-columns: 1fr 1fr; margin-top: var(--space-8); }
.tile { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 5; max-height: 100vh; overflow: hidden; background: #000; color: var(--c-bg); text-decoration: none; }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.tile::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.3); transition: background var(--t-slow) var(--ease); }
@media (hover: hover) { .tile:hover img { transform: scale(1.03); } .tile:hover::after { background: rgba(0, 0, 0, 0.4); } }
.tile__content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: var(--space-4); text-align: center; padding: var(--space-6); }
.tile__kicker { font-size: var(--fs-xxs); letter-spacing: var(--ls-label); text-transform: uppercase; }
.tile__title { font-size: var(--fs-xxl); line-height: 1; letter-spacing: var(--ls-heading); }

/* заява бренду: велика фраза по центру з курсивним акцентом */
.statement { padding: calc(var(--space-8) * 1.5) 0; }
.statement__inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-6); text-align: center; }
.statement__title { max-width: 18ch; font-size: clamp(2.25rem, 4.25vw, 3.8125rem); font-weight: 400; line-height: 1; letter-spacing: var(--ls-heading); }

/* категорії: високі картки, під ними велика назва з дрібною кількістю */
.cat-grid { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: var(--grid-gap-x); padding-bottom: var(--space-4); }
.cat-card { display: flex; flex-direction: column; gap: var(--space-4); text-decoration: none; }
.cat-card__media { aspect-ratio: 3 / 4; overflow: hidden; background: var(--c-surface); }
.cat-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
@media (hover: hover) { .cat-card:hover img { transform: scale(1.03); } }
.cat-card__title { text-align: center; font-size: clamp(1.5rem, 2.5vw, 2.25rem); line-height: 1.25; letter-spacing: var(--ls-heading); }
.cat-card__title sup { font-size: var(--fs-xxs); letter-spacing: 0; margin-left: 3px; vertical-align: super; }

/* чорна смуга-заклик (Archive Sale) */
.callout { background: var(--c-fg); color: var(--c-bg); margin-top: var(--space-8); }
.callout__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; padding-top: var(--space-7); padding-bottom: var(--space-7); }
.callout__title { font-size: var(--fs-xxl); font-weight: 400; line-height: 1; letter-spacing: var(--ls-heading); }
.callout + .banner { margin-top: 0; }

/* магазини на головній */
.stockists--home { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Instagram перед підвалом: смуга фото на темному */
.social { background: var(--c-footer-bg); color: var(--c-footer-fg); margin-top: var(--space-8); }
.social__strip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.social__strip img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.social__content { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); padding: var(--space-7) var(--gutter); text-align: center; }
.social__title { font-size: var(--fs-xxl); font-weight: 400; line-height: 1; letter-spacing: var(--ls-heading); }
.link-caps--light { color: var(--c-footer-fg); gap: var(--space-2); }
.link-caps--light svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.social + .footer { padding-top: var(--space-7); }

@media (max-width: 989px) {
  .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-6); }
  .stockists--home { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 749px) {
  .tiles { grid-template-columns: 1fr; }
  .tile { aspect-ratio: 4 / 5; }
  .callout__inner { flex-direction: column; align-items: flex-start; }
  .social__strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* банер сторінки категорії (Release: темне фото ~350 px, крихти й заголовок білим по центру) */
.page-banner { position: relative; height: clamp(300px, 38vh, 380px); display: flex; align-items: center; justify-content: center;
               overflow: hidden; background: #000; color: var(--c-bg); text-align: center; }
.page-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.page-banner::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); }
.page-banner__content { position: relative; z-index: 1; padding: var(--header-h) var(--gutter) 0; display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.page-banner .breadcrumbs, .page-banner .breadcrumbs a { color: rgba(255, 255, 255, 0.85); }
.page-head--bar { padding-top: var(--space-5); padding-bottom: var(--space-5); text-align: left; }
.stockists > li { min-width: 0; }
.stockist__link { overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- контакти, магазини, про нас (Release, 13.10) */
.narrow { max-width: 720px; margin: 0 auto; }
.contact-block { padding: var(--space-5) 0; border-bottom: var(--hairline) solid var(--c-line); }
.contact-block__title { font-size: 2.25rem; font-weight: 400; line-height: 1.25; letter-spacing: var(--ls-heading); margin-bottom: var(--space-2); }
.contact-block p { font-size: var(--fs-md); color: var(--c-fg-soft); }
.contact-block__social { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.contact-block__social .btn svg { width: 16px; height: 16px; }
.contact-block--actions { border-bottom: 0; padding-bottom: var(--space-8); }
.map-section { position: relative; margin: 0 var(--gutter) var(--space-8); }
.map-section__map { display: block; height: clamp(320px, 48vw, 560px); overflow: hidden; background: var(--c-surface); }
.map-section__map img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 22%; transition: transform 1.2s var(--ease-out); }
@media (hover: hover) { .map-section__map:hover img { transform: scale(1.02); } }
.map-card { position: absolute; top: var(--space-5); right: var(--space-5); max-width: 320px; padding: var(--space-4) var(--space-5); background: var(--c-bg);
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12); display: flex; flex-direction: column; gap: var(--space-2); }
.map-card__name { font-weight: 500; }
.map-card__addr { font-size: var(--fs-xs); color: var(--c-fg-muted); }

.page-head--left { text-align: left; }
.page-head--left .breadcrumbs { justify-content: flex-start; }
.locator { display: grid; grid-template-columns: 1fr 1fr; gap: var(--grid-gap-x); padding-bottom: var(--space-8); }
.locator__panel { background: var(--c-fg-muted); color: var(--c-bg); padding: var(--space-6); display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-7); min-height: 640px; }
.locator__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); }
.locator__item { padding-bottom: var(--space-5); border-bottom: var(--hairline) solid rgba(255, 255, 255, 0.3); display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; }
.locator__kind { font-size: var(--fs-xxs); letter-spacing: var(--ls-label); text-transform: uppercase; opacity: 0.8; }
.locator__name { font-size: var(--fs-md); font-weight: 500; letter-spacing: var(--ls-card); }
.locator__addr { font-size: var(--fs-sm); }
.locator__panel .link-caps { overflow-wrap: anywhere; }
.locator__title { font-size: var(--fs-xxl); line-height: 1; letter-spacing: var(--ls-heading); }
.locator__map { display: block; overflow: hidden; background: var(--c-surface); min-height: 640px; }
.locator__map img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
@media (hover: hover) { .locator__map:hover img { transform: scale(1.02); } }

.page-banner--tall { height: clamp(420px, 70vh, 720px); }
.page-banner--tall .page-title { font-size: clamp(2.5rem, 4.25vw, 3.8125rem); }
.statement__text { max-width: 640px; font-size: var(--fs-md); color: var(--c-fg-soft); }
.statement--small { padding-top: 0; }
.statement__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; }
.split { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
.split__media { aspect-ratio: 4 / 5; overflow: hidden; background: var(--c-surface); }
.split__media img { width: 100%; height: 100%; object-fit: cover; }
.split__text { padding: var(--space-7) clamp(var(--space-5), 6vw, 120px); font-size: var(--fs-md); color: var(--c-fg-soft); }
.quote { padding: calc(var(--space-8) * 1.5) 0; }
.quote__inner { max-width: 960px; margin: 0 auto; text-align: center; font-family: var(--font-accent); font-style: italic; font-size: clamp(1.5rem, 2.4vw, 2.25rem); line-height: 1.25; }
@media (max-width: 989px) {
  .locator { grid-template-columns: 1fr; }
  .locator__panel, .locator__map { min-height: 0; }
  .locator__map { aspect-ratio: 1; }
  .split { grid-template-columns: 1fr; }
  .split__text { padding: var(--space-6) var(--gutter); }
  .map-card { position: static; max-width: none; box-shadow: none; padding: var(--space-4) 0; }
  .map-section { margin: 0 0 var(--space-7); }
  .map-section .map-card { padding-left: var(--gutter); padding-right: var(--gutter); }
}

/* ---------------------------------------------------------------- юридичні сторінки й лукбук колекції (Release, 13.10) */
/* світла смуга-шапка, як у FAQ і правилах Release */
.text-band { background: var(--c-surface); margin-bottom: var(--space-7); }
.text-band__inner { padding: var(--space-8) var(--gutter) var(--space-7); text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
.text-page { max-width: 790px; margin: 0 auto; padding-bottom: var(--space-8); font-size: var(--fs-sm); line-height: 1.6; }
.text-page h2, .text-page h3 { font-size: var(--fs-lg); font-weight: 500; letter-spacing: -0.02em; margin: 2em 0 0.6em; }
.text-page strong { font-weight: 600; }
.text-page p + p { margin-top: 0.9em; }

/* лукбук: назва й вступ по центру, стрічка з трьох фото */
.lookbook__head { padding-bottom: var(--space-6); }
.lookbook__intro { max-width: 640px; margin: var(--space-3) auto 0; font-size: var(--fs-sm); color: var(--c-fg-soft); }
.lookbook__strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap-x); }
.lookbook__strip button { display: block; aspect-ratio: 3 / 4; overflow: hidden; background: var(--c-surface); cursor: zoom-in; }
.lookbook__strip img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
@media (hover: hover) { .lookbook__strip button:hover img { transform: scale(1.03); } }
.statement--story .statement__text { max-width: 760px; text-align: left; }
.statement--story .statement__text p + p { margin-top: 0.9em; }
.statement--story + .banner { margin-top: 0; }
@media (max-width: 749px) {
  .lookbook__strip { grid-template-columns: 1fr; }
  .lookbook__strip button:nth-child(n+2) { display: none; }
}
/* дрібні посилання оформлення — зона натискання 44 px без зміни вигляду */
.co-steps a, .co-footer a { position: relative; }
.co-steps a::before, .co-footer a::before { content: ""; position: absolute; inset: -13px -6px; }
.co-header .icon-btn { min-width: var(--tap); min-height: var(--tap); }

/* мобільне меню: поява й зникнення прозорістю + зсувом (motion.css задає панелям лише transform) */
@media (max-width: 989px) {
  .drawer--left.is-open .drawer__panel { transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out); }
  .drawer--left:not(.is-open) .drawer__panel { transition: opacity 0.2s var(--ease-in), transform 0.2s var(--ease-in); }
}

/* «Мій обліковий запис»: пошук замовлення за номером і e-mail */
.track { --co-line: #dedede; --co-radius: 12px; }
.track__form { margin: var(--space-5) 0 var(--space-6); }
.track__form .btn { margin-top: var(--space-2); }
.track__result { border-top: 1px solid var(--c-line); padding-top: var(--space-5); }
.track__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-4); }
.track__status { display: inline-block; padding: 4px 12px; border-radius: 20px; background: var(--c-fg); color: #fff; font-size: var(--fs-xs); }
.track__meta { display: grid; gap: var(--space-2); margin: var(--space-4) 0 0; }
.track__meta div { display: grid; grid-template-columns: 140px 1fr; gap: var(--space-3); }
.track__meta dt { color: var(--c-fg-muted); }
.track__meta dd { margin: 0; }
@media (max-width: 749px) { .track__meta div { grid-template-columns: 1fr; gap: 2px; } }

/* подяка: замовлення ще не оплачене — кнопка «Оплатити» */
.thanks-pay { margin: var(--space-5) 0; padding: var(--space-4); border: 1px solid var(--c-line); border-radius: 12px; }
.thanks-pay p { margin: 0 0 var(--space-3); }

/* ТЗ №2: «Вам також може сподобатися» — один ряд, на телефоні два товари видно, свайп */
@media (max-width: 989px) {
  .slider--two { grid-auto-columns: calc((100% - var(--grid-gap-x)) / 2); }
}

/* ---------------------------------------------------------------- ТЗ №4: колекції */
/* «Колекції»: обкладинки одна під одною на всю ширину (на комп'ютері — по центру, не ширше 720 px) */
.collection-list { display: grid; gap: var(--space-4); max-width: 720px; margin: 0 auto; padding: var(--space-4) 0 var(--space-8); list-style: none; }
.collection-cover { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--c-surface); }
.collection-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
@media (hover: hover) { .collection-cover:hover img { transform: scale(1.02); } }
@media (max-width: 749px) { .collection-list { gap: var(--space-3); margin: 0 calc(-1 * var(--gutter)); } }

/* опис: перший абзац + «Читати далі» / «Згорнути» під текстом */
.story__rest { margin-top: var(--space-4); text-align: left; }
.story__toggle { display: inline-flex; align-items: center; min-height: var(--tap); margin-top: var(--space-3); cursor: pointer; background: none; border: 0; }

/* редакційна галерея: ряди по 1–3 фото за розкладкою колекції, порядок і пропорції — як на живому */
.edit-gallery { display: grid; gap: var(--grid-gap-x); max-width: 900px; margin: 0 auto; padding-bottom: var(--space-8); }
.edit-gallery__row { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: var(--grid-gap-x); }
.edit-gallery button { display: block; width: 100%; padding: 0; border: 0; cursor: zoom-in; background: var(--c-surface); }
.edit-gallery img { display: block; width: 100%; height: auto; }

/* колекції-«статті»: фото поспіль — в один ряд */
.story-row { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: var(--grid-gap-x); margin: var(--space-5) 0; }
.story-row figure { margin: 0; }

/* ---------------------------------------------------------------- ТЗ №5: «Про нас» — композиція ціла, як на живому */
.about-cover { max-width: 900px; margin: 0 auto var(--space-7); }
.about-cover img { display: block; width: 100%; height: auto; }

/* ---------------------------------------------------------------- ТЗ №6: «Контакти» */
.contacts-page { max-width: 640px; margin: 0 auto; }
.contacts-page__intro { margin-top: var(--space-4); font-size: var(--fs-md); line-height: 1.5; color: var(--c-fg); }
.contact-list { margin: var(--space-5) 0 var(--space-7); }
.contact-list__item { padding: var(--space-4) 0; border-top: var(--hairline) solid var(--c-line); }
.contact-list__item:last-child { border-bottom: var(--hairline) solid var(--c-line); }
.contact-list dt { margin-bottom: var(--space-1); font-size: var(--fs-xxs); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-fg-muted); }
.contact-list dd { margin: 0; font-size: var(--fs-sm); }
.contact-list a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.contact-list a:hover { text-decoration-color: transparent; }
.contact-list__social a { display: inline-block; padding: 6px 0; }
.contacts-map { height: 420px; background: var(--c-surface); margin-bottom: var(--space-8); }
.contacts-map iframe { display: block; width: 100%; height: 100%; border: 0; }
@media (max-width: 749px) { .contacts-map { height: 340px; } }

/* «Про нас» (16.10, власниця): колаж → текст абзацами → пряма мова курсивом */
.about-text { max-width: 720px; margin: 0 auto; padding-bottom: var(--space-8); font-size: var(--fs-md); line-height: 1.6; }
.about-text p + p, .about-text p + blockquote, .about-text blockquote + p { margin-top: var(--space-5); }
.about-text__quote { margin: var(--space-7) 0; text-align: center; font-family: var(--font-accent); font-style: italic;
  font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1.3; }
.about-cover { margin-top: var(--space-5); }

/* ---------------------------------------------------------------- 17.10: точніше до живого сайту (звірено заміром на 375 px) */
/* колекція: назва одразу під шапкою, опис по ширині, «Читати далі» — звичайним регістром, жирним */
.page-head--collection { padding-top: var(--space-5); }
.story__intro, .story__rest { text-align: justify; }
.story__toggle { font-size: 15px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--c-fg); text-decoration: none; }
.story__toggle:hover { text-decoration: underline; text-underline-offset: 3px; }
/* «Про нас»: колаж одразу під шапкою, текст по ширині, 24 px між абзацами */
.about-cover { margin-top: var(--space-4); margin-bottom: var(--space-5); }
.about-text p { text-align: justify; }
.about-text p + p { margin-top: 24px; }
/* «Контакти»: значення без підкреслень, як на схемі ТЗ №6 (підкреслення лише при наведенні) */
.contact-list a { text-decoration: none; }
.contact-list a:hover { text-decoration: underline; text-decoration-color: currentColor; }

/* ---------------------------------------------------------------- ТЗ №10: сторінки колекцій */
.page-head--collection .page-title { font-size: 24px; line-height: 1.2; }                 /* −11 % від 27 px, одна для всіх колекцій */
.story__intro, .story__rest { font-size: var(--fs-sm); line-height: 1.65; hyphens: auto; -webkit-hyphens: auto; }  /* усі абзаци однакові */
.story__intro p + p, .story__rest p + p { margin-top: 0.9em; }
.story__toggle { font-size: 14px; font-weight: 500; letter-spacing: 0.01em; }
.story { padding-bottom: var(--space-5); }                                                   /* до першого фото: 48 → ~32 px */
/* «Вироби колекції» й «Вам може сподобатися»: заголовок ліворуч, на ~20 % менший за «Нові надходження» */
.section--pieces .section__title, .section--related .section__title { font-size: 22px; line-height: 1.2; }
.section--pieces .section__head, .section--related .section__head { align-items: center; }
.section--pieces { padding-top: calc(var(--space-8) * 0.7); }                               /* від галереї: −~28 % */
.section--related { padding-top: 22px; }                                                  /* від «Догляд» до заголовка: 144 → ~93 px (−35 %) */
/* Телефон (ТЗ власниці 20.10): відстані по ЛІТЕРАХ — лінія «Догляд» → заголовок 55, заголовок → фото 30, ціна → чорний
   футер 55; назва й ціна — як у каталозі. Нижній відступ блоку товару (72) переноситься в секцію, лише коли вона є.
   Заголовок → фото різне за мовою: у «You may also like» хвости y нижче рядка (Poppins), у кирилиці (Montserrat) — нема. */
@media (max-width: 749px) {
  .container:has(+ .section--related) .product { padding-bottom: 0; }
  /* ТЗ 21.10 — система CORNER по межах блоків (замість підгонки по літерах): останній блок товару → заголовок 48,
     заголовок → карусель 32 (UA і EN однаково), низ каруселі (з назвами й цінами) → футер 72 */
  /* Система СПІЛЬНА для «Вам може сподобатися» (товар) і «Вироби колекції» (колекція, ТЗ 21.10): попередній контент →
     заголовок 48, заголовок → карусель 32, низ каруселі → футер 72. Попередній блок своїх нижніх відступів не має */
  .section.section--related, .section.section--pieces { padding-top: 48px; padding-bottom: 72px; }
  .section--related .section__head, .section--pieces .section__head { margin-bottom: 32px; }
  .section--related .slider, .section--pieces .slider { padding-bottom: 0; }   /* низ карток = низ каруселі, інакше 72 + 8 */
  .container:has(+ .section--pieces) .edit-gallery, .container:has(+ .section--pieces) .text-page { padding-bottom: 0; margin-bottom: 0; }
  .section--related .card__title { flex-grow: 0; }
  .section--related .card .price--card { font-size: 12px; font-weight: 400; line-height: 15px; letter-spacing: 0.04em; }
  /* «Вироби колекції» (власниця 21.10): ціна як у «Вам може сподобатися» — 14 → 12 px, 400, 15 px, 0.04em */
  .section--pieces .card .price--card { font-size: 12px; font-weight: 400; line-height: 15px; letter-spacing: 0.04em; }
  /* стрілки (ТЗ 20.10, принцип KATIMO): тонкі чорні, без тла й рамки, праворуч від заголовка; зона дотику 44×44, але
     від'ємні поля лишають висоту шапки = рядку заголовка (26.4), тож погоджені 55 / 30 не зсуваються; права стрілка — по краю */
  .section--related .slider__nav, .section--pieces .slider__nav { display: flex; gap: 0; margin: -9px -13px -9px 0; }
  .section--related .slider__nav .icon-btn, .section--pieces .slider__nav .icon-btn { width: 44px; height: 44px; color: var(--c-fg); background: none; border: 0; }
  .section--related .slider__nav svg, .section--pieces .slider__nav svg { width: 18px; height: 18px; stroke-width: 1.2; }
  .section--related .slider__nav .icon-btn:disabled, .section--pieces .slider__nav .icon-btn:disabled { opacity: 0.25; cursor: default; }
  .section--related .slider__nav .icon-btn:focus:not(:focus-visible), .section--pieces .slider__nav .icon-btn:focus:not(:focus-visible) { outline: none; }
}
.story { padding-bottom: 32px; }                 /* «Читати далі» → перше фото ≈ 32 px (було 48) */
.edit-gallery { padding-bottom: 48px; }          /* остання фото → «Вироби колекції» ≈ 110 px (було 156, −~28 %) */

/* ТЗ №9 §06: шапка оформлення — логотип по центру й того ж розміру, що в основній шапці; праворуч лише кошик */
.co-header__inner { display: grid; grid-template-columns: var(--tap) 1fr var(--tap); align-items: center; }
.co-header__inner::before { content: ""; }
.co-header__logo { justify-self: center; }
.co-header__logo img { width: auto; height: 38px; }
@media (min-width: 990px) { .co-header__logo img { height: 48px; } }
.co-header .icon-btn { justify-self: end; }

/* ---------------------------------------------------------------- ТЗ №8 §05: інформаційні сторінки — один стиль на всі чотири */
.legal { max-width: 760px; margin: 0 auto; padding: var(--space-6) 0 var(--space-8); font-size: var(--fs-sm); line-height: 1.7; color: var(--c-fg);
  overflow-wrap: anywhere; hyphens: auto; -webkit-hyphens: auto; }
.legal > strong:first-child, .legal > p:first-child > strong:only-child { display: block; margin-bottom: var(--space-5); font-size: 17px; font-weight: 600; letter-spacing: 0.02em; line-height: 1.35; }
.legal h2 { margin: 2em 0 0.6em; font-size: 15px; font-weight: 600; letter-spacing: 0.02em; line-height: 1.4; }
.legal h2:first-child { margin-top: 0; }
.legal h3 { margin: 1.6em 0 0.5em; font-size: var(--fs-sm); font-weight: 600; }
.legal p + p { margin-top: 0.8em; }
.legal ul, .legal ol { margin: 0.6em 0 0.8em; padding-left: 1.3em; }
.legal li + li { margin-top: 0.3em; }
.legal a { text-decoration: underline; text-underline-offset: 2px; }

/* ---------------------------------------------------------------- ТЗ №11: «Контакти» — лінії після вступу, телефону, пошти й офісу */
.contacts-page .page-head { padding-bottom: var(--space-4); }
.contact-list { margin-top: 0; border-top: var(--hairline) solid var(--c-line); }
.contact-list__item { padding: var(--space-4) 0; border-top: 0; border-bottom: var(--hairline) solid var(--c-line); }
.contact-list__item:last-child { border-bottom: 0; padding-bottom: 0; }
.contact-list { margin-bottom: var(--space-6); }

/* ---------------------------------------------------------------- ТЗ №12: «Про нас» — легший текст, рівний ритм, цитата-акцент */
.about-cover { margin-bottom: 30px; }                                   /* колаж → перший абзац: 36 → 30 px (−~17 %) */
.about-text { font-size: 15px; line-height: 1.7; padding-bottom: 56px; hyphens: auto; -webkit-hyphens: auto; }  /* трохи більший за текст колекцій (14 px) */
.about-text p + p { margin-top: 20px; }                                 /* однаковий проміжок між звичайними абзацами */
.about-text .about-text__quote, .about-text p + .about-text__quote { margin: 40px 0; }   /* цитата — більші й рівні відступи до і після */
.about-text .about-text__quote + p { margin-top: 0; }
/* PDF-ТЗ «About Us Mobile» (21.10). Комп'ютер — як було: h1 лише для пошуковиків (як .visually-hidden), колаж є.
   Телефон: шапка → видимий заголовок → текст ліворуч (без justify); колаж прихований (нове фото — окремим етапом).
   Заголовок — наявна система сайту, як заголовки секцій («Вам може сподобатися»): 22 / 400 / 1.2 / −0.04em, без капсу;
   відступи — як на інформаційних сторінках (шапка → заголовок 32, заголовок → текст 24). Початковий варіант. */
.about-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* «Контакти» (власниця 21.10): той самий h1 — на телефоні видимий, як заголовок «Про нас» (26 / 400 / 1.2 / −0.02em;
   UA Montserrat, EN Poppins); відступи сторінки не чіпаємо (шапка сторінки 48 зверху, вступ 16 під заголовком). Комп'ютер — як було. */
.contacts-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 749px) {
  .contacts-title { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal;
    margin: 0; font-size: 26px; font-weight: 400; line-height: 1.2; letter-spacing: -0.02em; text-transform: none; }
  .contacts-title:lang(uk) { font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif; }
  .contacts-title:lang(en) { font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif; }
  .contacts-page__intro { line-height: 1.6; }   /* власниця 21.10: 1.5 → 1.6 (25.6 при 16 px) */
  /* ТЗ 21.10, єдина система відступів: шапка → заголовок 32, заголовок → вступ 24, вступ → перша лінія 32;
     у блоці: лінія → назва 16, назва → дані 8, дані → наступна лінія 16; останній блок → карта 32; карта → футер 0.
     Кожен проміжок задає одна властивість; лінії (колір, товщина, ширина) не чіпаємо */
  .contacts-page .page-head { padding-top: 32px; padding-bottom: 32px; }
  .contacts-page__intro { margin-top: 24px; }
  .contact-list__item { padding: 16px 0; }
  .contact-list__item:last-child { padding-bottom: 0; }
  .contact-list dt { margin-bottom: 8px; }
  .contact-list { margin-bottom: 32px; }
  .contacts-map { margin-bottom: 0; }
  /* поле дотику соцмереж (6 px зверху й знизу) лишається, але не роздуває рядок: блок соцмереж — тієї ж висоти, що й інші */
  .contact-list__social a { margin: -6px 0; }
}
@media (max-width: 749px) {
  .about-title { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal;
    margin: 32px 0 24px; font-size: 22px; font-weight: 400; line-height: 1.2; letter-spacing: -0.04em; text-transform: none; }
  .about-cover { display: none; }
  .about-text p { text-align: left; }
  /* тест власниці 21.10: заголовок 26 / −0.02em, текст 14 / 1.6, цитата 20 / 1.3, без автопереносів; відступи ті самі */
  .about-title { font-size: 26px; letter-spacing: -0.02em; }
  .about-text { font-size: 14px; line-height: 1.6; hyphens: none; -webkit-hyphens: none; }
  .about-text .about-text__quote { font-size: 20px; line-height: 1.3; hyphens: none; -webkit-hyphens: none; }
  /* тест власниці 21.10 (2): цитата стриманіша — 18 px, ліворуч, 28 px до і після (було 40) */
  /* тест власниці 21.10 (3): цитата знову виразніша — 20 / 1.3, по центру, 30 до і після */
  .about-text .about-text__quote, .about-text p + .about-text__quote { font-size: 20px; text-align: center; margin: 30px 0; }
  /* UA: увесь основний текст Montserrat, включно з латиницею («CORNER by Levishko», слоган) — раніше латиниця йшла Poppins.
     EN — Poppins; цитата — Cormorant для обох мов */
  .about-text:lang(uk) p { font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif; }
  /* тест власниці 21.10 (4), CSS-відступи: шапка → заголовок 30, заголовок → текст 25, останній абзац → футер 50 */
  .about-title { margin: 30px 0 25px; }
  .about-text { padding-bottom: 50px; }
  /* ТЗ 21.10: фото після тексту, перед футером; міняється в адмінці («Налаштування сайту» → «Фото на сторінці „Про нас“»).
     ТЗ 21.10 (2): узгоджена система відступів 32 / 24 / 24 / 32 / 32 / 32 / 0 — кожен проміжок задає одна властивість:
     margin-top наступного блока; padding-bottom тексту й margin-bottom останнього блока обнулені, щоб не складались */
  .about-title { margin: 32px 0 24px; }
  .about-text { padding-bottom: 0; }
  .about-text p + p { margin-top: 24px; }
  .about-text .about-text__quote, .about-text p + .about-text__quote { margin: 32px 0 0; }
  .about-text .about-text__quote + p { margin-top: 32px; }
  .about-text > :first-child { margin-top: 0; }
  /* фото 3:4 на всю ширину екрана, без бічних полів (вихід за поля контейнера), без деформації */
  .about-photo { display: block; margin: 32px calc(-1 * var(--gutter)) 0; aspect-ratio: 3 / 4; overflow: hidden; }
  .about-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
}
.about-photo { display: none; }   /* на комп'ютері — без змін: там колаж угорі */
@media (max-width: 749px) { .about-photo { display: block; } }

/* ---------------------------------------------------------------- інформаційні сторінки: однакові рівні (уточнення 18.10) */
/* назва документа → розділ (h2 / нумерований розділ) → підрозділ (h3) → текст; списки й жирне — одним стилем */
.legal > strong:first-child { display: block; margin-bottom: var(--space-5); font-size: 17px; font-weight: 600; letter-spacing: 0.02em; line-height: 1.35; text-transform: uppercase; }
.legal h2, .legal ol.legal__section { margin: 2em 0 0.7em; padding: 0; font-size: 14px; font-weight: 600; letter-spacing: 0.04em; line-height: 1.4; text-transform: uppercase; }
.legal h2 strong, .legal h3 strong { font-weight: inherit; }
.legal ol.legal__section { list-style: decimal inside; }
.legal ol.legal__section li { margin: 0; }
.legal h3 { margin: 1.5em 0 0.5em; font-size: 14px; font-weight: 600; letter-spacing: 0; line-height: 1.4; text-transform: none; }
.legal > h2:first-child, .legal > h3:first-child { margin-top: 0; }
.legal p { font-size: 14px; line-height: 1.7; }
.legal p + p { margin-top: 0.8em; }
.legal strong { font-weight: 600; }
.legal ul, .legal ol:not(.legal__section) { margin: 0.6em 0 0.8em; padding-left: 1.3em; }
.legal ol:not(.legal__section) { list-style: decimal; }
.legal ul { list-style: disc; }

/* Інформаційні сторінки на телефоні («Публічна оферта», «Політика конфіденційності», «Оплата та доставка», «Обмін та
   повернення» — одна розмітка .legal). ТЗ власниці 19.10 (тестовий варіант; якщо 13 px задрібно — текст назад на 14,
   відступи лишити): назва 16/600/1.35/+0.02em, розділ 14/600/1.4/+0.04em, підзаголовок 14/600/1.4, текст 13/400/1.6.
   Відступи: після назви 24, перед розділом 28 і після 12 (перший на сторінці — без верхнього), перед підзаголовком 20 і
   після 8, між абзацами 12. Шрифт — за мовою сторінки, без змішування: UA — Montserrat для всього (і латиниця, цифри,
   адреси), EN — Poppins. Без переносу через дефіс; довгі адреси / e-mail не виходять за екран. */
@media (max-width: 749px) {
  .legal, .legal * { -webkit-hyphens: none; hyphens: none; }
  .legal:lang(uk), .legal:lang(uk) * { font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif; }
  .legal:lang(en), .legal:lang(en) * { font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif; }
  /* описи колекцій (власниця 21.10) — та сама логіка: UA увесь текст Montserrat (і латиниця, і курсив), EN — Poppins */
  .story__intro:lang(uk), .story__intro:lang(uk) *, .story__rest:lang(uk), .story__rest:lang(uk) * { font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif; }
  .story__intro:lang(en), .story__intro:lang(en) *, .story__rest:lang(en), .story__rest:lang(en) * { font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif; }
  .story__intro, .story__rest { line-height: 1.6; }   /* власниця 21.10: 1.65 → 1.6 (22.4 при 14 px) */  /* назва колекції на банері головної (власниця 21.10): UA — Montserrat (і латиниця), EN — Poppins; розміри без змін */
  .banner--home .banner__title:lang(uk) { font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif; }
  .banner--home .banner__title:lang(en) { font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif; }
  .banner--home .banner__title { font-size: 26px; }   /* тест власниці 21.10: 27 → 26 px; 400 / 1.0 / −0.04em / центр — як були */
  /* текст акордеонів товару «Опис / Деталі / Догляд» (власниця 21.10): UA — Montserrat (і латиниця: склад, VI/PL…), EN — Poppins */
  .product .accordion__body:lang(uk), .product .accordion__body:lang(uk) * { font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif; }
  .product .accordion__body:lang(en), .product .accordion__body:lang(en) * { font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif; }
  .legal { overflow-wrap: break-word; }
  .legal a { overflow-wrap: anywhere; }
  .legal > strong:first-child, .legal > p:first-child > strong:only-child { font-size: 16px; line-height: 1.35; margin-bottom: 24px; }
  .legal > p:first-child:has(> strong:only-child) + *, .legal > strong:first-child + * { margin-top: 0; }   /* рівно 24 після назви */
  .legal h2, .legal ol.legal__section { margin: 32px 0 12px; font-size: 14px; line-height: 1.4; }   /* ТЗ 21.10: текст → розділ 28 → 32 */
  .legal h3 { margin: 24px 0 8px; font-size: 14px; line-height: 1.4; }   /* ТЗ 21.10: текст → підзаголовок 20 → 24 */
  .legal > h2:first-child, .legal > h3:first-child, .legal > ol.legal__section:first-child { margin-top: 0; }
  /* ТЗ 21.10: назва сторінки → перший блок 24 на всіх сторінках — і коли назва жирний рядок (оферта, політика), і коли
     це перший h2 (доставка, обмін); наступний блок без власного верхнього відступу, щоб не складалось. Заголовок
     розділу → підзаголовок одразу під ним — 12, як заголовок розділу → текст. */
  .legal > h2:first-child { margin-bottom: 24px; }
  .legal > h2:first-child + * { margin-top: 0; }
  .legal h2 + h3, .legal ol.legal__section + h3 { margin-top: 12px; }
  .legal p, .legal ul, .legal ol:not(.legal__section) { font-size: 12px; line-height: 1.6; }   /* тест власниці 21.10: 13 → 12 px (19.2) */
  .legal p + p { margin-top: 12px; }
  .legal ul, .legal ol:not(.legal__section) { margin: 8px 0 12px; }
  .legal li + li { margin-top: 4px; }
}

/* ---------------------------------------------------------------- «Колекції» (телефон), ТЗ 21.10 — система CORNER
   Загальна сторінка: між обкладинками 16 (було 12). Окрема колекція: шапка → назва 32 (було 24), назва → опис 24 (було 32);
   галерея → «Вироби колекції» і далі — спільна система з «Вам може сподобатися» (вище). Шаблон один для всіх колекцій. */
@media (max-width: 749px) {
  .collection-list { gap: 16px; }
  .page-head--collection { padding-top: 32px; padding-bottom: 24px; }
  /* колекції-«статті» (архівні): останнє фото тексту мало margin-bottom 24, що додавалось до 48 / 72 системи */
  .page-head--collection + .text-page > :last-child { margin-bottom: 0; }
  /* Доповнення до ТЗ 21.10 — уніфікація колекцій. «Вироби колекції» — та сама ширина карток, що й у «Вам може
     сподобатися» (дві на екран; було 72 %) */
  .section--pieces .slider { grid-auto-columns: calc((100% - var(--grid-gap-x)) / 2); }
  /* колекції-«статті» (архівні): опис тим самим набором, що й у колекцій-галерей — 14 / 1.6, по ширині, з переносами,
     шрифт за мовою (UA Montserrat, EN Poppins; раніше UA йшов Poppins, ліворуч, без переносів) */
  .page-head--collection + .text-page { font-size: 14px; line-height: 1.6; text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
  .page-head--collection + .text-page:lang(uk), .page-head--collection + .text-page:lang(uk) * { font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif; }
  .page-head--collection + .text-page:lang(en), .page-head--collection + .text-page:lang(en) * { font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif; }
}

/* Доповнення до ТЗ 21.10 — переноси в колекціях (телефон): без автоматичних переносів із дефісом, слова переходять на
   наступний рядок цілими. Заголовок, опис (галереї й «статті»), «Читати далі», «Вироби колекції»; UA і EN однаково.
   Розміри, інтерліньяж і поля не змінюються */
@media (max-width: 749px) {
  .page-head--collection, .page-head--collection *,
  .story, .story *,
  .page-head--collection + .text-page, .page-head--collection + .text-page *,
  .section--pieces, .section--pieces * { hyphens: none; -webkit-hyphens: none; overflow-wrap: normal; word-break: normal; }
}

/* ТЗ 21.10 — шрифти верхньої частини колекцій (телефон): назва (H1) і «Читати далі» теж за мовою, як опис
   (UA Montserrat, EN Poppins). Раніше H1 і кнопка йшли Poppins і в UA — латинські назви колекцій були Poppins */
@media (max-width: 749px) {
  .page-head--collection .page-title:lang(uk), .story__toggle:lang(uk) { font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif; }
  .page-head--collection .page-title:lang(en), .story__toggle:lang(en) { font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif; }
}

/* ТЗ 21.10 — H1 колекцій (телефон): усі параметри в одному місці, спільний клас для всіх наявних і майбутніх колекцій.
   Значення ті самі, що й діяли (заміряно на 22 сторінках), — правило лише фіксує їх, щоб не розповзлися */
@media (max-width: 749px) {
  .page-head--collection .page-title { font-size: 24px; font-weight: 400; line-height: 1.2; letter-spacing: -0.04em; text-align: center; font-style: normal; }
  .page-head--collection .page-title:lang(uk) { font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif; }
  .page-head--collection .page-title:lang(en) { font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif; }
}

/* ТЗ 22.10 (власниця): текст колекцій на телефоні — знову по ширині (justify), переноси вимкнені (hyphens: none, вище).
   Правило «ліворуч» від 21.10 прибрано; justify задають наявні правила .story__intro / .story__rest і .text-page колекцій */

/* ТЗ 22.10 — промокод в оформленні (поки лише вигляд, лише телефон): поле + «Застосувати» в одному рядку, між коментарем
   і згодою з умовами. Поле — той самий компонент .fl (рамка, 52 px, заокруглення, сіра підказка); кнопка неактивна */
.co-promo { display: none; }
@media (max-width: 749px) {
  .co-promo { display: flex; gap: var(--space-2); align-items: stretch; margin-bottom: var(--space-3); }
  .co-promo__field { flex: 1 1 auto; min-width: 0; margin-bottom: 0; }
  .co-promo__apply { flex: 0 0 auto; height: 52px; padding: 0 18px; border: 1px solid var(--co-line); border-radius: var(--co-radius);
    background: #fafafa; color: var(--c-fg-muted); font: inherit; font-size: 14px; font-weight: 500; }
  .co-promo__apply:disabled { cursor: default; }
}

/* ТЗ 22.10 (2) — промокод, доопрацювання (телефон): поле й кнопка 48 px (було 52), кнопка вужча (поля 12 замість 18),
   коментар → промокод → згода по 16. Активний стан кнопки — на майбутнє (коли зніметься disabled): білий фон, чорний текст */
@media (max-width: 749px) {
  .co-promo { margin-bottom: 16px; }
  .fl--area:has(+ .co-promo) { margin-bottom: 16px; }
  .co-promo__field .fl__input { height: 48px; padding: 20px 13px 4px; }
  .co-promo__field .fl__label { top: 14px; }
  .co-promo__field .fl__input:focus + .fl__label, .co-promo__field .fl__input:not(:placeholder-shown) + .fl__label { top: 5px; }
  .co-promo__apply { height: 48px; padding: 0 12px; }
  .co-promo__apply:not(:disabled) { background: var(--c-bg); color: var(--c-fg); cursor: pointer; }
}

/* desktop.css */
/* CORNER — системна адаптація десктопу (ТЗ власниці 22.10).
   Основа — погоджена мобільна система (до 749 px), перенесена на великий екран не пікселями, а пропорціями:
   кожен токен плавно росте від планшета (750 px) до десктопу (~1440 px) через clamp().
   УСІ правила файлу — лише в @media (min-width: 750px): мобільна версія ними не зачіпається за побудовою
   (перевірка — знімок обчислених стилів 17 сторінок на 390 px до й після, має бути 0 відмінностей).
   Окремі сторінки зберігають свою композицію (галереї колекцій, колаж «Про нас», карта «Контактів»). */

@media (min-width: 750px) {
  :root {
    /* вертикальний ритм: телефон → десктоп */
    --s-head: clamp(32px, 3.4vw, 48px);       /* шапка → заголовок сторінки (тел. 32) */
    --s-title: clamp(24px, 2.25vw, 32px);     /* заголовок → вміст (тел. 24) */
    --s-section: clamp(48px, 5vw, 72px);      /* між секціями (тел. 48) */
    --s-end: clamp(72px, 6.7vw, 96px);        /* останній блок → футер (тел. 72) */
    --s-row: clamp(40px, 3.4vw, 48px);        /* між рядами карток (тел. 32) */
    /* типографіка */
    --t-h1: clamp(28px, 2.4vw, 34px);         /* заголовок сторінки (тел. 24–26) */
    --t-h2: clamp(22px, 1.95vw, 28px);        /* заголовок секції (тел. 22) */
    --t-body: clamp(14px, 1.05vw, 15px);      /* основний текст (тел. 14) */
    --lh-text: 1.65;                          /* тел. 1.6; на ширшому рядку — трохи більше повітря */
    --w-text: 680px;                          /* ширина текстового блоку: ~70 знаків у рядку */
    --font-uk: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
    --font-en: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  }

  /* ------------------------------------------------------------------ типографіка: одна ієрархія на всіх сторінках */
  /* заголовок сторінки — як на телефоні видимий (там, де видимий на телефоні: «Про нас», «Контакти», колекції, кошик, 404) */
  .page-title, .about-title, .contacts-title, .page-head--collection .page-title {
    position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal;
    font-size: var(--t-h1); font-weight: 400; line-height: 1.15; letter-spacing: -0.03em; text-transform: none;
  }
  /* .section .section__title — сильніше за окремі правила секцій у pages.css (.section--pieces / --related) */
  .section .section__title { font-size: var(--t-h2); font-weight: 400; line-height: 1.2; letter-spacing: -0.03em; }
  /* шрифт за мовою — як на телефоні: UA Montserrat, EN Poppins (заголовки сторінок і основний текст) */
  .page-title:lang(uk), .about-title:lang(uk), .contacts-title:lang(uk),
  .story__intro:lang(uk), .story__intro:lang(uk) *, .story__rest:lang(uk), .story__rest:lang(uk) *,
  .about-text:lang(uk) p, .contacts-page__intro:lang(uk), .page-head--collection + .text-page:lang(uk) p,
  .product .accordion__body:lang(uk), .banner--home .banner__title:lang(uk) { font-family: var(--font-uk); }
  .page-title:lang(en), .about-title:lang(en), .contacts-title:lang(en),
  .story__intro:lang(en), .story__intro:lang(en) *, .story__rest:lang(en), .story__rest:lang(en) *,
  .about-text:lang(en) p, .contacts-page__intro:lang(en), .page-head--collection + .text-page:lang(en) p,
  .product .accordion__body:lang(en), .banner--home .banner__title:lang(en) { font-family: var(--font-en); }
  /* основний текст: один розмір і інтерліньяж; довгий текст — не ширший за --w-text */
  .story__intro, .story__rest, .about-text, .contacts-page__intro, .page-head--collection + .text-page, .legal p {
    font-size: var(--t-body); line-height: var(--lh-text);
  }
  .story, .about-text, .page-head--collection + .text-page { max-width: var(--w-text); margin-left: auto; margin-right: auto; }
  /* вирівнювання й переноси — як погоджено на телефоні: «Про нас» — ліворуч; колекції — по ширині; без автопереносів */
  .about-text p { text-align: left; }
  .story__intro, .story__rest, .page-head--collection + .text-page { text-align: justify; }
  .about-text, .about-text *, .story, .story *, .page-head--collection + .text-page, .page-head--collection + .text-page * {
    hyphens: none; -webkit-hyphens: none; overflow-wrap: normal; word-break: normal;
  }
  .legal { max-width: calc(var(--w-text) + 40px); }
  /* ціна в картці — як на телефоні в усіх списках (каталог, «Нові надходження», «Вироби колекції», рекомендації) */
  .card .price--card { font-size: 12px; font-weight: 400; line-height: 1.25; letter-spacing: 0.04em; }

  /* ------------------------------------------------------------------ вертикальний ритм */
  /* заголовок сторінки: шапка → заголовок → вміст */
  .page-head--collection { padding-top: var(--s-head); padding-bottom: var(--s-title); }
  .about-title { max-width: var(--w-text); margin: var(--s-head) auto var(--s-title); }
  .contacts-page .page-head { padding-top: var(--s-head); padding-bottom: var(--s-title); }
  .contacts-page__intro { margin-top: var(--s-title); }
  .legal { padding-top: var(--s-head); padding-bottom: var(--s-end); }
  /* блоки товарів під основним вмістом: «Вам може сподобатися», «Вироби колекції», «Нові надходження» —
     одна система: попереднє → заголовок --s-section, заголовок → карусель --s-title, низ каруселі → футер --s-end */
  .section.section--related, .section.section--pieces { padding-top: var(--s-section); padding-bottom: var(--s-end); }
  .section--related .section__head, .section--pieces .section__head, .section--new-in .section__head { margin-bottom: var(--s-title); }
  .section--related .slider, .section--pieces .slider { padding-bottom: 0; }
  .container:has(+ .section--related) .product { padding-bottom: 0; }
  .container:has(+ .section--pieces) .edit-gallery, .container:has(+ .section--pieces) .text-page { padding-bottom: 0; }
  .page-head--collection + .text-page > :last-child { margin-bottom: 0; }
  .section.section--new-in { padding-top: var(--s-section); }
  /* каталог: між рядами карток, кінець сітки → футер */
  .product-grid { row-gap: var(--s-row); padding-bottom: var(--s-end); }
  /* колекції: останнє фото / текст → футер, коли «Виробів» нема */
  .edit-gallery { padding-bottom: var(--s-end); }
  .page-head--collection + .text-page { padding-bottom: var(--s-end); }

  /* ------------------------------------------------------------------ футер: та сама система, що на телефоні (48 / 48 / 48),
     на десктопі — --s-section (48 → 72); «Контакти»: карта впритул до футера, як на телефоні */
  .footer { padding-top: var(--s-section); }
  .footer__grid, .footer__grid--two { row-gap: var(--s-section); }
  .footer__bottom, .footer__bottom--center { margin-top: var(--s-section); }
  .contacts-map { margin-bottom: 0; }

  /* ------------------------------------------------------------------ «Про нас»: фото, погоджене на телефоні, — і на десктопі
     (після тексту, перед футером, тієї ж ширини, що й текст; кадр 3:4, без спотворень). Колаж угорі — як був. */
  .about-text { padding-bottom: var(--s-section); }
  .about-photo { display: block; max-width: var(--w-text); margin: 0 auto var(--s-end); aspect-ratio: 3 / 4; overflow: hidden; }
  .about-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
}

/* ======================================================================================================================
   ТЗ 22.10 (2) — горизонтальна сітка десктопу: контент розширюється разом із вікном, єдині лінії вирівнювання.
   Лише від 990 px (з цієї ширини діє десктопна сітка; телефон і планшет — без змін).
   ====================================================================================================================== */
@media (min-width: 990px) {
  :root {
    --gutter: 24px;               /* 990–1279: зовнішні поля (було 36) */
    --page-max: 2560px;           /* було 1680 — на широких екранах контент стояв вузьким стовпчиком по центру */
    --nav-gap: clamp(28px, 2.4vw, 44px);     /* між пунктами меню (було 24) */
    --icon-gap: clamp(8px, 0.9vw, 16px);     /* між іконками (було 0) */
    --w-gallery: clamp(900px, 72vw, 1280px); /* редакційні фото: колекції, колаж «Про нас» (було 900) */
    --w-covers: clamp(720px, 52vw, 920px);   /* обкладинки «Колекцій» 4:5 (було 720) */
  }
  /* шапка: меню від лівої лінії сітки, кошик — до правої; поле всередині іконки (32 px кнопка, 24 px знак) компенсуємо,
     щоб знак стояв рівно на лінії; логотип — у центральній колонці сітки 1fr auto 1fr, тобто по центру */
  .nav { gap: var(--nav-gap); }
  .header__right { gap: var(--icon-gap); margin-right: -4px; }
  /* ширші фото й обкладинки там, де композиція це передбачає; текст — і далі не ширший за --w-text */
  .edit-gallery, .about-cover { max-width: var(--w-gallery); }
  .collection-list { max-width: var(--w-covers); }
}
@media (min-width: 1280px) { :root { --gutter: 32px; } }
@media (min-width: 1600px) { :root { --gutter: 44px; } }