/* ============================================================================
   SWIT v2 — новый фронт с нуля. Профессиональный ecommerce UI.
   Самодостаточный CSS, БЕЗ legacy main.css. Дизайн-язык Comfy/Rozetka на
   красном бренде SWIT. Функционал (корзина/фильтры/поиск) подключается отдельно.
   Правки 2026-07-25: выверенные пропорции, ритм, типографика.
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }

/* Атрибут hidden має ховати. Браузер дає йому display:none найслабшим
   правилом, тож будь-який клас із display його перебиває — а ми ставимо
   display майже всюди. Через це кошик показував віддалений товар: із
   пам'яті він зникав, блок отримував hidden, але .cart { display: grid }
   лишав його на екрані, і виглядало це так, ніби «Видалити» не працює.
   Двічі це вже лікували поштучно (.auth__code, .cart__row) — тепер
   правило одне на весь фронт. */
[hidden] { display: none !important; }

:root {
    /* Нейтрали */
    --ink: #16181D;
    --ink-soft: #40444E;
    --muted: #767B87;
    --faint: #A7ACB6;
    --line: #E9EBF0;
    --line-2: #F1F3F7;
    --bg: #F4F5F9;
    --surface: #FFFFFF;

    /* Бренд */
    --brand: #E11D1D;
    --brand-dark: #BE1414;
    --brand-tint: #FDECEC;

    --star: #FFB400;
    --success: #16A34A;
    --badge-top: #F59E0B;

    /* Пастельные тинты плиток */
    --t1:#EEF2FF; --t2:#E9F7EF; --t3:#FFF0EB; --t4:#EAF4FF; --t5:#FBEDF5; --t6:#FFF6E3;

    /* Скругления */
    --r-xs: 10px;
    --r-sm: 14px;
    --r: 18px;
    --r-lg: 22px;
    --pill: 999px;

    /* Тени — мягкие, слоёные */
    --sh-1: 0 1px 2px rgba(20,22,34,.04), 0 2px 6px rgba(20,22,34,.04);
    --sh-2: 0 4px 14px rgba(20,22,34,.06);
    --sh-hover: 0 14px 34px rgba(20,22,34,.14);

    --ease: .22s cubic-bezier(.22,1,.36,1);
    --wrap: 1300px;
}

html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { overflow-x: clip; }
body {
    margin: 0;
    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
/* Часть картинок обёрнута в <picture>, чтобы телефон получал вариант полегче.
   display:contents убирает саму обёртку из расчёта вёрстки: картинка остаётся
   прямым потомком блока, и проценты высоты с абсолютным позиционированием
   считаются от него, как до обёртки. */
picture { display: contents; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
h1,h2,h3,h4 { margin: 0; line-height: 1.15; letter-spacing: -0.02em; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

/* Доступность: видимый фокус только с клавиатуры */
a:focus-visible, button:focus-visible, .btn:focus-visible, [role="button"]:focus-visible, [tabindex]:focus-visible, summary:focus-visible {
    outline: 2.5px solid var(--brand); outline-offset: 3px; border-radius: 6px;
}
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; }

/* Появление секций при скролле (только когда есть JS; graceful без него) */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
.js .reveal.revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } }

/* --- Кнопки ---------------------------------------------------------------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 46px; padding: 0 24px;
    border-radius: var(--pill);
    font-weight: 600; font-size: 14.5px;
    transition: background var(--ease), color var(--ease), transform var(--ease), box-shadow var(--ease);
    white-space: nowrap;
}
.btn--brand { background: var(--brand); color: #fff; box-shadow: 0 6px 16px rgba(225,29,29,.24); }
.btn.is-added { background: var(--success) !important; box-shadow: 0 6px 16px rgba(22,163,74,.25) !important; }
.btn--brand:hover { background: var(--brand-dark); transform: translateY(-1px); box-shadow: 0 10px 22px rgba(225,29,29,.3); }
.btn--brand:active { transform: translateY(0); }
.btn--ghost { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn--sm { height: 42px; padding: 0 16px; font-size: 14px; }
.btn--block { width: 100%; }

/* --- Топбар ---------------------------------------------------------------- */
.topbar { background: var(--surface); border-bottom: 1px solid var(--line); font-size: 13px; }
.topbar__in { display: flex; align-items: center; gap: 20px; height: 42px; }
.topbar a { color: var(--muted); transition: color var(--ease); }
.topbar a:hover { color: var(--ink); }
.topbar__spacer { margin-left: auto; }
.topbar__accent { color: var(--ink) !important; font-weight: 700; }
.topbar__lang { display: inline-flex; gap: 2px; }
.topbar__lang a { font-weight: 600; padding: 2px 6px; border-radius: 6px; }
.topbar__lang a.is-active { background: var(--brand-tint); color: var(--brand) !important; }

/* --- Хедер ----------------------------------------------------------------- */
.header { position: sticky; top: 0; z-index: 50; background: var(--surface); box-shadow: 0 1px 0 var(--line); transition: box-shadow var(--ease); }
.header.is-scrolled { box-shadow: 0 1px 0 var(--line), 0 8px 24px rgba(20,22,34,.09); }
.header__in { display: flex; align-items: center; gap: 16px; height: 88px; }
.header__in .catalog { margin-right: -4px; }
.logo { flex: none; display: flex; align-items: center; }
.logo img { height: 46px; width: auto; }

.catalog { position: relative; flex: none; }
.catalog-btn {
    display: inline-flex; align-items: center; gap: 11px;
    height: 52px; padding: 0 24px;
    background: var(--brand); color: #fff; font-weight: 700; font-size: 15px;
    letter-spacing: .01em; text-transform: uppercase;
    border-radius: var(--pill); flex: none; cursor: pointer;
    box-shadow: 0 6px 16px rgba(225,29,29,.24);
    transition: background var(--ease), box-shadow var(--ease);
}
.catalog-btn:hover { background: var(--brand-dark); box-shadow: 0 10px 22px rgba(225,29,29,.3); }
.catalog-btn__grid { display: grid; grid-template-columns: repeat(2,7px); grid-template-rows: repeat(2,7px); gap: 3px; }
.catalog-btn__grid i { background: #fff; border-radius: 1.5px; }
.catalog-btn__chev { width: 14px; height: 14px; transition: transform var(--ease); }
.catalog.is-open .catalog-btn__chev { transform: rotate(180deg); }

/* Мега-меню — новый дизайн: пастельные чипы, крупные читаемые пункты */
.catalog__menu { position: absolute; top: calc(100% + 12px); left: 0; z-index: 60;
    width: 940px; max-width: 92vw; min-height: 420px; background: var(--surface); border-radius: var(--r-lg);
    box-shadow: 0 24px 70px rgba(20,22,34,.24); padding: 12px; display: grid;
    grid-template-columns: 320px 1fr; gap: 12px;
    opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity var(--ease), visibility var(--ease), transform var(--ease); }
.catalog.is-open .catalog__menu { opacity: 1; visibility: visible; transform: none; }
.catalog__list { list-style: none; margin: 0; padding: 4px; max-height: 66vh; overflow-y: auto; }
.catalog__lead { display: flex; align-items: center; gap: 13px; padding: 11px 14px; border-radius: var(--r); font-weight: 600; font-size: 15px; color: var(--ink); transition: background var(--ease); }
.catalog__lead:hover, .catalog__item.is-active .catalog__lead { background: var(--bg); }
.catalog__item.is-active .catalog__lead { color: var(--brand); }
.catalog__ico { flex: none; width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--brand); }
.catalog__ico .ci { width: 22px; height: 22px; }
/* пастельные чипы по индексу (как плитки на главной) */
.catalog__item:nth-child(6n+1) .catalog__ico{background:var(--t1)} .catalog__item:nth-child(6n+2) .catalog__ico{background:var(--t2)}
.catalog__item:nth-child(6n+3) .catalog__ico{background:var(--t3)} .catalog__item:nth-child(6n+4) .catalog__ico{background:var(--t4)}
.catalog__item:nth-child(6n+5) .catalog__ico{background:var(--t5)} .catalog__item:nth-child(6n+6) .catalog__ico{background:var(--t6)}
.catalog__lead > span:nth-child(2) { flex: 1; }
.catalog__arrow { width: 16px; height: 16px; color: var(--faint); opacity: 0; transform: translateX(-4px); transition: opacity var(--ease), transform var(--ease), color var(--ease); }
.catalog__lead:hover .catalog__arrow, .catalog__item.is-active .catalog__arrow { opacity: 1; transform: translateX(0); }
.catalog__item.is-active .catalog__arrow { color: var(--brand); }
/* правая панель — активная категория (абсолютно, поверх правой колонки) */
.catalog__sub { display: none; position: absolute; left: 344px; top: 12px; right: 12px; bottom: 12px; overflow-y: auto; padding: 26px 30px; background: var(--bg); border-radius: var(--r); }
.catalog__item.is-active .catalog__sub { display: block; }
.catalog__sub-title { display: flex; align-items: baseline; gap: 14px; font-size: 20px; font-weight: 800; color: var(--ink); margin-bottom: 20px; letter-spacing: -.02em; }
.catalog__sub-title span { font-size: 13.5px; font-weight: 700; color: var(--brand); white-space: nowrap; }
/* Розкладка задана нижче колонками — тут лише типографіка пунктів. */
.catalog__sub-grid a { padding: 9px 0; font-size: 14.5px; color: var(--ink-soft); font-weight: 500; transition: color var(--ease), padding var(--ease); border-bottom: 1px solid transparent; }
.catalog__sub-grid a:hover { color: var(--brand); padding-left: 6px; }

/* Затемнение под меню */
.scrim { position: fixed; inset: 0; background: rgba(16,18,24,.32); opacity: 0; visibility: hidden; transition: opacity var(--ease), visibility var(--ease); z-index: 45; }
.scrim.is-on { opacity: 1; visibility: visible; }

/* Лайтбокс галереи */
.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(15,16,22,.93); display: flex; align-items: center; justify-content: center; padding: 40px; animation: lbIn .2s var(--ease); }
@keyframes lbIn { from { opacity: 0; } to { opacity: 1; } }
.lightbox__img { max-width: 92vw; max-height: 88vh; object-fit: contain; border-radius: 10px; cursor: zoom-in; transition: transform .25s var(--ease); }
/* Натиснули по знімку — удвічі більший кадр. Точку збільшення веде миша,
   інакше при подвоєнні видно було б тільки середину. */
.lightbox__img.is-x2 { transform: scale(2); cursor: zoom-out; }
.lightbox__close { position: absolute; top: 20px; right: 24px; width: 46px; height: 46px; border-radius: var(--pill); background: rgba(255,255,255,.14); color: #fff; font-size: 20px; display: flex; align-items: center; justify-content: center; transition: background var(--ease); }
.lightbox__close:hover { background: rgba(255,255,255,.28); }
.lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 54px; height: 54px; border-radius: var(--pill); background: rgba(255,255,255,.14); color: #fff; font-size: 30px; line-height: 1; display: flex; align-items: center; justify-content: center; transition: background var(--ease); }
.lightbox__nav:hover { background: rgba(255,255,255,.28); }
.lightbox__prev { left: 20px; } .lightbox__next { right: 20px; }
@media (max-width: 720px) { .lightbox__nav { width: 44px; height: 44px; font-size: 24px; } .lightbox__prev { left: 8px; } .lightbox__next { right: 8px; } }

/* Тост-уведомление */
.toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); z-index: 100; background: var(--ink); color: #fff; padding: 13px 22px; border-radius: var(--pill); font-weight: 600; font-size: 14px; box-shadow: 0 14px 34px rgba(20,22,34,.3); opacity: 0; transition: opacity var(--ease), transform var(--ease); pointer-events: none; }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* Корзина */
.cart { display: grid; grid-template-columns: 1fr 340px; gap: 18px; align-items: start; }
.cart__items { display: flex; flex-direction: column; }
/* Лічильник і видалення стоять поруч в одній комірці: кошик одразу за
   «плюсом», там, де людина й так порається з кількістю. */
.citem { display: grid; grid-template-columns: 84px 1fr auto auto; grid-template-areas: "img main ctl price"; gap: 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line-2); }
.citem__ctl { grid-area: ctl; display: flex; align-items: center; gap: 8px; }
.citem__img { grid-area: img; } .citem__main { grid-area: main; } .citem__qty { flex: none; } .citem__price { grid-area: price; }
.citem:first-child { padding-top: 0; }
.citem:last-child { border-bottom: 0; padding-bottom: 0; }
.citem__img { width: 84px; height: 84px; border-radius: var(--r-sm); background: var(--bg); display: flex; align-items: center; justify-content: center; padding: 8px; }
.citem__img img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.citem__name { font-size: 14px; color: var(--ink); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.citem__name:hover { color: var(--brand); }
/* Значок, а не рядок тексту. Розмір у ту саму висоту, що й лічильник, —
   тоді пара читається як один блок керування, а не як два різні. */
.citem__remove { flex: none; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-sm); background: transparent; color: var(--muted); transition: color var(--ease), background var(--ease); }
.citem__remove svg { width: 19px; height: 19px; }
.citem__remove:hover { color: var(--brand); background: var(--brand-tint); }
.citem__qty { height: 42px; }
.citem__price { font-weight: 800; font-size: 16px; white-space: nowrap; text-align: right; min-width: 96px; }
.cart__summary { position: sticky; top: 104px; }
.shipbar { background: var(--brand-tint); border-radius: var(--r); padding: 13px 16px; margin-bottom: 16px; font-size: 13.5px; color: var(--ink-soft); }
.shipbar b { color: var(--brand); }
.shipbar--done { background: #E9F7EF; }
.shipbar--done b { color: var(--success); }
.shipbar__track { display: block; height: 7px; border-radius: 999px; background: rgba(225,29,29,.15); margin-top: 10px; overflow: hidden; }
.shipbar__fill { display: block; height: 100%; border-radius: 999px; background: var(--brand); transition: width .4s var(--ease); }
.cart__summary-title { font-size: 19px; margin-bottom: 16px; }
.cart__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; font-size: 14px; color: var(--ink-soft); }
.cart__row--total { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 14px; font-size: 17px; font-weight: 800; color: var(--ink); }
.cart__free { color: var(--muted); font-size: 13px; }
.cart__continue { display: block; text-align: center; margin-top: 12px; color: var(--muted); font-size: 13.5px; }
.cart__continue:hover { color: var(--brand); }

