/* Каркас сайта. Оформление уточняется на этапе 3. */

:root {
    /* ---------------------------------------------------- палитра
     * Один набор на весь сайт. Чтобы сменить оформление, меняются
     * значения здесь, а не восемьдесят мест по файлу.
     */

    /* фирменный цвет и его оттенки: алый с графитом */
    --accent: #D92D20;
    --accent-dark: #B42318;
    --accent-soft: #F7B4AF;
    --accent-tint: #FEE4E2;
    --accent-ink: #FFFFFF;

    /* текст */
    --ink: #16181B;
    --ink-2: #434C57;
    --ink-3: #646E7A;
    --ink-4: #717B87;

    /* поверхности и линии */
    --paper: #FFFFFF;
    --surface: #F6F7F8;
    --surface-2: #EFF1F3;
    --tint: #F3F4F6;
    --tint-2: #F8F9FA;
    --line: #D8DCE1;
    --line-2: #E4E7EB;
    --line-3: #B8BEC6;

    /* смысловые цвета: успех, предупреждение, ошибка, находка */
    --ok: #0F7A47;
    --ok-bg: #E7F5EE;
    --warn: #8A5A00;
    --warn-bg: #FFF4E0;
    --bad: #B42318;
    --bad-bg: #FEE4E2;
    --find: #F6C445;
    --find-ink: #B07D06;
    --find-bg: #FFF6DC;

    /* форма */
    --radius: 14px;
    --radius-sm: 10px;
    --radius-pill: 999px;
    --shadow: 0 1px 3px rgba(22, 24, 27, 0.12);

    /* старые имена: оставлены, чтобы ничего не отвалилось */
    /* фирменные цвета провайдеров входа */
    --yandex: #FC3F1D;
    --yandex-bg: #000000;
    --vk: #0077FF;

    --blue: var(--accent);
    --blue-dark: var(--accent-dark);
}

/* ---------------------------------------------------------- тёмная тема
 * Переопределяем только переменные: вся остальная разметка о теме не
 * знает. По умолчанию тема берётся из системы, кнопка в шапке её
 * переключает и запоминает выбор в браузере.
 */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --ink: #F2F4F7;
        --ink-2: #B6BEC9;
        --ink-3: #8E98A5;
        --ink-4: #828C99;

        --paper: #15181C;
        --surface: #1C2026;
        --surface-2: #242933;
        --tint: #222730;
        --tint-2: #1A1E24;
        --line: #333A44;
        --line-2: #2B313A;
        --line-3: #454E5A;

        --accent: #F0564A;
        --accent-dark: #FF7268;
        --accent-soft: #6A2420;
        --accent-tint: #2A1D1C;

        --ok: #4ECB8C;
        --ok-bg: #16281F;
        --warn: #E0B457;
        --warn-bg: #2A2316;
        --bad: #FF8B80;
        --bad-bg: #2E1B19;
        --find: #F6C445;
        --find-ink: #F6C445;
        --find-bg: #2E2714;

        --shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
        color-scheme: dark;
    }
}

:root[data-theme="dark"] {
    --ink: #F2F4F7;
    --ink-2: #B6BEC9;
    --ink-3: #8E98A5;
    --ink-4: #828C99;

    --paper: #15181C;
    --surface: #1C2026;
    --surface-2: #242933;
    --tint: #222730;
    --tint-2: #1A1E24;
    --line: #333A44;
    --line-2: #2B313A;
    --line-3: #454E5A;

    --accent: #F0564A;
    --accent-dark: #FF7268;
    --accent-soft: #6A2420;
    --accent-tint: #2A1D1C;

    --ok: #4ECB8C;
    --ok-bg: #16281F;
    --warn: #E0B457;
    --warn-bg: #2A2316;
    --bad: #FF8B80;
    --bad-bg: #2E1B19;
    --find: #F6C445;
    --find-ink: #F6C445;
    --find-bg: #2E2714;

    --shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    color-scheme: dark;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Golos Text', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-dark); text-decoration: underline; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3 { letter-spacing: -0.01em; }

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.spacer { flex-grow: 1; }
.muted { color: var(--ink-3); }
.small { font-size: 13px; }
.visually-hidden {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ------------------------------------------------------------ кнопки */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 18px;
    background: var(--blue);
    border: 1px solid var(--blue);
    border-radius: var(--radius-pill);
    color: var(--paper);
    font-size: 15px;
    font-weight: 500;
}
.button:hover { background: var(--blue-dark); border-color: var(--blue-dark); color: var(--paper); text-decoration: none; }

.button-invert {
    background: var(--paper);
    border-color: var(--paper);
    color: var(--blue);
}
.button-invert:hover { background: var(--tint); border-color: var(--tint); color: var(--blue-dark); }

.icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    background: var(--tint);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    color: var(--blue);
}

.link-muted { color: var(--ink-3); font-size: 15px; }
.link-muted:hover { color: var(--ink); }

.chip {
    display: inline-block;
    padding: 6px 14px;
    background: var(--tint);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    font-size: 14px;
    color: var(--ink-2);
}
.chip:hover { color: var(--blue-dark); text-decoration: none; }

.badge {
    display: inline-block;
    padding: 4px 11px;
    background: var(--tint);
    border-radius: var(--radius-pill);
    font-size: 13px;
    color: var(--blue);
}
.badge-grey { background: var(--tint-2); color: var(--ink-2); }

/* ------------------------------------------------------------ шапка */

.topbar { border-bottom: 1px solid var(--line); }
.topbar-inner {
    display: flex;
    align-items: center;
    gap: 16px;
    height: 72px;
}
.topnav a { white-space: nowrap; }
.topbar-inner .link-muted { white-space: nowrap; }

.country {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 14px;
    background: var(--tint);
    border: 1px solid var(--line);
    font-size: 15px;
    font-weight: 500;
    color: var(--ink);
    white-space: nowrap;
}

.topnav { display: flex; align-items: center; gap: 20px; }
.topnav a { color: var(--ink); font-size: 16px; font-weight: 700; }
.topnav a:hover { color: var(--accent); text-decoration: none; }

.topsearch {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 1 1 340px;
    max-width: 520px;
    height: 42px;
    padding: 0 4px 0 15px;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    color: var(--ink-3);
}
.topsearch input {
    flex-grow: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 15px;
    color: var(--ink);
}
.topsearch button {
    height: 34px;
    padding: 0 17px;
    background: var(--blue);
    border: 0;
    border-radius: var(--radius-pill);
    color: var(--paper);
    font-size: 14px;
    font-weight: 500;
}

/* ------------------------------------------------------------ первый экран */

.hero { padding: 64px 0 48px; }
.hero-inner { display: flex; flex-direction: column; align-items: center; }

.hero-title {
    margin: 0;
    font-family: 'Unbounded', 'Golos Text', sans-serif;
    font-size: 44px;
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -0.02em;
    text-align: center;
}

.hero-lead {
    margin: 16px 0 0;
    max-width: 660px;
    font-size: 18px;
    line-height: 1.5;
    text-align: center;
    color: var(--ink-2);
}

.hero-search { width: 100%; max-width: 860px; margin-top: 32px; }

.tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.tab {
    display: inline-flex;
    align-items: center;
    height: 38px;
    padding: 0 20px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    color: var(--ink-2);
    text-decoration: none;
    cursor: pointer;
}
.tab:hover { border-color: var(--blue); color: var(--blue); text-decoration: none; }
.tab-on, .tab-on:hover {
    background: var(--blue);
    border-color: var(--blue);
    color: var(--paper);
}

.bigsearch {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 62px;
    padding: 0 7px 0 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    color: var(--ink-3);
}
.bigsearch input {
    flex-grow: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 17px;
    color: var(--ink);
}
.bigsearch .button { height: 46px; padding: 0 26px; font-size: 16px; }

.hints { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.hints .muted { font-size: 14px; }

.stats { display: flex; gap: 56px; margin-top: 40px; }
.stat { display: flex; flex-direction: column; align-items: center; }
.stat b { font-size: 27px; font-weight: 700; }
.stat span { font-size: 14px; color: var(--ink-3); }

/* ------------------------------------------------------------ блоки */

.block { padding: 0 0 48px; }
.block-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 18px; }
.block-head h2 { margin: 0; font-size: 24px; font-weight: 600; }

.grid { display: grid; gap: 12px; }
.grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }

.tile {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 15px 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--ink);
}
.tile:hover { border-color: var(--blue); text-decoration: none; }
.tile-row { flex-direction: row; align-items: center; justify-content: space-between; }
.tile-title { font-size: 16px; font-weight: 500; }
.tile-note { font-size: 13px; color: var(--ink-4); }

