/*
 * Каталог: панель, параметры слева, товары справа по три в ряд.
 *
 * Блок самостоятельный, со своими классами ushop. В контейнеры витрины Tilda
 * не встраиваемся и её CSS не переопределяем — там остались правила,
 * рассчитанные на прежнюю раскладку (например `max-width: calc(100% - 250px)`,
 * которое вычитало ширину сайдбара повторно и сжимало сетку).
 *
 * Цвета, шрифт и радиусы берутся из assets/tokens.css.
 */

/* Витрину Tilda прячем: её наполнял store-API, которого больше нет. */
.ushop-hidden { display: none !important; }

/* --- каркас --------------------------------------------------------- */

.ushop-catalog {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px 60px;
    font-family: var(--font-text);
    color: var(--color-ink);
}

.ushop-catalog__body {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 0 30px;
    align-items: start;
}

.ushop-catalog__main { min-width: 0; }

@media (max-width: 960px) {
    .ushop-catalog__body { grid-template-columns: minmax(0, 1fr); gap: 24px 0; }
}

/* --- панель над сеткой ---------------------------------------------- */

.ushop-toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.ushop-search { display: flex; gap: 8px; flex: 1 1 260px; max-width: 420px; }

.ushop-search input,
.ushop-sort select,
.ushop-filters__price input {
    padding: 10px 14px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-base);
    font: inherit;
    background: var(--color-surface);
    min-width: 0;
    width: 100%;
}

.ushop-search button {
    padding: 10px 20px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-base);
    background: var(--color-surface);
    font: inherit;
    cursor: pointer;
    white-space: nowrap;
}

.ushop-sort { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.ushop-sort select { width: auto; }

@media (max-width: 640px) {
    .ushop-toolbar { flex-direction: column; align-items: stretch; }

    /* Панель встаёт колонкой, и flex-basis из .ushop-search начинает задавать
       не ширину, а высоту — поле поиска раздувалось до 260px. */
    .ushop-search { flex: 0 0 auto; max-width: none; }
}

/* --- сайдбар -------------------------------------------------------- */

.ushop-filters { font-size: 14px; }
.ushop-filters__group { border: 0; margin: 0 0 28px; padding: 0; }

.ushop-filters__legend {
    padding: 0 0 12px;
    font-size: 16px;
    font-weight: 600;
}

.ushop-filters__row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    align-items: baseline;
    padding: 5px 0;
    cursor: pointer;
}

.ushop-filters__row input { margin: 0; }
.ushop-filters__count { color: var(--color-ink-faint); font-variant-numeric: tabular-nums; }
.ushop-filters__more summary { cursor: pointer; padding: 8px 0; color: var(--color-accent); }
.ushop-filters__price { display: flex; align-items: center; gap: 8px; }
.ushop-filters__actions { display: flex; align-items: center; gap: 16px; }
.ushop-filters__reset { font-size: 14px; }

/* --- сетка ---------------------------------------------------------- */

.ushop-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px 24px;
    align-items: stretch;
}

@media (max-width: 960px) { .ushop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; } }
@media (max-width: 480px) { .ushop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; } }

/* --- карточка ------------------------------------------------------- */

.ushop-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: var(--color-ink);
    text-decoration: none;
}

.ushop-card__media {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1;
    background: var(--color-surface-alt);
    border-radius: var(--radius-base);
    overflow: hidden;
}

.ushop-card__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: transform .25s ease;
}

.ushop-card:hover .ushop-card__img { transform: scale(1.04); }

.ushop-card__mark {
    position: absolute;
    top: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    height: 46px;
    padding: 0 8px;
    border-radius: 50%;
    background: #ff4a4a;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
}

.ushop-card__title { font-size: 18px; font-weight: 600; line-height: 1.25; }
.ushop-card__descr { font-size: 14px; line-height: 1.5; color: var(--color-ink-muted); }

/* Цена прижата к низу — тогда кнопки в ряду стоят на одной линии
   независимо от длины описания. */
.ushop-card__prices {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
    padding-top: 8px;
}

.ushop-card__price { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ushop-card__price-old { font-size: 14px; color: var(--color-ink-faint); white-space: nowrap; }
.ushop-card__btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

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

.ushop-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 22px;
    border: 1px solid transparent;
    border-radius: var(--radius-base);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s, border-color .2s, color .2s;
}

.ushop-btn_primary { background: var(--color-accent); color: #fff; }
.ushop-btn_primary:hover { background: var(--color-accent-dark); }
.ushop-btn_ghost { background: transparent; border-color: var(--color-ink); color: var(--color-ink); }
.ushop-btn_ghost:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* --- прочее --------------------------------------------------------- */

.ushop-more { text-align: center; margin-top: 48px; }
.ushop-more button { border: 1px solid var(--color-ink); }
.ushop-empty { color: var(--color-ink-muted); }

/* =====================================================================
 * Страница товара. Вставляется в страницу-оболочку вместо витрины,
 * поэтому свою шапку и подвал не рисует.
 * ================================================================== */

.ushop-product {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 20px 60px;
    font-family: var(--font-text);
    color: var(--color-ink);
}

.ushop-product__top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px;
    align-items: start;
}

@media (max-width: 960px) {
    .ushop-product__top { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}

/* --- галерея --- */
.ushop-product__figure {
    position: relative;
    aspect-ratio: 1;
    background: var(--color-surface-alt);
    border-radius: var(--radius-base);
    overflow: hidden;
}

.ushop-product__img { width: 100%; height: 100%; object-fit: contain; display: block; }

.ushop-product__thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.ushop-product__thumb {
    width: 78px;
    height: 78px;
    padding: 4px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-base);
    background: var(--color-surface);
    cursor: pointer;
}

.ushop-product__thumb.is-active { border-color: var(--color-accent); }
.ushop-product__thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* --- правая колонка --- */
.ushop-product__title { margin: 0 0 8px; font-size: 32px; line-height: 1.2; font-weight: 600; }

.ushop-product__brand {
    display: inline-block;
    margin-bottom: 20px;
    font-size: 14px;
    color: var(--color-ink-muted);
}

.ushop-product__prices {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 24px;
}

.ushop-product__price { font-size: 30px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ushop-product__portion { font-size: 14px; color: var(--color-ink-muted); }
.ushop-product__price-old { font-size: 18px; color: var(--color-ink-faint); }

.ushop-product__order { margin-bottom: 28px; }

/* --- характеристики --- */
/* Простые строки «Ключ: значение», как на карточке Tilda:
   ни рамок, ни двух колонок — их там не было. */
.ushop-product__specs { font-size: 14px; color: var(--color-ink-muted); }
.ushop-product__spec { padding: 4px 0; line-height: 1.5; }

/* --- описание --- */
.ushop-product__descr { margin-top: 48px; }
.ushop-product__descr-title { font-size: 18px; font-weight: 600; margin: 0 0 16px; }
.ushop-product__descr-body { font-size: 16px; line-height: 1.6; max-width: 900px; }
.ushop-product__descr-body ul { padding-left: 20px; }
.ushop-product__descr-body li { margin-bottom: 6px; }

/* --- табы под товаром ----------------------------------------------- */

.ushop-tabs { margin-top: 56px; }

.ushop-tabs__head {
    display: flex;
    gap: 40px;
    border-bottom: 1px solid var(--color-line);
    margin-bottom: 28px;
}

.ushop-tabs__tab {
    padding: 12px 0;
    margin-bottom: -1px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    font: inherit;
    font-size: 16px;
    color: var(--color-ink-muted);
    cursor: pointer;
}

.ushop-tabs__tab.is-active { color: var(--color-ink); border-bottom-color: var(--color-ink); }

.ushop-tabs__panel { display: none; font-size: 16px; line-height: 1.6; max-width: 900px; }
.ushop-tabs__panel.is-active { display: block; }
.ushop-tabs__panel ul { padding-left: 20px; }
.ushop-tabs__panel li { margin-bottom: 6px; }

/* --- похожие товары -------------------------------------------------- */

.ushop-similar { margin-top: 64px; }
.ushop-similar__title { font-size: 24px; font-weight: 600; margin: 0 0 28px; }
.ushop-grid_four { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1100px) { .ushop-grid_four { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 960px) { .ushop-grid_four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* =====================================================================
 * Блоки страницы товара: преимущества, наши работы, схема, квиз.
 * Содержимое — из таблицы content_blocks.
 * ================================================================== */

.ushop-adv,
.ushop-works,
.ushop-scheme,
.ushop-quiz {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    font-family: var(--font-text);
    color: var(--color-ink);
}

/* --- преимущества --- */
.ushop-adv { margin-top: 64px; }

.ushop-adv__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
}

@media (max-width: 860px) { .ushop-adv__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; } }

.ushop-adv__item { padding-left: 20px; border-left: 2px solid var(--color-accent); }
.ushop-adv__title { font-size: 18px; font-weight: 600; margin-bottom: 8px; }
.ushop-adv__text { font-size: 15px; line-height: 1.6; color: var(--color-ink-muted); }

/* --- наши работы --- */
.ushop-works { margin-top: 64px; }
.ushop-works__title { font-size: var(--size-3xl); font-weight: var(--weight-bold); letter-spacing: -.02em; margin: 0 0 6px; }
.ushop-works__subtitle { margin: 0; color: var(--color-ink-muted); }

/* Мозаика: две широкие плитки задают ритм, остальные держат ряд.
   Горизонтальной ленты здесь больше нет — системная полоса прокрутки
   под фотографиями выглядела как часть браузера, а не сайта. */
.ushop-works__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 210px;
    gap: 14px;
}

.ushop-works__tile {
    position: relative;
    display: block;
    margin: 0;
    border-radius: 12px;
    overflow: hidden;
    background: var(--color-surface-alt);
}

.ushop-works__tile:nth-child(1),
.ushop-works__tile:nth-child(6) { grid-column: span 2; }

.ushop-works__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}

.ushop-works__tile:hover .ushop-works__img { transform: scale(1.04); }

/* Последняя плитка ведёт в портфолио: снимок притемняем, чтобы число читалось */
.ushop-works__tile_more::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 12, 14, .25), rgba(10, 12, 14, .68));
}

.ushop-works__more {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 2px;
    color: #fff;
    text-align: center;
}

.ushop-works__more-num {
    font-size: var(--size-3xl);
    font-weight: var(--weight-bold);
    letter-spacing: -.02em;
    line-height: 1;
}

.ushop-works__more-text { font-size: var(--size-sm); opacity: .85; }

/* Заголовок и ссылка «Все работы» — в одну строку по краям */
.ushop-works__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-6);
    margin-bottom: var(--space-6);
}

.ushop-works__all {
    flex: 0 0 auto;
    color: var(--color-accent-dark);
    font-size: var(--size-sm);
    font-weight: var(--weight-semibold);
    text-decoration: none;
    white-space: nowrap;
}

.ushop-works__all::after { content: ' →'; }
.ushop-works__all:hover { text-decoration: underline; }

@media screen and (max-width: 900px) {
    .ushop-works__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 180px; }
    .ushop-works__tile:nth-child(1),
    .ushop-works__tile:nth-child(6) { grid-column: span 2; }
}

@media screen and (max-width: 640px) {
    .ushop-works__grid { grid-auto-rows: 150px; gap: 10px; }
    .ushop-works__head { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
}

/* --- схема работы --- */
.ushop-scheme { margin-top: 64px; }
.ushop-scheme__title { font-size: 24px; font-weight: 600; margin: 0 0 28px; }

.ushop-scheme__steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    margin: 0 0 28px;
    padding: 0;
    list-style: none;
    counter-reset: step;
}

@media (max-width: 860px) { .ushop-scheme__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .ushop-scheme__steps { grid-template-columns: minmax(0, 1fr); } }

.ushop-scheme__step { display: flex; flex-direction: column; gap: 8px; }

.ushop-scheme__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-accent);
    color: #fff;
    font-weight: 600;
}

.ushop-scheme__step-title { font-weight: 600; }
.ushop-scheme__step-text { font-size: 15px; line-height: 1.6; color: var(--color-ink-muted); }

/* --- квиз --- */
/* Свои поля квизу не нужны: соседние секции уже дают по 64px сверху
   и снизу, и вместе получалась пустота в два экрана-полосы. */
.ushop-quiz { margin-top: 0; margin-bottom: 0; }

/* Страница товара набирает ритм полями сверху у каждого блока —
   там квизу нужен такой же отступ, иначе он прилипает к схеме. */
.ushop-quiz_spaced { margin-top: 64px; margin-bottom: 64px; }

.ushop-quiz__form {
    border: 1px solid var(--color-line);
    border-radius: var(--radius-base);
    overflow: hidden;
    background: var(--color-surface);
}

/* Панель менеджера справа, вопросы слева — как в исходном блоке Tilda. */
.ushop-quiz__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    align-items: stretch;
}

.ushop-quiz__main { padding: 28px; }

.ushop-quiz__trap { position: absolute; left: -9999px; width: 1px; height: 1px; }

.ushop-quiz__progress {
    height: 4px;
    margin-bottom: 24px;
    border-radius: var(--radius-pill);
    background: var(--color-accent-bg);
    overflow: hidden;
}

.ushop-quiz__progress-bar {
    display: block;
    height: 100%;
    background: var(--color-accent);
    transition: width .25s ease-in-out;
}

.ushop-quiz__step { border: 0; margin: 0; padding: 0; }
.ushop-quiz__step.is-hidden { display: none; }

.ushop-quiz__question {
    padding: 0;
    font-size: var(--size-lg);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-tight);
}

.ushop-quiz__descr { margin: 10px 0 0; color: var(--color-ink-muted); font-size: var(--size-sm); }

.ushop-quiz__options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
    margin-top: 20px;
}

.ushop-quiz__option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-base);
    background: var(--color-surface);
    cursor: pointer;
    transition: border-color .15s, background-color .15s;
}

.ushop-quiz__option:hover { border-color: var(--color-accent); }
.ushop-quiz__option:has(input:checked) { border-color: var(--color-accent); background: var(--color-accent-bg); }

/* Варианты с картинкой: изображение сверху, подпись под ним. */
.ushop-quiz__options_image { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

.ushop-quiz__options_image .ushop-quiz__option {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 12px;
    text-align: center;
}

.ushop-quiz__options_image input { position: absolute; opacity: 0; pointer-events: none; }

.ushop-quiz__option-img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--radius-base);
    background: var(--color-surface-alt);
}

.ushop-quiz__options_image .ushop-quiz__option-text { font-size: var(--size-sm); }

.ushop-quiz__contacts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-top: 20px;
}

.ushop-quiz__field { display: flex; flex-direction: column; gap: 6px; }
.ushop-quiz__field span { font-size: var(--size-sm); color: var(--color-ink-muted); }

.ushop-quiz__field input {
    padding: 12px 14px;
    border: 1px solid var(--color-accent-bg);
    border-radius: var(--radius-base);
    font: inherit;
    background: var(--color-surface);
}

.ushop-quiz__consent {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-top: 16px;
    font-size: var(--size-xs);
    line-height: var(--leading-normal);
    color: var(--color-ink-muted);
}

.ushop-quiz__consent a { color: var(--color-accent-dark); }

/* --- панель менеджера --- */

.ushop-quiz__panel {
    padding: 28px 24px;
    background: #eff8ef;
}

.ushop-quiz__man { display: flex; align-items: center; gap: 12px; }

.ushop-quiz__man-img {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-pill);
    object-fit: cover;
}

.ushop-quiz__man-name { font-size: var(--size-sm); font-weight: var(--weight-semibold); }
.ushop-quiz__man-role { font-size: var(--size-xs); color: var(--color-ink-muted); }

.ushop-quiz__msg {
    margin: 16px 0 0;
    padding: 14px 16px;
    border-radius: var(--radius-base);
    background: var(--color-surface);
    font-size: var(--size-sm);
    line-height: var(--leading-normal);
}

/* --- низ квиза --- */

.ushop-quiz__nav {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 28px;
    border-top: 1px solid var(--color-line);
    background: var(--color-surface);
}

.ushop-quiz__btns { display: flex; gap: 10px; margin-left: auto; }
.ushop-quiz__back { width: 44px; padding: 12px 0; }
.ushop-quiz__counter { font-size: var(--size-xs); color: var(--color-ink-muted); }

.ushop-quiz__done { padding: 40px 28px; font-size: var(--size-md); }
.ushop-quiz__error { margin: 0 28px; color: var(--color-danger); font-size: var(--size-sm); }

/* Кнопки квиза скрываются атрибутом hidden, а display из .ushop-btn
   его перебивал — из-за этого «Назад» и «Получить расчёт» висели на первом шаге. */
.ushop-btn[hidden] { display: none !important; }

@media screen and (max-width: 960px) {
    /* Менеджер уходит наверх: на узком экране колонка сбоку не помещается. */
    .ushop-quiz__layout { grid-template-columns: minmax(0, 1fr); }
    .ushop-quiz__panel { order: -1; padding: 20px; }
    .ushop-quiz__main { padding: 20px; }
    .ushop-quiz__nav { padding: 16px 20px; flex-wrap: wrap; }
}

/* =====================================================================
   Своя шапка и свой подвал
   Заменяют записи Tilda t1272 (меню), t985 (поиск) и t420 (подвал):
   их прячет SiteChrome, а рисуется то, что ниже.
   ===================================================================== */

.ushop-header {
    position: sticky;
    top: 0;
    z-index: 900;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-line);
}

.ushop-header__inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 20px;
    min-height: 64px;
    display: flex;
    align-items: center;
    gap: var(--space-6);
}

.ushop-header__logo {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--size-md);
    font-weight: var(--weight-bold);
    color: var(--color-ink);
    text-decoration: none;
    white-space: nowrap;
}

.ushop-header__logo img { width: 30px; height: 30px; object-fit: contain; }

/* --- меню ------------------------------------------------------------ */

.ushop-nav { flex: 1 1 auto; }
.ushop-nav__list { display: flex; align-items: center; gap: var(--space-6); margin: 0; padding: 0; list-style: none; }
.ushop-nav__item { position: relative; }

