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