/* Оформление заказа */
.checkout { display: grid; grid-template-columns: 1fr 360px; gap: 18px; align-items: start; }
.checkout__h { font-size: 17px; margin: 22px 0 14px; }
.checkout__h:first-child { margin-top: 0; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field span { font-size: 13px; color: var(--muted); font-weight: 600; }
.field input, .field textarea { border: 1.5px solid var(--line); border-radius: var(--r-sm); padding: 12px 14px; font: inherit; font-size: 14px; color: var(--ink); background: var(--surface); transition: border-color var(--ease), box-shadow var(--ease); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
.opt-list { display: flex; flex-direction: column; gap: 8px; }
.opt { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border: 1.5px solid var(--line); border-radius: var(--r-sm); cursor: pointer; font-size: 14px; transition: border-color var(--ease), background var(--ease); }
.opt:has(input:checked) { border-color: var(--brand); background: var(--brand-tint); }
.opt input { width: 18px; height: 18px; accent-color: var(--brand); }
.checkout__summary { position: sticky; top: 104px; }
.checkout__items { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.cosum { display: flex; align-items: baseline; gap: 8px; font-size: 13.5px; }
.cosum__q { color: var(--muted); font-weight: 700; flex: none; }
.cosum__n { flex: 1; color: var(--ink-soft); line-height: 1.35; }
.cosum__p { font-weight: 700; white-space: nowrap; }
.checkout__note { font-size: 12px; color: var(--muted); margin: 12px 0 0; text-align: center; }

.search { flex: 1; position: relative; }
.search__input {
    width: 100%; height: 52px;
    padding: 0 62px 0 22px;
    border: 2px solid var(--line); border-radius: var(--pill);
    background: var(--surface); font-size: 15px; color: var(--ink);
    transition: border-color var(--ease), box-shadow var(--ease);
}
.search__input::placeholder { color: var(--muted); }
.search__input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-tint); }
.search__btn {
    position: absolute; right: 5px; top: 5px;
    width: 42px; height: 42px; border-radius: var(--pill);
    background: var(--brand); display: flex; align-items: center; justify-content: center;
    transition: background var(--ease);
}
.search__btn:hover { background: var(--brand-dark); }
.search__btn svg { width: 19px; height: 19px; stroke: #fff; }
/* Автокомплит */
.suggest { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 70; background: var(--surface); border-radius: var(--r); box-shadow: 0 18px 44px rgba(20,22,34,.2); padding: 6px; overflow: hidden; }
.suggest__item { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: var(--r-sm); transition: background var(--ease); }
.suggest__item:hover { background: var(--bg); }
.suggest__img { flex: none; width: 46px; height: 46px; border-radius: 8px; background: var(--bg); display: flex; align-items: center; justify-content: center; }
.suggest__img img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.suggest__name { flex: 1; font-size: 13.5px; color: var(--ink); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.suggest__price { flex: none; font-weight: 800; font-size: 14px; color: var(--ink); white-space: nowrap; }
.suggest__all { display: block; text-align: center; padding: 11px; margin-top: 4px; border-top: 1px solid var(--line-2); color: var(--brand); font-weight: 700; font-size: 13.5px; }
.suggest__all:hover { background: var(--brand-tint); }
.suggest__empty { padding: 22px; text-align: center; color: var(--muted); font-size: 14px; }

.header__actions { display: flex; align-items: center; gap: 6px; flex: none; }
.iconbtn { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--ink-soft); font-size: 11.5px; font-weight: 500; padding: 6px 10px; border-radius: var(--r-xs); transition: background var(--ease), color var(--ease); }
.iconbtn:hover { background: var(--bg); color: var(--brand); }
.iconbtn svg { width: 24px; height: 24px; stroke: var(--ink); fill: none; transition: stroke var(--ease); }
.iconbtn:hover svg { stroke: var(--brand); }
.iconbtn__badge { position: absolute; top: 0; right: 4px; min-width: 18px; height: 18px; padding: 0 5px; background: var(--brand); color: #fff; border: 2px solid #fff; border-radius: var(--pill); font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; }

/* --- Ритм секций и панели -------------------------------------------------- */
.section { margin: 16px 0; }
.section--tight { margin: 12px 0; }
.panel { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: 26px 28px; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.section-head h2 { font-size: 24px; font-weight: 800; }
.section-head__link { display: inline-flex; align-items: center; gap: 6px; color: var(--brand); font-weight: 600; font-size: 14.5px; }
.section-head__link svg { width: 14px; height: 14px; transition: transform var(--ease); }
.section-head__link:hover svg { transform: translateX(3px); }

/* --- Герой ----------------------------------------------------------------- */
.hero { margin-top: 16px; display: grid; grid-template-columns: 1fr 320px; gap: 16px; }
.hero__main { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-1); position: relative; aspect-ratio: 1000/520; background: linear-gradient(120deg,#e7eaf1,#dfe3ec); }
.hero__track { position: absolute; inset: 0; }
.hero__slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .55s var(--ease), visibility .55s; }
.hero__slide.is-active { opacity: 1; visibility: visible; }
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__overlay { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 0 6% 0 48px; max-width: 58%;
    background: linear-gradient(90deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.82) 42%, rgba(255,255,255,.36) 80%, rgba(255,255,255,0) 100%); }
.hero__slide.is-active .hero__overlay > * { animation: heroIn .6s var(--ease) both; }
.hero__slide.is-active .hero__eyebrow { animation-delay: .05s; }
.hero__slide.is-active .hero__h1 { animation-delay: .12s; }
.hero__slide.is-active .hero__sub { animation-delay: .19s; }
.hero__slide.is-active .btn { animation-delay: .26s; }
@keyframes heroIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.hero__eyebrow { font-size: 12.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--brand); margin-bottom: 14px; }
.hero__h1 { font-size: clamp(26px, 3.2vw, 44px); font-weight: 800; letter-spacing: -.03em; color: var(--ink); line-height: 1.06; }
.hero__sub { font-size: 15px; color: var(--ink-soft); margin: 16px 0 26px; max-width: 400px; line-height: 1.55; }
.hero__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 44px; height: 44px; border-radius: var(--pill); background: rgba(255,255,255,.9); box-shadow: var(--sh-2); display: flex; align-items: center; justify-content: center; color: var(--ink); opacity: 0; transition: opacity var(--ease), background var(--ease); }
.hero__main:hover .hero__nav { opacity: 1; }
.hero__nav:hover { background: #fff; color: var(--brand); }
.hero__nav svg { width: 20px; height: 20px; }
.hero__nav--prev { left: 14px; } .hero__nav--next { right: 14px; }
.hero__dots { position: absolute; left: 48px; bottom: 22px; z-index: 3; display: flex; gap: 8px; }
.hero__dot { width: 9px; height: 9px; border-radius: var(--pill); background: rgba(22,24,29,.24); transition: all var(--ease); }
.hero__dot.is-active { width: 26px; background: var(--brand); }
.hero__side { display: grid; grid-template-rows: 1fr 1fr; gap: 16px; }
.hero__promo { border-radius: var(--r-lg); padding: 22px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: var(--sh-1); transition: transform var(--ease), box-shadow var(--ease); overflow: hidden; position: relative; }
.hero__promo:hover { transform: translateY(-3px); box-shadow: var(--sh-hover); }
.hero__promo--a { background: linear-gradient(135deg,#FFE3DC,#FFF0EB); }
.hero__promo--b { background: linear-gradient(135deg,#E3ECFF,#EDF4FF); }
.hero__promo b { font-size: 19px; font-weight: 800; color: var(--ink); letter-spacing: -.02em; }
.hero__promo span { font-size: 13.5px; color: var(--ink-soft); margin-top: 4px; display: block; }
.hero__promo em { font-style: normal; margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; color: var(--brand); }
.hero__promo em svg { width: 14px; height: 14px; }

/* --- USP-бар --------------------------------------------------------------- */
.usp { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }
.usp--bare { padding: 4px 0; }
.usp__item { display: flex; align-items: center; gap: 14px; padding: 4px 8px; }
.usp--bare .usp__item { padding: 6px 18px; }
.usp__item + .usp__item { border-left: 1px solid var(--line); }
.usp--bare .usp__ico-wrap { background: #fff; box-shadow: var(--sh-1); }
.usp__ico-wrap { flex: none; width: 46px; height: 46px; border-radius: var(--r-xs); background: var(--brand-tint); display: flex; align-items: center; justify-content: center; }
.usp__ico { width: 24px; height: 24px; stroke: var(--brand); fill: none; }
.usp__t b { display: block; font-weight: 700; font-size: 14.5px; color: var(--ink); }
.usp__t span { color: var(--muted); font-size: 12.5px; }

/* --- Плитки категорий (переработаны: компактно, иконка в белом чипе) -------- */
.cats { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
.cat {
    display: flex; align-items: center; gap: 14px;
    height: 92px; padding: 0 18px; border-radius: var(--r);
    position: relative; overflow: hidden;
    transition: transform var(--ease), box-shadow var(--ease);
}
.cat:hover { transform: translateY(-3px); box-shadow: var(--sh-hover); }
.cat__ico { flex: none; width: 58px; height: 58px; border-radius: var(--pill); background: #fff; box-shadow: 0 3px 10px rgba(20,22,34,.08); display: flex; align-items: center; justify-content: center; color: var(--brand); }
.cat__ico .ci { width: 30px; height: 30px; }
.ci { width: 24px; height: 24px; }
.cat__name { font-weight: 700; font-size: 15px; color: var(--ink); flex: 1; letter-spacing: -.01em; }
.cat__arrow { flex: none; width: 20px; height: 20px; stroke: var(--ink); opacity: 0; transform: translateX(-6px); transition: opacity var(--ease), transform var(--ease); }
.cat:hover .cat__arrow { opacity: .5; transform: translateX(0); }
.cat:nth-child(6n+1){background:var(--t1)} .cat:nth-child(6n+2){background:var(--t2)}
.cat:nth-child(6n+3){background:var(--t3)} .cat:nth-child(6n+4){background:var(--t4)}
.cat:nth-child(6n+5){background:var(--t5)} .cat:nth-child(6n+6){background:var(--t6)}

/* --- Бренды (чистая строка) ------------------------------------------------ */
.brands { display: grid; grid-template-columns: repeat(7,1fr); gap: 12px; }
.brand { height: 92px; border: 1px solid var(--line); border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; padding: 8px 10px; transition: box-shadow var(--ease), transform var(--ease), border-color var(--ease); }
/* Логотипи брендів показуємо у фірмових кольорах: знебарвлення робило
   всю смугу сірою й невиразною. Легке приглушення лишаємо, щоб плитки
   не сперечалися між собою, на наведенні — повний колір. */
/* Однакова коробка на всіх плитках — розмір задає вона, а не пропорції
   конкретного файлу.

   Плюс обмеження ширини, і ось навіщо. Файли брендів обрізані по-різному:
   у Swiss Diamond, Bamix і Valera це квадрат 150×150, де сам знак
   намальований із широкими полями всередині, а в BRITA і Fiskars кадр
   обтиснутий впритул — 114×24. При однаковій коробці обтиснуті
   розтягувалися на всі 139px, а квадратні впиралися у висоту 74px. Поруч
   це читалося як різний розмір, хоча коробка одна.

   62% плитки — приблизно та сама ширина, яку займає квадратний логотип,
   тож BRITA стає врівень зі Swiss Diamond. */
.brand img {
    width: 100%;
    height: 100%;
    max-width: 62%;
    max-height: none;
    object-fit: contain;
    padding: 0;
    opacity: .96;
    transition: opacity var(--ease), transform var(--ease);
}
.brand:hover { box-shadow: var(--sh-2); border-color: transparent; transform: translateY(-2px); }
.brand:hover img { filter: none; opacity: 1; }

/* --- Бренды (список + хедер) ----------------------------------------------- */
.brand-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 12px; }
.brand--lg { height: 118px; padding: 10px 12px; }
.brand--lg img { padding: 0; }
.brand-hero { display: flex; align-items: center; gap: 30px; }
.brand-hero__logo { flex: none; width: 180px; height: 120px; border-radius: var(--r); background: var(--bg); display: flex; align-items: center; justify-content: center; padding: 22px; }
.brand-hero__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.brand-hero__eyebrow { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--brand); }
.brand-hero__title { font-size: 32px; font-weight: 800; letter-spacing: -.02em; margin: 8px 0 10px; }
.brand-hero__desc { color: var(--ink-soft); font-size: 14.5px; line-height: 1.6; margin: 0 0 10px; }
.brand-hero__count { font-size: 14px; color: var(--muted); font-weight: 600; }

/* --- Сетка товаров и карточка ---------------------------------------------- */
.grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
.card { position: relative; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r); padding: 14px; display: flex; flex-direction: column; transition: box-shadow var(--ease), transform var(--ease), border-color var(--ease); }
.card:hover { box-shadow: var(--sh-hover); border-color: transparent; transform: translateY(-4px); z-index: 2; }
.card__badges { position: absolute; top: 12px; left: 12px; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; z-index: 2; }
.badge { font-size: 11px; font-weight: 700; letter-spacing: .02em; padding: 3px 9px; border-radius: var(--pill); color: #fff; line-height: 1.35; }
.badge--sale, .badge--off { background: var(--brand); }
.badge--new { background: var(--success); }
.badge--top { background: var(--badge-top); }
.badge--stock { background: #EDEFF3; color: var(--muted); }
.card__fav { position: absolute; top: 12px; right: 12px; z-index: 2; width: 34px; height: 34px; border-radius: var(--pill); background: var(--surface); box-shadow: var(--sh-1); display: flex; align-items: center; justify-content: center; transition: background var(--ease); }
.card__fav svg { width: 18px; height: 18px; stroke: var(--faint); fill: none; transition: stroke var(--ease), fill var(--ease); }
.card__fav:hover { background: var(--brand-tint); }
.card__fav:hover svg { stroke: var(--brand); }
.card__fav.is-active svg { stroke: var(--brand); fill: var(--brand); }
.pdp__fav.is-active { color: var(--brand); box-shadow: inset 0 0 0 1.5px var(--brand); }
.pdp__fav.is-active svg { fill: var(--brand); }
.card__img { aspect-ratio: 1; border-radius: var(--r-xs); overflow: hidden; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; background: #fff; }
.card__img img { width: 100%; height: 100%; object-fit: contain; transition: transform var(--ease); }
.card:hover .card__img img { transform: scale(1.04); }
.card--out .card__img { opacity: .5; filter: grayscale(.5); }
.card__name { font-size: 13px; line-height: 1.4; color: var(--ink-soft); min-height: 36px; margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color var(--ease); }
.card:hover .card__name { color: var(--brand); }
.rating { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; height: 13px; }
.rating__stars { position: relative; width: 78px; height: 13px;
    -webkit-mask: var(--starmask) no-repeat; mask: var(--starmask) no-repeat; background: #DDDFE6;
    --starmask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='78' height='13' viewBox='0 0 78 13'%3E%3Cg fill='%23000'%3E%3Cpath d='M7 0l1.9 4.3 4.7.4-3.6 3.1 1.1 4.6L7 9.9 2.9 12.4 4 7.8.4 4.7l4.7-.4z'/%3E%3Cpath d='M23.25 0l1.9 4.3 4.7.4-3.6 3.1 1.1 4.6-4.1-2.5-4.1 2.5 1.1-4.6-3.6-3.1 4.7-.4z'/%3E%3Cpath d='M39.5 0l1.9 4.3 4.7.4-3.6 3.1 1.1 4.6-4.1-2.5-4.1 2.5 1.1-4.6-3.6-3.1 4.7-.4z'/%3E%3Cpath d='M55.75 0l1.9 4.3 4.7.4-3.6 3.1 1.1 4.6-4.1-2.5-4.1 2.5 1.1-4.6-3.6-3.1 4.7-.4z'/%3E%3Cpath d='M72 0l1.9 4.3 4.7.4-3.6 3.1 1.1 4.6L72 9.9l-4.1 2.5 1.1-4.6-3.6-3.1 4.7-.4z'/%3E%3C/g%3E%3C/svg%3E"); }
.rating__fill { position: absolute; inset: 0; background: var(--star); }
.rating__count { font-size: 11px; color: var(--muted); }
.price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin-top: auto; margin-bottom: 12px; min-height: 30px; }
.price__old { font-size: 13px; color: var(--faint); text-decoration: line-through; order: 1; width: 100%; line-height: 1; }
.price__now { font-size: 21px; font-weight: 800; color: var(--ink); order: 2; letter-spacing: -.02em; }
.price__now--sale { color: var(--brand); }
.price__cur { font-size: 13px; font-weight: 600; color: var(--muted); order: 3; }

/* --- Подвал ---------------------------------------------------------------- */
.footer { background: #16181D; color: #B9BCC6; border-radius: var(--r-lg) var(--r-lg) 0 0; margin-top: 32px; padding: 46px 0 26px; }
.footer__subscribe { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 22px 26px; margin-bottom: 34px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: var(--r-lg); }
.footer__subscribe-copy b { display: block; color: #fff; font-size: 17px; letter-spacing: -.01em; }
.footer__subscribe-copy span { color: var(--muted); font-size: 13.5px; }
.footer__sub-form { display: flex; gap: 10px; flex: 1; max-width: 460px; min-width: 260px; }
.footer__sub-form input { flex: 1; min-width: 0; height: 46px; border: 1px solid rgba(255,255,255,.14); border-radius: var(--pill); padding: 0 20px; background: rgba(255,255,255,.06); color: #fff; font: inherit; font-size: 14px; }
.footer__sub-form input::placeholder { color: #8b8f99; }
.footer__sub-form input:focus { outline: none; border-color: var(--brand); background: rgba(255,255,255,.1); }
.footer__sub-form .btn { flex: none; }
.footer__cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 30px; }
.footer h4 { color: #fff; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; margin: 0 0 15px; }
.footer a { color: #B9BCC6; display: block; padding: 5px 0; font-size: 14px; transition: color var(--ease); }
.footer a:hover { color: #fff; }
.footer__logo img { height: 40px; width: auto; filter: brightness(0) invert(1); }
.footer__bottom { border-top: 1px solid rgba(255,255,255,.09); margin-top: 32px; padding-top: 22px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; color: var(--muted); font-size: 13px; }
.footer__pay { color: #8b8f99; }
.footer__social { display: flex; gap: 10px; margin-top: 18px; }
.footer__social a { width: 40px; height: 40px; border-radius: var(--pill); background: rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; color: #C7C9D1; transition: background var(--ease), color var(--ease); }
.footer__social a:hover { background: var(--brand); color: #fff; }
.footer__social svg { width: 20px; height: 20px; }

/* --- Баннер-хедер категории: пастель + реальные товары раздела справа ------- */
.cat-hero { position: relative; overflow: hidden; border-radius: var(--r-lg); min-height: 210px; display: flex; align-items: center; box-shadow: var(--sh-1); }
.cat-hero--t1{background:linear-gradient(120deg,#DCE4FF,#EEF2FF)} .cat-hero--t2{background:linear-gradient(120deg,#D5F0E1,#E9F7EF)}
.cat-hero--t3{background:linear-gradient(120deg,#FFDCCF,#FFF0EB)} .cat-hero--t4{background:linear-gradient(120deg,#D6E9FF,#EAF4FF)}
.cat-hero--t5{background:linear-gradient(120deg,#FBDCEE,#FBEDF5)} .cat-hero--t6{background:linear-gradient(120deg,#FFEBC2,#FFF6E3)}
.cat-hero__body { position: relative; z-index: 2; padding: 0 44px; max-width: 56%; }
.cat-hero__eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--brand); margin-bottom: 12px; }
.cat-hero__ic { display: inline-flex; width: 28px; height: 28px; border-radius: 8px; background: rgba(255,255,255,.75); align-items: center; justify-content: center; }
.cat-hero__ic .ci { width: 17px; height: 17px; }
.cat-hero__title { font-size: 38px; font-weight: 800; letter-spacing: -.03em; color: var(--ink); line-height: 1.08; }
.cat-hero__count { display: block; margin-top: 12px; font-size: 14px; color: var(--ink-soft); font-weight: 600; }
/* AI-сцена: тёмный оверлей слева, белый текст */
.cat-hero--scene { background-size: cover; background-position: right center; }
.cat-hero--scene .cat-hero__eyebrow { color: #fff; }
.cat-hero--scene .cat-hero__ic { background: rgba(255,255,255,.16); color: #fff; }
.cat-hero--scene .cat-hero__title { color: #fff; }
.cat-hero--scene .cat-hero__count { color: rgba(255,255,255,.85); }
/* Реальные товары раздела — коллаж справа, multiply убирает белый фон каталожных фото */
.cat-hero__products { position: absolute; right: 30px; top: 0; bottom: 0; z-index: 1; display: flex; align-items: center; gap: 8px; padding-left: 60px;
    -webkit-mask: linear-gradient(90deg, transparent 0, #000 70px); mask: linear-gradient(90deg, transparent 0, #000 70px); }
.cat-hero__prod { flex: none; width: 150px; height: 170px; display: flex; align-items: center; justify-content: center; }
.cat-hero__prod:nth-child(1) { transform: translateY(8px) scale(.86); opacity: .9; }
.cat-hero__prod:nth-child(2) { transform: translateY(-6px); }
.cat-hero__prod:nth-child(4) { transform: translateY(10px) scale(.86); opacity: .9; }
.cat-hero__prod img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; filter: drop-shadow(0 12px 18px rgba(20,22,34,.14)); }

.cat-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.cat-chip { display: inline-flex; align-items: center; height: 40px; padding: 0 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--pill); font-size: 14px; font-weight: 600; color: var(--ink-soft); transition: all var(--ease); }
.cat-chip:hover { border-color: transparent; background: var(--brand-tint); color: var(--brand); box-shadow: var(--sh-1); }

/* --- Каталог: сайдбар + список --------------------------------------------- */
/* Осиротіле правило старої розкладки сторінки каталогу: жоден шаблон не
   має class="catalog" крім обгортки в шапці, тож воно лише розтягувало
   кнопку «Каталог» на 264px колонки. Перейменовано, а не видалено. */
.catalog-page { display: grid; grid-template-columns: 264px 1fr; gap: 18px; align-items: start; }
.filters { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: 20px; }
.filters h3 { font-size: 17px; }
.filters__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.filters__reset { font-size: 13px; color: var(--brand); font-weight: 600; }
.filters__reset:hover { text-decoration: underline; }
.facet { border-bottom: 1px solid var(--line-2); padding: 16px 0; }
.facet:last-child { border-bottom: 0; padding-bottom: 0; }
.facet__head { display: flex; align-items: center; justify-content: space-between; font-weight: 700; font-size: 14px; margin-bottom: 8px; }
.facet__head svg { width: 14px; height: 14px; stroke: var(--muted); }
.chk { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 14px; color: var(--ink-soft); cursor: pointer; }
.chk input { width: 18px; height: 18px; accent-color: var(--brand); flex: none; }
.facet__price { display: flex; align-items: center; gap: 6px; }
.facet__price input { width: 100%; min-width: 0; height: 40px; border: 1.5px solid var(--line); border-radius: var(--r-xs); padding: 0 10px; font: inherit; font-size: 14px; }
.facet__price input:focus { outline: none; border-color: var(--brand); }
.facet__price span { color: var(--muted); }
.facet__go { flex: none; width: 40px; height: 40px; border-radius: var(--r-xs); background: var(--brand); color: #fff; display: flex; align-items: center; justify-content: center; }
.facet__go:hover { background: var(--brand-dark); }
.facet__go svg { width: 18px; height: 18px; }
.facet__scroll { max-height: 210px; overflow-y: auto; margin-right: -6px; padding-right: 6px; }
.toolbar__sortform label { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; }
.toolbar__sortform select { border: 1.5px solid var(--line); border-radius: var(--pill); padding: 8px 14px; font: inherit; font-size: 14px; color: var(--ink); background: var(--surface); cursor: pointer; }
.toolbar__sortform select:focus { outline: none; border-color: var(--brand); }

.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; padding: 12px 18px; background: var(--surface); border-radius: var(--r); box-shadow: var(--sh-1); }
.toolbar__count { color: var(--ink-soft); font-size: 14px; font-weight: 600; }
.toolbar__count b { color: var(--brand); }
.toolbar__sort { color: var(--muted); font-size: 14px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; color: var(--muted); font-size: 13px; margin: 16px 0 4px; }
.crumbs a:hover { color: var(--brand); }
.crumbs span { color: var(--faint); }
.page-title { font-size: 28px; font-weight: 800; margin: 4px 0; letter-spacing: -.02em; }

/* SEO-блок на главной — стиль референса */
.seo2 { padding: 12px 0 4px; }
.seo2__head { text-align: center; max-width: 780px; margin: 0 auto 34px; }
.seo2__eyebrow { display: inline-block; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .22em; color: var(--brand); margin-bottom: 16px; }
.seo2__title { font-size: clamp(26px, 3vw, 38px); font-weight: 800; letter-spacing: -.03em; line-height: 1.14; color: var(--ink); }
.seo2__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 26px; align-items: stretch; }
.seo2__text { position: relative; background: var(--t4); border-radius: var(--r-lg); border-left: 4px solid var(--brand); padding: 30px 34px; }
.seo2__text .pdp__desc-body { max-width: none; color: var(--ink-soft); }
.seo2__text .pdp__desc-body h2, .seo2__text .pdp__desc-body h3 { font-size: 17px; color: var(--ink); margin: 18px 0 8px; }
.seo2__text .pdp__readmore { color: var(--brand); }
.seo2 .seo2__text.is-collapsed .pdp__desc-body { max-height: 380px; }
.seo2__media { border-radius: var(--r-lg); overflow: hidden; min-height: 340px; box-shadow: var(--sh-1); }
.seo2__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 900px) {
    .seo2__grid { grid-template-columns: 1fr; }
    .seo2__media { min-height: 260px; order: -1; }
}

/* --- Заголовок страницы: текст на фоне, без подложки ------------------------ */
.pagehead { padding: 10px 4px 24px; }
.pagehead__eyebrow { display: inline-block; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--brand); margin-bottom: 12px; }
.pagehead__title { font-size: clamp(28px, 3.4vw, 40px); font-weight: 800; letter-spacing: -.03em; line-height: 1.08; color: var(--ink); margin: 0; }
.pagehead__title b { color: var(--brand); font-weight: 800; }
.pagehead__sub { font-size: 15px; color: var(--muted); margin: 12px 0 0; max-width: 640px; line-height: 1.55; }
.pagehead--center { text-align: center; }
.pagehead--center .pagehead__sub { margin-left: auto; margin-right: auto; }

/* Пагинация (Laravel) */
.section nav[role="navigation"] ul, .catalog nav[role="navigation"] ul { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 24px 0 0; }
nav[role="navigation"] a, nav[role="navigation"] span { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 12px; border-radius: var(--r-xs); background: var(--surface); box-shadow: var(--sh-1); font-weight: 600; font-size: 14px; color: var(--ink); }
nav[role="navigation"] a:hover { background: var(--brand-tint); color: var(--brand); }
nav[role="navigation"] [aria-current] span { background: var(--brand); color: #fff; }

/* --- Авторизація ----------------------------------------------------------- */
.auth { max-width: 440px; margin: 0 auto; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-1); overflow: hidden; }
.auth__tabs { display: grid; grid-template-columns: 1fr 1fr; }
.auth__tab { height: 56px; font-weight: 700; font-size: 15px; color: var(--muted); border-bottom: 2px solid var(--line); transition: color var(--ease), border-color var(--ease); }
.auth__tab.is-active { color: var(--ink); border-color: var(--brand); }
.auth__pane { display: none; flex-direction: column; gap: 14px; padding: 28px; }
.auth__pane.is-active { display: flex; }
.auth__hint { font-size: 14px; color: var(--muted); margin: 0 0 4px; }
.auth__code[hidden] { display: none; }
.auth__msg { font-size: 13.5px; padding: 10px 14px; border-radius: var(--r-sm); }
.auth__msg.is-err { background: var(--brand-tint); color: var(--brand-dark); }
.auth__msg.is-ok { background: #E9F7EF; color: var(--success); }
.auth__switch { text-align: center; font-size: 13.5px; color: var(--muted); margin: 4px 0 0; }
.auth__switch a { color: var(--brand); font-weight: 600; }

/* --- 404 -------------------------------------------------------------------- */
.err404 { text-align: center; padding: 56px 28px; }
.err404__code { font-size: clamp(72px, 12vw, 140px); font-weight: 800; line-height: 1; letter-spacing: -.04em; background: linear-gradient(120deg, var(--brand), #ff6a5d); -webkit-background-clip: text; background-clip: text; color: transparent; }
.err404__title { font-size: 26px; font-weight: 800; margin: 8px 0 10px; letter-spacing: -.02em; }
.err404__text { color: var(--muted); max-width: 440px; margin: 0 auto 26px; line-height: 1.55; }
.err404__search { display: flex; gap: 10px; max-width: 480px; margin: 0 auto 18px; }
.err404__search input { flex: 1; height: 48px; border: 1.5px solid var(--line); border-radius: var(--pill); padding: 0 20px; font: inherit; font-size: 15px; }
.err404__search input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-tint); }
.err404__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
@media (max-width: 560px) { .err404__search { flex-direction: column; } .err404__search .btn { width: 100%; } }

/* --- Контент-страницы (новини / акції / статика) --------------------------- */
.posts { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.post { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow var(--ease), transform var(--ease); }
.post:hover { box-shadow: var(--sh-hover); transform: translateY(-4px); }
.post__img { aspect-ratio: 16/10; background: var(--bg); overflow: hidden; }
.post__img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--ease); }
.post:hover .post__img img { transform: scale(1.05); }
.post__body { padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.post__date { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.post__title { font-size: 16px; font-weight: 700; color: var(--ink); line-height: 1.35; letter-spacing: -.01em; }
.post__more { margin-top: auto; color: var(--brand); font-weight: 700; font-size: 13.5px; }
.post__excerpt { font-size: 14px; color: var(--muted); line-height: 1.6; }
/* Головний матеріал — крупний горизонтальний */
.post--featured { display: grid; grid-template-columns: 1.15fr 1fr; align-items: stretch; }
.post--featured .post__img { aspect-ratio: auto; height: 100%; min-height: 300px; }
.post--featured .post__body { padding: 34px 38px; gap: 12px; justify-content: center; }
.post--featured .post__title { font-size: 26px; line-height: 1.2; letter-spacing: -.02em; }
.post--featured .post__more { margin-top: 6px; font-size: 15px; }
@media (max-width: 720px) {
    .post--featured { grid-template-columns: 1fr; }
    .post--featured .post__img { min-height: 200px; aspect-ratio: 16/10; }
    .post--featured .post__body { padding: 20px; }
    .post--featured .post__title { font-size: 20px; }
}

.article-page { max-width: 860px; margin: 0 auto; }
.article-page__date { color: var(--muted); font-size: 13.5px; font-weight: 600; margin-bottom: 10px; }
.article-page__title { font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; margin-bottom: 20px; }
.article-page__cover { border-radius: var(--r); overflow: hidden; margin-bottom: 24px; }
.article-page__cover img { width: 100%; height: auto; display: block; }
.article-page__body { line-height: 1.75; color: var(--ink-soft); font-size: 15.5px; }
.article-page__body h2, .article-page__body h3 { color: var(--ink); margin: 26px 0 10px; font-size: 20px; letter-spacing: -.02em; }
.article-page__body p { margin: 0 0 14px; }
.article-page__body ul, .article-page__body ol { padding-left: 22px; margin: 0 0 14px; }
.article-page__body li { margin-bottom: 6px; }
.article-page__body img { max-width: 100%; height: auto; border-radius: var(--r-sm); }
.article-page__body a { color: var(--brand); }

/* --- Карточка товара (PDP) ------------------------------------------------- */
.pdp { display: grid; grid-template-columns: minmax(0,1.08fr) minmax(0,1fr); gap: 40px; }
.pdp__gallery { display: grid; grid-template-columns: 74px 1fr; gap: 14px; align-items: start; }
/* Товар с одним фото: колонки под миниатюры нет, снимок занимает всю ширину.
   Без этого он попадал в узкую колонку и сжимался до 14 точек. */
.pdp__gallery--single { grid-template-columns: 1fr; }
.pdp__thumbs { display: flex; flex-direction: column; gap: 10px; max-height: 460px; overflow-y: auto; }
.pdp__thumb { flex: none; width: 74px; height: 74px; border-radius: var(--r-sm); background: var(--bg); border: 2px solid transparent; padding: 6px; display: flex; align-items: center; justify-content: center; transition: border-color var(--ease); }
.pdp__thumb img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.pdp__thumb:hover { border-color: var(--line); }
.pdp__thumb.is-active { border-color: var(--brand); }
.pdp__stage { position: relative; background: var(--bg); border-radius: var(--r); aspect-ratio: 1; display: flex; align-items: center; justify-content: center; padding: 30px; }
.pdp__main { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: opacity .2s; }
.pdp__main.is-out { opacity: .55; filter: grayscale(.4); }
.pdp__badges { position: absolute; top: 16px; left: 16px; display: flex; flex-direction: column; gap: 6px; z-index: 2; }
.pdp__arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: var(--pill); background: #fff; box-shadow: var(--sh-2); display: flex; align-items: center; justify-content: center; color: var(--ink); opacity: 0; transition: opacity var(--ease), color var(--ease); }
.pdp__stage:hover .pdp__arrow { opacity: 1; }
.pdp__arrow:hover { color: var(--brand); }
.pdp__arrow svg { width: 18px; height: 18px; }
.pdp__arrow--prev { left: 12px; } .pdp__arrow--next { right: 12px; }

.pdp__eyebrow { display: inline-block; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--brand); margin-bottom: 10px; }
.pdp__eyebrow:hover { text-decoration: underline; }
.pdp__title { font-size: 27px; font-weight: 800; margin-bottom: 14px; letter-spacing: -.02em; line-height: 1.22; }
.pdp__submeta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; color: var(--muted); font-size: 13.5px; margin-bottom: 22px; }
.pdp__sku b { color: var(--ink-soft); }
.pdp__brand { margin-left: auto; font-weight: 700; color: var(--ink-soft); }
.pdp__brand:hover { color: var(--brand); }
.pdp__pricebox { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: var(--bg); border-radius: var(--r); padding: 18px 22px; }
.pdp__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; }
.pdp__price .price__old { position: static; width: auto; font-size: 18px; order: 0; }
.pdp__price .price__now { font-size: 36px; }
.pdp__save { width: 100%; font-size: 12.5px; font-weight: 700; color: var(--success); }
.pdp__stock { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; }
.pdp__stock svg { width: 18px; height: 18px; }
.pdp__stock--in { color: var(--success); }
.pdp__stock--out { color: var(--muted); }
.pdp__opt { margin: 24px 0 4px; }
.pdp__opt-label { font-size: 14px; color: var(--muted); }
.pdp__opt-label b { color: var(--ink); }
.pdp__swatches { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.pdp__swatch { width: 34px; height: 34px; border-radius: var(--pill); background: var(--sw); box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); cursor: pointer; transition: transform var(--ease); }
.pdp__swatch:hover { transform: scale(1.08); }
.pdp__swatch.is-active { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--brand); }
.pdp__buy { display: flex; gap: 12px; align-items: center; margin: 24px 0 10px; }
.qty { display: inline-flex; align-items: center; flex: none; height: 46px; border-radius: var(--pill); background: var(--bg); padding: 4px; }
.qty__btn { width: 38px; height: 38px; border-radius: var(--pill); font-size: 20px; font-weight: 600; color: var(--ink-soft); display: flex; align-items: center; justify-content: center; transition: background var(--ease); }
.qty__btn:hover { background: #fff; color: var(--brand); }
.qty__input { width: 40px; height: 38px; border: 0; background: transparent; text-align: center; font-size: 16px; font-weight: 700; color: var(--ink); }
.qty__input:focus { outline: none; }
.pdp__fav { flex: none; width: 46px; height: 46px; border-radius: var(--pill); background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line); display: flex; align-items: center; justify-content: center; color: var(--muted); transition: all var(--ease); }
.pdp__fav:hover { color: var(--brand); box-shadow: inset 0 0 0 1.5px var(--brand); }
.pdp__fav svg { width: 20px; height: 20px; }
.pdp__oneclick { display: inline-flex; align-items: center; height: 42px; padding: 0 20px; border-radius: var(--pill); background: transparent; color: var(--ink-soft); font-weight: 600; font-size: 14px; box-shadow: inset 0 0 0 1.5px var(--line); transition: all var(--ease); }
.pdp__oneclick:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.pdp__delivery { margin-top: 26px; background: var(--brand-tint); border-radius: var(--r); padding: 18px 20px; }
.pdp__delivery-head { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 14.5px; margin-bottom: 12px; }
.pdp__delivery-head svg { width: 22px; height: 22px; stroke: var(--brand); }
.pdp__delivery ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 7px; }
.pdp__delivery li { font-size: 13.5px; color: var(--ink-soft); }

/* --- PDP v2 (Aurora-уровень): статус сверху, price+buy бокс, промо, pickup ---- */
.pdp__info .pdp__stock { margin-bottom: 12px; }
.pdp__stock--in svg { stroke: var(--success); }
.pdp__pricebox { display: block; background: var(--bg); border-radius: var(--r); padding: 20px 22px; margin: 4px 0 0; }
.pdp__pricebox .pdp__price { margin-bottom: 16px; }
.pdp__pricebox .pdp__buy { margin: 0; }
.pdp__oneclick { margin-top: 12px; }
.pdp__promo { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 12px 18px; border-radius: var(--r); background: linear-gradient(100deg, var(--brand), #ff5a4d); color: #fff; }
.pdp__promo-badge { font-weight: 800; font-size: 18px; letter-spacing: -.02em; }
.pdp__promo-text { font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: 14px; }
.pdp__promo-note { margin-left: auto; font-size: 12px; opacity: .85; }
.pdp__pickup { display: flex; align-items: center; gap: 14px; margin-top: 18px; padding: 16px 18px; border: 1.5px solid var(--line); border-radius: var(--r); }
.pdp__pickup-logo { flex: none; width: 46px; height: 46px; border-radius: 12px; background: var(--brand-tint); display: flex; align-items: center; justify-content: center; padding: 9px; }
.pdp__pickup-logo img { max-width: 100%; max-height: 100%; }
.pdp__pickup b { display: block; font-size: 14px; }
.pdp__pickup span { font-size: 13px; color: var(--muted); }
.pdp__share { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.pdp__share-label { font-size: 13.5px; color: var(--muted); }
.pdp__share-btn { width: 40px; height: 40px; border-radius: var(--pill); background: var(--bg); color: var(--ink-soft); display: flex; align-items: center; justify-content: center; transition: background var(--ease), color var(--ease); }
.pdp__share-btn:hover { background: var(--brand); color: #fff; }
.pdp__share-btn svg { width: 19px; height: 19px; }

/* Табы */
.pdp-tabs { position: sticky; top: 88px; z-index: 30; display: flex; gap: 6px; margin: 18px 0 4px; padding: 6px; background: rgba(255,255,255,.9); backdrop-filter: blur(8px); border-radius: var(--pill); box-shadow: var(--sh-1); width: fit-content; }
.pdp-tab { padding: 10px 22px; border-radius: var(--pill); font-weight: 600; font-size: 14.5px; color: var(--ink-soft); transition: background var(--ease), color var(--ease); }
.pdp-tab:hover { background: var(--bg); }
.pdp-tab.is-active { background: var(--brand); color: #fff; }
.pdp-section { scroll-margin-top: 150px; }
.pdp-h2 { font-size: 22px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 20px; }

/* Опис + гарантии */
.pdp-cols { display: grid; grid-template-columns: 1fr 320px; gap: 18px; align-items: start; }
.pdp-guarantee { display: flex; flex-direction: column; gap: 4px; }
.pdp-guarantee__row { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line-2); }
.pdp-guarantee__row:last-child { border-bottom: 0; }
.pdp-guarantee__row svg { flex: none; width: 26px; height: 26px; stroke: var(--brand); }
.pdp-guarantee__row b { display: block; font-size: 14.5px; margin-bottom: 3px; }
.pdp-guarantee__row span { font-size: 13px; color: var(--muted); line-height: 1.45; }

/* Характеристики с точками-лидерами */
.specs2 { margin: 0; max-width: 720px; }
.specs2__row { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 6px; padding: 11px 0; }
.specs2__row dt { color: var(--muted); font-size: 14px; }
.specs2__row::after { content: ""; border-bottom: 1.5px dotted var(--line); transform: translateY(-3px); }
.specs2__row dd { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink); text-align: right; }
.specs2__row dd a { color: var(--brand); }
.specs2 .specs__extra { display: none; }
.specs2.is-open .specs__extra { display: grid; }

/* Отзывы */
.rev-summary { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; margin-bottom: 24px; }
.rev-summary > div { background: var(--bg); border-radius: var(--r); padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.rev-summary__score { align-items: center; text-align: center; justify-content: center; }
.rev-summary__score b { font-size: 26px; font-weight: 800; }
.rev-summary__score span { font-size: 13px; color: var(--muted); }
.rev-summary__cta { justify-content: center; }
.rev-summary__cta span { font-weight: 700; font-size: 15px; }
.reviews { display: flex; flex-direction: column; }
.review { display: grid; grid-template-columns: 200px 1fr; gap: 24px; padding: 22px 0; border-top: 1px solid var(--line-2); }
.review:first-child { border-top: 0; padding-top: 0; }
.review__author { font-weight: 700; font-size: 15px; }
.review__date { font-size: 13px; color: var(--muted); margin: 4px 0 8px; }
.review__text { margin: 0 0 12px; line-height: 1.6; color: var(--ink); }
.review__pm { margin-bottom: 10px; }
.review__pm b { display: block; font-size: 13.5px; margin-bottom: 2px; }
.review__pm p { margin: 0; color: var(--ink-soft); font-size: 14px; }
.review__likes { display: flex; gap: 18px; margin-top: 12px; }
.review__likes span { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.review__likes svg { width: 18px; height: 18px; }
.review__reply { margin-top: 16px; padding: 14px 16px; background: var(--bg); border-radius: var(--r-sm); border-left: 3px solid var(--brand); }
.review__reply-head { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13.5px; margin-bottom: 6px; }
.review__reply-logo { font-weight: 800; letter-spacing: -.03em; color: var(--ink); }
.review__reply-logo b { color: var(--brand); }
.review__reply p { margin: 0; font-size: 14px; color: var(--ink-soft); line-height: 1.55; }

@media (max-width: 900px) {
    .pdp-cols { grid-template-columns: 1fr; }
    .rev-summary { grid-template-columns: 1fr; }
    .review { grid-template-columns: 1fr; gap: 10px; }
    .pdp-tabs { top: 66px; }
}

.pdp__desc { position: relative; }
.pdp__desc-body { max-width: 860px; line-height: 1.75; color: var(--ink-soft); font-size: 15px; }
.pdp__desc-body h2, .pdp__desc-body h3 { color: var(--ink); margin: 18px 0 8px; font-size: 18px; }
.pdp__desc-body ul, .pdp__desc-body ol { padding-left: 20px; }
.pdp__desc.is-collapsed .pdp__desc-body { max-height: 220px; overflow: hidden; -webkit-mask: linear-gradient(#000 60%, transparent); mask: linear-gradient(#000 60%, transparent); }
.pdp__readmore { display: none; align-items: center; gap: 6px; margin-top: 14px; color: var(--brand); font-weight: 700; font-size: 14px; }
.pdp__readmore svg { width: 15px; height: 15px; transition: transform var(--ease); }
.pdp__desc.is-collapsed .pdp__readmore, .pdp__desc.is-expanded .pdp__readmore { display: inline-flex; }
.pdp__desc.is-expanded .pdp__readmore svg { transform: rotate(180deg); }

.specs { width: 100%; border-collapse: collapse; max-width: 860px; }
.specs tr { border-bottom: 1px solid var(--line-2); }
.specs tr:last-child { border-bottom: 0; }
.specs td { padding: 13px 0; font-size: 14px; vertical-align: top; }
.specs__k { color: var(--muted); width: 42%; padding-right: 20px; }
.specs__v { color: var(--ink); font-weight: 500; }
.specs__v a { color: var(--brand); }
.specs__extra { display: none; }
.specs.is-open .specs__extra { display: table-row; }
.specs__toggle { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; color: var(--brand); font-weight: 700; font-size: 14px; }
.specs__toggle svg { width: 15px; height: 15px; transition: transform var(--ease); }
.specs__toggle.is-open svg { transform: rotate(180deg); }

.pdp__trust { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }
.pdp__trust > div { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 8px; }
.pdp__trust svg { width: 30px; height: 30px; stroke: var(--brand); margin-bottom: 4px; }
.pdp__trust b { font-size: 14px; font-weight: 700; }
.pdp__trust span { font-size: 12.5px; color: var(--muted); }

.carousel__nav { display: flex; gap: 8px; }
.carousel__btn { width: 40px; height: 40px; border-radius: var(--pill); background: var(--bg); display: flex; align-items: center; justify-content: center; color: var(--ink); transition: background var(--ease), color var(--ease); }
.carousel__btn:hover { background: var(--brand-tint); color: var(--brand); }
.carousel__btn svg { width: 18px; height: 18px; }
.carousel { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x proximity; scroll-behavior: smooth; scrollbar-width: none; padding-bottom: 4px; }
.carousel::-webkit-scrollbar { display: none; }
.carousel > .card { flex: 0 0 236px; scroll-snap-align: start; }

/* --- Адаптив --------------------------------------------------------------- */
@media (max-width: 1100px) {
    .hero { grid-template-columns: 1fr; }
    .hero__side { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
    .usp { grid-template-columns: repeat(2,1fr); }
    .usp__item:nth-child(3) { border-left: 0; }
    .cats { grid-template-columns: repeat(3,1fr); }
    .brands { grid-template-columns: repeat(4,1fr); }
    .grid { grid-template-columns: repeat(3,1fr); }
    .footer__cols { grid-template-columns: repeat(3,1fr); }
    .pdp { grid-template-columns: 1fr; gap: 24px; }
    .catalog-page { grid-template-columns: 1fr; }
    .filters { position: static; }
    .pdp__gallery { grid-template-columns: 1fr; }
    .pdp__thumbs { flex-direction: row; order: 2; max-height: none; overflow-x: auto; }
    .pdp__stage { order: 1; }
    .cart { grid-template-columns: 1fr; }
    .checkout { grid-template-columns: 1fr; }
    .cart__summary, .checkout__summary { position: static; }
    .citem { grid-template-columns: 64px 1fr auto; grid-template-areas: "img main main" "img ctl price"; gap: 8px 12px; align-items: center; }
    .citem__img { width: 64px; height: 64px; align-self: start; }
    .citem__main { align-self: start; }
    .citem__price { min-width: 0; text-align: right; align-self: center; }
    .brand-grid { grid-template-columns: repeat(4,1fr); }
    .brand-hero { flex-direction: column; align-items: flex-start; gap: 18px; }
    .posts { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 900px) {
    .catalog__menu { position: fixed; left: 10px; right: 10px; top: 72px; width: auto; max-width: none; grid-template-columns: 1fr; min-height: 0; max-height: 76vh; overflow-y: auto; }
    .catalog__sub { display: none !important; }
    .catalog__item.is-active .catalog__lead { background: var(--brand-tint); }
    .cat-hero__body { max-width: 62%; }
    .cat-hero__prod { width: 120px; height: 140px; }
}
@media (max-width: 720px) {
    .wrap { padding: 0 14px; }
    .header__in { height: auto; min-height: 60px; gap: 10px; flex-wrap: wrap; padding-top: 8px; padding-bottom: 10px; }
    .catalog-btn__label, .catalog-btn__chev { display: none; }
    /* Компактный топбар на мобиле: телефон + язык, без второстепенных ссылок */
    .topbar__in { height: 38px; gap: 12px; font-size: 12px; }
    .topbar__in > a:not(.topbar__accent) { display: none; }
    .catalog-btn { padding: 0 15px; height: 44px; }
    .logo { order: 1; } .catalog { order: 2; } .header__actions { order: 3; margin-left: auto; }
    .search { order: 4; flex-basis: 100%; }
    .search__input { height: 44px; padding-right: 52px; }
    .search__btn { width: 36px; height: 36px; top: 4px; right: 4px; }
    .logo img { height: 30px; }
    .iconbtn__label { display: none; }
    .iconbtn { padding: 6px 7px; }
    .hero__main { aspect-ratio: auto; min-height: 380px; }
    .hero__overlay { max-width: 100%; padding: 0 22px; background: linear-gradient(90deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.85) 55%, rgba(255,255,255,.5) 100%); }
    .cat-hero { min-height: 150px; }
    .cat-hero__body { max-width: 100%; }
    .cat-hero__products { display: none; }
    .cat-hero__title { font-size: 26px; }
    .hero__dots { left: 20px; bottom: 14px; }
    .hero__overlay { padding: 0 20px; max-width: 82%; }
    .hero__nav { display: none; }
    .hero__side { grid-template-columns: 1fr; }
    .cats { grid-template-columns: repeat(2,1fr); }
    .cat { height: 84px; padding: 0 14px; gap: 10px; }
    .cat__ico { width: 48px; height: 48px; }
    .grid { grid-template-columns: repeat(2,1fr); gap: 10px; }
    .brands { grid-template-columns: repeat(3,1fr); }
    .usp { grid-template-columns: 1fr; }
    .usp__item + .usp__item { border-left: 0; border-top: 1px solid var(--line-2); }
    .footer__cols { grid-template-columns: 1fr 1fr; }
    .panel { padding: 18px; }
    .section-head h2 { font-size: 19px; }
    .page-title { font-size: 22px; }
    .pdp__trust { grid-template-columns: 1fr 1fr; gap: 14px 8px; }
    .pdp__title { font-size: 22px; }
    .pdp__price .price__now { font-size: 30px; }
    .carousel > .card { flex-basis: 60vw; }
}

/* ── Карта сайту ─────────────────────────────────────────────────────────
   Ця сторінка була єдиною, що лишалась на легасі-шаблонах. Використовує
   ті самі токени, що й решта v2, щоб не заводити окремий вигляд.        */
.sitemap-tree,
.sitemap-inline { list-style: none; margin: 0 0 28px; padding: 0; }

.sitemap-tree > li { margin-bottom: 16px; }
.sitemap-tree > li > a { font-weight: 600; color: var(--ink); }
.sitemap-tree ul { list-style: none; margin: 8px 0 0; padding: 0 0 0 16px;
                   border-left: 1px solid var(--line); }
.sitemap-tree ul li { margin: 6px 0; }
.sitemap-tree ul a { color: var(--ink-soft); }

.sitemap-inline { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.sitemap-inline li { margin: 0; }
.sitemap-inline a {
    display: inline-block; padding: 6px 12px;
    background: var(--pill); border: 1px solid var(--line);
    border-radius: 999px; color: var(--ink-soft);
    font-size: 14px; line-height: 1.3;
    transition: border-color .18s var(--ease), color .18s var(--ease);
}
.sitemap-inline a:hover { border-color: var(--brand); color: var(--brand); }

.article-page__body h2 { margin: 28px 0 14px; }

/* ── Контент зі старої адмінки ───────────────────────────────────────────
   Тексти сторінок лежать у базі й досі верстані класами легасі-фронту
   (.service__*, .content) та svg-іконками зі спрайта, якого у v2 немає —
   через це порожні <svg> розсували телефони на «Гарантія та сервіс».
   Стилі нижче приводять цей контент до вигляду v2, не чіпаючи базу.      */
.article-page__body .content > *:last-child { margin-bottom: 0; }

.article-page__body .service__list {
    display: grid; gap: 16px; margin: 22px 0;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}
.article-page__body .service__item {
    background: var(--pill); border: 1px solid var(--line);
    border-radius: var(--r); padding: 20px 22px;
}
.article-page__body .service__title {
    color: var(--ink); font-weight: 700; font-size: 16px;
    line-height: 1.35; margin-bottom: 12px;
}
.article-page__body .service__title strong { font-weight: 700; }

.article-page__body .service__contacts {
    display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 14px 0;
}
.article-page__body .service__link {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px; background: var(--surface);
    border: 1px solid var(--line); border-radius: 999px;
    color: var(--ink); font-weight: 600; font-size: 14.5px;
    white-space: nowrap;
    transition: border-color .18s var(--ease), color .18s var(--ease);
}
.article-page__body .service__link:hover { border-color: var(--brand); color: var(--brand); }

/* Іконки посилаються на спрайт легасі-фронту, якого тут немає:
   порожній <svg> займав місце й ламав рядок. */
.article-page__body svg.icon { display: none; }

.article-page__body .service__text { margin-top: 14px; }
.article-page__body .service__text p:last-child { margin-bottom: 0; }

/* ── Широкий контейнер для сторінок-довідників ───────────────────────────
   .article-page обмежена 860px — правильна довжина рядка для статті, але
   завузька для карти сайту та сторінок на кшталт «Про компанію» і
   «Партнерам». Ці отримують ширину навігації.                            */
.article-page--wide { max-width: none; }
.article-page--wide .article-page__body { font-size: 16px; }

/* ── Пагінація ───────────────────────────────────────────────────────────
   Шаблон лишався від легасі-фронту, а стилів .pagination у v2 не було
   зовсім — звідси голий вигляд і невидимі стрілки.                       */
.pagination {
    display: flex; align-items: center; justify-content: center;
    flex-wrap: wrap; gap: 6px; margin-top: 8px;
}
.pagination__number,
.pagination__arrow {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 42px; height: 42px; padding: 0 12px;
    border: 1px solid var(--line); border-radius: 12px;
    background: var(--surface); color: var(--ink);
    font-size: 15px; font-weight: 600; line-height: 1;
    text-decoration: none; user-select: none;
    transition: border-color .18s var(--ease), color .18s var(--ease),
                background .18s var(--ease), transform .12s var(--ease);
}
.pagination__number:hover,
.pagination__arrow:not(.disabled):hover {
    border-color: var(--brand); color: var(--brand);
    background: var(--brand-tint);
}
.pagination__number:active,
.pagination__arrow:not(.disabled):active { transform: translateY(1px); }

.pagination__number.active {
    background: var(--brand); border-color: var(--brand);
    color: #fff; cursor: default; box-shadow: 0 4px 12px rgba(206,34,34,.22);
}
.pagination__number.active:hover { background: var(--brand); color: #fff; }

.pagination__arrow { padding: 0; }
.pagination__arrow svg { width: 18px; height: 18px; }
.pagination__arrow.disabled {
    color: var(--faint); border-color: var(--line);
    background: var(--pill); cursor: default; pointer-events: none;
}

.pagination__gap {
    display: inline-flex; align-items: flex-end; justify-content: center;
    min-width: 26px; height: 42px; color: var(--muted); font-weight: 700;
    padding-bottom: 10px;
}

.pagination__meta {
    margin-top: 12px; text-align: center;
    color: var(--muted); font-size: 13.5px;
}
.pagination__meta span { margin: 0 6px; opacity: .6; }

@media (max-width: 560px) {
    .pagination { gap: 5px; }
    .pagination__number, .pagination__arrow { min-width: 38px; height: 38px; font-size: 14px; padding: 0 10px; }
    .pagination__arrow { padding: 0; }
}

/* ── SEO-блок на головній ────────────────────────────────────────────────
   Замість «Читати далі»: фіксована висота з прокруткою. Раніше розкриття
   збільшувало текстову колонку, а сітка тягне рядок по висоті — і фото
   поруч розтягувалось.                                                    */
/* Висоту ряду задає фото у своїх пропорціях (1100×1466). Текстова панель
   тягнеться рівно під нього і прокручується всередині.

   Ключове: панель не повинна рости від обсягу тексту — інакше висоту
   починає диктувати текст, і розтягується вже фото. Тому вміст винесено
   в абсолютний шар: він займає висоту ряду, але не бере участі в її
   обчисленні. */
.seo2__grid { align-items: stretch; }

.seo2__media { align-self: start; min-height: 0; height: auto; }
.seo2__media img { width: 100%; height: auto; object-fit: contain; }

.seo2__text { position: relative; padding: 0; overflow: hidden; }
.seo2__scroll {
    position: absolute; inset: 0;
    overflow-y: auto; overscroll-behavior: contain;
    /* Відступи дорівнюють висоті градієнта, тож у стані спокою затухання
       лягає на порожнє місце, а не зрізає рядок. */
    padding: 30px 34px;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 30px, #000 calc(100% - 30px), transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 30px, #000 calc(100% - 30px), transparent 100%);
}
.seo2__scroll::-webkit-scrollbar { width: 6px; }
.seo2__scroll::-webkit-scrollbar-track { background: transparent; }
.seo2__scroll::-webkit-scrollbar-thumb {
    background: var(--line); border-radius: 999px;
}
.seo2__scroll::-webkit-scrollbar-thumb:hover { background: var(--muted); }
.seo2__scroll { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.seo2__scroll .pdp__desc-body { max-height: none; }

@media (max-width: 900px) {
    .seo2__scroll { max-height: 260px; }
}

/* ── Контент сторінок «Партнерам», «Оплата і доставка», «Повернення» ─────
   Ті самі класи легасі-адмінки, що й на «Гарантія та сервіс».            */
.article-page__body .partner__row {
    display: grid; grid-template-columns: 1.3fr .7fr; gap: 24px;
    align-items: start; margin-bottom: 22px;
}
.article-page__body .partner__info { font-weight: 700; color: var(--ink); margin: 16px 0 8px; }
.article-page__body .partner__description { padding-left: 20px; }
.article-page__body .partner__logo img { width: 100%; height: auto; border-radius: var(--r); display: block; }
.article-page__body .partner__note {
    background: var(--brand-tint); border-left: 4px solid var(--brand);
    border-radius: var(--r); padding: 18px 22px; color: var(--ink);
}

.article-page__body .payment__list,
.article-page__body .exchange__list {
    display: grid; gap: 16px; margin: 22px 0;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
}
.article-page__body .payment__item,
.article-page__body .exchange__item {
    background: var(--pill); border: 1px solid var(--line);
    border-radius: var(--r); padding: 22px 24px;
}
.article-page__body .payment__icon { margin-bottom: 12px; }
.article-page__body .payment__icon img { width: 44px; height: 44px; object-fit: contain; display: block; }
.article-page__body .payment__title,
.article-page__body .exchange__subtitle,
.article-page__body .exchange__title {
    color: var(--ink); font-weight: 700; font-size: 16px; line-height: 1.35; margin-bottom: 10px;
}
.article-page__body .exchange__title { font-size: 20px; margin: 28px 0 14px; }
.article-page__body .payment__content > *:last-child,
.article-page__body .exchange__description > *:last-child { margin-bottom: 0; }
.article-page__body .exchange__description { padding-left: 20px; margin: 0; }

.article-page__body .exchange__row {
    display: grid; grid-template-columns: 1.25fr .75fr; gap: 24px;
    align-items: start; margin-bottom: 8px;
}
.article-page__body .exchange__preview img { width: 100%; height: auto; border-radius: var(--r); display: block; }
.article-page__body .exchange__note,
.article-page__body .partner__note { margin-top: 20px; }
.article-page__body .exchange__note {
    color: var(--muted); font-size: 14px;
    border-top: 1px solid var(--line); padding-top: 16px;
}

@media (max-width: 820px) {
    .article-page__body .partner__row,
    .article-page__body .exchange__row { grid-template-columns: 1fr; }
}

/* ── Адаптив: те, що лишалось у дві колонки на телефоні ──────────────────
   .field-grid — це поля форм (оформлення, профіль), .catalog__sub-grid —
   підменю каталогу. На 360px дві колонки дають по ~140px на поле.        */
@media (max-width: 560px) {
    .field-grid { grid-template-columns: 1fr; }
    .catalog__sub-grid { column-count: 1; }
    .sitemap-tree ul { padding-left: 12px; }
    .sitemap-inline a { font-size: 13.5px; padding: 5px 10px; }
    .pagehead__title { font-size: 26px; }
    .panel { padding: 20px 16px; }
}

/* Довгі слова та посилання без пробілів (артикули, e-mail, URL у контенті)
   інакше розпирають контейнер на вузьких екранах. */
.article-page__body, .card__name, .pdp__title, .crumbs {
    overflow-wrap: anywhere;
}

/* Класична причина горизонтального скролу: елемент сітки за замовчуванням
   не може стати вужчим за свій вміст. */
.grid > *, .cats > *, .posts > *, .brands > *, .brand-grid > *,
.seo2__grid > *, .footer__cols > * { min-width: 0; }

/* ── Зони натискання на мобільних ────────────────────────────────────────
   Посилання дерева карти сайту не мали вертикальних відступів — висота
   дорівнювала рядку (~22px). Крапки слайдера теж дрібні: збільшуємо
   область дотику псевдоелементом, не змінюючи вигляд.                    */
@media (max-width: 720px) {
    .sitemap-tree > li > a,
    .sitemap-tree ul a { display: inline-block; padding: 7px 0; }
    .sitemap-tree ul li { margin: 2px 0; }
    .sitemap-inline a { padding: 9px 14px; }
}
.hero__dot { position: relative; }
.hero__dot::after {
    content: ''; position: absolute; left: 50%; top: 50%;
    width: 44px; height: 44px; transform: translate(-50%, -50%);
}

/* ── Головний слайдер: бренд + реальне фото товару ───────────────────────
   Раніше слайд був згенерованою сценою на всю площу. Тепер зліва — спокійна
   панель з логотипом бренду і текстом, справа — справжнє фото товару.      */
.hero__slide--brand {
    display: grid; grid-template-columns: 1.05fr .95fr;
    align-items: stretch; background: var(--surface);
}
.hero__slide--brand .hero__copy {
    display: flex; flex-direction: column; align-items: flex-start;
    justify-content: center; gap: 14px;
    padding: 48px 44px; position: relative; z-index: 2;
    /* Тон лише з боку тексту: під фото будь-яка заливка проявила б
       білий прямокутник самого знімка. */
    background: linear-gradient(135deg, var(--pill) 0%, var(--surface) 78%);
}
.hero__slide--brand .hero__logo {
    height: 34px; width: auto; max-width: 190px;
    object-fit: contain; object-position: left center;
    margin-bottom: 2px; opacity: .92;
}
.hero__slide--brand .hero__h1 {
    display: block;
    font-size: clamp(26px, 2.9vw, 40px); font-weight: 800;
    letter-spacing: -.03em; line-height: 1.12; color: var(--ink);
    max-width: 15ch;
}
.hero__slide--brand .hero__sub {
    color: var(--muted); font-size: 15px; margin: 0;
}
.hero__slide--brand .btn { margin-top: 8px; }

.hero__slide--brand .hero__shot {
    position: relative; display: flex; align-items: center; justify-content: center;
    padding: 30px;
    background: var(--surface);
}
.hero__slide--brand .hero__shot::after {
    /* Тонка «підлога» під товаром, щоб він не висів у порожнечі. */
    content: ''; position: absolute; left: 18%; right: 18%; bottom: 16%;
    height: 14px; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(20,22,28,.16), transparent);
}
.hero__slide--brand .hero__shot img {
    position: relative; z-index: 1;
    max-width: 82%; max-height: 82%; width: auto; height: auto;
    object-fit: contain; mix-blend-mode: multiply;
    filter: drop-shadow(0 18px 26px rgba(20,22,28,.14));
}

@media (max-width: 900px) {
    .hero__slide--brand { grid-template-columns: 1fr; }
    .hero__slide--brand .hero__copy { padding: 30px 24px 8px; }
    .hero__slide--brand .hero__shot { padding: 10px 20px 26px; min-height: 210px; }
    .hero__slide--brand .hero__h1 { max-width: none; }
}

/* ── Фільтри: панель має власну прокрутку ────────────────────────────────
   position: sticky без обмеження висоти означає, що коли список брендів
   довший за екран, його низ прилипає за межами вікна і до нього неможливо
   доскролити. Саме тому бренди після «Gefu» були недосяжні.              */
/* Панель фільтрів більше не липка: у вузькій розкладці, де вона стає на
   всю ширину над сіткою, при прокручуванні вона накривала більшість
   товарів. Разом із липкістю зникає потреба в обмеженні висоти та власній
   прокрутці — вони існували лише щоб липку панель можна було доглортати. */
.filters {
    position: static;
    max-height: none;
    overflow: visible;
}
.filters::-webkit-scrollbar { width: 6px; }
.filters::-webkit-scrollbar-track { background: transparent; }
.filters::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
.filters::-webkit-scrollbar-thumb:hover { background: var(--muted); }

@media (max-width: 1100px) {
    /* У мобільній розкладці панель не липка — обмеження висоти зайве. */
    .filters { max-height: none; overflow: visible; }
}

/* ── Плашка категорії ────────────────────────────────────────────────────
   Було 210px висоти під заголовок у 38px: довга назва в три рядки не
   вміщалась і налазила на зображення.                                     */
.cat-hero {
    min-height: 268px;
    align-items: stretch;
}
.cat-hero__body {
    display: flex; flex-direction: column; justify-content: center;
    padding: 34px 44px; max-width: 58%;
}
.cat-hero__title {
    font-size: clamp(24px, 2.4vw, 34px);
    line-height: 1.14;
    text-wrap: balance;
}
.cat-hero__count {
    margin-top: 14px; font-size: 13.5px; font-weight: 600;
    color: var(--ink-soft); opacity: .85;
}
.cat-hero--scene .cat-hero__title,
.cat-hero--scene .cat-hero__count { color: #fff; }
.cat-hero--scene .cat-hero__count { opacity: .8; }

@media (max-width: 900px) {
    .cat-hero { min-height: 0; }
    .cat-hero__body { max-width: 100%; padding: 24px 22px; }
    .cat-hero__title { font-size: 22px; }
}

/* ── Дрібниці адаптиву ───────────────────────────────────────────────────
   На екрані 360px рядок сортування вилазив за правий край на 7px, а знак
   у шапці головної — на 17px. Смуги прокручування збоку це не давало, але
   праворуч лишалася обрізана смужка.                                     */
@media (max-width: 480px) {
    .toolbar {
        flex-wrap: wrap;
        gap: 10px;
        padding: 12px 14px;
    }

    .toolbar__sortform {
        width: 100%;
        min-width: 0;
    }

    .toolbar__sortform label {
        display: flex;
        width: 100%;
        gap: 8px;
    }

    /* Без min-width:0 селект у flex-контейнері не стискається нижче свого
       вмісту й розпирає рядок. */
    .toolbar__sortform select {
        flex: 1 1 auto;
        min-width: 0;
        max-width: 100%;
    }

    /* Декоративні знаки не повинні задавати ширину сторінки. */
    .hero svg,
    .section-head svg {
        max-width: 100%;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   Нова панель фільтрів, чипи застосованих фільтрів і промо-картки.
   Перенесено з дизайн-репозиторію (коміт 2eda01f).

   Розмітка взята звідти ж, але підписи в наших шаблонах ідуть через
   gtrans(): у їхньому файлі перекладів немає зовсім.
   ══════════════════════════════════════════════════════════════════ */
/* Промо-банер: живе lifestyle-фото на всю площу + текст поверх */
.hero__promo { border-radius: var(--r-lg); padding: 22px; box-shadow: var(--sh-1); transition: transform var(--ease), box-shadow var(--ease); overflow: hidden; position: relative; isolation: isolate; min-height: 208px; background: #1a1d24; }
.hero__promo--a { background: #241d1a; }
.hero__promo--b { background: #1a2230; }
.hero__promo__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; transition: transform .6s var(--ease); }
.hero__promo:hover .hero__promo__bg { transform: scale(1.05); }
.hero__promo::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(to top, rgba(11,13,19,.92) 0%, rgba(11,13,19,.62) 28%, rgba(11,13,19,.14) 56%, rgba(11,13,19,0) 100%); }
.hero__promo__body { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
.hero__promo b { font-size: 20px; font-weight: 800; color: #fff; letter-spacing: -.02em; text-shadow: 0 1px 14px rgba(0,0,0,.4); }
.hero__promo span { font-size: 13.5px; color: rgba(255,255,255,.86); margin-top: 5px; display: block; max-width: 78%; text-shadow: 0 1px 12px rgba(0,0,0,.4); }
.hero__promo em { font-style: normal; margin-top: 15px; align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; font-weight: 800; font-size: 13.5px; color: #fff; padding: 8px 15px; border-radius: var(--pill); background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.34); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background var(--ease), color var(--ease), border-color var(--ease); }
.hero__promo:hover em { background: #fff; color: var(--ink); border-color: #fff; }
.hero__promo em svg { width: 14px; height: 14px; transition: transform var(--ease); }
.hero__promo:hover em svg { transform: translateX(3px); }
/* акцентний бейдж */
.hero__promo__tag { position: absolute; top: 16px; right: 16px; z-index: 3; padding: 5px 12px; border-radius: var(--pill); background: var(--brand); color: #fff; font-size: 12.5px; font-weight: 800; letter-spacing: .02em; box-shadow: 0 6px 16px rgba(225,29,29,.4); }
.hero__promo__tag--new { background: #2563eb; box-shadow: 0 6px 16px rgba(37,99,235,.4); letter-spacing: .08em; }
/* Десктоп: висоту героя задає бічна колонка (2 картки), слайдер тягнеться рівно під неї — без порожнечі */
@media (min-width: 1101px) {
    .hero__main { aspect-ratio: auto; height: 100%; }
}
.cat-hero { position: relative; overflow: hidden; border-radius: var(--r-lg); min-height: 240px; display: flex; align-items: center; box-shadow: var(--sh-1); }
/* Розкладка сторінки розділу: фільтри збоку, товари поруч.

   Селектор навмисно з .section. Клас .catalog носить ще й обгортка кнопки
   «Каталог» у шапці, і це правило, яке стоїть у файлі нижче, перебивало їй
   flex: none на display: grid з колонкою 268px. Кнопка розтягувалася на всю
   ширину, обгортка переставала вміщатися в рядок — і на телефоні шапка
   розсипалася на чотири поверхи: лого, червона смуга «Каталог», іконки,
   пошук. Разом із топбаром це 240px, тобто третина екрана до першого товару.
   На сторінках розділу в обгортки завжди є .section, у шапки — ніколи. */
.catalog.section { display: grid; grid-template-columns: 268px 1fr; gap: 18px; align-items: start; }
.catalog__main { min-width: 0; }
.filters { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-1); position: sticky; top: 104px; }
.filters form { display: flex; flex-direction: column; }
.filters__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 4px; }
.filters__close { display: none; width: 34px; height: 34px; border-radius: 50%; background: var(--bg); color: var(--ink); align-items: center; justify-content: center; flex: none; }
.filters__close svg { width: 18px; height: 18px; }
.filters__body { padding: 0 20px; }
.filters__foot { display: none; }

.facet { border-top: 1px solid var(--line-2); padding: 16px 0; }
.facet:first-child { border-top: 0; }
.facet__head { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; margin-bottom: 12px; }
.facet__badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--pill); background: var(--brand); color: #fff; font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }

/* Чипи-перемикачі спецпропозицій */
.fchips { display: flex; flex-wrap: wrap; gap: 8px; }
.fchip { position: relative; cursor: pointer; }
.fchip input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.fchip span { display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border-radius: var(--pill); background: var(--bg); border: 1.5px solid var(--line); font-size: 13.5px; font-weight: 600; color: var(--ink-soft); transition: all var(--ease); }
.fchip:hover span { border-color: var(--brand); color: var(--brand); }
.fchip input:checked + span { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 6px 14px rgba(225,29,29,.22); }
.fchip input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Повзунок ціни (два бігунки) */
.range__track { position: relative; height: 5px; background: var(--line); border-radius: 5px; margin: 6px 9px 20px; }
.range__fill { position: absolute; top: 0; bottom: 0; background: var(--brand); border-radius: 5px; }
.range__thumb { position: absolute; top: 50%; left: -9px; width: calc(100% + 18px); transform: translateY(-50%); margin: 0; height: 18px; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
.range__thumb::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2.5px solid var(--brand); box-shadow: var(--sh-2); cursor: grab; }
.range__thumb::-moz-range-thumb { pointer-events: auto; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2.5px solid var(--brand); box-shadow: var(--sh-2); cursor: grab; }
.range__thumb::-webkit-slider-runnable-track { background: none; border: none; }
.range__thumb::-moz-range-track { background: none; border: none; }
.range__inputs { display: flex; align-items: center; gap: 8px; }
.range__inputs label { flex: 1; display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 12px; color: var(--muted); }
.range__inputs input { width: 100%; min-width: 0; height: 40px; border: 1.5px solid var(--line); border-radius: var(--r-xs); padding: 0 10px; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink); }
.range__inputs input:focus { outline: none; border-color: var(--brand); }
.range__dash { color: var(--faint); }

/* Пошук бренду + список */
.facet__search { position: relative; margin-bottom: 10px; }
.facet__search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--muted); }
.facet__search input { width: 100%; height: 40px; border: 1.5px solid var(--line); border-radius: var(--pill); padding: 0 14px 0 34px; font: inherit; font-size: 14px; }
.facet__search input:focus { outline: none; border-color: var(--brand); }
.facet__scroll { max-height: 220px; overflow-y: auto; margin-right: -8px; padding-right: 8px; display: flex; flex-direction: column; gap: 2px; }
.chk { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 14px; color: var(--ink-soft); cursor: pointer; }
.chk input { width: 18px; height: 18px; accent-color: var(--brand); flex: none; cursor: pointer; }
.chk:hover { color: var(--ink); }
.facet__empty { padding: 10px 0; font-size: 13px; color: var(--muted); }

/* Тулбар: лічильник + фільтр-кнопка + сортування */
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; padding: 12px 18px; background: var(--surface); border-radius: var(--r); box-shadow: var(--sh-1); }
.toolbar__count { color: var(--ink-soft); font-size: 14px; font-weight: 600; }
.toolbar__count b { color: var(--brand); }
.toolbar__actions { display: flex; align-items: center; gap: 10px; }
.toolbar__filter { display: none; align-items: center; gap: 8px; height: 42px; padding: 0 16px; border-radius: var(--pill); background: var(--brand); color: #fff; font-weight: 700; font-size: 14px; box-shadow: 0 6px 16px rgba(225,29,29,.24); }
.toolbar__filter svg { width: 17px; height: 17px; }
.toolbar__fcount { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--pill); background: #fff; color: var(--brand); font-size: 11px; font-weight: 800; }
/* Застосовані фільтри — знімні чипи */
.applied { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.applied__chip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 8px 0 14px; border-radius: var(--pill); background: var(--brand-tint); color: var(--brand); font-size: 13px; font-weight: 600; transition: all var(--ease); }
.applied__chip:hover { background: var(--brand); color: #fff; }
.applied__chip svg { width: 13px; height: 13px; }
.applied__clear { align-self: center; font-size: 13px; color: var(--muted); font-weight: 600; text-decoration: underline; }
.applied__clear:hover { color: var(--brand); }

/* Scrim для мобільного drawer (показується у медіа-запиті) */
.filters__scrim { display: none; }
/* Характеристики — на всю ширину у 2 колонки (спец-лист) */
.specs2 { margin: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 56px; }
.specs2__row { display: flex; align-items: baseline; padding: 12px 2px; border-bottom: 1px solid var(--line-2); }
.specs2__row dt { order: 1; color: var(--muted); font-size: 14px; }
.specs2__row::before { content: ""; order: 2; flex: 1 1 auto; min-width: 14px; margin: 0 10px; align-self: flex-end; border-bottom: 1.5px dotted var(--line); transform: translateY(-4px); }
.specs2__row dd { order: 3; margin: 0; font-size: 14px; font-weight: 600; color: var(--ink); text-align: right; }
.specs2.is-open .specs__extra { display: flex; }
@media (max-width: 720px) { .specs2 { grid-template-columns: 1fr; column-gap: 0; } }

/* --- Мобільний фільтр: висувний drawer (перекриває базовий сайдбар) -------- */
@media (max-width: 1100px) {
    .toolbar__filter { display: inline-flex; }
    .filters__scrim { display: block; position: fixed; inset: 0; z-index: 130; background: rgba(15,18,26,.5); opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s; }
    html.filters-open .filters__scrim { opacity: 1; visibility: visible; }
    html.filters-open { overflow: hidden; }

    .filters { position: fixed; top: 0; right: 0; bottom: 0; left: auto; width: min(384px, 90vw); max-width: none; z-index: 140; transform: translateX(103%); transition: transform .34s var(--ease); border-radius: 0; box-shadow: -14px 0 44px rgba(15,18,26,.22); padding: 0; }
    html.filters-open .filters { transform: none; }
    .filters form { height: 100%; }
    .filters__head { flex: none; padding: 16px 18px; border-bottom: 1px solid var(--line-2); }
    .filters__head h3 { font-size: 18px; }
    .filters__reset { display: none; }
    .filters__close { display: inline-flex; }
    .filters__body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 4px 18px 18px; }
    .facet__scroll { max-height: none; }
    .filters__foot { display: flex; flex: none; gap: 10px; padding: 14px 18px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line-2); background: var(--surface); }
    .filters__foot .btn { flex: 1; height: 48px; }
    .filters__apply { flex: 1.7; }
}

/* ── Плашка категорії: висота смуги ──────────────────────────────────────
   Спершу я задав контейнеру пропорцію 21:9 — і плашка виросла до 537px,
   стала велетенською. 21:9 — це пропорції ЗОБРАЖЕННЯ, щоб товар вміщався з
   полями, а не висота блока.

   За специфікацією дизайнерів плашка — смуга 240px на десктопі і 165px на
   вузькому екрані. Товар не ріжеться, бо банери перемальовані з запасом
   по вертикалі й центровані.

   Смуга 240px при ширині контейнера 1252px — це пропорція 5,2:1, і від кадру
   21:9 в неї потрапляють лише середні 45% висоти. Мальованому товару на
   пастелі цього вистачало, а живій сцені — ні: чайник, блендер, ножовий блок
   зрізало зверху. 300px дають 4,2:1 і 56% висоти — предмет уміщається цілком.

   Висота тепер тягнеться за шириною (23vw), тому на планшеті пропорція смуги
   та сама, що й на десктопі, і одна й та сама картинка ріжеться однаково.
   Фіксовані 240/165 давали на проміжних ширинах найвужчу смугу з усіх.      */
.cat-hero {
    min-height: clamp(165px, 23vw, 300px);
}

/* ── Плашка категорії: який файл вантажити ───────────────────────────────
   Адреси приходять з розмітки трьома змінними, а вибір між ними — тут, бо
   ширину екрана знає тільки браузер. Раніше і телефон, і десктоп тягли той
   самий широкий кадр: на мальованій пастелі це 28 КБ, на живому фото — 40,
   і платив за це саме телефон, де плашка й так головний екран.

   Базове правило — JPEG, як було. Правило з image-set() застосує тільки той
   браузер, який його розуміє; решта пропустить рядок і побачить те саме, що
   й сьогодні. Гірший результат правки — поведінка без змін.                */
.cat-hero--scene {
    background-image: var(--scene-overlay), var(--scene);
    background-size: cover;
    background-position: center;
    --scene-overlay: linear-gradient(90deg,
        rgba(18,20,26,.78) 0%, rgba(18,20,26,.45) 46%,
        rgba(18,20,26,.05) 78%, rgba(18,20,26,0) 100%);
}

.cat-hero--webp {
    background-image: var(--scene-overlay),
        image-set(var(--scene-wide) type("image/webp"), var(--scene) type("image/jpeg"));
}

@media (max-width: 900px) {
    .cat-hero--webp {
        background-image: var(--scene-overlay),
            image-set(var(--scene-narrow) type("image/webp"), var(--scene) type("image/jpeg"));
    }
}

/* ── Звірка з CHANGELOG дизайн-репозиторію ───────────────────────────────
   Два пункти не приїхали разом зі стилями: у їхньому коміті це були
   ВИДАЛЕНІ властивості, а видалення не переноситься дописуванням правил.
   Перекриваю явно.                                                       */

/* Пункт 4. Жорстка пропорція робила слайдер завеликим на широких екранах і
   лишала порожнечу праворуч. На десктопі висоту задає бічна колонка з двох
   промо-карток, слайдер тягнеться рівно під неї. */
@media (min-width: 1101px) {
    .hero__main {
        aspect-ratio: auto;
        height: 100%;
        min-height: 0;
    }
}

/* Пункт 5. .specs2 мав max-width: 720px — праворуч лишалася порожнеча.
   Характеристики йдуть на всю ширину у дві колонки; на вузькому екрані
   колонка одна. */
.specs2 {
    max-width: none;
}

@media (max-width: 720px) {
    .specs2 { grid-template-columns: 1fr; column-gap: 0; }
}

/* ── Випадні списки: власна стрілка замість системної ────────────────────
   Селект сортування лишався системним елементом ОС: чужа стрілка, чужа
   висота, інша заливка. Поруч із рештою оформлення це читалося як
   недороблене місце — і однаково в українській та російській версіях.

   appearance: none прибирає системний вигляд, стрілка малюється фоном.
   padding-right тримає місце під неї, щоб довгий варіант («за
   замовчуванням») не наїжджав на стрілку.                                */
.toolbar__sortform select,
.facet select,
.filters select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    height: 40px;
    padding: 0 40px 0 16px;
    border: 1.5px solid var(--line);
    border-radius: var(--pill);
    background-color: var(--surface);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23767B87' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 14px 14px;

    font: inherit;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
    cursor: pointer;
    transition: border-color var(--ease), box-shadow var(--ease);
}

.toolbar__sortform select:hover { border-color: #DCE0E8; }

.toolbar__sortform select:focus,
.toolbar__sortform select:focus-visible {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 4px var(--brand-tint);
}

/* Підпис і селект в одну лінію, без стрибків по базовій лінії. */
.toolbar__sortform label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}

/* IE-стрілку в старих рушіях теж прибираємо. */
.toolbar__sortform select::-ms-expand { display: none; }

/* ── Товари на запасній плашці категорії ─────────────────────────────────
   Фотографії вирізані на білому. Прибирати біле мав mix-blend-mode:
   multiply, але поруч на тому ж елементі стояв filter: drop-shadow — фільтр
   виносить елемент в окрему групу відмальовування, і режим накладання
   перестає діяти. Через це на пастельній підкладці товари виглядали як
   білі квадрати, тоді як на сюжетних банерах усе було гаразд.

   Фільтр знято, тінь перенесено на обгортку: вона не бере участі в
   накладанні й нічого не ламає.                                          */
.cat-hero__prod img {
    filter: none;
    mix-blend-mode: multiply;
}

.cat-hero__prod {
    position: relative;
}

/* М'яка тінь під товаром — окремим шаром, поза групою накладання. */
.cat-hero__prod::after {
    content: "";
    position: absolute;
    left: 22%;
    right: 22%;
    bottom: 8px;
    height: 10px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(20,22,34,.16), rgba(20,22,34,0) 70%);
    pointer-events: none;
    z-index: -1;
}

/* Продовження. Самого зняття filter виявилося замало: групу відмальовування
   створювали ще три речі — mask на обгортці та opacity і transform на
   окремих картках. Будь-що з цього ізолює вміст, і multiply починає
   накладатися на порожнечу замість пастельної підкладки.

   Прибираю їх саме тут. Втрачаємо легкий розліт карток по вертикалі й
   розмиття лівого краю — обидва суто декоративні, а товари натомість лягають
   на підкладку чисто, як на сюжетних банерах.                            */
.cat-hero__products {
    -webkit-mask: none;
    mask: none;
    z-index: auto;
}

.cat-hero__prod,
.cat-hero__prod:nth-child(1),
.cat-hero__prod:nth-child(2),
.cat-hero__prod:nth-child(4) {
    transform: none;
    opacity: 1;
}

/* ── Адаптив: виправлення після перенесення стилів дизайнерів ────────────
   Стилі з дизайн-репозиторію дописані нижче за мій адаптивний блок, а за
   однакової сили виграє те правило, що стоїть пізніше. Через це мобільні
   налаштування тулбара перестали діяти: рядок сортування вилазив за екран.
   Тримаю виправлення в кінці файла — тоді порядок більше не підведе.     */

@media (max-width: 600px) {
    /* Три елементи в один рядок на 360px не вміщаються: лічильник, кнопка
       фільтрів і сортування. Розкладаємо у два рівні. */
    .toolbar {
        flex-wrap: wrap;
        gap: 10px;
        padding: 12px 14px;
    }

    .toolbar__count { flex: 1 1 auto; }
    .toolbar__filter { flex: 0 0 auto; }

    .toolbar__sortform {
        flex: 1 1 100%;
        min-width: 0;
    }

    .toolbar__sortform label {
        display: flex;
        width: 100%;
        gap: 8px;
        align-items: center;
    }

    /* Без min-width: 0 селект у flex-контейнері не стискається нижче свого
       вмісту й розпирає рядок — саме через це «за замовчуванням» обрізалося. */
    .toolbar__sortform select {
        flex: 1 1 auto;
        min-width: 0;
        max-width: 100%;
    }

    /* Кнопку каталогу розтягувало на всю ширину чуже правило — і виходила
       порожня червона смуга з крихітною іконкою. Причину прибрано
       (див. .catalog.section), кнопка знову за розміром вмісту, тож підпис
       можна лишити: слово «Каталог» читається як кнопка, а сама іконка — ні. */
    .catalog-btn__label {
        display: inline-block !important;
        font-size: 14px;
        letter-spacing: .06em;
    }

    .catalog-btn {
        justify-content: center;
        gap: 10px;
    }
}

/* На найвужчих екранах підпис таки не влазить: лого, кнопка з підписом і
   три іконки переносяться на другий рядок, і шапка росте зі 116 до 162px.
   Межу знайдено вимірюванням: на 375px і ширше рядок тримається, на 360px
   уже ні. Там лишаємо саму іконку. */
@media (max-width: 374px) {
    .catalog-btn__label { display: none !important; }
    .catalog-btn { padding: 0 13px; }
}

/* ── Меню каталогу: три рівні ────────────────────────────────────────────
   Раніше в сітці лежали прості посилання одним потоком. Тепер кожен
   підрозділ — колонка зі своїми вкладеними пунктами, інакше третій рівень
   перетворив би меню на суцільний список без ієрархії.                   */

/* Не сітка, а колонки. У сітці рядок тягнеться по найвищій картці, і поруч
   із групою на шість пунктів група на один лишала велику порожнечу. Колонки
   вкладають картки щільно, одна під одною, як на бойовому сайті. */
.catalog__sub-grid {
    column-count: 2;
    column-gap: 20px;
    max-height: 62vh;
    overflow-y: auto;
    padding-right: 6px;
}

/* Картку не можна розривати між колонками. */
.catalog__sub-grid > .catalog__col {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: 13px;
}

/* Підрозділ — окрема картка. Раніше заголовок групи майже не відрізнявся
   від вкладених пунктів, і меню читалося суцільною сірою масою: незрозуміло,
   де закінчується одна група й починається наступна. Тепер у кожної групи
   своя підкладка й червоний заголовок, як на бойовому сайті. */
/* Підкладка картки була майже того ж кольору, що й тло меню, тож користі
   не давала, а відступи додавала. Групу тримають заголовок і риска під ним —
   цього досить, і меню стає помітно щільнішим. */
.catalog__col {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
    padding: 0;
}

/* Специфічність на клас вища за .catalog__sub-grid a вище по файлу —
   інакше той перебиває відступи. */
.catalog__sub-grid .catalog__col-title {
    font-weight: 700;
    font-size: 14px;
    color: var(--brand);
    line-height: 1.3;
    padding: 0 0 5px;
    margin: 0;
    border-bottom: 1px solid var(--line);
    margin-bottom: 3px;
}

.catalog__sub-grid .catalog__col-title:hover { color: var(--brand-dark); padding-left: 0; }

.catalog__sub-grid .catalog__col-link {
    font-size: 13.5px;
    color: var(--ink-soft);
    line-height: 1.35;
    padding: 3px 0;
    font-weight: 500;
}

.catalog__sub-grid .catalog__col-link:hover { color: var(--brand); padding-left: 4px; }

/* Підрозділи без вкладених пунктів. Раніше кожен із них малювався такою ж
   карткою із заголовком і рискою, і під ним лишалася порожнеча на пів
   екрана. Тепер вони йдуть щільним рядом плашок під групами. */
.catalog__singles {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}

.catalog__sub-grid + .catalog__singles { margin-top: 4px; }

.catalog__singles .catalog__single {
    padding: 6px 13px;
    border-radius: var(--pill);
    background: var(--bg);
    color: var(--ink-soft);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    transition: background var(--ease), color var(--ease);
}

.catalog__singles .catalog__single:hover { background: var(--brand); color: #fff; }

.catalog__sub-grid::-webkit-scrollbar { width: 6px; }
.catalog__sub-grid::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
.catalog__sub-grid::-webkit-scrollbar-thumb:hover { background: var(--muted); }

@media (max-width: 900px) {
    .catalog__sub-grid { column-count: 2; max-height: none; }
}

@media (max-width: 560px) {
    .catalog__sub-grid { column-count: 1; }
}

/* ── Сітка сторінки каталогу на вузьких екранах ──────────────────────────
   Стилі дизайнерів задають сторінці каталогу дві колонки: 268px під фільтри
   плюс товари. Мобільного переозначення для цього правила немає — старе
   написане під попереднє ім'я класу (.catalog-page). Через це на телефоні
   колонка з товарами стискалася до 268px, і всередині неї все ламалося:
   тулбар, сортування, картки.

   Ціль саме .catalog.section: те саме ім'я класу носить обгортка кнопки
   каталогу в шапці, і зачепити її не можна.                              */

@media (max-width: 1100px) {
    .catalog.section {
        display: block;
    }

    /* Панель фільтрів на вузькому екрані — висувна шторка, у потоці
       сторінки їй місця не потрібно. */
    .catalog.section > .filters {
        position: fixed;
    }
}

/* Рядок сортування має займати власний рядок, а не тиснутися поруч із
   кнопкою фільтрів. Одного flex-basis: 100% замало: підпис «Сортування:»
   заборонено переносити, тож форма не може стиснутися — вона лишалася в
   тому ж рядку й вилазила за край. flex-shrink: 0 не дає їй стискатися
   взагалі, і рядок переноситься примусово. */
@media (max-width: 600px) {
    .toolbar__sortform { flex: 1 0 100%; }
    .toolbar__sortform label { white-space: normal; }
}

/* ── Тулбар каталогу на телефоні: блоками, без flex ──────────────────────
   Спроби розкласти три елементи через flex-wrap і flex-basis не спрацювали:
   підпис «Сортування:» заборонено переносити, селект має власну мінімальну
   ширину, і рядок щоразу вилазив за край — то на 132 пікселі, то більше.

   На вузькому екрані flex тут не потрібен зовсім: три блоки один під одним
   поводяться передбачувано за будь-якої довжини підпису й будь-якої мови. */

@media (max-width: 600px) {
    .toolbar {
        display: block;
        padding: 12px 14px;
    }

    .toolbar__count {
        display: block;
        margin-bottom: 10px;
    }

    .toolbar__filter {
        display: flex;
        width: 100%;
        justify-content: center;
        margin-bottom: 10px;
    }

    .toolbar__sortform {
        display: block;
        width: 100%;
        max-width: 100%;
    }

    .toolbar__sortform label {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        white-space: nowrap;
    }

    .toolbar__sortform select {
        flex: 1 1 auto;
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }
}

/* Обгортка .toolbar__actions тримає кнопку фільтрів і сортування в одному
   flex-рядку. Саме вона вилазила за край: я правив вкладені елементи, не
   чіпаючи її, і вони чесно вкладалися у контейнер, який сам стояв поза
   тулбаром. На вузькому екрані розкладаємо її блоками разом з рештою. */
@media (max-width: 600px) {
    .toolbar__actions {
        display: block;
        width: 100%;
        max-width: 100%;
        margin: 0;
    }
}

/* ── Меню каталогу на телефоні: розгортання, а не приховування ───────────
   Підменю було сховане на вузьких екранах повністю (display: none !important),
   тож підрозділи з мобільного меню не відкривалися ніяк: дотик до розділу
   просто вів на його сторінку. Тепер це список, що розгортається на місці. */

@media (max-width: 900px) {
    .catalog__item.is-active .catalog__sub {
        display: block !important;
        position: static;
        inset: auto;
        max-height: none;
        overflow: visible;
        margin: 2px 0 8px;
        padding: 14px 16px 16px;
        background: var(--bg);
        border-radius: var(--r-sm);
    }

    .catalog__item.is-active .catalog__sub-title {
        font-size: 15px;
        margin-bottom: 12px;
    }

    .catalog__sub-grid {
        column-count: 1;
        max-height: none;
        overflow: visible;
    }

    .catalog__col-title { font-size: 14px; }
    .catalog__col-link { font-size: 13px; padding-left: 10px; }

    /* Стрілка показує стан: розділ згорнутий чи розгорнутий. */
    .catalog__item.is-active .catalog__arrow { transform: rotate(90deg); }
}

/* --------------------------------------------------------------------------
   ПІДКАЗКИ МІСТА НОВОЇ ПОШТИ

   Місто й відділення в оформленні були звичайними текстовими полями:
   покупець вписував що завгодно, і менеджеру доводилося вгадувати. Довідник
   у базі оновлюється щодня — тепер він під'єднаний до форми.
   -------------------------------------------------------------------------- */
.np-city { position: relative; }

.np-suggest {
    position: absolute;
    left: 0; right: 0; top: 100%;
    z-index: 30;
    margin-top: 6px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    box-shadow: var(--sh-2);
    overflow: hidden;
    max-height: 280px;
    overflow-y: auto;
}

.np-suggest__item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 14px;
    font-size: 14px;
    color: var(--ink);
    background: none;
    border: 0;
    cursor: pointer;
}

.np-suggest__item:hover,
.np-suggest__item:focus-visible { background: var(--line-2); color: var(--brand); }

/* --------------------------------------------------------------------------
   ФАЙЛ ІНСТРУКЦІЇ НА КАРТЦІ ТОВАРУ

   Оформлення взяте з інших плашок картки: та сама підкладка, ті самі
   скруглення й фірмовий акцент на наведенні. Ніяких нових шрифтів і
   зображень — на швидкість не впливає.
   -------------------------------------------------------------------------- */
.pdp-file {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--bg);
    max-width: 420px;
    transition: border-color var(--ease), background var(--ease);
}

.pdp-file:hover { border-color: var(--brand); background: var(--surface); }

.pdp-file__ico {
    flex: none;
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--r-xs);
    background: var(--brand-tint);
    color: var(--brand);
}
.pdp-file__ico svg { width: 22px; height: 22px; }

.pdp-file__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pdp-file__body b { font-size: 14.5px; color: var(--ink); }
.pdp-file__body span { font-size: 12.5px; color: var(--muted); letter-spacing: .04em; }

.pdp-file__arrow { width: 18px; height: 18px; margin-left: auto; color: var(--muted); flex: none; }
.pdp-file:hover .pdp-file__arrow { color: var(--brand); }

/* --------------------------------------------------------------------------
   ОПИС БРЕНДУ — ЗГОРТАННЯ

   Текст обрізався на 260 символах, тобто посеред речення, і читач бачив
   обірвану думку з трьома крапками. Тепер видно початок, решта
   розкривається на місці. Розмір тексту той самий, сторінка не стрибає.
   -------------------------------------------------------------------------- */
/* Ширину не обмежуємо: текст стояв у 620px колонці, а поруч лишалася
   порожнеча на пів-екрана. Читається він і на всю ширину — рядок довгий,
   але блок згорнутий, тож рядків небагато. */
.brand-hero__desc { position: relative; margin: 0 0 6px; }

.brand-hero__desc p {
    color: var(--ink-soft);
    font-size: 14.5px;
    line-height: 1.6;
    margin: 0;
}

.brand-hero__desc:not(.is-open) p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.brand-hero__more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 10px;
    padding: 0;
    background: none;
    border: 0;
    color: var(--brand);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.brand-hero__more svg { width: 14px; height: 14px; transition: transform var(--ease); }
.brand-hero__more.is-open svg { transform: rotate(180deg); }

/* --------------------------------------------------------------------------
   ПРОМОКОД У КОШИКУ

   Оформлення взяте з наявних полів кошика: та сама висота, ті самі
   скруглення й фірмовий акцент. Нових шрифтів і зображень немає.
   -------------------------------------------------------------------------- */
.promo { margin: 14px 0 4px; }

.promo__row { display: flex; gap: 8px; }

.promo__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 42px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: var(--r-xs);
    background: var(--surface);
    color: var(--ink);
    font-size: 14px;
}

.promo__input:focus { border-color: var(--brand); outline: none; }

.promo__btn {
    flex: none;
    height: 42px;
    padding: 0 16px;
    border: 1px solid var(--line);
    border-radius: var(--r-xs);
    background: var(--bg);
    color: var(--ink);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--ease), color var(--ease), border-color var(--ease);
}

.promo__btn:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.promo__btn[disabled] { opacity: .6; cursor: default; }

.promo__msg { margin-top: 8px; font-size: 13px; line-height: 1.4; }
.promo__msg--ok { color: var(--success); }
.promo__msg--no { color: var(--brand); }

.cart__row--promo span:last-child { color: var(--success); font-weight: 600; }

/* Рядок знижки ховається атрибутом hidden, але .cart__row задає display:flex
   і перебиває його — рядок «Знижка 0 ₴» лишався на видноті. */
.cart__row[hidden] { display: none; }

/* Кнопка промокоду має бути спокійною: головна дія в кошику — «Оформити
   замовлення», і дві однаково яскраві кнопки поруч сперечаються. */
.promo .promo__btn {
    background: var(--bg);
    color: var(--ink);
    border: 1px solid var(--line);
}
.promo .promo__btn:hover { background: var(--brand); border-color: var(--brand); color: #fff; }

/* Пункт «Акційні товари» в меню каталогу — фірмовий акцент, щоб знижки
   було видно одразу, але без крику: та сама форма, що й в інших пунктів. */
.catalog__item--promo .catalog__lead { color: var(--brand); font-weight: 600; }
.catalog__item--promo .catalog__ico { background: var(--brand-tint); color: var(--brand); }
.catalog__item--promo { border-bottom: 1px solid var(--line); padding-bottom: 4px; margin-bottom: 4px; }

/* --------------------------------------------------------------------------
   ЗБІЛЬШЕННЯ ФОТО ТОВАРУ

   Знімок у картці — 398 точок, роздивитися фактуру чи напис на корпусі на
   ньому неможливо. При наведенні поверх показується той самий кадр у повному
   розмірі й зсувається за курсором.

   Повний кадр вантажиться лише за наведенням і лише один раз на фото, тож на
   швидкість відкриття сторінки це не впливає. На вузьких екранах збільшення
   вимкнене: там працює звичайний перегляд у повний екран за дотиком.
   -------------------------------------------------------------------------- */
.pdp__zoom {
    position: absolute;
    inset: 0;
    border-radius: var(--r);
    background-repeat: no-repeat;
    background-size: 220%;
    background-color: #fff;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s var(--ease);
    z-index: 2;
}

.pdp__stage.is-zooming .pdp__zoom { opacity: 1; }

/* Поки вантажиться повний кадр — курсор показує очікування, без стрибків. */
.pdp__stage.is-zoom-loading { cursor: progress; }
.pdp__stage { cursor: zoom-in; }

/* Стрілки й позначки лишаються над лупою. */
.pdp__stage .pdp__badges,
.pdp__stage .pdp__arrow { z-index: 3; }

/* --------------------------------------------------------------------------
   ОПЛАТА ЧАСТИНАМИ ТА ДОСТАВКА В КАРТЦІ

   Обидва блоки зібрані з тих самих величин, що й решта картки: та сама
   підкладка, ті самі скруглення, фірмовий червоний тільки на сумі платежу.
   Ніяких нових шрифтів і зображень — на швидкість не впливає.
   -------------------------------------------------------------------------- */
.pdp-parts {
    margin-top: 14px;
    padding: 14px 16px 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface);
}

.pdp-parts__head { display: flex; align-items: center; gap: 10px; }

.pdp-parts__ico {
    flex: none;
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px;
    background: var(--line-2);
    color: var(--muted);
}
.pdp-parts__ico svg { width: 16px; height: 16px; }

.pdp-parts__head b { font-size: 14.5px; font-weight: 600; color: var(--ink); }

/* Сума платежу — темна, як решта цін у картці. Фірмовим червоним тут
   кричати нема про що: головна ціна вже червона, і два акценти поруч
   сперечаються. */
.pdp-parts__sum {
    margin-left: auto;
    font-size: 15.5px;
    font-weight: 700;
    color: var(--ink);
    white-space: nowrap;
}
.pdp-parts__sum em {
    font-style: normal;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--muted);
    margin-left: 4px;
}

.pdp-parts__banks {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    margin-top: 10px; padding-top: 10px;
    border-top: 1px solid var(--line);
}

/* Банк — маленький значок і назва поруч, без плашки: плашки робили рядок
   важким, а тут це довідкова інформація, а не кнопки. */
.pdp-parts__bank {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 13px; font-weight: 500; color: var(--ink-soft);
}

.pdp-parts__mark {
    width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 6px;
    font-size: 8px; font-weight: 700; letter-spacing: -0.02em;
    color: #fff;
}
.pdp-parts__mark--mono { background: #1c1c1c; }
.pdp-parts__mark--privat { background: #4caf27; font-size: 11px; }

.pdp-parts__from { margin-left: auto; font-size: 12.5px; color: var(--muted); }

.pdp-parts__note {
    margin: 9px 0 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--muted);
}

.pdp-delivery {
    display: flex;
    gap: 14px;
    padding: 16px 18px;
    margin-top: 14px;
    background: var(--brand-tint);
    border: 0;
}

.pdp-delivery__ico { flex: none; color: var(--brand); }
.pdp-delivery__ico svg { width: 24px; height: 24px; }

.pdp-delivery__body b { display: block; font-size: 15px; color: var(--brand-dark); margin-bottom: 4px; }
.pdp-delivery__body p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); }
.pdp-delivery__body ul { margin: 0; padding-left: 18px; }
.pdp-delivery__body li { font-size: 13px; line-height: 1.55; color: var(--ink-soft); }

/* ==========================================================================
   КАРТОЧКА ТОВАРА НА ВУЗЬКОМУ ЕКРАНІ

   На телефоні праву колонку картки обрізало: ціна, «Платіть частинами» і
   блок доставки виїжджали за правий край, у рядках бракувало хвостів.

   Причина — не медіазапит, він відпрацьовував: колонка вже була одна.
   Річ у тім, що доріжка 1fr не вміє стати вужчою за мінімальну ширину
   вмісту. Ряд купівлі — кількість, кнопка й «в обране» в один flex —
   не стискається менше ніж 353px, плюс поля коробки ціни 44px, разом
   397px. Контейнер при цьому лишався 332px, і різницю просто зрізало.

   Лікуємо з двох боків: доріжці дозволяємо бути вужчою за вміст, а сам
   ряд купівлі вчимо переноситися.
   ========================================================================== */

@media (max-width: 760px) {
    /* minmax(0,1fr) замість 1fr: тепер колонка ніколи не ширша за екран. */
    .pdp { grid-template-columns: minmax(0, 1fr); }

    /* Ряд купівлі переноситься: лічильник і «в обране» лишаються поруч,
       кнопка стає на всю ширину під ними. */
    .pdp__buy { flex-wrap: wrap; gap: 10px; }
    .pdp__buy .btn { flex: 1 1 100%; min-width: 0; order: 3; }
    .pdp__buy .qty { order: 1; }
    .pdp__buy .pdp__fav { order: 2; margin-left: auto; }

    /* Поля коробки ціни на телефоні надто щедрі — 44px з 360 це 12% ширини. */
    .pdp__pricebox { padding: 16px 14px; }

    /* Довгі артикули й адреси не мають розсовувати сторінку. */
    .pdp__info, .pdp-parts, .pdp-delivery, .pdp__desc-body { min-width: 0; overflow-wrap: anywhere; }

    /* «Платіть частинами»: підпис і сума в один рядок не влазять — сума
       переноситься під нього, а не зрізається по правому краю. */
    .pdp-parts__head { flex-wrap: wrap; gap: 6px 10px; }
    .pdp-parts__sum { margin-left: 38px; white-space: normal; }
    .pdp-parts__from { margin-left: 0; width: 100%; }
}

/* ==========================================================================
   КОНТАКТИ

   Сторінка показувала один рядок «Інформація готується»: у записі просто
   немає тексту. Наповнення те саме, що на бойовому — графік, телефон,
   пошта, мережі, форма зворотного дзвінка, — але блоками: людина шукає
   очима номер і години роботи, а не абзац.
   ========================================================================== */

.contacts { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 18px; align-items: start; }
.contacts__side { display: flex; flex-direction: column; gap: 18px; }
.contacts__card { padding: 22px 24px; }
.contacts__form { padding: 26px 28px; }

.contacts__h { font-size: 15px; font-weight: 800; letter-spacing: -.01em; color: var(--ink); margin: 0 0 16px; }

/* Рядок зв'язку — уся площа клікабельна, а не сам лише номер: на телефоні
   влучити в текстовий рядок складніше, ніж у смугу. */
.contacts__row {
    display: flex; align-items: center; gap: 14px;
    padding: 12px; margin: 0 -12px;
    border-radius: var(--r-sm);
    transition: background var(--ease);
}
.contacts__row + .contacts__row { margin-top: 2px; }
.contacts__row:hover { background: var(--bg); }
.contacts__ico {
    flex: none; width: 42px; height: 42px; border-radius: var(--r-sm);
    background: var(--brand-tint); color: var(--brand);
    display: flex; align-items: center; justify-content: center;
}
.contacts__ico svg { width: 20px; height: 20px; }
.contacts__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.contacts__body b { font-size: 16px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.contacts__body span { font-size: 13px; color: var(--muted); }

/* Графік. Крапковий поводир між назвою дня і часом — око не губить рядок. */
.contacts__hours { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.contacts__hours > div { display: flex; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--line-2); }
.contacts__hours > div:last-child { border-bottom: 0; }
/* Порядок задаємо явно. Поводир — це ::before, і без order він стає першим
   у рядку: день з'їжджав праворуч, а крапки лізли на його місце. Тепер
   день ліворуч, крапки посередині, час праворуч. */
.contacts__hours dt { order: 1; font-size: 14px; color: var(--ink-soft); }
.contacts__hours > div::before {
    content: ""; order: 2; flex: 1 1 auto; min-width: 12px; margin: 0 10px;
    align-self: flex-end; border-bottom: 1.5px dotted var(--line); transform: translateY(-4px);
}
.contacts__hours dd { order: 3; margin: 0; font-size: 14px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.contacts__hours .contacts__off { color: var(--muted); font-weight: 600; }

.contacts__soc { display: flex; flex-wrap: wrap; gap: 8px; }
.contacts__soc a {
    display: inline-flex; align-items: center; gap: 8px;
    height: 40px; padding: 0 14px; border-radius: var(--pill);
    background: var(--bg); color: var(--ink-soft);
    font-size: 13.5px; font-weight: 600;
    transition: background var(--ease), color var(--ease);
}
.contacts__soc a:hover { background: var(--brand-tint); color: var(--brand); }
.contacts__soc svg { width: 18px; height: 18px; }

.contacts__form .field + .field { margin-top: 14px; }
.contacts__form .btn { margin-top: 18px; }
.contacts__note { margin: 12px 0 0; font-size: 13.5px; line-height: 1.5; }
.contacts__note--ok { color: var(--success); }
.contacts__note--err { color: var(--brand); }

@media (max-width: 900px) {
    .contacts { grid-template-columns: 1fr; }
    .contacts__card, .contacts__form { padding: 18px 16px; }
}