.ushop-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 20px 0;
    font-size: var(--size-sm);
    color: var(--color-ink);
    text-decoration: none;
    white-space: nowrap;
    transition: color .2s;
}

.ushop-nav__link:hover,
.ushop-nav__link.is-active { color: var(--color-accent); }
.ushop-nav__caret { transition: transform .2s; }

/* Выпадающий список открывается наведением на весь пункт, вместе с
   промежутком между ссылкой и списком: иначе он гаснет по дороге. */
.ushop-nav__sub {
    position: absolute;
    top: 100%;
    left: -16px;
    min-width: 210px;
    padding: var(--space-2) 0;
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-base);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .18s, transform .18s, visibility .18s;
}

.ushop-nav__item_has-sub:hover .ushop-nav__sub,
.ushop-nav__item_has-sub:focus-within .ushop-nav__sub {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.ushop-nav__item_has-sub:hover .ushop-nav__caret { transform: rotate(180deg); }

.ushop-nav__sub ul { margin: 0; padding: 0; list-style: none; }

.ushop-nav__sub a {
    display: block;
    padding: 9px 20px;
    font-size: var(--size-sm);
    color: var(--color-ink);
    text-decoration: none;
    transition: background-color .15s, color .15s;
}

.ushop-nav__sub a:hover { background: var(--color-accent-bg); color: var(--color-accent-dark); }

/* --- правая часть ---------------------------------------------------- */

.ushop-header__side { display: flex; align-items: center; gap: var(--space-4); margin-left: auto; }

.ushop-header__phone {
    font-size: var(--size-md);
    font-weight: var(--weight-semibold);
    color: var(--color-ink);
    text-decoration: none;
    white-space: nowrap;
}

.ushop-header__search {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: var(--radius-pill);
    color: var(--color-ink);
    cursor: pointer;
}

.ushop-header__search:hover { background: var(--color-surface-alt); }

.ushop-header__cta { gap: 8px; border-radius: var(--radius-pill); white-space: nowrap; }

.ushop-header__searchbox {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 20px var(--space-4);
    display: flex;
    gap: var(--space-2);
}

.ushop-header__searchbox input {
    flex: 1 1 auto;
    padding: 11px 14px;
    font-family: inherit;
    font-size: var(--size-sm);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-base);
}

/* display: flex у строки поиска сильнее атрибута hidden — гасим явно. */
.ushop-header__searchbox[hidden] { display: none; }

.ushop-header__burger { display: none; }

/* Телефон и кнопка внутри меню нужны только на узком экране. */
.ushop-nav__contacts { display: none; }

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

.ushop-footer { background: var(--color-line); color: var(--color-ink); }

.ushop-footer__inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: var(--space-12) 20px;
    display: grid;
    grid-template-columns: minmax(220px, 1fr) repeat(3, minmax(0, 1fr));
    gap: var(--space-8);
}

.ushop-footer__logo {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--size-md);
    font-weight: var(--weight-bold);
    color: var(--color-ink);
    text-decoration: none;
}

.ushop-footer__logo img { width: 30px; height: 30px; object-fit: contain; }

.ushop-footer__socials {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: var(--space-6) 0 var(--space-4);
    padding: 0;
    list-style: none;
}

.ushop-footer__socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background: var(--color-ink);
    border-radius: var(--radius-pill);
    color: #fff;
    transition: background-color .2s;
}

.ushop-footer__socials a:hover { background: var(--color-accent); }

.ushop-footer__copy { font-size: var(--size-xs); color: var(--color-ink-muted); }

.ushop-footer__policy {
    display: block;
    margin-top: var(--space-2);
    max-width: 260px;
    font-size: var(--size-xs);
    line-height: var(--leading-normal);
    color: var(--color-accent-dark);
    text-decoration: none;
}

.ushop-footer__policy:hover { text-decoration: underline; }

.ushop-footer__col-title {
    margin-bottom: var(--space-4);
    font-size: var(--size-base);
    font-weight: var(--weight-semibold);
}

.ushop-footer__col ul { margin: 0; padding: 0; list-style: none; }
.ushop-footer__col li + li { margin-top: 10px; }

.ushop-footer__col a {
    font-size: var(--size-sm);
    color: var(--color-ink-muted);
    text-decoration: none;
    transition: color .2s;
}

.ushop-footer__col a:hover { color: var(--color-accent-dark); }

/* --- узкие экраны ---------------------------------------------------- */

@media screen and (max-width: 960px) {
    .ushop-header__phone,
    .ushop-header__cta { display: none; }

    .ushop-header__burger {
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        width: 34px;
        height: 34px;
        margin-left: auto;
        padding: 0;
        background: none;
        border: 0;
        cursor: pointer;
    }

    .ushop-header__burger span {
        display: block;
        height: 2px;
        background: var(--color-ink);
        border-radius: 2px;
    }

    .ushop-header__side { margin-left: 0; }

    .ushop-header { position: sticky; }
    .ushop-header__inner { position: relative; gap: var(--space-3); }

    /* Меню раскрывается панелью под шапкой, а не строкой внутри неё:
       раньше оно вставало в общий ряд, и логотип с кнопками поджимались.
       Длинный список прокручивается внутри панели. */
    .ushop-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 10;
        max-height: calc(100svh - 57px);
        overflow-y: auto;
        padding: var(--space-2) 20px var(--space-6);
        background: var(--color-surface);
        border-top: 1px solid var(--color-line);
        box-shadow: 0 18px 40px rgba(17, 17, 17, .12);
        overscroll-behavior: contain;
    }

    .ushop-nav.is-open { display: block; }

    /* Бургер превращается в крестик — видно, что нажатие закроет меню.
       Полосы уже кнопки: во всю её ширину крестик выходил заметно крупнее
       соседних значков поиска и корзины. */
    .ushop-header__burger { align-items: center; }
    .ushop-header__burger span { width: 22px; transition: transform .2s, opacity .2s; }
    .ushop-header__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
    .ushop-header__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
    .ushop-header__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
    .ushop-nav__list { flex-direction: column; align-items: flex-start; gap: 0; }
    .ushop-nav__item { width: 100%; }
    .ushop-nav__link { padding: 12px 0; font-size: var(--size-base); }
    .ushop-nav__caret { display: none; }

    .ushop-nav__sub {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        min-width: 0;
        padding: 0 0 var(--space-2);
        border: 0;
        box-shadow: none;
        background: none;
    }

    .ushop-nav__sub a { padding: 8px 0 8px 16px; color: var(--color-ink-muted); }
    .ushop-nav__sub a:hover { background: none; }

    .ushop-nav__contacts {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
        margin-top: var(--space-4);
        padding-top: var(--space-4);
        border-top: 1px solid var(--color-line);
    }

    .ushop-nav__phone {
        font-size: var(--size-md);
        font-weight: var(--weight-semibold);
        color: var(--color-ink);
        text-decoration: none;
    }

    .ushop-nav__contacts .ushop-btn { border-radius: var(--radius-pill); }

    .ushop-footer__inner { grid-template-columns: 1fr 1fr; }
}

@media screen and (max-width: 640px) {
    .ushop-footer__inner { grid-template-columns: 1fr; gap: var(--space-6); }

    /* Список марок в подвале — два десятка ссылок: одной колонкой он
       растягивал подвал на полтора экрана. */
    .ushop-footer__col ul {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: var(--space-4);
    }

    .ushop-footer__col li + li { margin-top: 0; }
    .ushop-footer__col li { padding: 5px 0; }
}

/* =====================================================================
   Блог: список рубрик, карточки статей и сама статья.
   На Tilda всё это рисовал скрипт ленты Потока — в выгрузке от него
   осталась только пустая обёртка и заголовок рубрики.
   ===================================================================== */

.ushop-blog,
.ushop-article {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 20px;
    font-family: var(--font-text);
    color: var(--color-ink);
}

.ushop-blog { padding-top: var(--space-8); padding-bottom: var(--space-16); }

.ushop-blog__title {
    margin: 0 0 var(--space-6);
    font-size: var(--size-4xl);
    line-height: var(--leading-tight);
    text-wrap: balance;
}

.ushop-blog__subtitle {
    margin: 0 0 var(--space-8);
    font-size: var(--size-2xl);
    line-height: var(--leading-tight);
}

.ushop-blog__intro {
    max-width: 65ch;
    margin-bottom: var(--space-8);
    color: var(--color-ink-muted);
    line-height: var(--leading-loose);
}

/* --- рубрики --- */

.ushop-blog__rubrics {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-12);
}

.ushop-blog__rubric {
    padding: 9px 16px;
    border-radius: var(--radius-pill);
    background: var(--color-surface-alt);
    font-size: var(--size-sm);
    color: var(--color-ink);
    text-decoration: none;
    transition: background-color .2s, color .2s;
}

.ushop-blog__rubric:hover { background: var(--color-accent-bg); color: var(--color-accent-dark); }

/* --- карточки --- */

.ushop-blog__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-12) var(--space-8);
}

.ushop-post {
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: var(--color-ink);
    text-decoration: none;
}

.ushop-post__cover {
    aspect-ratio: 3 / 2;
    border-radius: var(--radius-base);
    background: var(--color-surface-alt);
    overflow: hidden;
}

.ushop-post__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s ease-out;
}

.ushop-post:hover .ushop-post__cover img { transform: scale(1.03); }

.ushop-post__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--size-xs);
    color: var(--color-ink-faint);
}

.ushop-post__rubric { color: var(--color-accent-dark); }

.ushop-post__title {
    font-size: var(--size-md);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-tight);
}

.ushop-post:hover .ushop-post__title { color: var(--color-accent-dark); }

.ushop-post__lead {
    font-size: var(--size-sm);
    line-height: var(--leading-normal);
    color: var(--color-ink-muted);
}

/* --- постраничная навигация --- */

.ushop-pager {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: var(--space-16);
}

.ushop-pager__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-base);
    font-size: var(--size-sm);
    color: var(--color-ink);
    text-decoration: none;
    font-variant-numeric: tabular-nums;
    transition: border-color .2s, background-color .2s, color .2s;
}

.ushop-pager__item:hover { border-color: var(--color-accent); color: var(--color-accent-dark); }
.ushop-pager__item.is-current { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.ushop-pager__item.is-disabled { color: var(--color-ink-faint); border-color: var(--color-line); }
.ushop-pager__gap { padding: 0 4px; color: var(--color-ink-faint); }

/* --- страница статьи --- */

.ushop-article {
    max-width: 800px;
    padding-top: var(--space-8);
    padding-bottom: var(--space-12);
}

.ushop-article__title {
    margin: 0 0 var(--space-4);
    font-size: var(--size-3xl);
    line-height: var(--leading-tight);
    /* Без balance: он выравнивает строки по длине и оставляет заголовок
       узким, хотя колонка позволяет занять всю ширину. */
    text-wrap: pretty;
}

.ushop-article__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--size-xs);
    color: var(--color-ink-faint);
}

.ushop-article__rubric { color: var(--color-accent-dark); text-decoration: none; }
.ushop-article__rubric:hover { text-decoration: underline; }

.ushop-article__cover {
    display: block;
    width: 100%;
    margin-top: var(--space-8);
    border-radius: 5px;
}

/* Тело статьи приходит готовой разметкой из Потока: свои классы туда
   не поставить, поэтому размечаем по тегам. */
.ushop-article__body {
    margin-top: var(--space-8);
    font-size: var(--size-base);
    line-height: var(--leading-loose);
}

.ushop-article__body p { margin: 0 0 var(--space-6); }

.ushop-article__body h2 {
    margin: var(--space-12) 0 var(--space-4);
    font-size: var(--size-2xl);
    line-height: var(--leading-tight);
}

.ushop-article__body h3 {
    margin: var(--space-8) 0 var(--space-3);
    font-size: var(--size-lg);
    line-height: var(--leading-tight);
}

.ushop-article__body ul,
.ushop-article__body ol { margin: 0 0 var(--space-6); padding-left: 22px; }
.ushop-article__body li { margin-bottom: var(--space-2); }

.ushop-article__body img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: var(--space-8) 0;
    border-radius: var(--radius-base);
}

.ushop-article__body a { color: var(--color-accent-dark); }

.ushop-article__body blockquote {
    margin: var(--space-8) 0;
    padding: var(--space-4) var(--space-6);
    border-left: 3px solid var(--color-accent);
    background: var(--color-accent-bg);
}

/* Таблицы в статьях бывают широкими — прокручиваем их, а не страницу. */
.ushop-article__body table { width: 100%; border-collapse: collapse; margin: var(--space-8) 0; }
.ushop-article__body th,
.ushop-article__body td { padding: 10px 12px; border: 1px solid var(--color-line); text-align: left; }
.ushop-article__body th { background: var(--color-surface-alt); font-weight: var(--weight-semibold); }

.ushop-blog_related { padding-top: 0; border-top: 1px solid var(--color-line); padding-top: var(--space-12); }

@media screen and (max-width: 960px) {
    .ushop-blog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8) var(--space-6); }
    .ushop-blog__title { font-size: var(--size-3xl); }
    .ushop-article__title { font-size: var(--size-2xl); }
}

@media screen and (max-width: 640px) {
    .ushop-blog__grid { grid-template-columns: minmax(0, 1fr); }
}

/* --- хлебные крошки ---------------------------------------------------
   На страницах с замороженной вёрсткой их рисует блок T758 Tilda, здесь —
   свои, на своих же страницах: блог, статьи, разделы каталога. */

.ushop-crumbs {
    max-width: var(--container);
    margin: 0 auto;
    padding: var(--space-4) 20px 0;
    font-family: var(--font-text);
}

.ushop-crumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--size-xs);
    color: var(--color-ink-faint);
}

.ushop-crumbs li { display: flex; align-items: center; gap: var(--space-2); }

/* Разделитель — стрелкой, как в блоке T758. */
.ushop-crumbs li + li::before { content: '→'; color: var(--color-ink-faint); }

.ushop-crumbs a { color: var(--color-ink-muted); text-decoration: none; }
.ushop-crumbs a:hover { color: var(--color-accent-dark); }
.ushop-crumbs [aria-current] { color: var(--color-ink-faint); }

/* --- статья с сайдубаром рубрик ------------------------------------- */

.ushop-article-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    align-items: start;
    gap: 40px;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 20px;
}

/* Поля и центрирование задаёт сетка, статья занимает свою колонку целиком:
   любое ограничение ширины здесь превращает остаток места в провал между
   текстом и сайдбаром. */
.ushop-article-layout .ushop-article { max-width: none; margin: 0; padding-left: 0; padding-right: 0; }


/* Тянем колонку на всю высоту строки: у align-items: start высота ячейки
   равна высоте самой карточки, и липкому блоку некуда ехать. */
.ushop-aside { align-self: stretch; padding-top: var(--space-8); }

/* Список длинный, а статья ещё длиннее — держим рубрики в поле зрения.
   Отступ сверху — под липкую шапку. */
.ushop-aside__box {
    position: sticky;
    top: 84px;
    padding: var(--space-6);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-base);
    background: var(--color-surface);
}

.ushop-aside__title {
    margin-bottom: var(--space-4);
    font-size: var(--size-base);
    font-weight: var(--weight-semibold);
}

.ushop-aside__list { margin: 0; padding: 0; list-style: none; }

.ushop-aside__link {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 7px 0;
    font-size: var(--size-sm);
    color: var(--color-ink-muted);
    text-decoration: none;
    transition: color .15s;
}

.ushop-aside__link:hover { color: var(--color-accent-dark); }
.ushop-aside__link.is-current { color: var(--color-ink); font-weight: var(--weight-semibold); }

.ushop-aside__count {
    font-size: var(--size-xs);
    color: var(--color-ink-faint);
    font-variant-numeric: tabular-nums;
}

.ushop-aside__all {
    display: inline-block;
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-line);
    width: 100%;
    font-size: var(--size-sm);
    color: var(--color-accent-dark);
    text-decoration: none;
}

.ushop-aside__all:hover { text-decoration: underline; }

@media screen and (max-width: 960px) {
    /* Сайдбар уходит под статью: рядом со статьёй он не помещается. */
    .ushop-article-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
    .ushop-aside { padding-top: 0; }
    .ushop-aside__box { position: static; }
}

/* =====================================================================
   Страница поиска по сайту
   ===================================================================== */

.ushop-search-page {
    max-width: 860px;
    margin: 0 auto;
    padding: var(--space-8) 20px var(--space-16);
    font-family: var(--font-text);
    color: var(--color-ink);
}

.ushop-search-page__title {
    margin: 0 0 var(--space-6);
    font-size: var(--size-3xl);
    line-height: var(--leading-tight);
}

.ushop-search-page__form {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-8);
}

.ushop-search-page__form input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 14px 18px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-base);
    font: inherit;
    background: var(--color-surface);
}

.ushop-search-page__form input:focus {
    outline: none;
    border-color: var(--color-accent);
}

/* --- переключатель типов --- */

.ushop-search-page__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-8);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--color-line);
}

.ushop-search-page__tab {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--radius-pill);
    background: var(--color-surface-alt);
    font-size: var(--size-sm);
    color: var(--color-ink);
    text-decoration: none;
    transition: background-color .2s, color .2s;
}

.ushop-search-page__tab span {
    font-size: var(--size-xs);
    color: var(--color-ink-faint);
    font-variant-numeric: tabular-nums;
}

.ushop-search-page__tab:hover { background: var(--color-accent-bg); }

.ushop-search-page__tab.is-active { background: var(--color-accent); color: #fff; }
.ushop-search-page__tab.is-active span { color: rgba(255, 255, 255, .75); }

/* --- результаты --- */

.ushop-results {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    margin: 0;
    padding: 0;
    list-style: none;
}

.ushop-result { display: flex; gap: var(--space-4); }

.ushop-result__thumb {
    flex: 0 0 96px;
    height: 96px;
    border-radius: var(--radius-base);
    background: var(--color-surface-alt);
    overflow: hidden;
}

.ushop-result__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ushop-result__body { min-width: 0; }

.ushop-result__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: 6px;
    font-size: var(--size-xs);
}

