/* Дизайн Toys Town, вариант C. Источник: design/mockup.html */

/* атрибут hidden должен скрывать всегда: иначе любой класс с display его перебивает */
[hidden] { display: none !important; }

  /* ============ оболочка презентации ============ */
  :root {
    color-scheme: light;
    --page-bg: #EEF2F6;
    --page-surface: #FFFFFF;
    --page-ink: #101C26;
    --page-ink-2: #51677A;
    --page-line: #D4DDE5;
    --page-accent: #2E90DA;
    --photo-bg: #F2F6FA;
  }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      color-scheme: dark;
      --page-bg: #080E14;
      --page-surface: #121A22;
      --page-ink: #E8F0F6;
      --page-ink-2: #92A6B6;
      --page-line: #232F3A;
      --page-accent: #56AEF0;
      --photo-bg: #E8EFF5;
    }
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --page-bg: #080E14;
    --page-surface: #121A22;
    --page-ink: #E8F0F6;
    --page-ink-2: #92A6B6;
    --page-line: #232F3A;
    --page-accent: #56AEF0;
    --photo-bg: #E8EFF5;
  }
/* ============ токены магазина — вариант C ============ */
  .shop {
    --font-d: "Unbounded", "Trebuchet MS", sans-serif;
    --font-b: "Onest", -apple-system, "Segoe UI", Roboto, sans-serif;
    --r: 10px;
    --r-s: 6px;
    --gap: 12px;
    /* отступы меняются ступенькой на 768, а не с каждым пикселем ширины:
       раньше clamp(12px, 3vw, 22px) сдвигал все края при любом растягивании окна */
    --pad: 16px;
    /* общая рамка: шапка, содержимое и подвал стоят на одной линии; шире 1368 px
       страница не растягивается, а встаёт по центру (как у образца владельца) */
    --wrap: 1320px;
    --gutter: max(var(--pad), calc((100% - var(--wrap)) / 2));
    --card-pad: 13px;
    --hover-shadow: 0 10px 26px -14px rgba(15, 30, 43, .35);

    --bg: #F4F8FC;
    --surface: #FFFFFF;
    --surface-2: #E9F1F8;
    --ink: #0F1E2B;
    --ink-2: #4A6070;
    /* вспомогательный текст: был #8299A9 (2,8 : 1 — бледно, не по норме) */
    --ink-3: #5E7384;
    --line: #D9E5EE;
    --line-2: #C1D3E0;
    --brand: #2E90DA;
    --brand-soft: #DCEEFB;
    --brand-ink: #1B6EAE;
    /* заливки под белый текст: в светлой теме совпадают с фирменными,
       в тёмной — темнее, иначе белые надписи на светлом голубом не читались */
    --brand-fill: #277BBB;
    --brand-fill-2: #1F6FAD;
    --hot-fill: #C45425;
    /* оранжевый для надписей: #E2612B на белом — 3,5 : 1, мелкий текст не читается */
    --hot-ink: #B4461A;
    --hot: #E2612B;
    --hot-soft: #FEE9DF;
    --ok: #0F7C4D;
    --ok-soft: #DEF3EA;
    --ok-fill: #108754;
    --warn: #9A6A08;
    --no-stock: #D32F2F; /* «Немає в наявності» — красным, как просил владелец; контраст с белым 5:1 */
    --warn-soft: #FBF0D8;
  }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .shop {
      --brand-fill: #277BBB;
      --brand-fill-2: #1F6FAD;
      --hot-fill: #C45425;
      --bg: #0B1620;
      --surface: #13222F;
      --surface-2: #1B3040;
      --ink: #E9F2F9;
      --ink-2: #9DB4C4;
      --ink-3: #8499A7;
      --line: #23394B;
      --line-2: #31495D;
      --brand: #56AEF0;
      --brand-soft: #12344B;
      --brand-ink: #8CCAF8;
      --hot: #FF8F62;
      --hot-ink: #FF8F62;
      --hot-soft: #3A241A;
      --ok: #3FCB8E;
      --ok-soft: #0F3529;
      --warn: #E3B255;
      --no-stock: #FF6B6B;
      --warn-soft: #322815;
      --hover-shadow: 0 10px 26px -14px rgba(0, 0, 0, .7);
    }
}
:root[data-theme="dark"] .shop {
    --brand-fill: #277BBB;
    --brand-fill-2: #1F6FAD;
    --hot-fill: #C45425;
    --bg: #0B1620;
    --surface: #13222F;
    --surface-2: #1B3040;
    --ink: #E9F2F9;
    --ink-2: #9DB4C4;
    --ink-3: #8499A7;
    --line: #23394B;
    --line-2: #31495D;
    --brand: #56AEF0;
    --brand-soft: #12344B;
    --brand-ink: #8CCAF8;
    --hot: #FF8F62;
    --hot-ink: #FF8F62;
    --hot-soft: #3A241A;
    --ok: #3FCB8E;
    --ok-soft: #0F3529;
    --warn: #E3B255;
    --no-stock: #FF6B6B;
    --warn-soft: #322815;
    --hover-shadow: 0 10px 26px -14px rgba(0, 0, 0, .7);
  }
/* ============ движение: без него интерфейс кажется картонным ============ */
  :root {
    --ease: cubic-bezier(.22, .68, .24, 1);
    --t-fast: .13s;
    --t: .22s;
    --t-slow: .32s;
  }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); }
}
@keyframes slideUp { from { transform: translateY(100%); }
}
* { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--head-bottom, 80px) + 12px); scrollbar-gutter: stable; }
/* якорные переходы не прячутся под залипшей шапкой */
  body {
    margin: 0; background: var(--page-bg); color: var(--page-ink);
    font-family: "Onest", -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased;
    /* колонкой во всю высоту окна: на короткой странице подвал не висит посередине */
    display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh;
  }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--page-accent); outline-offset: 2px; border-radius: 4px; }
/* Внутри контейнеров с обрезкой (поиск, меню, полоса категорий) рамка фокуса
   рисуется внутрь: иначе её срезает край контейнера и при работе
   с клавиатуры не видно, где находишься. */