.card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--ink);
}
.card:hover { border-color: var(--blue); text-decoration: none; }
.card-cover {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin: 14px 0 0 14px;
    border-radius: var(--radius-sm);
    background: var(--accent-tint);
    font-size: 20px;
    font-weight: 700;
    color: var(--accent);
}
.card-body { display: flex; flex-direction: column; gap: 6px; padding: 15px 17px 17px; }
.card-title { font-size: 17px; font-weight: 600; }
.card-note { font-size: 14px; color: var(--ink-3); }
.card-tags { display: flex; gap: 8px; margin-top: 4px; }

.promo {
    display: flex;
    align-items: center;
    gap: 40px;
    padding: 36px 40px;
    background: var(--blue);
    color: var(--paper);
}
.promo-text { flex-grow: 1; }
.promo h2 { margin: 0 0 8px; font-size: 25px; font-weight: 600; color: var(--paper); }
.promo p { margin: 0; max-width: 640px; font-size: 16px; line-height: 1.5; color: var(--accent-soft); }

/* ------------------------------------------------------------ внутренние страницы */

.page { padding: 28px 0 56px; }
.crumbs { font-size: 14px; color: var(--ink-3); margin-bottom: 14px; }
.crumbs a { color: var(--ink-3); }
.page h1 { margin: 0 0 14px; font-size: 32px; font-weight: 600; }
.page h2 { margin: 32px 0 14px; font-size: 22px; font-weight: 600; }

.meta { display: flex; flex-wrap: wrap; gap: 20px; font-size: 15px; color: var(--ink-2); margin-bottom: 8px; }

.list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.list li { padding: 13px 0; border-bottom: 1px solid var(--line-2); }
.list .muted { margin-left: 10px; font-size: 14px; }

table { border-collapse: collapse; width: 100%; font-size: 15px; }
th, td { border-bottom: 1px solid var(--line-2); padding: 12px 14px; text-align: left; }
th { background: var(--tint-2); font-weight: 600; font-size: 13px; color: var(--ink-3); }
td:first-child { font-weight: 600; color: var(--blue); }

.tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 14px 0; }
.tag {
    display: inline-block;
    padding: 5px 12px;
    background: var(--tint);
    border: 1px solid var(--line);
    font-size: 13px;
    color: var(--ink-2);
}

.info { display: grid; grid-template-columns: 200px 1fr; gap: 8px 20px; margin: 0 0 22px; font-size: 15px; }
.info dt { color: var(--ink-3); }
.info dd { margin: 0; }

.text { max-width: 760px; font-size: 16px; line-height: 1.6; }
.plan img { max-width: 100%; height: auto; border: 1px solid var(--line); }

/* ------------------------------------------------------------ подвал */

.site-footer { margin-top: 40px; border-top: 1px solid var(--line); }
.footer-inner { display: flex; gap: 64px; padding-top: 36px; padding-bottom: 28px; }
.footer-brand { width: 300px; }
.footer-brand .logo { font-family: 'Unbounded', sans-serif; font-size: 17px; font-weight: 600; }
.footer-brand p { margin: 10px 0 0; font-size: 14px; line-height: 1.55; color: var(--ink-3); }
.footer-col { display: flex; flex-direction: column; gap: 9px; }
.footer-col a, .footer-col span { font-size: 14px; color: var(--ink-2); }
.footer-title { font-size: 14px; font-weight: 600; color: var(--ink); }
.footer-bottom {
    padding-top: 18px;
    padding-bottom: 24px;
    border-top: 1px solid var(--line-2);
    font-size: 14px;
    color: var(--ink-3);
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    align-items: baseline;
    justify-content: space-between;
}

/* Ссылки на документы: по закону они должны быть видны с любой
 * страницы, поэтому живут в подвале, а не на отдельной странице */
.footer-legal {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
}
.footer-legal a { color: var(--ink-3); text-decoration: underline; }
.footer-legal a:hover { color: var(--accent); }

/* Страница юридического документа */
.wrap-narrow { max-width: 840px; }
.legal-head {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin: 6px 0 22px;
}
.legal-body h2 { font-size: 20px; margin: 26px 0 10px; }
.legal-body h3 { font-size: 17px; margin: 20px 0 8px; }
.legal-body p, .legal-body li { line-height: 1.65; }
.legal-body ol, .legal-body ul { padding-left: 22px; margin: 0 0 14px; }
.legal-body li { margin-bottom: 6px; }

/* ------------------------------------------------------------ адаптив */

@media (max-width: 1100px) {
    .grid-6 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer-inner { flex-wrap: wrap; gap: 40px; }
}

@media (max-width: 760px) {
    .topbar-inner { flex-wrap: wrap; height: auto; padding-top: 12px; padding-bottom: 12px; }
    .topnav, .topsearch, .link-muted { display: none; }
    .hero { padding: 40px 0 32px; }
    .hero-title { font-size: 28px; }
    .hero-lead { font-size: 16px; }
    .bigsearch { height: 54px; padding-left: 14px; }
    .bigsearch input { font-size: 16px; }
    .bigsearch .button { padding: 0 16px; }
    .stats { gap: 28px; flex-wrap: wrap; justify-content: center; }
    .grid-6, .grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid-4 { grid-template-columns: 1fr; }
    .promo { flex-direction: column; align-items: flex-start; gap: 20px; padding: 26px 22px; }
    .info { grid-template-columns: 1fr; gap: 2px; }
    .info dd { margin-bottom: 10px; }
    .page h1 { font-size: 24px; }
}

/* элементы второго этапа: видны, но пока не работают */
.soon { opacity: 0.55; cursor: default; }
.soon:hover { text-decoration: none; }
a.button.soon:hover { background: var(--blue); border-color: var(--blue); }

/* ---------------------------------------------------------------- формы */

.field { margin-bottom: 18px; }
.field label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-2);
    margin-bottom: 6px;
}
.field .req { color: var(--bad); }
.field input[type="text"],
.field input[type="email"],
.field input[type="url"],
.field input[type="tel"],
.field input[type="number"],
.field input[type="password"],
.field input[type="search"],
.field select,
.field textarea {
    width: 100%;
    padding: 11px 13px;
    font-family: inherit;
    font-size: 15px;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    outline: none;
}
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--blue); }
.field textarea { resize: vertical; }
.field input[type="file"] { font-size: 14px; }
.field input[type="checkbox"] { width: auto; margin-right: 8px; vertical-align: middle; }
.field-note { margin: 6px 0 0; font-size: 13px; color: var(--ink-3); }
.field-bad input, .field-bad select, .field-bad textarea { border-color: var(--bad); }
.field-bad-text { margin: 6px 0 0; font-size: 13px; color: var(--bad); }
.form-error {
    padding: 12px 14px;
    margin-bottom: 20px;
    background: var(--bad-bg);
    border-left: 3px solid var(--bad);
    border-radius: var(--radius-sm);
}
.form-error p { margin: 0; font-size: 14px; }
.button-wide { width: 100%; text-align: center; }

.notes { margin-bottom: 20px; }
.note {
    padding: 12px 16px;
    margin-bottom: 10px;
    font-size: 14px;
    background: var(--tint);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-sm);
}
.note-success { background: var(--ok-bg); border-left-color: var(--ok); }
.note-error { background: var(--bad-bg); border-left-color: var(--bad); }
.note-wait { background: var(--warn-bg); border-left-color: var(--find-ink); }

/* ---------------------------------------------------------------- вход и регистрация */

.auth { padding: 48px 24px 80px; }
.auth-box {
    max-width: 520px;
    margin: 0 auto;
    padding: 36px 40px 40px;
    background: var(--paper);
    border: 1px solid var(--line-2);
    border-radius: var(--radius);
}
.auth-box h1 { margin: 0 0 20px; font-size: 26px; }
.auth-links {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-top: 20px;
    font-size: 14px;
}

.choice { display: grid; gap: 14px; margin: 22px 0; }
.choice-card {
    display: block;
    padding: 20px 22px;
    border: 1px solid var(--line);
    color: inherit;
    text-decoration: none;
}
.choice-card:hover { border-color: var(--blue); text-decoration: none; }
.choice-title { display: block; font-size: 18px; font-weight: 600; }
.choice-note { display: block; margin: 8px 0 12px; font-size: 14px; color: var(--ink-3); }
.choice-go { display: block; font-size: 14px; font-weight: 500; color: var(--blue); }

/* ---------------------------------------------------------------- личный кабинет */