.ushop-result__type {
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    background: var(--color-accent-bg);
    color: var(--color-accent-dark);
}

.ushop-result__section { color: var(--color-ink-faint); }

.ushop-result__title {
    display: inline-block;
    font-size: var(--size-md);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-tight);
    color: var(--color-ink);
    text-decoration: none;
}

.ushop-result__title:hover { color: var(--color-accent-dark); }

.ushop-result__excerpt {
    margin: 6px 0 0;
    font-size: var(--size-sm);
    line-height: var(--leading-normal);
    color: var(--color-ink-muted);
}

.ushop-result__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-3);
    margin-top: 8px;
}

/* Адрес может быть длинным — переносим, а не растягиваем страницу. */
.ushop-result__url {
    font-size: var(--size-xs);
    color: var(--color-ink-faint);
    overflow-wrap: anywhere;
}

.ushop-result__price {
    font-size: var(--size-base);
    font-weight: var(--weight-semibold);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

@media screen and (max-width: 640px) {
    .ushop-search-page__form { flex-direction: column; }
    .ushop-result__thumb { flex-basis: 72px; height: 72px; }
}

/* =====================================================================
   Окно заказа. Кнопка, которая его открывает, живёт в шапке сайта.
   ===================================================================== */


.ushop-order {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    padding: 40px 16px;
    font-family: var(--font-text);
    color: var(--color-ink);
}

.ushop-order[hidden] { display: none; }

.ushop-order__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    backdrop-filter: blur(4px);
}

.ushop-order__window {
    position: relative;
    width: 100%;
    max-width: 620px;
    padding: 40px;
    border-radius: var(--radius-base);
    background: var(--color-surface);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
}

.ushop-order__close {
    position: absolute;
    top: 14px;
    right: 18px;
    width: 32px;
    height: 32px;
    padding: 0;
    background: none;
    border: 0;
    font-size: 28px;
    line-height: 1;
    color: var(--color-ink-muted);
    cursor: pointer;
}

.ushop-order__close:hover { color: var(--color-ink); }

.ushop-order__title {
    margin-bottom: var(--space-6);
    font-size: var(--size-2xl);
    font-weight: var(--weight-semibold);
}

/* --- строки заказа --- */

.ushop-order__items {
    border-top: 1px solid var(--color-line);
    border-bottom: 1px solid var(--color-line);
}

.ushop-order__item {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto auto 28px;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) 0;
}

.ushop-order__item + .ushop-order__item { border-top: 1px solid var(--color-line); }

.ushop-order__thumb {
    display: block;
    width: 72px;
    height: 72px;
    border-radius: var(--radius-base);
    background: var(--color-surface-alt);
    overflow: hidden;
}

.ushop-order__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ushop-order__name {
    font-weight: var(--weight-semibold);
    color: var(--color-ink);
    text-decoration: none;
}

.ushop-order__name:hover { color: var(--color-accent-dark); }
.ushop-order__unit { margin-top: 4px; font-size: var(--size-xs); color: var(--color-ink-faint); }

.ushop-order__qty {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.ushop-order__qty button {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    font-size: var(--size-base);
    line-height: 1;
    color: var(--color-ink);
    cursor: pointer;
}

.ushop-order__qty button:hover { border-color: var(--color-accent); color: var(--color-accent-dark); }
.ushop-order__qty span { min-width: 18px; text-align: center; font-variant-numeric: tabular-nums; }

.ushop-order__line {
    font-weight: var(--weight-semibold);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.ushop-order__remove {
    width: 28px;
    height: 28px;
    padding: 0;
    background: none;
    border: 0;
    font-size: 20px;
    line-height: 1;
    color: var(--color-ink-faint);
    cursor: pointer;
}

.ushop-order__remove:hover { color: var(--color-danger); }

.ushop-order__empty { padding: var(--space-8) 0; color: var(--color-ink-muted); text-align: center; }

.ushop-order__sum {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    padding: var(--space-4) 0;
    font-weight: var(--weight-semibold);
    font-variant-numeric: tabular-nums;
}

/* --- форма --- */

.ushop-order__trap { position: absolute; left: -9999px; width: 1px; height: 1px; }
.ushop-order__note { margin: var(--space-4) 0; color: var(--color-ink-muted); font-size: var(--size-sm); }

.ushop-order__field { display: block; margin-bottom: var(--space-4); }
.ushop-order__field span { display: block; margin-bottom: 6px; font-size: var(--size-sm); color: var(--color-ink-muted); }

.ushop-order__field input {
    width: 100%;
    padding: 13px 16px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-base);
    font: inherit;
    background: var(--color-surface);
}

.ushop-order__field input:focus { outline: none; border-color: var(--color-accent); }

.ushop-order__consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: var(--space-6);
    font-size: var(--size-xs);
    line-height: var(--leading-normal);
    color: var(--color-ink-muted);
}

.ushop-order__consent a { color: var(--color-accent-dark); }

.ushop-order__total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-line);
    margin-bottom: var(--space-6);
    font-size: var(--size-lg);
    font-weight: var(--weight-semibold);
    font-variant-numeric: tabular-nums;
}

.ushop-order__send { width: 100%; padding: 16px; font-size: var(--size-base); }
.ushop-order__error { margin-bottom: var(--space-4); color: var(--color-danger); font-size: var(--size-sm); }
.ushop-order__done { text-align: center; padding: var(--space-8) 0; }
.ushop-order__done p { margin: 0 0 var(--space-6); color: var(--color-ink-muted); }

@media screen and (max-width: 640px) {

    /* Окно приходит снизу и занимает столько, сколько нужно содержимому:
       растянутое на всю высоту оставляло под кнопкой пустой лист. */
    .ushop-order { align-items: flex-end; padding: 0; }

    .ushop-order__window {
        min-height: 0;
        padding: 22px 18px calc(20px + env(safe-area-inset-bottom));
        border-radius: 16px 16px 0 0;
    }

    /* Узкая строка: снимок слева на две строки, справа — название с крестиком,
       под ними количество и сумма. Раньше сумма попадала в колонку шириной
       28px и обрезалась о край окна. */
    .ushop-order__item {
        /* Третья колонка — по содержимому: в ней и крестик, и сумма строки.
           С фиксированными 24px сумма вылезала за край окна. */
        grid-template-columns: 56px minmax(0, 1fr) auto;
        grid-template-areas:
            "thumb info remove"
            "thumb qty line";
        align-items: start;
        gap: var(--space-3) var(--space-3);
    }

    .ushop-order__thumb { grid-area: thumb; width: 56px; height: 56px; }
    .ushop-order__info { grid-area: info; }
    .ushop-order__qty { grid-area: qty; align-self: center; }
    .ushop-order__remove { grid-area: remove; }

    .ushop-order__line {
        grid-area: line;
        align-self: center;
        text-align: right;
        white-space: nowrap;
    }

    .ushop-order__title { font-size: var(--size-xl); }
    .ushop-order__total { font-size: var(--size-md); }
}

/* =====================================================================
   Блоки страниц: главная и всё, что переедет с замороженной вёрстки
   ===================================================================== */

.ushop-section {
    max-width: var(--container);
    margin: 0 auto;
    padding: var(--space-16) 20px;
    font-family: var(--font-text);
    color: var(--color-ink);
}

.ushop-section__title {
    margin: 0 0 var(--space-8);
    font-size: var(--size-3xl);
    line-height: var(--leading-tight);
    text-wrap: balance;
}

.ushop-section__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
}

.ushop-section__head .ushop-section__title { margin-bottom: var(--space-8); }

.ushop-section__more {
    font-size: var(--size-sm);
    color: var(--color-accent-dark);
    text-decoration: none;
}

.ushop-section__more:hover { text-decoration: underline; }

/* --- обложка -------------------------------------------------------- */

.ushop-hero {
    position: relative;
    background-color: var(--color-dark);
    background-size: cover;
    background-position: center;
    color: #fff;
}

/* Тёмная подложка: снимок светлый, белый текст по нему не читается. */
.ushop-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .35) 70%, rgba(0, 0, 0, .2) 100%);
}

.ushop-hero__inner {
    position: relative;
    max-width: var(--container);
    margin: 0 auto;
    padding: var(--space-16) 20px var(--space-12);
}

.ushop-hero__title {
    max-width: 16ch;
    margin: 0 0 var(--space-8);
    font-size: var(--size-5xl);
    line-height: var(--leading-tight);
    font-weight: var(--weight-bold);
}

.ushop-hero__buttons { display: flex; flex-wrap: wrap; gap: var(--space-3); }

.ushop-btn_light {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .5);
    color: #fff;
    backdrop-filter: blur(4px);
}

.ushop-btn_light:hover { background: rgba(255, 255, 255, .22); }

.ushop-hero__cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-6);
    margin-top: var(--space-16);
}

.ushop-hero__card { border-top: 2px solid rgba(255, 255, 255, .35); padding-top: var(--space-4); }
.ushop-hero__card-title { font-size: var(--size-md); font-weight: var(--weight-semibold); }

.ushop-hero__card-text {
    margin: 8px 0 0;
    font-size: var(--size-sm);
    line-height: var(--leading-normal);
    color: rgba(255, 255, 255, .8);
}

/* --- категории ------------------------------------------------------ */

.ushop-cats__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-8);
}

.ushop-cat {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-base);
    overflow: hidden;
    color: var(--color-ink);
    text-decoration: none;
    transition: border-color .2s, box-shadow .2s;
}

.ushop-cat:hover { border-color: var(--color-accent); box-shadow: 0 10px 30px rgba(0, 0, 0, .07); }

.ushop-cat__media { aspect-ratio: 16 / 10; background: var(--color-surface-alt); overflow: hidden; }

.ushop-cat__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s ease-out;
}

.ushop-cat:hover .ushop-cat__media img { transform: scale(1.04); }

.ushop-cat__body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: var(--space-6);
    flex: 1 1 auto;
}

.ushop-cat__title { font-size: var(--size-lg); font-weight: var(--weight-semibold); }
.ushop-cat__text { font-size: var(--size-sm); line-height: var(--leading-normal); color: var(--color-ink-muted); }
.ushop-cat__more { margin-top: auto; color: var(--color-accent-dark); font-size: var(--size-sm); }

/* --- направления вкладками ------------------------------------------ */

.ushop-dirs__tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ushop-dirs__radio { position: absolute; opacity: 0; pointer-events: none; }

.ushop-dirs__tab {
    padding: 10px 18px;
    border-radius: var(--radius-pill);
    background: var(--color-surface-alt);
    font-size: var(--size-sm);
    cursor: pointer;
    transition: background-color .2s, color .2s;
}

.ushop-dirs__tab:hover { background: var(--color-accent-bg); }

.ushop-dirs__panel {
    display: none;
    order: 99;
    flex-basis: 100%;
    margin-top: var(--space-8);
}

/* Вкладки без скрипта: отмеченная радиокнопка красит свою подпись
   и показывает свою панель — они лежат следом в том же контейнере. */
.ushop-dirs__radio:nth-of-type(1):checked ~ .ushop-dirs__panel[data-panel="0"],
.ushop-dirs__radio:nth-of-type(2):checked ~ .ushop-dirs__panel[data-panel="1"],
.ushop-dirs__radio:nth-of-type(3):checked ~ .ushop-dirs__panel[data-panel="2"],
.ushop-dirs__radio:nth-of-type(4):checked ~ .ushop-dirs__panel[data-panel="3"],
.ushop-dirs__radio:nth-of-type(5):checked ~ .ushop-dirs__panel[data-panel="4"],
.ushop-dirs__radio:nth-of-type(6):checked ~ .ushop-dirs__panel[data-panel="5"],
.ushop-dirs__radio:nth-of-type(7):checked ~ .ushop-dirs__panel[data-panel="6"],
.ushop-dirs__radio:nth-of-type(8):checked ~ .ushop-dirs__panel[data-panel="7"] { display: block; }

.ushop-dirs__radio:checked + .ushop-dirs__tab { background: var(--color-accent); color: #fff; }

.ushop-dirs__links {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-3) var(--space-6);
    margin: 0;
    padding: 0;
    list-style: none;
}

.ushop-dirs__links a {
    font-size: var(--size-sm);
    color: var(--color-ink);
    text-decoration: none;
}

.ushop-dirs__links a:hover { color: var(--color-accent-dark); }

/* --- три факта ------------------------------------------------------- */

.ushop-facts { background: var(--color-accent-bg); max-width: none; }
.ushop-facts > * { max-width: var(--container); margin-left: auto; margin-right: auto; }

.ushop-facts__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-8);
}

.ushop-fact { padding-left: var(--space-6); border-left: 2px solid var(--color-accent); }
.ushop-fact__title { font-size: var(--size-lg); font-weight: var(--weight-semibold); }

.ushop-fact__text {
    margin: 10px 0 0;
    font-size: var(--size-sm);
    line-height: var(--leading-loose);
    color: var(--color-ink-muted);
}

/* --- вопросы и ответы ------------------------------------------------ */

.ushop-faq { max-width: 860px; }
.ushop-faq__item { border-top: 1px solid var(--color-line); }
.ushop-faq__item:last-child { border-bottom: 1px solid var(--color-line); }

.ushop-faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-6) 0;
    font-size: var(--size-md);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    list-style: none;
}

.ushop-faq__question::-webkit-details-marker { display: none; }

.ushop-faq__question::after {
    content: '+';
    flex: 0 0 auto;
    font-size: var(--size-xl);
    font-weight: var(--weight-normal);
    color: var(--color-accent);
}

.ushop-faq__item[open] .ushop-faq__question::after { content: '−'; }

.ushop-faq__answer {
    padding-bottom: var(--space-6);
    line-height: var(--leading-loose);
    color: var(--color-ink-muted);
}

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

.ushop-about { max-width: 860px; }

.ushop-about__text {
    margin-bottom: var(--space-8);
    font-size: var(--size-md);
    line-height: var(--leading-loose);
    color: var(--color-ink-muted);
}

/* --- отзывы ----------------------------------------------------------- */

.ushop-reviews__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-6);
}

.ushop-review {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: var(--space-6);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-base);
}

.ushop-review__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.ushop-review__name { font-weight: var(--weight-semibold); }
.ushop-review__stars { color: var(--color-accent); white-space: nowrap; }
.ushop-review__stars span { color: var(--color-ink-faint); }
.ushop-review__date { font-size: var(--size-xs); color: var(--color-ink-faint); }

.ushop-review__text {
    margin: 0;
    font-size: var(--size-sm);
    line-height: var(--leading-normal);
    color: var(--color-ink-muted);
}

/* --- статьи на главной ------------------------------------------------ */

.ushop-blog_home { padding-top: 0; }

@media screen and (max-width: 960px) {
    .ushop-section { padding: var(--space-12) 20px; }
    .ushop-section__title { font-size: var(--size-2xl); }
    .ushop-hero__title { font-size: var(--size-3xl); max-width: none; }
    .ushop-hero__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
    .ushop-cats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
    .ushop-facts__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
}

@media screen and (max-width: 640px) {
    .ushop-hero__inner { padding: var(--space-12) 20px; }
    .ushop-hero__cards { grid-template-columns: minmax(0, 1fr); }
    .ushop-cats__grid { grid-template-columns: minmax(0, 1fr); }
    .ushop-hero__buttons .ushop-btn { flex: 1 1 100%; }
}

/* Окно обратного звонка — та же коробка, что у заказа, но уже. */
.ushop-callback__window { max-width: 460px; }

/* --- цитата во всю ширину -------------------------------------------- */

.ushop-quote {
    background: var(--color-accent-bg);
    padding: var(--space-12) 20px;
    text-align: center;
}

.ushop-quote__text {
    max-width: var(--container);
    margin: 0 auto;
    font-family: var(--font-text);
    font-size: var(--size-2xl);
    line-height: var(--leading-tight);
    color: var(--color-accent-dark);
    text-wrap: balance;
}

/* --- галерея ---------------------------------------------------------- */

.ushop-gallery__grid { display: grid; gap: var(--space-6); }

.ushop-gallery__grid_wide { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ushop-gallery__grid_narrow { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }

/* Логотипы перевозчиков — мелко и в ряд, это не иллюстрации. */
.ushop-gallery__grid_logos { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); align-items: center; }
.ushop-gallery__grid_logos .ushop-gallery__item { border: 0; background: none; }
.ushop-gallery__grid_logos img { object-fit: contain; aspect-ratio: 3 / 2; }

.ushop-gallery__item {
    margin: 0;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-base);
    background: var(--color-surface);
    overflow: hidden;
}

.ushop-gallery__grid_wide img { aspect-ratio: 4 / 3; object-fit: cover; }
.ushop-gallery__grid_narrow img { aspect-ratio: 3 / 4; object-fit: contain; padding: 8px; }
.ushop-gallery__item img { display: block; width: 100%; height: auto; }

/* --- контакты --------------------------------------------------------- */

.ushop-contacts__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-12);
    align-items: start;
}

.ushop-contacts__row {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    gap: var(--space-4);
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--color-line);
}

.ushop-contacts__label { font-size: var(--size-sm); color: var(--color-ink-faint); }
.ushop-contacts__value { color: var(--color-ink); text-decoration: none; }
.ushop-contacts__value_lg { font-size: var(--size-xl); font-weight: var(--weight-semibold); }
a.ushop-contacts__value:hover { color: var(--color-accent-dark); }

.ushop-contacts__socials { display: flex; flex-wrap: wrap; gap: var(--space-4); padding-top: var(--space-6); }
.ushop-contacts__socials a { font-size: var(--size-sm); color: var(--color-accent-dark); text-decoration: none; }
.ushop-contacts__socials a:hover { text-decoration: underline; }

.ushop-contacts__map {
    position: relative;
    min-height: 360px;
    border-radius: var(--radius-base);
    background: var(--color-surface-alt);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.ushop-contacts__map iframe { width: 100%; height: 100%; border: 0; position: absolute; inset: 0; }

.ushop-contacts__map-open {
    padding: 12px 22px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-base);
    background: var(--color-surface);
    font: inherit;
    cursor: pointer;
}

