/* ==========================================================================
   Правки интерфейса по осмотру 10.09.2026.
   Отдельный файл: у style.css одна версия на всю тему, её подъём сбрасывает
   кэш всему сайту сразу.
   Границы взяты те же, что в теме: 575px — рубеж, на котором style.css
   переключает шапку и отступ под неё.
   ========================================================================== */

/* --- 1. Телефоны в шапке -------------------------------------------------
   Ссылка занимала 116×14 px — попасть пальцем почти нельзя. Оба номера
   оставляем: в бургер-меню телефонов нет вообще, убрать второй значило бы
   потерять его с первого экрана.
   ВАЖНО: шапка position:fixed, а отступ под неё задан числом —
   style.css:4476 `body{padding-top:60px}` в @media (max-width:575px).
   Выросшая шапка накрывала хлебные крошки, поэтому отступ правим парой. */
@media (max-width: 575px) {
    .tels a[href^="tel:"] {
        display: flex;
        align-items: center;
        min-height: 32px;
        font-size: 15px;
    }
    html body { padding-top: 92px; }
}

@media (max-width: 767px) {

/* --- 2. Плашки первого экрана -------------------------------------------
   Строка прокручивается (586 px содержимого в 375 px окна), но выглядела
   обрезанной: край рубил текст на полуслове. Растворяем правый край —
   привычный знак «здесь есть продолжение» — и добавляем прилипание. */
.ss-hero__trust {
    scroll-snap-type: x proximity;
    padding-right: 4px;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 38px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 38px), transparent);
}
.ss-hero__trust-item { scroll-snap-align: start; }

/* --- 3. Кнопка чата над панелью контактов -------------------------------
   Кнопка Verbox стояла на bottom:5px и накрывала «MAX» в нашей панели
   (высота 53 px). Виджет держит положение правилом
   `.online-chat-root-Verbox #supportTrigger` с !important, поэтому одного
   `#supportTrigger` не хватает: при равном !important решает специфичность.
   Добавляем html body, чтобы перевесить. */
html body .online-chat-root-Verbox #supportTrigger,
html body #supportTrigger {
    bottom: 66px !important;
}

}

/* ==========================================================================
   Правки по осмотру мобильной версии 19.09.2026
   (портфолио, карточка панели, карточка кровати; ширины 320–1200).
   ========================================================================== */

/* --- 4. Хлебные крошки шире 600 px --------------------------------------
   10.09 крошкам запретили перенос (nowrap), а прокрутку включили только
   до 600 px. На 601–900 длинное название товара уезжало за край и давало
   горизонтальную прокрутку всей страницы (MP-015: 851 px в окне 601).
   Прокрутку сюда не ставим: выпадашка подразделов там position:absolute
   и обрезалась бы контейнером. Разрешаем перенос строк. */
@media (min-width: 601px) {
    nav.breadcrumb .ss-crumbs { flex-wrap: wrap; }
    nav.breadcrumb .ss-crumbs__current { white-space: normal; }
}

/* До 600 px крошки — строка с прокруткой, но край рубил название товара
   («Мягкие стеновые панели» без продолжения). Тот же приём, что у плашек
   первого экрана: растворяем правый край, а в конце строки оставляем
   запас, чтобы последнее слово при прокрутке до упора читалось целиком. */
@media (max-width: 600px) {
    nav.breadcrumb {
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
                mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    }
    nav.breadcrumb .ss-crumbs { padding-right: 28px; }
}

/* --- 5. Нижняя панель контактов на 320 px -------------------------------
   Три кнопки с nowrap и min-width:auto не сжимались: на 320 px панель
   выходила за экран на 3 px, край WhatsApp срезался. */
.mobile-contact-bar__link { min-width: 0; }
@media (max-width: 360px) {
    .mobile-contact-bar { gap: 5px; padding-left: 6px; padding-right: 6px; }
    .mobile-contact-bar__link { padding: 8px 6px; gap: 4px; font-size: 12px; }
}

