/* Каталог дверей: панель фасетов, тулбар, карточка товара.
   Страница /katalog/ (шорткод [myshop_catalog]); архивы категорий и карточка товара
   стилизуются отдельно и этот файл не затрагивают. */

.ms-catalog {
    display: grid;
    grid-template-columns: 264px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
    margin: 24px 0;
}

/* ── Панель фильтров ──────────────────────────────────────────────────── */

.ms-filter {
    border: 1px solid #e6e6e6;
    border-radius: 10px;
    padding: 14px 16px 16px;
    background: #fff;
    /* Без position:sticky и внутренней прокрутки: панель едет вместе со страницей,
       иначе при медленной прокрутке кажется, что фильтр «уползает» и что-то сломалось
       (владелец, 2026-11-04). */
}

.ms-filter__head { margin-bottom: 10px; }

.ms-filter__search,
.ms-filter__range input {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
}

.ms-filter__close,
.ms-filter__apply { display: none; }

/* Группа-аккордеон */

.ms-facet { border-top: 1px solid #eee; }
.ms-facet:first-of-type { border-top: 0; }

.ms-facet__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 13px 0 9px;
    /* Заголовки групп читаются как заголовки, а не как ещё один пункт списка:
       капс, разрядка, тёмный цвет (владелец: «выдели заголовки»). */
    font: 700 11.5px/1.3 Onest, system-ui, sans-serif;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #25282A;
    cursor: pointer;
    list-style: none;
}
/* Выбранное в заголовке свёрнутой группы — обычным регистром, акцентом. */
.ms-facet__head .ms-facet__picked {
    margin-left: auto;
    font: 500 12.5px/1.2 Onest, system-ui, sans-serif;
    letter-spacing: 0;
    text-transform: none;
    color: #105454;
    max-width: 58%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ms-facet__head::-webkit-details-marker { display: none; }
.ms-facet__head::after {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 1.5px solid #999;
    border-bottom: 1.5px solid #999;
    transform: rotate(45deg);
    transition: transform .15s;
    flex: none;
}
.ms-facet[open] > .ms-facet__head::after { transform: rotate(-135deg); }

/* Сколько значений выбрано в группе — видно даже в свёрнутом виде */
.ms-facet__picked:not(:empty) {
    margin-left: auto;
    margin-right: 6px;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    background: #176B6B;
    border-radius: 9px;
    padding: 1px 7px;
}

.ms-facet__body { padding-bottom: 10px; }

.ms-facet__search {
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 8px;
    padding: 7px 9px;
    border: 1px solid #e2e2e2;
    border-radius: 6px;
    font-size: 13px;
}

.ms-filter__item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    line-height: 1.35;
    padding: 4px 0;
    cursor: pointer;
}
.ms-filter__item input { flex: none; margin: 0; }
.ms-filter__name { min-width: 0; }

/* Кружок цвета в фильтре «Покрытие/Цвет»: настоящий свотч вместо серого квадрата */
.ms-filter__sw {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    border: 1px solid rgba(0, 0, 0, .18);
    border-radius: 0;
}
.ms-filter__item em {
    color: #9a9a9a;
    font-style: normal;
    margin-left: auto;
    font-size: 12px;
}
.ms-filter__item.is-zero { opacity: .4; cursor: default; }
.ms-filter__item.is-over-limit { display: none; }
.ms-filter__item.is-over-limit.is-shown { display: flex; }

