/* ONLINE PARK — шапка, навигация, панели шапки, подвал.
   Размеры сняты с макета (Header-3, Home): топбар 38, полоса шапки 98 (24 + 50 + 24),
   контролы 50, кнопки-иконки 48, меню категорий 48. */

/* ── Топбар ──────────────────────────────────────────────── */

.topbar {
    background: var(--bg);
    border-bottom: 1px solid var(--ink-10);
    font-size: 13px;
}
.topbar > .bleed {
    height: 38px;
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.topbar-nav { display: flex; align-items: center; gap: 32px; white-space: nowrap; }
.topbar-nav a:hover { color: var(--blue); }
.topbar-city { display: flex; align-items: center; gap: 4px; background: none; border: 0; padding: 0; font-size: 13px; }
.topbar-city .i-8 { width: 8px; height: 8px; }
.topbar-city:hover, .topbar-city.on { color: var(--blue); }
.topbar-time { opacity: .4; white-space: nowrap; }

/* ── Основная полоса ─────────────────────────────────────── */

.header { position: relative; background: var(--bg); z-index: 50; }
.header > .bleed { display: flex; align-items: center; gap: 24px; padding-top: 24px; padding-bottom: 24px; }

.logo { flex: none; display: block; width: 74px; height: 24px; }
.logo img { display: block; width: 100%; height: 100%; }

.header-tools { display: flex; align-items: center; gap: 16px; flex: 1 0 0; min-width: 0; }

.btn-catalog {
    display: inline-flex; align-items: center; gap: 8px; flex: none;
    height: var(--ctrl-h); padding: 0 16px;
    border: 0; border-radius: var(--r-8);
    background: var(--blue); color: var(--bg);
    font-size: 14px; white-space: nowrap;
}
.btn-catalog:hover, .btn-catalog.on { background: var(--blue-h); color: var(--bg); }

/* Поле поиска: 1px синяя рамка, серая заливка, слева лупа и разделитель. Кнопки «Найти» в макете нет. */
.search {
    position: relative;
    flex: 1 0 0; min-width: 0;
    display: flex; align-items: center; gap: 16px;
    height: var(--ctrl-h); padding: 0 16px;
    background: var(--bg-grey);
    border: 1px solid var(--blue); border-radius: var(--r-8);
}
.search .icon { color: var(--blue); flex: none; }
.search .divider { width: 1px; height: 20px; background: var(--ink-10); flex: none; }
.search input {
    flex: 1 0 0; min-width: 0; height: 100%;
    background: none; border: 0; outline: none; font-size: 14px;
    -webkit-appearance: none; appearance: none;
}
.search input::-webkit-search-cancel-button { display: none; }
.search input::placeholder { color: var(--ink); opacity: .3; }
.search-clear {
    display: none; flex: none; width: 24px; height: 24px; margin-right: -8px;
    border: 0; background: none; padding: 0; color: var(--red);
}
.search.has-text .search-clear { display: flex; align-items: center; justify-content: center; }
.search-clear .icon { color: var(--red); }
.search-submit { display: none; }

.header-icons { display: flex; align-items: center; gap: 16px; flex: none; }

/* Группа иконок: 48×48 ячейки в общей рамке; счётчик — кружок 12px в правом верхнем углу */
.hgroup { display: flex; align-items: center; border: 1px solid var(--ink-10); border-radius: var(--r-8); background: var(--bg); }
.hgroup > a {
    position: relative;
    width: var(--ctrl-sm); height: var(--ctrl-sm);
    display: flex; align-items: center; justify-content: center;
    color: var(--ink);
}
.hgroup > a + a { border-left: 1px solid var(--ink-10); }
.hgroup > a:first-child { border-radius: 7px 0 0 7px; }
.hgroup > a:last-child { border-radius: 0 7px 7px 0; }
.hgroup > a:hover { color: var(--blue); }
.hgroup > a.fav:hover { color: var(--orange); }
.hgroup .count { top: 6px; right: 6px; }

.btn-call {
    flex: none;
    width: var(--ctrl-sm); height: var(--ctrl-h);
    display: flex; align-items: center; justify-content: center;
    border: 0; border-radius: var(--r-8);
    background: var(--orange); color: var(--white);
}
.btn-call:hover { background: #e95f22; color: var(--white); }

.btn-login { padding: 0 24px; }

/* ── Меню категорий ──────────────────────────────────────── */

.nav { background: var(--blue); }
/* Пунктов может быть больше, чем влезает: на узком десктопе меню прокручивается,
   а не выталкивает страницу горизонтально. */
.nav > .bleed {
    display: flex; align-items: center; justify-content: space-between;
    overflow-x: auto; scrollbar-width: none;
}
.nav > .bleed::-webkit-scrollbar { display: none; }
.nav a {
    display: flex; align-items: center; gap: 4px;
    height: 48px; padding: 0 16px; color: var(--bg);
    font-size: 12px; white-space: nowrap;
}
.nav a:hover { background: var(--blue-h); color: var(--bg); }
.nav a.accent, .nav a.on { background: var(--blue-h); }
.nav a.accent:hover { color: var(--cyan); }

/* ── Выпадающие панели шапки ─────────────────────────────── */

.drop-panel[hidden] { display: none; }

/* Город: карточка 320px вплотную под топбаром от начала колонки, страница под ней затемнена (макет 55:3221) */
.drop { position: relative; }
.drop-panel {
    position: absolute; z-index: 85; top: calc(100% + 10px); left: 0;
    width: 320px; padding: 16px;
    background: var(--white); border-radius: 0 0 var(--r-8) var(--r-8);
    box-shadow: 0 12px 40px rgba(6, 6, 6, .14);
    text-align: left; white-space: normal;
}
.city-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.city-head b { font-size: 24px; font-weight: 700; }
.panel-close { border: 0; background: none; padding: 0; color: var(--red); display: flex; }
.city-auto { display: inline-block; margin-bottom: 12px; font-size: 16px; color: var(--blue); background: none; border: 0; padding: 0; text-align: left; }
.city-auto:hover { text-decoration: underline; }
.city-find {
    display: flex; align-items: center;
    height: 50px; padding-left: 16px; margin-bottom: 8px;
    border: 1px solid var(--ink-10); border-radius: var(--r-8); background: var(--bg-grey);
}
.city-find input { flex: 1 0 0; min-width: 0; border: 0; background: none; outline: none; font-size: 14px; }
.city-find input::placeholder { color: var(--ink); opacity: .3; }
.city-find .go {
    display: flex; align-items: center; gap: 8px;
    height: 100%; padding: 0 16px;
    border: 0; border-left: 1px solid var(--ink-10); border-radius: 0 7px 7px 0;
    background: var(--white); color: var(--blue); font-size: 14px;
}
.city-list { display: flex; flex-direction: column; gap: 4px; max-height: 400px; overflow-y: auto; }
.city-list button {
    display: block; width: 100%; height: 40px; padding: 0 16px;
    background: none; border: 1px solid transparent; border-radius: var(--r-8);
    text-align: left; font-size: 16px;
}
.city-list button:hover { color: var(--blue); }
/* Выбранный город — в чёрной рамке, как в макете 55:3221 */
.city-list button.on { border-color: var(--ink); color: var(--ink); }
.city-list button[hidden] { display: none; }

/* ── Мобильная шапка ─────────────────────────────────────── */

.mheader { display: none; }
.mbar { display: none; }

@media (max-width: 991px) {
    /* От топбара остаются город и часы работы (макет 75:2593) */
    .topbar-nav > a { display: none; }
    .topbar > .bleed { height: 34px; justify-content: flex-start; gap: 24px; }
    .header > .bleed { gap: 12px; padding-top: 12px; padding-bottom: 12px; flex-wrap: wrap; }
    /* Как в макете: логотип и кнопки в первой строке, поиск — во второй.
       display:contents поднимает содержимое .header-tools в общий ряд шапки. */
    .header-tools { display: contents; }
    .btn-catalog { order: 2; }
    .header-icons { order: 3; margin-left: auto; }
    .header .search { order: 4; flex-basis: 100%; }
    .btn-catalog span:not(.icon) { display: none; }
    .btn-catalog { width: var(--ctrl-h); justify-content: center; padding: 0; }
    .nav { display: none; }
    .header-icons { margin-left: auto; }
    .btn-call { display: none; }
}

@media (max-width: 767px) {
    .header > .bleed { padding-top: 12px; padding-bottom: 12px; }
    .header-tools { gap: 8px; }
    .search { height: 50px; gap: 12px; padding: 0 12px; }
    .hgroup > a { width: 44px; height: 44px; }
    .btn-login { width: 44px; padding: 0; justify-content: center; }
    .btn-login span:not(.icon) { display: none; }

    /* Нижняя панель навигации — как в мобильном макете */
    .mbar {
        position: fixed; z-index: 70; left: 0; right: 0; bottom: 0;
        display: grid; grid-template-columns: repeat(5, 1fr);
        background: var(--white); border-top: 1px solid var(--ink-10);
        padding-bottom: env(safe-area-inset-bottom);
    }
    .mbar a {
        position: relative;
        display: flex; flex-direction: column; align-items: center; gap: 2px;
        padding: 8px 4px; font-size: 10px; color: var(--ink);
    }
    .mbar a.on { color: var(--blue); }
    .mbar .count { top: 2px; right: calc(50% - 18px); }
    body { padding-bottom: 60px; }
}

/* ── Тосты (уведомления 420×59 из макета) ────────────────── */

.toasts { position: fixed; z-index: 100; left: 24px; bottom: 24px; display: flex; flex-direction: column; gap: 8px; max-width: calc(100% - 48px); }
.toast {
    display: flex; align-items: center; gap: 12px;
    width: 420px; max-width: 100%; min-height: 59px; padding: 12px 16px;
    background: var(--white); border-radius: var(--r-8);
    box-shadow: 0 12px 40px rgba(6, 6, 6, .18);
    font-size: 14px;
}
.toast .icon { flex: none; }
.toast-ok .icon { color: var(--green-t); }
.toast-err .icon { color: var(--red); }
.toast .toast-close { margin-left: auto; border: 0; background: none; padding: 0; color: var(--ink-40); display: flex; }
.toast .toast-close:hover { color: var(--red); }
@media (max-width: 767px) {
    .toasts { left: 12px; right: 12px; bottom: 72px; }
}

/* ── Подвал ──────────────────────────────────────────────── */

.footer {
    margin-top: 48px;
    border: 1px solid var(--ink);
    border-bottom: 0;
    border-radius: var(--r-16) var(--r-16) 0 0;
    padding: 32px 32px 0;
    display: flex; flex-direction: column; gap: 8px;
}
.footer-top { display: flex; align-items: stretch; justify-content: space-between; gap: 20px; }

.footer-brand {
    flex: none; width: 272px;
    display: flex; flex-direction: column; gap: 16px; justify-content: center;
    padding: 32px; border-radius: var(--r-8); background: var(--bg-grey);
}
.footer-logo { width: 122px; height: 40px; display: block; }
.footer-logo img { display: block; width: 100%; height: 100%; }
.footer-about { font-size: 11px; line-height: 15px; }
.footer-phone { padding: 16px 0; border-top: 1px solid var(--ink-30); border-bottom: 1px solid var(--ink-30); }
.footer-phone b { font-size: 18px; font-weight: 400; display: block; line-height: 1; margin-bottom: 4px; }
.footer-phone b a:hover { color: var(--blue); }
.footer-phone span { font-size: 13px; opacity: .4; }
.footer-soc { display: flex; gap: 8px; }
.footer-soc a {
    width: 32px; height: 32px; border-radius: var(--r-8); background: var(--white);
    display: flex; align-items: center; justify-content: center; color: var(--ink);
}
.footer-soc a:hover { box-shadow: 0 4px 14px rgba(6, 6, 6, .18); color: var(--ink); }

.footer-cols {
    flex: 1 0 0; min-width: 0;
    display: flex; justify-content: space-between; gap: 24px;
    padding: 32px; border-radius: var(--r-8);
    background: var(--blue); color: var(--white);
}
.footer-col { display: flex; flex-direction: column; gap: 16px; }
.footer-col > b { font-size: 16px; font-weight: 400; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.footer-col a { font-size: 13px; }
.footer-col a:hover { color: var(--white); text-decoration: underline; }
.footer-col .soon { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; }
.footer-col .badge-soon { background: var(--green); color: var(--ink); font-size: 11px; padding: 1px 4px; border-radius: var(--r-4); line-height: 15px; }

.footer-bottom {
    background: var(--ink); color: var(--white);
    border-radius: var(--r-8) var(--r-8) 0 0;
    padding: 16px 32px; font-size: 11px;
}

@media (max-width: 1199px) {
    .footer-cols { flex-wrap: wrap; gap: 24px 32px; }
    .footer-col { min-width: 140px; }
}
@media (max-width: 991px) {
    .footer-top { flex-direction: column; }
    .footer-brand { width: 100%; }
}
@media (max-width: 767px) {
    .footer { margin-top: 32px; padding: 16px 16px 0; }
    .footer-brand, .footer-cols { padding: 20px; }
    .footer-cols { flex-direction: column; gap: 20px; }
    .footer-col ul { gap: 8px; }
    .footer-bottom { padding: 14px 20px; }
}

/* Счётчик без значения — серый кружок (состояние «0» из макета) */
.hgroup .count-grey { background: var(--bg-grey); color: var(--ink); }

.modal-lead { font-size: 14px; opacity: .6; margin: -8px 0 20px; }

/* ── Блокировка прокрутки под модалкой ────────────────────
   Только overflow у html и компенсация полосы прокрутки: страница остаётся на месте, без прыжка наверх. */
html.is-locked { overflow: hidden; padding-right: var(--scrollbar, 0px); }

.shade { position: fixed; inset: 0; z-index: 80; background: rgba(6, 6, 6, .3); }
.shade[hidden] { display: none; }

/* ── Каталог: модалка поверх страницы (макет 76:4187) ─────
   Карточка на ширину колонки контента, под топбаром; разделы слева, группы подразделов справа. */
.catm[hidden] { display: none; }
.catm {
    position: fixed; inset: 0; z-index: 90;
    padding: 87px var(--gutter) 20px;
    background: rgba(6, 6, 6, .3);
    overscroll-behavior: contain;
}
.catm-card {
    max-width: var(--wrap); max-height: 100%; margin: 0 auto;
    display: flex; flex-direction: column;
    background: var(--white); border-radius: var(--r-8);
    box-shadow: 0 24px 60px rgba(6, 6, 6, .18);
    overflow: hidden;
}

.catm-top { display: flex; align-items: center; gap: 24px; padding: 16px 24px; border-bottom: 1px solid var(--ink-10); }
.catm-title { display: flex; align-items: baseline; gap: 16px; min-width: 0; }
.catm-title h2 { font-size: 24px; line-height: 1.2; white-space: nowrap; }
.catm-title span { font-size: 13px; white-space: nowrap; }
.catm-search {
    flex: 1 0 0; min-width: 0; margin-left: 8px;
    display: flex; align-items: center; gap: 16px;
    height: 50px; padding: 0 16px;
    background: var(--bg-grey); border: 1px solid var(--blue); border-radius: var(--r-8);
}
.catm-search .icon { color: var(--blue); }
.catm-search .divider { width: 1px; height: 20px; border-left: 1px dashed var(--blue); flex: none; }
.catm-search input { flex: 1 0 0; min-width: 0; height: 100%; border: 0; background: 0; outline: 0; font-size: 14px; -webkit-appearance: none; appearance: none; }
.catm-search input::placeholder { color: var(--ink); opacity: .3; }
.catm-search input::-webkit-search-cancel-button { display: none; }
.catm-empty { grid-column: 1 / -1; margin: 0; padding: 24px; font-size: 15px; opacity: .6; }
.catm-close { width: 32px; height: 32px; flex: none; margin-left: 16px; display: inline-flex; align-items: center; justify-content: center; padding: 0; background: 0; border: 0; color: var(--red); }

.catm-body { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 280px minmax(0, 1fr); }
.catm-roots { overflow-y: auto; border-right: 1px solid var(--ink-10); padding-bottom: 16px; }
.catm-roots a { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 24px; font-size: 16px; line-height: 1.2; }
.catm-roots a .icon { color: var(--blue); }
.catm-roots a.is-promo .icon { color: var(--orange); }
.catm-roots a:hover { color: var(--blue); }
.catm-roots a.on { background: var(--blue); color: var(--white); }
.catm-roots a.on .icon { color: var(--white); }

.catm-panels { overflow-y: auto; padding: 16px 40px 24px; }
.catm-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 32px 40px; align-content: start; }
.catm-group { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.catm-group b, .catm-group-title { font-size: 16px; font-weight: 500; margin-bottom: 4px; }
.catm-group a:not(.catm-group-title) { font-size: 13px; }
.catm-group a:hover { color: var(--blue); }

/* Шапка раздела и «назад» нужны только второму экрану на телефоне */
.catm-subtop, .catm-back { display: none; }

@media (max-width: 991px) {
    .catm { padding-top: 16px; }
    .catm-top { flex-wrap: wrap; gap: 12px 16px; }
    .catm-title { flex: 1 0 0; }
    .catm-search { order: 3; flex-basis: 100%; margin-left: 0; }
    .catm-body { grid-template-columns: 200px minmax(0, 1fr); }
    .catm-panels { padding: 16px 24px 24px; }
    .catm-groups { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 24px; }
}

/* Телефон: лист во всю ширину от верха экрана, два экрана — разделы и группы раздела (78:1419, 78:1649) */
@media (max-width: 767px) {
    .catm { padding: 0; }
    .catm-card { max-width: none; max-height: 100%; border-radius: 0 0 var(--r-16) var(--r-16); }
    .catm-top { padding: 16px 20px 0; border-bottom: 0; gap: 0; }
    .catm-title { flex-direction: column; align-items: flex-start; gap: 2px; }
    .catm-title h2 { font-size: 18px; white-space: normal; }
    .catm-close { margin-left: 12px; }
    .catm-search { margin: 16px 0 0; padding: 0 16px; height: 48px; }
    /* Линия между шапкой и поиском во всю ширину листа */
    .catm-top::after { content: ''; order: 2; flex-basis: calc(100% + 40px); margin: 16px -20px 0; border-top: 1px solid var(--ink-10); }
    .catm-top .catm-search { margin-top: 16px; }
    .catm-body { display: block; overflow-y: auto; }
    .catm-roots { border-right: 0; padding: 8px 0 16px; overflow: visible; }
    .catm-roots a { padding: 8px 20px; }
    /* На первом экране раздел не подсвечен: выбор — это переход на второй экран */
    .catm-roots a.on { background: none; color: var(--ink); }
    .catm-roots a.on .icon { color: var(--blue); }
    .catm-roots a.on.is-promo .icon { color: var(--orange); }
    .catm-roots a:active { background: var(--blue); color: var(--white); }
    .catm-roots a:active .icon { color: var(--white); }
    .catm-panels { display: none; padding: 0 0 24px; overflow: visible; }

    .catm.is-sub .catm-top, .catm.is-sub .catm-roots { display: none; }
    .catm.is-sub .catm-panels { display: block; }
    .catm-subtop { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--ink-10); }
    .catm-subtop .catm-title { flex: 1 0 0; }
    .catm-subtop .catm-close { margin-left: 0; }
    .catm-back { display: inline-flex; margin: 16px 20px 8px 52px; padding: 0; background: 0; border: 0; color: var(--blue); }
    .catm-groups { grid-template-columns: 1fr; gap: 28px; padding: 8px 20px 0 52px; }
    .catm-group { gap: 9px; }
    .catm-group a:not(.catm-group-title) { line-height: 16px; }
}

/* ── Живой поиск: окно поверх страницы (макеты 61:4868, 76:2775, 76:3234) ── */
.srch[hidden] { display: none; }
.srch {
    position: fixed; inset: 0; z-index: 90;
    padding: 60px var(--gutter) 20px;
    background: rgba(6, 6, 6, .3);
    overscroll-behavior: contain;
}
.srch-card {
    max-width: var(--wrap); max-height: 100%; margin: 0 auto;
    display: flex; flex-direction: column;
    background: var(--white); border-radius: var(--r-8);
    box-shadow: 0 24px 60px rgba(6, 6, 6, .18);
    overflow: hidden;
}
.srch-top { display: flex; align-items: center; gap: 24px; padding: 24px 24px 0; }
.srch-form {
    flex: 1 0 0; min-width: 0;
    display: flex; align-items: center; gap: 16px;
    height: 64px; padding: 0 16px;
    background: var(--white); border: 1px solid var(--blue); border-radius: var(--r-8);
}
.srch-form .icon { color: var(--blue); }
.srch-form .divider { width: 1px; height: 20px; border-left: 1px dashed var(--ink-30); flex: none; }
.srch-form input { flex: 1 0 0; min-width: 0; height: 100%; border: 0; background: 0; outline: 0; font-size: 16px; -webkit-appearance: none; appearance: none; }
.srch-form input::-webkit-search-cancel-button { display: none; }
.srch-form input::placeholder { color: var(--ink); opacity: .3; }
.srch-clear { flex: none; display: inline-flex; padding: 0; background: 0; border: 0; color: var(--red); }
.srch .catm-close { margin-left: 0; }
.srch-body { overflow-y: auto; padding: 8px 24px 24px; }
.srch-body:empty { padding-bottom: 16px; }

.suggest-title { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); margin: 24px 0 8px; }
.suggest-title.is-grey { color: var(--ink); opacity: .6; }
.suggest-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.suggest-chips + .suggest-rows { margin-top: 12px; }
.suggest-chip {
    display: inline-flex; align-items: center; gap: 6px;
    height: 36px; padding: 0 15px;
    border: 1px solid var(--ink); border-radius: var(--r-4);
    font-size: 15px; color: var(--ink); white-space: nowrap;
}
.suggest-chip span { font-size: 13px; opacity: .4; }
.suggest-chip:hover { border-color: var(--blue); color: var(--ink); }
.suggest-row {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
    padding: 9px 16px; border-bottom: 1px solid var(--ink-10);
    font-size: 15px; color: var(--ink);
}
.suggest-row:hover { background: var(--bg-grey); border-radius: var(--r-4); color: var(--ink); }
.suggest-row .name { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; min-width: 0; }
.suggest-row .off { color: var(--orange); font-size: 12px; font-weight: 600; white-space: nowrap; }
.suggest-row .price { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.suggest-row .price b { font-weight: 600; }
.suggest-row .price s { font-size: 13px; opacity: .3; }
.suggest-set .name { flex-direction: column; align-items: flex-start; gap: 8px; }
.suggest-empty { font-size: 24px; font-weight: 700; margin: 24px 0 12px; }
.suggest-corrected { margin: 16px 0 0; font-size: 14px; opacity: .6; }

@media (max-width: 767px) {
    .srch { padding: 0; }
    .srch-card { max-width: none; border-radius: 0 0 var(--r-16) var(--r-16); }
    .srch-top { gap: 12px; padding: 16px 20px 0; }
    .srch-form { height: 52px; gap: 12px; padding: 0 12px; }
    .srch-body { padding: 0 20px 20px; }
    .suggest-chip { height: 34px; padding: 0 12px; font-size: 14px; }
    .suggest-row { flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px 0; }
    .suggest-row:hover { padding-left: 8px; padding-right: 8px; }
    .suggest-empty { font-size: 19px; }

    /* Город: панель во всю ширину с полями, сразу под строкой топбара (макет 75:2593) */
    .drop-panel { position: fixed; top: 34px; left: var(--gutter); right: var(--gutter); width: auto; max-height: calc(100dvh - 110px); overflow-y: auto; }
}