.cab { padding: 32px 0 72px; }
.cab-inner { display: grid; grid-template-columns: 250px 1fr; gap: 32px; align-items: start; }
.cab-side { border: 1px solid var(--line-2); }
.cab-who { padding: 18px 20px; background: var(--tint); border-bottom: 1px solid var(--line-2); }
.cab-name { font-weight: 600; word-break: break-word; }
.cab-nav { display: flex; flex-direction: column; }
.cab-nav a, .cab-exit {
    padding: 12px 20px;
    font-size: 15px;
    color: var(--ink-2);
    text-align: left;
    text-decoration: none;
    border: 0;
    border-bottom: 1px solid var(--line-2);
    background: none;
}
.cab-nav a:hover, .cab-exit:hover { background: var(--tint-2); color: var(--blue); text-decoration: none; }
.cab-nav a.on { color: var(--blue); font-weight: 500; box-shadow: inset 3px 0 0 var(--blue); }
.cab-exit { width: 100%; font-family: inherit; color: var(--ink-3); cursor: pointer; }
.cab-main { min-width: 0; }
.cab-main h1 { margin: 0 0 18px; font-size: 26px; }
.cab-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.cab-head h1 { margin-bottom: 18px; }

.panel { border: 1px solid var(--line-2); margin-bottom: 24px; }
.panel-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 16px;
    font-size: 15px;
    border-bottom: 1px solid var(--line-2);
}
.panel-row:last-child { border-bottom: 0; }
.panel-row span { color: var(--ink-3); }

.thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.thumb { padding: 6px 10px; font-size: 13px; background: var(--tint); }

.exit-form { display: inline; }
.exit-link { background: none; border: 0; font-size: inherit; padding: 0; }

@media (max-width: 760px) {
    .cab-inner { grid-template-columns: 1fr; }
    .auth-box { padding: 24px 20px 28px; }
    .auth-links { flex-direction: column; gap: 8px; }
}

/* ---------------------------------------------------------------- таблицы */

.grid-table { width: 100%; border-collapse: separate; border-spacing: 0; margin-bottom: 24px; font-size: 15px; }
.grid-table thead th:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.grid-table thead th:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.grid-table th {
    padding: 10px 12px;
    text-align: left;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-3);
    background: var(--tint);
    border-bottom: 1px solid var(--line);
}
.grid-table td { padding: 10px 12px; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.grid-table tr:last-child td { border-bottom: 0; }
.scroll-x { overflow-x: auto; }
.cab-main h2 { margin: 28px 0 12px; font-size: 19px; }
.inline-form { display: inline; }
.mini-link {
    margin-left: 8px;
    padding: 0;
    font-size: 13px;
    font-weight: 400;
    color: var(--blue);
    background: none;
    border: 0;
    text-decoration: underline;
}
.button-quiet {
    background: var(--paper);
    color: var(--ink-2);
    border: 1px solid var(--line);
}
/* фон обязателен: без него при наведении срабатывает правило
 * .button:hover, кнопка заливается тёмно-красным, а текст по
 * .button-quiet:hover остаётся красным — и надпись пропадает */
.button-quiet:hover {
    background: var(--paper);
    border-color: var(--blue);
    color: var(--blue);
}
.actions { display: flex; gap: 10px; flex-wrap: wrap; }
.req { color: var(--bad); }

/* цены на странице магазина */
.price-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.price-search { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.price-search input[type="search"] {
    padding: 10px 16px;
    font-family: inherit;
    font-size: 15px;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--paper);
    color: var(--ink);
    min-width: 260px;
}
.price-table td.num { white-space: nowrap; font-weight: 600; }
.price-old { margin-left: 8px; font-weight: 400; color: var(--ink-3); text-decoration: line-through; }
.stale { color: var(--find-ink); }
.pager { display: flex; gap: 8px; align-items: center; margin: 16px 0 0; font-size: 15px; }
.pager a, .pager span { padding: 7px 14px; border: 1px solid var(--line); border-radius: var(--radius-pill); }
.pager .on { background: var(--blue); color: var(--paper); border-color: var(--blue); }

/* ---------------------------------------------------------------- страница поиска */

.searchbar { margin-bottom: 28px; }
.searchbar .tabs { margin-bottom: 12px; }
.searchbar .bigsearch { margin-bottom: 12px; }
.filters { display: flex; flex-wrap: wrap; gap: 10px; }
.filters select {
    padding: 9px 12px;
    font-family: inherit;
    font-size: 15px;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
}
.filters select:focus { outline: none; border-color: var(--blue); }
.card-plain { cursor: default; }

/* ---------------------------------------------------------------- схемы этажей */

.floor-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.floor-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 20px 0 10px; }
.floor-head h3 { margin: 0; font-size: 18px; }
.plan { position: relative; margin-bottom: 8px; border: 1px solid var(--line-2); background: var(--tint-2); }
.plan img, .plan svg { display: block; max-width: 100%; height: auto; }
.plan-svg svg { width: 100%; }
.pav-shape { fill: var(--accent-tint); stroke: var(--line-3); stroke-width: 1; rx: 4; transition: fill 0.12s; }
.pav-shape:hover { fill: var(--blue); }
.pav-free { fill: var(--surface-2); stroke: var(--line); }
.pav-free:hover { fill: var(--line-3); }
.plan-tip {
    position: absolute;
    z-index: 5;
    padding: 6px 11px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    color: var(--paper);
    background: var(--ink);
    pointer-events: none;
    white-space: nowrap;
}
.pin {
    position: absolute;
    transform: translate(-50%, -50%);
    padding: 4px 9px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 600;
    color: var(--paper);
    background: var(--blue);
    text-decoration: none;
}
.pin:hover { background: var(--blue-dark); color: var(--paper); text-decoration: none; }
.pin-free { background: var(--ink-3); }

/* ---------------------------------------------------------------- обведённые схемы */

.plan-traced { background: var(--paper); }
.plan-traced svg { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; }
.zone-shape { cursor: pointer; transition: fill-opacity 0.12s; }
.zone-shape:hover { fill-opacity: 0.85; }

.zone-list { display: grid; gap: 6px; margin: 16px 0 8px; }
.zone-card { border: 1px solid var(--line-2); }
.zone-card.on { border-color: var(--blue); }
.zone-head {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 11px 14px;
    font-family: inherit;
    font-size: 15px;
    text-align: left;
    color: var(--ink);
    background: var(--paper);
    border: 0;
}
.zone-head:hover { background: var(--tint-2); }
.zone-dot { width: 12px; height: 12px; flex-shrink: 0; border-radius: 50%; }
.zone-name { font-weight: 600; }
.zone-note { color: var(--ink-3); font-size: 14px; }
.zone-count { margin-left: auto; color: var(--ink-3); font-size: 14px; }
.zone-body { padding: 0 14px 14px; }
.zone-shops {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 6px 16px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 15px;
}

.plan-traced { position: relative; }
.plan-traced svg { aspect-ratio: auto; height: 100%; }
.plan-labels { position: absolute; inset: 0; pointer-events: none; }
.zone-label, .pav-label {
    position: absolute;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    font-weight: 600;
    color: var(--paper);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    pointer-events: none;
}
.zone-label { font-size: 13px; }
.zone-label-tall { transform: translate(-50%, -50%) rotate(-90deg); }
.pav-label { font-size: 11px; font-weight: 500; color: var(--ink-2); text-shadow: none; }

/* ---------------------------------------------- магазины на странице ТЦ */
.shop-filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
    justify-content: space-between; margin-bottom: 16px; }
.letters { display: flex; flex-wrap: wrap; gap: 4px; }
.letter { display: inline-block; min-width: 26px; padding: 3px 6px; text-align: center;
    border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: 13px; }
.letter:hover { border-color: var(--accent); }
.letter-on { background: var(--accent); border-color: var(--accent); color: var(--paper); }
.shop-cat select { padding: 5px 8px; border: 1px solid var(--line); background: var(--paper); font-size: 14px; }

.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.shop-card { display: block; padding: 12px 14px; border: 1px solid var(--line-2); background: var(--paper);
    text-decoration: none; color: var(--ink); }
.shop-card:hover { border-color: var(--accent); }
.shop-name { display: block; font-weight: 600; margin-bottom: 3px; }
.shop-cat-name { display: block; font-size: 13px; color: var(--ink-2); }
.shop-place { display: block; font-size: 13px; color: var(--ink-2); margin-top: 4px; }

.pager { display: flex; gap: 14px; align-items: center; margin-top: 16px; }

@media (max-width: 760px) {
    .shop-grid { grid-template-columns: 1fr 1fr; }
}

/* ------------------------------------------------ прайс: фото, наличие, опт */
.price-table .col-photo { width: 96px; }
.price-photo img { display: block; width: 90px; height: 90px; object-fit: cover;
    border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--surface); }
.in-stock, .no-stock { display: inline-block; margin-top: 4px; font-size: 13px;
    padding: 2px 9px; border-radius: var(--radius-pill); }