.ushop-contacts__map-open:hover { border-color: var(--color-accent); color: var(--color-accent-dark); }

/* --- текстовый блок и готовая разметка -------------------------------- */

.ushop-textblock { max-width: 860px; }
.ushop-textblock__body { font-size: var(--size-base); line-height: var(--leading-loose); }
.ushop-textblock__body p { margin: 0 0 var(--space-4); }
.ushop-textblock__body ul { margin: 0 0 var(--space-4); padding-left: 22px; }
.ushop-textblock__body li { margin-bottom: 6px; }

.ushop-rawhtml { max-width: 860px; }

@media screen and (max-width: 960px) {
    .ushop-contacts__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
    .ushop-gallery__grid_wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ushop-quote__text { font-size: var(--size-xl); }
}

@media screen and (max-width: 640px) {
    .ushop-gallery__grid_wide { grid-template-columns: minmax(0, 1fr); }
    .ushop-contacts__row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

/* --- страницы услуг ---------------------------------------------------- */

.ushop-intro { padding-bottom: var(--space-8); }

.ushop-intro__title {
    margin: 0 0 var(--space-4);
    font-size: var(--size-4xl);
    line-height: var(--leading-tight);
    text-wrap: balance;
}

.ushop-intro__text {
    max-width: 68ch;
    margin: 0 0 var(--space-6);
    font-size: var(--size-md);
    line-height: var(--leading-loose);
    color: var(--color-ink-muted);
}

/* --- ссылки на подразделы --------------------------------------------- */

.ushop-links { padding-top: 0; padding-bottom: var(--space-8); }
.ushop-links__row { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.ushop-links__item {
    padding: 9px 16px;
    border-radius: var(--radius-pill);
    background: var(--color-surface-alt);
    font-size: var(--size-sm);
    color: var(--color-ink);
    text-decoration: none;
    transition: background-color .2s, color .2s;
}

.ushop-links__item:hover { background: var(--color-accent-bg); color: var(--color-accent-dark); }

/* --- этапы работы ------------------------------------------------------ */

.ushop-steps__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-8);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: step;
}

.ushop-step { display: flex; flex-direction: column; gap: 10px; }

.ushop-step__num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-pill);
    background: var(--color-accent);
    color: #fff;
    font-weight: var(--weight-semibold);
    font-variant-numeric: tabular-nums;
}

.ushop-step__title { font-size: var(--size-md); font-weight: var(--weight-semibold); line-height: var(--leading-tight); }
.ushop-step__text { font-size: var(--size-sm); line-height: var(--leading-normal); color: var(--color-ink-muted); }

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

.ushop-btn {
    padding: 13px 24px;
    border-radius: 8px;
    font-size: var(--size-sm);
    letter-spacing: .01em;
    transition: background-color .18s, border-color .18s, color .18s,
                box-shadow .18s, transform .06s;
}

.ushop-btn:active { transform: translateY(1px); }

.ushop-btn_primary {
    box-shadow: 0 2px 10px rgba(59, 161, 81, .28);
}

.ushop-btn_primary:hover {
    background: var(--color-accent-dark);
    box-shadow: 0 6px 18px rgba(59, 161, 81, .34);
}

.ushop-btn_ghost {
    border-color: var(--color-line);
    color: var(--color-ink);
    background: var(--color-surface);
}

.ushop-btn_ghost:hover {
    border-color: var(--color-accent);
    color: var(--color-accent-dark);
    background: var(--color-accent-bg);
}

/* --- карточка товара -------------------------------------------------- */

.ushop-card {
    gap: 6px;
    padding: 14px 14px 16px;
    border: 1px solid var(--color-line);
    border-radius: 14px;
    background: var(--color-surface);
    transition: border-color .18s, box-shadow .18s, transform .18s;
}

.ushop-card:hover {
    border-color: transparent;
    box-shadow: 0 14px 34px rgba(17, 17, 17, .10);
    transform: translateY(-3px);
}

.ushop-card__media {
    border-radius: 10px;
    background: #fafafa;
    aspect-ratio: 4 / 3;
}

.ushop-card__img { padding: 6px; }

/* Значок: круг годился для «-10%», но не для слова «ТОП» */
.ushop-card__mark {
    top: 10px;
    left: 10px;
    right: auto;
    min-width: 0;
    height: 26px;
    padding: 0 10px;
    border-radius: var(--radius-pill);
    background: var(--color-ink);
    font-size: var(--size-xs);
    letter-spacing: .02em;
}

