/* ============================================================ Секции: 0. Шрифт Manrope (локальный, вместо Google Fonts) 1. Шапка и меню 2. Каталог: листинг и фильтр 3. Карточка товара и торговые предложения 4. Конструктор стола [data-app-box] 5. Корзина и оформление заказа 6. Прочие блоки и виджеты 7. Cookie-баннер 8. Медиазапросы (десктоп -> мобильные) 9. Новый попап при добавлении в корзину 10. Раздел «Авторы» 11. Таблицы в тексте статьи 12. Страница 3D-визуализации /3d-visual/ 13. Баннер 3D-визуализации на главной ============================================================ *//* ==== 0. Шрифт Manrope ==== Вариативные woff2-сабсеты (веса 200-800 одним файлом), перенесены с Google Fonts 24.07.2026: свой домен быстрее и не зависит от Google. Кириллица и латиница грузятся по preload из header.php. */@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url('/local/templates/main/fonts/Manrope-Variable-cyrillic.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url('/local/templates/main/fonts/Manrope-Variable-cyrillic-ext.woff2') format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;}@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url('/local/templates/main/fonts/Manrope-Variable-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}/* ============================================================ 1. Шапка и меню ============================================================ */.main-header{z-index:10000;}.sticky .main-header__ctrl--search path{stroke:#141414;}.main-header--sub .main-header__ctrl--search path{stroke:#141414;}.main-header .main-header__ctrl>div,.main-header__ctrl>div strong{color:#fff;}.main-header.sticky .main-header__ctrl>div{color:rgba(20, 20, 20, .6);}.main-header.sticky .main-header__ctrl>div strong{color:#141414;}.main-header--sub .main-header__ctrl>div strong{color:#141414;}.main-header--sub .main-header__ctrl>div{color:rgba(20, 20, 20, .6);}.menu-block{z-index:10001;}.menu-block__logo img{aspect-ratio:98/38;display:inline-block;height:38px;}/* Высота шапки не должна зависеть от состояния (18078) На внутренних страницах место под шапку держит padding-top: var(--hh) у .wrapper--hh, а саму --hh JS меряет по текущему состоянию шапки. Логотип 1015x396 задан только шириной, высота считается от неё: обычная шапка — 120px (.main-header--sub), липкая — 134/130/120/116px в зависимости от брейкпоинта. Из-за этого высота шапки в двух состояниях отличается, и пересчёт --hh сдвигал страницу. Приравниваем ширину логотипа в липком состоянии к обычной — тогда высота одинаковая на всех брейкпоинтах и пересчёт безвреден. Главной это не касается: у неё .wrapper без --hh, и там уменьшение логотипа в липкой шапке задумано. */.main-header--sub.sticky .main-header__logo img{width:120px;}/* ============================================================ 2. Каталог: листинг и фильтр ============================================================ */.dir-sect__head{position:relative;}.dir-sect__filter-btn,.dir-sect__sort-btn{z-index:99;}#catalog-section-ajax{position:relative;}.prods-sect--bdb .prods-sect__container{padding-bottom:clamp(1.5625rem, calc(.446rem + 2.976vw - 15px), 3.125rem);}.prods-sect__prod-img a{width:100%;display:block;}.prods-sect__prod-img a img{width:100%;}.prods-sect__prod-img .prods-sect__prod-btns a{display:flex;}.prods-sect__prod-img a:has(>img)::before{content:"";display:block;padding-top:63%;}.prods-sect__prod-img>a>img{display:inline-block;position:absolute;top:0;left:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;border-radius:var(--bdrs);}.prods-sect__prod-size.hidden{display:none !important;}.prods-sect__prod-color{height:24px;}.prods-sect__prod-color span{background-position:center;}.prods-sect__prod-color[title="Другой цвет"]{display:none;}.prods-sect__prod-colors .prods-sect__prod-edit{order:1;}.prods-sect__prod-radio.selected span{background-color:#f7f6f3;border:1px solid #8c7a63;color:#000;}.prods-sect__prod-radio_icon span small{width:403px;border-radius:8px;font-weight:400;text-align:center;color:#141414;}.prods-sect__prod-add a,.prods-sect__prod-add button{background-color:#F7F6F3;}.prods-sect__prod:not(.prods-sect__prod--screen) div[id*="_sku_tree"]{display:flex;flex-direction:column;min-height:62px;}#catalog-section-ajax .prods-sect__prod:not(.prods-sect__prod--screen) div[id*="_sku_tree"]{min-height:72px;}/* Плитки в слайдерах (главная, «с этим товаром покупают») — это .swiper-slide. Размеры там не выводятся, и блок выбора впустую резервировал высоту под селектор, отрывая кнопку от цены. Высота остаётся минимальной: если контент всё же появится, блок растянется по нему. */.prods-sect__prod.swiper-slide:not(.prods-sect__prod--screen) div[id*="_sku_tree"]{min-height:24px;}/* Там же остаётся пустой контейнер под выбор размера: размеры в слайдерах не выводятся, а место он занимает. Убираем его из потока. */.prods-sect__prod.swiper-slide .product-item-info-container#SIZE,.prods-sect__prod.swiper-slide .product-item-info-container#SIZE_TABLE{display:none;}/* Отступ под образцами цвета (15px по умолчанию) в плитке слайдера великоват: ниже сразу кнопка, а не следующий блок свойств. */.prods-sect__prod.swiper-slide .prods-sect__prod-colors{margin-bottom:8px;}/* Большая плитка листинга (--screen) */.prods-sect__prod--screen div[data-catalog-item-init]{height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;position:relative;}.prods-sect__prod--screen .prods-sect__prod-img::before{padding-top:66%;}.prods-sect__prod--screen .prods-sect__prod-add a{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;gap:10px;height:58px;padding:5px 30px;text-align:center;text-transform:uppercase;border:none;border-radius:var(--bdrs);cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:#fff;font-size:14px;letter-spacing:.03em;background-color:#141414;overflow:hidden;position:relative;z-index:1;-webkit-transition:all .4s ease;transition:all .4s ease;}.prods-sect__prod--screen .prods-sect__prod-add a img{display:inline-block;opacity:1;}.prods-sect__prod--screen .prods-sect__prod-color{height:35px;}/* Фильтр каталога */#clear_filter{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;gap:10px;width:58px;height:58px;padding:0 var(--dp);background-color:#f2f2f2;border:0px transparent solid;border-radius:var(--bdrs);line-height:1.1;color:#141414;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;letter-spacing:.02em;-webkit-transition:all .35s ease-out;-o-transition:all .35s ease-out;transition:all .35s ease-out;}#clear_filter svg{width:24px;height:24px;}#clear_filter span{display:none;}input.def-btn.def-btn--black.dir-sect__filter-submit{background-color:#141414;background-image:linear-gradient(115deg, #8c7a63 0, #8c7a63 50%, transparent 52%);background-repeat:no-repeat;background-size:220% 100%;background-position:100% 0;-webkit-transition:background-position .4s cubic-bezier(.3, 1, .8, 1),color .4s ease-out;transition:background-position .4s cubic-bezier(.3, 1, .8, 1),color .4s ease-out;}input.def-btn.def-btn--black.dir-sect__filter-submit:hover,input.def-btn.def-btn--black.dir-sect__filter-submit:active{background-position:0 0;color:#fff;}/* Баннер раздела (18078) Высота баннера прыгала при переходе между разделами: она складывалась из длины заголовка и описания раздела, а своей высоты у блока не было. Задаём контейнеру минимальную высоту и прижимаем ряд иконок к низу — разницу добирает auto-отступ. Значения min-height подобраны под самый длинный заголовок с описанием; станут тексты длиннее — увеличить вручную (здесь и в медиазапросах раздела 8). */.furn-sect__container{min-height:640px;}.furn-sect__items{/* padding вместо margin: отступ в 100px сохраняется и тогда, когда auto-отступ схлопнулся из-за длинного описания */margin-top:auto;padding-top:100px;}/* 18078: на мобильной ряд разделов — горизонтальный слайдер, и в Safari на iPhone под ним видна полоса прокрутки. В app.min.css её прячут через ::-webkit-scrollbar { height: 0 }, но iOS обнуление размера игнорирует — системный overlay-скроллбар убирает только display: none. Дублируем стандартным scrollbar-width (Safari 18.4+, Firefox) и -ms-overflow-style. */.furn-sect__items{scrollbar-width:none;-ms-overflow-style:none;}.furn-sect__items::-webkit-scrollbar{display:none;width:0;height:0;-webkit-appearance:none;background:transparent;}/* 18078: активный подраздел выше остальных плиток. Неактивные — .furn-sect__item с aspect-ratio: 1/1, их высота равна ширине. Активный — .furn-sect__all, у которого в app.min.css задан min-height (240px, а в медиазапросах 220/200/110px). Правило .furn-sect__all_new { min-height: auto } это гасит, но только шире 1360px: ниже медиазапросы идут по файлу позже при той же специфичности и снова навязывают min-height. Снимаем его на всех разрешениях и задаём активному блоку ту же геометрию, что и плиткам, — тогда высота совпадает и при длинном названии раздела, которое иначе растянуло бы весь ряд. */.furn-sect__all_new{min-height:0;align-self:start;aspect-ratio:1/1;}/* ============================================================ 3. Карточка товара и торговые предложения ============================================================ */.card-sect__slider .swiper-slide{background-color:#fff;}.product-item-detail-info-container{margin-bottom:0px;}.product-item-info-container#SIZE,.product-item-info-container#SIZE_TABLE{order:1;}.bx-touch .product-item-info-container.product-item-hidden.hidden{display:none;}.card-sect__data div[id*="_skudiv"]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:25px;}.card-sect__data div[id*="_skudiv"]>hr{width:100%;height:1px;margin:0;border:none;background-color:#e6e6e6;}.card-sect__type-items{margin:0 0 0 0px;}.card-sect__type-check.selected div em{border:1px solid #d3d3d3;}.card-sect__type-check.selected div em::after{opacity:1;}.card-sect__type-check.selected div em::before{background-image:url(/local/templates/main/img/icons/list-check-3.svg);}.card-sect__type-check.selected div em>span{width:calc(100% - 24px);height:calc(100% - 24px);border-radius:6px;}.card-sect__type-check>div>em[data-text="Другой цвет"]::before{z-index:4;}.card-sect__type-check>div>em:after{left:50%;top:50%;transform:translate(-50%, -50%);}.card-sect__range>span[data-entity="range-label-visual"]{width:var(--fx, 0%);max-width:100%;transition:width 0.3s ease;}.card-sect__range>span[data-entity="range-label-visual"]:empty{display:none;}[data-app-total-fixed] .card-sect__range{font-size:0px;height:10px;padding:0;margin:0;border-radius:4px;}.card-sect__total-btns{grid-row-gap:0px;}.card-sect__total-btns .def-btn--white.active{background-color:#8c7a63;color:#ffffff;}#FABRIC_CATEGORY .prods-sect__prod-radio.product-item-scu-item-text-container.notallowed[title*="Категория"]{display:block !important;opacity:0.5;cursor:not-allowed;position:relative;pointer-events:none;}.card-sect__title h1{font-size:14px;text-transform:none;line-height:18px;}/* ============================================================ 4. Конструктор стола [data-app-box] ============================================================ */#construktor>hr{order:1;}[data-app-box]>div ul[data-app-fieldset~=color] li{aspect-ratio:1/1;height:42px;border-radius:50%;padding:0;border-color:#000;border-width:0;-webkit-transition:all .2s ease;transition:all .2s ease;position:relative;max-width:48px;}[data-app-box]>div>div{display:grid;grid-template-columns:subgrid;grid-column:span 2;gap:inherit;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:100%;}[data-app-box]>div>div p{color:rgba(20, 20, 20, .7);text-align:left;font-size:14px;font-weight:400;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;gap:3px;}[data-app-box]>div>div p svg{aspect-ratio:1/1;height:14px;-webkit-box-flex:0;-ms-flex:none;flex:none;}[data-app-box]>div ul{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:8px;padding:0;margin:0;-webkit-box-sizing:border-box;box-sizing:border-box;border:none;height:100%;overflow:unset;}[data-app-box]>div:last-child ul{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;padding-top:3px;}[data-app-box]>div ul li{cursor:pointer;color:#000;font-size:14px;font-weight:400;line-height:normal;letter-spacing:0;text-align:center;padding:0 6px;border:1px solid transparent;border-radius:4px;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;gap:7px;-webkit-box-flex:1;-ms-flex:1;flex:1;background:#fbf9f8;position:relative;height:100%;min-height:48px;}[data-app-box]>div ul:not([data-app-fieldset~=color]) li{display:flex !important;}[data-app-box]>div ul:not([data-app-fieldset~=color]) li.notallowed{cursor:not-allowed;color:rgba(0, 0, 0, .6);background-color:#fbfaf8;}[data-app-box]>div ul li svg{height:14px;aspect-ratio:1/1;}[data-app-box]>div ul a{color:#000;font-size:14px;font-weight:400;line-height:normal;letter-spacing:0;text-align:center;padding:0 6px;border-radius:4px;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;-webkit-box-flex:1;-ms-flex:1;flex:1;background-color:#fff;border:1px dashed rgba(140, 122, 99, .4);height:100%;min-height:48px;}[data-app-box]>div ul li:hover{background:#f7f6f3;border:1px solid rgba(140, 122, 99, .3);}[data-app-box]>div ul li:has(svg:hover):before{opacity:1;visibility:visible;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}[data-app-box]>div ul[data-app-fieldset~=color] li:hover::after,[data-app-box]>div ul[data-app-fieldset~=color] li:hover::before{opacity:1;visibility:visible;-webkit-transform:translateX(-50%) translateY(0);-ms-transform:translateX(-50%) translateY(0);transform:translateX(-50%) translateY(0);}[data-app-box]>div ul li.selected{background:#f7f6f3;border:1px solid #8c7a63;}[data-app-box]>div ul[data-app-fieldset~=color] li.selected{-webkit-transform:scale(1.14);-ms-transform:scale(1.14);transform:scale(1.14);-webkit-box-shadow:inset 0 0 0 4px #fff,0 0 0 .3px #000;box-shadow:inset 0 0 0 4px #fff,0 0 0 .3px #000;}[data-app-box]>div ul li[data-text]::before{content:attr(data-text);position:absolute;text-align:left;bottom:calc(100% + 10px);right:0;-webkit-transform:translateY(5px);-ms-transform:translateY(5px);transform:translateY(5px);background:#fff;color:#000;padding:8px;border-radius:8px;font-size:12px;-webkit-box-shadow:0 10px 25px 0 rgba(43, 52, 74, .12);box-shadow:0 10px 25px 0 rgba(43, 52, 74, .12);opacity:0;visibility:hidden;-webkit-transition:all .3s ease;transition:all .3s ease;pointer-events:none;z-index:10;width:100%;}[data-app-box]>div ul[data-app-fieldset~=color] li::before{bottom:calc(100% + 8px);left:50%;right:unset;-webkit-transform:translateX(-50%) translateY(5px);-ms-transform:translateX(-50%) translateY(5px);transform:translateX(-50%) translateY(5px);background:#8c7a63;color:#fff;padding:8px;border-radius:8px;font-size:12px;white-space:nowrap;opacity:0;visibility:hidden;-webkit-transition:all .3s ease;transition:all .3s ease;pointer-events:none;z-index:10;width:auto;}[data-app-box]>div ul[data-app-fieldset~=color] li::after{content:"";position:absolute;bottom:calc(100% - 6px);left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);opacity:0;visibility:hidden;-webkit-transition:all .2s ease;transition:all .2s ease;pointer-events:none;z-index:10;height:16px;width:18px;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg width='16' height='6' viewBox='0 0 16 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M16 0H0L6.8 5.1C7.51111 5.63333 8.48889 5.63333 9.2 5.1L16 0Z' fill='%238C7A63' fill-opacity='0.95'/%3e%3c/svg%3e");background-repeat:no-repeat;background-size:contain;background-color:transparent;}/* ============================================================ 5. Корзина и оформление заказа ============================================================ */div[data-entity="basket-item-property"]{display:none;}.cart-sect__block .cart-sect__block-inner{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:25px;}.order-sect__content{position:relative;}.order-sect__form-inputs{grid-template-columns:repeat(3, 1fr);padding:0 !important;}.order-sect__form.hidden{display:none;}#bx-soa-properties .bx-soa-section-content .row{display:flex;flex-direction:column;gap:35px;margin-right:0px;margin-left:0px;}#bx-soa-delivery{order:3;}.bx-soa-location-input-container .bx-sls .dropdown-icon{display:none;}.bx-soa-location-input-container .bx-sls .dropdown-fade2white{display:none;}.bx-soa-location-input-container .bx-sls .bx-ui-sls-container .bx-ui-sls-route{display:none;}.bx-soa-location-input-container .dropdown-block.bx-ui-sls-input-block{height:45px;}.bx-soa-location-input-container .bx-ui-sls-container{height:45px;}.bx-soa-location-input-container .bx-ui-sls-container .bx-ui-sls-fake{height:45px !important;}.bx-soa-location-input-container .bx-ui-sls-clear{display:none !important;}.bx-soa-location-input-container .bx-soa-custom-label{font-family:Lato,Arial,sans-serif !important;font-weight:400 !important;color:#141414 !important;font-size:16px !important;}.bx-soa-location-input-container .bx-soa-custom-label .bx-authform-starrequired{display:none;}.bx-soa-cart-total.bx-soa-cart-total-bottom{opacity:1 !important;}.bx-soa-cart-total-ghost{padding-top:0px !important;}.bx-soa-cart-total{position:sticky !important;top:0px !important;}.order-sect__aside{position:sticky;top:0px;}.order-sect__delivery-meta .ipol-dpd-pickup-container{display:none;}.order-dialog.active{z-index:100001;}.order-dialog__wrapper div[id*='info_']{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;overflow-y:auto;gap:var(--gap);-webkit-box-flex:1;-ms-flex:1 0 0px;flex:1 0 0;}/* Старые эксперименты с раскладкой оформления заказа — оставлены на память #bx-soa-properties { margin-top: -80px !important; } #bx-soa-region { position: absolute; width: 100%; top: 330px; } .order-sect__form--comment { margin-top: 150px; } *//* ============================================================ 6. Прочие блоки и виджеты ============================================================ *//* Контакты в футере: в app.min.css opacity .5 — контраст белого на #4a5148 всего ~3.4:1 (порог WCAG AA 4.5:1). С .75 выходит ~6:1. Правило уже восстанавливали — при реорганизации файла не удалять. */.main-footer .main-footer__info{opacity:.75;}.stand-dialog,.stand-dialog__bg{z-index:10000;}#pa-addcard .stand-dialog__btn-close{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:10px;padding:5px 32px 4px;line-height:normal;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;border:1px solid #141414;color:#fff;background-color:#141414;text-transform:uppercase;font-size:14px;letter-spacing:.03em;height:57px;border-radius:var(--bdrs);position:relative;z-index:1;overflow:hidden;-webkit-transition:color .4s ease-out;transition:color .4s ease-out;}.fancybox__container{z-index:10000;}.popup-window-overlay{width:100% !important;z-index:99999 !important;}.b24-widget-button-wrapper.b24-widget-button-position-bottom-right{transform:translate(18px, -45px) !important;}iframe[id*='myReviews__block-widget']{margin-top:-120px !important;width:calc(100% + 45px) !important;}.revs-sect__titles_custom{display:flex;}.furn-sect__item-icon svg path{stroke:currentColor;}.proj-sect__task-content div{color:#141414;font-size:1em;font-weight:700;line-height:1.625em;text-transform:uppercase;}.help-sect .anim__down.active div,.help-sect #blogCtaContent div div,.proj-sect__footer-content div div{font-size:max(1.375rem, min(calc(.661rem + 1.905vw), 2.375rem));letter-spacing:.03em;line-height:max(2.1875rem, min(calc(.714rem + 3.929vw), 4.25rem));text-transform:uppercase;color:#141414;font-weight:600;margin:0;}.help-sect .anim__down.active div p{font-size:18px;line-height:1.4444444444em;}.call-sect.call-sect--delivery{padding-bottom:100px;}.call-sect--index-1{padding-bottom:100px;}/* ul внутри дропдауна городов (li обязаны лежать в списке — axe listitem); сброс, чтобы ul не влиял на прежнюю вёрстку li */.main-sect__city-dropdown ul{margin:0;padding:0;list-style:none;}/* Точки пагинации слайдеров: зона нажатия 24x24 (WCAG target-size), видимая точка остаётся 8px за счёт прозрачной рамки */.swiper-pagination-bullet{width:24px;height:24px;border:8px solid transparent;background-clip:padding-box;}/* Исправление бага с некорректным отображением рамки фото на детальной при масштабировании */.card-sect__tslider{padding-bottom:1px;}.card-sect__modifications-wrapper hr{margin-top:25px;margin-bottom:0;}/* ============================================================ 7. Cookie-баннер ============================================================ */.cookie-banner{position:fixed;left:20px;bottom:20px;z-index:99999;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:18px;max-width:630px;padding:25px;background-color:#fff;border-radius:var(--bdrs);-webkit-box-shadow:0 10px 25px 0 rgba(43, 52, 74, .12);box-shadow:0 10px 25px 0 rgba(43, 52, 74, .12);opacity:0;visibility:hidden;-webkit-transform:translateY(200%);-ms-transform:translateY(200%);transform:translateY(200%);-webkit-transition:all .4s ease;transition:all .4s ease;}.cookie-banner.active{opacity:1;visibility:visible;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}.cookie-banner__text,.cookie-banner__text p{margin:0;color:#141414;font-size:14px;line-height:1.55;letter-spacing:.02em;}.cookie-banner__text a{/* #8c7a63 давал контраст 4.13:1 на белом при 12px — ниже WCAG AA (4.5:1) */color:#7e6e55;text-decoration:underline;text-underline-offset:3px;-webkit-transition:color .3s ease;transition:color .3s ease;}.cookie-banner__text a:hover{color:#141414;}.cookie-banner__btn{height:48px;padding:5px 32px 4px;font-size:14px;-ms-flex-item-align:start;align-self:flex-start;}.menu-block__nav .item_bold,.main-header__top-nav .item_bold{text-decoration:underline;}div[id*=wait_comp_]{display:none !important;}.catalog_empty{font-size:18px;line-height:1.6em;letter-spacing:.03em;color:#141414;font-weight:600;margin-top:10px;}.tag-back-btn{display:-webkit-box;display:-ms-flexbox;display:flex;font-size:14px;margin-left:auto;margin-right:auto;max-width:190px;padding:5px 20px;text-transform:none;width:100%;}.product-item-scu-item-color-container,.product-item-scu-item-text-container{padding:0px !important;}.prods-sect__prod-add a,.prods-sect__prod-add a{background-color:#8c7a63;color:#fff;}[data-app-box]>div ul[data-app-fieldset~="color"] li[title="Другой цвет"]{display:none;}.main-sect__examp-card>div>div .small{font-family:Lato;font-weight:400;font-size:12px;line-height:22px;vertical-align:middle;color:#14141480;position:relative;}.main-sect__examp-card>div>div{align-items:end;}.main-sect__examp-card>div>div .small::after{content:"";display:block;width:100%;height:0.5px;background:#14141480;position:absolute;bottom:10px;}.main-sect__examp-card>div>div span{height:24px;display:flex;align-items:center;}.prods-sect__prod .prods-sect__prod-title:hover,.prods-sect__prod .prods-sect__prod-title:focus{color:unset !important;}.furn-sect__text{font-size:18px;max-width:1200px;}.furn-sect__text.black{margin-bottom:40px;}#catalog-section-ajax .bottom_buttons{display:flex;gap:30px;justify-content:center;width:100%;}#catalog-section-ajax .bottom_buttons>button,#catalog-section-ajax .bottom_buttons>div{margin:0;}.dir-sect{overflow:unset;}.product-item-scu-item-list{overflow:unset;}[data-app-box]>div ul li small{background-color:#fff;border-radius:4px;bottom:calc(100% + 6px);-webkit-box-shadow:0 10px 25px 0 rgba(43, 52, 74, .12);box-shadow:0 10px 25px 0 rgba(43, 52, 74, .12);color:hsla(0, 0%, 8%, .7);font-size:12px;left:50%;line-height:1.4;opacity:0;padding:10px;pointer-events:none;position:absolute;text-align:right;-webkit-transform:translateX(-50%) translateY(5px);-ms-transform:translateX(-50%) translateY(5px);transform:translateX(-50%) translateY(5px);-webkit-transition:all .35s ease-out;transition:all .35s ease-out;white-space:normal;width:150px;z-index:2;}[data-app-box]>div ul li small{width:350px;border-radius:8px;font-weight:400;text-align:center;color:#141414;}[data-app-box]>div ul li:first-child small{left:0px;transform:unset !important;}[data-app-box]>div ul li:last-child small{right:0px;left:unset;transform:unset !important;}[data-app-box]>div ul li svg:hover~small{display:block;opacity:1;pointer-events:all;-webkit-transform:translateX(-50%) translateY(0);-ms-transform:translateX(-50%) translateY(0);transform:translateX(-50%) translateY(0);}[data-app-box]>div ul li[data-text]::before{content:none;}.main-sect__slide_video iframe{height:115%;left:50%;min-height:103%;min-width:100%;-o-object-fit:cover;object-fit:cover;position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%);width:auto;z-index:-1;}[data-app-box]>div ul li{height:48px;}[data-app-box]>div ul a{height:48px;}.card-sect__data>hr{order:1;}.card-sect__tabs_new{order:2;}.card-sect__tabs-content{order:3;}#gost-dialog .stand-dialog__container img{width:100%;object-fit:contain;}span[data-quiz-step]{position:static;height:unset;text-align:unset;width:unset;display:block;}.def-btn--white{background:#fff;}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;}.menu-block__logo img{width:auto;}.cart-sect__item-timer{display:none;width:100%;grid-column:span 3/span 3;gap:15px;align-items:center;}.cart-sect__item-timer.active{display:flex;}.cart-sect__item-timer .cart-sect__item-timer_content{display:flex;gap:15px;align-items:center;white-space:nowrap;}.cart-sect__item-timer .cart-sect__item-timer_content_text{font-family:Lato;font-weight:400;font-size:12px;letter-spacing:0%;color:#14141480;}.cart-sect__item-timer .cart-sect__item-timer_content_second{font-family:Lato;font-weight:400;font-size:14px;letter-spacing:2%;vertical-align:middle;color:#141414;}.cart-sect__item-timer .cart-sect__item-timer_line{width:100%;height:3px;background:#F7F6F3;border-radius:999px;}.cart-sect__item-timer .cart-sect__item-timer_line span{height:100%;width:100%;display:block;background:#7A3E3A;}.cart-sect__item-timer.active .cart-sect__item-timer_line span{animation-name:timerWidth;animation-duration:10s;animation-timing-function:ease-out;animation-fill-mode:forwards;}.cart-sect__item-timer .cart-sect__item-timer_btn{border-radius:4px;padding-top:5px;padding-right:10px;padding-bottom:5px;padding-left:10px;background:#7A3E3A;font-family:Lato;font-weight:400;font-size:12px;letter-spacing:1%;text-align:right;color:#FFFFFF;border:0px transparent solid;}@keyframes timerWidth{from{width:100%;}to{width:0%;}}.cart-sect__item-price{width:100%;}.cart-sect__radio>div>div:last-child{position:absolute;right:14px;}.main-header__ctrl>em span{font-size:11px;}.cart-sect.cart-sect--empty{--aside:591px;}.cart-sect.cart-sect--empty .cart-sect__empty .cart-sect__empty-title{font-family:Lato;font-weight:600;font-size:27px;letter-spacing:1.14px;text-transform:uppercase;color:#141414;margin-top:10px;}.cart-sect.cart-sect--empty .cart-sect__empty .cart-sect__empty-desc{font-family:Lato;font-weight:400;font-size:16px;line-height:27px;letter-spacing:0%;color:#141414B2;margin-top:12px;}.cart-sect.cart-sect--empty .cart-sect__empty .def-btn{margin-top:36px;}.cart-sect.cart-sect--empty .cart-sect__info{display:flex;flex-direction:column;margin-bottom:0px !important;}.card-sect__tt>span span{width:350px;border-radius:8px;font-weight:400;text-align:center;color:#141414;background-color:#fff;bottom:calc(100% + 6px);-webkit-box-shadow:0 10px 25px 0 rgba(43, 52, 74, .12);box-shadow:0 10px 25px 0 rgba(43, 52, 74, .12);left:50%;line-height:1.4;opacity:0;padding:10px;pointer-events:none;position:absolute;-webkit-transform:translateX(-50%) translateY(5px);-ms-transform:translateX(-50%) translateY(5px);transform:translateX(-50%) translateY(5px);-webkit-transition:all .35s ease-out;transition:all .35s ease-out;white-space:normal;z-index:2;}.cart-sect__block-info_new ul li{font-size:12px;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;display:flex;gap:15px;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;}.cart-sect__block-info_new ul li:not(:last-child){margin-bottom:4px;}.b24-widget-button-wrapper{z-index:50 !important;}[data-app-total-fixed]{z-index:101;}[data-app-total-fixed]{bottom:65px !important;}/* ============================================================ 8. Медиазапросы (десктоп -> мобильные) ============================================================ */@media (width < 1361px){[data-app-box]>div>div{grid-column:unset;gap:10px;}}@media (width < 1200px){[data-app-box]>div ul li{height:42px;}[data-app-box]>div ul a{height:42px;}}@media only screen and (max-width: 992px){.card-sect__data div[id*="_skudiv"]{gap:20px;}.call-sect.call-sect--delivery{padding-bottom:60px;}.call-sect--index-1{padding-bottom:60px;}.prods-sect__prod-add a,.prods-sect__prod-add button{border:1px solid #141414;border-radius:50%;height:36px;width:36px;}.prods-sect__prod-add a,.prods-sect__prod-add button{background-color:#F7F6F3;}.main-header__ctrls{padding-bottom:calc(env(safe-area-inset-bottom) + 10px);background-color:#fff;}.cart-sect__block-info_new ul{margin-top:-12px;}}@media (max-width: 768px){.main-header{z-index:102;}#clear_filter{width:100%;}#clear_filter span{display:block;width:100%;}#clear_filter svg{display:none;}}@media (width < 768px){.revs-sect__titles_custom h2{width:70%;}.cart-sect.cart-sect--empty .cart-sect__empty .cart-sect__empty-title{font-size:18px;}.cart-sect.cart-sect--empty .cart-sect__empty .cart-sect__empty-desc{font-size:12px;line-height:18px;margin-top:8px;}.cart-sect.cart-sect--empty .cart-sect__empty .def-btn{margin-top:28px;}}@media only screen and (max-width: 576px){.card-sect__type-check.selected div em>span{width:calc(100% - 6px);height:calc(100% - 6px);}.prods-sect__prod--screen .prods-sect__prod-add a{height:40px;padding:4px 18px;width:40px;}.prods-sect__prod--screen .prods-sect__prod-add a img{height:20px;}.card-sect__data div[id*="_skudiv"]{gap:15px;}.call-sect.call-sect--delivery{padding-bottom:50px;}.order-dialog__wrapper div[id*='info_']{padding:0 var(--padding);padding-bottom:30px;}.call-sect--index-1{padding-bottom:50px;}.main-header__ctrl--search path{stroke:#141414;}#pa-addcard .stand-dialog__btn-close{gap:5px;font-size:12px;height:48px;width:unset;}.prods-sect__prod-color{height:16px;}.prods-sect__prod-radio_icon span small{width:100%;}.proj-sect__task-content div{font-size:1.1428571429em;}iframe[id*='myReviews__block-widget']{margin-top:-110px !important;}.main-sect__slider .swiper{height:calc(100dvh - 65px);}.main-sect{height:calc((100dvh - 65px) / var(--zoom, 1));}.main-sect__footer{bottom:9svh;}.yabrowser .main-sect__footer{bottom:9svh;}.main-sect__slide-container{justify-content:flex-start;padding-top:35%;}.help-sect .anim__down.active div p{margin-bottom:15px;font-size:14px;}[data-app-box]>div:last-child ul{height:30px;}[data-app-box]>div ul[data-app-fieldset~=color] li{height:30px;max-height:30px;min-height:30px;width:30px;max-width:30px;}.cookie-banner{left:10px;right:10px;bottom:10px;max-width:none;padding:20px;gap:15px;}.cookie-banner__text,.cookie-banner__text p{font-size:12px;}.cookie-banner__btn{height:42px;width:100%;font-size:12px;}.furn-sect__text{font-size:14px;}.card-sect__radios-items{display:flex;overflow-x:auto;flex-wrap:nowrap;padding-bottom:10px;}.card-sect__radios-items .prods-sect__prod-radio{width:40%;min-width:40%;}.card-sect__radios-items::-webkit-scrollbar{height:7px;width:0;}.card-sect__radios-items::-webkit-scrollbar-track{background-color:transparent;}.card-sect__radios-items::-webkit-scrollbar-thumb{background-color:transparent;border:none;border-radius:10px;}.card-sect__type-items::-webkit-scrollbar-track{background-color:transparent;}.card-sect__type-items::-webkit-scrollbar-thumb{background-color:transparent;}.card-sect__radios-items.is-scrolling::-webkit-scrollbar-track{background-color:#e4e1db;}.card-sect__radios-items.is-scrolling::-webkit-scrollbar-thumb{background-color:#8c7a63;}.card-sect__type-items.is-scrolling::-webkit-scrollbar-track{background-color:#e4e1db;}.card-sect__type-items.is-scrolling::-webkit-scrollbar-thumb{background-color:#8c7a63;}.product-item-scu-item-list{overflow-x:auto;}.cart-sect__item-timer{grid-column:span 2/span 2;justify-content:space-between;}.cart-sect__item-timer .cart-sect__item-timer_line{display:none;}button[data-entity="basket-item-delete"]{position:absolute;top:15px;right:15px;}.main-footer__toggle-btn{display:none;}/* Кнопка «Подобрать мебель» в блоке «Укомплектуем ваше заведение под ключ». В app.min.css на этой ширине ей задан тёмный фон с белой подписью (.rep-sect__btn), но в этом же файле выше стоит .def-btn--white { background: #fff } — специфичность та же, а custom.css подключается позже, поэтому фон оставался белым: белая кнопка с белым текстом. Добиваем вторым классом. */.rep-sect__btn.def-btn--white{background-color:#141414;color:#fff;}.cart-sect__item-footer>div:first-child{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;}.card-sect__tt>span span{width:260px;}.rep-sect__bg--mobile{background-position:center;}.main-sect__slide_video iframe{height:120%;}}/* Баннер раздела (18078): своя минимальная высота на каждом брейкпоинте. Брейкпоинты совпадают с app.min.css, чтобы высота менялась вместе с паддингами и размером иконок. Значения не убывают с шириной экрана, и это не ошибка: на узком экране заголовок и описание разбиваются на заметно большее число строк (у /catalog/divany/ на 360px это 4 строки заголовка и 9 описания против 3 и 8 на планшете), и контента по высоте выходит больше, чем на планшете с более крупным шрифтом. Числа посчитаны по самым длинным текстам разделов — /catalog/divany/ и /catalog/podstolya/. */@media only screen and (max-width: 1200px){.furn-sect__container{min-height:630px;}}@media only screen and (max-width: 992.98px){.furn-sect__container{min-height:600px;}}@media only screen and (max-width: 576px){/* На мобильной баннер занимает ровно экран без шапки и нижнего меню — как первый экран главной. --hh это высота шапки, её выставляет JS (common.js), 65px — высота нижней панели, та же константа, что у .main-sect на главной. svh, а не dvh: dvh меняется, когда браузер прячет адресную строку, и блок такой высоты дёргал бы страницу при прокрутке — ровно то, от чего избавлялись в этой же задаче. min-height, а не height: на низком экране длинное описание (самое большое у /catalog/divany/) не должно вылезать из баннера. */.furn-sect{display:flex;flex-direction:column;min-height:calc(100svh - var(--hh, 120px) - 65px);}.furn-sect__container{/* растягиваем на всю высоту баннера, но не сжимаемся под контентом; min-height сбрасывает значение, унаследованное от <=992 */flex:1 0 auto;min-height:0;}/* на мобильной ряд иконок стоит ближе к описанию, чем на десктопе */.furn-sect__items{padding-top:40px;}}/* ============================================================ 9. Новый попап при добавлении в корзину ============================================================ */.cart-notification{position:fixed;top:20px;right:20px;z-index:10001;display:flex;align-items:center;gap:16px;/* Попап один на корзину и избранное, поэтому считаем по длинному варианту — «Товар добавлен в избранное». При 440px на текстовую колонку оставалось 193px против 214px, нужных заголовку (Lato 16px/600), и он переносился; текст под ним уходил в три строки. Порог — 470px, берём 480px с запасом на возможные правки формулировок. */width:480px;max-width:calc(100vw - 30px);padding:18px 20px;border-radius:12px;background:#fff;box-shadow:0 10px 35px rgba(0, 0, 0, .18);opacity:0;visibility:hidden;transform:translateY(-20px);transition:.35s ease;}.cart-notification.active{opacity:1;visibility:visible;transform:translateY(0);}.cart-notification__icon{width:46px;height:46px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#8c7a63;color:#fff;font-size:22px;font-weight:bold;flex-shrink:0;}.cart-notification__content{flex:1;}.cart-notification__title{font-size:16px;font-weight:600;margin-bottom:4px;}.cart-notification__text{font-size:14px;color:#666;line-height:1.4;}.cart-notification__button{display:inline-flex;align-items:center;justify-content:center;height:42px;padding:0 18px;border-radius:8px;background:#111;color:#fff;text-decoration:none;white-space:nowrap;transition:.2s;}.cart-notification__button:hover{background:#333;color:#fff;}@media (max-width: 576px){.cart-notification{left:15px;right:15px;width:auto;flex-wrap:wrap;}.cart-notification__button{width:100%;}}/* ============================================================ 10. Раздел «Авторы» (18050) ============================================================ *//* ---- Список /authors/ ---- */.authors-sect__items{display:grid;grid-template-columns:repeat(4, 1fr);grid-gap:45px 25px;margin-bottom:10px;}.authors-sect__author{display:flex;flex-direction:column;gap:20px;position:relative;}/* пропорция портрета 4:5 — фото авторов приходят разного размера */.authors-sect__author-img{border-radius:var(--bdrs);overflow:hidden;position:relative;user-select:none;}.authors-sect__author-img:before{content:"";display:block;padding-top:125%;}.authors-sect__author-img img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;transition:.35s ease-out;}.authors-sect__author:hover .authors-sect__author-img img{transform:scale(1.04);}/* Заглушка вместо ненайденного фото: подложка в тон no_photo.png каталога, силуэт по центру плитки — пропорции карточки при этом не меняются. */.authors-sect__author-img--empty,.author-sect__photo--empty{background-color:#ece8e1;}.authors-sect__author-img--empty img{top:0;right:0;bottom:0;left:0;margin:auto;width:42%;height:auto;object-fit:contain;}.authors-sect__author:hover .authors-sect__author-img--empty img{transform:none;}.authors-sect__author-content{display:flex;flex-direction:column;gap:8px;}.authors-sect__author-name{color:#141414;display:block;font-size:21px;font-weight:600;letter-spacing:.03em;line-height:1.2857142857em;transition:.35s ease-out;}.authors-sect__author-name:active,.authors-sect__author-name:hover{color:#8c7a63;}.authors-sect__author-position{color:hsla(0, 0%, 8%, .7);font-size:14px;letter-spacing:.02em;line-height:1.4;}/* ---- Детальная /authors/<код>/ ---- */.author-sect__head{display:grid;grid-template-columns:320px 1fr;grid-gap:40px;align-items:start;}.author-sect__photo{border-radius:var(--bdrs);overflow:hidden;position:relative;}.author-sect__photo img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;}.author-sect__photo--empty{display:flex;align-items:center;justify-content:center;aspect-ratio:3/4;}.author-sect__photo--empty img{width:42%;aspect-ratio:auto;object-fit:contain;}.author-sect__intro{display:flex;flex-direction:column;gap:16px;}.author-sect__position{color:#8c7a63;font-size:16px;font-weight:600;letter-spacing:.02em;line-height:1.4;}/* Простой список: без маркеров-точек, каждый пункт начинается с длинного тире, вторая строка выравнивается по тексту. Селекторы с .blog-sect__text — иначе правила .blog-sect__text ul / ul li из app.min.css весят больше и побеждают несмотря на то, что custom.css подключён позже. */.blog-sect__text ul.author-sect__expertise{padding-left:0;list-style:none;}.blog-sect__text ul.author-sect__expertise li{list-style-type:none;padding-left:1.4em;position:relative;}.blog-sect__text ul.author-sect__expertise li:before{content:"—";position:absolute;left:0;}/* Нижний отступ до подвала — как на списке блога (100px). На детальной его держит блок статей: он идёт последним и выводится всегда, хотя бы заглушкой. */.authors-sect{padding-bottom:100px;}.author-sect{padding-bottom:0;}/* ---- Подпись автора в статье блога ---- */.blog-sect__author{color:hsla(0, 0%, 8%, .7);font-size:14px;letter-spacing:.02em;line-height:1.4;}.blog-sect__author a{color:#141414;text-decoration:underline;text-underline-offset:2px;transition:.35s ease-out;}.blog-sect__author a:active,.blog-sect__author a:hover{color:#8c7a63;}/* --max-width как у .blog-sect_new — чтобы статьи шли по ширине карточки автора */.author-sect__articles{--max-width:1280px;padding:40px 0 100px;}@media only screen and (max-width: 1360px){.authors-sect__items{grid-gap:40px 20px;}}@media only screen and (max-width: 1200px){.authors-sect__items{grid-template-columns:repeat(3, 1fr);grid-gap:35px 15px;margin-bottom:0;}.author-sect__head{grid-template-columns:280px 1fr;grid-gap:30px;}}@media only screen and (max-width: 992px){.authors-sect__author-name{font-size:19px;}.authors-sect{padding-bottom:50px;}.author-sect__articles{padding:30px 0 50px;}}@media only screen and (max-width: 768px){.authors-sect__items{grid-template-columns:repeat(2, 1fr);grid-gap:30px 15px;}.author-sect__head{grid-template-columns:1fr;grid-gap:20px;}.author-sect__photo{max-width:260px;}}@media only screen and (max-width: 576px){.authors-sect__items{grid-gap:24px 12px;}.authors-sect__author{gap:14px;}.authors-sect__author-name{font-size:17px;}}/* Кнопка «Показать больше статей» на странице автора: у .projs-sect__more max-width 190px под короткое «Загрузить еще», наша надпись длиннее и переносилась бы внутри кнопки фиксированной высоты. */.author-sect__articles .projs-sect__more{max-width:280px;}@media only screen and (max-width: 576px){/* на мобильной кнопка во всю ширину — как остальные .projs-sect__more */.author-sect__articles .projs-sect__more{max-width:100%;}}/* ==== 11. Таблицы в тексте статьи ==== Визуальный редактор отдаёт голый (только inline border-collapse), а в app.min.css правил для таблиц нет вовсе — рамки не рисовались. Стилизуем внутри .blog-sect__text: этот класс — обёртка и детального текста, и всех блоков HEAD_n/DESCR_n на детальной блога. */.blog-sect__text table{width:100%;margin:24px 0;border:1px solid #e4e1db;border-collapse:collapse;font-size:16px;line-height:1.5;text-align:left;}.blog-sect__text th,.blog-sect__text td{padding:14px 18px;border:1px solid #e4e1db;text-align:left;vertical-align:top;}.blog-sect__text th{background:#f7f6f3;color:#141414;font-weight:600;letter-spacing:.02em;}/* Через строку — светлая подложка: длинные таблицы читаются по горизонтали */.blog-sect__text tbody tr:nth-child(2n){background:#fbfaf8;}/* Редактор заворачивает содержимое ячеек в

— свои отступы им не нужны, иначе первая строка ячейки уезжает вниз */.blog-sect__text th > p,.blog-sect__text td > p{margin:0;}.blog-sect__text th > p + p,.blog-sect__text td > p + p{margin-top:8px;}@media only screen and (max-width: 992px){.blog-sect__text table{margin:20px 0;font-size:15px;}.blog-sect__text th,.blog-sect__text td{padding:12px 14px;}}/* На мобильной таблица не влезает по ширине. Обёртки для прокрутки в разметке нет (текст приходит из редактора), поэтому сама таблица становится блоком со скроллом: строки внутри по-прежнему раскладываются таблицей. */@media only screen and (max-width: 768px){.blog-sect__text table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;font-size:14px;}.blog-sect__text th,.blog-sect__text td{padding:10px 12px;}}/* ========================================================================== Счётчик количества товара в корзине вместо кнопки «Добавить в корзину» (детальная карточка и плитки каталога). Разметку и логику см. js/cart-counter.js и local/ajax/cart_counter.php. ========================================================================== *//* --- детальная карточка: счётчик занимает место кнопки в сетке .card-sect__total-btns --- */.card-sect__total-count{display:flex;justify-content:space-between;padding:5px 12px;}/* косая заливка .def-btn:before на счётчике не нужна: это не кнопка-действие */.card-sect__total-count:before{display:none;}.card-sect__total-count button{align-items:center;background-color:transparent;border:none;color:inherit;cursor:pointer;display:inline-flex;flex:0 0 32px;height:100%;justify-content:center;padding:0;transition:opacity .35s ease-out;user-select:none;}.card-sect__total-count button:hover,.card-sect__total-count button:active{opacity:.6;}.card-sect__total-count button svg{fill:none;stroke:currentColor;}.card-sect__total-count span{font-size:14px;letter-spacing:.03em;}/* --- плитки каталога: счётчик встаёт на место белой кнопки-таблетки --- */.prods-sect__prod-count-cart{align-items:center;background-color:#fff;border-radius:8px;border-radius:var(--bdrs);color:#141414;display:flex;height:40px;justify-content:space-between;padding:0 4px;user-select:none;}/* .prods-sect__prod-add button — белая таблетка на всю ширину, счётчику это мешает */.prods-sect__prod-add .prods-sect__prod-count-cart button,.prods-sect__prod-count-cart button{align-items:center;background-color:transparent;border:none;border-radius:0;color:#141414;cursor:pointer;display:inline-flex;flex:0 0 32px;gap:0;height:32px;justify-content:center;padding:0;transition:color .35s ease-out;user-select:none;width:32px;}.prods-sect__prod-add .prods-sect__prod-count-cart button:hover,.prods-sect__prod-add .prods-sect__prod-count-cart button:active,.prods-sect__prod-count-cart button:hover,.prods-sect__prod-count-cart button:active{background-color:transparent;color:#8c7a63;}.prods-sect__prod-count-cart button svg{fill:none;stroke:currentColor;}.prods-sect__prod-count-cart span{font-size:14px;letter-spacing:.03em;text-align:center;}/* пока идёт запрос — счётчик не кликается */.cart-busy [data-cart-counter]{opacity:.5;pointer-events:none;}/* Количеством теперь управляет счётчик на кнопке «Добавить в корзину», поэтому отдельный выбор количества на детальной прячем. Само поле остаётся в разметке: от него карточка считает итоговую цену и опт-скидку, а js/cart-counter.js держит его в согласии с корзиной. Прячем и зеркало в липком тотале — иначе на мобильной осталась бы копия скрытого блока. */.card-sect .prods-sect__prod-count,[data-app-total-footer] .prods-sect__prod-count{display:none;}/* .card-sect__val — flex со space-between: без левого блока цена уехала бы влево */.card-sect__val .card-sect__price{margin-left:auto;}/* --- большая плитка каталога (BIG_CARD) --- *//* выбор количества скрыт так же, как на детальной */.prods-sect__prod--screen .prods-sect__prod-count{display:none;}/* Кнопка добавления тут крупная и чёрная (.prods-sect__prod--screen .prods-sect__prod-add a выше), а её ширина задана длиной надписи — числом её не повторить. Поэтому кнопку не убираем из потока: гасим visibility, и она продолжает держать размер блока, а счётчик кладём поверх неё. Так размеры до и после подмены совпадают точно. */.prods-sect__prod--screen [data-cart-widget].in-cart [data-cart-add]{display:flex;visibility:hidden;}.prods-sect__prod--screen [data-cart-widget] [data-cart-counter]{bottom:0;height:auto;left:0;padding:0 20px;position:absolute;right:0;top:0;}.prods-sect__prod--screen .prods-sect__prod-count-cart{background-color:#141414;color:#fff;}/* правила .prods-sect__prod--screen .prods-sect__prod-add button (чёрная кнопка на 58px с косой заливкой :before) писались под кнопку, которой в разметке нет — «+»/«−» счётчика первые под них попадают, поэтому гасим */.prods-sect__prod--screen .prods-sect__prod-add .prods-sect__prod-count-cart button{background-color:transparent;color:#fff;flex:0 0 32px;height:100%;overflow:visible;padding:0;width:32px;}.prods-sect__prod--screen .prods-sect__prod-add .prods-sect__prod-count-cart button:hover,.prods-sect__prod--screen .prods-sect__prod-add .prods-sect__prod-count-cart button:active{background-color:transparent;color:#8c7a63;}.prods-sect__prod-add .prods-sect__prod-count-cart button:before,.prods-sect__prod--screen .prods-sect__prod-add .prods-sect__prod-count-cart button:before{display:none;}@media only screen and (max-width: 576px){/* на мобильной кнопка большой плитки — квадрат 40×40 с одной иконкой, в такую ширину счётчик не влезает: ставим его в поток своей шириной */.prods-sect__prod--screen [data-cart-widget].in-cart [data-cart-add]{display:none;visibility:visible;}.prods-sect__prod--screen [data-cart-widget] [data-cart-counter]{height:40px;padding:0 4px;position:static;}}/* --- переключение «кнопка ↔ счётчик» (класс in-cart вешает js/cart-counter.js) --- */[data-cart-counter]{display:none;}[data-cart-widget].in-cart [data-cart-add]{display:none;}[data-cart-widget].in-cart [data-cart-counter]{display:flex;}/* 21424: grid растягивает внешнюю карточку по высоте ряда, но между ней и flex-контентом есть обёртка Битрикса. Она тоже должна растягиваться: иначе margin-top:auto у мобильной кнопки работает только внутри высоты собственного текста, и длинное название сдвигает кнопку относительно соседей. Только обычные плитки сетки: у больших и слайдеров своя раскладка. */.dir-sect__items > .prods-sect__prod:not(.prods-sect__prod--screen) > [data-catalog-item-init]{display:flex;flex-direction:column;flex:1 0 auto;min-width:0;}/* --- плитки каталога на мобильной (≤992px) --- */@media only screen and (max-width: 992px){/* 18492: кнопка добавления здесь была кругом 36px поверх правого верхнего угла карточки и без подписи. Теперь это обычная кнопка во всю ширину со сроком изготовления, стоит внизу карточки — значит, возвращаем её в поток. Класс .prods-sect__prod-add висит и на внешнем блоке виджета, и на вложенном (в ветке с торговыми предложениями их два), позиционирование снимаем с обоих: иначе вложенный останется абсолютным и уедет по bottom: 100% на картинку. */.prods-sect__prod:not(.prods-sect__prod--screen) .prods-sect__prod-add{position:static;width:100%;}/* .prods-sect__prod-content — flex-колонка, поэтому виджет уводим в конец порядком, а margin-top прижимает его к низу, когда у карточки остаётся свободная высота (в ряду карточки тянутся по самой высокой). */.prods-sect__prod:not(.prods-sect__prod--screen) .prods-sect__prod-add[data-cart-widget]{margin-top:auto;order:10;padding-top:12px;}/* Сама кнопка — таблетка во всю ширину, как на десктопе, вместо круга. */.prods-sect__prod:not(.prods-sect__prod--screen) .prods-sect__prod-add a,.prods-sect__prod:not(.prods-sect__prod--screen) .prods-sect__prod-add button{background-color:#8c7a63;border:none;border-radius:8px;border-radius:var(--bdrs);color:#fff;height:40px;width:100%;}/* Подпись со сроком: под круглую кнопку её прятали (app.min.css). */.prods-sect__prod:not(.prods-sect__prod--screen) .prods-sect__prod-add a span,.prods-sect__prod:not(.prods-sect__prod--screen) .prods-sect__prod-add button span{display:inline-block;}/* Место в углу под круглую кнопку больше не резервируем. */.prods-sect__prod:not(.prods-sect__prod--screen) .prods-sect__prod-title,.prods-sect__prod:not(.prods-sect__prod--screen) .prods-sect__prod-price{padding-right:0;}/* Счётчик встаёт на место кнопки и повторяет её размеры — как на десктопе, поэтому отдельных правил под круглую кнопку ему больше не нужно. */}/* --- 18492: на кнопке добавления вместо «Добавить в корзину» — срок изготовления --- *//* На десктопе иконка корзины в плитках была скрыта (app.min.css), а рядом со сроком она нужна: без неё не понять, что кнопка ведёт в корзину. */.prods-sect__prod-add a img,.prods-sect__prod-add button img{display:inline-block;flex-shrink:0;}/* У добавленного товара иконку по-прежнему заменяет галочка (.added a:before). */.prods-sect__prod-add.added a img,.prods-sect__prod-add.added button img{display:none;}/* Наведение на кнопку в обычной плитке: чёрный вместо коричневого. Коричневым она залита и без наведения (custom.css выше), так что hover ничем не отличался. Большую плитку не трогаем — там кнопка чёрная изначально. */.prods-sect__prod:not(.prods-sect__prod--screen) .prods-sect__prod-add a:hover,.prods-sect__prod:not(.prods-sect__prod--screen) .prods-sect__prod-add a:active,.prods-sect__prod:not(.prods-sect__prod--screen) .prods-sect__prod-add button:hover,.prods-sect__prod:not(.prods-sect__prod--screen) .prods-sect__prod-add button:active{background-color:#141414;color:#fff;}/* В плитках choise (избранное в личном кабинете) класс .prods-sect__prod-add висит на самой ссылке, а у него flex-direction: column — иконка и срок вставали в две строки. У большой плитки то же место лечится правилом .prods-sect__prod--screen .prods-sect__prod-add a выше. */a.prods-sect__prod-add,button.prods-sect__prod-add{-ms-flex-direction:row;flex-direction:row;}/* Кнопка детальной: иконка корзины крупнее текста, ужимаем под размер надписи. */.card-sect__total-submit-icon{flex-shrink:0;height:18px;width:18px;}/* --- 18494: по кнопке видно, что товар уже в избранном --- *//* Кнопки на плитке проявляются только при наведении на карточку, поэтому избранное было незаметно. Активную кнопку показываем всегда: заливка и цвет у .prods-sect__prod-btn.active те же, что при наведении (app.min.css). */.prods-sect__prod-btn--fav.active{opacity:1;pointer-events:all;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);}/* Кнопка на детальной в активном состоянии не отличалась ничем — повторяем её же вид при наведении: косая заливка .def-btn:before и белое сердце. */.card-sect__total-fav.active{border-color:#8c7a63;color:#fff;}.card-sect__total-fav.active:before{-webkit-transform:skew(25deg);-ms-transform:skew(25deg);transform:skew(25deg);}/* ==== 12. Страница 3D-визуализации /3d-visual/ ==== Блоки первого экрана, «От размеров помещения…», «Отправьте план…» и галерея тканей взяты из вёрстки tecona-3d-page/index.html: в app.min.css этих классов нет вовсе. Общие блоки (title-sect, steps-sect, qual-sect, call-sect) переопределять не стали — они уже работают на других страницах, и страница подхватывает их текущие отступы и типографику. */.def-btn--bd{color:#fff;border:1px solid #fff;}.def-btn--bd:active,.def-btn--bd:hover{border-color:#8c7a63;}@media only screen and (max-width:576px){.call-sect__form-file--custom{font-size:12px;}}.call-sect__form-file--custom label{gap:15px;}.call-sect__form-file--custom label>div{padding:15px;}@media only screen and (max-width:360px){.call-sect__form-file--custom label>div{padding:12px 10px;}}.call-sect__form-file--custom label>div>em{-webkit-box-flex:0;-ms-flex:0 0 42px;flex:0 0 42px;width:42px;height:42px;border-radius:50%;background-color:rgba(20,20,20,.03);background-image:url(../img/icons/plus.svg);background-repeat:no-repeat;background-position:center;}@media only screen and (max-width:576px){.call-sect__form-file--custom label>div>em{-webkit-box-flex:0;-ms-flex:0 0 26px;flex:0 0 26px;width:26px;height:26px;background-size:8px auto;}}.call-sect__form-file--custom label>div>em img{display:none;}.call-sect__form-file--custom label>div span{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:3px;color:#999;}.call-sect__form-file--custom label>div span strong{color:#141414;font-size:1.14286em;}.qual-sect__text{margin-top:-20px;color:rgba(20,20,20,.8);line-height:1.35;}@media only screen and (max-width:992px){.qual-sect__text{margin-top:-10px;}}.qual-sect__items--nbd{border-top:none;}.qual-sect__items--nbd .qual-sect__item:last-child{border-bottom:none;}.qual-sect__imgs{display:grid;grid-template-columns:repeat(2,1fr);grid-gap:25px;}@media only screen and (max-width:1360px){.qual-sect__imgs{grid-gap:20px;}}@media only screen and (max-width:1200px){.qual-sect__imgs{grid-gap:15px;}}@media only screen and (max-width:576px){.qual-sect__imgs{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:10px;}}/* Правила .qual-sect__imgs>div из вёрстки удалены: они задавали колонку кадров прямым детям коллажа, а теперь эту роль играет .qual-sect__imgs-track внутри .qual-sect__imgs-col. Мало того что они дублировали новые стили — селектор с типом div даёт специфичность выше, чем у одного класса, и перебивал display: none у скрытой раскладки: на широком экране вылезала мобильная строка, а на узком схлопывалась в ноль лента. */.qual-sect__imgs a{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}@media only screen and (max-width:576px){.qual-sect__imgs a{overflow:hidden;border-radius:8px;}}.qual-sect__imgs a img{display:block;width:100%;}.qual-sect--imgs{padding:50px 0;margin:0;}@media only screen and (max-width:992px){.qual-sect--imgs{padding:30px 0;}}@media only screen and (max-width:768px){.qual-sect--imgs{padding:25px 0;}}.qual-sect--imgs .qual-sect__container{display:grid;grid-template-columns:610px 1fr;grid-gap:60px;}@media only screen and (max-width:1360px){.qual-sect--imgs .qual-sect__container{grid-gap:30px;grid-template-columns:440px 1fr;}}@media only screen and (max-width:992px){.qual-sect--imgs .qual-sect__container{grid-template-columns:350px 1fr;grid-gap:20px;}}@media only screen and (max-width:768px){.qual-sect--imgs .qual-sect__container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:10px;}}/* Отступы симметричные, а не только сверху: высоту строки задаёт как раз текстовая колонка — коллаж вынут из потока и растягивается по ней. Отсюда и высота коллажа: 125px сверху и снизу против 50px в вёрстке, то есть +200px. Захотите ещё выше — это число и min-height ниже. align-self держит текст по центру относительно коллажа даже в редком случае, когда высоту диктует min-height у .qual-sect__aside. */.qual-sect--imgs .qual-sect__content{-ms-flex-item-align:center;align-self:center;padding:125px 0;}@media only screen and (max-width:992px){.qual-sect--imgs .qual-sect__content{-webkit-box-ordinal-group:inherit;-ms-flex-order:inherit;order:inherit;padding:0;}.qual-sect--imgs .qual-sect__aside{-webkit-box-ordinal-group:inherit;-ms-flex-order:inherit;order:inherit;}}@media only screen and (max-width:576px){.qual-sect--imgs .qual-sect__aside{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;}}.steps-sect__text{margin-top:-10px;text-align:center;}@media only screen and (max-width:576px){.steps-sect__text{text-align:left;}}.steps-sect__text:last-child{margin-bottom:0;}.steps-sect__item-img{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;overflow:hidden;}.steps-sect__item-img img{display:inline-block;height:auto;block-size:auto;width:100%;}.steps-sect--index{padding:50px 0;}@media only screen and (max-width:992px){.steps-sect--index{padding:30px 0;}}@media only screen and (max-width:576px){.steps-sect--index{padding:20px 0 25px;}}.steps-sect--index .steps-sect__text{color:#141414;}.steps-sect--index .steps-sect__text strong{font-weight:400;font-size:1.125em;}.steps-sect--index .steps-sect__items{max-width:100%;}@media only screen and (max-width:576px){.steps-sect--index .steps-sect__item{padding-top:20px;padding-bottom:20px;padding-left:0;}}.steps-sect--index .steps-sect__item-head{font-size:16px;}@media only screen and (max-width:1360px){.steps-sect--index .steps-sect__item-head{font-size:14px;}}@media only screen and (max-width:576px){.steps-sect--index .steps-sect__item-head{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;gap:10px;line-height:1.1;-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;}}.steps-sect--index .steps-sect__item-head>span{text-transform:uppercase;text-align:right;position:static;background-color:transparent;width:auto;color:#8c7a63;height:auto;}@media only screen and (max-width:576px){.steps-sect--index .steps-sect__item-head>span{font-weight:700;}}.steps-sect--index .steps-sect__item-text{color:rgba(20,20,20,.7);}@media only screen and (max-width:576px){.steps-sect--index .steps-sect__item-text{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;}}.steps-sect--index .steps-sect__item-img{border-radius:8px;}@media only screen and (max-width:576px){.steps-sect--index .steps-sect__item-img{-webkit-box-ordinal-group:1;-ms-flex-order:0;order:0;margin-bottom:15px;}.steps-sect--index .steps-sect__item--1{padding-top:0!important;}}/* Третья карточка в вёрстке сдвинута вниз через transform: translateY(28px). Трансформация двигает только отрисовку — место в потоке остаётся прежним, поэтому карточка свисала на нижний padding секции, и отбивка до следующего блока выглядела меньше, чем задана. Меняем сдвиг на отступ: место в сетке карточка теперь занимает, высота секции растёт на те же 28px, а стоит она там же, где и стояла. 13px — это базовые -15px у .steps-sect__item плюс 28px бывшего сдвига. Только выше 1200px: ниже вёрстка сама снимает transform. */@media only screen and (min-width:1201px){.steps-sect--index .steps-sect__item--3{-webkit-transform:none;-ms-transform:none;transform:none;margin-top:13px;}}.title-sect__container .title-sect__items{display:-webkit-box;display:-ms-flexbox;display:flex;}@media only screen and (max-width:992px){.title-sect__container .title-sect__items{display:none;}}.title-sect__btns{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:15px;}.title-sect__btn{margin-top:20px;border:none;-ms-flex-item-align:start;align-self:flex-start;}@media only screen and (max-width:1360px){.title-sect__btn{margin-top:20px;}}.title-sect__btn.def-btn--bd{border:1px solid #fff;}.title-sect__btn.def-btn--bd:active,.title-sect__btn.def-btn--bd:hover{border-color:#8c7a63;}.title-sect__items{display:none;gap:15px;}@media only screen and (max-width:1200px){.title-sect__items{gap:10px;}}@media only screen and (max-width:992px){.title-sect__items{display:grid;grid-template-columns:repeat(4,1fr);grid-gap:10px;color:#141414;padding:10px;}}@media only screen and (max-width:768px){.title-sect__items{grid-template-columns:repeat(2,1fr);}}.title-sect__items .title-sect__label{-webkit-box-flex:1;-ms-flex:1 0 0px;flex:1 0 0;}.title-sect__item{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;gap:10px;min-height:140px;padding:15px 50px;border:1px solid rgba(255,255,255,.2);border-radius:8px;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:rgba(0,0,0,.2);color:#fff;font-size:14px;}@media only screen and (max-width:1360px){.title-sect__item{padding:15px 20px;min-height:100px;}}@media only screen and (max-width:1200px){.title-sect__item{min-height:70px;font-size:12px;}}@media only screen and (max-width:992px){.title-sect__item{background-color:#f7f6f3;color:#141414;font-size:14px;gap:5px;min-height:80px;}}@media only screen and (max-width:576px){.title-sect__item{padding:10px 15px;}}@media only screen and (max-width:360px){.title-sect__item{font-size:12px;}}.title-sect__item strong{font-weight:600;line-height:1;font-size:40px;}@media only screen and (max-width:1360px){.title-sect__item strong{font-size:30px;}}@media only screen and (max-width:1200px){.title-sect__item strong{font-size:22px;}}@media only screen and (max-width:992px){.title-sect__item strong{color:#8c7a63;}}@media only screen and (max-width:360px){.title-sect__item strong{font-size:20px;}}.title-sect__label{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:40px;border:1px solid rgba(255,255,255,.2);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:rgba(0,0,0,.2);border-radius:8px;color:#fff;padding:15px 20px 0 30px;font-size:28px;}@media only screen and (max-width:1360px){.title-sect__label{font-size:20px;padding:15px 15px 0 15px;gap:20px;}}@media only screen and (max-width:1200px){.title-sect__label{font-size:16px;}}@media only screen and (max-width:992px){.title-sect__label{grid-column:1/-1;background-color:#8c7a63;padding:15px;border-radius:8px;font-size:28px;}}@media only screen and (max-width:768px){.title-sect__label{font-size:20px;}}@media only screen and (max-width:576px){.title-sect__label{font-size:18px;}}.title-sect__label>em{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;}.title-sect__label>em img{display:inline-block;height:auto;block-size:auto;}@media only screen and (max-width:1200px){.title-sect__label>em img{width:90px;}}@media only screen and (max-width:992px){.title-sect__label>em img{width:60px;}}@media only screen and (max-width:576px){.title-sect__label>em img{width:42px;}}.title-sect__label>span{-webkit-box-flex:1;-ms-flex:1 0 0px;flex:1 0 0;display:block;}.title-sect--index .title-sect__container{height:860px;}@media only screen and (max-width:1200px){.title-sect--index .title-sect__container{height:700px;padding:50px 0 40px;}}@media only screen and (max-width:992px){.title-sect--index .title-sect__container{height:600px;padding:25px 0 35px;}}@media only screen and (max-width:768px){.title-sect--index .title-sect__container{height:auto;min-height:500px;height:calc(100dvh - var(--hh));height:calc(100dvh - var(--hh));}}.title-sect--index .title-sect__content{margin:auto 0;}@media only screen and (max-width:992px){.title-sect--index .title-sect__content{margin:0;margin-top:auto;}}@media only screen and (max-width:576px){.title-sect--index .title-sect__content{margin:auto 0;}.title-sect--index .title-sect__btn{margin:0;}}.splan-sect{padding:50px 0 50px;background-color:#fff;}@media only screen and (max-width:992px){.splan-sect{padding:30px 0;}}@media only screen and (max-width:768px){.splan-sect{padding:25px 0;}}.splan-sect__title{margin-bottom:30px;}@media only screen and (max-width:576px){.splan-sect__title{margin-bottom:20px;}}.splan-sect__items{display:grid;grid-template-columns:repeat(4,1fr);grid-gap:25px;margin-bottom:30px;}@media only screen and (max-width:1360px){.splan-sect__items{grid-gap:15px;}}@media only screen and (max-width:992px){.splan-sect__items{grid-template-columns:repeat(2,1fr);margin-bottom:20px;}}@media only screen and (max-width:576px){.splan-sect__items{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:15px;margin-bottom:15px;}}.splan-sect__items:last-child{margin-bottom:0;}.splan-sect__item{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;padding:32px;gap:20px;border:1px solid #e4e1db;border-radius:8px;}@media only screen and (max-width:1200px){.splan-sect__item{padding:20px;}}@media only screen and (max-width:992px){.splan-sect__item{gap:15px;}}@media only screen and (max-width:576px){.splan-sect__item{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;}}@media only screen and (max-width:360px){.splan-sect__item{padding:15px;}}.splan-sect__item-icon{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;}.splan-sect__item-icon img{display:inline-block;height:auto;block-size:auto;}.splan-sect__item-content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:15px;font-size:14px;line-height:1.3;color:rgba(20,20,20,.7);}@media only screen and (max-width:1200px){.splan-sect__item-content{gap:10px;}}@media only screen and (max-width:576px){.splan-sect__item-content{gap:5px;}}.splan-sect__item-content strong{font-size:18px;line-height:1.27778em;font-weight:600;color:#141414;}.splan-sect__info{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;gap:32px;padding:32px;background-color:#f7f6f3;border-radius:8px;}@media only screen and (max-width:1360px){.splan-sect__info{padding:20px;gap:20px;}}@media only screen and (max-width:480px){.splan-sect__info{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:15px;}}.splan-sect__info-icon{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-flex:0;-ms-flex:0 0 70px;flex:0 0 70px;width:70px;height:70px;border-radius:8px;background-color:#8c7a63;}@media only screen and (max-width:576px){.splan-sect__info-icon{-webkit-box-flex:0;-ms-flex:0 0 42px;flex:0 0 42px;width:42px;height:42px;}}@media only screen and (max-width:480px){.splan-sect__info-icon{-ms-flex-item-align:end;align-self:flex-end;}}.splan-sect__info-icon img{display:inline-block;height:auto;block-size:auto;}@media only screen and (max-width:576px){.splan-sect__info-icon img{width:22px;}}.splan-sect__info-content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:10px;}@media only screen and (max-width:768px){.splan-sect__info-content{gap:5px;}}.splan-sect__info-title{font-weight:700;line-height:1.45;text-transform:uppercase;}@media only screen and (max-width:768px){.splan-sect__info-title{font-size:16px;}}.splan-sect__info-text{opacity:.8;}@media only screen and (max-width:768px){.splan-sect__info-text{font-size:14px;}}.splan-sect__info-text>*+*{margin-top:.5em;}.path-sect{padding:70px 0 50px;}@media only screen and (max-width:992px){.path-sect{padding:50px 0 30px;}}@media only screen and (max-width:576px){.path-sect{padding:20px 0;}}.path-sect__title{margin-bottom:20px;}@media only screen and (max-width:576px){.path-sect__title{margin-bottom:10px;}}.path-sect__text{line-height:1.875em;color:rgba(20,20,20,.8);margin-bottom:30px;}@media only screen and (max-width:576px){.path-sect__text{line-height:1.4;margin-bottom:20px;font-size:14px;}}.path-sect__text strong{font-size:1.125em;font-weight:400;}@media only screen and (max-width:576px){.path-sect__text strong{font-size:14px;}}.path-sect__items{display:grid;grid-template-columns:repeat(4,1fr);grid-gap:25px;margin-bottom:30px;}@media only screen and (max-width:1360px){.path-sect__items{grid-gap:15px;}}@media only screen and (max-width:992px){.path-sect__items{grid-template-columns:repeat(2,1fr);margin-bottom:20px;}}@media only screen and (max-width:576px){.path-sect__items{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:15px;margin-bottom:15px;}}.path-sect__items:last-child{margin-bottom:0;}.path-sect__item{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;padding:32px;gap:20px;border:1px solid #f7f6f3;border-radius:8px;}@media only screen and (max-width:1200px){.path-sect__item{padding:20px;}}@media only screen and (max-width:992px){.path-sect__item{gap:15px;}}@media only screen and (max-width:576px){.path-sect__item{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;}}@media only screen and (max-width:360px){.path-sect__item{padding:15px;}}.path-sect__item-icon{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;}.path-sect__item-icon img{display:inline-block;height:auto;block-size:auto;}.path-sect__item-content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:15px;font-size:14px;line-height:1.3;color:rgba(20,20,20,.7);}@media only screen and (max-width:1200px){.path-sect__item-content{gap:10px;}}@media only screen and (max-width:576px){.path-sect__item-content{gap:5px;}}.path-sect__item-content strong{font-size:18px;line-height:1.27778em;font-weight:600;color:#141414;}/* Первый экран этой страницы держит фиксированную высоту контейнера, поэтому его блоки не должны сжиматься, а расстояния между ними задаёт gap. В app.min.css у .title-sect__content его нет: на остальных страницах отступы приходят из [data-app-heading], а тут разметка взята из вёрстки. Правки ограничены модификатором --index, чтобы не задеть другие страницы. */.title-sect--index .title-sect__container>*,.title-sect--index .title-sect__content>*{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;}.title-sect--index .title-sect__content{gap:20px;}@media only screen and (max-width:992px){.title-sect--index .title-sect__content{gap:10px;}}.title-sect--index .title-sect__text:last-child{margin-bottom:0;}@media only screen and (max-width:576px){.title-sect--index .title-sect__text{margin-bottom:20px;}}/* Нижняя панель страницы (index-2.html вёрстки). В app.min.css класса .info-block нет вовсе — блок используется только здесь. Показывается при двух классах сразу: active (страница прокручена) и slide-down (прокрутка идёт вверх) — их вешает скрипт в 3d-visual/index.php. Кружки соцсетей в панели меньше подвальных, поэтому размер задан здесь, а не глобально. */.info-block{position:fixed;bottom:0;left:0;width:100%;background-color:#fff;z-index:10;-webkit-box-shadow:0 40px 90px rgba(0,0,0,.2);box-shadow:0 40px 90px rgba(0,0,0,.2);padding:15px 0;pointer-events:none;opacity:0;-webkit-transform:translateY(100%);-ms-transform:translateY(100%);transform:translateY(100%);-webkit-transition:all .35s ease-out;-o-transition:all .35s ease-out;transition:all .35s ease-out;}@media only screen and (max-width:1200px){.info-block{padding:10px 0;}}@media only screen and (max-width:992px){.info-block{display:none;}}.info-block__container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;gap:20px;}.info-block__links{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:15px 32px;line-height:1.57143em;}.info-block__links a{display:inline-block;color:#141414;-webkit-transition:all .35s ease-out;-o-transition:all .35s ease-out;transition:all .35s ease-out;}.info-block__links a:focus{color:#141414;}.info-block__links a:active,.info-block__links a:hover{color:#8c7a63;}.info-block__content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;gap:30px;}@media only screen and (max-width:1200px){.info-block__content{gap:20px;}}.info-block__phone{display:inline-block;color:#141414;line-height:1.375em;white-space:nowrap;text-transform:uppercase;-webkit-transition:all .35s ease-out;-o-transition:all .35s ease-out;transition:all .35s ease-out;}@media only screen and (max-width:1200px){.info-block__phone{font-size:15px;}}.info-block__phone:focus{color:#141414;}.info-block__phone:active,.info-block__phone:hover{color:#8c7a63;}.info-block .main-footer__soc{gap:10px;}.info-block .main-footer__soc a{-webkit-box-flex:0;-ms-flex:0 0 40px;flex:0 0 40px;width:40px;height:40px;color:#141414;border-color:#f7f6f3;}.info-block__btn{height:42px;padding:5px 20px 3px;font-size:14px;border:none;background-color:#8c7a63;color:#fff;}.info-block__btn::before{background-color:#141414;}.info-block.active.slide-down{opacity:1;pointer-events:all;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}/* Круглая кнопка «наверх» из подвала висит слева внизу (z-index выше панели) и легла бы поверх ссылок. Пока панель видна — приподнимаем кнопку на её высоту. :has() смотрит на .wrapper, потому что .to-top лежит уже за ним, поэтому правило работает только там, где панель есть. Ниже 992px панель скрыта, и трогать кнопку не нужно. */@media only screen and (min-width:993px){.wrapper:has(.info-block.active.slide-down)~.to-top{bottom:96px;}}@media only screen and (min-width:993px) and (max-width:1200px){.wrapper:has(.info-block.active.slide-down)~.to-top{bottom:86px;}}/* Анимация баннера: поверх пустого зала лежит тот же кадр с мебелью и по кругу проявляется и гаснет — по 4 секунды на действие, цикл 8 секунд. Оба слоя с одинаковым object-fit и z-index, порядок в разметке решает, какой сверху. У широкого экрана и у мобильной свои пары кадров, поэтому анимация работает на всех ширинах. */.title-sect__bg--furn{opacity:0;-webkit-animation:titleSectFurniture 8s ease-in-out infinite;animation:titleSectFurniture 8s ease-in-out infinite;}@-webkit-keyframes titleSectFurniture{0%,100%{opacity:0;}50%{opacity:1;}}@keyframes titleSectFurniture{0%,100%{opacity:0;}50%{opacity:1;}}/* Пользователям, которые просили меньше анимации в системе, показываем зал с мебелью статично — мигание для них выключаем. */@media (prefers-reduced-motion: reduce){.title-sect__bg--furn{opacity:1;-webkit-animation:none;animation:none;}}/* Затемнение первого экрана под текст. Штатный .title-sect:before даёт только горизонтальный градиент — 30% слева и ноль справа, поэтому заголовок терялся на светлой подсветке за стойкой, а плашки справа читались на голом кадре. Добавляем ровную вуаль поверх градиента: она ложится на оба слоя баннера (у них z-index -2, у псевдоэлементов -1) и работает на всех ширинах. Правится одним числом — прозрачностью фона. */.title-sect--index::after{content:'';display:block;position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1;background-color:rgba(20, 20, 20, .2);}/* Коллаж в блоке «Сравните варианты» — бегущие ленты кадров, как «Что вы получаете с Tecona» на лендинге (.lp-benefits__gallery в landing.css). Список кадров в каждой ленте продублирован в разметке, поэтому сдвиг ровно на половину ленты плюс половина зазора замыкается без стыка. Ключевое: анимация висит на .qual-sect__imgs-track, а не на колонке. Колонка — элемент грида, её растягивает на всю высоту коллажа, и сдвиг translateY(-50%) считался бы от этой высоты, а не от длины ленты. Лента вложена внутрь и имеет высоту по содержимому — только тогда проценты означают то, что нужно. *//* Кадры заметно выше текстовой колонки, поэтому коллаж вынут из потока: высоту строки задаёт текст, а коллаж растягивается по ней и обрезается. Так блоки выходят вровень на любой ширине — без подбора высоты руками. */.qual-sect--imgs .qual-sect__aside{position:relative;min-height:620px;}.qual-sect--imgs .qual-sect__imgs{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;-webkit-mask-image:linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);mask-image:linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);}/* Колонка — элемент грида, растянутый на всю высоту коллажа; лента лежит в ней сверху и уезжает за край, а обрезает всё коллаж. */.qual-sect__imgs-col{display:block;min-height:0;}/* Зазор между кадрами меняется по ступеням адаптива, а формула сдвига его учитывает — поэтому он приходит в кадры переменной. */.qual-sect__imgs-track{--qual-marquee-gap:30px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:var(--qual-marquee-gap);}@media only screen and (max-width:1360px){.qual-sect__imgs-track{--qual-marquee-gap:20px;}}@media only screen and (max-width:1200px){.qual-sect__imgs-track{--qual-marquee-gap:15px;}}.qual-sect__imgs-track--up{-webkit-animation:qualMarqueeUp 45s linear infinite;animation:qualMarqueeUp 45s linear infinite;}/* Отдельные кадры вместо animation-direction: reverse — так видно, что лента стартует уже сдвинутой, и порядок ключевых кадров не приходится держать в голове. */.qual-sect__imgs-track--down{-webkit-animation:qualMarqueeDown 60s linear infinite;animation:qualMarqueeDown 60s linear infinite;}@-webkit-keyframes qualMarqueeUp{from{-webkit-transform:translateY(0);transform:translateY(0);}to{-webkit-transform:translateY(calc(-50% - var(--qual-marquee-gap) / 2));transform:translateY(calc(-50% - var(--qual-marquee-gap) / 2));}}@keyframes qualMarqueeUp{from{-webkit-transform:translateY(0);transform:translateY(0);}to{-webkit-transform:translateY(calc(-50% - var(--qual-marquee-gap) / 2));transform:translateY(calc(-50% - var(--qual-marquee-gap) / 2));}}@-webkit-keyframes qualMarqueeDown{from{-webkit-transform:translateY(calc(-50% - var(--qual-marquee-gap) / 2));transform:translateY(calc(-50% - var(--qual-marquee-gap) / 2));}to{-webkit-transform:translateY(0);transform:translateY(0);}}@keyframes qualMarqueeDown{from{-webkit-transform:translateY(calc(-50% - var(--qual-marquee-gap) / 2));transform:translateY(calc(-50% - var(--qual-marquee-gap) / 2));}to{-webkit-transform:translateY(0);transform:translateY(0);}}/* Строка для узких экранов на широком не нужна. */.qual-sect__imgs-row{display:none;}/* До 768px контейнер блока становится одной колонкой. Вместо двух столбцов — одна строка, едущая влево: кадры в ней идут все шесть подряд, потом их копии, поэтому цикл так же замыкается без стыка. */@media only screen and (max-width:768px){/* Высоту здесь никто не наследует: её задают сами кадры, а строка, лента и коллаж вырастают по содержимому. Цепочка height: 100% через четыре уровня была слишком хрупкой — достаточно одного звена без определённой высоты, чтобы всё схлопнулось в ноль. У .qual-sect__aside из app.min.css стоит flex: 1 0 0. В строчном флексе это про ширину и безобидно, а контейнер блока ниже 768px становится колоночным — и flex-basis: 0 превращается в нулевую высоту. Поэтому здесь блок обычный, без флекса. */.qual-sect--imgs .qual-sect__aside{display:block;-webkit-box-flex:0;-ms-flex:none;flex:none;position:static;width:100%;min-height:0;}.qual-sect--imgs .qual-sect__imgs{display:block;position:static;width:100%;height:auto;-webkit-mask-image:linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);mask-image:linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);}.qual-sect__imgs-col{display:none;}.qual-sect__imgs-row{display:block;}.qual-sect__imgs-track--left{--qual-marquee-gap:10px;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;width:-webkit-max-content;width:-moz-max-content;width:max-content;-webkit-animation:qualMarqueeLeft 40s linear infinite;animation:qualMarqueeLeft 40s linear infinite;}/* Кадры разной пропорции — равняем по высоте, ширину считает браузер. flex: 0 0 auto обязателен: иначе строчный флекс сожмёт их по ширине. */.qual-sect__imgs-row .qual-sect__imgs-track a{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;height:220px;overflow:hidden;border-radius:8px;}.qual-sect__imgs-row .qual-sect__imgs-track a img{width:auto;height:220px;max-width:none;}}@-webkit-keyframes qualMarqueeLeft{from{-webkit-transform:translateX(0);transform:translateX(0);}to{-webkit-transform:translateX(calc(-50% - var(--qual-marquee-gap) / 2));transform:translateX(calc(-50% - var(--qual-marquee-gap) / 2));}}@keyframes qualMarqueeLeft{from{-webkit-transform:translateX(0);transform:translateX(0);}to{-webkit-transform:translateX(calc(-50% - var(--qual-marquee-gap) / 2));transform:translateX(calc(-50% - var(--qual-marquee-gap) / 2));}}@media (prefers-reduced-motion: reduce){.qual-sect__imgs-track{-webkit-animation:none;animation:none;}}/* Ошибка в форме: краснеют подпись поля и плейсхолдер, красной рамки нет. Правило из вёрстки (app.min.css) рассчитано на разметку формы «Запросить КП», где input лежит внутри label. Там, где подпись — соседний элемент, красим её от общей обёртки поля. */.call-sect__form-input:has(input.is-invalid) > label,.call-sect__form-input:has(textarea.is-invalid) > label,.call-sect__form-input:has(select.is-invalid) > label{color:#dc3545;}/* ==== 13. Баннер 3D-визуализации на главной ==== Блок между проектами и блогом, ведёт на /3d-visual/. Размеры и цвета взяты из макета (Figma «Tecona-поиск», узлы 443:2189 и 453:1713). На широком экране это полноэкранный кадр с косым затемнением и текстом поверх, на мобильной — кадр сверху и текст под ним на белом, поэтому картинка не фон блока, а отдельный слой: так одну и ту же разметку удаётся переключить стилями. */.visual3d-sect{position:relative;z-index:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;height:864px;color:#fff;overflow:hidden;}.visual3d-sect__bg{/* display: block обязателен: на мобильной картинка возвращается в поток внутри инлайнового picture, и строчный бокс добавил бы щель снизу. */display:block;position:absolute;z-index:-2;top:0;left:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;}/* Косое затемнение из макета: тёмный угол слева внизу, к правому верхнему углу сходит в ноль — под текстом контраст есть, план справа не глушится. */.visual3d-sect::before{content:'';display:block;position:absolute;z-index:-1;top:0;left:0;width:100%;height:100%;background:-webkit-gradient(linear, left bottom, right top, from(rgba(20, 20, 20, .68)), color-stop(73%, rgba(20, 20, 20, 0)));background:linear-gradient(45deg, rgba(20, 20, 20, .68) 0%, rgba(20, 20, 20, 0) 73%);}/* Контент прижат к низу: в макете от него до нижнего края 157px, а сверху запас больше. Так строка кнопки стоит на месте, даже если заголовок перенесётся иначе, чем в макете. */.visual3d-sect__container{padding-bottom:157px;}.visual3d-sect__content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;max-width:689px;}.visual3d-sect__title{margin-bottom:34px;font-weight:600;font-size:65px;line-height:1.23077em;letter-spacing:.03em;text-transform:uppercase;}.visual3d-sect__text{max-width:608px;margin-bottom:45px;font-weight:600;font-size:16px;line-height:1.5em;}.visual3d-sect__btn{-ms-flex-negative:0;flex-shrink:0;}/* Промежуточные ступени: у сайта сетка ломается на 1360 и 1200, поэтому кадр и типографику уменьшаем там же — иначе заголовок наезжает на план. */@media only screen and (max-width:1360px){.visual3d-sect{height:700px;}.visual3d-sect__container{padding-bottom:110px;}.visual3d-sect__title{font-size:52px;margin-bottom:26px;}.visual3d-sect__text{margin-bottom:35px;}}@media only screen and (max-width:1200px){.visual3d-sect{height:600px;}.visual3d-sect__container{padding-bottom:80px;}.visual3d-sect__title{font-size:42px;}.visual3d-sect__content{max-width:560px;}}@media only screen and (max-width:992px){.visual3d-sect{height:520px;}.visual3d-sect__container{padding-bottom:60px;}.visual3d-sect__title{font-size:36px;}.visual3d-sect__text{font-size:15px;margin-bottom:30px;}}/* Мобильная раскладка из макета: кадр 326px сверху, под ним текст на белом и чёрная кнопка. Затемнение и белый текст здесь не нужны. */@media only screen and (max-width:576px){.visual3d-sect{display:block;height:auto;color:#141414;}.visual3d-sect::before{display:none;}.visual3d-sect__bg{position:static;z-index:auto;height:326px;}.visual3d-sect__container{padding-top:30px;padding-bottom:0;}.visual3d-sect__content{max-width:none;}.visual3d-sect__title{margin-bottom:13px;font-size:30px;line-height:1.2em;}.visual3d-sect__text{max-width:none;margin-bottom:30px;font-weight:400;font-size:14px;}.visual3d-sect__btn{height:auto;padding:13px 20px;background-color:#141414;border-color:#141414;color:#fff;font-size:12px;line-height:20px;letter-spacing:.035em;}}/* Ссылка «3D-визуализация» в блоке кнопок шапки. Соседи там — иконки со скрытыми подписями, а этот пункт нужен надписью, поэтому повторяем вид ссылок основной навигации: тот же кегль, капс и подчёркивание, которое выезжает при наведении. Цвет отдельными правилами — штатные завязаны на .main-header__nav, а ссылка лежит в другом блоке. Ниже 992px блок становится нижней панелью телефона: там ссылку прячем, пункт остаётся в выезжающем меню. */.main-header__visual3d{position:relative;display:inline-block;color:#fff;font-size:14px;line-height:1.57143em;text-transform:uppercase;white-space:nowrap;}.main-header--sub .main-header__visual3d,.main-header.sticky .main-header__visual3d{color:#141414;}.main-header__visual3d::before{content:"";display:block;position:absolute;right:0;bottom:-2px;width:0;height:2px;background-color:#8c7a63;-webkit-transition:width .4s cubic-bezier(.25, .8, .25, 1);-o-transition:width .4s cubic-bezier(.25, .8, .25, 1);transition:width .4s cubic-bezier(.25, .8, .25, 1);}.main-header__visual3d:hover::before,.main-header__visual3d:active::before{left:0;width:100%;}@media only screen and (max-width:992px){.main-header__visual3d{display:none;}}/* --- 18914: на большой плитке видно, что товар уже в избранном --- *//* Кнопка большой плитки — не круглая кнопка с подсказкой, как на обычной (там активное состояние даёт .prods-sect__prod-btn.active), а строка «надпись + сердечко». Отмечаем её закрашенным сердцем: класс subactive ставит custom_library.js, он же меняет надпись на «В избранном». */.prods-sect__prod-btn--fav .prods-sect__prod-fav-fill{display:none;fill:#8c7a63;}.prods-sect__prod-btn--fav.subactive .prods-sect__prod-fav-fill{display:inline;}.prods-sect__prod-btn--fav.subactive .prods-sect__prod-fav-line{display:none;}/* ==== 14. Попап 3D-визуализации на лендинге (19014) ==== Кнопка баннера «Получить 3D-визуализацию бесплатно» открывает выезжающий диалог с содержимым блока «Покажем, как может выглядеть ваш зал» со страницы /3d-visual/: сверху заголовок, текст, почта и мессенджеры, под ними форма. Разметка — в подвале лендинга (local/templates/landing/footer.php). Сам диалог, скролл содержимого и мобильная раскладка (шторка снизу с max-height: 94dvh) уже описаны в app.min.css для .stand-dialog — здесь только то, что нужно поправить из-за узкой колонки диалога. *//* Шаблон формы размечен под широкую колонку страницы: поля «Имя» и «Телефон» стоят в две колонки с зазором 40px, и app.min.css разводит их в одну только ниже 576px. В диалоге полезная ширина — 566px на десктопе и 396px в вилке 577-768px, поэтому две колонки схлопываем раньше, а зазор уменьшаем. */.stand-dialog--visual3d .call-sect__form-inputs{grid-gap:20px 30px;}@media only screen and (max-width:768px){.stand-dialog--visual3d .call-sect__form-inputs{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:20px;}}/* Отступы блока с почтой и мессенджерами задаёт .stand-dialog__container (gap 40/30/24px по брейкпоинтам) — собственный margin-top блока к нему прибавляется и разрывает колонку. */.stand-dialog--visual3d .call-sect__aside-footer{margin-top:0;}/* anim__down прячет элемент (visibility: hidden; opacity: 0) до тех пор, пока waypoint не увидит его в окне. Содержимое закрытого диалога он не увидит никогда — диалог зафиксирован и сдвинут за правый край, — так что поля формы остались бы невидимыми. Показываем их сразу: выезд диалога и есть анимация появления. Правило намеренно ограничено этим диалогом — в остальных классов anim__down нет. */.stand-dialog--visual3d .anim__down{visibility:visible;opacity:1;-webkit-animation:none !important;animation:none !important;}/* ==== 15. Кнопка «К товару» на большой плитке (19028) ==== Третья кнопка в строке .prods-sect__prod-ctrls рядом с «в корзину» и «Запросить КП». Своих стилей у неё нет — в разметке она получает класс .prods-sect__prod-call и выглядит ровно как «Запросить КП». Здесь только то, что нужно строке кнопок, чтобы третий элемент её не сломал. *//* Строка кнопок была flex без переноса: на узких экранах три кнопки вылезли бы за карточку. Разрешаем перенос — при нехватке ширины кнопка уходит на вторую строку вместо горизонтальной прокрутки. Без привязки к .prods-sect__prod--screen: класс .prods-sect__prod-ctrls есть только в трёх шаблонах большой плитки (catalog.item main / choise / main_hit), а модификатор --screen у choise закомментирован — правило со --screen туда бы не дошло. */.prods-sect__prod-ctrls{-ms-flex-wrap:wrap;flex-wrap:wrap;row-gap:10px;}@media only screen and (max-width:576px){/* app.min.css фиксирует строке высоту 40px — при переносе вторая строка обрезалась бы. Оставляем 40px как минимум, но даём вырасти. */.prods-sect__prod--screen .prods-sect__prod-footer .prods-sect__prod-ctrls{height:auto;min-height:40px;}/* margin: 0 0 0 auto прижимал «Запросить КП» к правому краю, когда белая кнопка была одна. С двумя они разъехались бы по краям строки — ставим их рядом, сразу за кнопкой корзины. */.prods-sect__prod--screen .prods-sect__prod-call{margin:0;}}/* ==== 16. Табы над фильтром: «Модификация» у стульев и подстолий (19028), «Форма» у столешниц (19194) — разметка и стили общие ==== Кнопки «Стандартные / Барные / Полубарные» над строкой фильтров. Разметка — в шаблоне умного фильтра, выводится только на /catalog/stulya/ и /catalog/podstolya/ (у подстолий две кнопки, без «Полубарных»). Цвета из макета: бежевая заливка активной кнопки #e8e0d6, рамка блока — штатная #e4e1db. */.dir-sect__modif{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:12px;}.dir-sect__modif-label{font-size:13px;font-weight:600;color:#141414;}.dir-sect__modif-tabs{display:-webkit-box;display:-ms-flexbox;display:flex;gap:4px;padding:8px;background-color:#fff;border:1px solid #e4e1db;border-radius:8px;border-radius:var(--bdrs);}/* flex: 1 1 0 + min-width: 0 — кнопки одинаковой ширины независимо от длины надписи, как в макете; сколько их, две или три, неважно. */.dir-sect__modif-tab{-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;min-width:0;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;padding:5px 10px;border-radius:8px;border-radius:var(--bdrs);font-size:14px;line-height:1.2;text-align:center;text-decoration:none;color:#444;cursor:pointer;-webkit-transition:.25s ease-out;transition:.25s ease-out;}.dir-sect__modif-tab:hover,.dir-sect__modif-tab:focus{color:#141414;}.dir-sect__modif-tab.is-active{background-color:#e8e0d6;color:#222;font-weight:700;}/* Десктоп: общая панель модификаций/формы занимает первую строку грида. Фильтры и сортировка остаются во второй строке и не задают её ширину. */@media only screen and (min-width:1366px){.dir-sect__head--modif{display:grid;/* Сортировка занимает только свою ширину; всё остальное — фильтрам. Верхняя панель на две колонки не задаёт размер первой колонки. */grid-template-columns:minmax(0, 1fr) max-content;-webkit-box-align:start;-ms-flex-align:start;align-items:start;row-gap:25px;}/* Единый размер всех каталоговых панелей, как у стульев при 1920px. Не зависит от количества фильтров или количества кнопок. */.dir-sect__head--modif .dir-sect__modif{grid-column:1/-1;grid-row:1;width:1133px;max-width:100%;justify-self:start;}.dir-sect__head--modif .dir-sect__filters{grid-column:1;grid-row:2;}.dir-sect__head--modif .dir-sect__sort{grid-column:2;grid-row:2;justify-self:end;}}/* Ниже 1366px шапка уже грид (40px + 1fr) с кнопками «Сортировка» и «Фильтры», а сама панель фильтров уезжает во всплывающую шторку. Табы растягиваем на всю ширину и ставим строкой выше кнопок. */@media only screen and (max-width:1365.98px){.dir-sect__head--modif .dir-sect__modif{grid-column:1/-1;margin-bottom:5px;}.dir-sect__modif-label{font-size:12px;font-weight:400;color:hsla(0, 0%, 8%, .5);}.dir-sect__modif-tabs{gap:2px;padding:6px;}.dir-sect__modif-tab{min-height:36px;padding:4px 6px;font-size:12px;}}/* ==== 17. Общий полноэкранный прелоадер (19028) ==== Два кольца в цветах сайта поверх матового стекла вместо гифки из ядра. Показывают его две точки: оформление заказа (startLoader в order_ajax.js шаблона sale.order.ajax) и фильтр каталога при аякс-перерисовке (showCatalogWait в script.js шаблона catalog.smart.filter). Стили жили в lazy-delivery.css шаблона заказа, но тот подключается только на /order/, поэтому переехали сюда — custom.css есть на всех страницах. */.tcn-order-loader{position:relative;width:64px;height:64px;animation:tcn-order-loader-in .25s ease-out both;}.tcn-order-loader span{position:absolute;top:0;left:0;width:100%;height:100%;box-sizing:border-box;border:3px solid transparent;border-radius:50%;}/* внешнее кольцо — бежевый акцент сайта, по часовой */.tcn-order-loader span:first-child{border-top-color:#8c7a63;border-right-color:rgba(140, 122, 99, .3);animation:tcn-order-loader-spin 1.1s cubic-bezier(.5, .1, .5, .9) infinite;}/* внутреннее — терракота, против часовой и быстрее */.tcn-order-loader span + span{top:11px;left:11px;width:42px;height:42px;border-top-color:#b86a4a;border-left-color:rgba(184, 106, 74, .25);animation:tcn-order-loader-spin .8s cubic-bezier(.5, .1, .5, .9) infinite reverse;}/* белую подложку ядра делаем матовым стеклом — как у диалогов сайта */.tcn-order-loader-overlay{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);}@keyframes tcn-order-loader-spin{to{transform:rotate(360deg);}}@keyframes tcn-order-loader-in{from{opacity:0;transform:scale(.85);}}/* Кому анимация мешает — оставляем медленное равномерное вращение. */@media (prefers-reduced-motion: reduce){.tcn-order-loader{animation:none;}.tcn-order-loader span{animation-duration:2.4s;animation-timing-function:linear;}}/* Строка фильтров на десктопе стояла на z-index: 10000 — вровень с шапкой и с оверлеем прелоадера, и из-за порядка в разметке перекрывала анимацию загрузки при применении фильтра. Ей достаточно быть выше плитки товаров: выпадающие блоки свойств раскрываются поверх карточек, а карточки позиционируются без z-index. Правило только для десктопа. Ниже 1366px .dir-sect__filters — выезжающая шторка, которой 10000 нужны, чтобы перекрыть шапку; прелоадеру она там не мешает — onApplyClick снимает у шторки active до его показа. */@media only screen and (min-width:1366px){.dir-sect__filters{z-index:10;}}/* Детальная: больше 4 размеров (19292, 20882). До 5 кнопок в строке, но не уже 130px: на узких экранах их становится меньше, и подписи вида «130×75×115 см» не обрезаются. До 576px остаётся горизонтальная прокрутка из мобильного блока выше. «Под заказ» занимает место рядом с размерами, а если не помещается — всю следующую строку. */@media only screen and (min-width: 577px){.card-sect__radios-items--many{display:flex;flex-wrap:wrap;}.card-sect__radios-items--many .prods-sect__prod-radio{flex:1 0 max(calc((100% - 32px) / 5), 130px);}}/* Главная, мобильные: нижнее меню не закрывает первый экран (19608). Меню (.main-header__ctrls) приклеено к низу окна до 992px включительно — тот же порог, что и у правила в app.min.css, которое делает его fixed. Высота первого блока считалась «экран минус 65px» под это меню (а на планшетах меню и вовсе лежало поверх блока). По задаче меню должно появляться только после того, как посетитель ушёл ниже первого экрана, а освободившееся место отдаётся слайдеру. Класс wrapper--main ставит header.php (только главная), is-nav-visible — common.js: на первом экране меню спрятано, ниже появляется при прокрутке вниз и убирается при прокрутке вверх. Горизонтальное центрирование у меню сделано через translateX(-50%), поэтому в спрятанном состоянии сдвигаем по обеим осям сразу — иначе меню уедет вправо. */@media only screen and (max-width: 992px){.wrapper--main .main-sect,.wrapper--main .main-sect__slider .swiper{height:calc(100dvh / var(--zoom, 1));}.wrapper--main .main-header__ctrls{transform:translate(-50%, 100%);transition:transform .25s ease;}.wrapper--main.is-nav-visible .main-header__ctrls{transform:translate(-50%, 0);}/* Нижнее меню лежит внутри .main-header, а шапка при прокрутке вниз получает класс sticky и вместе с ним opacity: 0 — и гасит меню заодно, ровно в тот момент, когда мы его показываем. Отсюда и было «появилось и тут же пропало»: меню возвращалось только при прокрутке вверх, когда шапка всплывает обратно (slide-down), и сразу пряталось нашим классом. Прозрачность шапке на главной не нужна: при sticky она и так уезжает за верх экрана (top: calc(var(--hh) * -1)). */.wrapper--main .main-header.sticky{opacity:1;}}/* Пользователям с отключёнными анимациями — без выезда, просто появление. */@media only screen and (max-width: 992px) and (prefers-reduced-motion: reduce){.wrapper--main .main-header__ctrls{transition:none;}}/* Блок «Состав» на детальной комплекта (19658): те же кнопки, что у размеров, но подписи длинные — «Стол «Хантон» квадратный на подстолье «Квадрат» — 1 шт.». Размерные кнопки растягиваются поровну (flex: 1 0 0) и не переносят строки, поэтому здесь ширину отдаём содержимому, разрешаем перенос и снимаем фиксированную высоту в 48px. */.card-sect__radios--set .card-sect__radios-items .prods-sect__prod-radio{flex:0 1 auto;max-width:100%;height:auto;}.card-sect__radios--set .card-sect__radios-items .prods-sect__prod-radio>span{white-space:normal;height:auto;min-height:48px;padding:12px 20px;text-align:left;}/* Cookie-баннер и нижнее меню (19608). Меню приклеено к низу окна на всех ширинах до 992px и ростом 65px, а баннер стоял в 10–20px от низа и перекрывал его почти целиком (замер: 55 из 65px на телефоне, 45 — на планшете), пока посетитель не нажмёт «Принять». Поднимаем баннер над меню; правило идёт после мобильных, чтобы перебить bottom: 10px. */@media only screen and (max-width: 992px){.cookie-banner{bottom:75px;}}/* Карточка товара в баннере главной (20022). Ширина 240px задана в app.min.css сразу в нескольких медиазапросах; здесь задаём её один раз для всех ширин — правило идёт последним, а медиазапросы специфичность не повышают. Замер: в строке «цена — старая цена — плашка» на 1440px помещается 152px, а содержимому нужно 178px («-1 500 р.») и 184px («-12 500 р.»). Плашка переносилась на вторую строку и до правки формата, просто с коротким «-1500р.» это было не так заметно. Чтобы она встала в строку, карточке нужно около 300px — см. комментарий в задаче. */.main-sect__examp-card{width:245px;}/* 20924: у части согласий подпись находится рядом с label, а квадрат — span. SVG-вариант custom-check уже поддерживается правилами app.min.css. */.call-sect__form-check input[type="checkbox"].is-invalid ~ span{border-color:#dc3545;}.call-sect__form-confirm:has(input[type="checkbox"].is-invalid),.call-sect__form-confirm:has(input[type="checkbox"].is-invalid) > div,.call-sect__form-confirm:has(input[type="checkbox"].is-invalid) a,.lp-form__agree:has(input.is-invalid),.lp-form__agree:has(input.is-invalid) a{color:#dc3545;}.lp-form__agree input[type="checkbox"].is-invalid{outline:1px solid #dc3545;outline-offset:2px;}/* 21104: ссылки на отдельные карточки станций, общий блок для всех экранов. */.card-sect__station-tabs{display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0;list-style:none;}.card-sect__station-tabs > li{display:flex;min-width:0;max-width:100%;}.card-sect__station-tabs .prods-sect__prod-radio{display:flex;align-items:center;min-height:44px;max-width:100%;cursor:pointer;text-decoration:none;}.card-sect__station-tabs [aria-current="page"]{cursor:default;}.card-sect__station-tabs a:focus-visible{outline:2px solid #8c7a63;outline-offset:3px;}/* 21382: плашка у цены, по макету; адрес пока не задан. */.product-price-with-cheaper,.product-price-with-cheaper--big,.cheaper-badge-context{container:cheaper-price/inline-size;}.product-price-with-cheaper{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 12px;margin-bottom:10px;}.product-price-with-cheaper > .prods-sect__prod-price{margin:0;order:0;}.product-price-with-cheaper > .product-cheaper-badge{order:1;}.product-cheaper-badge{display:inline-flex;align-items:center;justify-content:space-between;flex:0 0 auto;gap:10px;width:200px;max-width:100%;height:40px;padding:6px 10px 6px 12px;box-sizing:border-box;border:0;border-radius:999px;background:#f9e6de;color:#ba6242;font:400 14px/1 Manrope,sans-serif;text-decoration:none;text-transform:none;white-space:nowrap;cursor:default;}.product-cheaper-badge:hover{color:#ba6242;}.product-cheaper-badge .product-cheaper-badge__text{flex:1;font-size:inherit;line-height:inherit;color:inherit;text-decoration:none;}.product-cheaper-badge__tag{flex:0 0 auto;width:20px;height:20px;}.product-cheaper-badge .product-cheaper-badge__arrow{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:26px;height:26px;padding:0;border-radius:50%;background:#d98160;color:#fff;text-decoration:none;}.product-cheaper-badge__arrow svg{width:12px;height:12px;}.product-price-with-cheaper--big > .product-cheaper-badge{margin-left:auto;}@container cheaper-price (max-width: 320px){.product-cheaper-badge{width:100%;height:28px;padding:4px 8px;gap:6px;font-size:10px;}.product-cheaper-badge__tag{width:12px;height:12px;}.product-cheaper-badge .product-cheaper-badge__arrow{width:18px;height:18px;}.product-cheaper-badge__arrow svg{width:10px;height:10px;}}/* Компактная плашка нужна и на планшетах/небольших ноутбуках (21382). */@media (max-width: 1360px){.product-price-with-cheaper{flex-direction:column;align-items:flex-start;}.product-cheaper-badge{width:max-content;height:28px;padding:4px 8px;gap:6px;font-size:10px;}.product-price-with-cheaper--big > .product-cheaper-badge{margin-left:0;align-self:flex-start;}.product-cheaper-badge__tag{width:12px;height:12px;}.product-cheaper-badge .product-cheaper-badge__arrow{width:18px;height:18px;}.product-cheaper-badge__arrow svg{width:10px;height:10px;}}@media (max-width: 576px){.product-price-with-cheaper{/* Название и обёртка имеют общий order: 2, поэтому сохраняется порядок HTML: название → цена с плашкой → характеристики. */order:2;}}/* 21436: один отзыв клиента на детальной странице проекта. */.project-review{margin-top:clamp(40px, 4vw, 80px);}.project-review__card{display:grid;grid-template-columns:minmax(0, 1.15fr) minmax(0, 1fr);gap:clamp(24px, 3vw, 56px);margin-top:28px;padding:clamp(24px, 3vw, 48px);background:#f5f2ed;border-radius:12px;}.project-review__card--text{grid-template-columns:minmax(0, 1fr);}.project-review__content{display:flex;flex-direction:column;gap:28px;min-width:0;}.project-review__quote{margin:0;font-size:clamp(18px, 1.25vw, 24px);line-height:1.55;overflow-wrap:anywhere;}.project-review__quote::before{content:'“';display:block;color:#8c7a63;font:64px/0.8 Georgia,serif;margin-bottom:14px;}.project-review__quote p{margin:0;}.project-review__author{margin-top:auto;border-top:1px solid #e4e1db;padding-top:20px;}.project-review__name{margin:0;font-size:18px;font-weight:700;line-height:1.4;overflow-wrap:anywhere;}.project-review__venue{margin:6px 0 0;color:#6e6255;font-size:16px;line-height:1.5;overflow-wrap:anywhere;}.project-review__photos{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));align-content:start;gap:12px;min-width:0;}.project-review__photo{display:block;overflow:hidden;aspect-ratio:4/3;border-radius:8px;background:#e4e1db;}.project-review__photo:only-child{grid-column:1/-1;}.project-review__photo img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .25s;}.project-review__photo:hover img{transform:scale(1.03);}.project-review__photo:focus-visible{outline:2px solid #8c7a63;outline-offset:4px;}@media (max-width: 767px){.project-review__card{grid-template-columns:minmax(0, 1fr);margin-top:20px;padding:20px;gap:24px;}.project-review__quote{font-size:18px;}.project-review__content{gap:20px;}.project-review__name{font-size:16px;}.project-review__venue{font-size:14px;}.project-review__photos{gap:8px;}}/* Стрелка выбора города наследует цвет подписи, в том числе на баннерах. */.main-sect__city-select .main-sect__city-btn{color:inherit;}.main-sect__city-select .main-sect__city-btn svg{fill:none;width:8px;height:5px;}.main-sect__city-select > em{color:inherit;filter:none;}.main-sect__city-select > em svg{fill:none;}/* 21566: квадратная область галереи существует до и после инициализации Swiper. */.card-sect__slider{aspect-ratio:1/1;}.card-sect__slider > .swiper{width:100%;height:auto;aspect-ratio:1/1;}