.in-stock { background: var(--ok-bg); color: var(--ok); }
.no-stock { background: var(--surface-2); color: var(--warn); }
.opt-ask { display: block; margin-top: 6px; padding: 0; border: 0; background: none;
    font-size: 12px; color: var(--accent); cursor: pointer; text-decoration: underline; }
.opt-ask:hover { color: var(--accent-dark); }
.stock-filter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 12px;
    font-size: 15px;
    color: var(--ink-2);
    white-space: nowrap;
    cursor: pointer;
}
.stock-filter input { width: 18px; height: 18px; accent-color: var(--accent); margin: 0; }
.opt-box { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
    max-width: 420px; padding: 16px 18px; background: var(--paper); border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: 0 8px 28px rgba(0,0,0,.18); z-index: 50; }
.opt-box[hidden] { display: none; }
.opt-contacts { display: flex; flex-wrap: wrap; gap: 14px; margin: 8px 0 10px; }
.opt-close { border: 1px solid var(--line); border-radius: var(--radius-pill);
    background: var(--surface); padding: 6px 14px; cursor: pointer; color: var(--ink); }
.price-table .col-photo img { display: block; width: 70px; height: 70px; object-fit: cover;
    border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--surface); }

/* ловушка для роботов: убрана из виду, но доступна для автозаполнения */
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------------------------------------------------- статистика кабинета */
.periods { display: flex; gap: 8px; margin-bottom: 20px; }
.period {
    padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px;
    font-size: 14px; color: var(--ink); text-decoration: none; background: var(--paper);
}
.period-on { background: var(--accent); border-color: var(--accent); color: var(--paper); }

.tiles { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 28px; }
.tile {
    flex: 1 1 160px; min-width: 150px; padding: 16px 18px;
    border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--surface);
}
.tile-num { font-size: 30px; font-weight: 600; line-height: 1.1; }
.tile-cap { font-size: 13px; color: var(--ink-2); margin-top: 6px; line-height: 1.35; }

.chart {
    display: flex; align-items: flex-end; gap: 2px; height: 180px;
    padding: 10px; border: 1px solid var(--line-2); border-radius: 10px;
    background: var(--paper); margin-bottom: 4px;
}
.chart .bar {
    flex: 1; min-width: 3px; background: var(--accent); border-radius: 2px 2px 0 0;
}
.chart .bar-empty { background: var(--line-2); }
.chart-axis {
    display: flex; justify-content: space-between;
    font-size: 12px; color: var(--ink-3); margin-bottom: 20px;
}

/* ------------------------------------------------- зум схемы этажа */
.plan-zoomable { overflow: hidden; touch-action: pan-y; }
.plan-stage { transform-origin: 0 0; transition: transform 0.18s ease-out; }
.plan-zoomed .plan-stage { transition: none; }
.plan-zoomed { cursor: grab; }
.plan-dragging { cursor: grabbing; }
.plan-dragging .plan-stage { transition: none; }

.plan-zoom {
    position: absolute; right: 10px; top: 10px; z-index: 3;
    display: flex; flex-direction: column; gap: 6px; align-items: flex-end;
}
.plan-zoom .pz {
    width: 34px; height: 34px; border: 1px solid var(--line-2); border-radius: 8px;
    background: var(--paper); font-size: 18px; line-height: 1; cursor: pointer;
    color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.plan-zoom .pz:hover { background: var(--tint-2); }
.plan-zoom .pz:disabled { opacity: 0.45; cursor: default; }
.plan-zoom .pz-reset { width: auto; padding: 0 12px; font-size: 13px; height: 30px; }

/* найденный магазин */
.pav-shape.pav-found {
    fill: var(--find) !important; stroke: var(--find-ink) !important; stroke-width: 0.6 !important;
    animation: pav-pulse 1.1s ease-in-out 3;
}
@keyframes pav-pulse {
    0%, 100% { fill-opacity: 1; }
    50% { fill-opacity: 0.45; }
}
.pav-label-found {
    background: var(--find-ink); color: var(--paper); font-weight: 600;
    box-shadow: 0 0 0 3px rgba(246, 196, 69, 0.45);
}
.grid-table tr.row-found td { background: var(--find-bg); }

@media (prefers-reduced-motion: reduce) {
    .pav-shape.pav-found { animation: none; }
    .plan-stage { transition: none; }
}

.on-plan {
    display: inline-block; margin-left: 6px; font-size: 13px;
    color: var(--blue); text-decoration: none; border-bottom: 1px dashed currentColor;
}
.on-plan:hover { border-bottom-style: solid; }

/* ------------------------------------------------- вход через соцсети */
.social-login { margin-top: 20px; }
.social-or { position: relative; text-align: center; margin: 18px 0 14px; }
.social-or::before {
    content: ""; position: absolute; left: 0; right: 0; top: 50%;
    border-top: 1px solid var(--line);
}
.social-or span {
    position: relative; background: var(--paper); padding: 0 12px;
    color: var(--ink-3); font-size: 14px;
}

.social-btn {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    width: 100%; min-height: 52px; margin-bottom: 12px; padding: 0 56px;
    border-radius: 999px; border: 0;
    font-size: 17px; font-weight: 500; color: #FFFFFF; text-decoration: none;
    transition: filter 0.12s;
}
.social-btn:hover { color: #FFFFFF; text-decoration: none; filter: brightness(1.08); }
.social-btn:active { filter: brightness(0.94); }

/* знак в белом кружке у левого края, как на кнопках самих сервисов */
.social-mark {
    position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    width: 32px; height: 32px; border-radius: 50%;
    background: #FFFFFF center / 19px 19px no-repeat;
}

/* Яндекс ID: чёрная кнопка, официальный знак кладём как есть —
   в нём уже красный круг с белой буквой */
.social-yandex { background: var(--yandex-bg); }
.social-yandex .social-mark {
    background-color: transparent;
    background-image: url("../img/yandex.d4d4a1ceddd0.png");
    background-size: 32px 32px;
}

/* VK ID: знак на белой подложке, иначе синее на синем сольётся */
.social-vk { background: var(--vk); }
.social-vk .social-mark {
    background-image: url("../img/vk.d140290370f6.svg");
    border-radius: 9px;
    background-size: 22px 22px;
}

/* ------------------------------------------- прайс: характеристики
 * Описание товара из прайса бывает в двадцать строк. Держим его
 * свёрнутым, чтобы таблица оставалась читаемой, и не режем текст.
 */
.price-name { font-weight: 600; }
.specs { margin: 4px 0; font-size: 14px; }
.specs summary {
    cursor: pointer; color: var(--accent); font-weight: 600;
    list-style: none; padding: 2px 0; width: max-content;
}
.specs summary::-webkit-details-marker { display: none; }
.specs summary::after { content: " \25BE"; }
.specs[open] summary::after { content: " \25B4"; }
.specs p { margin: 6px 0 0; max-width: 90ch; color: var(--ink-2); line-height: 1.5; }

.price-sort { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0; }
.price-sort .chip { text-decoration: none; }
.chip-on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.chip-on:hover { color: var(--paper); }

/* ----------------------------------------------- переключатель темы */
.theme-switch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--paper);
    color: var(--ink-2);
    cursor: pointer;
    flex: 0 0 auto;
}
.theme-switch:hover { color: var(--accent); border-color: var(--accent); }
.theme-switch .sun { display: none; }
:root[data-theme="dark"] .theme-switch .sun { display: block; }
:root[data-theme="dark"] .theme-switch .moon { display: none; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-switch .sun { display: block; }
    :root:not([data-theme="light"]) .theme-switch .moon { display: none; }
}

/* логотип в шапке */
.site-logo { display: flex; align-items: center; flex: 0 0 auto; }
/* логотип крупнее по просьбе заказчика: 48 → 60 на компьютере,
 * 42 → 50 на телефоне. Шапка 72 px, запас по высоте остаётся */
.site-logo img { display: block; height: 60px; width: auto; border-radius: var(--radius-sm); }
:root[data-theme="dark"] .site-logo img { background: #FFFFFF; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .site-logo img { background: #FFFFFF; }
}
@media (max-width: 760px) { .site-logo img { height: 50px; } }

/* --------------------------------------------- витрина товаров
 * Компактные карточки: фото 240 px, остальное текстом. Карточка целиком
 * ведёт на страницу магазина, отдельной страницы товара у нас нет.
 */