.ms-facet__more {
    margin-top: 6px;
    padding: 0;
    border: 0;
    background: none;
    color: #176B6B;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.ms-facet__more:hover { text-decoration: underline; }

.ms-filter__range { display: flex; gap: 8px; }
.ms-price-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ms-price-preset {
    padding: 5px 9px;
    border: 1px solid #ddd;
    border-radius: 14px;
    background: #fff;
    font-size: 12px;
    color: #444;
    cursor: pointer;
}
.ms-price-preset:hover { border-color: #176B6B; color: #176B6B; }
.ms-filter__range input { font-size: 13px; }

.ms-filter__reset {
    margin-top: 14px;
    width: 100%;
    padding: 9px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #f7f7f7;
    cursor: pointer;
    font-size: 13px;
}
.ms-filter__reset:hover { background: #efefef; }

/* ── Тулбар над сеткой ────────────────────────────────────────────────── */

.ms-main { min-width: 0; }

.ms-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 0 0 12px;
    border-bottom: 1px solid #eee;
    margin-bottom: 14px;
}

.ms-toolbar__filters { display: none; }

.ms-count { font-size: 13px; color: #666; }
.ms-count strong { color: #111; }

.ms-sort { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.ms-sort__label { font-size: 13px; color: #666; }
.ms-sort__select {
    padding: 8px 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 13px;
    background: #fff;
}

.ms-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 14px;
}
.ms-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1px solid #d9d9d9;
    border-radius: 16px;
    background: #fff;
    font-size: 12px;
    cursor: pointer;
}
.ms-chip:hover { border-color: #176B6B; }
.ms-chip__x { color: #999; font-size: 14px; line-height: 1; }
.ms-chip--clear { border-color: transparent; background: none; color: #176B6B; font-weight: 600; }

/* ── Сетка и карточка ─────────────────────────────────────────────────── */

.ms-grid {
    display: grid;
    /* 190 px: при контейнере ~840 px в ряд помещаются 4 карточки. */
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 18px;
}

.ms-card {
    border: 1px solid #e9e9e9;
    border-radius: 0;
    overflow: hidden;
    background: #fff;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: box-shadow .15s, border-color .15s;
}
.ms-card:hover { border-color: #d6d6d6; box-shadow: 0 4px 18px rgba(0, 0, 0, .07); }

.ms-card__media {
    display: block;
    position: relative;
    /* Фото дверей — вертикальные кадры (≈0,46). 4/9 + contain показывает товар целиком. */
    aspect-ratio: 4 / 9;
    background: #fff;
    overflow: hidden;
}
/* Фурнитура: фото ручек/петель — не вертикальные кадры, и 4/9 растягивало карточку
   до 770 px. Квадрат + поля внутри — товар виден целиком, карточка вдвое ниже. */
.ms-grid--fitting .ms-card__media { aspect-ratio: 1 / 1; border-bottom: 1px solid #F1EEE7; }
.ms-grid--fitting .ms-card__img { padding: 10px; }
.ms-card__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: opacity .18s;
}
.ms-card__img--alt {
    position: absolute;
    inset: 0;
    opacity: 0;
}
.ms-card__media:hover .ms-card__img--alt { opacity: 1; }

.ms-card__noimg {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #bbb;
    font-size: 12px;
}

.ms-card__body {
    padding: 10px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.ms-card__title {
    font-size: 14px;
    margin: 0;
    line-height: 1.3;
    font-weight: 600;
    /* Две строки фиксированной высоты: названия ручек бывают в 1 и 3 строки,
       из-за этого «цена/наличие» прыгали по высоте (владелец: карточка растянута). */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
}
.ms-card__title a { text-decoration: none; color: inherit; }
.ms-card__title a:hover { color: #176B6B; }

.ms-card__specs { font-size: 12px; color: #777; line-height: 1.35; }

.ms-card__swatches { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
/* Прямоугольные плашки цвета — как свотчи на сайте (владелец: «свотчи прямоугольные»). */
.ms-card__sw {
    width: 22px;
    height: 14px;
    padding: 0;
    border: 0;
    border-radius: 3px;
    background-color: var(--sw, #e3e3e3);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
    flex: none;
    cursor: pointer;
}
.ms-card__sw.is-active { box-shadow: 0 0 0 2px #176B6B; }
.ms-card__sw.is-off {
    cursor: default;
    opacity: .35;
    background-image: linear-gradient(to top right, transparent 46%, #9a9a9a 46%, #9a9a9a 54%, transparent 54%);
}
.ms-card__sw:focus-visible { outline: 2px solid #176B6B; outline-offset: 2px; }
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
.ms-card__sw.has-img {
    background-image: var(--sw-img);
    background-size: cover;
    background-position: center;
}
.ms-card__sw-more { font-size: 11px; color: #888; }

.ms-card__price { font-size: 16px; font-weight: 700; margin-top: 2px; }
.ms-card__price .woocommerce-Price-amount { font-size: inherit; }

.ms-card__foot {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 12px;
    margin-top: auto;
}
.ms-card__stock { color: #9a9a9a; }
.ms-card__stock.is-in { color: #176B6B; font-weight: 600; }
.ms-card__ship { color: #999; }

.ms-card__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 40px;
    padding: 0 10px;
    border-radius: 0;
    background: #176B6B;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    margin-top: 4px;
}
.ms-card__btn:hover { background: #12595a; color: #fff; }

.ms-pageinfo { font-size: 12px; color: #999; margin: 14px 0 6px; }
.ms-empty { padding: 24px; background: #fafafa; border-radius: 8px; }

.ms-pager { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.ms-page {
    min-width: 34px;
    padding: 6px 10px;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
}
.ms-page.is-active { background: #176B6B; color: #fff; border-color: #176B6B; }

.ms-results.is-loading { opacity: .5; pointer-events: none; transition: opacity .15s; }

/* ── Планшет: панель уезжает в отдельный экран ────────────────────────── */

@media (max-width: 1000px) {
    .ms-catalog { grid-template-columns: minmax(0, 1fr); gap: 0; }

    .ms-filter {
        position: fixed;
        inset: 0;
        z-index: 900;
        max-height: none;
        border: 0;
        border-radius: 0;
        padding: 16px 18px 90px;
        overflow-y: auto;
        transform: translateY(102%);
        visibility: hidden;
        transition: transform .2s ease;
    }
    .ms-catalog.is-filters-open .ms-filter {
        transform: none;
        visibility: visible;
    }
    body.ms-filters-lock { overflow: hidden; }

    /* В мобильном drawer фон плотный: на десктопе панель прозрачная (как страница),
       но поверх выдачи нужен непрозрачный лист. Специфичность выше, чем у правила ниже. */
    .ms-catalog .ms-filter { background: #FAFBFC; }

    .ms-filter__head {
        position: sticky;
        top: 0;
        background: #FAFBFC;
        padding: 0 0 12px;
        z-index: 2;
        display: flex;
        gap: 8px;
        align-items: center;
    }
    .ms-filter__head .ms-filter__search { flex: 1; }
    .ms-filter__close {
        display: block;
        padding: 8px 12px;
        border: 1px solid #ddd;
        border-radius: 6px;
        background: #f7f7f7;
        font-size: 13px;
        cursor: pointer;
        white-space: nowrap;
    }
    .ms-filter__apply {
        display: block;
        position: fixed;
        left: 18px;
        right: 18px;
        bottom: 16px;
        z-index: 901;
        padding: 14px;
        border: 0;
        border-radius: 8px;
        background: #176B6B;
        color: #fff;
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
    }
    .ms-filter__reset { margin-top: 10px; }

    .ms-toolbar__filters {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 9px 14px;
        border: 1px solid #176B6B;
        border-radius: 8px;
        background: #fff;
        color: #176B6B;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
    }
    .ms-toolbar__n { font-weight: 700; }
    .ms-sort { margin-left: auto; }
    .ms-sort__label { display: none; }
}

/* ── Телефон: две карточки в ряд ──────────────────────────────────────── */

@media (max-width: 600px) {
    .ms-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .ms-card__body { padding: 8px 10px 10px; gap: 4px; }
    .ms-card__title { font-size: 13px; }
    .ms-card__specs { font-size: 11px; }
    .ms-card__price { font-size: 15px; }
    .ms-card__foot { font-size: 11px; gap: 6px; }
    .ms-card__btn { padding: 8px; font-size: 11px; }
    .ms-toolbar { gap: 8px; }
    .ms-count { font-size: 12px; }
}


/* ── Цветовое оформление фильтров: «Тихая архитектура» ────────────────────
   Панель в тёплой палитре магазина; акцент #176B6B появляется только там,
   где пользователь что-то выбрал. Контрасты (WCAG):
     счётчик #6B6C68 на панели #FBFAF7 .... 5.07:1  (AA)
     выбранная строка #105454 на #EDF3F2 .. 7.50:1  (AA)
     чип: белый на #176B6B ................ 6.27:1  (AA)
     текст #25282A на #FBFAF7 ............. 14.21:1 (AAA)
   ------------------------------------------------------------------------ */

.ms-filter {
    /* Фон — как у основной страницы (владелец): кремовая заливка делала из панели
       отдельную карточку. Границу оставляем, она держит колонку. */
    background: transparent;
    border-color: #E4E0D7;
}

.ms-facet {
    position: relative;
    border-top-color: #E9E5DC;
}

/* Открытая группа: тонкая полоса акцента по левому краю панели — цвет ведёт
   по структуре, а не заливает блоки. */
.ms-facet[open]::before {
    content: "";
    position: absolute;
    left: -16px;
    /* −1 px перекрывает border-top секции: полоса идёт без разрыва на стыке. */
    top: -1px;
    bottom: 0;
    width: 3px;
    background: #176B6B;
}

.ms-facet__head::after { border-color: #8A8B86; }

.ms-filter__search,
.ms-facet__search,
.ms-filter__range input {
    background: #FFFFFF;
    border: 1px solid #DEDBD4;
    color: #25282A;
}

.ms-filter__search:focus,
.ms-facet__search:focus,
.ms-filter__range input:focus {
    outline: 2px solid #D39A43;
    outline-offset: 1px;
    border-color: #D39A43;
}

/* Спиннеры у полей цены не нужны: шаг 100 заложен в разметке, стрелки только шумят. */
.ms-filter__range input[type="number"]::-webkit-outer-spin-button,
.ms-filter__range input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.ms-filter__range input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.ms-filter__item input[type="checkbox"] { accent-color: #176B6B; }
.ms-filter__item em { color: #6B6C68; font-variant-numeric: tabular-nums; }

/* Выбранное значение: заливка строки. Отрицательные поля компенсируют
   внутренний отступ — текст стоит на месте, меняется только фон. */
.ms-filter__item {
    border-radius: 4px;
}
.ms-filter__item.is-checked {
    background: #EDF3F2;
    color: #105454;
    margin: 0 -6px;
    padding: 4px 6px;
}
.ms-filter__item.is-checked em { color: #105454; }

.ms-facet__more { color: #105454; }

.ms-price-preset {
    background: #FFFFFF;
    border: 1px solid #DEDBD4;
    color: #25282A;
}
.ms-price-preset:hover,
.ms-price-preset:focus-visible {
    border-color: #176B6B;
    color: #105454;
}
.ms-price-preset.is-active {
    background: #176B6B;
    border-color: #176B6B;
    color: #FFFFFF;
    font-weight: 600;
}

.ms-filter__reset {
    background: #F3F0E9;
    border-color: #DEDBD4;
    color: #25282A;
}
.ms-filter__reset:hover { background: #EAE6DD; border-color: #D6D1C6; }

/* Выбранные фильтры сверху — заливка акцента, как и выбранный пресет. */
.ms-chip {
    background: #EDF3F2;
    border-color: #CFE0DE;
    color: #105454;
}
.ms-chip:hover { border-color: #176B6B; }
.ms-chip__x { color: #105454; }
.ms-chip--clear {
    background: none;
    border-color: transparent;
    color: #176B6B;
}
.ms-chip--clear .ms-chip__x { color: #176B6B; }

/* Тулбар и сортировка: убрать дефолтный синеватый Blocksy, он выбивался из палитры. */
.ms-toolbar { border-bottom-color: #E9E5DC; }
.ms-count { color: #5F6160; }
.ms-count strong { color: #25282A; }
.ms-sort__label { color: #5F6160; }
.ms-sort__select {
    color: #25282A;
    border-color: #DEDBD4;
    background: #FFFFFF;
}

/* Карточки: тёплая линия и свой цвет заголовка (#192A3D был из Blocksy). */
.ms-card { border-color: #E6E2D9; }
.ms-card:hover { border-color: #D6D1C6; }
.ms-card__title,
.ms-card__title a { color: #25282A; }
.ms-card__specs { color: #5F6160; }


/* Поля ввода внутри панели: у Blocksy своё правило `input[type]` с холодной
   рамкой #E1E8ED и синеватым текстом #3A4F66 — оно перебивало панельные стили.
   Селектор с .ms-catalog даёт специфичность выше и возвращает тёплую палитру. */
.ms-catalog .ms-filter input[type="search"],
.ms-catalog .ms-filter input[type="number"],
.ms-catalog .ms-filter input[type="text"],
.ms-catalog .ms-filter .ms-filter__search,
.ms-catalog .ms-filter .ms-facet__search {
    background: #FFFFFF;
    border-color: #DEDBD4;
    color: #25282A;
}

.ms-catalog .ms-filter input::placeholder { color: #8A8B86; }

/* Плашка выбранной строки начинается левее чекбокса, а текст остаётся на месте:
   padding-left компенсирован margin-left. */
.ms-filter__item.is-checked {
    margin: 0 -8px;
    padding: 4px 8px;
}


/* Скругления убраны: на сайте всё прямоугольное (правило владельца).
   Панель фильтров, поля, пресеты цены, чипы и плашки — прямые углы. */
.ms-catalog .ms-filter,
.ms-catalog .ms-filter__search,
.ms-catalog .ms-filter__range input,
.ms-catalog .ms-facet__search,
.ms-catalog .ms-price-preset,
.ms-catalog .ms-filter__reset,
.ms-catalog .ms-filter__item,
.ms-catalog .ms-chip,
.ms-catalog .ms-facet__picked {
    border-radius: 0;
}


/* Чекбоксы тоже прямоугольные: нативная отрисовка оставляет радиус 2–3 px,
   поэтому рисуем свой квадрат (appearance: none). Галочка — залитый квадрат. */
.ms-catalog .ms-filter__item input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    margin: 0;
    border: 1px solid #B9B5AC;
    background: #FFFFFF;
    border-radius: 0;
    display: grid;
    place-content: center;
    cursor: pointer;
}

/* Галочка — фоновая SVG: у <input> псевдоэлементы не рисуются (replaced element),
   поэтому ::before здесь не работает и отметку рисуем фоном. */
.ms-catalog .ms-filter__item input[type="checkbox"]:checked {
    border-color: #176B6B;
    background-color: #176B6B;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 6.5l3 3 6-6.5' fill='none' stroke='%23FFFFFF' stroke-width='2'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 11px 11px;
}

.ms-catalog .ms-filter__item input[type="checkbox"]:focus-visible {
    outline: 2px solid #D39A43;
    outline-offset: 1px;
}

.ms-catalog .ms-filter__item.is-zero input[type="checkbox"] {
    border-color: #DEDBD4;
    cursor: default;
}

/* -------------------------------------------------------------------------
 * Разделы каталога: чипы над панелью фильтров + единица цены в карточке.
 * Всё прямоугольное (правило владельца), акцент только на текущем разделе.
 * ---------------------------------------------------------------------- */
.ms-catalog .ms-sections {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 18px;
    padding-bottom: 8px;
    border-bottom: 1px solid #DEDBD4;
}

.ms-catalog .ms-sections__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 14px;
    border-radius: 0;
    border-bottom: 2px solid transparent;
    font-family: Onest, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    color: #666862;
    text-decoration: none;
}

.ms-catalog .ms-sections__link:hover {
    color: #25282A;
    border-bottom-color: #DEDBD4;
}

.ms-catalog .ms-sections__link:focus-visible {
    outline: 2px solid #176B6B;
    outline-offset: 2px;
}

.ms-catalog .ms-sections__link.is-active {
    color: #25282A;
    border-bottom-color: #176B6B;
}

.ms-card__price-note {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    font-weight: 400;
    color: #666862;
}

@media (max-width: 768px) {
    .ms-catalog .ms-sections {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .ms-catalog .ms-sections::-webkit-scrollbar {
        display: none;
    }

    .ms-catalog .ms-sections__link {
        white-space: nowrap;
    }
}

/* -------------------------------------------------------------------------
 * Посадочная каталога: плитки разделов и подсказка «не знаете, что выбрать».
 * Прямые углы, линии вместо теней, акцент только на действии.
 * ---------------------------------------------------------------------- */
.ms-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 16px;
    margin: 0 0 28px;
}

.ms-tile {
    display: flex;
    flex-direction: column;
    border: 1px solid #DEDBD4;
    border-radius: 0;
    background: #FFFFFF;
    color: #25282A;
    text-decoration: none;
    overflow: hidden;
}

.ms-tile:hover,
.ms-tile:focus-visible {
    border-color: #25282A;
    color: #25282A;
}

.ms-tile:focus-visible {
    outline: 2px solid #176B6B;
    outline-offset: 2px;
}

.ms-tile__media {
    display: block;
    aspect-ratio: 4 / 3;
    background: #EEECE6;
    overflow: hidden;
}

.ms-tile__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    mix-blend-mode: multiply;
}

.ms-tile__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 14px 16px 16px;
}

.ms-tile__title {
    display: block;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.25;
}

.ms-tile__meta {
    display: block;
    margin-top: auto;
    padding-top: 6px;
    font-size: 13px;
    color: #666862;
}

/* Цена в плитке — своей строкой: якорь цены не должен сливаться со счётчиком,
   а на 390 px (плитка 166 px) «224 модели · от 3 360 ₽» рвалось по разрядам. */
.ms-tile__price {
    display: block;
    margin-top: 2px;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 600;
    color: #25282A;
}

.ms-tile__note {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: #8A8B86;
}

.ms-helper {
    border-top: 1px solid #DEDBD4;
    padding-top: 22px;
    margin-bottom: 8px;
}

.ms-helper__title {
    margin: 0 0 14px;
    font-size: 18px;
    font-weight: 600;
}

.ms-helper__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ms-helper__list a {
    display: block;
    border: 1px solid #DEDBD4;
    border-radius: 0;
    padding: 14px 16px;
    color: #25282A;
    text-decoration: none;
}

.ms-helper__list a:hover,
.ms-helper__list a:focus-visible {
    border-color: #176B6B;
}

.ms-helper__list strong {
    display: block;
    font-size: 15px;
    font-weight: 600;
}

.ms-helper__list span {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    color: #666862;
}

@media (max-width: 1024px) {
    .ms-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ms-helper__list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .ms-tiles {
        gap: 12px;
    }

    .ms-tile__title {
        font-size: 16px;
    }
}

/* ── Верхняя панель фильтров (ADR-211) ─────────────────────────────────────
   «Вид» и решающий признак вида — над сеткой, в один клик. Всё прямоугольное
   (ADR-204), акцент #176B6B только на выбранном. На телефоне ряды скроллятся. */
.ms-topfilters{display:flex;flex-direction:column;gap:10px;margin:0 0 18px;}
.ms-tf{display:flex;align-items:center;gap:12px;min-width:0;}
.ms-tf__label{flex:0 0 auto;min-width:44px;font:500 13px/1 Onest,sans-serif;color:#8A8B86;}
/* Ряд «Вид»: на широком экране переносим — при 13 видах последние чипы и выбранный
   «Ручки межкомнатные» уезжали за правый край, панель выглядела обрезанной. На узком
   экране перенос давал 5 строк, поэтому там остаётся скролл, а активный чип подводится
   в кадр из catalog.js. */
.ms-tf__row{display:flex;gap:6px;overflow-x:auto;padding:1px 0;scrollbar-width:none;-ms-overflow-style:none;}
.ms-tf__row::-webkit-scrollbar{display:none;}
.ms-tf__chip{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;height:32px;padding:0 12px;
  border:1px solid #DEDBD4;border-radius:0;background:#fff;color:#25282A;
  font:500 13px/1 Onest,sans-serif;text-decoration:none;white-space:nowrap;transition:border-color .12s,background .12s;}
.ms-tf__chip em{font-style:normal;font-size:12px;color:#8A8B86;}
.ms-tf__chip:hover{border-color:#25282A;}
.ms-tf__chip.is-active{background:#176B6B;border-color:#176B6B;color:#fff;}
.ms-tf__chip.is-active em{color:rgba(255,255,255,.75);}
.ms-tf--sub .ms-tf__label{color:#25282A;}
/* Строка выбранного вида над выдачей: «Вид  Ручки  ×» (ADR-226). */
.ms-tf--current{display:flex;align-items:center;gap:10px;min-height:34px;padding:0;}
.ms-tf--current .ms-tf__value{font:600 15px/1.2 Onest,sans-serif;color:#105454;}
.ms-tf--current .ms-tf__clear{display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border:1px solid #D8D4CA;border-radius:0;color:#6B6C68;text-decoration:none;
  font:400 15px/1 Onest,sans-serif;transition:background .12s,color .12s,border-color .12s;}
.ms-tf--current .ms-tf__clear:hover{background:#F6F4EE;color:#25282A;border-color:#B9B4A6;}

/* Дерево «Назначение → вид → подвид» в левой панели (ADR-227): ветки раскрываются,
   выбранная раскрыта, внутри — строки-ссылки с отступами по уровню. */
.ms-facet--tree .ms-facet__list>.ms-facet__nav{border-bottom:1px solid #EFECE4;}
.ms-facet--tree .ms-facet__nav{border-bottom:0;}
.ms-tree__branch,.ms-tree__kind{border-bottom:1px solid #EFECE4;}
.ms-tree__sum{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:7px 24px 7px 8px;position:relative;cursor:pointer;list-style:none;
  font:500 14px/1.25 Onest,sans-serif;color:#25282A;}
.ms-tree__sum::-webkit-details-marker{display:none;}
.ms-tree__sum>span{font-size:12px;color:#6B6C68;flex:0 0 auto;}
.ms-tree__sum::after{content:"▸";position:absolute;right:8px;top:7px;font-size:11px;color:#8A8B86;
  transition:transform .12s;}
.ms-tree__branch[open]>.ms-tree__sum::after,
.ms-tree__kind[open]>.ms-tree__sum::after{transform:rotate(90deg);}
.ms-tree__sum:hover{background:#F6F4EE;}
.ms-facet__nav--sub{padding-left:22px;}
.ms-tree__sum--sub{font-weight:400;padding-left:22px;}
.ms-facet__nav--leaf{padding-left:38px;color:#4A4B47;}

/* «Назначение» в левой панели: строка-ссылка с количеством, как пункт фильтра (ADR-225). */
.ms-facet__nav{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:7px 8px;border-bottom:1px solid #EFECE4;color:#25282A;text-decoration:none;
  font:400 14px/1.25 Onest,sans-serif;transition:background .12s,color .12s;}
.ms-facet__nav:last-child{border-bottom:0;}
.ms-facet__nav span{flex:0 0 auto;font-size:12px;color:#6B6C68;}
.ms-facet__nav:hover{background:#F6F4EE;}
.ms-facet__nav.is-active{background:#EDF3F2;color:#105454;font-weight:600;}
.ms-facet__nav.is-active span{color:#105454;}
@media(min-width:1200px){
  .ms-tf__row{flex-wrap:wrap;overflow-x:visible;}
}
@media(max-width:768px){
  .ms-tf{flex-direction:column;align-items:stretch;gap:6px;}
  .ms-tf__label{min-width:0;font-size:12px;}
  .ms-tf__chip{height:30px;padding:0 10px;font-size:12.5px;}
}