.s-search :focus-visible, .s-nav a:focus-visible, .mp-sub a:focus-visible,
.mp-cat > .mp-sum:focus-visible, .mp-cat-plain:focus-visible, .mp-link:focus-visible,
.gthumb:focus-visible, .ptab:focus-visible, .subcats a:focus-visible, .cats .cat:focus-visible { outline-offset: -2px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.scroll-x { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.scroll-x::-webkit-scrollbar { display: none; }
/* overflow: clip, а не hidden — hidden создаёт контейнер прокрутки и ломает position:sticky
     у плавающей кнопки мессенджеров и полосы покупки на карточке товара */
  .frame { border: 1px solid var(--page-line); border-radius: 12px; overflow: clip; background: var(--page-surface); }
/* ============ компоненты магазина ============ */
  .shop { position: relative; background: var(--bg); color: var(--ink); font-family: var(--font-b); font-size: 14.5px; accent-color: var(--brand); }
@media (min-width: 768px) { .shop { --pad: 24px; --gap: 16px; } }
.shop h1, .shop h2, .shop h3, .shop h4 { font-family: var(--font-d); font-weight: 700; letter-spacing: -.03em; margin: 0; text-wrap: balance; }
.lbl { font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
/* ============ шапка: три режима ============
   телефон (<768), планшет (768–991), компьютер (≥992). Каждый режим собран из деталей
   постоянного размера и одной резиновой — поиска. Раскладка задана сеткой с именованными
   областями: раньше flex-wrap сам решал, что переносить, и на промежуточных ширинах
   иконки оставались одни на строке, а поиск обрезался. */

/* ярус 1 — тонкая информационная полоса; не залипает, уезжает при прокрутке */
  .s-util { display: flex; gap: 10px 18px; align-items: center; padding: 7px var(--gutter); background: var(--surface-2); border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--ink-2); }
.su-links { display: none; gap: 18px; flex-wrap: wrap; }
.su-links a { color: var(--ink-2); text-decoration: none; }
.su-links a:hover { color: var(--brand); }
.su-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.su-phone { display: flex; align-items: center; gap: 7px; font-weight: 700; color: var(--ink); text-decoration: none; white-space: nowrap; }
.su-phone svg { width: 15px; height: 15px; color: var(--brand); }
.su-call { display: none; color: var(--brand-ink); text-decoration: none; font-weight: 600; border-bottom: 1px dashed currentColor; white-space: nowrap; }
.su-theme { width: 28px; height: 28px; border-radius: 7px; border: 1px solid var(--line); background: var(--surface); display: grid; place-items: center; color: var(--ink-2); flex: none; }
.su-theme svg { width: 15px; height: 15px; }
.su-theme:hover { color: var(--brand); border-color: var(--brand); }
.s-util .lang { display: flex; gap: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 2px; flex: none; }
.s-util .lang b { background: var(--brand-fill); color: #fff; border-radius: 999px; padding: 1px 9px; font-size: 11px; }
.s-util .lang i { padding: 1px 9px; font-style: normal; font-size: 11px; color: var(--ink-3); }
@media (min-width: 768px) { .su-call { display: inline; } }
@media (max-width: 767.98px) {
    .s-util { padding-block: 0; }
    .s-util .lang, .s-util .su-theme { display: none; }
    .su-phone { padding-block: 9px; }
}
@media (min-width: 992px) { .su-links { display: flex; } }

/* ярус 2 — шапка. Телефон: [каталог][логотип] … [иконки], поиск отдельной строкой */
.s-head { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto;
    grid-template-areas: "burger logo . acts" "search search search search";
    align-items: center; gap: 8px 10px; padding: 8px var(--gutter) 10px;
    background: var(--surface); border-bottom: 1px solid var(--line); }
/* логотип владельца — наклейка почти 1,7 : 1: высота ступеньками, а не с каждым пикселем окна */
.s-logo { grid-area: logo; display: flex; align-items: center; min-width: 0; text-decoration: none; color: inherit; }
.s-logo img { display: block; height: 42px; width: auto; }
.s-search { grid-area: search; display: flex; min-width: 0; border: 1.5px solid var(--line-2); border-radius: var(--r); overflow: hidden; background: var(--bg); }
/* 16 px на телефоне обязательно: при меньшем шрифте iPhone сам увеличивает страницу при нажатии на поле */
.s-search input { flex: 1; border: 0; background: none; padding: 10px 13px; font: inherit; font-size: 16px; color: var(--ink); min-width: 0; }
.s-search input::placeholder { color: var(--ink-3); }
.s-search button { border: 0; background: var(--brand-fill); color: #fff; padding: 0 16px; font-weight: 600; font-size: 13.5px; flex: none; }
/* иконки: на телефоне и планшете без подписей, 44×44 — удобная цель для пальца */
.s-acts { grid-area: acts; display: flex; gap: 2px; align-items: stretch; }
.s-act { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    min-width: 44px; height: 44px; padding: 0; border-radius: var(--r); color: var(--ink-2); text-decoration: none;
    font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.s-act > span { display: none; }
.s-act svg { width: 22px; height: 22px; }
.s-act:hover { background: var(--surface-2); color: var(--brand); }
.s-act .b { position: absolute; top: 1px; right: 1px; background: var(--hot-fill); color: #fff; font-style: normal; font-size: 10px; font-weight: 700; min-width: 17px; height: 17px; border-radius: 999px; display: grid; place-items: center; padding: 0 4px; }
/* кнопка каталога — залитая, самый заметный элемент шапки */
.burger { grid-area: burger; display: flex; align-items: center; justify-content: center; gap: 9px; flex: none;
    width: 44px; height: 44px; padding: 0; border: 1.5px solid var(--brand-fill); background: var(--brand-fill); color: #fff;
    border-radius: var(--r); font-weight: 700; font-size: 14px; }
.burger svg { width: 18px; height: 18px; }
.burger > span { display: none; }
.burger[aria-expanded="true"] { background: var(--brand-fill-2); border-color: var(--brand-fill-2); }

/* планшет: одна строка, поиск в середине тянется */
@media (min-width: 768px) {
    .s-head { grid-template-areas: "burger logo search acts"; gap: 12px; padding-block: 10px; }
    .s-logo img { height: 46px; }
    .s-search input { font-size: 14px; }
}
/* компьютер: логотип первым, у кнопки каталога и иконок — подписи */
@media (min-width: 992px) {
    .s-head { grid-template-areas: "logo burger search acts"; gap: 14px; }
    .s-logo img { height: 56px; }
    .burger { width: auto; height: 46px; padding: 0 16px; }
    .burger > span { display: inline; }
    /* невидимый мостик под кнопкой: курсор, медленно идущий вниз к списку, не закрывает его */
    .burger { position: relative; }
    .burger::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 24px; }
    .s-act { height: auto; min-width: 62px; padding: 6px 8px; }
    .s-act > span { display: inline; }
    .s-act .b { top: 2px; right: 10px; }
}

/* ярус 3 — полоса разделов, только на компьютере */
.s-nav { display: none; gap: 2px; padding: 0 var(--gutter); background: var(--surface); border-bottom: 1px solid var(--line); flex-wrap: nowrap; }
.s-nav a { padding: 11px 12px; font-size: 13.5px; color: var(--ink-2); text-decoration: none; font-weight: 500; border-bottom: 2px solid transparent; white-space: nowrap; flex: none; }
.s-nav a.on { color: var(--ink); border-bottom-color: var(--brand); font-weight: 600; }
/* строка разделов высотой ровно в одну ссылку: что не поместилось, переносится
   на вторую строку и обрезается — видны только целые названия, без обрезков */
.s-nav-list { display: flex; flex-wrap: wrap; gap: 0 2px; height: 45px; overflow: hidden; overflow: clip; flex: 1 1 auto; min-width: 0; margin-left: -12px; }

.s-nav a.hot { color: var(--hot-ink); font-weight: 600; margin-left: 8px; margin-right: -12px; }
@media (min-width: 992px) { .s-nav { display: flex; } }

/* ============ каталог ============
   Телефон и планшет: панель выезжает слева поверх затемнения, со своей прокруткой.
   Раньше это была вставка в поток страницы — после прокрутки она открывалась
   за пределами экрана. Компьютер: выпадающий список под кнопкой «Каталог»,
   подразделы всплывают сбоку. */
.menupanel { position: fixed; top: 0; bottom: 0; left: 0; z-index: 60; width: min(380px, 88vw);
    overflow-y: auto; overscroll-behavior: contain; background: var(--surface);
    padding-bottom: env(safe-area-inset-bottom, 0px); box-shadow: 18px 0 40px -20px rgba(6, 12, 18, .5);
    transform: translateX(-100%); visibility: hidden;
    /* видимость: при открытии включается сразу (иначе на крестик нельзя поставить фокус),
       при закрытии выключается только после того, как панель уехала */
    transition: transform .26s var(--ease), visibility 0s linear .26s; }
.menupanel.open { transform: none; visibility: visible; transition: transform .26s var(--ease), visibility 0s; }
.menupanel:not(.open) { pointer-events: none; }
.mp-scrim { position: fixed; inset: 0; z-index: 59; background: rgba(6, 12, 18, .45); opacity: 0; visibility: hidden;
    transition: opacity .26s var(--ease), visibility .26s linear; }
.menupanel.open + .mp-scrim { opacity: 1; visibility: visible; }
html.menu-open { overflow: hidden; }
@media (max-width: 991.98px) { .menupanel { scroll-padding-top: 64px; } }
/* смена режима каталога при растягивании окна — без анимации */
.menupanel.no-anim, .menupanel.no-anim + .mp-scrim { transition: none !important; }
.mp-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between;
    padding: 6px 6px 6px var(--pad); background: var(--surface); border-bottom: 1px solid var(--line); }
.mp-head b { font-family: var(--font-d); font-size: 16px; }
.mp-close { width: 44px; height: 44px; border: 0; background: none; border-radius: var(--r); display: grid; place-items: center; color: var(--ink-2); }
.mp-close svg { width: 22px; height: 22px; }
.mp-close:hover { background: var(--surface-2); color: var(--ink); }
.mp-sec { border-top: 1px solid var(--line); padding-bottom: 8px; }
.mp-head + .mp-sec { border-top: 0; }
.mp-t { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; padding: 11px var(--pad) 5px; }
.mp-cat > .mp-sum, .mp-cat-plain { display: flex; align-items: center; gap: 11px; min-height: 48px; padding: 7px var(--pad); cursor: pointer; list-style: none; text-decoration: none; color: inherit; min-width: 0; }
.mp-cat > .mp-sum { width: 100%; background: none; border: 0; font: inherit; text-align: left; }
.mp-cat > .mp-sum:hover, .mp-cat-plain:hover { background: var(--surface-2); }
.mp-cat .ic, .mp-cat-plain .ic { width: 32px; height: 32px; border-radius: 7px; background: var(--photo-bg); display: grid; place-items: center; flex: none; }
.mp-cat .ic svg, .mp-cat-plain .ic svg { width: 25px; height: 25px; }
/* длинные названия — в две строки, а не обрезка многоточием */
.mp-cat b, .mp-cat-plain b { font-size: 13.8px; font-weight: 600; line-height: 1.25; min-width: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mp-cat .n, .mp-cat-plain .n { margin-left: auto; font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; flex: none; }
.mp-cat-plain.hot b { color: var(--hot); }
.chev { width: 16px; height: 16px; color: var(--ink-3); flex: none; transition: transform .16s ease; }
.mp-cat.open .chev { transform: rotate(180deg); }
/* гармошка управляется классом, а не встроенным поведением <details>:
     часть движков закрытое содержимое не скрывает. Своей прокрутки у подсписка нет —
     листается вся панель, без прокрутки внутри прокрутки */
  .mp-sub { display: grid; max-height: 0; overflow: hidden; opacity: 0; visibility: hidden;
    padding: 0 var(--pad) 0 calc(var(--pad) + 43px);
    transition: max-height var(--t-slow) var(--ease), opacity var(--t) var(--ease), padding-bottom var(--t) var(--ease), visibility 0s linear var(--t-slow); }
.mp-cat.open .mp-sub { max-height: 1600px; opacity: 1; visibility: visible; padding-bottom: 8px;
    transition: max-height var(--t-slow) var(--ease), opacity var(--t) var(--ease), padding-bottom var(--t) var(--ease), visibility 0s; }
.mp-sub a { display: flex; align-items: baseline; gap: 10px; padding: 9px 0; font-size: 13.5px; color: var(--ink-2); text-decoration: none; }
.mp-sub a i { margin-left: auto; font-style: normal; font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.mp-sub a.all { color: var(--brand); font-weight: 600; }
.mp-link { display: flex; align-items: center; gap: 11px; min-height: 44px; padding: 8px var(--pad); font-size: 13.8px; color: var(--ink); text-decoration: none; }
.mp-link svg { width: 19px; height: 19px; color: var(--ink-3); flex: none; }
.mp-link:hover { background: var(--surface-2); }
.mp-foot { display: flex; gap: 10px 14px; align-items: center; flex-wrap: wrap; padding: 12px var(--pad) 14px; border-top: 1px solid var(--line); background: var(--surface-2); font-size: 12.5px; color: var(--ink-2); }
.mp-foot > b { font-size: 14.5px; color: var(--ink); }
.mp-foot .lang { margin-left: auto; display: flex; gap: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 2px; }
.mp-foot .lang b { display: block; background: var(--brand-fill); color: #fff; border-radius: 999px; padding: 12px 15px; font-size: 12.5px; line-height: 1.2; }
.mp-foot .lang i { display: block; padding: 12px 15px; line-height: 1.2; font-style: normal; font-size: 12.5px; color: var(--ink-3); }
.mp-foot .su-theme { width: 44px; height: 44px; }
.mp-foot .su-phone { padding-block: 13px; }

/* ============ каталог на компьютере ============ */
@media (min-width: 992px) {
    /* под кнопкой «Каталог»: отступ сверху и слева меряет скрипт — высота шапки
       и место кнопки зависят от ширины окна */
    .menupanel { top: var(--head-bottom, 104px); bottom: auto; left: var(--menu-left, 24px); z-index: 40; width: 360px;
        overflow: visible; padding-bottom: 0; opacity: 0; transform: translateY(-8px);
        border: 1px solid var(--line-2); border-radius: 0 0 var(--r) var(--r);
        box-shadow: 0 22px 44px -20px rgba(15, 30, 43, .5);
        transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s linear; }
    .menupanel.open { opacity: 1; transform: none;
        transition: opacity .18s var(--ease), transform .18s var(--ease), visibility 0s; }
    .mp-scrim, .mp-head, .mp-info, .mp-t { display: none; }
    /* список не длиннее экрана и листается сам: на ноутбуке с высотой 768 px
       нижние разделы раньше уходили за край и были недоступны */
    .mp-sec { max-height: calc(100vh - var(--head-bottom, 104px) - 16px); max-height: calc(100dvh - var(--head-bottom, 104px) - 16px);
        overflow-y: auto; overscroll-behavior: contain; border-top: 0; padding: 6px 0; }
    .mp-cat > .mp-sum { min-height: 44px; padding: 7px 17px; gap: 11px; }
    .mp-cat .ic { width: 28px; height: 28px; border-radius: 7px; }
    .mp-cat .ic svg { width: 23px; height: 23px; }
    .mp-cat b { font-size: 14.5px; }
    .mp-cat .n { font-size: 12.5px; }
    .mp-cat > .mp-sum:hover { background: var(--brand-soft); color: var(--brand-ink); }
    .chev, .mp-cat.open .chev { width: 14px; height: 14px; transform: rotate(-90deg); }
    /* всплывающий блок подразделов крепится к самой панели, а не к строке:
       начинается вровень с её верхом и тоже не длиннее экрана. Прокрутка списка
       его не обрезает — точка отсчёта у него панель, а не прокручиваемый список */
    .mp-cat { position: static; }
    .mp-sub { position: absolute; top: -1px; left: 100%; right: auto;
        display: block; min-width: 292px; width: max-content; max-width: 460px; min-height: calc(100% + 2px);
        padding: 13px 22px 15px; margin: 0;
        background: var(--surface); border: 1px solid var(--line-2);
        border-left: 0; border-radius: 0 var(--r) var(--r) 0;
        box-shadow: 14px 20px 40px -18px rgba(15, 30, 43, .45); }
    /* показывает не :hover, а класс .active — его ставит скрипт с задержкой намерения,
       иначе блок подразделов переключается на каждой строке, через которую проходит курсор */
    .mp-cat .mp-sub, .mp-cat.open .mp-sub {
        max-height: calc(100vh - var(--head-bottom, 104px) - 16px); max-height: calc(100dvh - var(--head-bottom, 104px) - 16px);
        overflow-y: auto; visibility: hidden; opacity: 0; transform: translateX(-8px);
        transition: opacity .16s var(--ease), transform .16s var(--ease), visibility .16s linear; }
    /* только внутри открытой панели: видимость потомка перебивает скрытость родителя,
       и блок выбранного раздела оставался невидимой ловушкой для курсора */
    .menupanel.open .mp-cat.active .mp-sub { visibility: visible; opacity: 1; transform: none; }
    .mp-cat.active > .mp-sum { background: var(--brand-soft); color: var(--brand-ink); }
    .mp-sub a { padding: 7px 0; font-size: 13.8px; }
    .mp-sub a.all { margin-top: 4px; }
}

.s-body { padding: var(--pad) var(--gutter); flex: 1 0 auto; width: 100%; }
.hero { display: grid; gap: var(--gap); margin-bottom: var(--gap); }
.hero-main { position: relative; overflow: hidden; border-radius: 14px; padding: 20px; background: linear-gradient(126deg, var(--brand-fill-2) 0%, var(--brand-fill) 70%, color-mix(in srgb, var(--brand-fill) 85%, #fff) 100%); color: #fff; display: flex; flex-direction: column; justify-content: center; min-height: 180px; }
.hero-main .lbl { color: #fff; position: relative; }
.hero-main h1, .hero-main h3 { font-size: clamp(22px, 14px + 1.8vw, 31px); line-height: 1.07; margin: 8px 0; max-width: 17ch; position: relative; }
.hero-main p { margin: 0 0 16px; font-size: 13px; max-width: 34ch; position: relative; }
.hero-main .toy { position: absolute; right: -14px; bottom: -18px; width: 120px; height: 120px; opacity: .28; pointer-events: none; }
@media (max-width: 575.98px) { .hero-main .toy { display: none; } }
.hero-cta { align-self: flex-start; background: var(--hot-fill); color: #fff; text-decoration: none; border: 0; border-radius: var(--r); padding: 11px 20px; font-weight: 700; font-size: 13.5px; position: relative; }
.hero-side { display: grid; gap: var(--gap); }
.tile { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); padding: 14px 16px; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.tile b { font-family: var(--font-d); font-size: 14.5px; }
.tile span { font-size: 12.5px; color: var(--ink-2); }
.tile.warm { background: var(--hot-soft); border-color: color-mix(in srgb, var(--hot) 35%, transparent); }
.tile.warm b { color: var(--hot-ink); }
/* разделители — это зазор в 1 px поверх цвета линии: при любом числе колонок
   рамки не двоятся и не пропадают, как было с border-right у последнего в строке */
.strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; margin-bottom: calc(var(--gap) * 2); }
.strip > div { padding: 12px 14px; background: var(--surface); min-width: 0; display: flex; gap: 10px; align-items: center; }
.strip svg { width: 22px; height: 22px; color: var(--brand); flex: none; }
.strip b { display: block; font-size: 13px; }
.strip small { color: var(--ink-3); font-size: 11.5px; }
.row-head { display: flex; align-items: baseline; gap: 10px 14px; margin-bottom: 12px; flex-wrap: wrap; }
/* заголовки доходят до полного размера к 1000 px и дальше не растут: на компьютере
   при растягивании окна текст больше не меняет размер (у образца так же) */
.row-head h1, .page-body h1, .empty h1 { font-size: 22px; }
.row-head h3 { font-size: clamp(18px, 12.08px + 1vw, 22px); }
@media (min-width: 768px) { .row-head h1, .page-body h1, .empty h1 { font-size: 24px; } }
/* h1 у страницы должен быть один и по делу; размеры заданы на месте,
   поэтому браузерные отступы для h1 сбрасываем */
.row-head h1, .prod h1 { margin: 0; }
.row-head .found { color: var(--ink-3); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.row-head .more { margin-left: auto; font-size: 13px; color: var(--brand); font-weight: 600; text-decoration: none; white-space: nowrap; }
.sort { margin-left: auto; display: flex; align-items: center; gap: 7px; font-size: 12.5px;
    border: 1px solid var(--line-2); border-radius: var(--r); padding: 6px 10px; font-weight: 600; white-space: nowrap;
    background: var(--surface); transition: border-color var(--t) var(--ease); }
.sort:focus-within { border-color: var(--brand); }
/* у поля была своя системная рамка поверх нашей — получалась двойная обводка */
.sort select { appearance: none; -webkit-appearance: none; border: 0; background: none;
    font: inherit; color: inherit; padding: 1px 18px 1px 2px; cursor: pointer; outline: none;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                      linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: right 7px center, right 2px center;
    background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
/* на телефоне — лента с прокруткой вбок до самого края экрана, видны все разделы
   (раньше половина пряталась); с 768 — сетка 4 колонки, с 1200 — 6 */
.cats { display: grid; grid-auto-flow: column; grid-auto-columns: 144px; gap: var(--gap);
    overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter);
    padding: 3px var(--gutter) 6px; margin: -3px calc(var(--gutter) * -1) calc(var(--gap) * 2); }
.cats::-webkit-scrollbar { display: none; }
/* плитка раздела: значок сверху, название под ним на всю ширину плитки — рядом со значком
   в 4–6 колонках названию оставалось 90 px, и длинные обрезались */
.cat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 12px; display: flex; flex-direction: column; align-items: flex-start; gap: 9px; scroll-snap-align: start; text-decoration: none; color: inherit; min-width: 0; transition: border-color .15s ease, box-shadow .15s ease; }
.cat:hover { border-color: var(--brand); box-shadow: var(--hover-shadow); }
.cat .ic { width: 44px; height: 44px; border-radius: 9px; background: var(--photo-bg); display: grid; place-items: center; flex: none; }
.cat .ic svg { width: 34px; height: 34px; }
.cat-all { font: inherit; text-align: left; cursor: pointer; }
.cat-all .ic { background: var(--brand-soft); color: var(--brand); }
.cat > span:last-child { min-width: 0; }
.cat b { font-size: 13.5px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cat small { color: var(--ink-3); font-size: 11.5px; font-variant-numeric: tabular-nums; }
/* столько колонок, сколько задумано для ширины, а не «сколько влезет»: 24 товара
   на странице делятся на 2, 3 и 4 без сирот в последнем ряду */
.pgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
/* Ряд товаров с прокруткой вбок — новинки, рекомендуемые, блоки на карточке товара.
   По правилам CSS overflow-x: auto обрезает и по вертикали тоже, поэтому подъём
   карточки при наведении и её тень срезались. Отступы дают им место,
   а отрицательные поля возвращают полосу ровно туда, где она была в разметке. */
/* ширина карточки — доля ряда: видно 2,2 карточки на телефоне (край следующей
   подсказывает, что ряд листается), 3,2 — на планшете, ровно 4 и 5 — на компьютере */
.prow { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - var(--gap)) / 2.2);
    gap: var(--gap); overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x proximity; scroll-padding-inline: 3px;
    padding: 6px 3px 14px; margin: -6px -3px -8px; }
.pcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; min-width: 0; transition: border-color .15s ease, box-shadow .15s ease; }
.pcard:hover { border-color: var(--brand); box-shadow: var(--hover-shadow); }
.pshot { position: relative; aspect-ratio: 1; background: var(--photo-bg); display: grid; place-items: center; min-width: 0; }
.pshot > svg { width: 74%; height: 74%; }
.pflags { position: absolute; top: 8px; left: 8px; right: 8px; display: flex; flex-wrap: wrap; gap: 4px; align-items: flex-start; }
.flag { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 7px; border-radius: var(--r-s); }
.flag.sale { background: var(--hot-fill); color: #fff; }
.flag.new { background: var(--brand-fill); color: #fff; }
.flag.hit { background: #fff; color: #0F1E2B; border: 1px solid rgba(0, 0, 0, .12); }
.fav { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: var(--r-s); background: var(--surface); border: 1px solid var(--line); display: grid; place-items: center; color: var(--ink-3); }
.fav svg { width: 15px; height: 15px; }
/* слова переносятся по слогам, а не рвутся посередине (anywhere резал «конструк-тор» где попало) */
.pbody { padding: var(--card-pad); display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; overflow-wrap: break-word; hyphens: auto; }
.pbrand { font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
/* .shop h4 перебивал .pname, и названия шли тяжёлым заголовочным шрифтом. Три строки
   и та же высота у коротких названий — цены в ряду стоят на одной линии */
.shop .pname { font-family: var(--font-b); font-size: 13.5px; font-weight: 500; line-height: 1.34; letter-spacing: 0; margin: 0;
    text-wrap: pretty; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(3 * 1.34em); }
.pname a { color: inherit; text-decoration: none; }
.prate { font-size: 11.5px; color: var(--ink-3); }
.prate i { font-style: normal; color: var(--warn); letter-spacing: -1px; }
.stars { font-style: normal; color: var(--warn); letter-spacing: -1px; }
.stars s { text-decoration: none; opacity: .35; }
.pstock { font-size: 11.5px; font-weight: 600; color: var(--ok); }
/* «Під замовлення» — серым, «Немає в наявності» — красным (просьба владельца) */
.pstock.pre { color: var(--ink-3); }
.pstock.no { color: var(--no-stock); }
.pprice { display: flex; align-items: baseline; gap: 4px 8px; flex-wrap: wrap; margin-top: auto; padding-top: 4px; }
.pprice b { font-family: var(--font-d); font-weight: 700; font-size: 16px; white-space: nowrap; }
.pprice b.down { color: var(--hot); }
.pprice s { font-size: 12px; color: var(--ink-3); }
.pbtn { position: relative; border: 1.5px solid transparent; background: var(--brand-fill); color: #fff;
    border-radius: var(--r); padding: 9px 12px; min-height: 40px; font-size: 13px; font-weight: 600; width: 100%; }
/* место под иконку, выезжающую при наведении, нужно только там, где наведение есть */
@media (hover: hover) and (pointer: fine) { .pbtn { padding-inline: 30px; } }
.pbtn.out { white-space: normal; line-height: 1.2; }
.pbtn > span, .buy > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pbtn.out { background: none; border: 1.5px solid var(--line-2); color: var(--ink-2); }
/* ---- категория ---- */
  .crumbs { font-size: 12.5px; color: var(--ink-3); margin-bottom: 10px; display: flex; gap: 6px; flex-wrap: wrap; }
.crumbs b { color: var(--ink-2); font-weight: 500; }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--brand); }
.cat-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(var(--gap) * 1.5); align-items: start; }
.filters { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); padding: 2px 15px 14px; min-width: 0; }
.fg { padding: 13px 0; border-bottom: 1px solid var(--line); }
.fg:last-of-type { border-bottom: 0; }
.fg h5 { margin: 0 0 9px; font-family: var(--font-b); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.chk { position: relative; display: flex; align-items: center; gap: 9px; font-size: 13.5px; padding: 4px 0; color: var(--ink-2); cursor: pointer; }
/* сама галочка скрыта глазами, но не для клавиатуры: hidden убирал её из порядка Tab */
.chk input[type=checkbox] { position: absolute; left: 0; top: 50%; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.chk:has(input:focus-visible) .bx { outline: 2px solid var(--brand); outline-offset: 2px; }
.bx { width: 17px; height: 17px; border: 1.5px solid var(--line-2); border-radius: var(--r-s); flex: none; display: grid; place-items: center; font-size: 10px; color: #fff; }
.chk.on { color: var(--ink); font-weight: 600; }
.chk.on .bx { background: var(--brand-fill); border-color: var(--brand-fill); }
.chk .n { margin-left: auto; font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.fbtn { align-items: center; justify-content: center; gap: 8px; border: 1.5px solid; border-radius: var(--r); font-weight: 700; font-size: 13.5px; }
.fbtn b { background: var(--brand-fill); color: #fff; border-radius: 999px; font-size: 11px; padding: 1px 7px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.chips span { font-size: 12.5px; font-weight: 600; border: 1px solid color-mix(in srgb, var(--brand) 32%, transparent); color: var(--brand-ink); background: var(--brand-soft); border-radius: 999px; padding: 4px 11px; }
.chips span.x, .chips a.x { border-color: var(--line); color: var(--ink-3); background: none; font-weight: 500;
    text-decoration: none; transition: color var(--t) var(--ease), border-color var(--t) var(--ease); }
/* в разметке это ссылка, а правило было написано только на span — плашка оставалась голой */
.chips a.x { font-size: 12.5px; border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; }
.chips a.x:hover { color: var(--hot); border-color: var(--hot); }
.seo { margin-top: calc(var(--gap) * 1.6); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); padding: 18px 20px; }
.seo h4 { font-size: 15.5px; margin-bottom: 7px; }
.seo p { margin: 0 0 8px; font-size: 13.5px; color: var(--ink-2); max-width: 76ch; }
.seo p:last-child { margin-bottom: 0; }
/* ---- товар ---- */
  .prod { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
/* галерея: большое фото, под ним лента миниатюр — на любой ширине одинаково.
   Раньше миниатюры стояли то колонкой сбоку, то лентой снизу, и при 18 фото
   колонка сжимала их до 21 px и они налезали друг на друга */
.gal { display: grid; gap: 10px; min-width: 0; align-content: start; }
.gthumbs svg { width: 74%; height: 74%; }
.gmain { aspect-ratio: 1; border: 1px solid var(--line); border-radius: var(--r); background: var(--photo-bg); display: grid; place-items: center; }
.gmain svg { width: 68%; height: 68%; }
.prod h1, .prod h2 { font-size: 20px; line-height: 1.2; margin-bottom: 10px; }
.pmeta { display: flex; gap: 8px 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-3); margin-bottom: 14px; font-variant-numeric: tabular-nums; }
.buybox { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); padding: 16px; margin-bottom: 12px; }
.bprice { display: flex; align-items: baseline; gap: 6px 10px; flex-wrap: wrap; margin-bottom: 4px; }
.bprice .big { font-family: var(--font-d); font-weight: 800; font-size: 28px; color: var(--hot); line-height: 1; }
.bprice s { font-size: 15px; color: var(--ink-3); }
.bprice .save { background: var(--hot-soft); color: var(--hot); font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.opt-row { margin: 14px 0 0; }
.opt-row h5 { margin: 0 0 8px; font-family: var(--font-b); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.opts { display: flex; gap: 7px; flex-wrap: wrap; }
.opt { border: 1.5px solid var(--line-2); background: var(--bg); border-radius: var(--r-s); padding: 7px 13px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.opt.on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-ink); }
.opt.off { opacity: .45; text-decoration: line-through; }
.bacts { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.bacts .buy { flex: 1 1 190px; background: var(--hot-fill); color: #fff; border: 0; border-radius: var(--r); padding: 13px 20px; font-weight: 700; font-size: 14px; }
.bacts .alt { flex: 1 1 140px; border: 1.5px solid var(--line-2); background: var(--surface); border-radius: var(--r); padding: 13px 16px; font-weight: 600; font-size: 13.5px; }
.ship { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.ship > div { background: var(--surface); padding: 12px 15px; display: flex; flex-wrap: wrap; gap: 4px 11px; align-items: center; font-size: 13.5px; min-width: 0; }
.ship svg { width: 20px; height: 20px; color: var(--brand); flex: none; }
.ship b { display: block; font-size: 13.5px; }
.ship small { color: var(--ink-3); font-size: 12px; }
.ship .cost { margin-left: auto; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ptabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-top: 24px; flex-wrap: nowrap; }
.ptab { padding: 11px 15px; font-size: 13.5px; font-weight: 600; color: var(--ink-3); border-bottom: 2px solid transparent; white-space: nowrap; flex: none; }
.specs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 30px; margin: 16px 0 0; max-width: 960px; }
.specs > div { display: flex; gap: 10px; align-items: baseline; padding: 9px 0; border-bottom: 1px dashed var(--line); font-size: 13.5px; min-width: 0; }
.specs dt { color: var(--ink-3); }
.specs dd { margin: 0 0 0 auto; font-weight: 600; text-align: right; }
.stickybuy { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; gap: 10px; align-items: center;
    transform: translateY(100%); visibility: hidden;
    transition: transform .24s var(--ease), visibility 0s linear .24s; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px)); background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(8px); border-top: 1px solid var(--line); }
.stickybuy .p { font-family: var(--font-d); font-weight: 800; font-size: 18px; color: var(--hot-ink); white-space: nowrap; }
.stickybuy.on { transform: none; visibility: visible; transition: transform .24s var(--ease), visibility 0s; }
.stickybuy form { margin-left: auto; }
.stickybuy .buy { width: auto; flex: none; padding: 11px 20px; font-size: 13.5px; }
.stickybuy .buy .ic { display: none; }
/* ---- админка ---- */
  .adm { display: grid; grid-template-columns: 216px minmax(0, 1fr); min-height: 560px; }
.adm-side { background: var(--surface); border-right: 1px solid var(--line); padding: 12px 9px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.adm-logo { display: flex; align-items: center; gap: 8px; padding: 6px 8px 14px; font-family: var(--font-d); font-weight: 800; font-size: 14.5px; letter-spacing: -.04em; }
.adm-logo svg { width: 24px; height: 24px; color: var(--brand); }
.adm-grp { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; padding: 13px 9px 4px; }
.adm-link { display: flex; align-items: center; gap: 9px; padding: 8px 9px; border-radius: var(--r-s); font-size: 13.2px; color: var(--ink-2); font-weight: 500; text-decoration: none; white-space: nowrap; }
.adm-link.on { background: var(--brand); color: #fff; font-weight: 600; }
.adm-link .badge { margin-left: auto; background: var(--hot); color: #fff; font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; }
.adm-link.on .badge { background: rgba(255, 255, 255, .3); }
.adm-main { min-width: 0; }
.adm-top { display: flex; gap: 10px; align-items: center; padding: 11px var(--pad); background: var(--surface); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.adm-top h3 { font-size: 16px; }
.adm-top .sr { flex: 1 1 170px; border: 1px solid var(--line-2); border-radius: var(--r); padding: 8px 11px; font-size: 12.5px; color: var(--ink-3); background: var(--bg); min-width: 0; }
.adm-top .add { background: var(--brand); color: #fff; border: 0; border-radius: var(--r); padding: 8px 13px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.adm-body { padding: var(--pad); display: grid; gap: var(--gap); }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 155px), 1fr)); gap: var(--gap); }
.kpi { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); padding: 12px 14px; min-width: 0; }
.kpi .lbl { display: block; margin-bottom: 5px; }
.kpi b { font-family: var(--font-d); font-weight: 700; font-size: clamp(18px, 3vw, 22px); display: block; line-height: 1.12; font-variant-numeric: tabular-nums; }
.kpi small { font-size: 11.5px; font-weight: 600; color: var(--ok); }
.kpi.warn { border-color: color-mix(in srgb, var(--warn) 45%, transparent); background: var(--warn-soft); }
.kpi.warn b, .kpi.warn .lbl, .kpi.warn small { color: var(--warn); }
.panel { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); overflow: hidden; }
.panel-bar { display: flex; gap: 8px; align-items: center; padding: 10px 13px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.panel-bar h4 { font-size: 14px; }
.qf { display: flex; gap: 5px; margin-left: auto; flex-wrap: wrap; }
.qf span { font-size: 11.5px; font-weight: 600; border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; color: var(--ink-2); white-space: nowrap; }
.qf span.w { border-color: color-mix(in srgb, var(--warn) 45%, transparent); color: var(--warn); background: var(--warn-soft); }
.bulk { display: flex; gap: 7px; align-items: center; padding: 9px 13px; background: var(--brand-soft); border-bottom: 1px solid color-mix(in srgb, var(--brand) 30%, transparent); font-size: 12.5px; color: var(--brand-ink); flex-wrap: wrap; }
.bulk button { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-s); padding: 5px 10px; font-size: 12px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
table.t { width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 760px; }
.t th { text-align: left; padding: 8px 11px; background: var(--surface-2); border-bottom: 1px solid var(--line); font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; white-space: nowrap; }
.t td { padding: 8px 11px; border-bottom: 1px solid var(--line); }
.t tr.on td { background: var(--brand-soft); }
.t .sh { width: 36px; height: 36px; background: var(--photo-bg); border-radius: var(--r-s); display: grid; place-items: center; }
.t .sh svg { width: 28px; height: 28px; }
.t .nm { font-weight: 600; display: block; }
.t .sb { color: var(--ink-3); font-size: 11px; }
.t .num { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.st { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.st.ok { background: var(--ok-soft); color: var(--ok); }
.st.low { background: var(--warn-soft); color: var(--warn); }
.st.no { background: var(--hot-soft); color: var(--hot); }
.st.off { background: var(--surface-2); color: var(--ink-3); }
.imp { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--gap); }
.steps { display: flex; gap: 6px; flex-wrap: wrap; font-size: 12.5px; }
.step { display: flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); color: var(--ink-3); font-weight: 600; }
.step i { font-style: normal; width: 17px; height: 17px; border-radius: 50%; background: var(--surface-2); color: var(--ink-2); display: grid; place-items: center; font-size: 10px; font-weight: 700; }
.step.done { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 35%, transparent); color: var(--ok); }
.step.done i { background: var(--ok); color: #fff; }
.step.now { background: var(--brand); border-color: var(--brand); color: #fff; }
.step.now i { background: rgba(255, 255, 255, .3); color: #fff; }
.maprow { display: grid; grid-template-columns: minmax(0, 1fr) 16px minmax(0, 1fr); gap: 8px; align-items: center; padding: 7px 0; border-bottom: 1px dashed var(--line); font-size: 12.5px; }
.maprow .from { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-s); padding: 6px 9px; font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.maprow .ar { color: var(--ink-3); text-align: center; }
.maprow .to { border: 1.5px solid var(--brand); background: var(--brand-soft); color: var(--brand-ink); border-radius: var(--r-s); padding: 6px 9px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.maprow .to.skip { border-color: var(--line-2); background: var(--bg); color: var(--ink-3); font-weight: 500; }
.log { display: grid; gap: 7px; font-size: 12.5px; }
.log > div { display: flex; gap: 9px; align-items: baseline; padding-bottom: 7px; border-bottom: 1px dashed var(--line); flex-wrap: wrap; }
.log time { color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.log b.ok { color: var(--ok); }
.log b.er { color: var(--hot); }
/* ---------- плавающие кнопки: связь и «наверх» — по образцу владельца (promo.octemplates.net) ----------
   Компьютер: круг 70 px в 30 px от угла, «наверх» 36 px по центру над ним.
   Телефон: круг 56 px в 16 px от угла, «наверх» слева от него — обе в одной полосе у низа,
   под неё у подвала оставлен нижний отступ. Контейнер клики не ловит — только сами кнопки. */
.msgr { --fab: 56px; position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 30;
    display: flex; flex-direction: row; align-items: center; gap: 10px; pointer-events: none; }
.msgr > * { pointer-events: auto; }
.msgr-in { position: relative; }
.msgr-btn { position: relative; display: grid; place-items: center; width: var(--fab); height: var(--fab); padding: 0; border: 0; border-radius: 50%;
    background: var(--brand-fill); color: #fff; cursor: pointer; box-shadow: 0 6px 18px -6px rgba(15, 30, 43, .45);
    transition: background-color var(--t) var(--ease), transform var(--t) var(--ease); }
.msgr-btn:hover { background: var(--brand-fill-2); }
.msgr-btn:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
/* ореол: круг того же цвета расходится и тает, раз в 2 секунды */
.msgr-pulse { position: absolute; inset: 0; border-radius: 50%; background: var(--brand-fill); opacity: 0; z-index: -1;
    animation: fabPulse 2s ease-out infinite; }
@keyframes fabPulse { 0% { transform: scale(1); opacity: .5; } 100% { transform: scale(1.55); opacity: 0; } }
/* в кнопке по очереди значок чата и трубка; открыта — вместо значка подпись */
.mb-i { grid-area: 1 / 1; width: calc(var(--fab) * .4); height: calc(var(--fab) * .4); }
.mb-chat { animation: fabSwapA 6s infinite; }
.mb-phone { opacity: 0; animation: fabSwapB 6s infinite; }
@keyframes fabSwapA { 0%, 44% { opacity: 1; } 50%, 94% { opacity: 0; } 100% { opacity: 1; } }
@keyframes fabSwapB { 0%, 44% { opacity: 0; } 50%, 94% { opacity: 1; } 100% { opacity: 0; } }
.mb-t { grid-area: 1 / 1; opacity: 0; font-size: 10px; font-weight: 700; line-height: 1.15; letter-spacing: .02em; text-transform: uppercase; text-align: center; }
.msgr-btn[aria-expanded="true"] .mb-i { visibility: hidden; animation: none; }
.msgr-btn[aria-expanded="true"] .mb-t { opacity: 1; }
.msgr-btn[aria-expanded="true"] .msgr-pulse { animation: none; }
/* панель мессенджеров: над кнопкой и левее, нижний правый угол чуть заходит на кнопку */
.msgr-card { position: absolute; right: calc(var(--fab) - 10px); bottom: calc(var(--fab) - 10px); display: grid; gap: 14px; min-width: 210px;
    padding: 18px 20px; border-radius: 6px; background: var(--surface); box-shadow: 0 0 0 1px var(--line), 5px 12px 30px rgba(0, 0, 0, .35); /* кольцо-рамка: в тёмной теме панель не сливается с фоном */
    visibility: hidden; opacity: 0; transform: translateY(20px);
    transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s linear; }
.msgr-card.open { visibility: visible; opacity: 1; transform: none; }
.msgr-card a, .msgr-card button { display: flex; align-items: center; gap: 16px; padding: 0; border: 0; background: none; text-align: left; font: inherit;
    text-decoration: none; color: var(--ink); white-space: nowrap; font-size: 16px; line-height: 1.25; cursor: pointer;
    transition: color var(--t) var(--ease); }
.msgr-card a:hover, .msgr-card button:hover { color: var(--brand-ink); }
.msgr-card .mi { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none; color: #fff; }
.msgr-card .mi svg { width: 18px; height: 18px; }
.msgr-card .mi.vb { background: #7F569F; }
.msgr-card .mi.tg { background: #30A7E0; }
.msgr-card .mi.ph { background: #40BB8D; }
.msgr-card .mi.cb { background: #E9A63A; }
.msgr-card small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--ink-3); }
/* «наверх»: светлый круг, кольцо показывает, сколько страницы прокручено; стрелка покачивается */
.totop { position: relative; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%;
    background: #D6E8F7; color: #0F1E2B; cursor: pointer; box-shadow: 0 3px 10px -3px rgba(15, 30, 43, .35);
    visibility: hidden; opacity: 0; transform: scale(.6);
    transition: opacity .3s, transform .3s cubic-bezier(.34, 1.56, .64, 1), visibility .3s linear; }
.totop.on { visibility: visible; opacity: 1; transform: none; }
.totop:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
.totop-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.totop-ring circle { fill: none; stroke: #D6E8F7; stroke-width: 2; }
/* длина окружности r=16 — 100.53; сколько закрашено, задаёт скрипт (stroke-dashoffset) */
.totop-ring .totop-bar { stroke: #0F1E2B; stroke-dasharray: 100.53; stroke-dashoffset: 100.53; transition: stroke-dashoffset .15s linear; }
.totop-arrow { width: 12px; height: 16px; animation: fabUpDown 2s ease-in-out infinite; }
@keyframes fabUpDown { 0%, 100% { transform: translateY(1px); } 50% { transform: translateY(-2px); } }
@media (min-width: 768px) {
    .msgr { --fab: 70px; right: 30px; bottom: calc(30px + env(safe-area-inset-bottom, 0px)); flex-direction: column; gap: 20px; }
    .mb-t { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
    .msgr-pulse, .mb-phone, .totop-arrow { animation: none; }
    .mb-chat { animation: none; opacity: 1; }
    .mb-phone { opacity: 0; }
}
/* набор иллюстраций */
  .illos { padding: 26px 0 0; }
/* перекраска при смене темы — плавная, а не мгновенная вспышка */
  body, .shop, .frame, .fbar, .top, .s-util, .s-head, .s-nav, .s-body, .strip > div, .seo, .buybox,
  .ship > div, .panel, .panel-bar, .adm-side, .adm-top, .adm-body, .t th, .t td, .pshot, .note,
  .illo, .illo .box, .hero-main, .gmain {
    transition: background-color .28s var(--ease), border-color .28s var(--ease), color .28s var(--ease);
  }
/* ============ отклик на действия ============ */
  a, button, summary, .pcard, .cat, .tile, .chk, .opt, .chip, .s-act, .su-links a, .burger,
  .qf span, .mp-link, .mp-cat-plain, .mp-sub a, .fbtn, .bulk button, .adm-link, .ptab, .s-nav a, .pager > a,
  .sort, .kpi, .st, .bx {
    transition: background-color var(--t) var(--ease), border-color var(--t) var(--ease),
                color var(--t) var(--ease), box-shadow var(--t) var(--ease), transform var(--t) var(--ease);
  }
/* нажатие: кнопка чуть уходит вниз — на телефоне это главное ощущение «живого» интерфейса */
  button:active, .pbtn:active, .buy:active, .alt:active, .hero-cta:active, .burger:active, .fbtn:active,
  .s-act:active, .bulk button:active, .add:active, .msgr-btn:active, .totop:active,
  .mp-link:active, .mp-cat-plain:active, .opt:active, .chip:active { transform: translateY(1px) scale(.99); }
.pcard:hover { transform: translateY(-3px); }
.pcard:active { transform: translateY(-1px) scale(.995); }
.pshot { overflow: hidden; }
/* карточка обрезает содержимое, поэтому рамку фокуса рисуем внутрь,
   иначе при переходе по клавиатуре не видно, что выбрано */
.pcard a.pshot:focus-visible { outline-offset: -3px; }
.pshot > svg, .pshot img { transition: transform var(--t-slow) var(--ease); }
/* раньше зум ловил только заглушку .pshot > svg, а настоящее фото приходит как img —
   на реальном каталоге эффекта не было вообще */
.pcard:hover .pshot > svg, .pcard:hover .pshot img { transform: scale(1.06); }
.cat:hover { transform: translateY(-2px); }
.cat:active { transform: translateY(0) scale(.99); }
.tile:hover { border-color: var(--brand); }
.s-search { transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.s-search:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.s-nav a { position: relative; }
.s-nav a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px;
    background: var(--brand); transform: scaleX(0); transition: transform var(--t) var(--ease); }
.s-nav a:hover::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

.prow > .pcard { scroll-snap-align: start; }
/* ---------- подвал сайта ---------- */
/* ---------- подвал: тёмный, три блока — по образцу владельца (promo.octemplates.net) ----------
   Телефон: столбиком, ссылки в две колонки рядом. С 768 — магазин и ссылки рядом,
   ниже связь и подписка. С 1200 — три блока в ряд. */
.s-foot { --f-bg: #0F1D29; --f-ink: #E4ECF2; --f-ink-2: #A9BAC7; --f-line: #243646;
    background: var(--f-bg); color: var(--f-ink-2); padding: 36px var(--gutter) 76px; margin-top: calc(var(--gap) * 3); font-size: 14px; }
/* низ 76 px — место для плавающей кнопки «Звʼязок»: в самом конце страницы она встаёт под копирайт, а не на него */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .s-foot { --f-bg: #060E15; --f-line: #1A2A38; border-top: 1px solid var(--line); } }
:root[data-theme="dark"] .s-foot { --f-bg: #060E15; --f-line: #1A2A38; border-top: 1px solid var(--line); }
.sf-grid { display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "about" "links" "side"; }
.sf-about { grid-area: about; display: grid; gap: 18px; justify-items: start; align-content: start; min-width: 0; }
.sf-logo { justify-self: center; }
.sf-logo img { display: block; height: 64px; width: auto; }
.sf-block { min-width: 0; width: 100%; }
.shop .sf-h { display: flex; align-items: center; gap: 9px; margin: 0 0 10px; font-size: 15px; letter-spacing: 0; color: #fff; }
.sf-h svg { width: 18px; height: 18px; flex: none; color: var(--f-ink-2); }
.sf-addr { font-style: normal; display: grid; gap: 4px; line-height: 1.45; }
.sf-phone { display: inline-flex; align-items: center; gap: 9px; padding-block: 6px; color: #fff; font-weight: 700; font-size: 17px; text-decoration: none; }
.sf-phone svg { width: 18px; height: 18px; color: var(--f-ink-2); }
/* график: каждый день отдельной строкой; сегодняшний — отмечен и выделен */
.sf-hours { display: grid; margin: 0; max-width: 320px; }
.sf-hours > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 5px 0; border-bottom: 1px dashed var(--f-line); }
.sf-hours > div:last-child { border-bottom: 0; }
.sf-hours dt { color: var(--f-ink-2); }
.sf-hours dd { margin: 0; color: var(--f-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sf-hours .today dt, .sf-hours .today dd { color: #fff; font-weight: 700; }
.sf-hours .today dt::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%;
    background: #3FCB8E; vertical-align: 1px; }
.sf-links { grid-area: links; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 20px; align-content: start; min-width: 0; }
.sf-links nav { display: flex; flex-direction: column; min-width: 0; }
.sf-links a, .sf-social a { align-self: flex-start; padding-block: 5px; font-size: 14px; color: var(--f-ink);
    text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--f-ink) 35%, transparent); text-underline-offset: 3px;
    transition: color var(--t) var(--ease), text-decoration-color var(--t) var(--ease); }
.sf-links a:hover, .sf-social a:hover { color: #fff; text-decoration-color: #fff; }
/* платёжные системы — как у образца: плашка 48×32 с отступом 8 px, логотип шириной 32 px (высота — своя),
   чуть приглушены, при наведении ярче. Узкий телефон — ровно 4 + 3; с 400 px — все 7 в ряд */
.sf-pay { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 48px); gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; }
.sf-pay li { display: grid; place-items: center; height: 32px; padding: 8px 2px; border-radius: 4px; background: #F3F3F3; opacity: .8;
    transition: opacity var(--t) var(--ease); }
.sf-pay li:hover { opacity: 1; }
.sf-pay img { display: block; width: 32px; max-width: 100%; height: auto; }
@media (min-width: 400px) { .sf-pay { grid-template-columns: repeat(7, minmax(0, 48px)); } }
.sf-side { grid-area: side; display: grid; gap: 28px 40px; align-content: start; min-width: 0; }
.sf-copy { display: grid; gap: 4px; max-width: 260px; font-size: 13px; line-height: 1.5; color: var(--f-ink-2); }
.sf-copy p { margin: 0; }
/* подписка на рассылку — над соцсетями, как у образца */
.sf-news { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: start; min-width: 0; scroll-margin-top: 90px; }
.sf-news-intro .nw { white-space: nowrap; }
.sf-news-intro { display: flex; gap: 14px; align-items: flex-start; }
.sf-news-intro svg { width: 32px; height: 32px; flex: none; color: #8CCAF8; }
.shop .sf-news-intro h2 { margin: 0; font-family: inherit; font-size: 14px; font-weight: 400; line-height: 1.5; letter-spacing: 0; color: var(--f-ink-2); text-wrap: pretty; }
.sf-news-intro h2 > span { display: block; }
.sf-news-row { display: flex; max-width: 440px; }
.sf-news-row input { flex: 1 1 auto; min-width: 0; height: 44px; margin: 0; padding: 0 14px; border: 2px solid transparent; border-radius: 6px 0 0 6px;
    background: #fff; color: #10202C; font: inherit; font-size: 16px; }
.sf-news-row input::placeholder { color: #66788A; opacity: 1; }
.sf-news-row input[aria-invalid="true"] { border-color: #FF8F62; }
.sf-news-row button { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; margin: 0; padding: 0 16px;
    border: 0; border-radius: 0 6px 6px 0; background: var(--brand-fill); color: #fff; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
    transition: background-color var(--t) var(--ease); }
.sf-news-row button:hover { background: var(--brand-fill-2); }
.sf-news-row button:disabled { cursor: progress; opacity: .75; }
.sf-news-row button svg { width: 18px; height: 18px; flex: none; }
.sf-news-row input:focus-visible, .sf-news-row button:focus-visible { outline: 2px solid #8CCAF8; outline-offset: 2px; }
.sf-news-agree { display: flex; gap: 10px; align-items: center; min-height: 24px; margin-top: 12px; font-size: 13px; line-height: 1.45; color: var(--f-ink-2); cursor: pointer; } /* ≥ 24 px — удобная цель для пальца */
.sf-news-agree input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--brand-fill); cursor: pointer; }
.sf-news-agree input:focus-visible { outline: 2px solid #8CCAF8; outline-offset: 2px; }
.sf-news-msg { margin: 0; font-size: 13px; line-height: 1.45; color: #FF9C7A; }
.sf-news-msg:not(:empty) { margin-top: 8px; }
.sf-news-done { display: flex; gap: 10px; align-items: center; margin: 0; padding: 12px 14px; border-radius: 6px; max-width: 440px;
    background: color-mix(in srgb, #3FCB8E 16%, transparent); color: #fff; font-weight: 600; line-height: 1.4; }
.sf-news-done::before { content: ""; width: 18px; height: 18px; flex: none; border-radius: 50%; background: #3FCB8E
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m7 12.5 3.2 3.2L17 9' fill='none' stroke='%230F1D29' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
/* скрытое от людей поле-ловушка и подписи только для чтения с экрана */
.sf-hp, .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.sf-social { display: grid; grid-template-columns: repeat(2, max-content); gap: 4px 28px; margin: 0; padding: 0; list-style: none; }
.sf-social a { display: inline-flex; align-items: center; gap: 10px; }
.sf-social svg { width: 20px; height: 20px; flex: none; }
.sf-social .vb { color: #A597FF; }
.sf-social .tg { color: #45B4EA; }
.sf-social .ph { color: #3FCB8E; }
.sf-links a:focus-visible, .sf-social a:focus-visible, .sf-phone:focus-visible, .sf-logo:focus-visible { outline-color: #fff; }
@media (min-width: 768px) {
    .sf-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); grid-template-areas: "about links" "side side"; gap: 36px 40px; }
    .sf-logo { justify-self: start; }
    /* ряд связи: слева соцсети (под магазином), справа подписка (под ссылками) — колонки те же, что выше */
    .sf-side { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); grid-template-areas: "contact news" "copy news"; }
    .sf-copy { grid-area: copy; }
    .sf-news { grid-area: news; }
    .sf-contact { grid-area: contact; }
    .sf-news-row input { font-size: 15px; }
}
@media (min-width: 1200px) {
    /* три блока в ряд; колонка ссылок ≥ 384 px — ровно 7 плашек оплаты в ряд, как у образца */
    .sf-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1.05fr); grid-template-areas: "about links side"; }
    /* подпись — в самом низу правой колонки, на одной линии с последней строкой графика */
    .sf-side { grid-template-columns: minmax(0, 1fr); grid-template-areas: "news" "contact" "copy"; grid-template-rows: auto auto 1fr; align-content: stretch; }
    .sf-copy { align-self: end; }
}
.lang a { text-decoration: none; }
.lang a.on b { background: var(--brand-fill); color: #fff; }

/* ---------- корзина и оформление ---------- */
.cart-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(var(--gap) * 1.5); align-items: start; }
.cart-items, .checkout-main { display: grid; gap: var(--gap); min-width: 0; }
/* телефон: фото слева, справа название с крестиком, под ним количество и сумма */
.cart-row { display: grid; grid-template-columns: 60px minmax(0, 1fr) auto; grid-template-areas: "img info del" "img qty sum"; gap: 8px 12px; align-items: center;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 14px; }
.cart-img { grid-area: img; width: 60px; height: 60px; background: var(--photo-bg); border-radius: var(--r-s); display: grid; place-items: center; align-self: start; }
.cart-info { grid-area: info; }
.cart-qty { grid-area: qty; justify-self: start; }
.cart-sum { grid-area: sum; justify-self: end; }
.cart-del-f { grid-area: del; justify-self: end; align-self: start; }
/* уже 400 px: количество — на всю ширину под фото и названием. Иначе на 320 px четырёхзначная
   сумма («3 070 ₴») наезжала на кнопку «+» */
@media (max-width: 399.98px) {
    .cart-row { grid-template-areas: "img info del" "qty qty sum"; }
}
.cart-img svg { width: 80%; height: 80%; }
.cart-info { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cart-info a { font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: none; }
.cart-info small { color: var(--ink-3); font-size: 12px; }
.cart-qty { display: flex; align-items: center; gap: 2px; border: 1px solid var(--line-2); border-radius: var(--r-s); }
.cart-qty button { width: 40px; height: 40px; border: 0; background: none; font-size: 17px; color: var(--ink-2); }
.cart-qty button:hover { background: var(--surface-2); color: var(--brand); }
.cart-qty span { min-width: 30px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.cart-sum { font-family: var(--font-d); font-weight: 700; font-size: 16px; white-space: nowrap; }
.cart-del { border: 0; background: none; color: var(--ink-3); font-size: 15px; width: 40px; height: 40px; border-radius: var(--r-s); }
.cart-del:hover { color: var(--hot); }
.cart-total { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; display: grid; gap: 9px; }
.ct-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; color: var(--ink-2); }
.ct-row span { min-width: 0; }
.ct-row b { flex: none; white-space: nowrap; }
.ct-row i { font-style: normal; color: var(--ink-3); white-space: nowrap; }
.ct-row b { color: var(--ink); }
.ct-sum { border-top: 1px solid var(--line); padding-top: 9px; font-size: 15px; }
.ct-sum b { font-family: var(--font-d); font-size: 19px; }
.co-block { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; }
.co-block h4 { font-family: var(--font-d); font-size: 15.5px; margin: 0 0 12px; }
.co-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: end; }
.co-grid label, .co-block textarea { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: var(--ink-2); }
.co-grid input, .co-block textarea { border: 1.5px solid var(--line-2); border-radius: var(--r-s); padding: 9px 11px;
    font: inherit; font-size: 16px; color: var(--ink); background: var(--bg); width: 100%; }
@media (min-width: 768px) { .co-grid input, .co-block textarea { font-size: 14px; } }
/* outline: none здесь убирал единственный признак фокуса — при заполнении
   заказа с клавиатуры не было видно, в каком поле находишься */
.co-grid input:focus-visible, .co-block textarea:focus-visible { border-color: var(--brand);
    outline: 2px solid var(--page-accent); outline-offset: 1px; }
.co-grid input:focus, .co-block textarea:focus { border-color: var(--brand); outline: none; }
.co-radio { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: var(--r-s); margin-bottom: 7px; font-size: 14px; }
.co-radio:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.co-radio b { margin-left: auto; font-variant-numeric: tabular-nums; }
.co-radio small { display: block; color: var(--ink-3); font-size: 12px; }
.co-radio:has(input:checked) small, .mp-cat.active .n { color: var(--ink-2); }
.co-radio > span { min-width: 0; flex: 1 1 180px; font-weight: 600; } /* способ доставки/оплаты — заметнее (владелец, 28.09) */
.co-radio > span small { font-weight: 400; }
.req { margin-left: 2px; color: var(--no-stock); font-weight: 600; } /* обязательное поле */
.co-label { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; font-size: 12.5px; color: var(--ink-2); }
.co-hint { font-size: 12.5px; color: var(--ink-3); margin: 8px 0 0; }

/* кнопка покупки как самостоятельный класс: в макете она была описана
   только внутри карточки товара, а нужна ещё в корзине и оформлении */
.buy { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 100%;
    background: var(--hot-fill); color: #fff; border: 1.5px solid transparent; border-radius: var(--r);
    padding: 11.5px 34px; font-weight: 700; font-size: 14px; text-decoration: none; }
.buy:hover { filter: brightness(.93); }
.alt { border: 1.5px solid var(--line-2); background: var(--surface); border-radius: var(--r);
    padding: 13px 16px; font-weight: 600; font-size: 13.5px; }

/* ---------- кнопка покупки: отклик на наведение и состояние «уже в корзине» ---------- */
.pbtn, .buy { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }

/* Иконка выезжает при наведении у правого края и НЕ участвует в потоке:
   раньше она раздвигала содержимое на 25px и надпись прыгала вбок.
   Отступы у кнопки симметричные, поэтому надпись стоит ровно по центру. */
.pbtn .ic, .buy .ic { position: absolute; right: 11px; top: 50%; width: 17px; height: 17px;
    margin-top: -8.5px; opacity: 0; transform: translateX(7px); flex: none; pointer-events: none;
    transition: opacity .18s var(--ease), transform .18s var(--ease); }
.pbtn:hover .ic, .buy:hover .ic { opacity: 1; transform: none; }

.pbtn:hover { transform: translateY(-2px); box-shadow: 0 9px 20px -9px color-mix(in srgb, var(--brand) 70%, transparent); }
.buy:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--hot) 70%, transparent); }
.pbtn:active, .buy:active { transform: translateY(1px) scale(.99); }
.pbtn.out:hover { transform: translateY(-1px); box-shadow: none; border-color: var(--brand); color: var(--brand); }

/* уже в корзине: зелёная плашка вместо призыва купить ещё раз */
.pbtn.incart, .buy.incart { background: var(--ok-soft); color: var(--ok);
    border: 1.5px solid color-mix(in srgb, var(--ok) 45%, transparent); font-weight: 700; }
.pbtn.incart .ic, .buy.incart .ic { opacity: 1; transform: none; }
.pbtn.incart:hover, .buy.incart:hover { background: var(--ok-fill); color: #fff;
    border-color: var(--ok); box-shadow: 0 9px 20px -9px color-mix(in srgb, var(--ok) 70%, transparent); }

/* короткая вспышка счётчика в шапке, когда товар добавили */
@keyframes cartPop { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
.s-act .b { animation: cartPop .35s var(--ease); }

/* ================= «живость» ================= */

/* плавный переход между страницами вместо белой вспышки */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vtOut .18s var(--ease) both; }
::view-transition-new(root) { animation: vtIn .26s var(--ease) both; }
@keyframes vtOut { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vtIn { from { opacity: 0; transform: translateY(10px); } }

/* шапка подбирается при прокрутке — страница ощущается отзывчивой */
/* при прокрутке шапка только получает тень и НЕ меняет высоту: раньше она ужималась
   и прятала верхнюю полосу, страница подпрыгивала обратно за порог, и шапка дрожала */
.s-head { position: sticky; top: 0; z-index: 30; transition: box-shadow var(--t) var(--ease); }
body.scrolled .s-head { box-shadow: 0 6px 20px -12px rgba(15, 30, 43, .45); }

/* блоки проявляются при прокрутке; класс ставит скрипт, поэтому без него всё видно */
.reveal { opacity: 0; transform: translateY(14px); }
.reveal.in { opacity: 1; transform: none; transition: opacity .45s var(--ease), transform .45s var(--ease); }

/* галочка фильтра появляется с отскоком */
.chk .bx { transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.chk:hover .bx { border-color: var(--brand); }
.chk.on .bx { animation: tick .22s var(--ease); }
@keyframes tick { 0% { transform: scale(.6); } 55% { transform: scale(1.18); } 100% { transform: scale(1); } }

/* количество в корзине: нажатие даёт отдачу */
.cart-qty button { transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.cart-qty button:active { transform: scale(.88); }
.cart-row { transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), opacity .25s var(--ease), transform .25s var(--ease); }
.cart-row:hover { border-color: var(--line-2); box-shadow: var(--hover-shadow); }
.cart-row.removing { opacity: 0; transform: translateX(-24px); }

/* строки меню и подсказки реагируют мягче */
.mp-cat-plain:hover, .mp-sum:hover { padding-left: 20px; }
.mp-cat-plain, .mp-sum { transition: padding-left var(--t) var(--ease), background-color var(--t) var(--ease), color var(--t) var(--ease); }
.su-links a { position: relative; }
.su-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
    background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--t) var(--ease); }
.su-links a:hover::after { transform: scaleX(1); }

/* всплывающее уведомление «товар в корзине» */
.toast { position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 16px); z-index: 60;
    display: flex; align-items: center; gap: 10px; padding: 11px 18px; border-radius: var(--r);
    background: var(--ink); color: var(--bg); font-weight: 600; font-size: 13.5px;
    box-shadow: 0 16px 36px -16px rgba(0, 0, 0, .6); opacity: 0; visibility: hidden;
    transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s linear; }
.toast.on { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.toast svg { width: 18px; height: 18px; color: var(--ok); }

@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; }
    @view-transition { navigation: none; }
}

/* настоящие фото товаров вместо иллюстраций.
   picture — строчный элемент и сжимается под картинку; без него img сам
   становится ребёнком рамки и растягивается на неё */
picture { display: contents; }
/* source ничего не рисует, но без picture вокруг становится отдельной ячейкой сетки */
picture > source { display: none; }
/* ячейка сетки задана явно: высота 100% у фото считается от рамки. При строке
   по содержимому высокое фото растягивало её и вылезало за рамку */
.pshot, .gmain, .gslide, .cart-img, .t .sh { grid-template: minmax(0, 1fr) / minmax(0, 1fr); }
.pshot img, .gmain img, .cart-img img, .t .sh img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pshot img { padding: 6px; }
.gmain img { padding: 12px; }

/* ---------- галерея товара: много фото ---------- */
/* та же ловушка, что и у ряда товаров: overflow-y: auto обрезает и по горизонтали,
   поэтому кольцо выбранной миниатюры и подъём при наведении срезались.
   Отступы дают им место, отрицательные поля возвращают колонку на место. */
.gthumbs { order: 2; display: grid; grid-auto-flow: column; grid-auto-columns: 64px; gap: 8px;
    overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; padding: 3px; margin: -3px; }
.gthumb { display: block; width: 100%; aspect-ratio: 1; padding: 0; background: var(--photo-bg);
    border: 1.5px solid var(--line); border-radius: var(--r-s); overflow: hidden; cursor: pointer;
    transition: border-color var(--t) var(--ease), transform var(--t) var(--ease); }
.gthumb:hover { border-color: var(--brand); transform: translateY(-1px); }
.gthumb.on { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }
.gthumb svg, .gthumb img { width: 100%; height: 100%; object-fit: contain; }
.gmain { position: relative; }
.gcount { position: absolute; right: 12px; bottom: 12px; background: color-mix(in srgb, var(--ink) 78%, transparent);
    color: var(--bg); font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px;
    font-variant-numeric: tabular-nums; }
/* кадры лежат друг на друге; показанный плавно проявляется (анимация
   срабатывает сама, когда у кадра снимают hidden) */
.gmain { touch-action: pan-y; }
.gslide { position: absolute; inset: 0; display: grid; place-items: center; animation: gslide-in .22s var(--ease); }
.gcount { z-index: 1; }
@keyframes gslide-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .gslide { animation: none; } }

/* стрелки на большом фото: на компьютере проявляются при наведении,
   на сенсорных экранах видны всегда — наведения там нет */
.gslide { cursor: zoom-in; }
.gslide:focus-visible { outline: 2px solid var(--brand); outline-offset: -4px; border-radius: var(--r); }
.garrow { position: absolute; top: 50%; z-index: 1; width: 42px; height: 42px; margin-top: -21px; padding: 0;
    display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; cursor: pointer;
    background: color-mix(in srgb, var(--surface) 90%, transparent); color: var(--ink);
    box-shadow: 0 6px 18px -8px rgba(15, 30, 43, .35); opacity: 0;
    transition: opacity var(--t) var(--ease), background var(--t) var(--ease); }
.garrow svg { width: 22px; height: 22px; }
.garrow.prev { left: 10px; }
.garrow.next { right: 10px; }
.garrow.prev svg, .lb-arrow.prev svg { transform: rotate(90deg); }
.garrow.next svg, .lb-arrow.next svg { transform: rotate(-90deg); }
.gmain:hover .garrow, .garrow:focus-visible { opacity: 1; }
.garrow:hover { background: var(--surface); }
@media (hover: none) { .garrow { opacity: 1; width: 36px; height: 36px; margin-top: -18px; } }

/* просмотр фото на весь экран */
html.lb-open { overflow: hidden; }
.lb { position: fixed; inset: 0; z-index: 100; display: grid; grid-template-rows: minmax(0, 1fr) auto;
    background: rgba(6, 12, 18, .95); color: #fff; animation: lb-in .2s var(--ease); }
@keyframes lb-in { from { opacity: 0; } }
.lb-stage { display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; min-height: 0;
    padding: calc(64px + env(safe-area-inset-top, 0px)) clamp(10px, 7vw, 96px) 10px; touch-action: pan-y; }
.lb-img { width: 100%; height: 100%; object-fit: contain; display: block; }
.lb-close, .lb-arrow { position: absolute; z-index: 2; display: grid; place-items: center; padding: 0; border: 0;
    border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer;
    transition: background var(--t) var(--ease); }
.lb-close:hover, .lb-arrow:hover { background: rgba(255, 255, 255, .24); }
.lb-close:focus-visible, .lb-arrow:focus-visible, .lb-thumb:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lb-close { top: calc(12px + env(safe-area-inset-top, 0px)); right: 12px; width: 44px; height: 44px; }
.lb-close svg { width: 24px; height: 24px; }
.lb-arrow { top: 50%; width: 52px; height: 52px; margin-top: -26px; }
.lb-arrow svg { width: 28px; height: 28px; }
.lb-arrow.prev { left: clamp(6px, 2vw, 28px); }
.lb-arrow.next { right: clamp(6px, 2vw, 28px); }
.lb-count { position: absolute; top: calc(24px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%);
    font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; opacity: .85; }
/* полоса миниатюр по центру, а при переполнении — с прокруткой с самого начала */
.lb-thumbs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: thin;
    padding: 10px 16px calc(14px + env(safe-area-inset-bottom, 0px)); }
.lb-thumbs > :first-child { margin-left: auto; }
.lb-thumbs > :last-child { margin-right: auto; }
.lb-thumb { flex: none; width: 58px; height: 58px; padding: 0; border: 2px solid transparent; border-radius: 8px;
    background: #fff; overflow: hidden; opacity: .55; cursor: pointer;
    transition: opacity var(--t) var(--ease), border-color var(--t) var(--ease); }
.lb-thumb:hover { opacity: .85; }
.lb-thumb.on { border-color: var(--brand); opacity: 1; }
.lb-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
@media (max-width: 575.98px) {
    .lb-thumbs { display: none; }
    .lb-stage { padding-inline: 0; }
    .lb-arrow { width: 40px; height: 40px; margin-top: -20px; background: rgba(0, 0, 0, .35); }
}
@media (prefers-reduced-motion: reduce) { .lb { animation: none; } }

/* ---------- длинные списки фильтров ----------
   У «Типу» больше двух сотен значений. Показываем частые, остальное по кнопке:
   иначе панель фильтров тянется на несколько экранов и ею невозможно пользоваться. */
.fg-long .chk-extra { display: none; }
.fg-long.open .chk-extra { display: flex; }
.fg-more { margin-top: 4px; padding: 5px 0; border: 0; background: none; cursor: pointer;
    font: inherit; font-size: 12.5px; font-weight: 600; color: var(--brand-ink); text-align: left;
    transition: color var(--t) var(--ease); }
.fg-more:hover { color: var(--brand-ink); }

/* ---------- состояние наведения там, где его не было ----------
   Аудит показал: у кнопки каталога, «Фильтры», «Купить в 1 клик», кнопки
   поиска и закреплённой кнопки покупки не было никакой реакции на курсор.
   Интерфейс от этого кажется неживым: часть кнопок отзывается, часть нет. */
.burger:hover { background: var(--brand-fill-2); border-color: var(--brand-fill-2); }
.fbtn:hover { border-color: var(--brand); color: var(--brand); }
.alt:hover { border-color: var(--brand); color: var(--brand); }
.hero-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .45); }
.s-search button:hover { filter: brightness(.93); }
.stickybuy button:hover { filter: brightness(.93); }
.opt:hover { border-color: var(--brand); }
.su-links a, .s-nav a, .burger, .fbtn, .alt, .hero-cta,
.s-search button, .stickybuy button, .opt {
    transition: color var(--t) var(--ease), border-color var(--t) var(--ease),
                background var(--t) var(--ease), transform var(--t) var(--ease),
                box-shadow var(--t) var(--ease), filter var(--t) var(--ease);
}a.fg-more { display: inline-block; text-decoration: none; }

/* ---------- информационные страницы ----------
   Текст читают целиком, поэтому ширина строки ограничена: длинная строка
   утомляет глаз. Таблицы — со своей прокруткой, чтобы не распирать страницу. */
.page-body { max-width: 760px; }
.page-body h1 { line-height: 1.15; margin: 0 0 18px; }
.page-text, .facts section { font-size: 15px; line-height: 1.6; color: var(--ink); }
.page-text h2, .facts h2 { font-size: 18px; line-height: 1.25; margin: 26px 0 10px; }
.page-text h3 { font-size: 16px; margin: 20px 0 8px; }
.page-text p { margin: 0 0 12px; max-width: 70ch; }
.page-text ul, .page-text ol, .facts ul { margin: 0 0 14px; padding-left: 22px; }
.page-text li, .facts li { margin-bottom: 6px; }
.page-text a { color: var(--brand); }
.page-text table { display: block; overflow-x: auto; border-collapse: collapse; margin: 0 0 16px; font-size: 14px; }
.page-text th, .page-text td { border: 1px solid var(--line); padding: 8px 12px; text-align: left; vertical-align: top; }
.page-text th { background: var(--surface-2); font-weight: 600; }
.facts { display: grid; gap: 0 28px; grid-template-columns: minmax(0, 1fr);
    border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); padding: 4px 22px 10px; margin-bottom: 22px; }
.facts h2 { margin-top: 16px; }
.facts-rule { margin: 4px 0 12px; padding: 10px 12px; border-radius: var(--r-s); background: var(--brand-soft); color: var(--ink); }
.facts-contacts { list-style: none; padding: 0 !important; }
.facts-contacts li { display: flex; flex-wrap: wrap; gap: 0 12px; align-items: baseline; } /* узко — подпись над номером, номер не рвётся */
.facts-contacts a { color: var(--brand-ink); font-weight: 600; white-space: nowrap; text-underline-offset: 3px; }
.facts-contacts li span { min-width: 112px; color: var(--ink-3); font-size: 13.5px; }

/* знак Новой Почты рядом со способом доставки */
.co-carrier { width: 22px; height: 22px; flex: none; }
.facts-np { list-style: none; display: flex; align-items: center; gap: 10px; margin-left: -22px; }
.facts-np svg { width: 20px; height: 20px; flex: none; }
.facts-hours { display: grid; margin: 0 0 14px; max-width: 360px; font-variant-numeric: tabular-nums; }
.facts-hours > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.facts-hours > div:last-child { border-bottom: 0; }
.facts-hours dt { color: var(--ink-2); }
.facts-hours dt i { font-style: normal; color: var(--ok); font-size: 13px; }
.facts-hours dd { margin: 0; white-space: nowrap; }
.facts-hours .today dt, .facts-hours .today dd { font-weight: 700; color: var(--ink); }
.facts-addr { font-style: normal; display: grid; gap: 6px; margin: 0 0 14px; }

/* ---------- фильтр цены: ползунок и поля «от/до» ----------
   Два обычных input[type=range] один поверх другого: доступны с клавиатуры
   и для программ чтения экрана. Мышь ловят только бегунки, дорожка общая.
   Отступ дорожки по краям равен половине бегунка — так заливка совпадает с ними. */
.prange { --thumb: 18px; }
@media (pointer: coarse) { .prange { --thumb: 24px; } }
.prs { position: relative; height: 28px; margin: 0 0 10px; }
.prs-track { position: absolute; left: calc(var(--thumb) / 2); right: calc(var(--thumb) / 2); top: 50%; height: 4px;
    margin-top: -2px; border-radius: 2px; background: var(--line-2); }
.prs-fill { position: absolute; top: 0; bottom: 0; border-radius: 2px; background: var(--brand); }
.prs input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0;
    background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
.prs .prs-b { z-index: 2; }
.prs input[type=range]::-webkit-slider-runnable-track { height: 100%; background: none; border: 0; }
.prs input[type=range]::-moz-range-track { background: none; border: 0; }
.prs input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; pointer-events: auto;
    width: var(--thumb); height: var(--thumb); margin-top: calc((28px - var(--thumb)) / 2); border-radius: 50%;
    background: var(--surface); border: 2px solid var(--brand); box-shadow: 0 1px 4px rgba(15, 30, 43, .28);
    cursor: grab; transition: transform var(--t) var(--ease); }
.prs input[type=range]::-moz-range-thumb { pointer-events: auto; box-sizing: border-box; width: var(--thumb); height: var(--thumb);
    border-radius: 50%; background: var(--surface); border: 2px solid var(--brand);
    box-shadow: 0 1px 4px rgba(15, 30, 43, .28); cursor: grab; }
.prs input[type=range]:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(1.15); }
.prs input[type=range]:focus { outline: none; }
.prs input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--brand-soft), 0 1px 4px rgba(15, 30, 43, .28); }
.prs input[type=range]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px var(--brand-soft); }
.prs-row { display: flex; align-items: center; gap: 5px; }
.prs-in { flex: 1 1 0; min-width: 0; height: 38px; display: flex; align-items: center; padding: 0 6px;
    border: 1px solid var(--line-2); border-radius: var(--r-s); background: var(--bg); cursor: text;
    transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.prs-in:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.prs-in input { flex: 1; min-width: 0; width: 100%; padding: 0; border: 0; background: none; outline: none;
    font: inherit; font-size: 14px; color: var(--ink); font-variant-numeric: tabular-nums; text-align: center; }
.prs-in input::placeholder { color: var(--ink-3); opacity: 1; }
.prs-dash { flex: none; color: var(--ink-3); }
.prs-go { flex: none; height: 38px; padding: 0 10px; border: 1.5px solid var(--line-2); border-radius: var(--r-s);
    background: var(--surface); color: var(--ink-2); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
    transition: background var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease); }
.prs-go:hover { border-color: var(--brand); color: var(--brand-ink); }
.prs-go.ready { background: var(--brand-fill); border-color: var(--brand-fill); color: #fff; }

/* выбранные фильтры: каждая плашка — ссылка, которая снимает именно это значение */
.chips a.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; text-decoration: none;
    border: 1px solid color-mix(in srgb, var(--brand) 32%, transparent); color: var(--brand-ink); background: var(--brand-soft);
    border-radius: 999px; padding: 4px 8px 4px 11px; transition: border-color var(--t) var(--ease), background var(--t) var(--ease); }
.chips a.chip span { font-size: 11px; opacity: .7; border: 0; padding: 0; background: none; color: inherit; border-radius: 0; }
.chips a.chip:hover { border-color: var(--brand); }
.chips a.chip:hover span { opacity: 1; }
/* ======================= АДАПТИВНАЯ РАСКЛАДКА =======================
   Одна шкала перестроек для всего сайта, от телефона вверх: 576 / 768 / 992 / 1200.
   Шире 1368 px страница не растягивается, а встаёт по центру (--wrap в токенах).
   Между границами ничего не перескакивает: колонки заданы числом, отступы и шрифты
   меняются ступенькой или доходят до предела к 1000 px. Раньше вся перестройка
   висела на одной ширине 900 px, и сдвиг окна на пиксель менял шапку, меню, фото,
   фильтры и корзину разом. Порядок здесь — от узкого к широкому, не переставлять. */

/* ---------- телефон (базовые правила, меньше 576) ---------- */
.hero-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 399.98px) {
    .hero-side { grid-template-columns: minmax(0, 1fr); }
    .strip > div { flex-direction: column; align-items: flex-start; gap: 6px; }
}
.strip > div > span { min-width: 0; }

/* строка инструментов каталога: [Фільтри] [Сортування] в одну строку */
.cat-tools { display: flex; gap: 8px; align-items: stretch; margin-bottom: var(--gap); }
.fbtn { display: flex; width: auto; flex: 1 1 0; min-height: 44px; padding: 0 12px; margin-bottom: 0;
    background: var(--surface); border-color: var(--line-2); color: var(--ink); }
.fbtn:has(b) { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-ink); }
.cat-tools .sort { flex: 1 1 0; min-width: 0; margin: 0; min-height: 44px; padding: 0; align-items: stretch; }
.cat-tools .sort select { width: 100%; min-height: 42px; padding: 0 28px 0 12px; font-size: 16px;
    background-position: right 15px center, right 10px center; }
@media (min-width: 768px) { .cat-tools .sort select { font-size: 14px; } }
.cat-empty { margin-top: 0; }
.cat-empty a { color: var(--brand); }

/* подразделы раздела — плашки: на телефоне лентой с прокруткой, на компьютере в несколько строк */
.subcats { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--gutter) * -1) var(--gap); padding: 0 var(--gutter) 2px; }
.subcats::-webkit-scrollbar { display: none; }
.subcats a { flex: none; display: inline-flex; align-items: baseline; gap: 6px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px;
    background: var(--surface); color: var(--ink); font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap;
    transition: border-color var(--t) var(--ease), color var(--t) var(--ease); }
.subcats a:hover { border-color: var(--brand); color: var(--brand-ink); }
.subcats a i { font-style: normal; font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* фильтры до 1200 px — панель, выезжающая слева, как каталог: раньше это был
   вкладыш внутри страницы, который раздвигал её и открывался под товарами */
@media (max-width: 1199.98px) {
    .filters { position: fixed; top: 0; bottom: 0; left: 0; z-index: 60; width: min(380px, 92vw); margin: 0; padding: 0;
        border: 0; border-radius: 0; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
        box-shadow: 18px 0 40px -20px rgba(6, 12, 18, .5); transform: translateX(-100%); visibility: hidden;
        transition: transform .26s var(--ease), visibility 0s linear .26s; }
    .filters.open { transform: none; visibility: visible; transition: transform .26s var(--ease), visibility 0s; }
    /* смена режима при растягивании окна — без анимации (панель не должна выезжать сама) */
    .filters.no-anim { transition: none !important; }
    .filters form { flex: 1 0 auto; padding: 0 var(--pad); }
    .filters { scroll-padding-top: 64px; scroll-padding-bottom: 84px; }
    html.filters-open { overflow: hidden; }
}
.f-scrim { position: fixed; inset: 0; z-index: 59; background: rgba(6, 12, 18, .45); opacity: 0; visibility: hidden;
    transition: opacity .26s var(--ease), visibility .26s linear; }
.filters.open + .f-scrim { opacity: 1; visibility: visible; }
.f-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between;
    padding: 6px 6px 6px var(--pad); background: var(--surface); border-bottom: 1px solid var(--line); }
.f-head b { font-family: var(--font-d); font-size: 16px; }
.f-foot { position: sticky; bottom: 0; z-index: 2; display: flex; gap: 8px; padding: 12px var(--pad) calc(12px + env(safe-area-inset-bottom, 0px));
    background: var(--surface); border-top: 1px solid var(--line); }
.f-foot .buy { flex: 1; }
.f-foot .alt { flex: none; display: inline-flex; align-items: center; text-decoration: none; color: var(--ink-2); }
.chk { min-height: 36px; }
@media (pointer: coarse) { .chk { min-height: 44px; } .prange { --thumb: 26px; } .prs-in input { font-size: 16px; } }

/* товар: колонка с названием и ценой меряет свою ширину сама — строки доставки
   переносят цену под название, когда тесно, независимо от ширины окна */
.pinfo { container-type: inline-size; min-width: 0; }
@container (max-width: 420px) { .ship .cost { flex-basis: 100%; margin-left: 31px; } }
/* галерея на телефоне — не шире 480 px и не выше примерно половины экрана */
.gal { width: min(100%, 480px); justify-self: center; }
@supports (height: 1svh) { .gal { width: min(100%, 480px, 58svh); } }
/* текущий товар в хлебных крошках на телефоне не нужен — он тут же заголовком */
@media (max-width: 575.98px) {
    .crumbs > b, .crumbs > span, .crumbs > a:not(:last-of-type) { display: none; }
    .crumbs > a:last-of-type::before { content: "‹ "; content: "‹ " / ""; }
    .crumbs > a { padding-block: 6px; }
}

/* полоса «цена + У кошик» — только на телефоне; появляется, когда кнопка
   покупки ушла с экрана, и не накрывает подвал */
@media (max-width: 767.98px) {
    .stickybuy { display: flex; }
    /* под копирайтом — полоса покупки (68 px) и над ней кнопка связи: места под обе */
    .shop:has(.stickybuy) .s-foot { padding-bottom: calc(76px + 68px + env(safe-area-inset-bottom, 0px)); }
    .shop:has(.stickybuy.on) .toast { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
    /* полоса покупки появилась — кнопки поднимаются над ней; плавно только в момент появления */
    html.msgr-anim .msgr { transition: bottom .24s var(--ease); }
    .shop:has(.stickybuy.on) .msgr { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
    /* кнопка связи в углу не должна ложиться на «Оформити» (подвал — см. его нижний отступ) */
    .shop:has(.cart-total) .s-body { padding-bottom: 76px; }
    .shop:has(.cart-total) .msgr { display: none; }
}

@media (max-width: 767.98px) and (max-height: 500px) { .s-head { position: static; } }

/* ---------- 576: три колонки товаров, подвал в две колонки ---------- */
@media (min-width: 576px) {
    .pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .prow { grid-auto-columns: calc((100% - 2 * var(--gap)) / 3.2); }
    .co-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .co-contacts > label:first-child { grid-column: 1 / -1; }
}

/* ---------- 768: планшет ---------- */
@media (min-width: 768px) {
    .hero { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); }
    .hero-side { grid-template-columns: minmax(0, 1fr); }
    .hero-main { padding: 30px; min-height: 226px; }
    .hero-main p { font-size: 14px; }
    .strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .cats { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(4, minmax(0, 1fr));
        overflow: visible; scroll-snap-type: none; padding: 0; margin: 0 0 calc(var(--gap) * 2); }
    .cat-all { display: none; }
    .pprice b { font-size: 18px; }
    .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .subcats { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; }

    /* товар: две колонки — фото и всё о покупке рядом, на первом экране планшета */
    .prod { grid-template-columns: minmax(0, 1fr) minmax(300px, 1fr); gap: 28px; align-items: start; }
    .gal { width: auto; justify-self: stretch; }
    .bprice .big { font-size: 34px; }
    .specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* корзина: строка товара в одну линию, колонки одинаковой ширины во всех строках */
    .cart-row { grid-template-columns: 74px minmax(0, 1fr) 124px 104px 40px; grid-template-areas: "img info qty sum del"; padding: 10px 14px; }
    .cart-img { width: 74px; height: 74px; align-self: center; }
    .cart-qty { justify-self: center; }
    .cart-del-f { align-self: center; }
}

/* ---------- 992: компьютер ---------- */
@media (min-width: 992px) {
    .pgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .prow { grid-auto-columns: calc((100% - 3 * var(--gap)) / 4); }
    .prod h1, .prod h2 { font-size: 24px; }
    .hero-main .toy { width: 190px; height: 190px; }
    /* оформление заказа: форма и сводка рядом уже с 992 */
    form.cart-layout { grid-template-columns: minmax(0, 1fr) 340px; }
    form.cart-layout .cart-total { position: sticky; top: calc(var(--head-bottom, 80px) + 12px); }
}

/* ---------- 1200: боковая колонка фильтров, 6 плиток разделов, 5 товаров в ленте ---------- */
@media (min-width: 1200px) {
    .cat-layout { grid-template-columns: 236px minmax(0, 1fr); }
    .fbtn, .f-head, .f-foot, .f-scrim { display: none; }
    .cat-tools { justify-content: flex-end; }
    .cat-tools .sort { flex: 0 0 auto; }
    .cats { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .prow { grid-auto-columns: calc((100% - 4 * var(--gap)) / 5); }
    .cart-layout { grid-template-columns: minmax(0, 1fr) 340px; }
    .cart-total { position: sticky; top: calc(var(--head-bottom, 80px) + 12px); }
    .prod { grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: 40px; }
}

/* стрелки у лент товаров — для мыши; пальцем ленту листают свайпом */
.rnav { display: none; margin-left: auto; gap: 6px; }
@media (hover: hover) and (pointer: fine) { .rnav.on { display: flex; } }
.rn { width: 36px; height: 36px; padding: 0; display: grid; place-items: center; border: 1px solid var(--line-2); border-radius: 50%;
    background: var(--surface); color: var(--ink-2); cursor: pointer; }
.rn svg { width: 18px; height: 18px; }
.rn.prev svg { transform: rotate(90deg); }
.rn.next svg { transform: rotate(-90deg); }
.rn:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); }
.rn:disabled { opacity: .4; cursor: default; }

/* вкладки на товаре — настоящие кнопки */
.ptab { background: none; border-width: 0 0 2px; border-style: solid; border-color: transparent; cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 600; }
.ptab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--brand); }
.ptab:hover { color: var(--ink); }
.ppanel { margin-top: 16px; }
.ppanel .specs { margin-top: 0; }
.pdesc { max-width: 78ch; font-size: 14.5px; line-height: 1.65; color: var(--ink); }
.pdesc p { margin: 0 0 12px; }
.pdesc ul, .pdesc ol { margin: 0 0 12px; padding-left: 22px; }
.pdesc h3, .pdesc h4 { font-size: 16px; margin: 18px 0 8px; }
.previews { display: grid; gap: 12px; max-width: 78ch; }
.previews article { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); padding: 14px 16px; }
.previews header { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-bottom: 6px; font-size: 13px; color: var(--ink-3); }
.previews header b { color: var(--ink); font-size: 14px; }
.previews header i { font-style: normal; color: var(--warn); letter-spacing: -1px; }
.previews p { margin: 0; font-size: 14px; }
.previews .reply { margin-top: 10px; padding: 10px 12px; border-radius: var(--r-s); background: var(--surface-2); font-size: 13.5px; }

/* страница 404 и пустые состояния */
.empty { text-align: center; padding: 40px 16px; max-width: 560px; margin: 0 auto; }
.empty h1 { margin-bottom: 10px; }
.empty p { color: var(--ink-2); margin: 0 0 18px; }
.empty .s-search { max-width: 460px; margin: 0 auto 18px; }
.empty .hero-cta { display: inline-block; }

/* нумерация страниц */
.pager { display: flex; gap: 6px; justify-content: center; align-items: center; margin-top: 22px; flex-wrap: wrap; }
.pager > a, .pager > span { min-width: 40px; height: 40px; padding: 0 8px; border-radius: var(--r-s); border: 1px solid var(--line);
    display: grid; place-items: center; font-size: 14px; font-weight: 600; background: var(--surface); color: var(--ink-2);
    font-variant-numeric: tabular-nums; text-decoration: none; }
.pager > a:hover { border-color: var(--brand); color: var(--brand); }
.pager > .on { background: var(--brand-fill); border-color: var(--brand-fill); color: #fff; }
.pager > .dots { border: 0; background: none; min-width: 20px; }
.pager > .off { opacity: .4; }
.pager .pos { display: none; border: 0; background: none; color: var(--ink-2); }
@media (max-width: 575.98px) {
    .pager > a:not(.pn), .pager > span.on, .pager > .dots { display: none; }
    .pager .pos { display: grid; }
}

/* ---------- «Обране»: сердечко на карточке и на странице товара, страница избранного ----------
   Кнопка на карточке — поверх фото в правом верхнем углу; флажки «−20% / Новинка»
   слева не заходят под неё. Закрашенное сердце — отдельный значок: у контурного
   в спрайте заливка задана атрибутом, стилями её не поменять. */
.pcard { position: relative; }
.pflags { right: 52px; }
.fav { position: absolute; top: 8px; right: 8px; z-index: 2; display: grid; place-items: center; width: 36px; height: 36px; padding: 0;
    border: 0; border-radius: 50%; background: color-mix(in srgb, var(--surface) 90%, transparent); color: var(--ink-2); cursor: pointer;
    box-shadow: 0 2px 8px -3px rgba(15, 30, 43, .35); transition: color var(--t) var(--ease), transform var(--t) var(--ease); }
.fav svg { width: 20px; height: 20px; }
.fav .h1 { display: none; }
.fav.on { color: var(--hot); }
.fav.on .h0 { display: none; }
.fav.on .h1 { display: block; }
.fav:hover { color: var(--hot); }
.fav:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.fav.pop { animation: favPop .35s var(--ease); }
@keyframes favPop { 40% { transform: scale(1.25); } }
/* на странице товара — квадратная кнопка в ряду с «У кошик» */
.bacts .bfav { position: static; flex: none; width: 48px; height: auto; min-height: 48px; border: 1.5px solid var(--line-2); border-radius: var(--r);
    background: var(--surface); box-shadow: none; }
.bacts .bfav svg { width: 22px; height: 22px; }
/* сердечко не уходит в отдельную строку: на 404–458 и 820–930 px обе кнопки ещё помещались
   в ряд, а сердечко уже нет. Теперь его место (48 + 8 px) держит правое поле соседней кнопки,
   а само сердечко встаёт в эту нишу отрицательным полем — при нехватке места строку переносит
   только вместе с кнопкой. Без контрольных точек: работает на любой ширине */
.bacts .alt { margin-right: 56px; }
.bacts .alt + .bfav { margin-left: -56px; }
.fav-state { margin: 8px 0 24px; color: var(--ink-3); }
.fav-empty > svg { display: block; width: 44px; height: 44px; margin: 0 auto 8px; color: var(--hot); }
.fav-empty h2 { margin: 0 0 10px; font-size: 20px; }
@media (prefers-reduced-motion: reduce) { .fav.pop { animation: none; } }

/* ---------- кабинет покупателя: вход, регистрация, заказы, личные данные ----------
   Поля — как в оформлении заказа; на телефоне шрифт полей 16 px (иначе iPhone
   увеличивает страницу при нажатии). */
.acc-auth { max-width: 440px; margin: 4px auto 36px; }
.acc-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 22px 18px; }
.acc-card h1 { margin: 0 0 6px; font-size: 22px; }
.acc-sub { margin: 0 0 18px; color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.acc-form { display: grid; gap: 14px; }
.acc-field { display: grid; gap: 6px; font-size: 13px; color: var(--ink-2); }
.acc-field input { width: 100%; min-width: 0; padding: 11px 12px; border: 1.5px solid var(--line-2); border-radius: var(--r-s);
    background: var(--surface); color: var(--ink); font: inherit; font-size: 16px; }
.acc-field input:focus { border-color: var(--brand); outline: none; }
.acc-field input:focus-visible { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent); }
.acc-field input[aria-invalid="true"] { border-color: var(--hot-ink); }
.acc-pass { position: relative; display: block; }
/* «показать пароль» — значок-глаз внутри поля справа (кнопка 40×40, удобно пальцем);
   пароль виден — глаз перечёркнут и синий */
.acc-pass input { padding-right: 48px; }
.acc-eye { position: absolute; top: 50%; right: 3px; transform: translateY(-50%); display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
    border: 0; border-radius: var(--r-s); background: transparent; color: var(--ink-3); cursor: pointer; }
.acc-eye svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.acc-eye .eye-slash { display: none; }
.acc-eye[aria-pressed="true"] { color: var(--brand-ink); }
.acc-eye[aria-pressed="true"] .eye-slash { display: inline; }
.acc-eye:hover { background: var(--brand-soft); color: var(--brand-ink); }
.acc-eye:focus-visible { outline-offset: -2px; }
.acc-err { color: var(--hot-ink); font-size: 12.5px; line-height: 1.4; }
.acc-hint { color: var(--ink-3); font-size: 12.5px; line-height: 1.4; margin: 0; }
.acc-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 12px; font-size: 13.5px; }
.acc-row a, .acc-alt a { color: var(--brand-ink); font-weight: 600; }
.acc-check { display: inline-flex; align-items: center; gap: 8px; min-height: 24px; color: var(--ink-2); cursor: pointer; }
.acc-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--brand-fill); }
.acc-btn { width: 100%; padding: 13px 16px; border: 0; border-radius: var(--r); background: var(--brand-fill); color: #fff;
    font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; transition: background-color var(--t) var(--ease); }
.acc-btn:hover { background: var(--brand-fill-2); }
.acc-btn-alt { background: var(--surface); color: var(--ink); border: 1.5px solid var(--line-2); }
.acc-btn-alt:hover { background: var(--surface-2); }
.acc-alt { margin: 16px 0 0; text-align: center; font-size: 14px; color: var(--ink-2); }
.acc-note { margin: 0 0 14px; padding: 10px 12px; border-radius: var(--r-s); background: color-mix(in srgb, var(--ok) 12%, transparent);
    color: var(--ink); font-size: 14px; line-height: 1.45; }
.acc-perks { display: grid; gap: 6px; margin: 18px 0 0; padding: 14px 0 0; border-top: 1px dashed var(--line); list-style: none; font-size: 13.5px; color: var(--ink-2); }
.acc-perks li::before { content: "✓"; margin-right: 8px; color: var(--ok); font-weight: 700; }
.nw { white-space: nowrap; }

.acc-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 16px; margin: 4px 0 12px; }
.acc-head h1 { margin: 0; font-size: 22px; }
.acc-hello { margin: 4px 0 0; color: var(--ink-2); font-size: 14px; }
.acc-logout { min-height: 40px; padding: 8px 14px; border: 1.5px solid var(--line-2); border-radius: var(--r-s); background: var(--surface);
    color: var(--ink-2); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.acc-logout:hover { color: var(--hot-ink); border-color: currentColor; }
.acc-tabs { display: flex; gap: 4px; margin: 0 0 18px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.acc-tabs a { flex: none; padding: 10px 12px; border-bottom: 2px solid transparent; color: var(--ink-2); font-weight: 600; font-size: 14.5px; text-decoration: none; white-space: nowrap; }
.acc-tabs a:hover { color: var(--brand-ink); }
.acc-tabs a.on { color: var(--brand-ink); border-bottom-color: var(--brand); }

.acc-orders { display: grid; gap: 10px; }
.acc-order { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; padding: 14px 16px;
    border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--ink); text-decoration: none;
    transition: border-color var(--t) var(--ease); }
.acc-order:hover { border-color: var(--brand); }
.acc-order-main, .acc-order-side { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.acc-order-main span { color: var(--ink-3); font-size: 13px; }
.acc-order-side { align-items: flex-end; }
.acc-order-side b, .acc-order-main b { font-variant-numeric: tabular-nums; }
.acc-foot { margin-top: 14px; }
.st { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
/* Надписи на плашках статуса: фирменные цвета на цветной подложке давали 4,1–4,4 : 1 — ниже нормы 4,5.
   В светлой теме надписи темнее, а подложка смешана с цветом карточки, а не прозрачная: контраст
   не зависит от того, на чём стоит плашка (не меньше 4,9 : 1). В тёмной теме прежние цвета проходят с запасом */
.shop { --st-wait-ink: #A8401A; --st-go-ink: #1A64A0; --st-ok-ink: #0B6E44; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .shop { --st-wait-ink: var(--hot-ink); --st-go-ink: var(--brand-ink); --st-ok-ink: var(--ok); }
}
:root[data-theme="dark"] .shop { --st-wait-ink: var(--hot-ink); --st-go-ink: var(--brand-ink); --st-ok-ink: var(--ok); }
.st-wait { background: color-mix(in srgb, var(--hot) 14%, var(--surface)); color: var(--st-wait-ink); }
.st-work { background: var(--brand-soft); color: var(--st-go-ink); }
.st-go { background: color-mix(in srgb, var(--brand) 20%, var(--surface)); color: var(--st-go-ink); }
.st-ok { background: color-mix(in srgb, var(--ok) 14%, var(--surface)); color: var(--st-ok-ink); }
.st-off { background: var(--surface-2); color: var(--ink-2); }

.acc-order-top { margin: 0 0 14px; }
.acc-order-top h2 { margin: 6px 0 4px; font-size: 20px; }
.acc-order-top p { margin: 0; color: var(--ink-3); font-size: 13.5px; }
.acc-back { color: var(--brand-ink); font-size: 14px; font-weight: 600; text-decoration: none; }
.acc-order-grid { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); align-items: start; }
.acc-items { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.acc-items li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding-bottom: 10px; border-bottom: 1px dashed var(--line); font-size: 14px; }
.acc-item-name small { display: block; color: var(--ink-3); font-size: 12px; }
.acc-item-qty { grid-column: 1; color: var(--ink-3); font-size: 13px; font-variant-numeric: tabular-nums; }
.acc-items b { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-variant-numeric: tabular-nums; }
.acc-total { display: flex; justify-content: space-between; margin: 12px 0 0; font-size: 16px; }
.acc-dl { display: grid; gap: 10px; margin: 0; font-size: 14px; }
.acc-dl dt { color: var(--ink-3); font-size: 12.5px; }
.acc-dl dd { margin: 2px 0 0; overflow-wrap: anywhere; }
.acc-profile { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); align-items: start; }
.acc-profile .co-block h4 { margin: 0; }
@media (min-width: 576px) {
    .acc-card { padding: 28px 30px; }
}
@media (min-width: 768px) {
    .acc-field input { font-size: 15px; }
    .acc-head h1, .acc-card h1 { font-size: 24px; }
}
@media (min-width: 992px) {
    .acc-order-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
    .acc-profile { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* вошедший покупатель — у значка кабинета маленькая зелёная точка */
.s-act[data-in]::after { content: ""; position: absolute; top: 4px; right: 6px; width: 8px; height: 8px; border-radius: 50%;
    background: var(--ok); box-shadow: 0 0 0 2px var(--surface); }
@media (min-width: 992px) { .s-act[data-in]::after { right: 16px; } }
@media (max-width: 399.98px) {
    /* три раздела кабинета помещаются в одну строку и на 320 px, без прокрутки вбок */
    .acc-tabs { gap: 0; }
    .acc-tabs a { padding: 10px 5px; font-size: 13.5px; }
}

/* ---------- заказ принят + реквизиты для оплаты переводом ---------- */
.done-page { max-width: 620px; margin: 8px auto 40px; }
.done-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 26px 18px; text-align: center; }
.done-ico { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 50%;
    background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.done-ico svg { width: 28px; height: 28px; }
.done-card h1 { margin: 0 0 8px; font-size: 22px; }
.done-card p { margin: 0 0 8px; color: var(--ink-2); line-height: 1.5; }
.done-num b, .done-sum b { color: var(--ink); font-variant-numeric: tabular-nums; }
.done-acts { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 18px; margin-top: 18px; }
.done-link { color: var(--brand-ink); font-weight: 600; }
.paydet { margin: 18px 0 0; padding: 16px; border: 1.5px solid var(--brand); border-radius: var(--r); background: var(--brand-soft); text-align: left; }
.paydet h3 { margin: 0 0 10px; font-size: 16px; }
.paydet dl { display: grid; gap: 8px; margin: 0; }
.paydet dl > div { display: grid; gap: 2px; }
.paydet dt { color: var(--ink-2); font-size: 12.5px; } /* ink-3 на голубом фоне — 4,15 : 1, ниже нормы; ink-2 — 5,5 / 6,0 */
.paydet dd { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.paydet-copy { min-height: 28px; padding: 3px 10px; border: 1px solid var(--line-2); border-radius: var(--r-s); background: var(--surface);
    color: var(--brand-ink); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.paydet-copy.done { color: var(--ok); border-color: currentColor; }
.paydet-lead { margin: 0 0 12px; font-size: 14px; line-height: 1.5; color: var(--ink); }
.paydet-note { margin: 12px 0 0 !important; font-size: 13px; color: var(--ink-2); }
.acc-order-page .paydet { margin: 0 0 14px; }
@media (min-width: 576px) {
    .done-card { padding: 32px 30px; }
    .paydet dl > div { grid-template-columns: 180px minmax(0, 1fr); align-items: baseline; gap: 12px; }
}

/* ---------- окна заявок: звонок, 1 клик, «сообщить о появлении» ----------
   Нативный <dialog>: по центру, на телефоне — почти во всю ширину, высота не больше экрана. */
.su-call { padding: 0; border: 0; border-bottom: 1px dashed currentColor; background: none; font: inherit; font-weight: 600; cursor: pointer; }
.rq { width: min(440px, calc(100% - 24px)); max-height: calc(100dvh - 24px); margin: auto; padding: 0; border: 0; border-radius: var(--r);
    background: var(--surface); color: var(--ink); box-shadow: 0 24px 60px -20px rgba(6, 12, 18, .55); overflow: auto; }
.rq::backdrop { background: rgba(6, 12, 18, .5); }
/* пока окно открыто, страница под ним стоит (класс ставит shop.js), а прокрутка внутри окна
   не перетекает на страницу. Пропавшую полосу прокрутки shop.js возмещает отступом справа у html
   и переменной --lock-bar (общей для всех панелей — раздел «блокировка прокрутки» в конце файла) */
html.rq-open { overflow: hidden; }
.rq { overscroll-behavior: contain; }
.rq[open] { animation: rqIn .22s var(--ease); }
@keyframes rqIn { from { opacity: 0; transform: translateY(12px); } }
.rq-form { position: relative; display: grid; gap: 12px; padding: 22px 18px 20px; }
.rq-form h2 { margin: 0 40px 0 0; font-size: 20px; }
.rq-sub { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.rq-product { margin: 0; padding: 10px 12px; border-radius: var(--r-s); background: var(--surface-2); font-size: 14px; line-height: 1.4; }
.rq-product span { white-space: nowrap; color: var(--hot-ink); font-weight: 700; }
.rq-product span:not(:empty)::before { content: "· "; color: var(--ink-3); font-weight: 400; }
.rq .acc-field i { font-style: normal; color: var(--ink-3); }
.rq-x { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0;
    border-radius: 50%; background: transparent; color: var(--ink-2); cursor: pointer; }
.rq-x:hover { background: var(--surface-2); color: var(--ink); }
.rq-x svg { width: 20px; height: 20px; }
.rq-msg { margin: 0; color: var(--hot-ink); font-size: 13px; line-height: 1.45; }
.rq-msg:empty { display: none; }
.rq-hot { background: var(--hot-fill); }
.rq-hot:hover { background: color-mix(in srgb, var(--hot-fill) 88%, #000); }
.rq-done { display: grid; gap: 12px; justify-items: center; padding: 28px 20px 22px; text-align: center; }
.rq-done .done-ico { margin: 0; }
.rq-done p { margin: 0; font-size: 15px; line-height: 1.5; }
.rq-flash { position: fixed; left: 50%; top: calc(12px + env(safe-area-inset-top, 0px)); z-index: 70; transform: translateX(-50%);
    width: min(520px, calc(100% - 24px)); padding: 12px 16px; border-radius: var(--r); background: var(--ink); color: #fff; font-size: 14px;
    box-shadow: 0 12px 30px -12px rgba(6, 12, 18, .5); animation: rqFlashIn .3s var(--ease); }
/* своя анимация: общая rqIn задаёт transform без translateX(-50%) — плашка въезжала наискось справа
   и на 320px первые кадры была за экраном. Здесь центровка сохраняется, плашка лишь опускается сверху */
@keyframes rqFlashIn { from { opacity: 0; transform: translate(-50%, -12px); } }
.rq-flash.is-err { background: var(--hot-fill); }
.rq-flash { cursor: pointer; } /* щелчок закрывает сообщение (shop.js) */
@media (min-width: 576px) { .rq-form { padding: 26px 26px 24px; } }
@media (prefers-reduced-motion: reduce) { .rq[open], .rq-flash { animation: none; } }

/* ---------- подсказки Новой Почты на оформлении ---------- */
.np-combo { position: relative; display: block; }
.np-combo input { width: 100%; }
.np-list { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30; max-height: 280px; margin: 0; padding: 4px; overflow: auto;
    list-style: none; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-s);
    box-shadow: 0 14px 30px -14px rgba(6, 12, 18, .45); }
.np-list li { padding: 9px 10px; border-radius: 6px; color: var(--ink); font-size: 14px; line-height: 1.35; cursor: pointer; }
.np-list li:hover, .np-list li[aria-selected="true"] { background: var(--brand-soft); color: var(--brand-ink); }
/* оплата картой: статус и кнопка на странице заказа */
.paystat-box { display: grid; gap: 10px; justify-items: center; margin: 14px 0 0; }
.paystat { margin: 0; padding: 10px 12px; border-radius: var(--r-s); background: var(--surface-2); color: var(--ink); font-size: 14px; }
.paystat.is-ok { background: color-mix(in srgb, var(--ok) 14%, transparent); }
.paystat.is-err { background: color-mix(in srgb, var(--hot) 14%, transparent); }
.paystat-btn { display: inline-block; width: auto; padding-inline: 22px; text-decoration: none; }
.acc-order-page .paystat-box { justify-items: start; margin: 0 0 14px; }
.cart-error { background: color-mix(in srgb, var(--no-stock) 12%, transparent); }

/* ---------- Промокод ---------- */
/* поле кода в итоге корзины свёрнуто в «Маєте промокод?» — не отвлекает от «Оформити».
   Обычный <details> и обычная форма: работает и без скрипта */
/* min-width: 0 — ячейка сетки итога иначе не уже содержимого: поле ввода со своей «естественной»
   шириной растягивало блок за край карточки на 320 px */
.promo, .promo-on { min-width: 0; }
.promo { padding-bottom: 9px; border-bottom: 1px dashed var(--line); }
.promo > summary { display: flex; align-items: center; gap: 8px; min-height: 40px; list-style: none; cursor: pointer;
    color: var(--brand-ink); font-size: 13.5px; font-weight: 600; }
.promo > summary::-webkit-details-marker { display: none; }
.promo > summary::after { content: ""; flex: none; width: 7px; height: 7px; margin-left: 2px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg);
    transition: transform var(--t) var(--ease); }
.promo[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.promo > summary:hover { color: var(--brand); }
.promo-f { display: flex; gap: 8px; margin-top: 2px; }
/* 16 px на телефоне — иначе iPhone увеличивает страницу при вводе */
.promo-f input { flex: 1 1 auto; width: 100%; min-width: 0; height: 42px; padding: 0 11px; border: 1.5px solid var(--line-2); border-radius: var(--r-s);
    background: var(--bg); color: var(--ink); font: inherit; font-size: 16px; text-transform: uppercase; letter-spacing: .04em; }
.promo-f input::placeholder { color: var(--ink-3); text-transform: none; letter-spacing: 0; }
.promo-f input:focus { border-color: var(--brand); outline: none; }
.promo-f input:focus-visible { outline: 2px solid var(--page-accent); outline-offset: 1px; }
.promo-f input[aria-invalid="true"] { border-color: var(--no-stock); }
.promo-f button { flex: none; height: 42px; padding: 0 14px; border: 0; border-radius: var(--r-s);
    background: var(--brand-fill); color: #fff; font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.promo-f button:hover { background: var(--brand-fill-2); }
@media (min-width: 768px) { .promo-f input { font-size: 14px; } }
.promo-err { margin: 8px 0 0; color: var(--no-stock); font-size: 13px; line-height: 1.45; }

/* применённый код: зелёная рамка — скидка есть; жёлтая — код запомнен, но сейчас не действует (и почему) */
.promo-on { display: grid; gap: 4px; padding: 8px 8px 10px 12px; border: 1.5px dashed var(--ok); border-radius: var(--r-s);
    background: color-mix(in srgb, var(--ok) 8%, transparent); }
.promo-on.is-warn { border-color: var(--warn); background: var(--warn-soft); }
.promo-head { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 28px; }
/* код до 32 знаков без пробелов — переносится, а не вылезает за рамку на 320 px */
.promo-code { min-width: 0; overflow-wrap: anywhere; font-family: var(--font-d); font-size: 14px; font-weight: 700; letter-spacing: .04em; color: var(--ink); }
.promo-val { flex: none; padding: 2px 8px; border-radius: 999px; background: var(--hot-soft); color: var(--hot-ink);
    font-size: 12.5px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.promo-x-f { flex: none; margin-left: auto; }
.promo-x { display: grid; place-items: center; width: 40px; height: 40px; margin: -6px -4px -6px 0; padding: 0; border: 0;
    border-radius: var(--r-s); background: none; color: var(--ink-3); font-size: 15px; }
.promo-x:hover { color: var(--hot); background: color-mix(in srgb, var(--ink) 6%, transparent); }
.promo-msg { margin: 0; color: var(--ink); font-size: 13px; line-height: 1.45; }
.promo-on.is-ok .promo-msg { color: var(--ok); font-weight: 600; }
.promo-note { margin: 0; color: var(--ink-2); font-size: 12.5px; line-height: 1.4; }
.promo-on .promo-err { margin-top: 2px; }
.promo-rm { justify-self: start; min-height: 40px; margin-top: 4px; padding: 0 14px; border: 1.5px solid var(--line-2); border-radius: var(--r-s);
    background: var(--surface); color: var(--ink); font-size: 13.5px; font-weight: 600; }
.promo-rm:hover { border-color: var(--brand); color: var(--brand-ink); }

/* строки итога со скидкой: «Знижка (промокод …)» — кораллом, как всё про выгоду */
.ct-disc span { overflow-wrap: anywhere; }
.ct-disc b { color: var(--hot-ink); }
.ct-subtotal { padding-top: 9px; border-top: 1px dashed var(--line); }
.ct-note { margin: -4px 0 0; color: var(--ink-3); font-size: 12.5px; line-height: 1.4; }
/* сумма меньше минимальной («Настройки → Цены и заказ»): подсказка вместо оформления */
.ct-min { margin: 0; padding: 10px 12px; border-radius: var(--r-s); background: var(--warn-soft); color: var(--warn);
    font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.ct-min b { white-space: nowrap; }
.buy.is-off { background: var(--line-2); color: var(--ink-3); cursor: not-allowed; pointer-events: none; box-shadow: none; transform: none; }

/* заказ принят: со скидкой — разбивка «товари − знижка = до сплати» вместо одной суммы */
.done-totals { display: grid; gap: 6px; max-width: 380px; margin: 4px auto 10px; text-align: left; }
.done-totals > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; color: var(--ink-2); font-size: 14px; }
.done-totals dt { min-width: 0; overflow-wrap: anywhere; }
.done-totals dd { flex: none; margin: 0; color: var(--ink); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.done-totals .is-disc dd { color: var(--hot-ink); }
.done-totals .is-sum { padding-top: 7px; border-top: 1px solid var(--line); color: var(--ink); font-size: 15px; }
.done-totals .is-sum dd { font-family: var(--font-d); font-size: 18px; font-weight: 700; }

/* кабинет: «Товари» и «Знижка» над «Разом» */
.acc-total.acc-sub, .acc-total.acc-disc { gap: 12px; color: var(--ink-2); font-size: 14px; }
.acc-total.acc-disc { margin-top: 6px; }
.acc-total.acc-disc span { min-width: 0; overflow-wrap: anywhere; }
.acc-total.acc-disc b { flex: none; color: var(--hot-ink); white-space: nowrap; }
.acc-total.acc-disc + .acc-total { padding-top: 10px; border-top: 1px solid var(--line); }

/* ---------- статус заказа и отзыв по ссылке из письма (order-status, review) ----------
   Страницы открываются из письма без входа. Блоки — те же, что в кабинете (co-block, acc-items,
   acc-dl, paydet), новое здесь: шкала шагов заказа, плашка накладной и звёзды оценки. */
.ost, .rv { max-width: 980px; margin: 4px auto 40px; }
.rv { max-width: 760px; }
.ost-head, .rv-head { margin: 0 0 16px; }
.ost-head h1, .rv-head h1 { margin: 0 0 6px; font-size: 22px; line-height: 1.25; overflow-wrap: anywhere; }
.ost-head p, .rv-head p { margin: 0; color: var(--ink-3); font-size: 14px; line-height: 1.5; }
.ost-h { margin: 0 0 12px; font-family: var(--font-d); font-size: 15.5px; }
.ost-ico-warn { background: color-mix(in srgb, var(--hot) 14%, transparent); color: var(--hot-ink); }
.ost-tel { color: var(--brand-ink); font-weight: 700; text-decoration: none; white-space: nowrap; }
.ost-tel:hover { text-decoration: underline; }
/* ссылка рядом с кнопкой: палец на телефоне должен в неё попадать (не меньше 40 px в высоту) */
.ost-link { display: inline-block; padding: 10px 4px; }

/* шкала: на телефоне — столбиком, шире 576 px — в строку. Линия между точками зелёная там, где путь пройден */
.ost-steps { display: grid; margin: 0 0 16px; padding: 12px 16px; list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.ost-step { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 12px; padding: 6px 0; }
.ost-step:not(:last-child)::after { content: ""; position: absolute; left: 13px; top: 36px; bottom: -4px; width: 2px; border-radius: 1px; background: var(--line); }
.ost-step.is-done::after { background: var(--ok); }
.ost-dot { grid-row: 1 / span 2; display: grid; place-items: center; width: 28px; height: 28px; border: 2px solid var(--line-2); border-radius: 50%; background: var(--surface); }
.ost-dot svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.is-done .ost-dot { border-color: var(--ok-fill); background: var(--ok-fill); }
.is-now .ost-dot { border-color: var(--brand); background: radial-gradient(circle, var(--brand) 0 4.5px, var(--brand-soft) 5.5px);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 16%, transparent); }
.ost-label { padding-top: 4px; color: var(--ink-3); font-size: 14.5px; line-height: 20px; }
.is-done .ost-label { color: var(--ink-2); }
.is-now .ost-label { color: var(--ink); font-weight: 700; }
.ost-time { color: var(--ink-3); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.ost-alert { margin: 0 0 16px; padding: 12px 14px; border-radius: var(--r-s); background: color-mix(in srgb, var(--hot) 12%, transparent); color: var(--ink); font-size: 14.5px; line-height: 1.5; }

/* накладная и просьба об отзыве: номер/текст слева, кнопка справа; на узком экране кнопка уходит вниз */
.ost-ttn, .ost-review { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; margin: 0 0 16px; padding: 14px 16px; border-radius: var(--r); }
.ost-ttn { border: 1.5px solid var(--brand); background: var(--brand-soft); }
.ost-review { border: 1px solid color-mix(in srgb, var(--ok) 40%, transparent); background: color-mix(in srgb, var(--ok) 10%, var(--surface)); }
.ost-ttn-num { display: grid; gap: 2px; min-width: 0; }
.ost-ttn-num span { color: var(--ink-2); font-size: 12.5px; } /* --ink-3 на --brand-soft давал 4.15:1 — ниже 4.5 */
.ost-ttn-num b { color: var(--ink); font-family: var(--font-d); font-size: 19px; letter-spacing: .02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ost-review p { flex: 1 1 260px; margin: 0; color: var(--ink); font-size: 14.5px; line-height: 1.5; }
.ost-btn { display: inline-block; flex: 0 0 auto; width: auto; padding-inline: 22px; text-align: center; text-decoration: none; }
.ost .paydet { margin: 0 0 16px; }
.ost .paystat-box { justify-items: start; margin: 0 0 16px; }
.ost-grid { margin: 0 0 18px; }
.ost-help { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.6; text-align: center; }
.ost-hours { display: block; color: var(--ink-3); font-size: 13px; }

/* отзыв: фото слева, справа название; звёзды и поле текста — под ними (на телефоне во всю ширину) */
.rv-alert { margin: 0 0 12px; padding: 10px 12px; border-radius: var(--r-s); background: color-mix(in srgb, var(--hot) 12%, transparent); color: var(--ink); font-size: 14px; line-height: 1.45; }
.rv-form { display: grid; gap: 12px; }
.rv-item { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px 14px; align-items: center; min-width: 0; margin: 0; padding: 14px 16px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.rv-img { display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; width: 64px; height: 64px; overflow: hidden; border-radius: var(--r-s); background: var(--photo-bg); }
.rv-img img { display: block; width: 100%; height: 100%; object-fit: contain; }
.rv-img svg { width: 80%; height: 80%; }
.rv-body { display: contents; }
.rv-name { grid-column: 2; margin: 0; color: var(--ink); font-size: 15px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.rv-rate, .rv-text { grid-column: 1 / -1; min-width: 0; }
.rv-rate { display: grid; gap: 2px; margin: 0; padding: 0; border: 0; }
.rv-cap { padding: 0; color: var(--ink-2); font-size: 13px; }
.rv-stars { position: relative; display: flex; flex-wrap: wrap; gap: 2px; margin-left: -6px; }
.rv-stars input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.rv-stars label { --fill: transparent; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-s); color: var(--ink-3); cursor: pointer;
    transition: color var(--t) var(--ease), transform var(--t) var(--ease); }
.rv-stars svg { width: 32px; height: 32px; fill: var(--fill); stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.rv-stars label:active { transform: scale(.92); }
.rv-stars input:focus-visible + label { outline: 2px solid var(--brand); outline-offset: -2px; }
/* выбранная оценка закрашивает свою звезду и все до неё. Без :has (старые браузеры) — только саму выбранную */
.rv-stars input:checked + label { --fill: currentColor; color: var(--warn); }
.rv-stars:where(:has(input[value="2"]:checked)) label:where(:nth-of-type(-n+2)),
.rv-stars:where(:has(input[value="3"]:checked)) label:where(:nth-of-type(-n+3)),
.rv-stars:where(:has(input[value="4"]:checked)) label:where(:nth-of-type(-n+4)),
.rv-stars:where(:has(input[value="5"]:checked)) label:where(:nth-of-type(-n+5)) { --fill: currentColor; color: var(--warn); }
/* наведение показывает будущую оценку поверх выбранной */
.rv-stars:has(label:hover) label { --fill: transparent; color: var(--ink-3); }
.rv-stars:has(label:hover) label:hover, .rv-stars:has(label:hover) label:has(~ label:hover) { --fill: currentColor; color: var(--warn); }
.rv-rate .acc-err { display: block; }
.rv-text textarea { width: 100%; min-width: 0; min-height: 84px; padding: 10px 12px; border: 1.5px solid var(--line-2); border-radius: var(--r-s);
    background: var(--surface); color: var(--ink); font: inherit; font-size: 16px; line-height: 1.45; resize: vertical; }
.rv-text textarea:focus { border-color: var(--brand); outline: none; }
.rv-text textarea:focus-visible { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent); }
.rv-text textarea[aria-invalid="true"] { border-color: var(--hot-ink); }
.rv .acc-field i { color: var(--ink-3); font-style: normal; }
.rv-sent { grid-column: 2; display: flex; align-items: center; gap: 6px; margin: 0; color: var(--ok); font-size: 14px; font-weight: 600; }
.rv-sent svg { flex: none; width: 18px; height: 18px; }
.rv-item.is-done { grid-template-rows: auto auto; align-content: center; }
.rv-item.is-done .rv-img { grid-row: 1 / span 2; }
.rv-item.is-done .rv-name { align-self: end; }
.rv-item.is-done .rv-sent { align-self: start; }
.rv-foot { display: grid; gap: 14px; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
@media (min-width: 576px) {
    .ost-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 18px 10px 16px; }
    .ost-step { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0 4px; text-align: center; }
    .ost-step:not(:last-child)::after { top: 13px; bottom: auto; left: calc(50% + 18px); right: calc(-50% + 18px); width: auto; height: 2px; }
    .ost-dot { margin-bottom: 6px; }
    .ost-label { padding-top: 0; font-size: 14px; }
    .rv-item { grid-template-columns: 76px minmax(0, 1fr); padding: 16px 18px; }
    .rv-img { width: 76px; height: 76px; grid-row: 1 / span 3; align-self: start; }
    .rv-rate, .rv-text { grid-column: 2; }
    .rv-foot { padding: 18px; }
    .rv-submit { justify-self: start; width: auto; padding-inline: 28px; }
}
@media (min-width: 768px) {
    .ost-head h1, .rv-head h1 { font-size: 24px; }
    .rv-text textarea { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .rv-stars label { transition: none; } }

/* ============ SEO: баннер главной, бренд в карточке товара, страницы брендов ============ */
/* Рекламная строка баннера главной больше не заголовок h1 (главный заголовок страницы теперь
   для поисковика и скрыт с экрана), но выглядит в точности как прежний h1: те же шрифт, размер, отступы */
.hero-main .hero-h { font-family: var(--font-d); font-weight: 700; letter-spacing: -.03em; text-wrap: balance;
    font-size: clamp(22px, 14px + 1.8vw, 31px); line-height: 1.07; margin: 8px 0; max-width: 17ch; position: relative; }
/* «Бренд: Bambi» под названием товара — ссылка на все товары бренда */
.pmeta .pmeta-brand { color: var(--brand-ink); font-weight: 600; text-decoration: none; }
.pmeta .pmeta-brand:hover { text-decoration: underline; text-underline-offset: 2px; }
/* страница бренда: фильтров нет — сортировка одна и прижата вправо на любой ширине */
.brand-tools { justify-content: flex-end; }
.brand-tools .sort { flex: 0 1 auto; min-width: 0; max-width: 100%; }
/* все бренды: буквы для перехода и группы по первой букве колонками (1 → 2 → 3 → 4 → 5) */
/* на телефоне буквы — одной лентой с прокруткой вбок (сеткой они занимали пол-экрана),
   алфавиты разделены зазором; с 768 — сеткой, каждый алфавит своей строкой:
   латинская «A» и кириллическая «А» выглядят одинаково */
.az-nav { display: flex; gap: 16px; margin: 0 calc(var(--gutter) * -1) calc(var(--gap) * 1.25); padding: 0 var(--gutter) 2px;
    overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.az-nav::-webkit-scrollbar { display: none; }
.az-set { flex: none; display: flex; gap: 6px; }
.az-nav a:focus-visible { outline-offset: -2px; }
@media (min-width: 768px) {
    .az-nav { display: grid; gap: 6px; margin-inline: 0; padding-inline: 0; overflow: visible; }
    .az-set { flex: initial; flex-wrap: wrap; min-width: 0; }
}
.az-nav a { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 36px; padding: 0 9px;
    border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface); color: var(--ink);
    font-weight: 600; font-size: 13.5px; text-decoration: none; font-variant-numeric: tabular-nums; }
.az-nav a:hover { border-color: var(--brand); color: var(--brand-ink); }
@media (pointer: coarse) { .az-nav a { min-width: 44px; min-height: 44px; } }
.az-list { column-count: 1; column-gap: var(--gap); }
.az-group { break-inside: avoid; margin: 0 0 var(--gap); padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r);
    background: var(--surface); scroll-margin-top: calc(var(--head-bottom, 96px) + 12px); }
.az-group h2 { font-size: 18px; margin: 0 0 6px; color: var(--brand-ink); }
.az-group ul { list-style: none; margin: 0; padding: 0; }
.az-group li { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-width: 0; }
.az-group a { min-width: 0; padding: 5px 0; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.az-group a:hover { color: var(--brand-ink); text-decoration: underline; text-underline-offset: 2px; }
.az-group i { flex: none; font-style: normal; font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
@media (pointer: coarse) { .az-group a { padding: 10px 0; } }
@media (min-width: 576px) { .az-list { column-count: 2; } }
@media (min-width: 768px) { .az-list { column-count: 3; } }
@media (min-width: 992px) { .az-list { column-count: 4; } }
@media (min-width: 1200px) { .az-list { column-count: 5; } }

/* ============ блокировка прокрутки: страница не прыгает вбок ============ */
/* Пока открыты меню, фильтры, просмотр фото или окно заявки, у html overflow: hidden, и полоса
   прокрутки пропадает. shop.js (ttLockPage) возвращает её место отступом справа у html и кладёт
   ширину в --lock-bar. Прижатые к правому краю окна кнопки связи и нижняя панель покупки
   отодвигаются на неё же — иначе они прыгали бы вправо на ширину полосы (Windows, обычная полоса) */
.msgr { margin-right: var(--lock-bar, 0px); }
.stickybuy { right: var(--lock-bar, 0px); }

/* ============ баннер главной: надпись из админки ============ */
/* Надпись баннера теперь пишет владелец (HomeController::hero, таблица banners): длинное слово
   или название бренда без пробелов переносится, а не обрезается краем баннера на телефоне */
.hero-main .hero-h, .hero-main .lbl { overflow-wrap: break-word; }

/* ---------- Отзывы на главной ---------- */
/* Лента «Відгуки покупців» (shop/home.blade.php, partials/review-card.blade.php) — тот же .prow,
   что у товаров выше: те же ширины карточек, прокрутка, стрелки и появление при прокрутке.
   Одно отличие: до 768 карточка отзыва шириной в две карточки товара и стоит краями ровно по ним —
   в карточке шириной 125–160 px (телефон) в строку влезало бы слова два, а название товара рядом
   с фото резалось до пары слогов. С 768 карточки уже от 215 px — ширина та же, что у товаров. */
@media (max-width: 575.98px) {
    .prow.hrv-row { grid-auto-columns: calc(2 * (100% - var(--gap)) / 2.2 + var(--gap)); }
}
@media (min-width: 576px) and (max-width: 767.98px) {
    .prow.hrv-row { grid-auto-columns: calc(2 * (100% - 2 * var(--gap)) / 3.2 + var(--gap)); }
}
.hrv-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px var(--card-pad) var(--card-pad);
    display: flex; flex-direction: column; gap: 10px; min-width: 0; scroll-snap-align: start; }
/* звёзды — свой значок #hrv-star (объявлен на главной); пустые — тем же цветом, но бледно, как у карточек товара */
.hrv-stars { display: flex; gap: 2px; color: var(--warn); line-height: 0; }
.hrv-stars svg, .hrv-sum svg { width: 15px; height: 15px; flex: none; fill: currentColor; stroke: currentColor; stroke-width: 1.2; stroke-linejoin: round; }
.hrv-stars svg.off { opacity: .35; }
/* текст — не больше пяти строк: карточки в ряду одной высоты, длинный отзыв целиком на странице товара.
   Без автопереносов (hyphens: manual): в узкой карточке они рвали почти каждую строку, а словарь Chrome
   ещё и делил слова неправильно («народже-ння»). Слово или ссылку длиннее строки всё равно перенесёт overflow-wrap */
.hrv-text { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink); overflow-wrap: break-word; hyphens: manual;
    display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
/* имя и дата прижаты к низу карточки, всегда в две строки: рядом они то помещались, то нет,
   и имена в соседних карточках стояли на разной высоте. Длинное имя — с многоточием */
.hrv-who { margin: auto 0 0; display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0;
    font-size: 12px; line-height: 1.4; color: var(--ink-3); }
.hrv-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; color: var(--ink); }
.hrv-prod { display: flex; align-items: center; gap: 10px; min-width: 0; padding-top: 10px; border-top: 1px solid var(--line);
    font-size: 12.5px; line-height: 1.35; color: var(--ink-2); text-decoration: none; }
.hrv-prod:hover { color: var(--brand); }
.hrv-thumb { flex: none; width: 44px; height: 44px; border-radius: var(--r-s); background: var(--photo-bg); overflow: hidden;
    display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; }
.hrv-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 3px; }
.hrv-thumb svg { width: 80%; height: 80%; }
.hrv-name { min-width: 0; overflow-wrap: break-word; hyphens: auto;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* сводка рядом с заголовком: «★ 4,8 з 5 · 23 відгуки» */
.hrv-sum { font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hrv-sum b { color: var(--ink); font-weight: 700; }
.hrv-sum svg { color: var(--warn); margin-right: 2px; vertical-align: -2px; }

/* ---------- Карта сайту ---------- */
/* Страница /karta-saitu (shop/sitemap-page.blade.php): корневые разделы — карточками в колонках
   (1 → 2 → 3 → 4, как группы на странице брендов), подразделы — вложенными списками с линией слева.
   Ниже — «Бренди» и «Покупцям»: на телефоне друг под другом, с 768 — рядом (бренды шире). */
.smap-jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 calc(var(--gap) * 1.5); }
.smap-jump a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px;
    background: var(--surface); color: var(--ink); font-weight: 600; font-size: 13.5px; text-decoration: none;
    transition: border-color var(--t) var(--ease), color var(--t) var(--ease); }
.smap-jump a:hover { border-color: var(--brand); color: var(--brand-ink); }
@media (pointer: coarse) { .smap-jump a { min-height: 44px; } }
.smap-sec { min-width: 0; margin: 0 0 calc(var(--gap) * 2); }
.shop .smap-sec > h2 { font-size: 18px; line-height: 1.25; margin: 0 0 12px; }
.smap-cols { column-count: 1; column-gap: var(--gap); }
.smap-card { break-inside: avoid; min-width: 0; margin: 0 0 var(--gap); padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r);
    background: var(--surface); }
.shop .smap-card h3 { font-size: 15px; line-height: 1.3; letter-spacing: -.02em; margin: 0 0 6px; }
.shop .smap-card h3:only-child { margin: 0; }
.smap-card h3 a { color: var(--brand-ink); text-decoration: none; overflow-wrap: anywhere; }
.smap-card ul { list-style: none; margin: 0; padding: 0; }
/* подраздел второго уровня и глубже: отступ и линия слева — видно, чей он */
.smap-card ul ul { margin: 0 0 4px 2px; padding-left: 12px; border-left: 2px solid var(--line); }
.smap-card li > a { display: block; padding: 5px 0; line-height: 1.35; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.smap-card ul ul a { font-size: 13.5px; color: var(--ink-2); }
.smap-card a:hover { color: var(--brand-ink); text-decoration: underline; text-underline-offset: 2px; }
@media (pointer: coarse) { .smap-card li > a { padding: 10px 0; } }
.smap-brands { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.smap-all { display: inline-block; margin-top: 8px; padding: 5px 0; color: var(--brand-ink); font-weight: 600; text-decoration: none; }
.smap-all:hover { text-decoration: underline; text-underline-offset: 2px; }
@media (pointer: coarse) { .smap-all { padding: 10px 0; } }
.smap-empty { margin: 0; color: var(--ink-3); }
.smap-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--gap); }
/* в ряду карточки «Бренди» и «Покупцям» одной высоты */
.smap-row .smap-sec { display: flex; flex-direction: column; }
.smap-row .smap-card { flex: 1 1 auto; margin: 0; }
@media (min-width: 576px) {
    .smap-cols { column-count: 2; }
    .smap-brands { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
    .shop .smap-sec > h2 { font-size: 20px; }
    .smap-row { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}
@media (min-width: 992px) {
    .smap-cols { column-count: 3; }
    .smap-brands { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
    .smap-cols { column-count: 4; }
    .smap-brands { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}