.goods {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    align-items: start;
}
.good {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid var(--line-2);
    border-radius: var(--radius);
    background: var(--paper);
    overflow: hidden;
    color: var(--ink);
}
.good:hover { border-color: var(--line-3); text-decoration: none; color: var(--ink); }
.good-shot {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--surface);
    display: grid;
    place-items: center;
}
.good-shot img { display: block; width: 100%; height: 100%; object-fit: contain; }
.good-noshot { font-size: 14px; color: var(--ink-3); }
.good-cut {
    position: absolute; left: 8px; top: 8px;
    padding: 3px 9px; border-radius: var(--radius-sm);
    background: var(--accent); color: #FFFFFF;
    font-size: 13px; font-weight: 700;
}
.good-body { display: flex; flex-direction: column; gap: 5px; padding: 12px; }
.good-price { font-size: 19px; font-weight: 700; }
.good-old { margin-left: 6px; font-size: 14px; font-weight: 400; color: var(--ink-3); text-decoration: line-through; }
.good-name { font-size: 15px; font-weight: 500; }
.good-shop { font-size: 14px; font-weight: 600; color: var(--accent); }
.good-place { font-size: 14px; color: var(--ink-3); }
.good .in-stock { align-self: flex-start; margin-top: 2px; }

@media (max-width: 1100px) { .goods { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .goods { grid-template-columns: repeat(2, 1fr); } }

/* ------------------------------------------------ промо-блок на главной
 * Полоса под шапкой: заказчик правит её текст и ссылку в админке,
 * баннером «Баннеры на главной». Первый включённый попадает сюда.
 */
.promo-top { padding: 18px 0 0; }
.promo-band {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 26px;
    border-radius: var(--radius);
    background: var(--accent);
    color: var(--accent-ink);
    text-decoration: none;
}
.promo-band:hover { background: var(--accent-dark); color: var(--accent-ink); text-decoration: none; }
.promo-band-flat { cursor: default; }
.promo-band-flat:hover { background: var(--accent); }
.promo-band-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.promo-band-title { font-size: 20px; font-weight: 700; }
.promo-band-note { font-size: 15px; opacity: 0.92; }
.promo-band-button {
    flex: 0 0 auto;
    margin-left: auto;
    padding: 10px 20px;
    border-radius: var(--radius-pill);
    background: var(--paper);
    color: var(--accent);
    font-size: 15px;
    font-weight: 600;
}
@media (max-width: 640px) {
    .promo-band { flex-direction: column; align-items: flex-start; padding: 18px 20px; }
    .promo-band-button { margin-left: 0; }
}

/* ------------------------------------- скругления на остальных страницах
 * Форма берётся из тех же переменных, что и на главной: меняется радиус
 * в :root — меняется везде.
 */
.country { border-radius: var(--radius-pill); }
.tag { border-radius: var(--radius-pill); }
.letter { border-radius: var(--radius-sm); }
.thumb { border-radius: var(--radius-pill); }
.shop-cat select { border-radius: var(--radius-pill); }

.cab-side { border-radius: var(--radius); overflow: hidden; }
.choice-card { border-radius: var(--radius); }
.panel { border-radius: var(--radius); overflow: hidden; }
.zone-card { border-radius: var(--radius); overflow: hidden; }
.shop-card { border-radius: var(--radius); }

.plan { border-radius: var(--radius); overflow: hidden; }
.plan img { border-radius: var(--radius); }
.floor-tab, .plan-tool { border-radius: var(--radius-pill); }

/* ------------------------------------------------- схема-сетка этажа
 * Рисуется из описания линий: прямоугольник на линию, кружок на магазин.
 * Цвета берём из переменных, поэтому схема живёт в обеих темах.
 */
.grid-plan { display: grid; gap: 14px; }
.grid-note { margin: 0; }
.grid-box {
    overflow-x: auto;
    border: 1px solid var(--line-2);
    border-radius: var(--radius);
    background: var(--tint-2);
    padding: 10px;
}
.grid-svg { display: block; min-width: 1060px; width: 100%; height: auto; }
.grid-hint { margin: 0; }

/* Зазоры между павильонами нарисованы цветом фона схемы, поэтому в
 * тёмной теме штриховка переключается сама. */
.grid-svg .pav-gap { fill: var(--tint-2); }

/* Стена здания: внутри неё остаётся проход по периметру */
.grid-svg .plan-wall {
    fill: none; stroke: var(--ink-3); stroke-width: 2.5;
}

/* Вход: небольшая метка у стены со стрелкой внутрь */
.grid-svg .gate rect { fill: var(--accent); transition: fill 0.12s; }
.grid-svg .gate text { font-size: 12px; font-weight: 700; fill: #fff; }
.grid-svg .gate-arrow { stroke: var(--accent); stroke-width: 2; fill: none; }
.grid-svg .gate-head { fill: var(--accent); }
.grid-svg .gate:hover rect,
.grid-svg .gate:hover .gate-head { fill: var(--accent-dark); }
.grid-svg .gate:hover .gate-arrow { stroke: var(--accent-dark); }

/* Служебная линия: помещения вдоль стены */
.grid-svg .svc-cell { fill: var(--surface-2); stroke: var(--line); stroke-width: 0.8; }
.grid-svg .svc-mark rect { fill: var(--paper); stroke: var(--ink-3); stroke-width: 1.4; }
.grid-svg .svc-mark text { font-size: 12px; font-weight: 700; fill: var(--ink); }
.grid-svg .svc-name {
    font-size: 12px; font-weight: 700; fill: var(--ink-3);
    paint-order: stroke; stroke: var(--tint-2); stroke-width: 3px;
}

/* Прозрачная плашка поверх колонок ловит наведение на всю линию:
 * иначе курсор проваливается в зазоры между павильонами. */
.grid-svg .lane-hit {
    fill: transparent; stroke: transparent; stroke-width: 1.5;
    transition: stroke 0.12s;
}
.grid-svg .lane:hover .lane-hit { stroke: var(--ink); }
.grid-svg .lane-tag { fill: var(--paper); stroke: var(--line); stroke-width: 1; }
.grid-svg .lane text { font-size: 11.5px; font-weight: 700; fill: var(--ink); }

.grid-legend { display: grid; gap: 8px; }
.legend-list {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: 7px 18px;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.legend-list li { display: flex; gap: 9px; align-items: center; font-size: 14px; }
.legend-dot {
    flex: none; width: 15px; height: 15px; border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.18);
}

/* Точка магазина: белое кольцо с цветным ядром. Одна заливка тонула бы
 * то на тёмной линии, то на светлой, а кольцо видно на любом цвете. */
.grid-dot { cursor: pointer; }
.grid-dot .dot-halo { fill: var(--paper); stroke: var(--ink); stroke-width: 2; }
.grid-dot .dot-core { fill: var(--ink); }
.grid-dot:hover .dot-halo { stroke: var(--accent); }
.grid-dot:hover .dot-core { fill: var(--accent); }
.grid-dot-found .dot-halo { r: 13; fill: var(--find); stroke: var(--find-ink); stroke-width: 3; }
.grid-dot-found .dot-core { r: 5.5; fill: var(--find-ink); }

.grid-found {
    display: grid; gap: 10px; padding: 16px;
    border: 1px solid var(--line-2); border-radius: var(--radius);
    background: var(--paper);
}
.grid-found-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.grid-found-head strong { font-size: 17px; }
.grid-where { color: var(--accent); font-weight: 600; }
.grid-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.grid-chips span {
    font-size: 14px; color: var(--ink-2); background: var(--tint);
    border: 1px solid var(--line-2); border-radius: var(--radius-pill); padding: 5px 13px;
}
.grid-sub { margin: 6px 0 0; font-size: 15px; }
.grid-near { display: grid; gap: 8px; }
.grid-near-row {
    display: flex; gap: 12px; align-items: center; justify-content: space-between;
    padding: 10px 14px; border: 1px solid var(--line-2); border-radius: var(--radius-sm);
    color: var(--ink); text-decoration: none;
}
.grid-near-row:hover { border-color: var(--accent); text-decoration: none; color: var(--ink); }
.grid-near-row b { display: block; }
.grid-near-place { font-weight: 700; color: var(--accent); white-space: nowrap; }

/* ------------------------------------------- товар без фотографии
 * Пустое место выглядит как поломка, поэтому рисуем аккуратную
 * заглушку: силуэт и подпись. Видно, что фото нет, а не что сайт сломан.
 */
.no-photo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    height: 100%;
    min-height: 90px;
    padding: 10px;
    text-align: center;
    font-size: 13px;
    line-height: 1.3;
    color: var(--ink-3);
    background:
        repeating-linear-gradient(135deg, var(--surface) 0 10px, var(--surface-2) 10px 20px);
    border-radius: var(--radius-sm);
}
.no-photo::before {
    content: "";
    width: 30px;
    height: 24px;
    border: 2px solid var(--line-3);
    border-radius: 5px;
    background:
        radial-gradient(circle at 30% 35%, var(--line-3) 0 3px, transparent 3px),
        linear-gradient(135deg, transparent 55%, var(--line-3) 55% 70%, transparent 70%);
}

/* ---------------------------------------------- товары в кабинете */
.goods-search { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 16px 0; }
.goods-search input[type="search"] {
    flex: 1 1 260px; min-width: 0; padding: 10px 16px; font: inherit;
    color: var(--ink); background: var(--paper);
    border: 1px solid var(--line); border-radius: var(--radius-pill);
}
.bulk {
    border: 1px solid var(--line-2); border-radius: var(--radius);
    padding: 12px 16px; margin-bottom: 20px; background: var(--surface);
}
.bulk summary { cursor: pointer; font-weight: 600; color: var(--accent); }
.bulk form { display: grid; gap: 10px; margin-top: 12px; justify-items: start; }

.good-row {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 16px;
    padding: 16px;
    margin-bottom: 12px;
    border: 1px solid var(--line-2);
    border-radius: var(--radius);
    background: var(--paper);
}
.good-photo { display: grid; gap: 6px; justify-items: center; align-content: start; }
.good-photo img {
    display: block; width: 120px; height: 120px; object-fit: cover;
    border-radius: var(--radius-sm); border: 1px solid var(--line-2);
}
.good-photo .no-photo { width: 120px; height: 120px; }
.good-photo input[type="file"] { font-size: 12px; max-width: 130px; }
.good-fields { display: grid; gap: 10px; min-width: 0; }
.good-fields .field { display: grid; gap: 4px; }
.good-fields .field span { font-size: 13px; color: var(--ink-3); }
.good-fields input, .good-fields select, .good-fields textarea {
    width: 100%; padding: 9px 12px; font: inherit; color: var(--ink);
    background: var(--paper); border: 1px solid var(--line);
    border-radius: var(--radius-sm); outline: none;
}
.good-fields input:focus, .good-fields select:focus, .good-fields textarea:focus {
    border-color: var(--accent);
}
.good-numbers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.good-actions { display: flex; gap: 12px; align-items: center; justify-content: space-between; }

@media (max-width: 720px) {
    .good-row { grid-template-columns: 1fr; }
    .good-numbers { grid-template-columns: repeat(2, 1fr); }
}

.price-table .col-photo .no-photo { width: 90px; height: 90px; min-height: 0; font-size: 12px; }
.good-shot .no-photo { min-height: 100%; border-radius: 0; }

/* ------------------------------------------- файлы магазина
 * Строка карточек со скачиванием: заметно, но не кричит.
 */
.shop-files h2 { margin-bottom: 12px; }
.files-row { display: flex; gap: 12px; flex-wrap: wrap; }
.file-card {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px; min-width: 260px;
    border: 1px solid var(--line-2); border-radius: var(--radius);
    background: var(--paper); color: var(--ink); text-decoration: none;
}
.file-card:hover { border-color: var(--accent); color: var(--ink); text-decoration: none; }
.file-ext {
    flex: 0 0 auto; display: grid; place-items: center;
    width: 44px; height: 44px; border-radius: var(--radius-sm);
    background: var(--accent-tint); color: var(--accent);
    font-size: 12px; font-weight: 700; letter-spacing: 0.02em;
}
.file-text { display: grid; gap: 2px; min-width: 0; }
.file-text b { font-size: 15px; }
.doc-form { display: grid; gap: 14px; max-width: 520px; margin: 18px 0 28px;
    padding: 18px; border: 1px solid var(--line-2); border-radius: var(--radius);
    background: var(--surface); justify-items: start; }
.doc-form .field { width: 100%; }
.doc-form input[type="text"], .doc-form select {
    width: 100%; padding: 10px 14px; font: inherit; color: var(--ink);
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); }