@media (max-width: 767px) {

/* --- 6. Вкладки карточки товара -----------------------------------------
   «Характеристики / Материалы / Монтаж / Д…» — строка прокручивается
   (457 px в 345), но обрезанная «Д» выглядела поломкой. */
.tabs-container .tab-navigation {
    padding-right: 24px;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
}

/* --- 7. Галерея портфолио -----------------------------------------------
   Тема выводит все вкладки разом (у каждой .blocks класс active, ни одна
   кнопка не выбрана), поэтому её мобильный слайдер не собирается ни разу,
   а правило style.css `.gallery-item{width:280px;flex:none}` раскладывало
   фото в ряд по 280 px: страница шириной 1165 px, фото налезали друг
   на друга. Раскладываем каждый блок в сетку на две колонки:
   крупное фото — на всю ширину, пара квадратов, широкое фото, 2×2.
   Какая вкладка показана — решает скрипт mu-plugins/softstyle-portfolio-mobile.php. */
.portfolio-block .gallery-block {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
    margin-bottom: 8px;
}
.portfolio-block .gallery-left,
.portfolio-block .gallery-right,
.portfolio-block .gallery-row { display: contents; }
.portfolio-block .gallery-item {
    width: auto;
    height: auto;
    flex: none;
    aspect-ratio: 1;
    overflow: hidden;
}
.portfolio-block .gallery-left .gallery-item,
.portfolio-block .gallery-half .gallery-item {
    grid-column: 1 / -1;
    aspect-ratio: 3 / 2;
}
.portfolio-block .gallery-item a { display: block; height: 100%; }
.portfolio-block .blocks.ss-tab-hidden { display: none; }

/* Кнопки вкладок стояли столбиком по одной — пять строк до первой
   фотографии. Собираем их в плотный перенос. */
.portfolio-block .tab-block { gap: 14px 22px; }
.portfolio-block .tab-block button { font-size: 14px; padding-bottom: 10px; }
.portfolio-block .tab-block button.is-current { color: var(--beige); border-bottom-color: transparent; }
.portfolio-block .tab-block button.is-current::after {
    content: '';
    position: absolute;
    top: calc(100% - 6px);
    left: 0;
    width: 100%;
    height: 11px;
    background: url(../img/line.svg) center;
}
.portfolio-block .tab-block button:focus-visible { outline: 2px solid #8f7347; outline-offset: 4px; }

}

/* --- 8. Калькулятор внизу страниц: поля «Высота / Ширина / Длина» --------
   Три поля по 85 px плюс два зазора по 20 px = 295 px при ширине блока
   275 px (окно 320). Третье поле уезжало за край. На узком экране
   уменьшаем зазор и даём полям делить ширину поровну. */
@media (max-width: 400px) {
    .calc .dimensions { gap: 10px; }
    .calc .dimensions .input-wrapper { flex: 1 1 0; min-width: 0; }
    .calc .dimensions .input-mm input { width: auto; flex: 1 1 auto; min-width: 0; }
}

/* --- 9. «Похожие модели» / «Что берут вместе» без картинки дивана ---------
   Декоративный синий диван (recomend-image.png) убран из single-catalog.php
   и taxonomy.php: на карточке панели или кровати он выглядел чужим.
   Заголовок раньше занимал 43 % ширины рядом с картинкой — теперь на всю
   ширину, а абзац ограничен удобной длиной строки. */
.recommend .title-column.title-column--wide { width: 100%; }
.recommend .title-column--wide p { max-width: 720px; }

/* --- 10. Блок «Выбрать основание кровати» -------------------------------
   Цена теперь берётся из czena самой кровати; под ней пояснение,
   что основание и механизм меняют сумму. */
.choise-price .choise-note {
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.4;
    color: #6b6252;
    text-align: center;
}

/* --- 11. Логотип в подвале на телефоне ----------------------------------
   style.css до 575 px ставит `.flogo img{max-width:100%}` — логотип
   растягивался на всю ширину экрана (≈360 px) и занимал пол-экрана. */
@media (max-width: 575px) {
    footer .flogo img { max-width: 200px; height: auto; }
}

/* --- 12. MAX вместо WhatsApp в окне «Хочу такую же панель» --------------
   Ссылка вела на wa.me с городского номера. Цвета — как у кнопки MAX
   в нижней панели контактов. */
.atlas-modal__alt a.atlas-modal__max {
    color: #7c3aed;
    background: #ede9fe;
    border-color: #ddd6fe;
}
.atlas-modal__alt a.atlas-modal__max:hover { background: #7c3aed; color: #fff; }

@media (max-width: 767px) {

/* --- 13. Статья блога на 320–360 px (нашёл проверяльщик mobile_check.py) ---
   Колонка сетки .art-layout растягивалась по самому широкому элементу
   текста — таблице (363 px при окне 345): у дорожки сетки min-width:auto.
   Сжимаем дорожку, а широкие таблицы листаются внутри себя. */
.art-layout { grid-template-columns: minmax(0, 1fr) !important; }
.art-layout > * { min-width: 0; }
.art-body table { display: block; max-width: 100%; overflow-x: auto; }
.art-body img, .art-body figure { max-width: 100%; height: auto; }

/* --- 14. «Сортировать по популярности / по цене» в хабе /product/ -------
   Три элемента в строку без переноса: 334 px при ширине 320. */
.filtr .sort { flex-wrap: wrap; max-width: 100%; row-gap: 6px; }

}

/* --- 10а. Пояснение в блоке основания — отдельной строкой под ценой.
   .choise-price — flex-строка темы: пояснение вставало рядом и сжимало
   цену в столбик («ОТ / 86 / 490 / ₽»). */
.choise-price { flex-wrap: wrap; }
.choise-price > p:first-child span { white-space: nowrap; }
.choise-price .choise-note { flex-basis: 100%; }