.ushop-card__title {
    font-size: var(--size-md);
    line-height: var(--leading-tight);
    /* Три строки максимум: иначе карточки в ряду разъезжаются по высоте */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ushop-card__descr {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ushop-card__prices { gap: 8px; padding-top: 10px; }
.ushop-card__price { font-size: var(--size-xl); letter-spacing: -.01em; }

.ushop-card__save {
    padding: 3px 8px;
    border-radius: var(--radius-pill);
    background: #ffeceb;
    color: #d64430;
    font-size: var(--size-xs);
    font-weight: var(--weight-semibold);
    white-space: nowrap;
}

.ushop-card__split {
    font-size: var(--size-xs);
    color: var(--color-ink-faint);
}

.ushop-card__btns { gap: 8px; margin-top: 12px; }

/* Кнопка покупки — главная в карточке, поэтому шире и заметнее */
.ushop-card__btns .ushop-btn_primary { flex: 1 1 auto; }
.ushop-card__btns .ushop-btn_ghost { flex: 0 0 auto; padding: 13px 16px; }

/* --- страница товара --------------------------------------------------- */

.ushop-product__buy {
    margin: var(--space-6) 0;
    padding: var(--space-6);
    border: 1px solid var(--color-line);
    border-radius: 14px;
    background: var(--color-surface);
}

.ushop-product__prices { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; }

.ushop-product__price {
    font-size: var(--size-4xl);
    font-weight: var(--weight-bold);
    line-height: 1;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

.ushop-product__portion { font-size: var(--size-sm); color: var(--color-ink-faint); }
.ushop-product__price-old { font-size: var(--size-md); color: var(--color-ink-faint); }

.ushop-product__save {
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    background: #ffeceb;
    color: #d64430;
    font-size: var(--size-sm);
    font-weight: var(--weight-semibold);
}

.ushop-product__split {
    margin-top: 8px;
    font-size: var(--size-sm);
    color: var(--color-ink-muted);
}

.ushop-product__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: var(--space-6);
}

.ushop-product__actions .ushop-btn { padding: 16px 26px; font-size: var(--size-base); }
.ushop-product__actions .ushop-btn_primary { flex: 1 1 220px; }

.ushop-product__trust {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin: var(--space-6) 0 0;
    padding: var(--space-4) 0 0;
    border-top: 1px solid var(--color-line);
    list-style: none;
    font-size: var(--size-sm);
    color: var(--color-ink-muted);
}

/* Галочка перед каждым пунктом — рисуем, а не грузим значок */
.ushop-product__trust li { display: flex; align-items: center; gap: 7px; }

.ushop-product__trust li::before {
    content: '';
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--color-accent-bg);
    box-shadow: inset 0 0 0 1px var(--color-accent);
}

/* --- квиз -------------------------------------------------------------- */

.ushop-quiz {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(17, 17, 17, .07);
}

.ushop-quiz__progress { height: 4px; background: var(--color-surface-alt); }

.ushop-quiz__progress-bar {
    background: linear-gradient(90deg, var(--color-accent), #57c46f);
    transition: width .35s ease;
}

.ushop-quiz__question {
    font-size: var(--size-2xl);
    line-height: var(--leading-tight);
    letter-spacing: -.01em;
}

/* Варианты ответа — крупные мишени: по ним и кликают */
.ushop-quiz__option {
    border: 1px solid var(--color-line);
    border-radius: 12px;
    padding: 16px 18px;
    background: var(--color-surface);
    transition: border-color .18s, box-shadow .18s, background-color .18s;
}

.ushop-quiz__option:hover {
    border-color: var(--color-accent);
    background: var(--color-accent-bg);
}

.ushop-quiz__option:has(input:checked) {
    border-color: var(--color-accent);
    background: var(--color-accent-bg);
    box-shadow: 0 0 0 1px var(--color-accent);
}

.ushop-quiz__options_image .ushop-quiz__option { padding: 10px 10px 14px; }
.ushop-quiz__option-img { border-radius: 10px; }

.ushop-quiz__panel { background: linear-gradient(160deg, var(--color-accent-bg), #f4faf5); }

.ushop-quiz__next,
.ushop-quiz__send { padding: 15px 30px; font-size: var(--size-base); }

/* --- врезка с призывом -------------------------------------------------- */

/* Тёмная заливка врезки уехала вместе с прежней вёрсткой: теперь это
   зелёная карточка с формой, правила ниже по файлу. */

/* --- витрина ------------------------------------------------------------ */

.ushop-grid { gap: 24px 20px; }

@media screen and (max-width: 640px) {
    .ushop-card { padding: 10px 10px 12px; border-radius: 12px; }
    .ushop-card__title { font-size: var(--size-sm); -webkit-line-clamp: 2; }
    .ushop-card__price { font-size: var(--size-md); }
    .ushop-card__descr, .ushop-card__split { display: none; }
    .ushop-card__btns .ushop-btn_ghost { display: none; }
    .ushop-product__price { font-size: var(--size-3xl); }
    .ushop-product__actions .ushop-btn { flex: 1 1 100%; }
}

/* =====================================================================
   Главная: ритм секций, обложка и карточки направлений.

   Блоки шли встык и с одинаковым фоном — страница читалась сплошной
   лентой. Разделяем чередованием подложки и общим ритмом заголовков.
   ===================================================================== */

/* --- общий ритм -------------------------------------------------------- */

.ushop-section__title {
    font-size: var(--size-3xl);
    letter-spacing: -.02em;
}

/* Чередование подложки: соседние секции не сливаются */
.ushop-cats { background: var(--color-surface); }
.ushop-dirs { background: #fafbfa; max-width: none; }
.ushop-dirs > * { max-width: var(--container); margin-left: auto; margin-right: auto; }
.ushop-reviews { background: #fafbfa; max-width: none; }
.ushop-reviews > * { max-width: var(--container); margin-left: auto; margin-right: auto; }

/* --- обложка ------------------------------------------------------------ */

.ushop-hero__inner { padding: var(--space-16) 20px var(--space-12); }

.ushop-hero::before {
    background: linear-gradient(100deg, rgba(10, 12, 14, .82) 0%,
                rgba(10, 12, 14, .55) 45%, rgba(10, 12, 14, .18) 100%);
}

.ushop-hero__title {
    /* Ширина под авторский перенос: у́же — и «под ключ» уезжает на третью
       строку одиноким словом. */
    max-width: 26ch;
    font-size: clamp(34px, 4.4vw, 56px);
    line-height: 1.08;
    letter-spacing: -.03em;
}

.ushop-hero__buttons { margin-bottom: var(--space-16); }
.ushop-hero__buttons .ushop-btn { padding: 17px 32px; font-size: var(--size-base); }

/* Карточки этапов: тонкая линия сверху читалась плохо на фотографии */
.ushop-hero__cards { gap: 14px; margin-top: 0; }

.ushop-hero__card {
    padding: 18px 18px 20px;
    border: 0;
    border-radius: 12px;
    background: rgba(255, 255, 255, .10);
    backdrop-filter: blur(8px);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
}

.ushop-hero__card-title { font-size: var(--size-base); }
.ushop-hero__card-text { color: rgba(255, 255, 255, .82); }

/* --- категории ---------------------------------------------------------- */

.ushop-cat {
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(17, 17, 17, .04);
    transition: border-color .18s, box-shadow .18s, transform .18s;
}

.ushop-cat:hover {
    border-color: transparent;
    box-shadow: 0 18px 40px rgba(17, 17, 17, .12);
    transform: translateY(-4px);
}

.ushop-cat__body { padding: var(--space-6); }
.ushop-cat__title { font-size: var(--size-xl); letter-spacing: -.01em; }

/* Стрелка у «Открыть»: показывает, что карточка ведёт дальше */
.ushop-cat__more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: var(--weight-semibold);
}

.ushop-cat__more::after {
    content: '→';
    transition: transform .18s;
}

.ushop-cat:hover .ushop-cat__more::after { transform: translateX(4px); }

/* --- три факта ----------------------------------------------------------- */

.ushop-facts { background: var(--color-surface); }

.ushop-fact {
    padding: var(--space-6);
    border: 1px solid var(--color-line);
    border-left: 3px solid var(--color-accent);
    border-radius: 12px;
    background: var(--color-surface);
}

/* --- отзывы --------------------------------------------------------------- */

.ushop-review {
    border: 0;
    border-radius: 14px;
    background: var(--color-surface);
    box-shadow: 0 2px 14px rgba(17, 17, 17, .06);
}

.ushop-review__text { color: var(--color-ink); }

/* --- вопросы и ответы ------------------------------------------------------ */

.ushop-faq__item { border-top-color: var(--color-line); }
.ushop-faq__question { font-size: var(--size-lg); }
.ushop-faq__question:hover { color: var(--color-accent-dark); }

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

.ushop-about {
    max-width: var(--container);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-12);
    align-items: start;
}

.ushop-about .ushop-section__title { grid-column: 1; margin-bottom: 0; }
.ushop-about__text { grid-column: 2; grid-row: 1 / span 2; margin-bottom: 0; }
.ushop-about .ushop-btn { grid-column: 1; justify-self: start; }

@media screen and (max-width: 960px) {
    .ushop-about { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
    .ushop-about .ushop-section__title,
    .ushop-about__text,
    .ushop-about .ushop-btn { grid-column: 1; grid-row: auto; }
}

@media screen and (max-width: 640px) {
    .ushop-hero__inner { padding: var(--space-12) 20px; }
    .ushop-hero__buttons { margin-bottom: var(--space-8); }
    .ushop-hero__buttons .ushop-btn { padding: 15px 24px; }
}

/* На узком экране четыре карточки этапов вытягивали обложку на два
   экрана — до содержимого приходилось долго листать. Ставим их лентой
   с горизонтальной прокруткой и залипанием. */
@media screen and (max-width: 640px) {
    .ushop-hero__cards {
        display: flex;
        gap: 10px;
        margin: 0 -20px;
        padding: 0 20px 4px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .ushop-hero__cards::-webkit-scrollbar { display: none; }

    .ushop-hero__card {
        flex: 0 0 78%;
        scroll-snap-align: start;
        padding: 14px 16px 16px;
    }

    .ushop-hero__card-text { font-size: var(--size-xs); }
}

/* =====================================================================
   Приёмы из библиотеки промптов motionsites, переложенные на нашу
   систему: фирменный зелёный, TildaSans и светлая бумага остаются.
   ===================================================================== */

/* --- отзывы бегущей лентой (Testimonials — Dual Marquee) ---------------
   Пять отзывов сеткой занимали экран и читались как таблица. Лентой они
   и компактнее, и заметнее. */

.ushop-reviews__marquee {
    position: relative;
    overflow: hidden;
    /* Края растворяются, чтобы карточки не обрывались линией */
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.ushop-reviews__track {
    display: flex;
    gap: var(--space-6);
    width: max-content;
    animation: ushop-marquee 46s linear infinite;
}

.ushop-reviews__marquee:hover .ushop-reviews__track,
.ushop-reviews__marquee:focus-within .ushop-reviews__track { animation-play-state: paused; }

.ushop-reviews__track .ushop-review { flex: 0 0 clamp(280px, 26vw, 380px); }

@keyframes ushop-marquee {
    from { transform: translateX(0); }
    /* Список продублирован: сдвиг ровно на половину даёт бесшовный стык */
    to { transform: translateX(calc(-50% - var(--space-6) / 2)); }
}

/* --- факты редакционной подачей (Features — Vision) ---------------------
   Крупный номер, тонкая линейка, воздух. Числа проставляются счётчиком,
   так что править разметку при добавлении пункта не нужно. */

.ushop-facts__grid { counter-reset: ushop-fact; }

.ushop-fact {
    counter-increment: ushop-fact;
    position: relative;
    padding-top: var(--space-8);
    border: 0;
    border-top: 1px solid var(--color-ink);
    border-radius: 0;
}

.ushop-fact::before {
    content: counter(ushop-fact, decimal-leading-zero);
    display: block;
    margin-bottom: var(--space-4);
    font-size: var(--size-sm);
    font-weight: var(--weight-semibold);
    letter-spacing: .1em;
    color: var(--color-accent);
    font-variant-numeric: tabular-nums;
}

.ushop-fact__title {
    font-size: var(--size-2xl);
    line-height: var(--leading-tight);
    letter-spacing: -.02em;
}

/* --- вопросы с нумерацией (FAQ — Insights) ------------------------------ */

.ushop-faq__list { counter-reset: ushop-q; }
.ushop-faq__item { counter-increment: ushop-q; }

.ushop-faq__question::before {
    content: counter(ushop-q, decimal-leading-zero);
    flex: 0 0 auto;
    margin-right: var(--space-4);
    font-size: var(--size-sm);
    font-weight: var(--weight-normal);
    color: var(--color-ink-faint);
    font-variant-numeric: tabular-nums;
}

.ushop-faq__question::after { transition: transform .2s ease; }
.ushop-faq__item[open] .ushop-faq__question::after { transform: rotate(180deg); }
.ushop-faq__item[open] .ushop-faq__question::before { color: var(--color-accent); }

/* Движение выключаем, если человек попросил об этом в системе */
@media (prefers-reduced-motion: reduce) {
    .ushop-reviews__track { animation: none; }
    .ushop-reviews__marquee { overflow-x: auto; }
}

@media screen and (max-width: 640px) {
    .ushop-reviews__track { animation-duration: 32s; }
    .ushop-fact__title { font-size: var(--size-lg); }
}

/* --- вопросы в две колонки ---------------------------------------------
   Шесть вопросов в столбик занимали экран, а справа от номера оставалась
   пустая половина: у строки три элемента и space-between уводил текст
   вопроса в середину. Раскладываем сеткой и прижимаем текст влево. */

.ushop-faq { max-width: var(--container); }

.ushop-faq__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-12);
}

.ushop-faq__question { justify-content: flex-start; }

/* Знак раскрытия прижат к правому краю строки */
.ushop-faq__question::after { margin-left: auto; padding-left: var(--space-4); }

/* Ответ выравниваем по тексту вопроса, а не по номеру */
.ushop-faq__answer { padding-left: calc(var(--size-sm) * 2 + var(--space-4)); }

@media screen and (max-width: 960px) {
    .ushop-faq__list { grid-template-columns: minmax(0, 1fr); }
}

@media screen and (max-width: 640px) {
    .ushop-faq__answer { padding-left: 0; }
}

/* --- категории лентой (Services — Cascade, «Tasting Menu») --------------
   В исходнике секция прибита к экрану GSAP-ом, а лента ползёт от прокрутки
   страницы. У нас обычная горизонтальная прокрутка с залипанием: она не
   перехватывает колесо, работает пальцем и с клавиатуры и не тянет
   библиотеку ради одной секции.

   Из исходника взяты: карточка 400×550 на белом со скруглением 24 и мягкой
   тенью, крупный зазор, подъём карточки и наезд снимка при наведении.
   Поворот на 5° не беру — он уместен ресторану, а не инженерным системам. */

.ushop-cats__wrap { position: relative; }

.ushop-cats__wrap_scroll .ushop-cats__grid {
    display: flex;
    grid-template-columns: none;
    gap: clamp(20px, 3vw, 64px);
    /* Лента живёт внутри контейнера. Растягивать её во всю ширину через
       margin: 0 calc(50% - 50vw) нельзя: 100vw считает и полосу прокрутки,
       и страница получает горизонтальный сдвиг. */
    padding: 8px 0 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
}

.ushop-cats__wrap_scroll .ushop-cats__grid::-webkit-scrollbar { display: none; }

.ushop-cats__wrap_scroll .ushop-cats__grid:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: -3px;
}

.ushop-cats__wrap_scroll .ushop-cat {
    flex: 0 0 clamp(260px, 26vw, 400px);
    /* В исходнике карточка 400×550. У нас она у́же, и постоянные 550px
       оставляли под коротким описанием пустую половину — держим ту же
       пропорцию от ширины. */
    min-height: clamp(360px, 36vw, 550px);
    scroll-snap-align: start;
    border-radius: 24px;
    box-shadow: 0 10px 30px rgba(17, 17, 17, .07);
}

.ushop-cats__wrap_scroll .ushop-cat__media { aspect-ratio: 4 / 3; }

/* Описания у категорий разной длины: без ограничения одна карточка
   растягивала весь ряд. */
.ushop-cats__wrap_scroll .ushop-cat__text {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ushop-cats__wrap_scroll .ushop-cat:hover {
    transform: translateY(-10px);
    box-shadow: 0 22px 50px rgba(17, 17, 17, .14);
}

.ushop-cats__wrap_scroll .ushop-cat:hover .ushop-cat__media img { transform: scale(1.08); }

/* --- стрелки ------------------------------------------------------------ */

.ushop-cats__nav {
    position: absolute;
    top: -62px;
    right: 0;
    display: flex;
    gap: 8px;
}

.ushop-cats__arrow {
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    font-size: var(--size-md);
    line-height: 1;
    color: var(--color-ink);
    cursor: pointer;
    transition: border-color .18s, color .18s, background-color .18s, opacity .18s;
}

.ushop-cats__arrow:hover { border-color: var(--color-accent); color: var(--color-accent-dark); }
.ushop-cats__arrow[disabled] { opacity: .35; cursor: default; }
.ushop-cats__arrow[disabled]:hover { border-color: var(--color-line); color: var(--color-ink); }

@media (prefers-reduced-motion: reduce) {
    .ushop-cats__wrap_scroll .ushop-cats__grid { scroll-behavior: auto; }
    .ushop-cats__wrap_scroll .ushop-cat:hover { transform: none; }
}

@media screen and (max-width: 960px) {
    /* Пальцем листают и без стрелок, а места они занимают заметно */
    .ushop-cats__nav { display: none; }
    .ushop-cats__wrap_scroll .ushop-cat { min-height: 0; }
}

/* --- ряд кнопок покупки и галочки --------------------------------------
   Кнопка-ссылка переносила подпись на две строки и вырастала до 78px
   против 50 у соседней: ширину забирала первая кнопка. Делим ряд поровну
   и тянем обе по высоте. */

.ushop-product__actions { align-items: stretch; }

.ushop-product__actions .ushop-btn,
.ushop-product__actions .ushop-btn_primary { flex: 1 1 200px; line-height: 1.25; }

/* Галочка вместо кольца: кольцо читалось как пустой переключатель */
.ushop-product__trust li::before { content: none; }

.ushop-check {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    color: var(--color-accent);
}

/* Кнопки ряда покупки держим одной высоты явно.
   На страницах с замороженной оболочкой стили Tilda подмешиваются
   к ссылке, и кнопка-ссылка вырастала до 82px против 54 у соседней. */
.ushop-product__actions .ushop-btn {
    white-space: nowrap;
    height: 54px;
    padding-top: 0;
    padding-bottom: 0;
}

/* Кнопка-ссылка на страницах с замороженной оболочкой получала от стилей
   Tilda height: 48px, а при content-box к этой высоте прибавлялись поля —
   выходило 82px против 54 у соседней кнопки. Задаём кнопкам свою коробку
   и снимаем чужую высоту. */
.ushop-btn {
    box-sizing: border-box;
    height: auto;
    min-height: 0;
}

/* Ряд не растягиваем по высоте: после фиксированной высоты кнопок под ними
   оставалась лишняя полоса. */
.ushop-product__actions { align-content: flex-start; height: auto; }

/* --- крошки, начало страницы и SEO-текст --------------------------------
   Крошки были 12px — мельче всего остального на странице и плохо читались.
   Ставим 14px один раз: разметка крошек общая, значит размер один на весь
   сайт. */

.ushop-crumbs { padding: var(--space-4) 20px; }
.ushop-crumbs ol { font-size: var(--size-sm); }

/* Между крошками и заголовком было 64px от верхнего поля секции —
   заголовок отрывался от страницы. Первому блоку это поле снимаем. */
.ushop-intro { padding-top: var(--space-6); }
.ushop-blog, .ushop-article, .ushop-search-page { padding-top: var(--space-6); }
.ushop-article-layout .ushop-article { padding-top: var(--space-6); }

/* SEO-текст внизу раздела — во всю ширину контейнера. */
.ushop-textblock { max-width: var(--container); }

/* На страницах с замороженной оболочкой крошки рисует блок T758 Tilda —
   там они 16px. Приводим к нашему размеру, чтобы по сайту он был один. */
.t758,
.t758__list,
.t758__item,
.t758 a,
.t758 span { font-size: var(--size-sm); }

/* --- начало страницы: кнопка справа от лида ------------------------------
   На Tilda блок T185 держал текст в колонке на 10 долей, а кнопку — в
   колонке на 2 справа. Возвращаем ту же раскладку: заголовок во всю
   ширину, под ним текст слева и кнопка справа на одной линии. */

.ushop-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--space-12);
    align-items: center;
}

.ushop-intro__title { grid-column: 1 / -1; }

.ushop-intro__text { grid-column: 1; margin-bottom: 0; }

.ushop-intro .ushop-btn {
    grid-column: 2;
    justify-self: end;
    white-space: nowrap;
}

@media screen and (max-width: 767px) {
    /* На узком экране колонка одна: кнопка встаёт под текстом */
    .ushop-intro { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-6); }
    .ushop-intro__text, .ushop-intro .ushop-btn { grid-column: 1; }
    .ushop-intro .ushop-btn { justify-self: start; }
}

/* --- «Другие разделы»: компактнее ---------------------------------------
   34 ссылки занимали четыре ряда и половину первого экрана. Делаем плашки
   мельче, а список сворачиваем до двух рядов с кнопкой «Ещё».

   Сворачивает скрипт: без него видны все ссылки — они и для посетителя,
   и для поисковика, прятать их разметкой нельзя. */

.ushop-links { padding-bottom: var(--space-6); }

.ushop-links .ushop-section__title {
    margin-bottom: var(--space-4);
    font-size: var(--size-lg);
    letter-spacing: -.01em;
}

.ushop-links__row { gap: 8px; }

.ushop-links__item {
    padding: 7px 14px;
    font-size: var(--size-xs);
    border: 1px solid transparent;
    background: var(--color-surface-alt);
    transition: background-color .15s, color .15s, border-color .15s;
}

.ushop-links__item:hover {
    background: var(--color-surface);
    border-color: var(--color-accent);
    color: var(--color-accent-dark);
}

/* Свёрнутое состояние: два ряда плашек */
.ushop-links__row_collapsed {
    max-height: calc(2 * 32px + 8px);
    overflow: hidden;
}

.ushop-links__more {
    margin-top: var(--space-3);
    padding: 7px 14px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    font: inherit;
    font-size: var(--size-xs);
    color: var(--color-ink-muted);
    cursor: pointer;
    transition: border-color .15s, color .15s;
}

.ushop-links__more:hover { border-color: var(--color-accent); color: var(--color-accent-dark); }

/* Плашки разделов — со скруглением 5px, как у кнопок в вёрстке Tilda,
   а не капсулой. */
.ushop-links__item,
.ushop-links__more { border-radius: 5px; }

/* --- вертикальный ритм начала страницы ----------------------------------
   Между крошками и заголовком было 24px плюс поля крошек, а перед витриной
   — все 64px верхнего поля секции. Верх страницы из-за этого расползался
   на полтора экрана. Сжимаем: крупные поля оставляем между смысловыми
   блоками ниже, а вводную часть держим плотнее. */

.ushop-crumbs { padding-top: var(--space-3); padding-bottom: var(--space-2); }
.ushop-intro { padding-top: var(--space-3); padding-bottom: var(--space-6); }
.ushop-links { padding-bottom: var(--space-4); }

/* Витрина идёт сразу за ссылками — ей столько воздуха сверху не нужно */
.ushop-section_flush { padding-top: var(--space-6); }

/* =====================================================================
   Обложка главной на весь первый экран.

   Раньше высоту задавали поля, и обложка обрывалась на середине фото —
   теперь она занимает экран целиком (за вычетом шапки): заголовок и
   кнопки по центру, карточки этапов прижаты к низу.
   ===================================================================== */

.ushop-hero {
    min-height: calc(100svh - 65px);
    display: flex;
}

/* Тёмное к низу: карточки этапов лежат на самой светлой части снимка */
.ushop-hero::before {
    background:
        linear-gradient(to top, rgba(10, 12, 14, .88) 0%, rgba(10, 12, 14, .30) 55%, rgba(10, 12, 14, .18) 100%),
        linear-gradient(100deg, rgba(10, 12, 14, .70) 0%, rgba(10, 12, 14, .25) 60%, transparent 100%);
}

.ushop-hero__inner {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: var(--space-12) 20px var(--space-8);
}

/* Заголовок с кнопками — по центру экрана, карточки уходят вниз */
.ushop-hero__lead { margin: auto 0; }

.ushop-hero__eyebrow {
    margin: 0 0 var(--space-4);
    font-size: var(--size-sm);
    font-weight: var(--weight-semibold);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #8fdca0;
}

.ushop-hero__title { max-width: 20ch; font-size: clamp(38px, 5vw, 64px); }
.ushop-hero__buttons { margin-bottom: 0; }
.ushop-hero__cards { margin-top: var(--space-12); }

/* Подсказка «листайте ниже»: тонкая полоса с медленной пульсацией */
.ushop-hero__scroll {
    width: 1px;
    height: 40px;
    margin: var(--space-6) auto 0;
    background: linear-gradient(to bottom, rgba(143, 220, 160, .9), transparent);
    animation: ushop-hero-pulse 2.4s ease-in-out infinite;
}

@keyframes ushop-hero-pulse {
    0%, 100% { opacity: .25; transform: scaleY(.6); transform-origin: top; }
    50% { opacity: 1; transform: scaleY(1); transform-origin: top; }
}

/* Появление ступенькой: сначала подпись, затем заголовок, кнопки, карточки */
@keyframes ushop-hero-up {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
    .ushop-hero__eyebrow,
    .ushop-hero__title,
    .ushop-hero__buttons,
    .ushop-hero__card {
        opacity: 0;
        animation: ushop-hero-up .7s ease forwards;
    }

    .ushop-hero__eyebrow { animation-delay: .05s; }
    .ushop-hero__title { animation-delay: .18s; }
    .ushop-hero__buttons { animation-delay: .32s; }
    .ushop-hero__card { animation-delay: .46s; }
    .ushop-hero__card:nth-child(2) { animation-delay: .54s; }
    .ushop-hero__card:nth-child(3) { animation-delay: .62s; }
    .ushop-hero__card:nth-child(4) { animation-delay: .70s; }

    .ushop-hero__scroll { animation-delay: .9s; }
}

@media screen and (max-width: 900px) {
    /* На телефоне карточки листаются вбок, поэтому воздуха им нужно меньше */
    .ushop-hero { min-height: calc(100svh - 57px); }
    .ushop-hero__inner { padding: var(--space-8) 20px var(--space-6); }
    .ushop-hero__cards { margin-top: var(--space-8); }
    .ushop-hero__title { font-size: clamp(28px, 7vw, 40px); max-width: none; }
    .ushop-hero__scroll { display: none; }
}

/* =====================================================================
   Фильтр остаётся на виду.

   Витрина длинная, и, пролистав до низа, отметить ещё одно значение можно
   было только вернувшись наверх. Панель едет вместе со страницей и, если
   не помещается в экран, прокручивается внутри себя.
   ===================================================================== */

@media screen and (min-width: 961px) {
    .ushop-filters {
        position: sticky;
        /* 65px — липкая шапка сайта, плюс немного воздуха */
        top: 81px;
        max-height: calc(100vh - 97px);
        overflow-y: auto;
        /* полоса прокрутки не должна прижимать подписи к краю */
        padding-right: 6px;
        scrollbar-width: thin;
    }

    .ushop-filters::-webkit-scrollbar { width: 6px; }
    .ushop-filters::-webkit-scrollbar-thumb {
        border-radius: 3px;
        background: var(--color-line);
    }
}

/* =====================================================================
   На телефоне фильтра нет.

   Витрину там смотрят подряд, а панель параметров — хоть шторкой, хоть
   колонкой — только мешала: занимала экран и уводила от товаров. Разметка
   остаётся общей, на узком экране она просто не показывается.
   ===================================================================== */

@media screen and (max-width: 960px) {
    .ushop-filters { display: none; }
}

/* Лента карточек в обложке выходила за края отрицательными полями и
   растягивала всю обложку на 40px шире экрана — текст уезжал влево,
   а кнопки за правый край. Прокручиваем ленту внутри контейнера. */
@media screen and (max-width: 640px) {
    .ushop-hero__inner { min-width: 0; max-width: 100%; overflow-x: hidden; }
    .ushop-hero__cards { margin: var(--space-8) 0 0; padding: 0 0 4px; }
}

/* Раздел без параметров: витрина занимает всю ширину, а не жмётся
   рядом с пустой колонкой фильтра. */
.ushop-catalog__body_wide { grid-template-columns: minmax(0, 1fr); }

/* =====================================================================
   Окно обратного звонка.

   На телефоне оно растягивалось на всю высоту экрана — под кнопкой
   оставалось поле пустой бумаги, а на десктопе крестик наезжал на
   заголовок. Собираем окно по содержимому и выравниваем по центру.
   ===================================================================== */

.ushop-callback { align-items: center; padding: 24px 16px; }

.ushop-callback__window {
    max-width: 440px;
    margin: auto;
    padding: 32px 32px 28px;
    border-radius: 16px;
}

/* Заголовок не должен подлезать под крестик */
.ushop-callback .ushop-order__title {
    margin-bottom: var(--space-2);
    padding-right: 36px;
    font-size: var(--size-xl);
    line-height: var(--leading-tight);
}

.ushop-callback .ushop-order__note { margin: 0 0 var(--space-6); }

.ushop-callback .ushop-order__close {
    top: 16px;
    right: 16px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--color-surface-alt);
    font-size: 20px;
}

.ushop-callback .ushop-order__field { margin-bottom: var(--space-3); }

.ushop-callback .ushop-order__field span {
    margin-bottom: 5px;
    font-size: var(--size-xs);
    font-weight: var(--weight-semibold);
    color: var(--color-ink);
}

.ushop-callback .ushop-order__field input { padding: 12px 14px; border-radius: 8px; }

.ushop-callback .ushop-order__consent {
    align-items: center;
    margin: var(--space-4) 0 var(--space-5);
}

.ushop-callback .ushop-order__consent input {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    accent-color: var(--color-accent);
}

.ushop-callback .ushop-order__send { padding: 14px; }

@media screen and (max-width: 640px) {
    /* Как и фильтр, окно приходит снизу — так его удобнее закрывать
       большим пальцем, и оно не занимает экран целиком. */
    .ushop-callback { align-items: flex-end; padding: 0; }

    .ushop-callback__window {
        min-height: 0;
        margin: 0;
        padding: 24px 20px calc(20px + env(safe-area-inset-bottom));
        border-radius: 16px 16px 0 0;
    }
}

/* Поля считались по content-box, и к ширине 100% прибавлялись поля и рамка —
   ввод вылезал за край окна на 30px. Глобально box-sizing не трогаем:
   на замороженных страницах Tilda своя раскладка. */
.ushop-order input,
.ushop-order textarea,
.ushop-order select,
.ushop-filters input,
.ushop-quiz input,
.ushop-quiz textarea,
.ushop-search input { box-sizing: border-box; }

/* Отметки в фильтре красились системным синим — уводили взгляд с бренда */
.ushop-filters input[type="checkbox"] { accent-color: var(--color-accent); }

/* На телефоне заголовок висел ровно посередине, и между кнопками и
   карточками зияла пустая полоса фотографии. Собираем текст к низу. */
@media screen and (max-width: 640px) {
    .ushop-hero__lead { margin: auto 0 0; }
    .ushop-hero__cards { margin-top: var(--space-6); }
}

/* Заголовок страницы, у которой нет блока «начало» — документы и подобные.
   Без него страница уходила в индекс без H1. */
.ushop-pagehead {
    max-width: var(--container);
    margin: 0 auto;
    padding: var(--space-3) 20px var(--space-4);
}

.ushop-pagehead__title {
    margin: 0;
    font-size: var(--size-4xl);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    letter-spacing: -.02em;
}

@media screen and (max-width: 640px) {
    .ushop-pagehead__title { font-size: var(--size-2xl); }
}

/* --- страница «не найдено» -------------------------------------------- */

.ushop-notfound {
    max-width: 640px;
    margin: 0 auto;
    padding: var(--space-16) 20px var(--space-16);
    text-align: center;
}

.ushop-notfound__code {
    margin: 0;
    font-size: 72px;
    font-weight: var(--weight-bold);
    line-height: 1;
    color: var(--color-accent);
    letter-spacing: -.04em;
}

.ushop-notfound__title { margin: var(--space-4) 0 var(--space-3); font-size: var(--size-3xl); }
.ushop-notfound__text { margin: 0 0 var(--space-8); color: var(--color-ink-muted); }

.ushop-notfound__search { display: flex; gap: 10px; margin-bottom: var(--space-6); }

.ushop-notfound__search input {
    box-sizing: border-box;
    flex: 1 1 auto;
    padding: 13px 16px;
    border: 1px solid var(--color-line);
    border-radius: 8px;
    font: inherit;
}

.ushop-notfound__links { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: center; }
.ushop-notfound__links a { color: var(--color-accent-dark); }

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

.ushop-pages {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: var(--space-8);
}

.ushop-pages__list { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

.ushop-pages__item,
.ushop-pages__step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--color-line);
    border-radius: 5px;
    background: var(--color-surface);
    color: var(--color-ink);
    font-size: var(--size-sm);
    font-variant-numeric: tabular-nums;
    text-decoration: none;
}