/* ------------------------------------------- похожие по смыслу
 * Блок появляется, когда обычный поиск нашёл мало: подсказываем
 * товары, которые названы другими словами.
 */
.similar { margin-top: 28px; }
.similar-list { display: grid; gap: 8px; margin-top: 12px; }
.similar-row {
    display: flex; gap: 14px; align-items: center;
    padding: 10px 14px; border: 1px solid var(--line-2);
    border-radius: var(--radius-sm); color: var(--ink); text-decoration: none;
}
.similar-row:hover { border-color: var(--accent); color: var(--ink); text-decoration: none; }
.similar-photo { flex: none; width: 64px; height: 64px; }
.similar-photo img { border-radius: var(--radius-sm); }
.similar-photo .no-photo { min-height: 64px; font-size: 11px; }
.similar-text { flex: 1 1 auto; min-width: 0; }
.similar-text b { display: block; }
.similar-price { font-weight: 700; white-space: nowrap; }

/* ---------------------------------------------- поиск по фотографии */
/* ------------------------------------------- поиск по фотографии
 * Кнопка камеры стоит в строке поиска, а поле файла лежит в своей
 * форме рядом: вложенные формы в HTML запрещены.
 */
.photo-pick { display: inline-flex; }
/* меню считаем от строки поиска, а не от самой кнопки:
 * от кнопки оно уезжает за край экрана на телефоне */
.bigsearch { position: relative; }
label.icon-button {
    cursor: pointer;
    transition: background 0.14s, border-color 0.14s, box-shadow 0.14s,
                color 0.14s, transform 0.14s;
}
/* Соседняя кнопка «Найти» на наведение отзывается, и эта должна:
 * иначе она выглядит неживой картинкой, а не кнопкой */
label.icon-button:hover {
    color: var(--accent);
    background: var(--paper);
    border-color: var(--accent);
    box-shadow: 0 4px 14px rgba(217, 48, 37, 0.22);
}
label.icon-button:active { transform: translateY(1px); box-shadow: none; }
label.icon-button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.photo-pick[data-open] label.icon-button,
label.icon-button[aria-expanded="true"] {
    color: var(--accent);
    border-color: var(--accent);
}

.photo-menu {
    position: absolute; top: calc(100% + 10px); right: 6px; z-index: 30;
    min-width: 252px; padding: 6px;
    background: var(--paper); border: 1px solid var(--line-2);
    border-radius: var(--radius); box-shadow: 0 10px 30px rgba(22, 24, 27, 0.16);
}
.photo-menu-item {
    display: flex; gap: 12px; align-items: center; width: 100%;
    padding: 10px 12px; border: 0; border-radius: var(--radius-sm);
    background: none; text-align: left; cursor: pointer;
    color: var(--ink); font: inherit;
}
.photo-menu-item:hover { background: var(--tint); }
.photo-menu-item svg { flex: none; color: var(--accent); }
.photo-menu-item b { display: block; font-size: 15px; }
.photo-menu-item .small { display: block; }

/* Пока снимок уходит на сервер, человек видит его и понимает,
 * что нажатие сработало и поиск идёт. */
.photo-wait {
    position: fixed; inset: 0; z-index: 90;
    display: flex; align-items: center; justify-content: center;
    background: rgba(12, 14, 17, 0.72);
    padding: 20px;
}
/* display у класса сильнее атрибута hidden, и спрятанный слой
 * перехватывал бы нажатия по всей странице */
.photo-wait[hidden] { display: none; }
.photo-menu[hidden] { display: none; }

/* на узком экране меню шире самой кнопки: прижимаем его к правому
 * краю строки поиска, иначе оно уезжает за границу */
@media (max-width: 560px) {
    .photo-menu { right: 6px; left: 6px; min-width: 0; }
    .photo-wait-box { flex-direction: column; text-align: center; }
}
.photo-wait-box {
    display: flex; gap: 18px; align-items: center;
    max-width: 420px; padding: 18px;
    background: var(--paper); border-radius: var(--radius);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}
.photo-wait-box img {
    width: 104px; height: 104px; flex: none;
    object-fit: cover; border-radius: var(--radius-sm);
    background: var(--surface-2);
}
.photo-wait-text b { display: block; margin-bottom: 3px; }
.photo-wait-text .small { display: block; }
.spinner {
    display: inline-block; width: 17px; height: 17px; margin-bottom: 8px;
    border: 2px solid var(--line); border-top-color: var(--accent);
    border-radius: 50%; animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
body.is-waiting { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
    .spinner { animation-duration: 2.4s; }
}
.why {
    display: inline-block; margin-top: 3px; font-size: 12px;
    color: var(--ink-3); background: var(--tint);
    border-radius: var(--radius-pill); padding: 2px 10px;
}
.note-bad {
    padding: 12px 16px; border-radius: var(--radius-sm);
    background: var(--bad-bg); color: var(--bad);
}
.back-link { margin-top: 24px; }


/* ------------------------------------------- съёмка с камеры ноутбука */

.shot {
    position: fixed; inset: 0; z-index: 90;
    display: flex; align-items: center; justify-content: center;
    padding: 20px; background: rgba(22, 24, 27, 0.72);
}
.shot[hidden] { display: none; }

.shot-box {
    width: min(720px, 100%);
    padding: 16px;
    background: var(--paper);
    border-radius: var(--radius-lg, 16px);
    box-shadow: 0 20px 60px rgba(22, 24, 27, 0.35);
    text-align: center;
}
.shot-box video {
    width: 100%; max-height: 62vh;
    background: #000; border-radius: var(--radius);
    display: block; object-fit: contain;
}
.shot-note { margin: 12px 0 14px; font-size: 15px; color: var(--ink-2); }
.shot-buttons { display: flex; gap: 10px; justify-content: center; }


/* ------------------------------------------------ карусель подборок */

.carousel {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding-bottom: 6px;
    /* полосу прокрутки прячем: листают стрелками, пальцем или колесом */
    scrollbar-width: none;
}
.carousel::-webkit-scrollbar { display: none; }

.carousel-arrows { display: flex; gap: 8px; }
.carousel-arrow {
    width: 38px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--tint); border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    color: var(--ink-2); cursor: pointer;
    transition: border-color 0.14s, color 0.14s, background 0.14s;
}
.carousel-arrow:hover {
    border-color: var(--accent); color: var(--accent); background: var(--paper);
}
.carousel-arrow[disabled] { opacity: 0.4; cursor: default; }
.carousel-arrow[disabled]:hover {
    border-color: var(--line); color: var(--ink-2); background: var(--tint);
}

