/* Блок «Размеры и схема укладки» на карточке товара (inc/strom-laying-schemes.php). Грузится ТОЛЬКО на карточке товара с непустой метой _strom_laying_gallery — тем же гейтом, что печатает и сам блок, и скролл-триггер над блоком гарантии. Токены заданы локально: палитра .sh-home живёт в assets/css/home.css, а home.css на карточке товара не подключается (проверено по списку страницы). По той же причине здесь нет var(--mono): @font-face Plex Mono лежит в home.css, на этой странице моношрифт был бы системным — капс-строку делаем шрифтом страницы. */ .strom-laying { margin: 40px 0 10px; } /* * -------------------------------------------------------------------------------------- * Скролл-триггер «Варианты укладки» (печатается перед блоком «Гарантия высокого качества») * -------------------------------------------------------------------------------------- */ /* * Плавность — CSS, без своего JS. Правило глобальное по , но файл грузится только на * карточке товара со схемами, а других якорных ссылок на ней нет (проверено: onepage-link * и wd-menu-anchor на карточке отсутствуют, единственный «плавный» скролл темы — * onePageMenu.js, который на этой странице не задействован). prefers-reduced-motion * уважаем: при «меньше движения» прыжок к якорю мгновенный. */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* * Отступ якоря от верха: шапка сайта липкая (.whb-sticky-real .whb-scroll-stick), её * прилипающая строка — 60px (замерено), плюс 30px воздуха, чтобы заголовок блока не * прижимался к кромке. При скролле ВНИЗ шапка вообще уезжает (whb-hide-on-scroll), так что * 90px — запас на случай, когда пользователь тут же качнул страницу вверх. */ #strom-laying { scroll-margin-top: 90px; } /* Ссылка-триггер «Варианты укладки» с 17.08.2026 печатается общей якорной строкой карточки (.strom-pd-jump, inc/strom-product-card.php + assets/css/product-card.css): триггеров стало два и они стоят одной строкой. Правила .strom-laying-trigger удалены вместе с разметкой. */ /* * Кромка: .strom-laying — прямой сиблинг контейнера ee5b9bd, поэтому его левый край * УЖЕ совпадает с рамкой страницы на любой ширине (замерено на 1280/1440/1920 — совпадает * с .elementor-element-ee5b9bd побитово), а карусель Woodmart сама выводит визуальную * кромку первой картинки на кромку контейнера (у .wd-carousel margin −10px, у * .wd-carousel-item padding 10px). * * Task 8 (решение Романа 2026-08-10): выравнивание по ОСНОВНОЙ сетке страницы — кромке * .e-con-inner секций (замерено: 35px при 1440, 275px при 1920; так же стоят крошки, * галерея+саммари, «Описание|Характеристики» и карточки «Недавно просмотренных»). * Прежнее выравнивание по колонке описания (те же 35/275 ПЛЮС собственный padding-left * карточки .elementor-element-1ee1ec8 = 20px, task-1-report.md) отменено: наш блок стоял * на 20px правее подборки под ним и читался как съехавший. */ .strom-laying__inner { margin: 0; } .strom-laying .wd-gallery-item img { display: block; width: 100%; height: auto; } /* * Отступ заголовка «Размеры и схема укладки» — как у заголовка «Недавно просмотренные» * (родная подборка wd_products, template 1055): её h4.wd-el-title даёт margin-bottom:20px, * который у карусели схлопывается с margin-top:-15px родного .wd-carousel-inner * (lib-swiper.min.css) — итоговый зазор заголовок→контент 5px. У нас та же цепочка * схлопывания (title-wrapper > liner-continer > h4, дальше .wd-carousel-inner с тем же * -15px), поэтому те же margin-top:0/margin-bottom:20px на .title-wrapper дают * идентичный результирующий зазор (замерено puppeteer — task-7-report.md, Fix round 1). */ .strom-laying .title-wrapper { margin-top: 0; margin-bottom: 20px; } /* * Стрелки — «наши» круги, в строке заголовка справа (Task 8). * Позицию together даёт класс .wd-pos-together в разметке (strom-laying-schemes.php); * тема ставит блок стрелок абсолютом НАД каруселью: * top: calc(0% - var(--wd-arrow-offset-v) - var(--wd-arrow-height)) * Система отсчёта — .wd-carousel-inner (position:relative), у неё же margin-top:-15px от * темы. Поэтому offset-v подобран ЗАМЕРОМ (puppeteer): центр стрелок совпадает с центром * строки h4 «Размеры и схема укладки». Внешний вид — эталон .sh-offer-nav главной * (круг, бордер 1.5px, зелёная заливка на ховере), но через переменные темы, чтобы не * переопределять её правила. */ .strom-laying .wd-nav-arrows { --wd-arrow-size: 44px; --wd-arrow-icon-size: 15px; --wd-arrow-gap: 10px; --wd-arrow-offset-h: 0px; --wd-arrow-offset-v: -2px; --wd-arrow-radius: 50%; --wd-arrow-color: #232624; --wd-arrow-bg: #fff; --wd-arrow-brd: 1.5px solid; --wd-arrow-brd-color: rgba(35, 38, 36, .16); --wd-arrow-color-hover: #fff; --wd-arrow-bg-hover: #0e7e50; --wd-arrow-brd-color-hover: #0e7e50; --wd-arrow-color-dis: rgba(35, 38, 36, .3); --wd-arrow-bg-dis: #fff; --wd-arrow-brd-color-dis: rgba(35, 38, 36, .1); } /* Заголовок не должен подлезать под стрелки на узких десктопах. Только там, где стрелки есть: ниже 768.98px их прячет .wd-hide-sm (Task 7), и лишние 110px рвали «Размеры и схема укладки» на две строки при 375 (замерено). Медиазапрос — тот же, что у темы. */ @media (min-width: 768.99px) { .strom-laying .title-wrapper .woodmart-title-container { padding-inline-end: 110px; } } /* Скроллбар карусели — тонкая прогресс-полоса (переменные lib-swiper-scrollbar; при «все схемы влезли» тема сама прячет: .wd-nav-scroll.wd-lock). */ .strom-laying .wd-nav-scroll { --wd-nscroll-height: 3px; --wd-nscroll-bg: rgba(0, 0, 0, .08); --wd-nscroll-drag-bg: #333; margin-top: 16px; } @media (max-width: 767px) { .strom-laying { margin: 25px 0 5px; } }