.ushop-pages__item:hover,
.ushop-pages__step:hover {
    border-color: var(--color-accent);
    color: var(--color-accent-dark);
}

/* Текущая страница — не ссылка, поэтому и выглядит иначе */
.ushop-pages__item.is-current {
    border-color: var(--color-accent);
    background: var(--color-accent);
    color: #fff;
    font-weight: var(--weight-semibold);
}

.ushop-pages__gap { padding: 0 2px; color: var(--color-ink-faint); }

/* Кнопку «Загрузить ещё» скрипт ставит перед списком страниц */
.ushop-more + .ushop-pages { margin-top: var(--space-6); }

@media screen and (max-width: 640px) {
    /* На узком экране полный ряд номеров занимал четыре строки — оставляем
       шаги, соседние страницы и края списка */
    .ushop-pages__item,
    .ushop-pages__step { min-width: 34px; height: 34px; padding: 0 10px; }
    .ushop-pages__item_far { display: none; }

    /* «Назад» и «Дальше» разводим по краям одной строки, номера — под ними:
       иначе каждый шаг занимал собственную строку */
    .ushop-pages { justify-content: space-between; }

    .ushop-pages__list {
        order: 2;
        flex-basis: 100%;
        justify-content: center;
    }
}

/* =====================================================================
   Колонка слева: соседние разделы и фильтры.

   Разделы стояли над витриной россыпью из трёх с лишним десятков плашек
   и занимали треть первого экрана. Списком рядом с товарами они читаются
   как навигация, а витрина начинается сразу под заголовком.
   ===================================================================== */

.ushop-side { display: grid; gap: var(--space-8); align-content: start; }

.ushop-sections__title {
    margin-bottom: var(--space-3);
    font-size: var(--size-md);
    font-weight: var(--weight-semibold);
}

.ushop-sections__list { margin: 0; padding: 0; list-style: none; }

.ushop-sections__row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 5px 0;
}

.ushop-sections__name {
    color: var(--color-ink-muted);
    font-size: var(--size-sm);
    line-height: var(--leading-normal);
    text-decoration: none;
}

.ushop-sections__name:hover { color: var(--color-accent-dark); }

/* Текущий раздел — не ссылка: подсвечиваем, чтобы было видно, где стоим */
.ushop-sections__name.is-current {
    color: var(--color-ink);
    font-weight: var(--weight-semibold);
}

.ushop-sections__count {
    margin-left: auto;
    color: var(--color-ink-faint);
    font-size: var(--size-xs);
    font-variant-numeric: tabular-nums;
}

.ushop-sections__more { margin-top: 2px; }

.ushop-sections__more summary {
    display: inline-block;
    padding: 4px 0;
    color: var(--color-accent-dark);
    font-size: var(--size-sm);
    cursor: pointer;
}

.ushop-sections__more summary::marker { content: '▸ '; }
.ushop-sections__more[open] summary::marker { content: '▾ '; }

@media screen and (min-width: 961px) {
    /* Липнет вся колонка, а не один фильтр: список разделов и параметры
       остаются на виду, пока листаешь витрину. */
    .ushop-side {
        position: sticky;
        top: 81px;
        max-height: calc(100vh - 97px);
        overflow-y: auto;
        padding-right: 6px;
        scrollbar-width: thin;
    }

    .ushop-side::-webkit-scrollbar { width: 6px; }
    .ushop-side::-webkit-scrollbar-thumb { border-radius: 3px; background: var(--color-line); }

    .ushop-filters { position: static; max-height: none; overflow: visible; padding-right: 0; }
}

@media screen and (max-width: 960px) {
    /* На телефоне разделы уходят под товары: сверху нужен сам товар */
    .ushop-catalog__body { display: flex; flex-direction: column; }
    .ushop-side { order: 2; }
    .ushop-catalog__main { order: 1; }
}

/* --- марки под витриной ----------------------------------------------- */

.ushop-brandsrow {
    margin: var(--space-8) 0 0;
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-line);
    font-size: var(--size-sm);
    line-height: 1.9;
    color: var(--color-ink-faint);
}

.ushop-brandsrow__label { margin-right: 6px; color: var(--color-ink-muted); }
.ushop-brandsrow a { color: var(--color-ink-muted); text-decoration: none; }
.ushop-brandsrow a:hover { color: var(--color-accent-dark); }

/* Второй список в колонке отделяем от первого линией, а не пустотой */
.ushop-sections_brands {
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-line);
}

/* --- документы товара -------------------------------------------------- */

.ushop-tabs__count {
    margin-left: 6px;
    font-size: var(--size-xs);
    color: var(--color-ink-faint);
    font-variant-numeric: tabular-nums;
}

/* Список файлов — в панели вкладок, поэтому маркеры списка тут лишние */
.ushop-tabs__panel .ushop-docs {
    display: grid;
    gap: 10px;
    max-width: 640px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ushop-docs__item { margin: 0; }

.ushop-docs__link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border: 1px solid var(--color-line);
    border-radius: 10px;
    background: var(--color-surface);
    color: var(--color-ink);
    text-decoration: none;
    transition: border-color .18s, box-shadow .18s;
}

.ushop-docs__link:hover {
    border-color: var(--color-accent);
    box-shadow: 0 6px 18px rgba(17, 17, 17, .07);
}

/* Расширение вместо иконки: pdf и docx говорят сами за себя */
.ushop-docs__ext {
    flex: 0 0 auto;
    min-width: 46px;
    padding: 5px 8px;
    border-radius: 6px;
    background: var(--color-accent-bg);
    color: var(--color-accent-dark);
    font-size: var(--size-xs);
    font-weight: var(--weight-semibold);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.ushop-docs__body { display: grid; gap: 2px; min-width: 0; }
.ushop-docs__title { font-size: var(--size-sm); font-weight: var(--weight-semibold); }
.ushop-docs__meta { font-size: var(--size-xs); color: var(--color-ink-faint); }

/* --- корзина в шапке ---------------------------------------------------- */

.ushop-header__cart {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 14px 0 10px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-ink);
    font: inherit;
    font-size: var(--size-sm);
    cursor: pointer;
    transition: border-color .18s, color .18s;
}

.ushop-header__cart:hover { border-color: var(--color-accent); color: var(--color-accent-dark); }
.ushop-header__cart[hidden] { display: none; }

/* Число товаров — на самой сумке, как на ярлыке */
.ushop-header__cart-count {
    position: absolute;
    top: -5px;
    left: 20px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: var(--radius-pill);
    background: var(--color-accent);
    color: #fff;
    font-size: 11px;
    line-height: 17px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.ushop-header__cart-sum { font-weight: var(--weight-semibold); white-space: nowrap; }

@media screen and (max-width: 1100px) {
    /* В узкой шапке остаётся сумка со счётчиком: сумма видна в самом окне */
    .ushop-header__cart-sum { display: none; }
    .ushop-header__cart { padding: 0 10px; }
}

/* --- монтаж в форме заказа --------------------------------------------- */

.ushop-order__option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: var(--space-4) 0 var(--space-2);
    padding: 12px 14px;
    border: 1px solid var(--color-line);
    border-radius: 10px;
    background: var(--color-surface);
    cursor: pointer;
    transition: border-color .18s, background-color .18s;
}

.ushop-order__option:hover { border-color: var(--color-accent); }

/* Выбранный монтаж подсвечиваем: это отдельное решение, а не мелкая опция */
.ushop-order__option:has(input:checked) {
    border-color: var(--color-accent);
    background: var(--color-accent-bg);
}

.ushop-order__option input {
    width: 17px;
    height: 17px;
    margin-top: 2px;
    flex: 0 0 auto;
    accent-color: var(--color-accent);
}

.ushop-order__option-title { display: block; font-size: var(--size-sm); font-weight: var(--weight-semibold); }
.ushop-order__option-note { display: block; margin-top: 2px; font-size: var(--size-xs); color: var(--color-ink-faint); }

.ushop-order__why { margin-bottom: var(--space-4); }

.ushop-order__why summary {
    display: inline-block;
    padding: 2px 0;
    color: var(--color-ink-muted);
    font-size: var(--size-xs);
    cursor: pointer;
}

.ushop-order__why summary:hover { color: var(--color-accent-dark); }

.ushop-order__why p {
    margin: 6px 0 0;
    font-size: var(--size-xs);
    line-height: var(--leading-normal);
    color: var(--color-ink-muted);
}

/* --- разделы и марки на узком экране ------------------------------------ */

@media screen and (max-width: 960px) {
    /* Строка марок под витриной дублирует список «Производители», который
       на телефоне стоит тут же, следом. Оставляем список. */
    .ushop-brandsrow { display: none; }

    /* Списки в две колонки: одной они вытягивались в длинную простыню */
    .ushop-sections__list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: var(--space-6);
    }

    .ushop-side { gap: var(--space-6); }
    .ushop-sections__title { font-size: var(--size-sm); text-transform: none; }

    /* Одинокая кнопка «Дальше» на первой странице висела слева от пустоты */
    .ushop-pages__step:only-of-type { margin-left: auto; }
}

/* --- скругление кнопок -------------------------------------------------- */

/* Одна форма на все кнопки сайта: и обычные, и те, что раньше были
   «таблетками» в шапке и в раскрытом меню. */
.ushop-btn,
.ushop-header__cta,
.ushop-nav__contacts .ushop-btn { border-radius: 5px; }

/* --- направления на главной, узкий экран -------------------------------- */

@media screen and (max-width: 700px) {
    /* Колонка в 200px не помещалась дважды, и два десятка марок вытягивались
       в одну длинную ленту. */
    .ushop-dirs__links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-2) var(--space-4);
    }
}

.ushop-dirs__more { margin-top: var(--space-3); }

.ushop-dirs__more summary {
    display: inline-block;
    padding: 4px 0;
    color: var(--color-accent-dark);
    font-size: var(--size-sm);
    cursor: pointer;
}

.ushop-dirs__more .ushop-dirs__links { margin-top: var(--space-3); }

/* Переключатели и плашки-ссылки — той же формы, что кнопки. Метки и круглые
   значки (скидка, количество, стрелки) остаются как есть: это не кнопки. */
.ushop-dirs__tab,
.ushop-blog__rubric,
.ushop-search-page__tab,
.ushop-header__cart { border-radius: 5px; }

/* Якорные переходы и липкая шапка.

   Кнопка «Подобрать септик» ведёт на #quiz, и браузер ставил начало квиза
   ровно в верх окна — под шапку, которая его закрывала. Отступ сверху
   отводит место шапке при любом переходе по ярлыку. */
html {
    scroll-padding-top: 84px;
}

@media screen and (max-width: 960px) {
    html { scroll-padding-top: 74px; }
}

/* =====================================================================
   Таблица сравнения и списки.

   Спрос в поиске почти весь про цену под ключ и размеры, а цифры лежат
   в карточках товаров. Таблица собирает их в одном месте.
   ===================================================================== */

.ushop-tablewrap__lead,
.ushop-list__lead {
    max-width: 70ch;
    margin: calc(-1 * var(--space-4)) 0 var(--space-6);
    color: var(--color-ink-muted);
}

/* Широкая таблица прокручивается внутри себя, страница вбок не едет */
.ushop-tablewrap__scroll {
    overflow-x: auto;
    scrollbar-width: thin;
}

.ushop-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--size-sm);
}

.ushop-table th,
.ushop-table td {
    padding: 12px 16px 12px 0;
    text-align: left;
    border-bottom: 1px solid var(--color-line-soft, var(--color-line));
    vertical-align: baseline;
    white-space: nowrap;
}

.ushop-table thead th {
    border-bottom: 1px solid var(--color-ink);
    font-size: var(--size-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--color-ink-muted);
}

/* Первая колонка — название модели, ей нужна вся оставшаяся ширина */
.ushop-table tbody th {
    width: 100%;
    font-weight: var(--weight-semibold);
    white-space: normal;
}

.ushop-table tbody th a { color: var(--color-ink); text-decoration: none; }
.ushop-table tbody th a:hover { color: var(--color-accent-dark); }
.ushop-table tbody tr:hover { background: var(--color-accent-bg); }

.ushop-table__num { font-variant-numeric: tabular-nums; }

.ushop-tablewrap__note {
    margin: var(--space-4) 0 0;
    font-size: var(--size-xs);
    color: var(--color-ink-faint);
}

/* --- списки ------------------------------------------------------------ */

.ushop-list__items {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4) var(--space-8);
    max-width: var(--container);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: ushop-list;
}

.ushop-list__items li {
    position: relative;
    padding-left: 30px;
    font-size: var(--size-sm);
    line-height: var(--leading-normal);
}

/* Галочку рисуем, а не грузим значок */
.ushop-list__items_check li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-accent-bg);
    box-shadow: inset 0 0 0 1px var(--color-accent);
}

.ushop-list__items_dash li::before {
    content: '—';
    position: absolute;
    left: 0;
    color: var(--color-accent);
}

.ushop-list__items_numbered li::before {
    counter-increment: ushop-list;
    content: counter(ushop-list);
    position: absolute;
    left: 0;
    top: 1px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--color-accent);
    color: #fff;
    font-size: var(--size-xs);
    line-height: 20px;
    text-align: center;
}

.ushop-list__title { display: block; font-weight: var(--weight-semibold); }
.ushop-list__text { display: block; margin-top: 2px; color: var(--color-ink-muted); }

@media screen and (max-width: 700px) {
    .ushop-list__items { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
    .ushop-table th, .ushop-table td { padding-right: 12px; }
}

/* --- разметка внутри текстовых блоков ---------------------------------- */

/* Тексты разделов теперь с таблицами, списками и цитатами — оформляем их
   так же, как отдельные блоки страницы, чтобы вид не разъезжался. */
/* Текст идёт во всю ширину контейнера: узкая колонка оставляла половину
   страницы пустой, а таблицам не хватало места. */
.ushop-textblock__body { max-width: none; }

.ushop-textblock__body h2 {
    margin: var(--space-8) 0 var(--space-3);
    font-size: var(--size-xl);
    font-weight: var(--weight-semibold);
    letter-spacing: -.01em;
}

.ushop-textblock__body h2:first-child { margin-top: 0; }

.ushop-textblock__body table {
    width: 100%;
    max-width: none;
    margin: var(--space-6) 0;
    border-collapse: collapse;
    font-size: var(--size-sm);
}

.ushop-textblock__body th,
.ushop-textblock__body td {
    padding: 11px 16px 11px 0;
    text-align: left;
    border-bottom: 1px solid var(--color-line);
    vertical-align: top;
}

.ushop-textblock__body thead th {
    border-bottom: 1px solid var(--color-ink);
    font-size: var(--size-xs);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-ink-muted);
}

/* Таблица шире колонки текста — пусть прокручивается, а не ломает вёрстку */
.ushop-textblock__body { overflow-x: auto; }

.ushop-textblock__body blockquote {
    margin: var(--space-6) 0;
    padding: var(--space-4) var(--space-6);
    border-left: 3px solid var(--color-accent);
    background: var(--color-accent-bg);
    font-size: var(--size-md);
    line-height: var(--leading-normal);
}

.ushop-textblock__body blockquote p { margin: 0; }
.ushop-textblock__body strong { font-weight: var(--weight-semibold); }

/* Лид занимал 68 символов в строке и обрывался далеко от кнопки — теперь
   тянется во всю колонку, оставляя место только под саму кнопку. */
.ushop-intro__text { max-width: none; }

/* Раскрытый список уже показан целиком, а надпись всё ещё звала его
   раскрыть. Подпись переключаем на «Свернуть» самим состоянием details. */
.ushop-more__open { display: none; }
details[open] > summary .ushop-more__open { display: inline; }
details[open] > summary .ushop-more__closed { display: none; }

