/* 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; }