.showcase {
    position: relative;
    flex: 0 0 300px;
    scroll-snap-align: start;
    height: 200px;
    border-radius: var(--radius);
    overflow: hidden;
    display: block;
    background: var(--tint-2);
    border: 1px solid var(--line-2);
    text-decoration: none;
    transition: transform 0.16s, box-shadow 0.16s;
}
.showcase:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(22, 24, 27, 0.16);
    text-decoration: none;
}
.showcase-photo {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Подпись лежит поверх фотографии, поэтому под ней затемнение:
 * на светлом снимке белый текст иначе не прочитать */
.showcase-text {
    position: absolute; left: 0; right: 0; bottom: 0;
    display: flex; flex-direction: column; gap: 4px;
    padding: 14px 16px 16px;
    color: #fff;
    background: linear-gradient(transparent, rgba(16, 17, 20, 0.82));
}
.showcase-text b { font-size: 17px; line-height: 1.25; }
.showcase-note { font-size: 13.5px; opacity: 0.88; }
.showcase-badge {
    align-self: flex-start;
    padding: 2px 9px; margin-bottom: 2px;
    background: var(--accent); border-radius: var(--radius-pill);
    font-size: 12px; font-weight: 700;
}

/* Карточка без фотографии: светлая, с обычным текстом */
.showcase-plain { background: var(--tint); }
.showcase-plain .showcase-text {
    position: static; height: 100%; justify-content: flex-end;
    color: var(--ink); background: none;
}
.showcase-plain .showcase-note { color: var(--ink-3); opacity: 1; }

/* Пометка о рекламе: по закону она должна быть видна, но мешать
 * смотреть на карточку не должна */
.showcase-ad {
    margin-top: 4px;
    font-size: 11.5px;
    letter-spacing: 0.02em;
    opacity: 0.72;
}
.showcase-plain .showcase-ad { color: var(--ink-3); opacity: 1; }

@media (max-width: 560px) {
    .showcase { flex-basis: 78%; height: 180px; }
    .carousel-arrows { display: none; }
}

/* ------------------------------------------------- строка товара
 * Один вид строки на весь сайт: прайс магазина, выдача поиска словами,
 * выдача поиска по фотографии и блок «ещё из магазина».
 *
 * Раньше это была таблица в четыре колонки. На телефоне колонка с ценой
 * уезжала за край экрана, а нажать на строку было негде: единственной
 * ссылкой была фотография, и та открывала файл снимка. Теперь это
 * список, цена всегда на виду, и строка целиком ведёт на страницу
 * товара.
 */
.items-list { display: grid; gap: 10px; margin-top: 14px; }
.item-row {
    position: relative;
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr) auto;
    grid-template-areas: "pic text sums";
    gap: 16px;
    align-items: center;
    padding: 12px 16px;
    border: 1px solid var(--line-2);
    border-radius: var(--radius);
    background: var(--paper);
}
.item-row:hover { border-color: var(--accent); }
.item-row-nopic { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "text sums"; }

.item-pic { grid-area: pic; display: block; width: 104px; }
.item-pic img {
    display: block; width: 104px; height: 104px; object-fit: cover;
    border-radius: var(--radius-sm); border: 1px solid var(--line-2);
}
.item-pic .no-photo { width: 104px; height: 104px; min-height: 0; font-size: 12px; }

.item-text { grid-area: text; display: grid; gap: 3px; min-width: 0; }
/* подложка во всю строку: нажимается любое место, кроме других ссылок */
.item-link {
    font-size: 16px; font-weight: 600; line-height: 1.35;
    color: var(--ink); text-decoration: none;
}
.item-link::before { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.item-row:hover .item-link { color: var(--accent); }
.item-line { line-height: 1.3; }
.item-place { font-size: 14px; color: var(--ink-2); line-height: 1.4; }
/* «показать на схеме» лежит поверх подложки, иначе его не нажать */
.item-place a, .item-sums button, .item-sums a { position: relative; z-index: 1; }

.item-sums {
    grid-area: sums;
    display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
    white-space: nowrap;
}
.item-sum { font-size: 19px; font-weight: 700; color: var(--ink); }
.item-sum-none { font-size: 15px; font-weight: 600; color: var(--ink-3); }
.item-sums .price-old { margin: 0; font-size: 14px; }
.item-sums .in-stock, .item-sums .no-stock { margin-top: 0; }

/* На телефоне цена уходит под название и остаётся крупной и видимой */
@media (max-width: 640px) {
    .item-row {
        grid-template-columns: 84px minmax(0, 1fr);
        grid-template-areas: "pic text" "sums sums";
        gap: 12px;
        align-items: start;
    }
    .item-row-nopic { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "sums"; }
    .item-pic, .item-pic img, .item-pic .no-photo { width: 84px; }
    .item-pic img, .item-pic .no-photo { height: 84px; }
    .item-sums {
        flex-direction: row; align-items: center; flex-wrap: wrap;
        gap: 10px; padding-top: 2px;
        border-top: 1px solid var(--line-2);
    }
    .item-sum { font-size: 20px; }
}

/* --------------------------------------------- страница товара
 * Своя страница у каждой позиции прайса. Нужна затем, что человеку мало
 * цены: ему надо знать, в каком магазине товар, в каком торговом центре,
 * на какой линии и как туда дойти. Сюда ведут обе выдачи поиска.
 */
.item-page {
    display: grid;
    grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
    margin-top: 10px;
}
.item-shot {
    display: grid; gap: 10px; justify-items: center;
    padding: 14px;
    border: 1px solid var(--line-2); border-radius: var(--radius);
    background: var(--surface);
}
.item-shot img { display: block; max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.item-shot .no-photo { min-height: 260px; border-radius: var(--radius-sm); }
.item-zoom { font-size: 14px; }

.item-main { min-width: 0; }
.item-main h1 { margin-bottom: 6px; }
.item-brand { margin: 0 0 10px; font-weight: 600; color: var(--ink-2); }
.item-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin: 6px 0 10px; }
.item-main .item-sum { font-size: 30px; }
.item-main .item-sum-none { font-size: 22px; }
.item-unit { font-size: 15px; color: var(--ink-3); }
.item-state { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 0 0 4px; }
.item-state .in-stock, .item-state .no-stock { margin-top: 0; }
.item-sku { font-size: 14px; color: var(--ink-3); }
.item-opt { font-size: 15px; color: var(--ink-2); }

.item-where {
    margin-top: 20px; padding: 16px 18px;
    border: 1px solid var(--line-2); border-radius: var(--radius);
    background: var(--surface);
}
.item-where h2 { margin: 0 0 10px; font-size: 19px; }
.item-where .info { margin: 0; }
.item-shop { margin: 0 0 10px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.item-shop a { font-size: 17px; font-weight: 700; }
.item-contacts { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 0; }
.item-specs { margin-top: 22px; }
.item-specs h2 { font-size: 19px; margin-bottom: 8px; }
.item-note { margin-top: 20px; }

@media (max-width: 860px) {
    .item-page { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .item-shot .no-photo { min-height: 200px; }
}

/* Как поиск понял запрос. Видимой строкой, а не серой мышью:
 * человек должен понимать, почему на «подарок сыну» ему показали
 * колонку, и не считать, что поиск сошёл с ума. */
.ai-hint {
    margin: 4px 0 14px;
    padding: 10px 14px;
    border: 1px solid var(--line-2);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink-2);
    font-size: 15px;
}
.ai-hint b { color: var(--ink); }

/* Шапка на ноутбуке: при ширине около 1280 строка не помещалась, и
 * «Добавить магазин» с кнопкой «Войти» уезжали за край экрана вместе с
 * горизонтальной прокруткой всей страницы. Поле поиска тянется, когда
 * место есть, и ужимается, когда его нет. */
.topsearch { flex: 1 1 220px; min-width: 0; }
.topsearch input { min-width: 0; }

/* Нажимаемый тег: ведёт в поиск товаров по этому слову. Выглядит как
 * хештег, но заполнять магазину ничего лишнего не надо — теги у него
 * и так есть. */
.tag-link { text-decoration: none; }
.tag-link:hover {
    border-color: var(--accent);
    color: var(--accent);
    text-decoration: none;
}

/* Подсказка новичку. Закрывается своей кнопкой и больше не
 * возвращается. Текст обычного размера: мелкие серые подсказки не
 * читает никто. */
.hint {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin: 0 0 18px;
    padding: 11px 16px;
    border: 1px solid var(--line-2);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink-2);
    font-size: 15px;
}
.hint-close {
    margin-left: auto;
    padding: 6px 14px;
    font: inherit;
    font-size: 14px;
    color: var(--ink-2);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    cursor: pointer;
}
.hint-close:hover { border-color: var(--accent); color: var(--accent); }

/* ------------------------------------------------ фильтры поиска
 * Панель спрятана за кнопкой «Фильтры» справа от «Найти». Прячем не
 * из любви к минимализму: большинство ищет словом, и шесть полей в
 * первом экране им мешают. Кто фильтровал — тому панель открыта сразу.
 */
.filters-line { display: flex; justify-content: flex-end; margin-top: 10px; }
.filters-toggle { white-space: nowrap; }
.bigsearch .filters-toggle { flex: 0 0 auto; }

.filters-box {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px 20px;
    margin-top: 12px;
    padding: 14px 18px;
    border: 1px solid var(--line-2);
    border-radius: var(--radius);
    background: var(--surface);
}
.filters-box[hidden] { display: none; }

.filter { display: flex; align-items: center; gap: 10px; }
.filter-name { font-size: 15px; color: var(--ink-2); white-space: nowrap; }
.filter-pair { display: flex; align-items: center; gap: 8px; }
.filters-box input[type="text"] {
    width: 92px;
    padding: 9px 12px;
    font: inherit;
    font-size: 15px;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    outline: none;
}
.filters-box input[type="text"]:focus { border-color: var(--accent); }
.filters-box select {
    padding: 9px 12px;
    font: inherit;
    font-size: 15px;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    max-width: 220px;
}
.filter-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    color: var(--ink-2);
    white-space: nowrap;
    cursor: pointer;
}
.filter-go { margin-left: auto; }