/* --- квиз: рамка и стабильная высота ------------------------------------ */

/* Скругление с тенью висели на внешнем контейнере, а у него свои поля в
   20px: обводка шла в стороне от самой карточки и читалась как лишняя
   рамка вокруг пустоты. Оформляем форму, контейнер оставляем сеткой. */
.ushop-quiz { border-radius: 0; overflow: visible; box-shadow: none; }

.ushop-quiz__form {
    border: 1px solid var(--color-line-soft, rgba(17, 17, 17, .06));
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(17, 17, 17, .08);
}

/* Шаги разной длины меняли высоту карточки на каждом ответе — кнопки
   уезжали из-под курсора. Держим рабочую область постоянной. */
.ushop-quiz__layout { min-height: 440px; }

.ushop-quiz__main {
    display: flex;
    flex-direction: column;
    padding: 36px 40px 32px;
}

/* Варианты прижаты к вопросу, а не растянуты по всей высоте. */
.ushop-quiz__step { display: flex; flex-direction: column; }
.ushop-quiz__options { align-content: start; }

.ushop-quiz__panel { padding: 32px 28px; }
.ushop-quiz__nav { padding: 20px 40px; }

@media (max-width: 767px) {
    /* На узком экране высоту задаёт содержимое: фиксированная только
       добавила бы пустоту под вариантами. */
    .ushop-quiz__layout { min-height: 0; }
    .ushop-quiz__main { padding: 20px; }
    .ushop-quiz__panel { padding: 20px; }
    .ushop-quiz__nav { padding: 16px 20px; }
}

/* Переключатель стоит между показанной частью списка и скрытой, поэтому
   раскрытый список отбрасывал «Свернуть» в середину. Порядком колонки
   опускаем подпись под весь список. */
details:has(> summary .ushop-more__open) { display: flex; flex-direction: column; }
details:has(> summary .ushop-more__open) > summary { order: 2; }

/* Автор в строке под заголовком статьи — рядом с рубрикой и датой. */
.ushop-article__author a { color: var(--color-accent-dark); text-decoration: none; }
.ushop-article__author a:hover { text-decoration: underline; }

/* --- поиск: выдача и акции в две колонки -------------------------------- */

.ushop-search-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    align-items: start;
    gap: 40px;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 20px;
}

/* Ширину и поля задаёт сетка: своё ограничение здесь оставило бы провал
   между выдачей и сайдбаром. */
.ushop-search-layout .ushop-search-page { max-width: none; margin: 0; padding-left: 0; padding-right: 0; }

.ushop-promo__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--space-3);
}

/* Условие акции — короткая строка, маркер рисуем сами: списочная точка
   слишком мелкая рядом с зелёным заголовком. */
.ushop-promo__list li {
    position: relative;
    padding-left: 18px;
    font-size: var(--size-sm);
    line-height: var(--leading-normal);
    color: var(--color-ink-muted);
}

.ushop-promo__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .5em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-accent);
}

.ushop-promo__deals {
    margin-top: var(--space-5);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-line);
    display: grid;
    gap: var(--space-3);
}

.ushop-promo__subtitle {
    font-size: var(--size-xs);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--color-ink-faint);
}

.ushop-promo__deal {
    display: grid;
    gap: 2px;
    text-decoration: none;
    color: var(--color-ink);
}

.ushop-promo__deal-title { font-size: var(--size-sm); line-height: var(--leading-normal); }
.ushop-promo__deal:hover .ushop-promo__deal-title { color: var(--color-accent-dark); }

.ushop-promo__deal-prices {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    font-variant-numeric: tabular-nums;
}

.ushop-promo__deal-price { font-weight: var(--weight-semibold); }
.ushop-promo__deal-prices s { font-size: var(--size-xs); color: var(--color-ink-faint); }

@media screen and (max-width: 960px) {
    /* Рядом с выдачей сайдбар не помещается — уходит под неё. */
    .ushop-search-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
    .ushop-aside_promo { padding-top: 0; padding-bottom: var(--space-12); }
}

/* Сайдбар акций стоял тесно: условия шли впритык друг к другу, а товары
   упирались в разделитель. Даём блоку воздух — читать его должно быть
   так же легко, как саму выдачу. */
.ushop-aside_promo .ushop-aside__box { padding: var(--space-8) var(--space-6); }

.ushop-aside_promo .ushop-aside__title { margin-bottom: var(--space-5); }

.ushop-promo__list { gap: var(--space-4); }
.ushop-promo__list li { padding-left: 20px; line-height: var(--leading-loose); }
.ushop-promo__list li::before { top: .62em; }

.ushop-promo__deals {
    margin-top: var(--space-6);
    padding-top: var(--space-6);
    gap: var(--space-5);
}

.ushop-promo__subtitle { margin-bottom: var(--space-1); }

.ushop-promo__deal { gap: var(--space-1); }
.ushop-promo__deal-title { line-height: var(--leading-loose); }

.ushop-aside_promo .ushop-aside__all { margin-top: var(--space-6); padding-top: var(--space-6); }


/* --- размер текста и заголовков ---------------------------------------- */

/* Основной текст сайта — 20px: с расстояния вытянутой руки читается без
   прищура, а именно так статьи и читают. Надписи в интерфейсе (кнопки,
   меню, фильтры) остаются на своей шкале. */
.ushop-article__body,
.ushop-textblock__body,
.ushop-intro__text,
.ushop-section__text { font-size: var(--size-text); }

/* Заголовки статьи. Шаг между уровнями небольшой, но чёткий: 38 / 30 / 28
   при тексте в 20 — иерархия видна, а h3 не сливается с абзацем. */
.ushop-article__title { font-size: 38px; }

.ushop-article__body h2,
.ushop-textblock__body h2 { font-size: 30px; }

.ushop-article__body h3,
.ushop-textblock__body h3 { font-size: 28px; }

@media (max-width: 640px) {
    /* На узком экране 38px съедают половину первого экрана: соразмерно
       уменьшаем всю лестницу, сохраняя расстояние между уровнями. */
    .ushop-article__title { font-size: 28px; }

    .ushop-article__body h2,
    .ushop-textblock__body h2 { font-size: 24px; }

    .ushop-article__body h3,
    .ushop-textblock__body h3 { font-size: 21px; }

    .ushop-article__body,
    .ushop-textblock__body { font-size: 18px; }
}

/* --- единый шаг между секциями ----------------------------------------- */

/* Витрина и блок статей на главной шли с укороченным верхним полем: рядом
   с соседними секциями по 64px это читалось как сбой ритма. Возвращаем им
   общий шаг — сокращённые поля остаются только у шапки страницы
   (крошки → заголовок → ссылки), где блоки составляют одну группу. */
.ushop-section_flush { padding-top: var(--space-16); }
.ushop-blog_home { padding-top: var(--space-16); }

@media screen and (max-width: 960px) {
    /* На узком экране секции живут на шаге 48px — эти два блока должны
       следовать за ним, иначе снова выпадут из ритма, только в плюс. */
    .ushop-section_flush,
    .ushop-blog_home { padding-top: var(--space-12); }
}

/* Просмотры в строке под заголовком статьи — рядом с рубрикой и датой. */
.ushop-article__views { color: var(--color-ink-faint); font-variant-numeric: tabular-nums; }

/* Строка поиска в шапке — поверх страницы, а не в потоке.

   Шапка липкая: сама она видна всегда, но по координатам документа её
   содержимое остаётся наверху страницы. Пока поле поиска было частью
   потока, браузер при наборе тянул страницу к «настоящему» месту курсора —
   чем больше букв, тем дальше уезжала прокрутка. Фиксированный слой
   совпадает с тем, что человек видит, и прокрутке некуда деваться. */
.ushop-header__searchbox {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 899;
    max-width: none;
    margin: 0;
    padding: var(--space-3) max(20px, calc((100% - var(--container)) / 2)) var(--space-3);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-line);
    box-shadow: 0 8px 24px rgba(17, 17, 17, .06);
}

/* --- категории сеткой --------------------------------------------------- */

/* Оформление, которое раньше доставалось только ленте: карточки в сетке
   должны выглядеть так же, разница между режимами — лишь в том, нужна ли
   прокрутка. */
.ushop-cats__wrap:not(.ushop-cats__wrap_scroll) .ushop-cats__grid {
    gap: clamp(20px, 2.2vw, 40px);
}

.ushop-cats__wrap:not(.ushop-cats__wrap_scroll) .ushop-cat {
    border-radius: 24px;
    box-shadow: 0 10px 30px rgba(17, 17, 17, .07);
}

.ushop-cats__wrap:not(.ushop-cats__wrap_scroll) .ushop-cat__media { aspect-ratio: 4 / 3; }

/* Описания у категорий разной длины — без ограничения одна карточка
   растягивает весь ряд. */
.ushop-cats__wrap:not(.ushop-cats__wrap_scroll) .ushop-cat__text {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ushop-cats__wrap:not(.ushop-cats__wrap_scroll) .ushop-cat:hover {
    transform: translateY(-10px);
    box-shadow: 0 22px 50px rgba(17, 17, 17, .14);
}

.ushop-cats__wrap:not(.ushop-cats__wrap_scroll) .ushop-cat:hover .ushop-cat__media img { transform: scale(1.08); }

@media screen and (max-width: 640px) {
    /* На телефоне категории идут по две в ряд: шесть карточек в столбик
       превращались в ленту на три экрана, и до нижних никто не доходил.
       Раз карточка вдвое у́же — уменьшаем и всё, что внутри. */
    .ushop-cats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .ushop-cats__wrap:not(.ushop-cats__wrap_scroll) .ushop-cats__grid { gap: var(--space-3); }

    .ushop-cats__wrap:not(.ushop-cats__wrap_scroll) .ushop-cat { border-radius: 14px; }

    .ushop-cat__body { padding: var(--space-4) var(--space-3); gap: var(--space-2); }
    .ushop-cat__title { font-size: var(--size-base); line-height: var(--leading-tight); }

    /* Описание сокращаем до двух строк: на узкой карточке три занимают
       больше места, чем сам снимок. */
    .ushop-cats__wrap:not(.ushop-cats__wrap_scroll) .ushop-cat__text {
        font-size: 13px;
        -webkit-line-clamp: 2;
    }

    .ushop-cat__more { font-size: 13px; }

    /* Подъём карточки на касании ни к чему — убираем вместе с тенью. */
    .ushop-cats__wrap:not(.ushop-cats__wrap_scroll) .ushop-cat:hover {
        transform: none;
        box-shadow: 0 10px 30px rgba(17, 17, 17, .07);
    }
}

/* --- стоимость услуги --------------------------------------------------- */

/* Цифры вперёд: страница услуги без цены не продаёт, а цена без объяснения
   «от чего зависит» вызывает недоверие. Показываем и то, и другое. */
.ushop-price__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-6);
}

.ushop-price__head .ushop-section__title { margin: 0; }

.ushop-price__figures { display: flex; flex-wrap: wrap; gap: var(--space-8); }

.ushop-price__figure { display: grid; gap: 2px; }

.ushop-price__label {
    font-size: var(--size-xs);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--color-ink-faint);
}

.ushop-price__value {
    font-size: var(--size-2xl);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-tight);
    font-variant-numeric: tabular-nums;
}

.ushop-price__note {
    margin: var(--space-4) 0 0;
    max-width: 70ch;
    color: var(--color-ink-muted);
    font-size: var(--size-base);
}

.ushop-price__cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-8);
    margin-top: var(--space-8);
}

.ushop-price__subtitle {
    margin-bottom: var(--space-4);
    font-size: var(--size-base);
    font-weight: var(--weight-semibold);
}

.ushop-price__list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-3); }

.ushop-price__list li {
    position: relative;
    padding-left: 26px;
    font-size: var(--size-base);
    line-height: var(--leading-normal);
    color: var(--color-ink-muted);
}

/* Галочка у того, что уже включено, и точка у того, что меняет цену:
   два списка рядом не должны читаться как один. */
.ushop-price__list_yes li::before {
    content: '';
    position: absolute;
    left: 2px;
    top: .45em;
    width: 12px;
    height: 7px;
    border-left: 2px solid var(--color-accent);
    border-bottom: 2px solid var(--color-accent);
    transform: rotate(-45deg);
}

.ushop-price__list_why li::before {
    content: '';
    position: absolute;
    left: 4px;
    top: .55em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: 2px solid var(--color-accent);
}

.ushop-price__list_why strong { color: var(--color-ink); font-weight: var(--weight-semibold); }
.ushop-price__list_why span { display: block; }

.ushop-price__rates { margin-top: var(--space-8); overflow-x: auto; }

.ushop-price__table { width: 100%; border-collapse: collapse; min-width: 480px; }

.ushop-price__table th,
.ushop-price__table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--color-line);
    text-align: left;
    font-size: var(--size-base);
}

.ushop-price__table th {
    font-size: var(--size-xs);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--color-ink-faint);
    font-weight: var(--weight-semibold);
}

.ushop-price__cell-price { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: var(--weight-semibold); }

.ushop-price__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    margin-top: var(--space-8);
}

.ushop-price__hint { color: var(--color-ink-muted); font-size: var(--size-sm); }

/* --- примеры работ на странице услуги ----------------------------------- */

.ushop-works_service .ushop-works__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-6);
}

.ushop-works_service .ushop-works__cell {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 12px;
    background: var(--color-surface-alt);
}

.ushop-works_service .ushop-works__cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s;
}

.ushop-works_service .ushop-works__cell:hover img { transform: scale(1.05); }

@media screen and (max-width: 640px) {
    .ushop-price__figures { gap: var(--space-6); }
    .ushop-price__value { font-size: var(--size-xl); }
    .ushop-price__cols { gap: var(--space-6); margin-top: var(--space-6); }
    .ushop-works_service .ushop-works__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
}

/* --- страница услуги: первый экран -------------------------------------- */

/* Под услугой нет витрины, которая доскажет за текст, поэтому вводная
   часть работает как обложка: крупный заголовок, лид в комфортную строку
   и два действия рядом — заявка и телефон. */
.ushop-intro_service {
    max-width: none;
    /* Поля вместо центрирующих полей у детей: иначе заголовок с короткой
       строкой уезжает в середину экрана вместе со своей шириной. */
    padding: var(--space-12) max(20px, calc((100% - var(--container)) / 2)) var(--space-16);
    background: linear-gradient(180deg, var(--color-accent-bg) 0%, rgba(222, 234, 222, 0) 100%);
}

.ushop-intro_service .ushop-intro__title {
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.12;
    letter-spacing: -.015em;
    max-width: 18ch;
}

.ushop-intro_service .ushop-intro__text {
    max-width: 62ch;
    font-size: var(--size-md);
    line-height: var(--leading-loose);
    color: var(--color-ink-muted);
}

.ushop-intro__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-6);
}

.ushop-intro__actions .ushop-btn { padding: 15px 30px; font-size: var(--size-base); }

/* --- страница услуги: карточка стоимости -------------------------------- */

/* Цена — то, ради чего страницу открывают. Собираем всё, что её касается,
   в одну карточку, чтобы блок читался как коммерческое предложение, а не
   как очередной раздел текста. */
.ushop-price__card {
    padding: clamp(24px, 3vw, 40px);
    border: 1px solid var(--color-line);
    border-radius: 20px;
    background: var(--color-surface);
    box-shadow: 0 12px 40px rgba(17, 17, 17, .06);
}

.ushop-price__head {
    align-items: center;
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--color-line);
}

/* Цифры — плашками на светлом фоне: так они читаются как факты, а не как
   продолжение заголовка. */
.ushop-price__figure {
    padding: var(--space-4) var(--space-5);
    border-radius: 12px;
    background: var(--color-accent-bg);
    text-align: center;
}

.ushop-price__figures { gap: var(--space-4); }

.ushop-price__label { color: var(--color-accent-dark); opacity: .8; }

.ushop-price__value { font-size: var(--size-2xl); }

/* Заливкой выделяем именно цену. По классу, а не по первой плашке: там,
   где цены нет (отопление считается по проекту), первым идёт срок — и он
   выглядел бы как цена. */
