/* Сквозные правки мобильной версии smdekor-v2 по итогам аудита 2026-10-01 (32 страницы × 8 устройств).
   Подключается в header.php ПОСЛЕ страничного CSS, поэтому перекрывает его; там, где правило живёт во
   встроенном <style> компонента (он идёт позже, в body), селекторы взяты специфичнее.
   Страничные правки лежат у своих страниц (оформление, статьи, «Перетяжка», «Дизайн-проект»,
   контакты, портфолио, 404). */

@media (max-width: 926px) {

    /* --- Карусели товаров: стрелки листания фото внутри карточки ---------------------------------
       В карточке стрелки вынесены за край фото (left/right: -30px — на десктопе это зазор между
       карточками). В мобильных каруселях видна ровно одна карточка, слайдер обрезает всё по её краям:
       свои стрелки пропадали, а стрелка «назад» СОСЕДНЕЙ карточки заезжала внутрь справа от фото и
       листала невидимую карточку. Ставим стрелки внутрь галереи — фото занимает 74% её ширины, по
       бокам место есть. */
    .swiper .product-card .product-card__gallery-prev { left: 0; right: auto; }
    .swiper .product-card .product-card__gallery-next { right: 0; left: auto; }

    /* --- Области нажатия (были 10–20px при рекомендуемых от 24px) --------------------------------
       Расширяем невидимым ::after — вид не меняется, по иконке легче попасть пальцем. */
    .mobile-nav .burger-btn,
    .mobile-nav .search-btn,
    .mobile-nav ul li a { position: relative; }
    .mobile-nav .burger-btn::after,
    .mobile-nav .search-btn::after,
    .mobile-nav ul li a::after {
        content: '';
        position: absolute;
        left: 50%;
        top: 50%;
        width: 32px;
        height: 44px;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
    .product-card .product-card__like::after {
        content: '';
        position: absolute;
        top: -12px; right: -12px; bottom: -12px; left: -12px;
    }
    .counter .minus,
    .counter .plus { position: relative; }
    .counter .minus::after,
    .counter .plus::after {
        content: '';
        position: absolute;
        top: -10px; right: -9px; bottom: -10px; left: -9px;
    }
    .product-card .product-card__gallery-prev::after,
    .product-card .product-card__gallery-next::after {
        content: '';
        position: absolute;
        top: -12px; right: -6px; bottom: -12px; left: -6px;
    }

    /* --- Фильтр листинга «Параметры»: группы столбиком -------------------------------------------
       На десктопе группы стоят в ряд и лишнее уходит в горизонтальную прокрутку панели. На телефоне
       полосы прокрутки не видно, и вторая группа просто обрезалась правым краем на полуслове
       («Металлич…», «Банкетны…»). Каждая группа — на всю ширину, подколонки значений переносятся. */
    .categories.categories-bottom {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        row-gap: 26px;
        padding-left: 16px;
        padding-right: 16px;
    }
    .categories-bottom .smdekor-smart-filter .categories__item,
    .categories-bottom .smdekor-smart-filter .by-color {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
        min-width: 0;
    }
    .categories-bottom .smdekor-smart-filter .categories__cols,
    .categories-bottom .smdekor-smart-filter .by-color__items {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
}

/* --- Карточка товара на телефоне: покупка сразу под фото (решение Алины 2026-10-01) ---------------
   Было: фото → сноска о цвете → «Оставить отзыв» → название/цена/«Купить» (уходили за первый экран).
   Левую колонку «распускаем» (display:contents — её дети становятся флекс-элементами обёртки) и
   ставим порядок: фото → миниатюры → блок покупки с характеристиками → сноска → «Оставить отзыв».
   Десктоп (две колонки) не меняется. */
@media (max-width: 926px) {
    .product-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -ms-flex-direction: column; flex-direction: column; }
    .product-wrapper > .product-left { display: contents; }
    .product-wrapper > .product-left > .product-left__inner { -ms-flex-order: 1; order: 1; }
    .product-wrapper > .product-left > .product-thumb-wrapper { -ms-flex-order: 2; order: 2; }
    .product-wrapper > .product-right { -ms-flex-order: 3; order: 3; margin-top: 10px; }
    .product-wrapper > .product-left > .product-left__desc { -ms-flex-order: 4; order: 4; margin-top: 24px; }
    .product-wrapper > .product-left > .product-reviews__cta { -ms-flex-order: 5; order: 5; }
}

/* --- Плавающие кнопки мессенджеров не поверх открытого меню и поиска ------------------------------
   У них z-index 940, у мобильного меню (.top-nav) и оверлея поиска — меньше: кнопки висели поверх
   пунктов меню. Пока меню/поиск открыты, прячем их. */
html:has(.top-nav.active) .smd-float,
html:has(.mobile-search.active) .smd-float,
html:has(.smd-sheet.active) .smd-float {
    display: none !important;
}

/* --- Типографика мобильной версии (решение Алины 2026-10-01: «светло-серый текст сделать тёмным»,
   размеры — гармонично с заголовками; ПЕРЕСМОТРЕНО 2026-10-07, см. ниже) --------------------------
   • 2026-10-07 (Алина, сверка с Figma на iPhone: «тексты описаний очень тёмные и жирные, сливаются; заголовки и
     подзаголовки крупнее — теряются рядом с описаниями»): описания снова Circe W08 Extra Light, как в макете
     (01.10 их перевели на Circe Regular — вышло тяжело); заголовки масштабируются от макета — мобильный кадр Figma
     320px: на 320px кегль как в макете, шире — пропорционально ширине экрана (iPhone 393px ×1.23), не больше ×1.3.
     Описания остаются 12–14px, поэтому заголовки на их фоне заметнее. Баннер главной — свой размер, не тронут.
   • Ничего мельче 12px: кнопки/ссылки «купить», «цвет», «подробнее», «смотреть все» были 8–11px;
     короткие подзаголовки 11.5px → 13px (заголовки секций на телефоне 17–19px, тексты 12–14px).
   • Серые подписи (#807d77, #75746f, #6d6d6d, #a5a29c, полупрозрачные) → основной #31302e.
   • Оставлены как есть осознанно: красные цены/скидки (фирменный акцент), неактивные вкладки
     «хиты/новинки» (серый = состояние), подписи-диагональ в таблице цен «Перетяжки», подсказки в полях.
   !important — потому что исходные правила во встроенных <style> страниц (в body) идут ПОСЛЕ этого файла.
   Проверка: scratchpad mobile_audit/design_test.js «D3» (20 страниц, iPhone 15). */
@media (max-width: 926px) {
    /* описания — Circe W08 Extra Light, как в макете (шрифт body по вёрстке; 01.10 тут стоял Circe Regular).
       Аккордеон «Почему выбирают нас» — общий для главной и /oplata/, а payment.css даёт ему шрифт плотнее. */
    .acordeon__text { font-family: "Circe W08 Extra Light", sans-serif !important; }
    /* «Почему выбирают нас» (Алина 2026-10-08: «пункты такого же размера, как заголовок блока; текст внутри очень крупный и
       жирный»): пункты — от макета 11.5px (не от 13px), на iPhone 393px ~14px при заголовке ~20px; текст пункта — 13px вместо
       унаследованных 16px. Блок общий для главной и /oplata/. */
    .acordeon__item > button { font-size: clamp(12px, 3.6vw, 14.95px) !important; letter-spacing: .04em !important; }
    .acordeon__text { font-size: 13px !important; line-height: 1.5 !important; letter-spacing: .03em; }
    /* «Оплата / Доставка / Сборка / Гарантия» — «Информация о товаре» в карточке и /oplata/, общий блок
       include/delivery_tabs.php (Алина 2026-10-12: «размер шрифта заголовка аккордеона меньше, чем текст внутри»). В вёрстке
       на ≤926 заголовок 12px, а текст 16px — на компьютере наоборот (вкладка 20–34px, текст 12–18px). Текст — 13px Extra
       Light, как у соседних аккордеонов (характеристики товара, «Почему выбирают нас»); заголовок — от вёрстки 12px × ширина/320,
       но не мельче 13.5px, чтобы и на 320px был крупнее текста; разрядка — та же доля кегля, что 2px при 12px. */
    .mobile-acordeon > li > button { font-size: clamp(13.5px, 3.75vw, 15.6px) !important; letter-spacing: .167em !important; }
    .mobile-acordeon .mobile-acordeon__content > li,
    .mobile-acordeon .mobile-acordeon__content strong { font-size: 13px !important; line-height: 1.5 !important; letter-spacing: .03em !important; color: #31302e !important; }
    /* 2026-10-15 (Алина: «добавим небольшой отступ сверху — между полосочкой и началом текста — и снизу — между концом текста и
       блоком с заливкой»): в карточке текст начинался в 1px от полоски и кончался в 2px от низа панели, на /oplata/ — ~6px.
       Поля самой панели нельзя — у свёрнутой (height:0) они остались бы видимой полосой; поэтому — поля первого и последнего
       абзаца: свёрнутая панель их прячет (overflow), раскрытой JS ставит высоту по scrollHeight — они в неё входят. Итого ~13px;
       на /oplata/ payment.js сам даёт раскрытой панели по 5px — там абзацам 7px. */
    .mobile-acordeon .mobile-acordeon__content > li:first-child { margin-top: 12px; }
    .mobile-acordeon .mobile-acordeon__content > li:last-child { margin-bottom: 12px; }
    .payment .mobile-acordeon .mobile-acordeon__content > li:first-child { margin-top: 7px; }
    .payment .mobile-acordeon .mobile-acordeon__content > li:last-child { margin-bottom: 7px; }

    /* заголовки — от макета (320px) пропорционально ширине экрана, до ×1.3; разрядка в em растёт вместе с кеглем */
    main h1.title,
    main h2.title,
    main h1.catalog-tochukwu-h,
    main .leasing-page h1 { font-size: clamp(16px, 5vw, 20.8px) !important; letter-spacing: .2em !important; }
    /* баннер главной — по макету Figma (кадр 320: заголовок 22.7px/0.143em, цена 16.6px/0.163em, кнопка 170px), так же
       ×ширина/320 до ×1.3 (Алина 2026-10-12: «шрифты и кнопку хочется покрупнее»; до этого — фиксированные 21.2/16px и
       кнопка 165×32 на любом телефоне). Кнопка 40px высотой — как кнопки в карточках товаров.
       2026-10-15 (Алина: «кнопка прям сильно широкая — сделаем шириной как цена у дивана?»): ширина кнопки = видимой ширине
       «цена 86 280 ₽» — 8.12 кегля цены (без разрядки после «₽»), растёт вместе с ценой: 135px на 320, 165 на iPhone 15, до 175;
       на всех слайдах одна (было 170–240px по макету). */
    main .slider-top .title { font-size: clamp(22.7px, 7.094vw, 29.51px) !important; letter-spacing: .143em !important; }
    main .slider-top .slider-top__text { font-size: clamp(16.6px, 5.1875vw, 21.58px) !important; letter-spacing: .163em !important; }
    main .slider-top .slider-top__start > a { width: clamp(134.8px, 42.12vw, 175.2px) !important; max-width: none !important; height: 40px; padding: 0 12px !important; font-size: clamp(13px, 3.6vw, 15px) !important; letter-spacing: .2em !important; }
    main .product-right h1 { font-size: clamp(16px, 5vw, 20.8px) !important; }
    .cafe-furniture__card h3 { font-size: clamp(12px, 3.75vw, 15.6px) !important; letter-spacing: .2em !important; }
    .services-slider__content h4,
    .portfolio-content__desc h3,
    .mobile-items strong,
    .smd-order-form h5,
    .production-desc h5,
    .about-content__right strong,
    .principle-content__right strong,
    .contacts-content__right .connection > strong,
    .contacts-content__right .info > strong { font-size: clamp(13px, 4.0625vw, 16.9px) !important; letter-spacing: .037em !important; }
    .portfolio-desc__card strong { font-size: clamp(12.666px, 3.958vw, 16.47px) !important; letter-spacing: .042em !important; }
    .contacts-content__right .info__item strong,
    .society-content strong { font-size: clamp(12px, 3.75vw, 15.6px) !important; }
    /* заголовки с шириной из вёрстки 285px (под кадр 320) — в той же пропорции к экрану и по центру: у заголовка
       проекта портфолио центровки не было, на iPhone 393px он стоял на 45px левее середины */
    .portfolio-desc .title,
    .principle .title { max-width: 89vw !important; margin-left: auto !important; margin-right: auto !important; }

    /* кнопки и ссылки «подробнее / смотреть все / купить / цвет» — 8–11px → 12px (кнопка баннера — выше, своим размером) */
    section.portfolio > .container > a,
    section.cafe-furniture > .container > a,
    .product-card .product-card__items > a,
    .product-card .custom-color,
    .services-slider__content a,
    .tabs-content__btns button,
    .tabs-content__item.about > a,
    section.our-work > .container > a,
    section.production > .container > a,
    section.about > .container > a,
    .about-slider-mobile > a,
    .portfolio-desc a.all-works,
    .article-nav a,
    .cost-form__inner > p { font-size: 12px !important; }
    .product-card .custom-color { letter-spacing: 2px !important; }
    .product-card .product-card__items .counter span { font-size: 13px !important; }

    /* короткие тексты-списки 11.5–11.8px → 13px (подзаголовки — выше, в масштабируемых заголовках) */
    .design-project__content ul li,
    .job-types__content ul li,
    .error-content__desc p,
    .error-content__desc p a { font-size: 13px !important; }
    /* подписи полей оформления заказа («Имя*», «Телефон*», «Почта*») — были 10px */
    .chekcout-form .input label { font-size: 12px !important; }

    /* серые подписи → основной тёмный */
    .counters__item span,
    .calc__eyebrow, .calc__lead, .calc__group label, .calc__consent span,
    .range-filter__inputs span,
    .rTags p,
    .cat-main-page-desc, .catalog-seo-text p, .categories__link,
    .reviews-years a, .review-card__date, .review-form__desc, .review-form__agree span, .review-form__file-name,
    .tabs-content__btns button { color: #31302e !important; opacity: 1 !important; }
    .promo-sale__cell span { font-size: 12px !important; color: #d9d9d9 !important; }
    .article-content__top p { font-size: 13px !important; opacity: .8 !important; }
    .article__nav a, .article__nav a span, .article__nav small { opacity: 1 !important; }
    .article__nav small { font-size: 12px !important; color: #6b6964 !important; }
    .empty-basket strong { opacity: .6 !important; }
    .error-content__right p { opacity: .75 !important; }
}

/* --- Планшет (600–926px): сетки в 2 колонки (решение Алины 2026-10-01: «вёрстка планшета в Фигме —
   под сетку в 2 колонки») --------------------------------------------------------------------------
   В вёрстке одна мобильная граница 926px — iPad в портрете (768–834) получал телефонную раскладку в
   одну колонку: плитки разделов по 640–750px, карточки товаров по 660px, портфолио/статьи/отзывы
   во всю ширину. Здесь: плитки главной и каталога — та же мозаика, что на десктопе (её задают
   grid-row/grid-column самих страниц), карточки листинга/поиска/избранного, портфолио, статьи и
   отзывы — по 2 в ряд; картинка «Описания» товара не выше 560px. Карусели товаров — по 2 карточки
   (breakpoints Swiper в main.js / product-page.js / 404.js). !important только у display/колонок
   контейнеров: их перебивают встроенные <style> страниц. Телефоны (<600px) не затронуты.
   Проверка: scratchpad mobile_audit/design_test.js «D2» (iPad Mini, iPad Pro 11, iPhone 15). */
@media (min-width: 600px) and (max-width: 926px) {
    .cafe-furniture__cards { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 30px 20px; align-items: start; }
    .cafe-furniture .cafe-furniture__cards a.cafe-furniture__card { width: auto; margin: 0; }
    .cafe-furniture .cafe-furniture__cards .sofa,
    .cafe-furniture .cafe-furniture__cards .worktops { margin-top: 0; margin-bottom: 0; }
    /* фото плиток в обёртке-рамке .cafe-furniture__card-img (увеличение при наведении, 2026-10-02): тянется обёртка, фото её заполняет */
    .cafe-furniture .cafe-furniture__cards .cafe-furniture__card:nth-child(1) .cafe-furniture__card-img,
    .cafe-furniture .cafe-furniture__cards .cafe-furniture__card.hero-right .cafe-furniture__card-img { -webkit-box-flex: 1; -ms-flex: 1 1 0px; flex: 1 1 0; min-height: 0; }
    .cafe-furniture .cafe-furniture__cards .cafe-furniture__card:nth-child(1) .cafe-furniture__card-img img,
    .cafe-furniture .cafe-furniture__cards .cafe-furniture__card.hero-right .cafe-furniture__card-img img { height: 100%; -o-object-fit: cover; object-fit: cover; }
    .product-cards { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 20px; }
    .product-cards > .product-card { width: auto; max-width: none; margin: 0; }
    .portfolio-content { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .articles-list { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 20px; }
    .articles-list article img { width: 100%; height: auto; }
    .reviews-list { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 20px; }
    .desc-content__left img { max-height: 560px; width: auto; max-width: 100%; margin: 0 auto; display: block; }
}
@media (max-width: 926px) {
    .product-cards .product-card .product-card__gallery-prev { left: 0; right: auto; }
    .product-cards .product-card .product-card__gallery-next { right: 0; left: auto; }
}
/* Планшет: в каруселях по 2 карточки — выравниваем карточки ряда по высоте (у товара со скидкой
   цена в две строки, и соседняя карточка выглядела короче).
   Высота ленты — по содержимому (height:auto !important), а не та, что пишет autoHeight Swiper (2026-10-12, Алина,
   Android: «ломаются картинки после смены ориентации экрана»): карточки растянуты по ленте, autoHeight меряет растянутые
   карточки, т.е. читает обратно свою же высоту — замер замкнут. Карусель, созданная скрытой (страницу открыли в
   ориентации, где показан другой из трёх вариантов карусели), получает высоту 0px → после поворота карточки
   растягивались до 0 — оставались полоски с рамкой; при повороте телефона в альбомную карточки сохраняли прежнюю
   высоту и низ (цена, кнопки) срезался. Тот же приём, что у «Наших услуг» (section.services ниже). */
@media (min-width: 600px) and (max-width: 926px) {
    .novelties-slider-mobile .swiper-wrapper,
    .series-product-slider-mobile .swiper-wrapper { -webkit-box-align: stretch !important; -ms-flex-align: stretch !important; align-items: stretch !important; height: auto !important; }
    .novelties-slider-mobile .swiper-slide.product-card,
    .series-product-slider-mobile .swiper-slide.product-card { height: auto !important; }
}

/* --- Шапка телефона закреплена вверху экрана на всех страницах (Алина 2026-10-07) ----------------------
   Строка «каталог, поиск, логотип, избранное, корзина» (.mobile-nav, 36px) — position:fixed, на её место в потоке —
   отступ у <header>. sticky не годится: у html и body overflow-x:hidden (body становится контейнером прокрутки, и
   sticky не срабатывает), а сама строка лежит в <header> вместе с крошками, которые закреплять не нужно.
   z-index 900 — выше контента страницы, ниже плавающих кнопок (940), попапа звонка (1000), fancybox и окна корзины.
   Меню (.top-nav) по-прежнему выезжает ПОД строку — бургер всегда виден и закрывает его; оверлей поиска и
   попапы-оверлеи страниц — поверх строки. Переход по якорю и scrollIntoView — с поправкой на высоту шапки.
   Меню — z-index 899 (2026-10-08, Алина: «открываю меню на странице со слайдером — стрелки наползают сверху»): в вёрстке
   у него 2, а у элементов страницы до 30 — сквозь открытое меню были видны стрелки фото в карточках листинга и сердечко
   галереи товара. 899 — над любым содержимым страницы, под строкой с бургером (900). */
@media (max-width: 926px) {
    header.header { padding-top: 36px; }
    .mobile-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 900; }
    .top-nav { z-index: 899; }
    .mobile-search,
    .popup,
    .products-popup { z-index: 1001; }
    html { scroll-padding-top: 46px; }
}

/* --- Карточки товаров на телефоне и планшете (Алина 2026-10-08: «кнопки очень вытянуты в ширину и маленькие по высоте,
   много пустого места между картинкой, ценой и кнопками; название мельче цены»). Вёрстка рассчитана на две маленькие
   карточки в ряд (кадр 320px: фото до 134px, кнопки до 90px, а ≤480px растянуты на всю ширину), у нас на телефоне одна
   карточка во всю ширину — фото висело посреди квадрата, кнопки 130×32, между ними пустые строки.
   • фото: по ширине по-прежнему ≤74% рамки (по бокам стрелки листания), по высоте — до края; прижато к низу рамки —
     у горизонтальных фото пустота уходит вверх, к сердечку и значкам, а не между фото и названием;
   • название — как подзаголовок (от кадра 320px пропорционально, не мельче 14px), крупнее цены (13px); разрядка меньше —
     меньше переносов; высота по тексту, до 3 строк (на планшете, где карточки по две, резерв 2 строки — ровный ряд);
   • пустая строка-распорка .product-card__type (&nbsp;) скрыта; кнопки 40px высотой, «− N +» до 104px, «купить» до 128px;
   • отступы фото→название→цена→кнопки→«цвет» 10/6/10/10px (было ~58/33–48/6/53). */
@media (max-width: 926px) {
    .product-card .product-card__top { margin-bottom: 10px !important; }
    .product-card .product-card__gallery a { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end !important; }
    .product-card .product-card__top img { width: auto !important; height: auto !important; max-width: 74% !important; max-height: 100% !important; }
    .product-card .product-card__name {
        display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
        height: auto !important; min-height: 0 !important; margin-bottom: 6px !important;
        font-size: clamp(14px, 3.9vw, 15.6px) !important; letter-spacing: .06em !important; line-height: 1.25 !important;
    }
    .product-card .product-card__type { display: none !important; }
    .product-card .product-card__prices { margin-bottom: 10px !important; }
    .product-card .product-card__items,
    .product-card .product-card__items.no-discount { -webkit-column-gap: 10px; column-gap: 10px !important; margin-bottom: 10px !important; -ms-flex-pack: center; justify-content: center !important; }
    .product-card .product-card__items .counter { -ms-flex: 0 1 104px !important; flex: 0 1 104px !important; max-width: 104px !important; min-width: 0; min-height: 40px; padding-top: 0 !important; padding-bottom: 0 !important; -ms-flex-align: center; align-items: center !important; box-sizing: border-box; }
    .product-card .product-card__items > a { -ms-flex: 0 1 128px !important; flex: 0 1 128px !important; max-width: 128px !important; min-width: 0; min-height: 40px; padding: 0 12px !important; font-size: 13px !important; box-sizing: border-box; }
}
/* Телефон (карточка одна в ряд): подпись «цвет: X» — без зоны под свотчи (108px в сетке каталога, 112px в «похожих» на
   странице товара — на десктопе и планшете она выравнивает подписи и нижнюю полоску по свотчам соседних карточек ряда,
   правки Алины 08-25/09-01; на телефоне подпись стояла посреди пустой зоны, ~57px под кнопками). Нижняя полоска там
   прибита к низу карточки абсолютно и без зоны легла бы на подпись — на телефоне ставим её в поток, сразу под подписью. */
@media (max-width: 599px) {
    .product-card .custom-color { min-height: 0 !important; }
    body .product-cards .product-card > span.line,
    body .product-card > span.line { position: static !important; display: block; width: auto !important; margin: 10px 0 0 !important; }
}
@media (min-width: 600px) and (max-width: 926px) {
    /* планшет, карточки по две: место под 2 строки названия — цены и кнопки соседних карточек на одном уровне;
       короткое название — по центру этого места (пустота поровну сверху и снизу, а не строкой под ним) */
    .product-card .product-card__name { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-align: center; -ms-flex-align: center; align-items: center !important; -ms-flex-pack: center; justify-content: center !important; min-height: 2.5em !important; margin-bottom: 4px !important; }
}
/* Вкладки «хиты / новинки / со скидкой» на главной — мельче заголовка блока и по центру (там же, 2026-10-08):
   были 18px при заголовке 16–20px и прижаты влево. */
@media (max-width: 926px) {
    section.novelties .hits-tabs { -ms-flex-pack: center; justify-content: center; gap: 22px; }
    section.novelties .hits-tab { font-size: clamp(12px, 3.5vw, 14px); letter-spacing: .08em; }
}

/* --- Блок «Наши услуги» на телефоне и планшете (Алина 2026-10-08, iOS: «весь поплыл по всем фронтам») — как в макете
   Figma (кадр 320px): фото квадратом по центру — 62% ширины экрана (на 320px 198px, как в макете; до 300px); стрелки по
   бокам на середине фото; подзаголовок, текст (5 строк), кнопка «подробнее» по центру; все слайды одной высоты.
   Было: index.php и шаблон карточки задают рамке фото 360×360 на всех ширинах — фото 198px висело в ней у левого края
   (на 320px рамка шире экрана), сверху и снизу по ~80px пустоты; стрелки на 29% высоты слайдера — ниже середины фото;
   под кнопкой десктопный отступ 125px; autoHeight Swiper меняет высоту блока при листании. */
@media (max-width: 926px) {
    html body section.services .services-slider__img { width: min(62vw, 300px); height: min(62vw, 300px); max-width: none; max-height: none; margin: 0 auto 16px; }
    html body section.services .services-slider__img img { display: block; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; object-fit: cover; border-radius: 6px; }
    html body section.services .services-slider-mobile-prev,
    html body section.services .services-slider-mobile-next { top: calc(min(62vw, 300px) / 2) !important; }
    /* слайды одной высоты — по самому высокому (обёртке autoHeight ставит высоту активного слайда) */
    html body section.services .services-slider .swiper-wrapper { height: auto !important; -ms-flex-align: stretch !important; align-items: stretch !important; }
    html body section.services .services-slider__slide { height: auto !important; display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-orient: vertical; -ms-flex-direction: column; flex-direction: column; }
    html body section.services .services-slider__content { -ms-flex: 1 1 auto; flex: 1 1 auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -ms-flex-direction: column; flex-direction: column; min-height: 0; margin-top: 0; }
    html body section.services .services-slider__content .services-slider__text { margin-bottom: 16px; }
    /* кнопка — по центру, внизу слайда (на одном месте во всех слайдах), без десктопного отступа 125px снизу */
    html body section.services .services-slider__content a { margin: auto auto 0 !important; width: 100%; max-width: clamp(131px, 41vw, 170px); padding: 8px 6px; }
}

/* --- «Почему выбирают нас» — фото на телефоне и планшете (главная и /oplata/, общий блок include/choice_block.php;
   Алина 2026-10-12: «картинка меньше, чем в остальных блоках»). Вёрстка на ≤926 держит рамку фото max-width 202px на
   любой ширине — на iPhone 393px фото 202px при 244px у «Наши услуги» прямо над ним. Теперь как там и у первых блоков
   «фото + текст»: квадрат 62% ширины экрана (на 320px 198px, как в макете), до 300px, по центру; скругление и отступ
   до списка — из вёрстки. */
@media (max-width: 926px) {
    html body section.choice .choice-content__img { width: min(62vw, 300px); height: min(62vw, 300px); max-width: none; max-height: none; }
    html body section.choice .choice-content__img img { display: block; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; }
}

/* --- Карусели «стрелка — карусель — стрелка» (.series-product-mobile-wrapper: «товары серии», «рекомендуем», «похожие»,
   «просмотренные» на странице товара, «популярные» на 404) — Алина 2026-10-12: «блоки „просмотренные“ и „товары серии“
   смещаются». Когда листать нечего (одна карточка; на планшете — одна-две), Swiper прячет стрелки (swiper-button-lock =
   display:none), а карусель шириной «по содержимому» (flex: 0 1 auto) оставалась у левого края и ещё сужалась под карточку.
   Теперь карусель всегда занимает место между стрелками, спрятанная стрелка место сохраняет, одна карточка на планшете —
   по центру: карточка там же, где во всех каруселях страницы. Проверка: mobile_audit/carousel_lock_test.js. */
@media (max-width: 926px) {
    .series-product-mobile-wrapper > .series-product-slider-mobile { -ms-flex: 1 1 0px; flex: 1 1 0; min-width: 0; }
    .series-product-mobile-wrapper > .swiper-button-lock { display: block; visibility: hidden; }
    .series-product-mobile-wrapper:has(> .swiper-button-lock) > .series-product-slider-mobile > .swiper-wrapper { -ms-flex-pack: center; justify-content: center; }
    /* отступ между карточками Swiper ставит каждой справа (inline margin-right) — у последней он сдвигал одиночную карточку
       на половину отступа влево от центра */
    .series-product-mobile-wrapper:has(> .swiper-button-lock) > .series-product-slider-mobile > .swiper-wrapper > .swiper-slide:last-child { margin-right: 0 !important; }
}

/* --- Вкладки «о компании / отзывы / новости» на главной (Алина 2026-10-08: «неудачно перенеслось слово» — «о / компании»):
   вёрстка на ≤926 ограничивает кнопку max-width:80px (под кегль 10px), а «о компании» шире — переносилось. Ширина по
   тексту, без переносов: три вкладки занимают ~230px даже на экране 320px. */
@media (max-width: 926px) {
    .tabs-content__btns button { max-width: none !important; width: auto !important; white-space: nowrap; }
}

/* --- Мобильное меню (Алина 2026-10-08, iOS) ---------------------------------------------------------------------------
   • «не закрывает весь экран, внизу видна страница»: панель fixed top:0/bottom:0 кончается у края «малого» экрана, а в
     Safari на iPhone нижняя панель браузера плавает поверх страницы — под ней было видно сайт. Продлеваем панель на 120px
     ниже края (запас под панель браузера), нижний отступ содержимого — на те же 120px больше;
   • ссылки крупнее: 14px вёрстки → от 15px (экран 320) до 18px (как у заголовков, пропорционально ширине);
   • подменю «каталог»/«услуги» — с отступом слева, чтобы разделы каталога не сливались с пунктами меню. */
@media (max-width: 926px) {
    .top-nav { bottom: -120px !important; padding-bottom: 164px !important; }
    /* 2026-10-12, Алина снова: «закрывается не весь экран, видно внизу предыдущую страницу» — продление панели не спасло:
       Safari на iPhone (сворачивание/разворачивание своей панели) всё равно оставлял у нижнего края полосу, где меню не
       нарисовано. Теперь, пока меню открыто, страницы под ним нет: её содержимое скрыто (место занимает — прокрутка не
       сдвигается), фон страницы — цвет меню, так что у любого края виден только серый фон меню; панель не передаёт
       прокрутку странице. Скрываем через .3s — когда панель уже выехала (transition .3s из вёрстки); при закрытии
       страница видна сразу. Проверка: mobile_audit/menu_cover_test.js (полосу моделирует, укорачивая панель). */
    html:has(.top-nav.active),
    html:has(.top-nav.active) body { background-color: #efefef !important; transition: background-color 0s .3s; }
    html:has(.top-nav.active) body > main,
    html:has(.top-nav.active) body > footer,
    html:has(.top-nav.active) header > .bread-crumbs { visibility: hidden; transition: visibility 0s .3s; }
    .top-nav { overscroll-behavior: contain; }
    .mobile-links a,
    .mobile-links > li > button { font-size: clamp(15px, 4.5vw, 18px) !important; letter-spacing: .17em !important; }
    .mobile-links .dropdown-links { padding-left: 22px; }
    .mobile-links .dropdown-links a { font-size: clamp(14px, 4.1vw, 16px) !important; }
    /* подвал на телефоне — так же, как меню (Алина 2026-10-08: «футер — то же самое, что с меню»): заголовки разделов в кегль
       пунктов меню (были 14px — мельче своих же пунктов 16px), пункты раздела — с отступом 22px от края, в кегль подменю */
    .mobile-footer > li > button { font-size: clamp(15px, 4.5vw, 18px) !important; letter-spacing: .17em !important; }
    .mobile-footer .footer-item { padding-left: 22px; }
    .mobile-footer .footer-item a { font-size: clamp(14px, 4.1vw, 16px) !important; letter-spacing: .03em; line-height: 1.45; }
}

/* --- Рамки тоньше 1px (Алина 2026-10-08: «в некоторых блоках рамка кнопки обрезается слева», «подробнее» на «О компании»):
   вёрстка на ≤926 задаёт части рамок 0.33px и 0.67px (пересчёт из макета) — на iPhone такая линия при дробном положении
   теряет одну из сторон. Все найденные на телефоне (поиск по 20 страницам, mobile_audit/hairline_probe.js) — 1px, как на
   десктопе (поля оформления заказа — тоже). */
@media (max-width: 926px) {
    section.about .container > a,
    .about-slider-mobile > a,
    .product-right__btns .leasing-link,
    .product-card__items .counter,
    .product-right__qty-row .counter,
    .products-list .products-list-item,
    .quantity .counter,
    .input-wrapper input,
    .input-wrapper > .input,
    .form-items textarea,
    .portfolio-content__box { border-width: 1px !important; }
}

/* --- «Наши работы» (компонент smdekor_production_works: «Производство мебели», «Дизайн-проект») на телефоне/планшете
   (Алина 2026-10-08: «с вертикальной картинкой нормально, с горизонтальной появляется большой отступ — сделать бы все
   квадратными»): фото шли в своих пропорциях, высота слайдера — по самому высокому (вертикальному), под горизонтальным
   оставалось ~200px пустоты, стрелки съезжали от середины фото. Теперь каждое фото — квадрат с обрезкой по центру,
   до 460px (на планшете иначе вышло бы 646px), по центру слайда. */
@media (max-width: 926px) {
    .our-mobile-wrapper .mobile-slider .swiper-slide a { display: block; }
    .our-mobile-wrapper .mobile-slider .swiper-slide img { display: block; width: min(100%, 460px) !important; height: auto !important; max-height: none !important; aspect-ratio: 1 / 1; object-fit: cover; margin: 0 auto; }
}

/* --- Первый блок «картинка + текст» информационных страниц («О компании», «Отзывы», «Производство мебели») на телефоне
   (Алина 2026-10-08: «картинка оч маленькая»): вёрстка держит её 198×198 — размер кадра макета 320px — и на iPhone не
   увеличивает. Как в «Наших услугах»: квадрат 62% ширины экрана (на 320px те же 198px), до 300px, по центру. С 2026-10-08 так же
   картинка «Видов работ» на «Перетяжке» (была узким прямоугольником 133×198). С 2026-10-12 — «Принципы работы» на «О компании»
   и «Дизайн-проект включает» (Алина: «картинка маленькая»; там и файл был 198×198 — теперь images/home/choice-img.jpg 600×600,
   то же фото, что в «Почему выбирают нас»). Проверка всех таких блоков: mobile_audit/single_img_test.js. */
@media (max-width: 926px) {
    section.about .about-content img,
    section.production .production-content img,
    section.principle .principle-content .mobile-img,
    section.design-project .mobile-img,
    .job-types .job-types__content .mobile-img { display: block; width: min(62vw, 300px) !important; height: min(62vw, 300px) !important; max-width: none !important; max-height: none !important; object-fit: cover; margin-left: auto; margin-right: auto; }
}

/* --- Отбивка «Готово! Ваша заявка принята» (Алина 2026-10-08: «нижний абзац с контактами странно смещён»): контакты —
   строчный блок со строками по левому краю, по центру плашки. Пока строки короткие (десктоп), это ровный столбик посередине;
   на телефоне строка «Telegram, WhatsApp, MAX: +7…» шире плашки — блок растягивался на всю ширину и прилипал к левому краю
   под текстом, выровненным по центру. На телефоне/планшете строки — по центру, как текст над ними. */
@media (max-width: 926px) {
    .form-success .form-success__contacts { display: block !important; text-align: center !important; }
    .form-success .form-success__contacts li { text-align: center !important; }
}

/* --- Картинки в слайдерах — квадратные (Алина 2026-10-08: «все картинки в слайдерах должны быть квадратными, не только
   на этой странице, они разные везде»). Обход 20 страниц (mobile_audit/slider_audit.js): уже квадратные — портфолио,
   соцсети и услуги на главной, «О компании», «Наши работы», «Варианты обивки»; здесь — остальные. «Дизайн-проект»
   (мозаика в шапке) — в design_project/index.php. Карточки товаров в каруселях (рамка и так квадрат) и баннер — не трогаем.
   • галерея товара: полоса 305×197 из вёрстки — фото в ней каждое своего размера; теперь фото — квадрат 62% ширины
     экрана (как фото «Наших услуг» в Figma: 198px в кадре 320; на планшете до 460px) по центру рамки, фото ЦЕЛИКОМ
     (contain): товар не обрезаем; миниатюры — тоже квадратные рамки. Квадрат на всю ширину (305px на iPhone 15)
     уводил «Купить» за первый экран (решение Алины 10-01 «покупка сразу под фото») — поэтому 62%, а сердечко/скидка/
     сравнение — не строкой над фото (54px), а в углах рамки сбоку от квадрата;
   • проект портфолио: фото шли в своих пропорциях (281×211 … 281×500) — квадрат с обрезкой;
   • статьи: фото 297×198 с растяжкой (fill) — квадрат с обрезкой. */
@media (max-width: 926px) {
    /* слайдер — внутри группа галереи (.product-gallery-group — сам swiper), квадрат задаём слайду: ширину ему ставит
       Swiper, высота по aspect-ratio (вместо 197px из шаблона карточки) */
    .product-left__inner { position: relative; }
    .product-left__top { position: absolute; z-index: 2; top: 10px; left: 10px; right: 10px; pointer-events: none; }
    .product-left__top button, .product-left__top a { pointer-events: auto; }
    .product-left__slider-wrapper { -ms-flex-pack: center; justify-content: center; }
    .product-left__slider { -ms-flex: 0 1 min(62vw, 460px) !important; flex: 0 1 min(62vw, 460px) !important; max-width: min(62vw, 460px); min-width: 0; }
    .product-left__slider .swiper-slide { height: auto !important; aspect-ratio: 1 / 1; min-height: 0; overflow: hidden; }
    .product-left__slider .swiper-slide > a { width: 100%; height: 100% !important; }
    .product-left__slider .swiper-slide img,
    .product-left__thumbs .swiper-slide img { width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; object-fit: contain !important; }
    .portfolio-desc__slider-mobile .swiper-slide img { display: block; width: 100% !important; height: auto !important; max-height: none !important; aspect-ratio: 1 / 1; object-fit: cover; }
    .article .about-slider-mobile img { display: block; width: 100% !important; height: auto !important; max-height: none !important; aspect-ratio: 1 / 1; object-fit: cover; }
}

/* --- Листы фильтра и сортировки каталога (Алина 2026-10-08: «очень массивно из-за количества фильтров — как в Figma:
   всплывающее снизу меню с раскрывающимися списками»). Разметку собирает js/catalog-sheets.js из панели фильтра и списка
   сортировки; классы и основа стилей — из вёрстки (.products-popup/.options-popup/.type-popup/.sort-popup в cafe-chairs.css).
   Здесь — то, чего в вёрстке нет или что расходится с Figma:
   • лист прижат к низу экрана (в вёрстке — карточка со скруглением со всех сторон и полями 29/58px), выезжает снизу,
     сверху остаётся полоса страницы под затемнением; затемнение — до самого низа (на iPhone под плавающей панелью Safari);
   • список прокручивается внутри листа, кнопки «сбросить»/«смотреть» всегда внизу (в вёрстке у списка margin-bottom 206px);
   • строки — область нажатия 44px; у группы справа выбранные значения; у значения — счётчик, ✓ у выбранного,
     недоступные (0 товаров) бледные и не нажимаются; рамки 1px (тоньше теряются на iPhone);
   • раскрытая простыня фильтра и список сортировки на странице не показываются (только кнопки) — когда скрипт отработал
     (класс smd-sheets на <html>); без JS панель работает по-старому. */
@media (max-width: 926px) {
    html.smd-sheets .options .categories-bottom,
    html.smd-sheets .sort ul { display: none !important; }
    .options__btn-mobile .smd-sheets-count { margin-left: 6px; margin-right: auto; }
    .smd-sheet { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; min-height: 0; padding: 52px 0 0; overflow: hidden; }
    .smd-sheet::before { bottom: -120px; }
    .smd-sheet.type-popup::before { opacity: 0; } /* под ним уже затемнение листа «параметры» */
    .smd-sheet .products-popup__item {
        height: 100%;
        border-radius: 25px 25px 0 0;
        padding: 16px 16px calc(12px + env(safe-area-inset-bottom));
        overflow: hidden;
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
        -webkit-transition: -webkit-transform .3s ease-out;
        transition: transform .3s ease-out;
    }
    .smd-sheet.active .products-popup__item { -webkit-transform: none; transform: none; }
    .smd-sheet--instant,
    .smd-sheet--instant .products-popup__item { -webkit-transition: none !important; transition: none !important; }
    .smd-sheet .products-popup__start { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
    .smd-sheet .products-popup__top { margin-bottom: 14px; min-height: 40px; }
    .smd-sheet .products-popup__top p { padding: 0 44px; }
    .smd-sheet .products-popup__top button { position: absolute; top: 50%; right: -8px; width: 44px; height: 44px; margin-top: -22px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
    .smd-sheet ul { row-gap: 0; margin-bottom: 16px; }
    .smd-sheet ul[hidden] { display: none; }
    .smd-sheet li > a,
    .smd-sheet li > button {
        display: -webkit-box; display: -ms-flexbox; display: flex;
        -webkit-box-align: center; -ms-flex-align: center; align-items: center;
        gap: 10px;
        width: 100%;
        min-height: 44px;
        padding: 10px 2px;
        border-bottom: 1px solid #d9d9d9;
        color: #31302e;
        font-family: Rubik, sans-serif;
        font-size: 14px;
        font-weight: 300;
        letter-spacing: .14em;
        line-height: 1.3;
        text-align: left;
        text-decoration: none;
    }
    .smd-sheet li > button svg { -ms-flex-negative: 0; flex-shrink: 0; margin-left: auto; }
    .smd-sheet .smd-sheet__name { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; }
    .smd-sheet .smd-sheet__sel { -webkit-box-flex: 0; -ms-flex: 0 1 45%; flex: 0 1 45%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #807d77; font-size: 12px; letter-spacing: .05em; text-align: right; }
    .smd-sheet .smd-sheet__count { -ms-flex-negative: 0; flex-shrink: 0; color: #a09d98; font-size: 12px; letter-spacing: .05em; }
    .smd-sheet a.is-active { font-weight: 400; }
    .smd-sheet .smd-sheet__check { -ms-flex-negative: 0; flex-shrink: 0; }
    .smd-sheet a.is-disabled { opacity: .35; pointer-events: none; }
    .smd-sheet li .color { display: block; -ms-flex: 0 0 24px; flex: 0 0 24px; width: 24px; height: 12px; background-size: cover; background-position: center; border: 1px solid rgba(49, 48, 46, .2); }
    .smd-sheet .products-popup__bottom { -ms-flex-negative: 0; flex-shrink: 0; padding-top: 10px; }
    .smd-sheet .products-popup__bottom a,
    .smd-sheet .products-popup__bottom button { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; min-height: 40px; text-decoration: none; }
    .smd-sheet .products-popup__bottom .reset { border-width: 1px; }
    .smd-sheet.is-loading .products-popup__start { opacity: .45; pointer-events: none; -webkit-transition: opacity .2s; transition: opacity .2s; }
    /* ползунок («высота посадки») в листе */
    .smd-sheet .categories__item--range { display: block; padding: 6px 2px 0; }
    .smd-sheet .categories__item--range > strong { display: none; }
    .smd-sheet .range-filter__inputs { margin-top: 0; column-gap: 20px; }
    .smd-sheet .range-filter__inputs label { font-size: 13px; }
    .smd-sheet .range-filter__inputs input { width: 90px; font-size: 14px; }
    .smd-sheet .bx-ui-slider-track-container { margin-top: 26px; padding: 0 8px; }
    .smd-sheet .bx-ui-slider-handle { width: 22px; height: 22px; margin-top: -11px; }
    .smd-sheet .bx-ui-slider-handle.left { margin-left: -11px; }
    .smd-sheet .bx-ui-slider-handle.right { margin-right: -11px; }
    .smd-sheet .smd-range-apply { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; min-height: 40px; margin-top: 28px; border-radius: 3px; background-color: #31302e; color: #fff; font-size: 14px; letter-spacing: 2.081px; text-decoration: none; }
}

/* --- Карточка товара на телефоне: иерархия текста в блоке покупки (Алина 2026-10-08, iPhone: «критическая проблема со
   шрифтами: название меньше, чем артикул, минимальный заказ очень яркий и т.д.»).
   • артикул — служебная строка: 12px капсом (был 16px капсом — спецификация для компьютера; на телефонах 320–375px название
     16px, и артикул капсом выглядел крупнее названия). Название по-прежнему от макета ×ширина/320 (16–20.8px);
   • «минимальный заказ»/«наличие» — 12px, приглушённый #6d6a65 (контраст 5.4 — читается, но не спорит с ценой и кнопками).
     Правило 10-01 «серые подписи → основной тёмный» с них снято: это то, что Алина 09-08 просила серым 13px;
   • характеристики: заголовки не жирные (Rubik 400 вместо 500), значения — тонкий Circe как остальные описания, 13px, основной
     цвет (были 16px чёрным #000 — крупнее и темнее заголовков). Строки выбора варианта (пилюли, свотчи цвета) не трогаем. */
@media (max-width: 926px) {
    .product-right .product-right__article { font-size: 12px; letter-spacing: .08em; margin: 6px 0 10px; }
    .product-right .product-right__min-order,
    .product-right .product-right__availability { font-family: "Circe W08 Extra Light", sans-serif; font-size: 12px; letter-spacing: .03em; color: #6d6a65; }
    .product-right__acordeon > li > button { font-weight: 400; letter-spacing: .06em; }
    .product-right__acordeon > li:not(.product-axis-item) > div { font-family: "Circe W08 Extra Light", sans-serif; font-size: 13px; line-height: 1.5; letter-spacing: .03em; color: #31302e; }
    /* скидка «20%» у фото — была 10px (из вёрстки), единственный текст мельче 12px на сайте (design_test D3) */
    .product-left__items strong { font-size: 12px; letter-spacing: .12em; }
}

/* --- Описание товара на телефоне (Алина 2026-10-08: «в блоке описание отображается картинка, а само описание не
   отображается»). Вёрстка на ≤926px прячет ПОСЛЕДНИЙ абзац (.desc-content__text p:last-child{display:none}) и обрезает
   абзацы до 4 строк без возможности раскрыть — в макете было несколько абзацев. У нас описание (свойство «Описание»)
   обычно один абзац, он же последний → на телефоне текст скрывался целиком. Показываем полностью; шрифт — как в вёрстке. */
@media (max-width: 926px) {
    .desc .desc-content__text p,
    .desc .desc-content__text p:last-child { display: block; -webkit-line-clamp: unset; overflow: visible; }
}

/* --- Проект портфолио на телефоне (Алина 2026-10-08: «вместо кнопки «все работы» у нас форма заявки должна быть, как в
   десктопной версии»; «в элементе поплыло отображение»).
   • под слайдером — «оставить заявку» (тот же попап с формой, что на компьютере; popup.js), «все работы» из вёрстки убрана;
     размер — как у мобильных кнопок (40px, 14px капсом), на компьютере кнопка 24px/380px без изменений;
   • «хлебные крошки»: длинный последний пункт (название проекта в 2–3 строки) шёл от левого края, первая строка — по центру.
     Центрируем и его строки (общий стиль крошек на телефоне — по центру). Перенос «Санкт-/Петербурге» в заголовке — типограф
     в footer.php (дефис в слове больше не разрывает строку). */
@media (max-width: 926px) {
    .portfolio-desc .all-works { display: none !important; }
    .portfolio-desc .application {
        display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important;
        max-width: 260px; min-height: 40px; margin-top: 24px; padding: 8px 24px; border-radius: 3px;
        font-size: 14px !important; letter-spacing: .15em !important;
    }
    .bread-crumbs li,
    .bread-crumbs a,
    .bread-crumbs span { text-align: center; }
}

/* --- Корзина на телефоне: текст строки товара (Алина 2026-10-08: «в корзине беда со шрифтами»). Название было 12px —
   мельче артикула (13px); артикул — прозрачность .3 (контраст 1.8, почти не виден), «отложить»/«цена за шт.» — .6;
   «34 570 ₽ / шт.» с разрядкой 2.6px не влезало в ширину счётчика и рвалось на две строки. Теперь: название 14px —
   главное в строке; артикул, «отложить», цена за шт. — 12px приглушённым #6d6a65 (контраст 5.4, как служебные строки
   в карточке товара), цена за шт. — одной строкой. Компьютер не меняется. */
@media (max-width: 926px) {
    .products-list-item .desc > strong { font-size: 14px; letter-spacing: .03em; line-height: 1.3; }
    .products-list-item .desc > p,
    .products-list-item .basket-item-add-delayed { font-size: 12px; letter-spacing: .03em; color: #6d6a65; opacity: 1; }
    .products-list-item .quantity .basket-item-measure { font-size: 12px; letter-spacing: .05em; color: #6d6a65; opacity: 1; white-space: nowrap; }
    /* цена внутри «.quantity span» вёрстки — display:block (отдельной строкой) и свой кегль 13px: в одну строку и одним размером */
    .products-list-item .quantity .basket-item-measure > span { display: inline; margin: 0; font-size: inherit; letter-spacing: inherit; }
}

/* --- Портфолио, список (/portfolio/) на телефоне и планшете — плитки квадратные, как в макете (Алина 2026-10-12: «плитки
   не квадратные»). В вёрстке (кадр Figma 320) плитка 209×210, но на экранах шире растёт только ширина — на iPhone 393px
   280×214. К тому же колонка сетки 1fr не сжималась уже содержимого (ряд миниатюр с отступами 18px) — плитка вылезала из
   контейнера вправо: слева 63px, справа 12–50px. Теперь колонка minmax(0, 1fr), поля — только вёрсточные 54px; фото,
   миниатюры, логотип и отступы плитки — в долях её ширины (cqw от кадра: 209px, без рамки 207), поэтому плитка квадратная на
   любой ширине; тексты — прежние (растут с экраном по правилу 10-07). Проверка: mobile_audit/portfolio_tiles_test.js. */
@media (max-width: 926px) {
    .portfolio > .container { padding-left: 0; padding-right: 0; }
    .portfolio-content { grid-template-columns: minmax(0, 1fr); }
    .portfolio-content__box { container-type: inline-size; }
    .portfolio-content__start { -webkit-column-gap: 2.415cqw; -moz-column-gap: 2.415cqw; column-gap: 2.415cqw; margin-bottom: 7.246cqw; }
    .portfolio-content__start > img { -webkit-box-flex: 0; -ms-flex: none; flex: none; width: 39.614cqw; height: 61.353cqw; max-width: none; max-height: none; -o-object-fit: cover; object-fit: cover; }
    .portfolio-content__desc { margin-top: 9.662cqw; }
    .portfolio-content__desc img { max-width: 11.111cqw; max-height: 12.077cqw; }
    /* слот под логотип (шаблон списка держит его фикс. 25px — название на одной высоте у всех плиток, 09-07) — той же высоты,
       что логотип: иначе шире 320px вертикальный логотип вылезал из слота на 9–13px и наезжал на название (Алина 2026-10-15) */
    .portfolio-content__box .portfolio-content__desc .portfolio-content__logo { height: 12.077cqw; }
    .portfolio-content__end { padding: 0 8.696cqw 5.314cqw; }
    .portfolio-content__images { margin-top: 4.348cqw; -webkit-column-gap: 0; -moz-column-gap: 0; column-gap: 0; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
    .portfolio-content__images img { width: 21.739cqw; height: 21.739cqw; max-width: none; max-height: none; -o-object-fit: cover; object-fit: cover; }
}
/* экраны ~320px: название в 3 строки (узкая колонка текста) делало текст выше фото — плитка выше своей ширины на 13px;
   отступ над логотипом 20px → 8px */
@media (max-width: 359px) {
    .portfolio-content__desc { margin-top: 3.865cqw; }
}

/* --- Портфолио, страница проекта: плашки «дата сдачи / адрес / перечень работ» на телефоне (Алина 2026-10-12: «заголовки и
   текст слишком прилипают к левому краю, у перечня работ отступы не такие, как у остальных»): поля 14px 12px вместо 16px 7px
   из вёрстки; у «перечня» текст под заголовком без своего отступа 8px — как в остальных плашках; плашки одного ряда — одной
   высоты (было по содержимому: 69 и 77px рядом). */
@media (max-width: 926px) {
    .portfolio-desc__top-mobile { -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; }
    .portfolio-desc__top-mobile .portfolio-desc__card { padding: 14px 12px; }
    .portfolio-desc__top-mobile .portfolio-desc__card--works .portfolio-desc__works-empty,
    .portfolio-desc__top-mobile .portfolio-desc__card--works .portfolio-desc__works-list { margin-top: 0; }
}

/* --- Галочка согласия во всех формах: своя подсказка вместо системного пузыря (js/contacts.js) — iOS обрезал пузырь
   «Установите флажок здесь, если хотите продолжить» до «Установите флажок зд…» (Алина 2026-10-12). С 2026-10-15 — в виде
   системного пузыря iOS, как подсказки про номер и почту (Алина: «цвет вырвиглазный, большой отступ; лучше в стиле всплывашек
   „ой, кажется, вы забыли цифру“»): белый поповер со стрелкой на галочку, системный шрифт Callout 16px, поля 17/9 — как
   в WebKit (ValidationBubbleIOS); лежит поверх формы и ничего не сдвигает. Место и стрелку считает contacts.js. Все ширины. */
.smd-consent-error {
    position: absolute; z-index: 60; left: 0; top: 0; margin: 0;
    -webkit-box-sizing: border-box; box-sizing: border-box; width: -webkit-max-content; width: max-content;
    max-width: 334px; max-width: min(334px, calc(100vw - 16px));
    padding: 9px 17px; border-radius: 13px; background: #fff; color: #000;
    font: 400 16px/1.3 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    letter-spacing: -.02em; text-align: left; text-transform: none; white-space: normal;
    -webkit-filter: drop-shadow(0 2px 14px rgba(0, 0, 0, .2)); filter: drop-shadow(0 2px 14px rgba(0, 0, 0, .2));
    -webkit-animation: smd-consent-in .15s ease-out; animation: smd-consent-in .15s ease-out;
}
.smd-consent-error__arrow {
    position: absolute; top: -8px; left: calc(var(--smd-arrow-x, 26px) - 9px); width: 0; height: 0;
    border-left: 9px solid transparent; border-right: 9px solid transparent; border-bottom: 9px solid #fff;
}
/* --- Галочка в окне заявки портфолио (квадрат нарисован вёрсткой, portfolio-page.css): вместо картинки 1x — векторная, по центру
   квадрата. Картинка 12×11 центровалась от внутренней области 10px: залезала на левую рамку, торчала из-под нижней и на экране 3x
   была размытой (Алина 2026-10-18: «галочка в поле стоит криво — это может быть проблема сафари?» — не сафари, вёрстка).
   Появление (opacity) — как было. Проверка: mobile_audit/tick_test.js. */
.popup .checkbox input::before {
    content: '' !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
    -webkit-transform: none !important; transform: none !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 5.3 4.2 7.5 8.2 2.6' fill='none' stroke='%2331302e' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
}
@media (max-width: 926px) {
    .popup .checkbox input::before { background-size: 100% 100%; }
}
@-webkit-keyframes smd-consent-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes smd-consent-in { from { opacity: 0; } to { opacity: 1; } }
/* подпись согласия в окне заявки портфолио на телефоне была 10px — как в остальных формах, 12px (правило «не мельче 12px»);
   ссылка в ней — того же размера и без разрядки, как в остальных формах (в вёрстке 8px в разрядку — Алина 2026-10-15) */
@media (max-width: 926px) {
    .popup .checkbox p { font-size: 12px !important; line-height: 1.35; }
    .popup .checkbox p a { font-size: inherit !important; letter-spacing: inherit !important; }
}

/* --- Каталог на телефоне: рамка фото — ровно по фото (Алина 2026-10-12: «горизонтальные и квадратные картинки выравниваются
   по низу, сверху остаётся свободное место»). Рамка была квадратом (cafe-chairs.css), фото ≤74% её ширины (по бокам стрелки
   листания) прижато к низу (10-08 — чтобы не было пустоты между фото и названием), и у горизонтальных фото (столешницы,
   барные стойки) над ними пустовало до 2/3 рамки. В списке на телефоне карточки идут одной колонкой — их высотам незачем
   совпадать: пропорцию рамки шаблон smdekor_catalog_grid задаёт по самому фото (--smd-photo-ar = max(r / 0.74, 1), сразу,
   до загрузки картинки — без «прыжков» списка), вертикальное фото по-прежнему не выше квадрата (100cqw — ширина рамки);
   другое фото из стрелок карточки выше — рамка подрастает под него. Планшет (по 2 в ряд) — как был, там карточки одной высоты.
   2026-10-15 (Алина: «столешницы прямо сплющило — условно фиксированная высота блока, фото внутри выравнивать»): шаблоны
   ограничивают пропорцию сверху 1/0.74 — рамка не ниже, чем у квадратного фото; широкое фото стоит в ней по центру
   (галерея — flex, align-items:center), с равными отступами сверху и снизу. Квадратные и вертикальные — как были.
   2026-10-15 — так же в каруселях на телефоне (Алина: «блок хиты и новинки — у карточек с горизонтальными фото вверху
   остаётся пустое место»; главная, «товары серии / рекомендуем / похожие / просмотренные», 404 — шаблон smdekor_cards):
   на телефоне в карусели видна одна карточка, autoHeight Swiper подстраивает высоту ленты под неё. !important — у карусели
   на карточке товара квадрат и a{height:100%} задаёт встроенный <style> шаблона smdekor_element (идёт после этого файла).
   Проверка: mobile_audit/catalog_photo_test.js, carousel_photo_test.js. */
@media (max-width: 599px) {
    .product-cards > .product-card .product-card__gallery { aspect-ratio: var(--smd-photo-ar, auto); container-type: inline-size; }
    .product-cards > .product-card .product-card__gallery a { height: auto !important; }
    .product-cards > .product-card .product-card__top img { max-height: 100cqw !important; }
    .swiper .product-card .product-card__gallery { aspect-ratio: var(--smd-photo-ar, 1 / 1) !important; container-type: inline-size; }
    .swiper .product-card .product-card__gallery > a { height: auto !important; }
    .swiper .product-card .product-card__top img { max-height: 100cqw !important; }
    /* autoHeight пишет ленте высоту целыми px (offsetHeight), а высота карточки дробная (рамка фото по пропорции) — лента
       (overflow:clip у .swiper) срезала 0.1–0.5px нижней границы карточки: на iPhone 1 точку из 3, на Android половину линии.
       1px снизу у самой карусели — граница целиком. Селекторы сильнее .swiper{padding:0} из CSS Swiper. */
    section.novelties .novelties-slider-mobile,
    .series-product-mobile-wrapper > .series-product-slider-mobile { padding-bottom: 1px; }
}