@media (max-width: 640px) {
    .filters-box { gap: 12px 14px; padding: 14px; }
    .filter, .filter-check { width: 100%; }
    .filters-box input[type="text"] { width: 100%; }
    .filters-box select { max-width: none; width: 100%; }
    .filter-pair { flex: 1 1 auto; }
    .filter-go { width: 100%; margin-left: 0; }
}

/* На узком экране кнопка «Фильтры» выдавливала строку поиска в ноль:
 * поле ввода ужималось до полоски, а искать было негде. Поэтому на
 * телефоне кнопка уходит из строки и встаёт под ней, во всю ширину. */
@media (max-width: 760px) {
    .searchbar .bigsearch { flex-wrap: wrap; height: auto; padding: 8px 8px 8px 14px; }
    .searchbar .bigsearch input { flex: 1 1 100%; order: -1; height: 44px; }
    /* лупа висела бы под полем рядом с кнопками и только путала */
    .searchbar .bigsearch > svg { display: none; }
    .bigsearch .filters-toggle { flex: 1 1 auto; justify-content: center; }
    .filters-line { justify-content: stretch; }
    .filters-line .filters-toggle { width: 100%; }
}

/* ---------------------------------------- карусель товаров на главной
 * Карточка товара, а не баннер: фото сверху, под ним цена, название и
 * где купить. Подпись не кладём поверх снимка, как у подборок: на
 * фотографии товара текст поверх читается плохо и закрывает сам товар.
 */
.showcase-good {
    flex-basis: 240px;
    height: auto;
    display: flex;
    flex-direction: column;
    background: var(--paper);
    color: var(--ink);
}
.showcase-good:hover { color: var(--ink); }
.showcase-good-shot {
    display: block;
    aspect-ratio: 1 / 1;
    background: var(--surface);
}
.showcase-good-shot img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.showcase-good-body {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 12px 14px 14px;
}
.showcase-good-price { font-size: 19px; font-weight: 700; }
.showcase-good-price .good-old { margin-left: 6px; }
.showcase-good-name {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3;
    /* длинное название не растягивает карточку: две строки и точки */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.showcase-good-where { font-size: 14px; color: var(--ink-2); line-height: 1.35; }
.block-more { margin-top: 18px; }

@media (max-width: 560px) {
    .showcase-good { flex-basis: 64%; height: auto; }
}

/* кнопки панели фильтров: сброс слева, показ справа */
.filter-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-left: auto;
}
.filter-reset { font-size: 15px; color: var(--ink-2); }
.filter-reset:hover { color: var(--accent); }
.filter-go { margin-left: 0; }

@media (max-width: 640px) {
    .filter-actions { width: 100%; flex-direction: column-reverse; gap: 10px; }
    .filter-actions .filter-go { width: 100%; }
}

/* Атрибут hidden у полей панели. Без этого правила .filter и
 * .filter-check с их display: flex перебивали hidden, и поле цены
 * оставалось видно на вкладке «Магазины и ТЦ», где ему не место */
.filters-box [hidden] { display: none !important; }

/* Строка поиска на главной на телефоне: то же, что на странице поиска.
 * Поле ввода сверху во всю ширину, кнопки под ним. Иначе камера и
 * «Найти» сжимали поле до «Электровелоси…» */
@media (max-width: 760px) {
    .hero-form .bigsearch { flex-wrap: wrap; height: auto; padding: 8px 8px 8px 14px; }
    .hero-form .bigsearch input { flex: 1 1 100%; order: -1; height: 44px; }
    .hero-form .bigsearch > svg { display: none; }
    .hero-form .bigsearch .button { flex: 1 1 auto; justify-content: center; }
}

/* выпадающие списки панели: «Выберите торговый центр» целиком */
.filters-box select { min-width: 220px; max-width: 280px; }
@media (max-width: 640px) { .filters-box select { min-width: 0; } }

/* на телефоне подпись над списком, а не слева: длинное «Торговый центр»
 * иначе съедало половину ширины, и в списке обрезался сам выбор */
@media (max-width: 640px) {
    .filters-box .filter { flex-direction: column; align-items: stretch; gap: 6px; }
    .filters-box .filter-pair { width: 100%; }
}

/* Плашка cookie: внизу, не перекрывает поиск, текст обычного размера */
.cookie-note {
    position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 50;
    max-width: 760px; margin: 0 auto; padding: 14px 16px;
    display: flex; gap: 14px; align-items: center;
    background: var(--paper); color: var(--ink);
    border: 1px solid var(--line); border-radius: 12px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .12);
    font-size: 15px; line-height: 1.4;
}
.cookie-note[hidden] { display: none; }
.cookie-note a { color: inherit; text-decoration: underline; }
.cookie-note .button { flex: none; }
@media (max-width: 640px) {
    .cookie-note { flex-direction: column; align-items: stretch; font-size: 14px; }
}

/* Схемы чёрно-белые: по просьбе заказчика, как в 2ГИС. Цвет рядов из
   редактора не используем, иначе 100 точек тонут в пёстрой заливке */
.grid-svg .lane-fill { fill: var(--surface-2); stroke: var(--line-3); stroke-width: 1; }
.zone-shape { fill: var(--surface-2); fill-opacity: 1; stroke: var(--line-3); }
.zone-shape:hover { fill: var(--line-2); fill-opacity: 1; }
.zone-list .zone-dot { background: var(--ink-3) !important; }
.grid-dot .dot-halo { stroke-width: 1.5; }
.grid-dot-found .dot-halo { r: 9; stroke-width: 2.5; }
.grid-dot-found .dot-core { r: 4; }

/* Вертикальная схема (как на картах): узкая и высокая, поэтому не
 * растягиваем её на всю ширину, а ставим по центру */
.grid-svg.grid-svg-v { min-width: 560px; max-width: 760px; margin: 0 auto; }
.grid-svg .plan-wall { stroke-linejoin: round; }
.grid-svg .wall-name {
    font-size: 11.5px; font-weight: 700; fill: var(--ink);
    paint-order: stroke; stroke: var(--paper); stroke-width: 3px;
}