.ushop-price__figure_main { background: var(--color-accent); }
.ushop-price__figure_main .ushop-price__label { color: rgba(255, 255, 255, .75); }
.ushop-price__figure_main .ushop-price__value { color: #fff; }

.ushop-price__cols > .ushop-price__col {
    padding: var(--space-6);
    border-radius: 14px;
    background: var(--color-surface-alt);
}

.ushop-price__cols > .ushop-price__col:last-child { background: transparent; border: 1px solid var(--color-line); }

.ushop-price__table thead th { background: var(--color-surface-alt); }
.ushop-price__table tbody tr:hover { background: var(--color-accent-bg); }
.ushop-price__table tbody tr:last-child td { border-bottom: 0; }

.ushop-price__actions { padding-top: var(--space-6); border-top: 1px solid var(--color-line); }

@media screen and (max-width: 640px) {
    .ushop-intro_service { padding: var(--space-8) 20px var(--space-12); }
    .ushop-intro__actions .ushop-btn { flex: 1 1 100%; text-align: center; }
    .ushop-price__figures { width: 100%; }
    .ushop-price__figure { flex: 1 1 calc(50% - var(--space-4)); padding: var(--space-3); }
    .ushop-price__cols > .ushop-price__col { padding: var(--space-4); }
}

/* На странице услуги действия идут под текстом, а не в колонке справа:
   их два — заявка и телефон, — и в узкой правой колонке они ломались
   в столбик, отрываясь от заголовка. */
.ushop-intro_service { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
.ushop-intro_service .ushop-intro__text { grid-column: 1; }
.ushop-intro_service .ushop-intro__actions { grid-column: 1; justify-self: start; }

/* --- этапы услуги ------------------------------------------------------- */

/* Карточками, с крупной цифрой и линией связи: у услуги порядок работ —
   это и есть товар, его стоит показать, а не перечислить. */
.ushop-steps_service .ushop-steps__list { gap: var(--space-4); }

.ushop-steps_service .ushop-step {
    position: relative;
    padding: var(--space-6);
    border: 1px solid var(--color-line);
    border-radius: 16px;
    background: var(--color-surface);
    transition: border-color .2s, box-shadow .2s, transform .2s;
}

.ushop-steps_service .ushop-step:hover {
    border-color: var(--color-accent);
    box-shadow: 0 14px 34px rgba(17, 17, 17, .08);
    transform: translateY(-4px);
}

.ushop-steps_service .ushop-step__num {
    width: 44px;
    height: 44px;
    font-size: var(--size-md);
    box-shadow: 0 6px 16px rgba(59, 161, 81, .28);
}

/* Тонкая линия между карточками: показывает, что это последовательность,
   а не четыре независимых пункта. */
.ushop-steps_service .ushop-step + .ushop-step::before {
    content: '';
    position: absolute;
    top: calc(var(--space-6) + 22px);
    left: calc(var(--space-4) * -1);
    width: var(--space-4);
    border-top: 1px dashed var(--color-line);
}

.ushop-steps_service .ushop-step__title { font-size: var(--size-lg); }
.ushop-steps_service .ushop-step__text { font-size: var(--size-base); }

@media screen and (max-width: 960px) {
    /* Линия связи рисуется только там, где карточки стоят в ряд. */
    .ushop-steps_service .ushop-step + .ushop-step::before { display: none; }
    .ushop-steps_service .ushop-step { padding: var(--space-5); }
}

@media screen and (max-width: 640px) {
    /* Плашки в сетку: во flex они переносились по одной и растягивались
       на всю ширину — три строки ради трёх коротких цифр. Цена занимает
       верхний ряд целиком, срок и гарантия встают под ней парой. */
    .ushop-price__figures {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-3);
    }

    .ushop-price__figure { min-width: 0; padding: var(--space-4) var(--space-3); }
    .ushop-price__figure_main { grid-column: 1 / -1; }
    .ushop-price__value { font-size: var(--size-lg); }
}

/* Шаг квиза со свободным ответом: у части вопросов вариантов нет —
   площадь, глубина, количество точек вводят числом. */
.ushop-quiz__answer { margin-top: var(--space-6); }

.ushop-quiz__answer input {
    width: 100%;
    max-width: 420px;
    padding: 14px 16px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-base);
    font: inherit;
    font-size: var(--size-base);
}

.ushop-quiz__answer input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(59, 161, 81, .18);
}

/* --- ссылки-плашки на смежные услуги ------------------------------------ */

/* Раньше это читалось как облако тегов из подвала: серые прямоугольники
   в мелком шрифте. Делаем их ссылками, по которым хочется кликнуть —
   белая плашка с рамкой, читаемый кегль, зелёная рамка при наведении. */
.ushop-links__row { gap: 10px; }

.ushop-links__item {
    padding: 10px 16px;
    font-size: var(--size-sm);
    line-height: 1.3;
    border: 1px solid var(--color-line);
    background: var(--color-surface);
    color: var(--color-ink);
    text-decoration: none;
}

.ushop-links__item:hover {
    border-color: var(--color-accent);
    background: var(--color-accent-bg);
    color: var(--color-accent-dark);
}

/* Кнопка «Ещё N» — такая же плашка, только акцентная: она продолжает
   ряд, а не висит отдельной строкой под ним. */
.ushop-links__more {
    margin-top: 10px;
    padding: 10px 16px;
    font-size: var(--size-sm);
    border-color: var(--color-accent);
    color: var(--color-accent-dark);
    font-weight: var(--weight-semibold);
}

/* Свёрнутое состояние считаем от новой высоты плашки. */
.ushop-links__row_collapsed { max-height: calc(2 * 40px + 10px); }


/* Этапов у услуги шесть, а сетка была рассчитана на четыре: последний ряд
   получался из двух карточек с дырой справа. Раскладываем по три. */
@media screen and (min-width: 961px) {
    .ushop-steps_service .ushop-steps__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    /* Линия связи рисуется только между соседями в одном ряду. */
    .ushop-steps_service .ushop-step:nth-child(3n + 1)::before { display: none; }
}

/* --- монтаж рядом с товаром --------------------------------------------- */

/* Узкая врезка под карточкой: не отвлекает от товара, но отвечает на второй
   вопрос покупателя — кто это поставит и сколько стоит работа. */
.ushop-install { padding-top: 0; }

.ushop-install__card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-6) var(--space-8);
    border: 1px solid var(--color-line);
    border-radius: 16px;
    background: linear-gradient(120deg, var(--color-accent-bg), rgba(222, 234, 222, .35));
}

.ushop-install__title {
    font-size: var(--size-lg);
    font-weight: var(--weight-semibold);
    margin-bottom: 6px;
}

.ushop-install__text {
    margin: 0;
    max-width: 62ch;
    font-size: var(--size-sm);
    line-height: var(--leading-normal);
    color: var(--color-ink-muted);
}

.ushop-install__figures { display: flex; gap: var(--space-6); }

.ushop-install__figure { display: grid; gap: 2px; }

.ushop-install__label {
    font-size: var(--size-xs);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--color-accent-dark);
    opacity: .8;
}

.ushop-install__value {
    font-size: var(--size-lg);
    font-weight: var(--weight-semibold);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.ushop-install__actions { display: grid; gap: 6px; justify-items: stretch; }

.ushop-install__link {
    font-size: var(--size-xs);
    color: var(--color-accent-dark);
    text-align: center;
}

@media screen and (max-width: 960px) {
    .ushop-install__card { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); padding: var(--space-5); }
    .ushop-install__actions .ushop-btn { width: 100%; text-align: center; }
}

/* Стык шапки страницы и витрины.

   Общий шаг между секциями — 64px, но здесь он складывается с нижним
   полем вводной части: между лидом и строкой поиска выходило 88px, и
   витрина уезжала из первого экрана. Для этой пары шаг меньше: заголовок,
   лид и поиск — одна группа, а не два раздела. */
/* Соседний селектор не годится: между секциями стоит <script> с разметкой
   JSON-LD, и «+» до витрины не дотягивается. */
.ushop-intro ~ .ushop-section_flush { padding-top: var(--space-4); }

@media screen and (max-width: 960px) {
    .ushop-intro ~ .ushop-section_flush { padding-top: var(--space-3); }
}

/* --- врезка с призывом -------------------------------------------------- */

/* Форма прямо в блоке: раньше здесь была тёмная полоса с кнопкой, и человек
   после прочтения страницы должен был открыть окно, чтобы что-то заполнить.
   Теперь заявка оставляется в один шаг. */
.ushop-cta { padding-top: var(--space-8); padding-bottom: var(--space-8); }

.ushop-cta__card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: clamp(24px, 4vw, 64px);
    padding: clamp(28px, 4vw, 56px);
    border-radius: 28px;
    overflow: hidden;
    background: linear-gradient(135deg, #2f8442 0%, var(--color-accent) 55%, #4cba63 100%);
    color: #fff;
}

/* Тонкие окружности на фоне: оживляют заливку, не мешая читать текст. */
.ushop-cta__card::before,
.ushop-cta__card::after {
    content: '';
    position: absolute;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 50%;
    pointer-events: none;
}

.ushop-cta__card::before { width: 420px; height: 420px; top: -140px; right: 18%; }
.ushop-cta__card::after { width: 260px; height: 260px; bottom: -120px; right: 4%; }

.ushop-cta__body { position: relative; z-index: 1; align-self: center; }

.ushop-cta__badge {
    display: inline-block;
    margin-bottom: var(--space-5);
    padding: 6px 14px;
    border-radius: 999px;
    background: #fff;
    color: var(--color-accent-dark);
    font-size: var(--size-sm);
    font-weight: var(--weight-semibold);
}

.ushop-cta__title {
    margin: 0 0 var(--space-4);
    font-size: clamp(26px, 3.2vw, 40px);
    line-height: 1.15;
    letter-spacing: -.015em;
    color: #fff;
}

.ushop-cta__text {
    margin: 0;
    max-width: 44ch;
    font-size: var(--size-md);
    line-height: var(--leading-normal);
    color: rgba(255, 255, 255, .88);
}

.ushop-cta__messengers { display: flex; gap: var(--space-3); margin-top: var(--space-6); }

.ushop-cta__messenger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    text-decoration: none;
    transition: background-color .18s, transform .18s;
}

.ushop-cta__messenger:hover { background: #fff; color: var(--color-accent-dark); transform: translateY(-2px); }

/* --- форма --------------------------------------------------------------- */

.ushop-cta__form {
    position: relative;
    z-index: 1;
    display: grid;
    gap: var(--space-3);
    align-content: center;
}

.ushop-cta__trap { position: absolute; left: -9999px; width: 1px; height: 1px; }

.ushop-cta__field { display: grid; gap: 0; }

/* Подпись нужна программам чтения с экрана, визуально хватает placeholder. */
.ushop-cta__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

.ushop-cta__field input,
.ushop-cta__field select {
    width: 100%;
    padding: 16px 18px;
    border: 0;
    border-radius: 14px;
    background: #fff;
    color: var(--color-ink);
    font: inherit;
    font-size: var(--size-base);
}

.ushop-cta__field select { appearance: none; background-image: none; cursor: pointer; }

.ushop-cta__field input:focus,
.ushop-cta__field select:focus {
    outline: 3px solid rgba(255, 255, 255, .55);
    outline-offset: 1px;
}

.ushop-cta__consent {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-3);
    align-items: start;
    font-size: var(--size-sm);
    line-height: var(--leading-normal);
    color: rgba(255, 255, 255, .9);
}

.ushop-cta__consent input { margin-top: 3px; width: 18px; height: 18px; accent-color: #fff; }
.ushop-cta__consent a { color: #fff; text-decoration: underline; }

/* Кнопка тёплого цвета: на зелёном фоне зелёная кнопка растворяется. */
.ushop-cta__send {
    margin-top: var(--space-2);
    padding: 18px 24px;
    border: 0;
    border-radius: 14px;
    background: #f26522;
    color: #fff;
    font: inherit;
    font-size: var(--size-base);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    transition: background-color .18s, transform .18s;
}

.ushop-cta__send:hover { background: #d9551a; transform: translateY(-1px); }
.ushop-cta__send:disabled { opacity: .6; cursor: default; transform: none; }

.ushop-cta__note {
    margin: 0;
    padding: 12px 16px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .16);
    font-size: var(--size-sm);
}

@media screen and (max-width: 960px) {
    .ushop-cta__card { grid-template-columns: minmax(0, 1fr); border-radius: 20px; }
    .ushop-cta__card::before { width: 260px; height: 260px; top: -110px; right: -40px; }
    .ushop-cta__card::after { display: none; }
    .ushop-cta__text { max-width: none; }
}

/* Кнопка во врезке — во всю ширину формы: рядом с полями она смотрелась
   короче них и выглядела недоделанной. */
.ushop-cta__send { width: 100%; }

/* Поля не должны распирать колонку: у грид-элементов минимальная ширина
   считается по содержимому, и длинный placeholder телефона делал поля шире
   самой формы — кнопка на их фоне выглядела обрезанной. */
.ushop-cta__form,
.ushop-cta__field,
.ushop-cta__body { min-width: 0; }

.ushop-cta__field input,
.ushop-cta__field select { max-width: 100%; }

/* Поля во врезке считаем по внешней границе: у input в проекте
   box-sizing наследуется как content-box, и поле с теми же 100% выходило
   шире соседнего select и кнопки. */
.ushop-cta__field input,
.ushop-cta__field select,
.ushop-cta__send { box-sizing: border-box; }

/* Этапы на узких экранах. Правила потерялись при чистке старых стилей
   врезки — на телефоне четыре колонки сжимались в столбики по 60px. */
@media screen and (max-width: 960px) {
    .ushop-steps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
}

@media screen and (max-width: 640px) {
    .ushop-steps__list { grid-template-columns: minmax(0, 1fr); }
}

/* --- категории мозаикой -------------------------------------------------

   Шесть направлений разного веса: септики — то, за чем приходят чаще
   всего, отопление — второе по спросу. Плитки разного размера говорят
   об этом сразу, а подпись поверх снимка избавляет от белого поля под
   картинкой: карточка становится вдвое компактнее и все шесть
   направлений помещаются в один экран.

   Раскладка расписана по номерам карточек, поэтому шаблон включает её
   только когда карточек ровно шесть. */
.ushop-cats__wrap.ushop-cats__wrap_mosaic .ushop-cats__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: clamp(230px, 20vw, 300px);
    gap: var(--space-4);
}

.ushop-cats__wrap_mosaic .ushop-cat:nth-child(1) { grid-column: 1 / 3; grid-row: 1; }
.ushop-cats__wrap_mosaic .ushop-cat:nth-child(2) { grid-column: 1;     grid-row: 2; }
.ushop-cats__wrap_mosaic .ushop-cat:nth-child(3) { grid-column: 2;     grid-row: 2; }
.ushop-cats__wrap_mosaic .ushop-cat:nth-child(4) { grid-column: 3; grid-row: 1 / 3; }
.ushop-cats__wrap_mosaic .ushop-cat:nth-child(5) { grid-column: 4;     grid-row: 1; }
.ushop-cats__wrap_mosaic .ushop-cat:nth-child(6) { grid-column: 4;     grid-row: 2; }

.ushop-cats__wrap.ushop-cats__wrap_mosaic .ushop-cat {
    position: relative;
    display: block;
    min-height: 0;
    border: 0;
    border-radius: 8px;
    overflow: hidden;
    background: var(--color-dark);
    box-shadow: none;
}

.ushop-cats__wrap.ushop-cats__wrap_mosaic .ushop-cat__media {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    background: none;
}

.ushop-cats__wrap_mosaic .ushop-cat__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Затемнение снизу: без него белый текст теряется на светлых снимках. */
.ushop-cats__wrap_mosaic .ushop-cat::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(16, 20, 17, .45) 0%,
        rgba(16, 20, 17, .10) 35%,
        rgba(16, 20, 17, .80) 100%);
}

.ushop-cats__wrap.ushop-cats__wrap_mosaic .ushop-cat__body {
    position: relative;
    z-index: 1;
    /* Без border-box отступы прибавляются к высоте плитки и кнопка
       уезжает за её нижний край. */
    box-sizing: border-box;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: var(--space-3);
    padding: var(--space-8);
    color: #fff;
}

.ushop-cats__wrap_mosaic .ushop-cat__title {
    color: #fff;
    font-size: var(--size-2xl);
    font-weight: var(--weight-semibold);
    letter-spacing: -.01em;
}

.ushop-cats__wrap.ushop-cats__wrap_mosaic .ushop-cat__text {
    color: rgba(255, 255, 255, .88);
    font-size: var(--size-base);
    line-height: var(--leading-normal);
    max-width: 46ch;
    -webkit-line-clamp: 3;
}

.ushop-cats__wrap_mosaic .ushop-cat__more {
    margin-top: var(--space-2);
    padding: 12px 26px;
    background: #fff;
    color: var(--color-ink);
    border-radius: var(--radius-base);
    font-size: var(--size-base);
    font-weight: var(--weight-medium);
    transition: background-color .2s ease-in-out;
}

.ushop-cats__wrap_mosaic .ushop-cat__more::after { content: none; }
.ushop-cats__wrap_mosaic .ushop-cat:hover .ushop-cat__more { background: var(--color-accent-bg); }

/* Подъём карточки мозаике не нужен: плитки стоят вплотную и соседи
   начинают дёргаться. Оживляем только снимок. */
.ushop-cats__wrap.ushop-cats__wrap_mosaic .ushop-cat:hover {
    transform: none;
    box-shadow: none;
}

@media screen and (max-width: 1024px) {
    /* Мозаика держится на широком ряде — на планшете места под неё нет,
       возвращаемся к двум одинаковым колонкам. */
    .ushop-cats__wrap.ushop-cats__wrap_mosaic .ushop-cats__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 260px;
        gap: var(--space-3);
    }

    .ushop-cats__wrap_mosaic .ushop-cat:nth-child(n) { grid-column: auto; grid-row: auto; }
    .ushop-cats__wrap.ushop-cats__wrap_mosaic .ushop-cat__body { padding: var(--space-5); }
    .ushop-cats__wrap_mosaic .ushop-cat__title { font-size: var(--size-lg); }
    .ushop-cats__wrap.ushop-cats__wrap_mosaic .ushop-cat__text { font-size: var(--size-sm); -webkit-line-clamp: 3; }
}

@media screen and (max-width: 640px) {
    .ushop-cats__wrap.ushop-cats__wrap_mosaic .ushop-cats__grid { grid-auto-rows: 200px; }
    .ushop-cats__wrap.ushop-cats__wrap_mosaic .ushop-cat__body { padding: var(--space-4) var(--space-3); gap: var(--space-2); }
    .ushop-cats__wrap_mosaic .ushop-cat__title { font-size: var(--size-base); line-height: var(--leading-tight); }
    /* На плитке в пол-экрана описание съедает снимок — оставляем две строки. */
    .ushop-cats__wrap.ushop-cats__wrap_mosaic .ushop-cat__text { font-size: 13px; -webkit-line-clamp: 2; }
    .ushop-cats__wrap_mosaic .ushop-cat__more { padding: 8px 16px; font-size: 13px; margin-top: 0; }
}

/* --- витрина лентой на телефоне ----------------------------------------

   Три карточки в столбик на телефоне занимают полтора экрана, и до
   следующего блока никто не долистывает. Лента вбок показывает первую
   карточку целиком, а край второй подсказывает, что список продолжается. */
@media screen and (max-width: 640px) {
    .ushop-goods_strip .ushop-grid {
        display: flex;
        gap: var(--space-3);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        /* Лента идёт от края до края экрана, поэтому выходим за поля
           секции и возвращаем их отступами внутри. */
        margin: 0 -20px;
        padding: 0 20px;
    }

    .ushop-goods_strip .ushop-grid::-webkit-scrollbar { display: none; }

    .ushop-goods_strip .ushop-card {
        flex: 0 0 78%;
        scroll-snap-align: start;
    }
}