/* ====================================================================== TDPD — стили редизайна td-pd.ru. ОДИН файл на весь редизайн. Подключается сразу после custom.css, поэтому порядок каскада тот же, что был, когда всё это лежало хвостом внутри custom.css. Источник макетов — redesign-2026-09/*.dc.html. Правило: новые правки дописывать не хвостом, а В СВОЙ раздел ниже, иначе снова получим стопку блоков, перебивающих друг друга. ====================================================================== */ /* ===== TDPD: редизайн мобильного меню ===== */ #menu-mobile.m-panel-box{background:#fff} #menu-mobile .menu-mobile-header{font-size:20px;font-weight:600;color:#20242c;padding:16px 18px;background:#fff} /* убрать лишнюю служебную полосу "Список категорий" */ #menu-mobile .navbar-header{display:none!important} /* блок "Информация" — без серой заливки */ #menu-mobile .custom-info-link{background:#fff!important} #menu-mobile .custom-info-link .parent-title-toggle{color:#20242c} /* выравнивание блока "Информация" и его пунктов по левому краю со списком категорий: контент категорий начинается на 25px (ul padding 10 + строка padding 15), а блок был на 15px — доводим padding-left до 25px */ #menu-mobile .custom-info-link{padding-left:25px!important} /* список категорий */ #menu-mobile ul.menu{padding:6px 10px} #menu-mobile ul.menu > li{border-bottom:1px solid #f1f1f1;margin:0} #menu-mobile ul.menu > li:last-child{border-bottom:none} #menu-mobile ul.menu > li.active{background:#eef2fe;border-radius:10px} /* строка категории: под палец, иконка + текст + место под +/x */ #menu-mobile #menu-mobile-box ul.menu > li > a.dropdown-toggle{display:flex;align-items:center;gap:12px;padding:13px 8px;min-height:50px;box-sizing:border-box;font-size:15px;font-weight:500;color:#20242c!important} #menu-mobile #menu-mobile-box ul.menu > li.active > a.dropdown-toggle{color:#2f55d4!important} #menu-mobile #menu-mobile-box ul.menu > li > a.dropdown-toggle svg{width:22px;height:22px;flex:0 0 22px} #menu-mobile #menu-mobile-box ul.menu > li > a.dropdown-toggle .ion-chevron-down{display:none} /* +/x переключатель — вправо, приглушённо */ #menu-mobile .parent-title-toggle{color:#9aa0a6!important;right:6px} /* подменю (раскрытая категория) */ #menu-mobile .dropdown-menu{box-shadow:none!important;border:none!important;padding:2px 0 10px} #menu-mobile .megamenu-parent-title{font-size:14px;font-weight:600;color:#20242c!important;padding:8px 6px} #menu-mobile .dropdown-menu ul li a{color:#5a5a5a!important;font-size:14px;padding:7px 6px} /* поиск по категориям внутри меню */ #menu-mobile input[type="text"],#menu-mobile .search input{border:1px solid #e2e2e2!important;border-radius:10px!important;height:42px!important;padding:0 12px!important;background:#f7f8fa!important} /* TDPD: вернуть иконки категорий — тема их прятала через display:none И уводила за левый край через margin-left:-40px */ #menu-mobile #menu-mobile-box ul.menu > li > a.dropdown-toggle svg{display:inline-block!important;margin:0!important} /* TDPD: список категорий скроллится отдельно, чтобы поиск сверху и блок связи снизу были видны — не трогаем display/position самой панели, чтобы не сломать открытие/закрытие */ #menu-mobile-box{height:auto!important;max-height:calc(100vh - 300px)!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch} /* TDPD: блок «Заказать звонок»/телефон прижат к низу панели, чтобы не уезжал под экран */ #menu-mobile .tdpd-mmenu-cta{position:absolute;left:0;right:0;bottom:0;padding:14px 18px 20px;background:#fff;border-top:1px solid #ededed;box-shadow:0 -4px 12px rgba(0,0,0,.06);z-index:5} /* ===== TDPD: полировка полей поиска и блока связи в мобильном меню ===== */ /* оба поля поиска — верхний «Поиск по каталогу» (.tdpd-mmenu-search) и live-фильтр категорий «Поиск категорий» (.filterinput) — единый аккуратный стиль с иконкой-лупой слева */ #menu-mobile .tdpd-mmenu-search input, #menu-mobile .filterinput{width:100%!important;box-sizing:border-box!important;height:46px!important;border:1px solid #e9eaee!important;border-radius:12px!important;margin:0!important;padding:0 14px 0 42px!important;font-size:15px!important;color:#20242c!important;background:#f4f5f7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%239aa0a6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='20' y1='20' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat 14px center!important;background-size:18px 18px!important} #menu-mobile .tdpd-mmenu-search input::placeholder, #menu-mobile .filterinput::placeholder{color:#9aa0a6!important;opacity:1!important} #menu-mobile .tdpd-mmenu-search input:focus, #menu-mobile .filterinput:focus{border-color:#2f55d4!important;background-color:#fff!important;outline:none!important;box-shadow:0 0 0 3px rgba(47,85,212,.12)!important} /* контейнер фильтра категорий: убрать серую подложку и правую «лупу»-псевдоэлемент темы */ #menu-mobile .style-for-form{background:transparent!important;padding:0 10px 6px!important;border-radius:0!important} #menu-mobile .style-for-form::after{display:none!important} /* блок связи снизу: телефон крупный по центру + иконка-гарнитура, город крупнее по центру + пин */ #menu-mobile .tdpd-mmenu-cta > div:nth-of-type(1){margin-top:12px!important} #menu-mobile .tdpd-mmenu-cta > div:nth-of-type(1) a{font-size:19px!important;font-weight:700!important;color:#20242c!important} #menu-mobile .tdpd-mmenu-cta > div:nth-of-type(1) a::before{content:"";display:inline-block;width:18px;height:18px;margin-right:8px;vertical-align:-3px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%232f55d4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 14v-2a9 9 0 0 1 18 0v2'/%3E%3Cpath d='M21 16a2 2 0 0 1-2 2h-2v-6h2a2 2 0 0 1 2 2z'/%3E%3Cpath d='M3 16a2 2 0 0 0 2 2h2v-6H5a2 2 0 0 0-2 2z'/%3E%3C/svg%3E") no-repeat center/contain} #menu-mobile .tdpd-mmenu-cta > div:nth-of-type(1) span{font-size:13px!important;color:#9aa0a6!important} #menu-mobile .tdpd-mmenu-cta > div:nth-of-type(2){font-size:14px!important;color:#8a9099!important;margin-top:6px!important} #menu-mobile .tdpd-mmenu-cta > div:nth-of-type(2)::before{content:"";display:inline-block;width:14px;height:14px;margin-right:5px;vertical-align:-2px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238a9099' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") no-repeat center/contain} /* иконка-трубка на кнопке «Заказать звонок» */ #menu-mobile .tdpd-mmenu-cta > a::before{content:"";display:inline-block;width:17px;height:17px;margin-right:8px;vertical-align:-3px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.81.36 1.6.68 2.34a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.74-1.24a2 2 0 0 1 2.11-.45c.74.32 1.53.55 2.34.68A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") no-repeat center/contain} /* список чуть короче, чтобы подросший блок связи не наезжал на категории */ #menu-mobile-box{max-height:calc(100vh - 315px)!important} /* ===== TDPD: мобильная шапка-«островок» ===== */ @media(max-width:991px){ /* единая подложка-островок под обе фикс-панели шапки (#top слева: бургер+поиск; header справа: лого+телефон+корзина) */ .wrapper::before{content:"";position:fixed;top:6px;left:8px;right:8px;height:52px;background:#fff;border-radius:14px;box-shadow:0 6px 20px rgba(20,25,60,.16);z-index:120;pointer-events:none} /* поднять обе панели на островок и сделать их фон прозрачным, чтобы был виден островок-подложка */ html body nav#top{top:6px!important;height:52px!important;background:transparent!important;padding-left:6px!important} html body header.scroll-fix{top:6px!important;height:52px!important;background:transparent!important;box-shadow:none!important} /* КОРЕНЬ ПРОБЛЕМЫ скругления: у темы есть собственный псевдоэлемент header.scroll-fix::before — белая полоса во всю ширину (left:0;right:0), border-radius:0, со своей тенью; он рисуется поверх островка (стекинг-контекст header z-121 > островок z-120) и даёт квадратные углы. Глушим его фон и тень, чтобы был виден скруглённый .wrapper::before */ html body header.scroll-fix::before{background:transparent!important;box-shadow:none!important} /* внутренний контейнер правой панели тоже белый с квадратными углами — перекрывал правый угол островка; делаем прозрачным */ html body header.scroll-fix .box-inner{background:transparent!important} /* контент внутренних страниц не должен уезжать под приподнятую шапку (низ островка = 58px) */ .breadcrumbs{margin-top:66px!important} } /* ===== TDPD: карточки товаров в листинге категории (#res-products) ===== Макет: карточки-«плитки» с рамкой, равной высоты; порядок «название → цена → постоянная кнопка В корзину». ВАЖНО: работает В ПАРЕ с правкой category.tpl — блок .box-cart перенесён из .image в конец .caption. */ /* сетка: равная высота карточек в ряду (Bootstrap-колонки → флекс). Исключаем .pagination-row */ :is(#res-products,.tdb-sale-row) > .row:not(.pagination-row){display:flex;flex-wrap:wrap;align-items:stretch} :is(#res-products,.tdb-sale-row) > .row:not(.pagination-row) > .product-items{display:flex;float:none;margin-bottom:16px} /* карточка-плитка */ :is(#res-products,.tdb-sale-row) .product-thumb{width:100%;height:100%;display:flex;flex-direction:column;margin:0;padding:12px;background:#fff;border:1px solid #e8eaed;border-radius:14px;transition:box-shadow .2s ease,border-color .2s ease} :is(#res-products,.tdb-sale-row) .product-thumb:hover{position:static!important;transform:none!important;right:auto!important;left:auto!important;border-color:#c9d2f7;box-shadow:0 8px 24px rgba(20,25,60,.10)} :is(#res-products,.tdb-sale-row) .product-thumb .product-item{display:flex;flex-direction:column;flex:1 1 auto;height:auto} /* картинка в мягкой плитке */ :is(#res-products,.tdb-sale-row) .product-thumb .image{background:#f7f8fa;border-radius:10px;overflow:hidden} /* убрать пустые звёзды-рейтинг, hover-иконки (избранное/сравнить/быстрый просмотр) и строку производителя */ :is(#res-products,.tdb-sale-row) .product-thumb .caption .rating{display:none!important} :is(#res-products,.tdb-sale-row) .product-thumb .button-group{display:none!important} :is(#res-products,.tdb-sale-row) .product-thumb .caption .manufacture-product{display:none} /* подпись: флекс-колонка; порядок ПРИНУДИТЕЛЬНО название(1) → цена(2) → кнопка(низ). Тема ставит .price{order:1}, из-за чего цена оказывалась над названием — перебиваем order. */ :is(#res-products,.tdb-sale-row) .product-thumb .caption{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;padding:12px 4px 2px;text-align:left} :is(#res-products,.tdb-sale-row) .product-thumb .caption h4{order:1;clear:both;margin:0 0 8px;padding:0;min-height:36px} :is(#res-products,.tdb-sale-row) .product-thumb .caption h4 a{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:14px;line-height:18px;font-weight:500;color:#20242c;letter-spacing:0;text-transform:none} :is(#res-products,.tdb-sale-row) .product-thumb .caption h4 a:hover{color:#3f3ffa;text-decoration:none} :is(#res-products,.tdb-sale-row) .product-thumb .caption .price{order:2;margin:0 0 12px;font-size:18px;line-height:22px;font-weight:700;color:#20242c} :is(#res-products,.tdb-sale-row) .product-thumb .caption .price .price-new{font-size:18px;font-weight:700;color:#e5372b} :is(#res-products,.tdb-sale-row) .product-thumb .caption .price .price-old{margin-left:6px;font-size:13px;font-weight:400;color:#9aa0a6;text-decoration:line-through} /* постоянная кнопка «В корзину» на всю ширину, прижата к низу карточки */ :is(#res-products,.tdb-sale-row) .product-thumb .box-cart{order:5;position:static!important;opacity:1!important;bottom:auto;margin:auto 0 0;padding:0;text-align:center} :is(#res-products,.tdb-sale-row) .product-thumb .box-cart .button-cart{display:block;width:100%;height:auto;padding:11px 12px;line-height:1.2;font-size:14px;font-weight:600;color:#fff;background:#3f3ffa;border:0;border-radius:9px;box-shadow:none;text-transform:none} :is(#res-products,.tdb-sale-row) .product-thumb .box-cart .button-cart:hover{background:#2f2fe0;color:#fff} :is(#res-products,.tdb-sale-row) .product-thumb .box-cart .button-cart span{display:inline} /* ===== TDPD: страница товара — первый экран, блок доверия, липкая панель ===== Работает В ПАРЕ с product.tpl (блоки .tdpd-instock + .tdpd-trust) и main.js (панель #tdpd-sticky-buy). */ /* скрыть «Отзывы (0)»/пустые звёзды на первом экране (в B2B отзывов нет; отзывы остаются во вкладках ниже) */ #product-info-right > .rating{display:none!important} /* заголовок компактнее, производитель приглушён */ #product-info-right h1{font-size:22px;line-height:1.3;font-weight:500;color:#20242c;margin:0 0 12px} #product-info-right .manufacture-product{margin:0 0 4px} #product-info-right .manufacture-product a{font-size:13px;color:#9aa0a6;text-transform:none} /* крупная цена */ #product-info-right > .price{display:block;font-size:30px;line-height:1.1;font-weight:500;color:#20242c;margin:0 0 6px} #product-info-right > .price .price-new{color:#e5372b} #product-info-right > .price .price-old{margin-left:8px;font-size:18px;font-weight:400;color:#9aa0a6;text-decoration:line-through} /* индикатор наличия */ .tdpd-instock{display:inline-flex;align-items:center;gap:6px;margin:0 0 14px;font-size:13px;font-weight:500;color:#2fa960} .tdpd-instock svg{width:16px;height:16px} /* артикул — приглушённо */ #product-info-right ul.list-unstyled{margin:0 0 14px;padding:0} #product-info-right ul.list-unstyled li{font-size:13px;color:#8a9099} #product-info-right ul.list-unstyled li span{color:#5a5f66} /* зона покупки: степпер + «В корзину» в одну строку, «Купить в один клик» во всю ширину ниже; избранное/сравнение скрыты */ #product-info-right #product .form-group{display:grid;grid-template-columns:auto 1fr;gap:10px 12px;align-items:center} #product-info-right #product .number{grid-column:1;margin:0} #product-info-right #product #button-cart, #product-info-right #product #button-feedback{grid-column:2} #product-info-right #product #button-one-click{grid-column:1 / -1} #product-info-right #product .btn-group{display:none} #product-info-right .frame-change-count{display:flex;align-items:center;height:46px;margin:0;border:1px solid #e2e4e9;border-radius:9px;overflow:hidden;margin-top: 5px;} #product-info-right .frame-change-count .btn-minus button, #product-info-right .frame-change-count .btn-plus button{width:36px;height:44px;padding:0;border:0;background:transparent;color:#6a7078;font-size:16px} #product-info-right .frame-change-count input.plus-minus{width:40px;height:44px;padding:0;border:0;background:transparent;text-align:center;font-size:15px} #product-info-right #button-cart{width:100%;height:46px;margin:0;border-radius:9px;font-size:15px;font-weight:500;background:#3f3ffa!important;border-color:#3f3ffa!important;color:#fff} #product-info-right #button-cart:hover{background:#2f2fe0!important;border-color:#2f2fe0!important} #product-info-right #button-one-click{width:100%;height:44px;margin:0;border-radius:9px;font-size:14px;font-weight:500;background:#fff!important;color:#3f3ffa!important;border:1px solid #cdd0f7!important} #product-info-right #button-one-click:hover{background:#f4f5ff!important;color:#2f2fe0!important} /* блок доверия 2×2 */ .tdpd-trust{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0 0} .tdpd-trust-item{display:flex;gap:9px;align-items:flex-start;padding:10px 11px;background:#f7f8fa;border-radius:10px} .tdpd-trust-item svg{width:20px;height:20px;flex:0 0 20px;margin-top:1px;color:#3f3ffa} .tdpd-trust-item span{font-size:12.5px;line-height:1.35;color:#42474f} /* поле количества — убрать чёрную рамку (общую рамку рисует внешний .frame-change-count) */ #product-info-right .frame-change-count input.plus-minus, #product-info-right #input-quantity{border:0!important;box-shadow:none!important;outline:none!important;background:transparent} /* артикул — убрать разделительную линию сверху и подтянуть отступ */ #product-info-right ul.list-unstyled{border-top:0!important;margin:6px 0 16px} /* опции товара: заголовок «Доступные опции» + метка опции («Мебель») */ #product-info-right .options-header{margin:20px 0 12px;padding:0;border:0;font-size:16px;font-weight:500;color:#20242c;text-transform:none} #product-info-right .form-group.option{margin:0 0 6px} #product-info-right .form-group.option .control-label{display:block;margin:0 0 8px;font-size:14px;font-weight:500;color:#42474f} /* опции: карточки-переключатели вместо голых радиокнопок; выбранная — синяя рамка + подсветка */ #product-info-right .radio.tdpd-product-radio{display:flex!important;align-items:center;justify-content:space-between;gap:10px;margin:0 0 8px!important;padding:0 14px!important;min-height:50px;border:1px solid #e2e4e9!important;border-radius:10px!important;background:#fff!important;font-size:13px;color:#6a7078;transition:border-color .15s,background .15s} #product-info-right .radio.tdpd-product-radio:last-child{margin-bottom:0!important} #product-info-right .radio.tdpd-product-radio:hover{border-color:#c9d2f7!important} #product-info-right .radio.tdpd-product-radio:has(input:checked){border-color:#3f3ffa!important;background:#f4f5ff!important} #product-info-right .radio.tdpd-product-radio label{display:flex;align-items:center;gap:11px;flex:1 1 auto;margin:0;padding:12px 0;cursor:pointer;font-size:14px;line-height:1.3;color:#20242c;font-weight:400;float:none} #product-info-right .radio.tdpd-product-radio label.selected{font-weight:500} #product-info-right .radio.tdpd-product-radio input[type=radio]{width:18px;height:18px;margin:0;flex:0 0 18px;accent-color:#3f3ffa;cursor:pointer} /* липкая панель покупки (наполнение строит main.js): десктоп — сверху, мобильные — снизу */ #tdpd-sticky-buy{position:fixed;left:0;right:0;top:0;z-index:1000;display:flex;align-items:center;gap:14px;padding:8px 16px;background:#fff;border-bottom:1px solid #eceef1;box-shadow:0 4px 16px rgba(20,25,60,.08);transform:translateY(-100%);transition:transform .25s ease} #tdpd-sticky-buy.visible{transform:translateY(0)} #tdpd-sticky-buy .sb-thumb{flex:0 0 40px;width:40px;height:40px;border-radius:8px;object-fit:contain;background:#f7f8fa} #tdpd-sticky-buy .sb-name{flex:1;min-width:0;font-size:14px;font-weight:500;color:#20242c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #tdpd-sticky-buy .sb-price{font-size:18px;font-weight:500;color:#20242c;white-space:nowrap} #tdpd-sticky-buy .sb-btn{padding:10px 22px;border:0;border-radius:9px;background:#3f3ffa;color:#fff;font-size:14px;font-weight:500;white-space:nowrap;cursor:pointer} #tdpd-sticky-buy .sb-btn:hover{background:#2f2fe0} @media(max-width:768px){ #tdpd-sticky-buy{top:auto;bottom:0;transform:translateY(100%);border-top:1px solid #eceef1;border-bottom:0;box-shadow:0 -4px 16px rgba(20,25,60,.10);padding:8px 12px} #tdpd-sticky-buy.visible{transform:translateY(0)} #tdpd-sticky-buy .sb-thumb,#tdpd-sticky-buy .sb-name{display:none} #tdpd-sticky-buy .sb-price{flex:1} #tdpd-sticky-buy .sb-btn{padding:12px 26px} } /* ===== TDPD: общий вид «успешно отправлено» для попапов ===== Разметку даёт языковой файл (text_success_send / text_success_subscribe), сюда её кладёт AJAX через .html(). */ .tdpd-popup-done{display:flex;flex-direction:column;align-items:center;gap:9px;padding:26px 4px 10px;text-align:center} .tdpd-popup-done svg{width:44px;height:44px;color:#2fa960} .tdpd-popup-done strong{font-size:18px;font-weight:500;color:#20242c} .tdpd-popup-done span{max-width:320px;font-size:13.5px;line-height:1.45;color:#6a7078} /* аккуратный крестик закрытия у обоих переработанных попапов */ #callback-popup .mfp-close, #subscribe-popup .mfp-close{top:4px;right:4px;width:38px;height:38px;padding:0!important;line-height:38px!important;font-size:26px;color:#9aa0a6;opacity:1} #callback-popup .mfp-close:hover, #subscribe-popup .mfp-close:hover{color:#20242c} /* ===== TDPD: попап обратного звонка (#callback-popup) ===== Работает В ПАРЕ с oct_popup_call_phone.tpl (подзаголовок .tdpd-cb-sub, textarea rows="2", с блока комментария снят класс required) и с language/ru-ru/.../oct_popup_call_phone.php. */ #callback-popup{max-width:420px;padding:26px 26px 24px;border-radius:16px;box-shadow:0 24px 60px rgba(20,25,60,.22)} /* заголовок по левому краю, иконка — в синем кружке */ #callback-popup h2.popup-header{display:flex;align-items:center;gap:11px;margin:0 0 7px;font-size:20px;font-weight:500;line-height:1.25;color:#20242c;text-align:left} #callback-popup h2.popup-header i.icon-call-in{flex:0 0 38px;width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;border-radius:11px;background:#f0f0ff;color:#3f3ffa;font-size:18px} #callback-popup .tdpd-cb-sub{margin:0 0 16px;font-size:13px;line-height:1.4;color:#6a7078;text-align:left} /* телефоны — кликабельные плитки; показываем и на десктопе (в теме они были только для мобильных) */ #callback-popup .tdpd-m-phones-popup{display:block!important;margin:0 0 16px} #callback-popup .tdpd-m-phones-popup ul{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none;text-align:left} #callback-popup .tdpd-m-phones-popup ul li{flex:1 1 155px;display:flex;align-items:center;gap:8px;margin:0;padding:9px 12px;border:1px solid #e2e4e9;border-radius:10px;background:#fff;transition:border-color .15s,background .15s} #callback-popup .tdpd-m-phones-popup ul li:hover{border-color:#c9d2f7;background:#f7f8ff} #callback-popup .tdpd-m-phones-popup ul li i{position:static;top:auto;flex:0 0 auto;font-size:14px;color:#3f3ffa} #callback-popup .tdpd-m-phones-popup ul li a.phoneclick{padding-left:0;font-size:14px;font-weight:500;line-height:1.2;color:#20242c!important;text-decoration:none;white-space:nowrap} /* форма */ #callback-popup .popup-form-box, #callback-popup .popup-center{text-align:left} #callback-popup .form-group{margin:0 0 10px} #callback-popup .popup-form-box input[type="text"], #callback-popup .popup-form-box textarea{width:100%;height:48px;margin:0;padding:0 14px;border:1px solid #e2e4e9;border-radius:10px;background:#fff;background-image:none;filter:none;box-shadow:none;font-size:15px;color:#20242c} /* min-height нужен обязательно: popup.css и stylesheet.min.css ставят textarea min-height:120px, он перебивает height */ #callback-popup .popup-form-box textarea{height:64px;min-height:64px;padding:12px 14px;line-height:1.4;resize:none} #callback-popup .popup-form-box input[type="text"]:focus, #callback-popup .popup-form-box textarea:focus{border-color:#3f3ffa!important;box-shadow:0 0 0 3px rgba(63,63,250,.12);outline:none} #callback-popup .popup-form-box input::-webkit-input-placeholder, #callback-popup .popup-form-box textarea::-webkit-input-placeholder{font-family:inherit;font-size:15px;color:#9aa0a6} #callback-popup .popup-form-box input::-moz-placeholder, #callback-popup .popup-form-box textarea::-moz-placeholder{font-family:inherit;font-size:15px;color:#9aa0a6;opacity:1} #callback-popup .popup-form-box input:-ms-input-placeholder, #callback-popup .popup-form-box textarea:-ms-input-placeholder{font-family:inherit;font-size:15px;color:#9aa0a6} #callback-popup .popup-form-box input::placeholder, #callback-popup .popup-form-box textarea::placeholder{font-family:inherit;font-size:15px;color:#9aa0a6} /* ошибки валидации */ #callback-popup .error_style{border-color:#e5372b!important} #callback-popup .text-danger{margin:6px 0 0;font-size:12.5px;line-height:1.35;color:#e5372b} #callback-popup .custom-checkbox{margin-left:4px!important;accent-color:#3f3ffa} /* кнопка отправки — во всю ширину */ #callback-popup #popup-send-button.btn-send-custom{display:block;width:100%;height:50px;margin:14px 0 0;padding:0;border:0;border-radius:10px;background:#3f3ffa!important;font-size:15px;font-weight:500;color:#fff} #callback-popup #popup-send-button.btn-send-custom:hover{background:#2f2fe0!important} /* ===== TDPD: попап подписки (#subscribe-popup) ===== Работает В ПАРЕ с oct_popup_subscribe.tpl (примечание .tdpd-sub-note) и language/ru-ru/.../oct_popup_subscribe.php. Текст promo_text задаётся в админке (настройки модуля), не в файлах. */ #subscribe-popup{max-width:460px;padding:28px 26px 24px;border-radius:16px;box-shadow:0 24px 60px rgba(20,25,60,.22)} #subscribe-popup h2.popup-header{margin:0 0 8px;font-size:21px;font-weight:500;line-height:1.3;color:#20242c;text-align:left} #subscribe-popup .popup-center{text-align:left} #subscribe-popup .popup-text{margin:0 0 16px;font-size:14px;line-height:1.45;color:#6a7078;text-align:left} #subscribe-popup .popup-text p{margin:0} #subscribe-popup .popup-text img{display:block;margin:12px 0 0;border-radius:10px} /* поле + кнопка в одну строку, примечание — под ними */ #subscribe-popup .popup-form-box{margin:0;text-align:left} #subscribe-popup #popup-subscribe-form{display:flex;flex-wrap:wrap;gap:10px} #subscribe-popup .input-text{flex:1 1 190px;width:auto;height:48px;margin:0;padding:0 14px;border:1px solid #e2e4e9;border-radius:10px;background:#fff;background-image:none;filter:none;box-shadow:none;font-size:15px;color:#20242c} #subscribe-popup .input-text:focus{border-color:#3f3ffa!important;box-shadow:0 0 0 3px rgba(63,63,250,.12);outline:none} #subscribe-popup .input-text::-webkit-input-placeholder{font-family:inherit;font-size:15px;color:#9aa0a6} #subscribe-popup .input-text::-moz-placeholder{font-family:inherit;font-size:15px;color:#9aa0a6;opacity:1} #subscribe-popup .input-text::placeholder{font-family:inherit;font-size:15px;color:#9aa0a6} #subscribe-popup #popup-subscribe-button{flex:0 0 auto;height:48px;margin:0;padding:0 22px;border:0;border-radius:10px;background:#3f3ffa!important;font-size:15px;font-weight:500;color:#fff} #subscribe-popup #popup-subscribe-button:hover{background:#2f2fe0!important} #subscribe-popup .tdpd-sub-note{flex:1 1 100%;margin:2px 0 0;font-size:12px;line-height:1.4;color:#9aa0a6} #subscribe-popup .alert-danger{margin:0 0 12px;padding:10px 12px;border:1px solid #f5c6c2;border-radius:10px;background:#fdf3f2;font-size:13px;line-height:1.4;color:#b3271c} #subscribe-popup .alert-danger .close{opacity:.5} /* оба попапа на мобильных: почти во всю ширину, поля и кнопки в столбик */ @media only screen and (max-width:600px){ #callback-popup, #subscribe-popup{max-width:none;width:calc(100vw - 24px);border-radius:14px} #callback-popup{padding:22px 18px 20px} #subscribe-popup{padding:24px 18px 20px} #callback-popup h2.popup-header{font-size:18px} #subscribe-popup h2.popup-header{font-size:19px} #callback-popup .tdpd-m-phones-popup ul li{flex:1 1 100%} #subscribe-popup .input-text, #subscribe-popup #popup-subscribe-button{flex:1 1 100%;width:100%} } /* ===== TDPD: попап «Купить в 1 клик» (#oneclick-popup) ===== Правится втроём: этот CSS + language/ru-ru/.../oct_popup_purchase.php (плейсхолдеры без «Введите», text_success_order → .tdpd-popup-done) + template/.../oct_popup_purchase.tpl (цена опции обёрнута в .tdpd-opt-price внутри label, убраны скобки и префикс «=»). Сами опции приходят в попап, только если option_id отмечен в настройках модуля (allowed_options). */ #oneclick-popup{max-width:760px;padding:26px;border-radius:16px;box-shadow:0 24px 60px rgba(20,25,60,.22)} #oneclick-popup .mfp-close{top:4px;right:4px;width:38px;height:38px;padding:0!important;line-height:38px!important;font-size:26px;color:#9aa0a6;opacity:1} #oneclick-popup .mfp-close:hover{color:#20242c} /* две колонки флексом вместо float-сетки bootstrap */ #oneclick-popup #purchase-form{display:flex;flex-wrap:wrap;gap:22px;margin:0} #oneclick-popup #purchase-form > .col-md-6, #oneclick-popup .payment-info{flex:1 1 300px;width:auto;max-width:none;float:none;margin:0;padding:0} /* КОРЕНЬ кривой вёрстки: тема даёт #oneclick-popup .popup-text{position:absolute;top:120px;margin-top:35px}, поэтому название/цена/степпер вырваны из потока, левая колонка схлопывается до высоты картинки, а цена наезжает на кнопку заказа. Возвращаем содержимое в поток. */ #oneclick-popup .popup-text{position:static;margin:0;width:auto;text-align:left} /* Имя / цена / степпер — три ребёнка .popup-text, шли стопкой на родных отступах темы и слипались. Сетка: имя на всю ширину, ниже цена слева и степпер справа в одном ряду по центру. */ #oneclick-popup .popup-text{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px} #oneclick-popup .popup-text > .popup-h3{grid-column:1/-1} #oneclick-popup .popup-text > .product-price{grid-column:1;margin:0} /* width/margin/float — перебиваем чужое правило выше по файлу (#oneclick-popup .payment-quantity .number{width:80%;margin:auto;float:left} — давало 19px справа) */ #oneclick-popup .popup-text > .payment-quantity{grid-column:2;justify-self:end;width:auto} #oneclick-popup .payment-quantity .number{width:auto;margin:0;float:none} /* левая колонка — карточка товара. :not(.payment-info) обязателен: правая колонка формы тоже .col-md-6, без исключения она получала серый фон карточки и align-self:flex-start (из-за чего не тянулась на высоту и кнопка «Заказать» висела в воздухе). */ /* align-self:flex-start — чтобы карточка не растягивалась на высоту формы и не оставляла пустой серый низ */ #oneclick-popup #purchase-form > .col-md-6:not(.payment-info){align-self:flex-start;display:flex;flex-direction:column;gap:12px;padding:16px;background:#f7f8fa;border-radius:12px;text-align:left} #oneclick-popup #purchase-form > .col-md-6 img.img-responsive{align-self:center;width:auto;max-width:100%;max-height:160px;border-radius:10px;background:#fff} #oneclick-popup .popup-h3{margin:0;font-size:15px;font-weight:500;line-height:1.35;color:#20242c;text-transform:none} #oneclick-popup .product-price{display:block;margin:0} #oneclick-popup #main-price.oneclick-main-price{font-size:22px;font-weight:500;color:#20242c} #oneclick-popup .tdpd-price-old{font-size:15px;font-weight:400;color:#9aa0a6} #oneclick-popup .tdpd-price-new{margin-left:8px;font-size:22px;font-weight:500;color:#e5372b} #oneclick-popup #you-save.price-tax{border-radius:7px;padding:3px 9px;font-size:12px;font-weight:500} /* степпер количества — как на странице товара */ #oneclick-popup .payment-quantity{float:none;margin:0} #oneclick-popup .payment-quantity .number .frame-change-count{display:inline-flex;align-items:center;width:auto;height:46px;margin:0;padding:0;border:1px solid #e2e4e9;border-radius:9px;background:#fff;overflow:hidden;vertical-align:middle;margin-top: 7px;} #oneclick-popup .payment-quantity .btn-minus button, #oneclick-popup .payment-quantity .btn-plus button{width:38px;height:44px;padding:0;border:0;background:transparent;color:#6a7078;line-height:44px} #oneclick-popup .payment-quantity input.plus-minus{width:46px;height:44px;padding:0;border:0;background:#fff;background-image:none;filter:none;text-align:center;font-size:15px;color:#20242c} /* Опции и кнопка вынесены правкой .tpl из колонок в отдельные строки на всю ширину попапа. ПОЧЕМУ: пока опции лежали в левой колонке, она вырастала до 650px против 350px у формы — между комментарием и кнопкой зияло 295px пустоты, и ни один вариант выравнивания её не убирал. Теперь колонки примерно равны по высоте, опциям достаётся вся ширина (длинные названия вроде «КОРПУС ЦВЕТНОЙ, ФАСАД ЦВЕТНОЙ» помещаются в строку вместе с ценой), а кнопка идёт последней — порядок чтения «товар → контакты → выбор опции → заказать» стал правильным. */ #oneclick-popup .tdpd-options-row{flex:1 1 100%;width:100%;text-align:left} #oneclick-popup .popup-buttons-box{flex:1 1 100%;width:100%;margin:0} /* опции товара — карточки-переключатели, как на странице товара */ #oneclick-popup .info-heading-2{margin:4px 0 10px;padding:0;border:0;font-size:15px;font-weight:500;color:#20242c;text-transform:none} #oneclick-popup .form-group.product-info-li{margin:0 0 10px;text-align:left} #oneclick-popup .form-group.product-info-li .control-label{display:block;margin:0 0 6px;font-size:13px;font-weight:500;color:#42474f} /* у темы .options-box{margin-top:-10px} — список опций наезжал на подпись («* Мебель» упиралась в первую карточку) */ #oneclick-popup .options-box{margin-top:0} #oneclick-popup .radio.tdpd-product-radio{display:block;margin:0 0 8px;padding:0;border:1px solid #e2e4e9;border-radius:10px;background:#fff;transition:border-color .15s,background .15s} #oneclick-popup .radio.tdpd-product-radio:has(input:checked){border-color:#3f3ffa;background:#f4f5ff} #oneclick-popup .radio.tdpd-product-radio:hover{border-color:#c8ccd4} /* label = вся кликабельная площадь карточки; строка «радио — название — цена справа». Цена лежит ВНУТРИ label отдельным span'ом (правка в oct_popup_purchase.tpl): раньше это был голый текстовый узел рядом с label — CSS такой узел не адресует, и цена падала на свою строку. */ #oneclick-popup .radio.tdpd-product-radio label{display:flex;flex-wrap:wrap;align-items:center;gap:2px 10px;width:100%;float:none;margin:0;padding:10px 12px;font-size:14px;line-height:1.3;font-weight:400;color:#20242c;cursor:pointer} #oneclick-popup .radio.tdpd-product-radio input[type="radio"]{width:18px;height:18px;flex:0 0 18px;margin:0;accent-color:#3f3ffa;cursor:pointer} #oneclick-popup .tdpd-opt-name{flex:1 1 auto;min-width:0} /* после выноса опций на всю ширину места хватает — цена возвращается в строку, прижатая вправо */ #oneclick-popup .tdpd-opt-price{flex:0 0 auto;margin-left:auto;padding-left:12px;font-size:13px;font-weight:500;color:#6a7078;white-space:nowrap} #oneclick-popup .radio.tdpd-product-radio:has(input:checked) .tdpd-opt-price{color:#3f3ffa} #oneclick-popup select.form-control{height:46px;border:1px solid #e2e4e9;border-radius:10px;font-size:14px;color:#20242c} /* правая колонка — форма. Не карточка: фон прозрачный, тянется на высоту левой колонки, слабину забирает поле комментария (flex:1), поэтому кнопка «Заказать» садится на низ без провала. */ #oneclick-popup .payment-info{display:flex;flex-direction:column;align-self:stretch;padding:0;background:transparent} #oneclick-popup h2.popup-header{margin:0 0 14px;font-size:20px;font-weight:500;line-height:1.25;color:#20242c;text-align:left} /* :not(.plus-minus) обязателен: поле количества в степпере — тоже input[type=text] внутри .popup-form-box, и у этого правила ровно та же специфичность, что у правила степпера выше (1 id + 2 класса + элемент; [type="text"] весит как класс). Побеждал порядок в файле — инпут количества растягивался на 100%, рамка степпера раздувалась со 152 до 190px. */ #oneclick-popup .popup-form-box input[type="text"]:not(.plus-minus), #oneclick-popup .popup-form-box input[type="tel"], #oneclick-popup .popup-form-box input[type="email"], #oneclick-popup .popup-form-box textarea{display:block;width:100%;height:48px;margin:0 0 10px;padding:0 14px;border:1px solid #e2e4e9;border-radius:10px;background:#fff;background-image:none;filter:none;box-shadow:none;font-size:15px;color:#20242c} /* min-height обязателен: popup.css и stylesheet.min.css ставят textarea min-height:120px, он перебивает height */ /* НЕ растягивать по высоте: на товаре с опциями левая колонка выше формы, и flex:1 раздувал комментарий до 240px — пустое поле такого размера читается как поломка вёрстки, а не как поле. Слабину вместо него забирает .popup-buttons-box{margin:auto 0 0} — кнопка садится на низ колонки. */ #oneclick-popup .popup-form-box textarea{flex:0 0 auto;height:90px;min-height:90px;padding:12px 14px;line-height:1.4;resize:none} #oneclick-popup .popup-form-box input[type="text"]:not(.plus-minus):focus, #oneclick-popup .popup-form-box input[type="tel"]:focus, #oneclick-popup .popup-form-box input[type="email"]:focus, #oneclick-popup .popup-form-box textarea:focus{border-color:#3f3ffa!important;box-shadow:0 0 0 3px rgba(63,63,250,.12);outline:none} #oneclick-popup .popup-form-box input::-webkit-input-placeholder, #oneclick-popup .popup-form-box textarea::-webkit-input-placeholder{font-family:inherit;font-size:15px;color:#9aa0a6} #oneclick-popup .popup-form-box input::-moz-placeholder, #oneclick-popup .popup-form-box textarea::-moz-placeholder{font-family:inherit;font-size:15px;color:#9aa0a6;opacity:1} #oneclick-popup .popup-form-box input:-ms-input-placeholder, #oneclick-popup .popup-form-box textarea:-ms-input-placeholder{font-family:inherit;font-size:15px;color:#9aa0a6} #oneclick-popup .popup-form-box input::placeholder, #oneclick-popup .popup-form-box textarea::placeholder{font-family:inherit;font-size:15px;color:#9aa0a6} /* ошибки */ #oneclick-popup .error_style{border-color:#e5372b!important} #oneclick-popup .text-danger{margin:-4px 0 8px;font-size:12.5px;line-height:1.35;color:#e5372b;text-align:left} #oneclick-popup .alert{margin:0 0 14px;padding:10px 12px;border-radius:10px;font-size:13px;line-height:1.4} /* кнопка «Заказать» прижата к низу колонки и во всю ширину (это , потому line-height) */ #oneclick-popup .popup-buttons-box{margin:auto 0 0;padding-top:4px} #oneclick-popup #popup-checkout-button.btn-send-custom{display:block;width:100%;height:50px;margin:0;padding:0;border:0;border-radius:10px;background:#3f3ffa!important;font-size:15px;font-weight:500;line-height:50px;color:#fff;cursor:pointer} #oneclick-popup #popup-checkout-button.btn-send-custom:hover{background:#2f2fe0!important} @media only screen and (max-width:600px){ #oneclick-popup{max-width:none;width:calc(100vw - 24px);padding:20px 16px;border-radius:14px} #oneclick-popup #purchase-form{gap:16px} #oneclick-popup #purchase-form > .col-md-6, #oneclick-popup .payment-info{flex:1 1 100%} #oneclick-popup #purchase-form > .col-md-6 img.img-responsive{max-height:110px} #oneclick-popup h2.popup-header{font-size:18px} /* колонки в столбик — растягивать комментарий уже не нужно */ #oneclick-popup .popup-form-box textarea{height:70px;min-height:70px} #oneclick-popup .tdpd-opt-price{font-size:12.5px} } /* ===== TDPD: страница оформления заказа (oct_fastorder) ===== */ /* body{overflow:hidden} выше по файлу делает body scroll-контейнером и убивает position:sticky. overflow-x:clip гасит горизонтальный скролл так же, но НЕ создаёт scroll-контейнер, поэтому overflow-y остаётся действительно visible. */ body.checkout-oct_fastorder, body.tdpd-fo-page { overflow-x: clip; overflow-y: visible; } /* тема рисовала вертикальный «таймлайн» слева (border-left + padding-left:30px) под номера шагов, вынесенные за панель через left:-50px. Номера теперь внутри панелей — линия и отступ больше не нужны. */ .tdpd-checkout-content { border-left: 0; padding-left: 0; margin-left: 0; } .tdpd-checkout-content .row.checkout_form { margin-left: 0; margin-right: 0; } /* align-items НЕ flex-start: колонка должна растянуться на высоту main, иначе у sticky внутри неё нет хода и он никогда не срабатывает. */ .tdpd-fo-grid { display: flex; align-items: stretch; gap: 20px; } .tdpd-fo-main { flex: 1 1 auto; min-width: 0; } .tdpd-fo-main > * { float: none !important; width: auto !important; padding-left: 0; padding-right: 0; } .tdpd-fo-side { flex: 0 0 300px; width: 300px; } .tdpd-fo-side-inner { position: sticky; top: 20px; border: 1px solid #e8eaed; border-radius: 14px; background: #fff; padding: 16px; } .tdpd-fo-side-title { font-size: 16px; font-weight: 500; color: #20242c; margin-bottom: 12px; } /* панели-шаги */ /* stylesheet.min.css ставит .fastorder-panel-default{border-radius:0!important} — нужен !important */ .tdpd-checkout-content .fastorder-panel-default { border: 1px solid #e8eaed; border-radius: 14px !important; background: #fff; padding: 16px; margin-bottom: 14px; box-shadow: none; } /* тема вешает тяжёлую тень 0 2px 15px rgba(0,0,0,.35) на обёртку корзины */ .tdpd-checkout-content .checkout_form-first-div #cart-table .panel-collapse, .tdpd-checkout-content #cart-table .panel-collapse { box-shadow: none; border-radius: 0; } .tdpd-checkout-content .fastorder-panel-default + .fastorder-panel-default { margin-bottom: 14px; } .tdpd-checkout-content .fastorder-panel-default .panel-heading, .tdpd-checkout-content .fastorder-panel-default .panel-body { padding: 0; border: 0; background: none; } .tdpd-checkout-content .fastorder-panel-group { margin-bottom: 0; } .tdpd-checkout-content .tdpd-fastorder-header { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 500; color: #20242c; margin: 0 0 14px; padding: 0; } /* тема уносит номер шага за панель: .tdpd-fastorder-header span{position:absolute;left:-50px} */ .tdpd-checkout-content .tdpd-fastorder-header > span { position: static; left: auto; top: auto; flex: none; width: 26px; height: 26px; border-radius: 50%; background: #3f3ffa; color: #fff; font-size: 13px; font-weight: 500; display: flex; align-items: center; justify-content: center; } /* корзина: таблица -> карточки */ .tdpd-checkout-content .tdpd-bottom-cart-box .table-responsive { border: 0; overflow: visible; } .tdpd-checkout-content .tdpd-bottom-cart-box .table { margin: 0; border: 0; } .tdpd-checkout-content .tdpd-bottom-cart-box .table thead { display: none; } .tdpd-checkout-content .tdpd-bottom-cart-box .table tbody { display: block; } .tdpd-checkout-content .tdpd-bottom-cart-box .table tbody > tr { display: flex; align-items: center; flex-wrap: wrap; padding: 12px 0; border-top: 1px solid #eceef1; } .tdpd-checkout-content .tdpd-bottom-cart-box .table tbody > tr:first-child { border-top: 0; padding-top: 0; } .tdpd-checkout-content .tdpd-bottom-cart-box .table tbody > tr > td { display: block; border: 0 !important; padding: 0; background: none; vertical-align: middle; } .tdpd-checkout-content .tdpd-bottom-cart-box .table tbody > tr > td.image-td { order: 1; flex: none; width: 64px; margin-right: 12px; } .tdpd-checkout-content .tdpd-bottom-cart-box .table tbody > tr > td.image-td img { width: 64px; height: 64px; object-fit: contain; background: #f7f8fa; border: 0; border-radius: 10px; padding: 4px; } .tdpd-checkout-content .tdpd-bottom-cart-box .table tbody > tr > td.text-left { order: 2; flex: 1 1 180px; min-width: 0; padding-right: 12px; } .tdpd-checkout-content .tdpd-bottom-cart-box .table .tdpd-bottom-cart-table-text { padding: 0 !important; font-size: 14px; line-height: 1.35; color: #20242c; } .tdpd-checkout-content .tdpd-bottom-cart-box .table tbody > tr > td small { display: inline-block; margin-top: 3px; font-size: 12px; color: #7a7f8a; } .tdpd-checkout-content .tdpd-bottom-cart-box .table tbody > tr > td.text-center:has(.tdpd-fo-qty) { order: 4; flex: none; } .tdpd-checkout-content .tdpd-bottom-cart-box .table tbody > tr > td.text-center:not(.image-td):not(:has(.tdpd-fo-qty)) { display: none; } .tdpd-checkout-content .tdpd-bottom-cart-box .table tbody > tr > td.popup-table-price { order: 5; flex: none; width: 130px; text-align: right; white-space: nowrap; font-size: 13px; color: #7a7f8a; padding-left: 12px; } .tdpd-checkout-content .tdpd-bottom-cart-box .table tbody > tr > td.popup-table-price:last-child { order: 6; width: 150px; font-size: 16px; font-weight: 500; color: #20242c; } .tdpd-checkout-content .tdpd-bottom-cart-box td.delete-td { order: 9; flex: none; width: 26px; text-align: right; } .tdpd-checkout-content .tdpd-bottom-cart-box td.delete-td button { margin-left: 0 !important; color: #b9bec7; font-size: 20px; line-height: 1; } .tdpd-checkout-content .tdpd-bottom-cart-box td.delete-td button:hover { color: #e05e64; } /* степпер количества */ .tdpd-fo-qty { display: inline-flex !important; align-items: center; width: auto !important; max-width: none !important; border: 1px solid #e2e4e9; border-radius: 10px; overflow: hidden; height: 40px; } .tdpd-fo-qty-btn { flex: none; width: 34px; height: 38px; border: 0; background: none; color: #4a5060; font-size: 17px; line-height: 1; padding: 0; } .tdpd-fo-qty-btn:hover { background: #f4f5f7; color: #3f3ffa; } .tdpd-checkout-content .tdpd-bottom-cart-box .table .tdpd-fo-qty .form-control { width: 38px !important; max-width: 38px !important; min-width: 0; height: 38px; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0; background: #fff; background-image: none; filter: none; box-shadow: none; text-align: center; font-size: 14px; color: #20242c; } /* итоги в правой колонке */ .tdpd-fo-main .tdpd-bottom-cart-total-cart { display: none; } #tdpd-fo-totals .total-text { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14px; line-height: 1.4; color: #6b7280; margin: 0 0 8px; text-align: left; } #tdpd-fo-totals .total-text span { color: #20242c; font-family: inherit; white-space: nowrap; } #tdpd-fo-totals .total-text:last-child { border-top: 1px solid #e8eaed; padding-top: 10px; margin-top: 10px; margin-bottom: 0; font-size: 15px; font-weight: 500; color: #20242c; } #tdpd-fo-totals .total-text:last-child span { font-size: 21px; font-weight: 500; color: #3f3ffa; } /* кнопка заказа и подпись */ .tdpd-fo-side .tdpd-fastorder-payment { padding: 0 !important; margin-top: 14px; } .tdpd-fo-side #button-go { display: block; width: 100%; max-width: none; height: 50px; line-height: 50px; padding: 0; border: 0; border-radius: 10px; background: #3f3ffa; color: #fff; font-size: 15px; font-weight: 500; text-transform: none; } .tdpd-fo-side #button-go:hover { background: #3333d6; } .tdpd-fo-legal p { margin: 10px 0 0; font-size: 11px; line-height: 1.5; color: #9aa0ab; } .tdpd-fo-legal a { color: #9aa0ab; text-decoration: underline; } .tdpd-fo-trust { border-top: 1px solid #e8eaed; margin-top: 14px; padding-top: 12px; } .tdpd-fo-trust-item { display: flex; align-items: center; gap: 9px; font-size: 12px; line-height: 1.35; color: #4a5060; margin-bottom: 9px; } .tdpd-fo-trust-item:last-child { margin-bottom: 0; } .tdpd-fo-trust-item svg { flex: none; } /* поля формы */ .tdpd-fo-main .register_block .row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; margin-left: 0; margin-right: 0; } .tdpd-fo-main .register_block .row > .form-group { float: none !important; width: auto !important; padding-left: 0; padding-right: 0; margin-bottom: 12px; } /* bootstrap даёт .row псевдоэлементы-clearfix (.row:before/:after{content:" "}). В grid-контейнере они становятся полноценными grid-элементами и занимают ячейки — из-за этого первое поле уезжало во вторую колонку, а слева зияла дыра. */ .tdpd-fo-main .register_block .row::before, .tdpd-fo-main .register_block .row::after { display: none; } .tdpd-fo-main .register_block .row > .form-group:has(textarea) { grid-column: 1 / -1; } /* Адрес/Город и пароли лежат НЕ прямыми детьми .row, а во вложенных обёртках, поэтому у них оставался bootstrap-padding 15px и они не совпадали по левому краю с Именем/Телефоном. Гасим padding у всех .form-group блока, на любой глубине. */ .tdpd-fo-main .register_block .form-group { padding-left: 0; padding-right: 0; } /* вложенные обёртки (адрес+город, форма регистрации) — на всю ширину и со своей сеткой в две колонки, вровень с рядом Имя | Телефон */ .tdpd-fo-main .register_block .row > div:not(.form-group) { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; } .tdpd-fo-main .register_block .row > div:not(.form-group)::before, .tdpd-fo-main .register_block .row > div:not(.form-group)::after { display: none; } /* чекбоксы: bootstrap вырывает их из потока, галка уезжала над текстом */ .tdpd-fo-main .register_block .form-group:has(> input[type="checkbox"]) { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; } .tdpd-fo-main .register_block .form-group > input[type="checkbox"] { position: relative !important; flex: none; margin: 0 !important; top: auto; left: auto; } .tdpd-fo-main .register_block .form-group:has(> input[type="checkbox"]) label { margin: 0; font-size: 13px; line-height: 1.4; color: #4a5060; } /* имя и телефон — первой строкой, остальное следом в порядке разметки */ .tdpd-fo-main .register_block .row > * { order: 4; } .tdpd-fo-main .register_block .row > .form-group:has(#input-payment-firstname) { order: 1; } .tdpd-fo-main .register_block .row > .form-group:has(#input-payment-telephone) { order: 2; } .tdpd-fo-main .register_block .row > .form-group:has(#input-payment-email) { order: 3; } .tdpd-checkout-content .form-group .control-label { display: block; font-size: 12px; font-weight: 400; color: #6b7280; margin-bottom: 5px; padding: 0; } .tdpd-checkout-content .form-group.required .control-label:after { content: ' *'; color: #e05e64; } .tdpd-checkout-content .panel-body .form-control { height: 48px; border: 1px solid #e2e4e9; border-radius: 10px; background: #fff; background-image: none; filter: none; box-shadow: none; padding: 0 14px; font-size: 14px; color: #20242c; } .tdpd-checkout-content .panel-body textarea.form-control { height: 90px; min-height: 90px; padding: 12px 14px; line-height: 1.45; } .tdpd-checkout-content .panel-body .form-control:focus { border-color: #3f3ffa; box-shadow: none; } /* доставка и оплата — карточки-переключатели */ .tdpd-checkout-content .shipping-method p, .tdpd-checkout-content .payment-method p { font-size: 13px; color: #6b7280; margin: 0 0 10px; } .tdpd-checkout-content .shipping-method .radio, .tdpd-checkout-content .payment-method .radio { border: 1px solid #e2e4e9; border-radius: 10px; background: #fff; margin: 0 0 8px; padding: 0; } .tdpd-checkout-content .shipping-method .radio:has(input:checked), .tdpd-checkout-content .payment-method .radio:has(input:checked) { border-color: #3f3ffa; background: #f4f5ff; } .tdpd-checkout-content .shipping-method .radio > label, .tdpd-checkout-content .payment-method .radio > label { display: flex; align-items: center; width: 100%; margin: 0; padding: 12px 14px 12px 16px; font-size: 14px; line-height: 1.35; color: #20242c; cursor: pointer; } /* bootstrap задаёт .radio input{position:absolute;margin-left:-20px} — кружок вылезал за левый край карточки. Возвращаем инпут в поток флекса. */ .tdpd-checkout-content .shipping-method .radio > label > input, .tdpd-checkout-content .payment-method .radio > label > input { position: relative !important; flex: none; margin: 0 12px 0 2px !important; top: auto; left: auto; } /* мобильная липкая панель */ #tdpd-fo-bar { display: none; } @media (max-width: 991px) { .tdpd-fo-grid { display: block; } .tdpd-fo-side { width: auto; margin-top: 14px; } .tdpd-fo-side-inner { position: static; } } @media (max-width: 767px) { .tdpd-fo-main .register_block .row { grid-template-columns: 1fr; } .tdpd-checkout-content .fastorder-panel-default, .tdpd-fo-side-inner { padding: 14px; border-radius: 12px; } .tdpd-checkout-content .tdpd-fastorder-header { font-size: 15px; } /* карточка товара: фото слева на две строки, справа название, ниже степпер и сумма в одну строку */ .tdpd-checkout-content .tdpd-bottom-cart-box .table tbody > tr { display: grid; grid-template-columns: 56px minmax(0, 1fr) 22px; column-gap: 10px; row-gap: 10px; align-items: start; } .tdpd-checkout-content .tdpd-bottom-cart-box .table tbody > tr > td.image-td { grid-column: 1; grid-row: 1 / span 2; width: 56px; margin-right: 0; } .tdpd-checkout-content .tdpd-bottom-cart-box .table tbody > tr > td.image-td img { width: 56px; height: 56px; } .tdpd-checkout-content .tdpd-bottom-cart-box .table tbody > tr > td.text-left { grid-column: 2; grid-row: 1; padding-right: 0; } .tdpd-checkout-content .tdpd-bottom-cart-box td.delete-td { grid-column: 3; grid-row: 1; width: 22px; } .tdpd-checkout-content .tdpd-bottom-cart-box .table tbody > tr > td.text-center:has(.tdpd-fo-qty) { grid-column: 2; grid-row: 2; justify-self: start; align-self: center; margin: 0; } .tdpd-checkout-content .tdpd-bottom-cart-box .table tbody > tr > td.popup-table-price { display: none; } .tdpd-checkout-content .tdpd-bottom-cart-box .table tbody > tr > td.popup-table-price:last-child { display: block; grid-column: 2 / -1; grid-row: 2; justify-self: end; align-self: center; width: auto; margin: 0; padding-left: 0; } .tdpd-fo-page { padding-bottom: 74px; } .tdpd-fo-page #tdpd-bottom-cart-link { display: none !important; } #tdpd-fo-bar { display: flex; align-items: center; gap: 12px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 130; background: #fff; border-top: 1px solid #e8eaed; box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.06); padding: 10px 12px; } .tdpd-fo-bar-sum { flex: none; line-height: 1.2; } .tdpd-fo-bar-sum span { display: block; font-size: 11px; color: #7a7f8a; } .tdpd-fo-bar-sum strong { display: block; font-size: 17px; font-weight: 500; color: #20242c; white-space: nowrap; } .tdpd-fo-bar-btn { flex: 1 1 auto; height: 46px; border: 0; border-radius: 10px; background: #3f3ffa; color: #fff; font-size: 14px; font-weight: 500; } .tdpd-fo-side .tdpd-fastorder-payment { margin-top: 12px; } } /* ===== TDPD: попап корзины ===== */ /* панель: шапка и подвал зафиксированы, скроллится только список позиций */ #cart-popup { max-width: 42rem; padding: 0; overflow: hidden; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; } #cart-popup #popup-cart-inner { -webkit-flex: 1; flex: 1; min-height: 0; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; } #cart-popup .mfp-close { top: 12px; right: 10px; color: #9aa0a6; } /* шапка */ #cart-popup .tdpd-carousel-header { -webkit-flex: none; flex: none; padding: 20px 24px 0; margin: 0; font-size: 20px; font-weight: 500; line-height: 1.3; color: #20242c; text-align: left; text-transform: none; border: 0; } #cart-popup .popup-text { -webkit-flex: none; flex: none; margin: 4px 0 0; padding: 0 24px 14px; border-bottom: 1px solid #ecedef; font-size: 13px; color: #8a9099; } #cart-popup .popup-text p { margin: 0; font-size: 13px; } #cart-popup .popup-text span, #cart-popup .popup-text .gold { color: #8a9099; font-size: 13px; } #cart-popup .alert { margin: 12px 24px 0; } /* список позиций */ #cart-popup .popup-cart-box { -webkit-flex: 1; flex: 1; min-height: 0; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; } #cart-popup .popup-cart-box > form { -webkit-flex: 1; flex: 1; min-height: 0; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; } #cart-popup .tdpd-cart-box { -webkit-flex: 1; flex: 1; min-height: 0; max-height: none; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 24px; } /* одна позиция = одна строка */ #cart-popup .tdpd-cart-row { position: relative; display: -webkit-flex; display: flex; -webkit-align-items: flex-start; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid #ecedef; } #cart-popup .tdpd-cart-row:last-child { border-bottom: 0; } #cart-popup .tdpd-cart-thumb { -webkit-flex: none; flex: none; width: 64px; height: 64px; margin-right: 12px; background: #f7f8fa; border-radius: 10px; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; overflow: hidden; } /* обёртка — сама флекс-элемент с auto-высотой, поэтому размер задаём ей, иначе max-height у img не к чему привязать */ #cart-popup .tdpd-cart-thumb a { display: block; width: 64px; height: 64px; line-height: 0; } #cart-popup .tdpd-cart-thumb img { width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; border: 0; padding: 0; background: none; } #cart-popup .tdpd-cart-main { -webkit-flex: 1; flex: 1; min-width: 0; padding-right: 24px; } #cart-popup .popup-cart-box .tdpd-popup-cart-link { display: block; font-size: 14px; line-height: 1.35; color: #20242c !important; } #cart-popup .tdpd-cart-opt { margin-top: 3px; font-size: 12px; line-height: 1.3; color: #8a9099; } #cart-popup .tdpd-cart-line { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: space-between; justify-content: space-between; margin-top: 10px; } /* степпер количества */ #cart-popup .tdpd-cart-step { display: -webkit-inline-flex; display: inline-flex; -webkit-align-items: center; align-items: center; height: 34px; border: 1px solid #e2e4e9; border-radius: 8px; overflow: hidden; } #cart-popup .tdpd-step-btn { width: 32px; height: 32px; padding: 0; border: 0; background: none; box-shadow: none; color: #6b7280; font-size: 16px; line-height: 32px; text-align: center; } #cart-popup .tdpd-step-btn:hover { background: #f4f5f7; color: #20242c; } #cart-popup .tdpd-cart-step input[type="text"].tdpd-cart-qty { width: 38px; height: 32px; padding: 0; border: 0; border-radius: 0; background: #fff; background-image: none; filter: none; box-shadow: none; font-size: 14px; font-weight: 500; color: #20242c; text-align: center; } #cart-popup .tdpd-cart-sum { font-size: 15px; font-weight: 500; color: #20242c; white-space: nowrap; } /* удаление позиции */ #cart-popup .tdpd-cart-del { position: absolute; top: 12px; right: 0; } #cart-popup .tdpd-cart-del-btn { width: 24px; height: 24px; padding: 0; border: 0; background: none; box-shadow: none; color: #bfc4cb; font-size: 20px; line-height: 24px; } #cart-popup .tdpd-cart-del-btn:hover { color: #e05e64; } /* подвал: итог и кнопки */ #cart-popup .popup-total-cart { -webkit-flex: none; flex: none; margin: 0; padding: 16px 24px 20px; border-top: 1px solid #ecedef; background: #fff; } #cart-popup .popup-total-cart .total-text { display: -webkit-flex; display: flex; -webkit-align-items: baseline; align-items: baseline; -webkit-justify-content: space-between; justify-content: space-between; margin-bottom: 12px; text-align: left; } #cart-popup .popup-total-cart .total_sub { float: none; font-size: 15px; font-weight: 400; color: #8a9099; } #cart-popup .popup-total-cart .gold { font-size: 22px; font-weight: 500; color: #20242c; } /* тема даёт .continue float:right — без сброса подвал схлопывается и строка доверия обтекает флоат */ #cart-popup .popup-buttons-box { overflow: hidden; } #cart-popup .popup-buttons-box .popup-button.tdpd-btn-blue { height: 50px; padding: 0 16px; border-radius: 9px; font-size: 15px; font-weight: 500; line-height: 50px; color: #fff; text-transform: none; } #cart-popup .popup-buttons-box .popup-button.continue { display: block; float: none; width: 100%; height: auto; margin: 12px 0 0; padding: 10px 0; border: 0; background: none; font-size: 14px; line-height: 20px; color: #6b7280; text-align: center; text-transform: none; } #cart-popup .popup-buttons-box .popup-button.continue:hover { color: #3f3ffa; } #cart-popup .popup-buttons-box .popup-button.continue .icon-arrow-right-circle { margin-left: 7px; vertical-align: middle; } #cart-popup .tdpd-cart-trust { clear: both; margin-top: 14px; font-size: 12px; line-height: 1.4; color: #9aa0a6; text-align: center; } /* пустая корзина */ #cart-popup .tdpd-cart-empty { -webkit-flex: 1; flex: 1; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-justify-content: center; justify-content: center; padding: 0 32px 40px; text-align: center; } #cart-popup .tdpd-cart-empty-icon { margin-bottom: 14px; font-size: 40px; color: #d4d7dd; } #cart-popup .tdpd-cart-empty-title { margin: 0 0 6px; font-size: 18px; font-weight: 500; color: #20242c; } #cart-popup .tdpd-cart-empty-note { margin: 0 0 22px; font-size: 14px; line-height: 1.45; color: #8a9099; } @media (max-width: 768px) { #cart-popup { width: 100%; max-width: 100%; } #cart-popup .tdpd-carousel-header { padding: 18px 18px 0; font-size: 18px; } #cart-popup .popup-text { padding: 0 18px 12px; } #cart-popup .tdpd-cart-box { padding: 0 18px; } #cart-popup .popup-total-cart { padding: 14px 18px 18px; } #cart-popup .tdpd-cart-thumb, #cart-popup .tdpd-cart-thumb a { width: 56px; height: 56px; } } /* ===== TDPD: попап выбора опции товара (#product-options-popup) ===== Открывается по «В корзину» с карточки в листинге, если у товара есть опции. Разметка почти совпадает с «Купить в 1 клик», поэтому приёмы те же. Требует правки oct_popup_product_options.tpl: название и цена значения обёрнуты в .tdpd-opt-name/.tdpd-opt-price, префикс «=» («цена значения ЗАМЕНЯЕТ цену товара») в вывод не пускается. Раньше цена была голым текстовым узлом РЯДОМ с label — CSS его не адресует, и она падала на отдельную строку. */ #product-options-popup{max-width:560px;padding:26px;border-radius:16px;box-shadow:0 24px 60px rgba(20,25,60,.22);text-align:left} #product-options-popup .mfp-close{top:4px;right:4px;width:38px;height:38px;padding:0!important;line-height:38px!important;font-size:26px;color:#9aa0a6;opacity:1} #product-options-popup .mfp-close:hover{color:#20242c} /* шапка и название товара — по левому краю; тема центрует .popup-h3 */ #product-options-popup h2.popup-header{margin:0 0 4px;font-size:20px;font-weight:500;line-height:1.25;color:#20242c;text-align:left} #product-options-popup .popup-h3{margin:0;font-size:15px;font-weight:400;line-height:1.35;color:#6a7078;text-align:left;text-transform:none} #product-options-popup #purchase-form{margin:0;text-align:left} /* Шапка карточки: миниатюра слева, справа название и строка количества. Требует правки .tpl (обёртки .tdpd-po-head/.tdpd-po-thumb/.tdpd-po-meta вместо bootstrap-строки .row > .col-sm-12) и контроллера (модуль не отдавал $thumb). */ #product-options-popup .tdpd-po-head{display:flex;align-items:flex-start;gap:14px;margin:12px 0 0;padding:0 0 14px;border-bottom:1px solid #ecedef} #product-options-popup .tdpd-po-thumb{flex:none;width:64px;height:64px;padding:4px;border:1px solid #eceef1;border-radius:10px;background:#f7f8fa} #product-options-popup .tdpd-po-thumb img{display:block;width:100%;height:100%;object-fit:contain} #product-options-popup .tdpd-po-meta{flex:1 1 auto;min-width:0} #product-options-popup .tdpd-po-meta .popup-h3{margin:0 0 8px} /* «Количество» — подпись и степпер СЛИТНО и прижаты влево, сразу под названием (раньше стояло space-between, и степпер болтался в стороне без привязки). Размеры один в один с .tdpd-fo-qty на странице оформления заказа. flex:none на обоих детях и width:100% на контейнере — чтобы раскладка не зависела от float/width, которые тема раздаёт .number и .frame-change-count (напр. #product-options-popup .number .frame-change-count{width:30%;margin:0 auto}). */ /* Селектор ОБЯЗАН содержать оба id: выше по файлу (custom.css:1956) лежит правило прошлого разработчика `#product-options-popup #purchase-form .payment-quantity {clear:both;width:30%;margin:0 auto}` — 2 id против 1 у меня, оно выигрывало, блок был шириной 30% и отцентрован. Именно из-за него степпер «плавал». */ #product-options-popup #purchase-form .payment-quantity{display:flex;align-items:center;justify-content:flex-start;gap:10px;clear:none;float:none;width:100%;margin:0;padding:0;text-align:left} #product-options-popup .payment-quantity label{flex:none;display:block;margin:0;font-size:14px;font-weight:400;color:#42474f;text-align:left} #product-options-popup .number{flex:none;float:none;width:auto;margin:0;padding:0;background:transparent;text-align:left} #product-options-popup .number .frame-change-count{display:inline-flex;align-items:center;width:auto;height:40px;margin:0;padding:0;border:1px solid #e2e4e9;border-radius:10px;background:#fff;overflow:hidden} #product-options-popup .payment-quantity .btn-minus button, #product-options-popup .payment-quantity .btn-plus button{width:34px;height:38px;padding:0;border:0;background:transparent;color:#4a5060;line-height:38px} #product-options-popup .payment-quantity .btn-minus button:hover, #product-options-popup .payment-quantity .btn-plus button:hover{background:#f4f5f7;color:#3f3ffa} #product-options-popup input.plus-minus{width:38px;height:38px;padding:0;border:0;background:#fff;background-image:none;filter:none;box-shadow:none;text-align:center;font-size:14px;color:#20242c} /* опции — карточки-переключатели, как в «Купить в 1 клик» и на странице товара */ #product-options-popup .info-heading-2{margin:16px 0 10px;padding:0;border:0;font-size:15px;font-weight:500;color:#20242c;text-align:left;text-transform:none} #product-options-popup .form-group.product-info-li{margin:0 0 10px;padding:0;text-align:left} #product-options-popup .form-group.product-info-li .control-label{display:block;margin:0 0 6px;font-family:inherit;font-size:13px;font-weight:500;color:#42474f} /* тема: .options-box{margin-top:-10px} — список наезжал на подпись опции */ #product-options-popup .options-box{margin-top:0} /* тема: .options-box .radio{display:inline-block} — карточки вставали в строку */ #product-options-popup .options-box .radio.tdpd-product-radio{display:block;margin:0 0 8px;padding:0;border:1px solid #e2e4e9;border-radius:10px;background:#fff;transition:border-color .15s,background .15s} #product-options-popup .options-box .radio.tdpd-product-radio:hover{border-color:#c8ccd4} #product-options-popup .options-box .radio.tdpd-product-radio:has(input:checked){border-color:#3f3ffa;background:#f4f5ff} #product-options-popup .options-box .radio.tdpd-product-radio label{display:flex;flex-wrap:wrap;align-items:center;gap:2px 10px;width:100%;float:none;margin:0;padding:10px 12px;font-size:14px;font-weight:400;line-height:1.3;color:#20242c;cursor:pointer} /* bootstrap .radio input{position:absolute;margin-left:-20px} вырывает кружок из флекса за левый край */ #product-options-popup .options-box .radio.tdpd-product-radio input[type="radio"]{position:relative!important;top:auto;left:auto;flex:0 0 18px;width:18px;height:18px;margin:0!important;accent-color:#3f3ffa;cursor:pointer} #product-options-popup .tdpd-opt-name{flex:1 1 auto;min-width:0} #product-options-popup .tdpd-opt-price{flex:0 0 auto;margin-left:auto;padding-left:12px;font-size:13px;font-weight:500;color:#6a7078;white-space:nowrap} #product-options-popup .options-box .radio.tdpd-product-radio:has(input:checked) .tdpd-opt-price{color:#3f3ffa} /* опции-чекбоксы — та же карточка */ #product-options-popup .options-box .checkbox{display:block;margin:0 0 8px;padding:0;border:1px solid #e2e4e9;border-radius:10px;background:#fff} #product-options-popup .options-box .checkbox:has(input:checked){border-color:#3f3ffa;background:#f4f5ff} #product-options-popup .options-box .checkbox > label{display:flex;flex-wrap:wrap;align-items:center;gap:2px 10px;width:100%;float:none;margin:0;padding:10px 12px;font-size:14px;line-height:1.3;color:#20242c;cursor:pointer} #product-options-popup .options-box .checkbox > label > input[type="checkbox"]{position:relative!important;top:auto;left:auto;flex:0 0 17px;width:17px;height:17px;margin:0!important;accent-color:#3f3ffa;cursor:pointer} /* опции-поля. :not(.tdpd-quantity-text-input) — иначе правило цепляет инпуты количества в таблице расширенных опций (у них тоже .form-control). */ #product-options-popup select.form-control, #product-options-popup input.form-control[type="text"]:not(.tdpd-quantity-text-input), #product-options-popup textarea.form-control{width:100%;height:46px;padding:0 14px;border:1px solid #e2e4e9;border-radius:10px;background:#fff;background-image:none;filter:none;box-shadow:none;font-size:14px;color:#20242c} #product-options-popup textarea.form-control{height:90px;min-height:90px;padding:12px 14px;line-height:1.45} #product-options-popup select.form-control:focus, #product-options-popup input.form-control[type="text"]:not(.tdpd-quantity-text-input):focus, #product-options-popup textarea.form-control:focus{border-color:#3f3ffa;box-shadow:0 0 0 3px rgba(63,63,250,.12);outline:none} /* сообщения */ #product-options-popup .alert{margin:0 0 14px;padding:10px 12px;border-radius:10px;font-size:13px;line-height:1.4;text-align:left} #product-options-popup .text-danger{margin:4px 0 0;font-size:12.5px;line-height:1.35;color:#e5372b;text-align:left} /* кнопки. Тема даёт .popup-button + .popup-button{float:right} — во флексе float лишний. Обе кнопки — , поэтому вертикальное центрирование только через line-height. */ #product-options-popup .popup-buttons-box{display:flex;align-items:center;gap:14px;margin:18px 0 0;padding-top:16px;border-top:1px solid #ecedef} #product-options-popup .popup-buttons-box .popup-button{display:block;max-width:none;margin:0;text-align:center;text-transform:none} #product-options-popup .popup-buttons-box #popup-checkout-button{flex:1 1 auto;height:50px;padding:0 16px;border:0;border-radius:10px;background:#3f3ffa!important;font-size:15px;font-weight:500;line-height:50px;color:#fff} #product-options-popup .popup-buttons-box #popup-checkout-button:hover{background:#2f2fe0!important} #product-options-popup .popup-buttons-box #popup-checkout-button .icons{margin-right:8px} #product-options-popup .popup-buttons-box .popup-button.continue{float:none;flex:0 0 auto;height:50px;padding:0;border:0;background:none;font-size:14px;line-height:50px;color:#6b7280} #product-options-popup .popup-buttons-box .popup-button.continue:hover{color:#3f3ffa} #product-options-popup .popup-buttons-box .popup-button.continue .icon-arrow-right-circle{margin-left:7px} @media only screen and (max-width:600px){ #product-options-popup{max-width:none;width:calc(100vw - 24px);padding:20px 16px;border-radius:14px} #product-options-popup h2.popup-header{font-size:18px} #product-options-popup .tdpd-opt-price{font-size:12.5px} /* кнопки в столбик: «Продолжить покупки» рядом с основной уже не помещается */ #product-options-popup .popup-buttons-box{flex-wrap:wrap;gap:4px} #product-options-popup .popup-buttons-box .popup-button{flex:1 1 100%} } /* ===== TDPD: оформление заказа — доработки после первой приёмки ===== */ /* stylesheet.min.css:185 даёт div.required .control-label:before{content:'* ';color:red}, а наш :after добавляет звёздочку справа — у обязательных полей выходило «* Пароль *». */ .tdpd-checkout-content div.required .control-label:before { content: none; } /* Блок 5 «Что бы вы хотели сделать дальше?» — единственный шаг, который в шаблоне лежит вне .fastorder-panel-default (просто .col-sm-12). Из-за этого он шёл без карточки, а его номер стоял на 16px левее номеров шагов 1–4. Выдаём ту же карточку стилями, без правки fastorder.tpl. */ .tdpd-checkout-content .tdpd-fastorder-next-choice { border: 1px solid #e8eaed; border-radius: 14px; background: #fff; padding: 16px; margin-bottom: 14px; } .tdpd-checkout-content .tdpd-fastorder-next-choice .tdpd-fastorder-header { margin-bottom: 8px; } .tdpd-checkout-content .tdpd-fastorder-next-choice > p { margin: 0 0 12px; font-size: 13px; line-height: 1.45; color: #6b7280; } .tdpd-checkout-content .tdpd-fastorder-next-choice .panel-group { margin-bottom: 0; } /* аккордеоны купона/сертификата/баллов приходят модулями с голым .panel.panel-default. stylesheet.min.css:4394 даёт .fastorder-panel-group .panel-default{border-radius:0!important} — скругление здесь тоже приходится писать через !important. */ .tdpd-checkout-content .tdpd-fastorder-next-choice .panel-group .panel { margin: 0 0 8px; border: 1px solid #e8eaed; border-radius: 10px !important; background: #fff; box-shadow: none; } .tdpd-checkout-content .tdpd-fastorder-next-choice .panel-group .panel:last-child { margin-bottom: 0; } .tdpd-checkout-content .tdpd-fastorder-next-choice .panel-heading { padding: 0; border: 0; background: none; } .tdpd-checkout-content .tdpd-fastorder-next-choice .panel-title { margin: 0; } .tdpd-checkout-content .tdpd-fastorder-next-choice .panel-title > a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 14px; font-size: 14px; font-weight: 400; color: #20242c; text-decoration: none; } .tdpd-checkout-content .tdpd-fastorder-next-choice .panel-title > a .fa { flex: none; font-size: 13px; color: #9aa0a6; } .tdpd-checkout-content .tdpd-fastorder-next-choice .panel-body { padding: 0 14px 14px; border: 0; } /* .input-group у bootstrap — display:table; переводим в флекс, чтобы поле и кнопка были одной высоты и со своими скруглениями (bootstrap обнуляет radius у крайних). */ .tdpd-checkout-content .tdpd-fastorder-next-choice .input-group { display: flex; gap: 8px; width: 100%; } .tdpd-checkout-content .tdpd-fastorder-next-choice .input-group .form-control { flex: 1 1 auto; width: auto; height: 46px; padding: 0 14px; border: 1px solid #e2e4e9; border-radius: 10px; background: #fff; background-image: none; filter: none; box-shadow: none; font-size: 14px; color: #20242c; } .tdpd-checkout-content .tdpd-fastorder-next-choice .input-group .form-control:focus { border-color: #3f3ffa; box-shadow: none; } .tdpd-checkout-content .tdpd-fastorder-next-choice .input-group-btn { flex: none; width: auto; font-size: inherit; } .tdpd-checkout-content .tdpd-fastorder-next-choice .input-group-btn .tdpd-button { height: 46px; padding: 0 18px; border: 0; border-radius: 10px; background: #3f3ffa; color: #fff; font-size: 14px; font-weight: 500; } .tdpd-checkout-content .tdpd-fastorder-next-choice .input-group-btn .tdpd-button:hover { background: #3333d6; } @media (max-width: 767px) { /* Вложенные обёртки формы клиента (адрес+город и .register-form с паролями) получают grid-template-columns:1fr 1fr выше по файлу. Существующий медиазапрос переводил в одну колонку только сам .row, поэтому на мобильном пароль и подтверждение оставались рядом и не помещались по ширине. */ .tdpd-fo-main .register_block .row > div:not(.form-group) { grid-template-columns: 1fr; } .tdpd-checkout-content .tdpd-fastorder-next-choice { padding: 14px; border-radius: 12px; } /* поле купона и кнопка — в столбик, в строку они не помещаются */ .tdpd-checkout-content .tdpd-fastorder-next-choice .input-group { flex-wrap: wrap; } .tdpd-checkout-content .tdpd-fastorder-next-choice .input-group .form-control, .tdpd-checkout-content .tdpd-fastorder-next-choice .input-group-btn { flex: 1 1 100%; } .tdpd-checkout-content .tdpd-fastorder-next-choice .input-group-btn .tdpd-button { width: 100%; } } @font-face{font-family:'Rubik';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/rubik-v31-cyrillic_latin_latin-ext-regular.woff2') format('woff2')} @font-face{font-family:'Rubik';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/rubik-v31-cyrillic_latin_latin-ext-500.woff2') format('woff2')} @font-face{font-family:'Rubik';font-style:normal;font-weight:300;font-display:swap;src:url('fonts/rubik-v31-cyrillic_latin_latin-ext-300.woff2') format('woff2')} @font-face{font-family:'Rubik';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/rubik-v31-cyrillic_latin_latin-ext-700.woff2') format('woff2')} .product-info .custom-radio:before { top: 3px; left: 3px; } .product-info .custom-radio:after { top: 1px; left: 0px; } #product-options-popup .number .frame-change-count { margin-top: 7px; } /* ===== TDPD: блоки главной (модуль tdpd_block) ===== */ .tdb-band{font-family:"Rubik","Segoe UI",system-ui,-apple-system,Arial,sans-serif;color:#4a4640;font-size:16px;line-height:1.65} .tdb-band *{box-sizing:border-box} .tdb-band.tdb-warm,.tdb-band.tdb-cream,.tdb-band.tdb-white,.tdb-band.tdb-dark{width:100vw;position:relative;left:50%;transform:translateX(-50%);margin:0} .tdb-band.tdb-warm{background:#F3EEE3;padding:56px 0;border-top:1px solid #e6dcc4} .tdb-band.tdb-warm:last-child{border-bottom:1px solid #e6dcc4} .tdb-band.tdb-cream{background:#F6EBD5;padding:56px 0;border-top:1px solid #e6dcc4;border-bottom:1px solid #e6dcc4} .tdb-band.tdb-white{background:#fff;padding:56px 0;border-top:1px solid #e8e3d8;border-bottom:1px solid #e8e3d8} .tdb-band.tdb-dark{background:#20242C;padding:56px 0;color:#b8bec9} .tdb-band.tdb-plain{margin:36px 0} /* тёмная лента: переворот цветов общих элементов */ .tdb-dark .tdb h2,.tdb-dark .tdb h3,.tdb-dark .tdb h4{color:#fff} .tdb-dark .tdb-head p{color:#9aa2b1} .tdb-dark .tdb-eyebrow{color:#8ea6f5} .tdb-dark .tdb-seo{color:#9aa2b1} .tdb-dark .tdb-seo b{color:#dde1e8} /* промо на тёмной ленте: карточка растворяется в фоне, дважды тёмного не нужно */ .tdb-dark .tdb-promo-lead{background:transparent;box-shadow:none;padding:0;border-radius:0} .tdb{max-width:1140px;margin:0 auto;padding:0 22px} .tdb h2,.tdb h3,.tdb h4{color:#20242c;font-weight:500;letter-spacing:-.01em;margin:0} .tdb p{margin:0} .tdb img{max-width:100%;display:block} .tdb a{color:#2f55d4;text-decoration:none} .tdb-head{text-align:center;max-width:640px;margin:0 auto 32px;padding:0 12px} .tdb-eyebrow{font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#2f55d4} .tdb-head h2{font-size:29px;line-height:1.2;margin:11px 0 0} .tdb-head p{color:#7a756c;font-size:16px;margin:12px 0 0} /* stats */ .tdb-stats{display:grid;grid-template-columns:repeat(4,1fr)} .tdb-stat{position:relative;padding:28px 24px 26px;text-align:center;border-right:1px solid #e6dcc4;transition:background .25s} .tdb-stat:last-child{border-right:0} .tdb-stat:hover{background:rgba(255,255,255,.45)} .tdb-stat-n{font-size:36px;font-weight:500;color:#20242c;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums} .tdb-stat-n b{color:#2f55d4;font-weight:500} /* акцент — одна фирменная черта под числом, цифры остаются тёмными */ .tdb-stat-n::after{content:'';display:block;width:30px;height:3px;border-radius:2px;margin:13px auto 0;background:#2f55d4} .tdb-stat-l{font-size:14px;color:#4a4640;margin-top:11px;line-height:1.4} /* steps */ .tdb-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px} .tdb-step{position:relative;background:#fff;border:1px solid #e6dcc4;border-radius:14px;padding:24px 22px;box-shadow:0 6px 20px rgba(60,45,15,.07)} .tdb-step-ico{width:46px;height:46px;border-radius:12px;background:#eaeefb;color:#2f55d4;display:grid;place-items:center;font-size:22px;margin-bottom:15px} .tdb-step-num{position:absolute;top:20px;right:22px;font-size:13px;font-weight:500;color:#a8a29a} .tdb-step h3{font-size:17px;margin-bottom:7px} .tdb-step p{color:#7a756c;font-size:14.5px} /* cards */ .tdb-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:24px} .tdb-card{background:#fff;border:1px solid #e6dcc4;border-radius:14px;padding:24px 22px;box-shadow:0 8px 28px rgba(60,45,15,.09)} .tdb-card-ico{width:48px;height:48px;border-radius:12px;background:#F6EBD5;color:#2f55d4;display:grid;place-items:center;font-size:23px;margin-bottom:15px} .tdb-card h3{font-size:17px;margin-bottom:7px} .tdb-card p{color:#7a756c;font-size:14.5px} /* faq */ .tdb-faq{max-width:820px;margin:0 auto} .tdb-faq details{background:#fff;border:1px solid #e6dcc4;border-radius:14px;margin-bottom:12px;overflow:hidden;box-shadow:0 6px 20px rgba(60,45,15,.06)} .tdb-faq summary{list-style:none;cursor:pointer;padding:19px 22px;display:flex;align-items:center;gap:13px;font-size:17px;font-weight:500;color:#20242c} .tdb-faq summary::-webkit-details-marker{display:none} .tdb-faq summary .tdb-q{color:#2f55d4;font-size:19px;font-weight:700} /* маркер: рисуем двумя полосками, чтобы открытый вопрос давал МИНУС, а не крестик (поворот текстового «+» на 45° давал «×») */ .tdb-faq summary .tdb-mk{margin-left:auto;flex:none;position:relative;width:18px;height:18px;font-size:0;line-height:0;color:transparent} .tdb-faq summary .tdb-mk::before,.tdb-faq summary .tdb-mk::after{content:'';position:absolute;left:50%;top:50%;width:16px;height:2px;margin:-1px 0 0 -8px;border-radius:2px;background:#2f55d4;transition:transform .18s,opacity .18s} .tdb-faq summary .tdb-mk::after{transform:rotate(90deg)} .tdb-faq details[open] summary .tdb-mk::after{transform:rotate(0deg);opacity:0} .tdb-faq .tdb-ans{padding:0 22px 20px 51px;color:#7a756c;font-size:15.5px} /* promo (44/223) */ .tdb-promo{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch} .tdb-promo-lead{background:#20242c;color:#fff;border-radius:16px;padding:34px 32px;display:flex;flex-direction:column;justify-content:center;box-shadow:0 12px 32px rgba(20,25,45,.20)} .tdb-badges{display:flex;gap:9px;margin-bottom:16px;flex-wrap:wrap} .tdb-badges span{font-size:13px;font-weight:500;color:#cdd6f7;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);padding:6px 13px;border-radius:8px} .tdb-promo-lead h3{color:#fff;font-size:24px;line-height:1.22} .tdb-promo-lead p{color:#c3c8d6;font-size:15.5px;margin-top:12px} .tdb-promo-lead a{display:inline-flex;align-items:center;gap:8px;color:#fff;font-weight:500;font-size:15px;background:#2f55d4;padding:12px 20px;border-radius:9px;margin-top:22px;align-self:flex-start} .tdb-promo-lead a:hover{background:#2646b0;color:#fff} .tdb-promo-list{display:grid;grid-auto-rows:1fr;gap:16px} /* карточки равной высоты: контент центрируем, иначе короткий текст «висит» вверху */ .tdb-li{background:#fff;border:1px solid #e6dcc4;border-radius:14px;padding:20px 22px;display:flex;gap:14px;align-items:center;box-shadow:0 6px 20px rgba(60,45,15,.07)} .tdb-li i{flex:none;width:28px;height:28px;border-radius:50%;background:#e6f4ec;color:#1d8f4e;font-size:15px;font-style:normal;font-weight:700;line-height:1;margin:0;display:flex;align-items:center;justify-content:center} .tdb-li>div{display:flex;flex-direction:column;gap:3px;min-width:0} .tdb-li b{display:block;color:#20242c;font-weight:500;font-size:16px;margin:0;line-height:1.4} .tdb-li span{color:#7a756c;font-size:14.5px} .tdb-li span:empty{display:none} /* gallery (мозаика с плитками разного размера) */ .tdb-gallery{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:210px;gap:14px;grid-auto-flow:dense} .tdb-ph{position:relative;border-radius:14px;overflow:hidden;border:1px solid #e6dcc4;background:#fff} .tdb-ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s} .tdb-ph:hover img{transform:scale(1.04)} .tdb-ph.tdb-ph-wide{grid-column:span 2} .tdb-ph.tdb-ph-tall{grid-row:span 2} .tdb-ph-cap{position:absolute;left:0;right:0;bottom:0;padding:28px 14px 12px;color:#fff;background:linear-gradient(transparent,rgba(28,20,8,.82));font-size:13px} .tdb-ph-cap b{display:block;font-weight:500;font-size:14px;line-height:1.3} .tdb-ph-cap span{display:block;color:#e7e0d2;font-size:12.5px;margin-top:2px;line-height:1.3} /* tender (заявка в тендерный отдел; рассчитан на ленту bg=dark) */ .tdb-tender{display:grid;grid-template-columns:1.05fr .95fr;gap:34px;align-items:start} .tdb-t-lead h3{color:#fff;font-size:27px;line-height:1.22;margin:0} /* .tdb p{margin:0} выше по файлу имеет ту же длину селектора — пишем через .tdb, иначе отступ не встанет */ .tdb p.tdb-t-sub{color:#c3c8d6;font-size:16px;margin:14px 0 0} .tdb-t-sub a{color:#fff;font-weight:500;white-space:nowrap} .tdb-t-phone{display:inline-block;margin-top:12px;font-size:15px;color:#9aa2b1} .tdb-t-phone a{font-size:19px;margin-left:8px} .tdb-t-list{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:12px} .tdb-t-list li{display:flex;gap:12px;align-items:flex-start;margin:0} .tdb-t-list i{flex:none;width:24px;height:24px;border-radius:50%;background:rgba(29,143,78,.20);color:#5fd39a;font-style:normal;font-weight:700;font-size:13px;line-height:1;display:flex;align-items:center;justify-content:center;margin-top:2px} .tdb-t-list b{display:block;color:#fff;font-weight:500;font-size:16px;line-height:1.4} .tdb-t-list em{display:block;color:#9aa2b1;font-style:normal;font-size:14px;line-height:1.45;margin-top:2px} .tdb-t-card{background:#fff;border-radius:16px;padding:26px 26px 22px;box-shadow:0 18px 44px rgba(8,10,20,.34)} .tdb-t-ttl{font-size:19px;font-weight:500;color:#20242c;line-height:1.3} .tdb-t-dsc{font-size:13px;color:#7a756c;margin:6px 0 16px} .tdb-t-form input[type="text"],.tdb-t-form input[type="tel"],.tdb-t-form input[type="email"],.tdb-t-form textarea{width:100%;border:1px solid #dcd7cc;border-radius:9px;font-size:14px;font-family:inherit;color:#20242c;background:#fff;background-image:none;filter:none;box-shadow:none;margin:0 0 10px;transition:border-color .15s,box-shadow .15s} .tdb-t-form input[type="text"],.tdb-t-form input[type="tel"],.tdb-t-form input[type="email"]{height:44px;padding:0 14px} .tdb-t-form textarea{height:68px;min-height:68px;padding:11px 14px;resize:none;display:block} .tdb-t-form input:focus,.tdb-t-form textarea:focus{outline:none;border-color:#2f55d4;box-shadow:0 0 0 3px rgba(47,85,212,.13)} .tdb-t-form input::-webkit-input-placeholder,.tdb-t-form textarea::-webkit-input-placeholder{color:#a8a29a;font-family:inherit;font-size:14px} .tdb-t-form input::-moz-placeholder,.tdb-t-form textarea::-moz-placeholder{color:#a8a29a;font-family:inherit;font-size:14px;opacity:1} .tdb-t-form input:-ms-input-placeholder,.tdb-t-form textarea:-ms-input-placeholder{color:#a8a29a;font-family:inherit;font-size:14px} .tdb-t-form input::placeholder,.tdb-t-form textarea::placeholder{color:#a8a29a;font-family:inherit;font-size:14px} .tdb-t-file{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:2px 0 14px;cursor:pointer;font-weight:400} .tdb-t-file input[type="file"]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;opacity:0;overflow:hidden} .tdb-t-file-btn{display:inline-flex;align-items:center;border:1px dashed #c3bdb0;border-radius:9px;padding:9px 14px;font-size:13.5px;color:#4a4640;background:#faf8f4;transition:border-color .15s,color .15s} .tdb-t-file-btn::before{content:'+';font-size:16px;line-height:1;margin-right:8px;color:#2f55d4} .tdb-t-file:hover .tdb-t-file-btn{border-color:#2f55d4;color:#2f55d4} .tdb-t-file-name{font-size:13px;color:#1d8f4e;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .tdb-t-btn{width:100%;height:50px;background:#2f55d4;color:#fff;border:0;border-radius:9px;font-size:15px;font-weight:500;font-family:inherit;cursor:pointer;transition:background .15s} .tdb-t-btn:hover{background:#2646b0} .tdb-t-btn:active{background:#20399a} .tdb-t-btn:disabled{opacity:.6;cursor:default} .tdb p.tdb-t-fine{font-size:11px;color:#9a948a;text-align:center;margin:11px 0 0;line-height:1.45} .tdb-t-fine a{color:#7a756c;text-decoration:underline} .tdb-t-ok{text-align:center;padding:24px 8px} .tdb-t-ok-i{width:46px;height:46px;border-radius:50%;background:#e6f4ec;color:#1d8f4e;font-size:24px;display:flex;align-items:center;justify-content:center;margin:0 auto 12px} .tdb-t-ok b{display:block;font-size:18px;font-weight:500;color:#20242c} .tdb-t-ok span{display:block;font-size:14px;color:#7a756c;margin-top:8px;line-height:1.55} /* светлая лента: блок задуман тёмным, но на песочном/белом фоне тоже должен читаться. Плашки и зелёные кружки в тёмной версии полупрозрачно-белые — на светлом они выцветают, поэтому здесь перекрашиваются в плотные цвета палитры. */ .tdb-band:not(.tdb-dark) .tdb-t-lead h3,.tdb-band:not(.tdb-dark) .tdb-t-list b{color:#20242c} .tdb-band:not(.tdb-dark) .tdb p.tdb-t-sub{color:#413d37} .tdb-band:not(.tdb-dark) .tdb-t-sub a{color:#2f55d4} .tdb-band:not(.tdb-dark) .tdb-t-list em{color:#7a756c} .tdb-band:not(.tdb-dark) .tdb-t-phone{color:#4a4640} .tdb-band:not(.tdb-dark) .tdb-tender .tdb-badges span{color:#2f55d4;background:#eaeefb;border-color:#d5ddf8} .tdb-band:not(.tdb-dark) .tdb-t-list i{background:#e6f4ec;color:#1d8f4e} .tdb-band:not(.tdb-dark) .tdb-t-card{border:1px solid #e6dcc4;box-shadow:0 12px 32px rgba(60,45,15,.12)} /* seo text */ .tdb-seo{max-width:74ch;margin:0 auto;color:#7a756c;font-size:14px;line-height:1.75} .tdb-seo h3{font-size:20px;color:#20242c;margin-bottom:14px} .tdb-seo p{margin-bottom:12px} .tdb-seo b{color:#4a4640;font-weight:500} @media (max-width:880px){ .tdb-stats{grid-template-columns:repeat(2,1fr)} .tdb-stat:nth-child(2n){border-right:0} .tdb-steps,.tdb-cards{grid-template-columns:repeat(2,1fr)} .tdb-gallery{grid-template-columns:repeat(2,1fr)} .tdb-ph.tdb-ph-wide{grid-column:span 2} .tdb-ph.tdb-ph-tall{grid-row:auto} .tdb-promo{grid-template-columns:1fr} .tdb-tender{grid-template-columns:1fr;gap:26px} .tdb-t-lead h3{font-size:23px} .tdb-head h2{font-size:24px} .tdb-band.tdb-warm,.tdb-band.tdb-white,.tdb-band.tdb-dark{padding:40px 0} } @media (max-width:520px){ .tdb-t-card{padding:20px 18px 18px} } @media (prefers-reduced-motion:reduce){.tdb-band *{transition:none!important}} /* Отступ темы footer{margin-top:80px} гасится теперь в блоке «TDPD: футер» в конце файла, для всех страниц. Здесь раньше стояло `body.common-home footer{margin-top:0}` — оно весило больше (класс+2 элемента) и не давало футеру подтянуться на 1px, чтобы закрыть белую полоску. Не возвращать. */ /* ===== ТЕНДЕРНАЯ ПОСАДОЧНАЯ: раскладки hero / laws / registry + примечание ===== */ /* Число колонок по количеству элементов. Базовые правила выше дают 4 колонки; селектор из двух классов их перебивает, поэтому мобильные переопределения ниже написаны как `.tdb-band .tdb-*` — та же удельная сила, но позже в файле. */ .tdb-stats.tdb-n3{grid-template-columns:repeat(3,1fr)} .tdb-stats.tdb-n5{grid-template-columns:repeat(5,1fr)} .tdb-stats.tdb-n6{grid-template-columns:repeat(3,1fr)} .tdb-cards.tdb-n2{grid-template-columns:repeat(2,1fr)} .tdb-cards.tdb-n3,.tdb-cards.tdb-n5,.tdb-cards.tdb-n6,.tdb-cards.tdb-n9{grid-template-columns:repeat(3,1fr)} .tdb-steps.tdb-n3{grid-template-columns:repeat(3,1fr)} .tdb-steps.tdb-n5{grid-template-columns:repeat(5,1fr)} /* --- первый экран --- */ .tdb-band.tdb-hero-band{padding:58px 0 62px} .tdb-hero{display:grid;grid-template-columns:1.12fr .88fr;gap:44px;align-items:center} .tdb-hero.tdb-hero-solo{grid-template-columns:1fr;max-width:780px} .tdb h1{color:#fff;font-weight:500;font-size:40px;line-height:1.12;letter-spacing:-.015em;margin:13px 0 0} .tdb-band:not(.tdb-dark) .tdb h1{color:#20242c} .tdb p.tdb-hero-sub{color:#c3c8d6;font-size:17px;line-height:1.6;margin:18px 0 0;max-width:46ch} .tdb-hero-sub b{color:#fff;font-weight:500} .tdb-band:not(.tdb-dark) .tdb p.tdb-hero-sub{color:#4a4640} .tdb-band:not(.tdb-dark) .tdb-hero-sub b{color:#20242c} .tdb-hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px} /* `.tdb a{color:#2f55d4}` выше по файлу весит класс+элемент — пишем кнопки так же, иначе цвет не встанет */ .tdb a.tdb-btn{display:inline-flex;align-items:center;justify-content:center;height:50px;padding:0 24px;border-radius:9px;background:#2f55d4;color:#fff;font-size:15px;font-weight:500;transition:background .15s,border-color .15s} .tdb a.tdb-btn:hover{background:#2646b0;color:#fff} .tdb a.tdb-btn:active{background:#20399a} .tdb a.tdb-btn-ghost{background:transparent;border:1px solid rgba(255,255,255,.28);color:#fff} .tdb a.tdb-btn-ghost:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.5);color:#fff} .tdb-band:not(.tdb-dark) .tdb a.tdb-btn-ghost{border-color:#d5ddf8;color:#2f55d4} .tdb-band:not(.tdb-dark) .tdb a.tdb-btn-ghost:hover{background:#eaeefb;border-color:#2f55d4;color:#2f55d4} .tdb-chips{display:flex;gap:9px;flex-wrap:wrap;margin-top:26px} .tdb-chip{display:inline-flex;align-items:center;gap:7px;font-size:14px;color:#dfe3ea;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);padding:8px 14px;border-radius:99px} .tdb-chip i{font-style:normal;font-weight:500;color:#8ea6f5} .tdb-band:not(.tdb-dark) .tdb-chip{color:#4a4640;background:#fff;border-color:#e6dcc4} .tdb-band:not(.tdb-dark) .tdb-chip i{color:#2f55d4} .tdb-hero-photo{position:relative} .tdb-hero-frame{border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.12);background:#171a21;box-shadow:0 26px 54px rgba(0,0,0,.42)} .tdb-hero-frame img{width:100%;height:380px;object-fit:cover} .tdb-band:not(.tdb-dark) .tdb-hero-frame{border-color:#e6dcc4;background:#fff;box-shadow:0 18px 44px rgba(60,45,15,.16)} .tdb-hero-tag{position:absolute;left:14px;right:14px;bottom:14px;background:rgba(20,23,30,.84);border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:9px 13px;font-size:13px;color:#fff} .tdb-hero-tag b{display:block;font-weight:500;line-height:1.35} .tdb-hero-tag span{display:block;color:#a6adba;line-height:1.35;margin-top:1px} /* --- карточки с бейджами (44-ФЗ / 223-ФЗ) --- */ .tdb-laws{display:grid;grid-template-columns:repeat(2,1fr);gap:24px} .tdb-laws.tdb-n3{grid-template-columns:repeat(3,1fr)} .tdb-law{background:#fff;border:1px solid #e6dcc4;border-radius:14px;padding:27px 26px;box-shadow:0 8px 28px rgba(60,45,15,.09)} .tdb-law-badge{display:inline-block;font-size:13px;font-weight:500;color:#2f55d4;background:#eaeefb;border:1px solid #d5ddf8;padding:5px 12px;border-radius:8px;letter-spacing:.02em} .tdb-law h3{font-size:19px;margin:15px 0 8px} .tdb-law p{color:#7a756c;font-size:15px} .tdb-dark .tdb-law{background:#272c36;border-color:#343a45;box-shadow:none} .tdb-dark .tdb-law p{color:#9aa2b1} .tdb-dark .tdb-law-badge{color:#8ea6f5;background:rgba(142,166,245,.12);border-color:rgba(142,166,245,.3)} /* --- реестр контрактов --- */ .tdb-verify{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:#5fd39a;background:rgba(29,143,78,.16);border:1px solid rgba(29,143,78,.42);padding:9px 16px;border-radius:99px;margin-top:16px} .tdb-verify i{font-style:normal;font-weight:700} .tdb .tdb-verify a{color:inherit} .tdb-band:not(.tdb-dark) .tdb-verify{color:#1d8f4e;background:#e6f4ec;border-color:#bfe3ce} .tdb-regs{display:grid;grid-template-columns:repeat(2,1fr);gap:10px} .tdb .tdb-reg{display:flex;align-items:center;gap:13px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:11px;padding:13px 16px;color:#fff;transition:border-color .15s,background .15s} .tdb a.tdb-reg:hover{border-color:#2f55d4;background:rgba(47,85,212,.16);color:#fff} .tdb-reg-i{flex:none;color:#5fd39a;font-size:15px;line-height:1} .tdb-reg-b{display:flex;flex-direction:column;min-width:0} .tdb-reg-k{font-family:ui-monospace,"Cascadia Code","Consolas","Courier New",monospace;font-size:15px;letter-spacing:.02em;font-variant-numeric:tabular-nums;line-height:1.3;word-break:break-all} .tdb-reg-t{font-size:13px;color:#9aa2b1;line-height:1.35;margin-top:3px} .tdb-band:not(.tdb-dark) .tdb .tdb-reg{background:#fff;border-color:#e6dcc4;color:#20242c;box-shadow:0 4px 14px rgba(60,45,15,.06)} .tdb-band:not(.tdb-dark) .tdb-reg-i{color:#1d8f4e} .tdb-band:not(.tdb-dark) .tdb-reg-t{color:#7a756c} /* --- примечание под блоком (пунктирная плашка) --- */ .tdb-note{margin-top:24px;padding:17px 22px;border-radius:14px;border:1px dashed #d8d1c2;background:rgba(255,255,255,.55);color:#7a756c;font-size:15px;line-height:1.6} .tdb-note b{color:#20242c;font-weight:500} .tdb-dark .tdb-note{border-color:#3a4049;background:rgba(255,255,255,.04);color:#9aa2b1} .tdb-dark .tdb-note b{color:#fff} /* Страница-посадочная: на ней первый экран сам несёт h1, поэтому штатную «шапку» информационной страницы (хлебные крошки + h1 + описание) гасим. Цепляемся за наличие блока-хиро, чтобы не задеть остальные инфо-страницы. Для браузеров без :has() тот же эффект даёт запасной скрипт в footer.tpl. */ .container:has(.tdb-hero-band) > .col-sm-12.content-row, .container > .col-sm-12.content-row.tdpd-lp-hide{display:none} /* Мобильные правила перечисляют ИМЕННО новые счётные классы: блоки главной идут с tdb-n4, их раскладку эти правила не трогают — она остаётся прежней. */ @media (max-width:880px){ .tdb-stats.tdb-n3,.tdb-stats.tdb-n5,.tdb-stats.tdb-n6{grid-template-columns:repeat(2,1fr)} .tdb-stats.tdb-n5 .tdb-stat:nth-child(5){grid-column:span 2;border-right:0} .tdb-cards.tdb-n3,.tdb-cards.tdb-n5,.tdb-cards.tdb-n6,.tdb-cards.tdb-n9{grid-template-columns:repeat(2,1fr)} .tdb-steps.tdb-n3,.tdb-steps.tdb-n5{grid-template-columns:repeat(2,1fr)} .tdb-laws,.tdb-laws.tdb-n3{grid-template-columns:1fr} .tdb-hero,.tdb-regs{grid-template-columns:1fr} .tdb-hero{gap:28px} .tdb h1{font-size:31px} .tdb-hero-frame img{height:280px} .tdb-band.tdb-hero-band{padding:40px 0 44px} } @media (max-width:600px){ .tdb-cards.tdb-n3,.tdb-cards.tdb-n5,.tdb-cards.tdb-n6,.tdb-cards.tdb-n9{grid-template-columns:1fr} .tdb-steps.tdb-n3,.tdb-steps.tdb-n5{grid-template-columns:1fr} .tdb h1{font-size:26px} .tdb p.tdb-hero-sub{font-size:16px} .tdb-hero-cta{display:grid;grid-template-columns:1fr;gap:10px} .tdb-hero-frame img{height:220px} .tdb-reg-k{font-size:13.5px} } /* ===== /ТЕНДЕРНАЯ ПОСАДОЧНАЯ ===== */ /* ===== /TDPD блоки главной ===== */ /* ===== TDPD: футер ===== */ /* фон темы приходит из --footer-bg (custom.css:20) и правила footer{background-color:var(--footer-bg)} — перебиваем усиленным селектором, чтобы не трогать переменную, которую может читать что-то ещё */ /* margin-top:-1px — тема выводит после блоков ПУСТУЮ замыкающую строку .row > .col-sm-12 высотой ровно 1px; сквозь неё виден белый фон страницы, и над тёмным футером это читается белой полосой. Подтягиваем футер на эту 1px, ничего не пряча (на других страницах перекрытие в 1px приходится на пустое место под контентом и не видно). */ html body footer{background:#20242C;margin-top:-1px;color:#B8BEC9;font-family:"Rubik","Segoe UI",system-ui,-apple-system,Arial,sans-serif} html body footer *{box-sizing:border-box} footer a{color:#DDE1E8;text-decoration:none;transition:color .15s} footer a:hover,footer a:focus{color:#fff;text-decoration:none} /* тема даёт .footer-links .inner{padding:7.7rem 0 3.6rem} и свой медиазапрос — custom.css ниже, берёт без !important */ .footer-links .inner{padding:56px 0 40px} .tdpd-foot{display:grid;grid-template-columns:1.62fr 1fr 1fr 1.2fr;gap:38px;align-items:start} .tdpd-fcol{min-width:0} .tdpd-fh{font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#8C93A0;margin:0 0 16px} .tdpd-flist{list-style:none;margin:0;padding:0} .tdpd-flist li{margin:0 0 10px;line-height:1.45} .tdpd-flist a{font-size:14.5px} .tdpd-flist .tdpd-fmore{color:#8ea6f5;font-weight:500} .tdpd-flist .tdpd-ftender{color:#fff;font-weight:500} .tdpd-flist .tdpd-ftender::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:#2F55D4;margin-right:8px;vertical-align:2px} .tdpd-flogo{display:inline-block;margin:0 0 16px} .tdpd-flogo img{width:170px;max-width:100%;height:auto;display:block} .tdpd-fdes{font-size:13.5px;line-height:1.6;color:#9AA2B1;margin:0 0 18px;max-width:38em} .tdpd-freq{border-top:1px solid #2E3340;padding-top:14px} /* ВАЖНО: stylesheet.min.css даёт `.footer-links span{font-size:2rem;color:#444;margin-bottom:2.7rem;display:block}` — он цепляет ЛЮБОЙ голый span в футере. Специфичность у нас та же (класс+элемент), выигрываем порядком, но перечислять надо ВСЕ его свойства: пропущенный margin-bottom разносил строки реквизитов на 27px. */ .tdpd-freq span{display:block;font-size:12.5px;line-height:1.55;color:#7F8695;margin:0 0 4px} .tdpd-freq span:last-child{margin-bottom:0} .tdpd-freq span:first-child{color:#B8BEC9} .tdpd-fcol-sales .tdpd-fphone{display:block;font-size:20px;font-weight:500;color:#fff;line-height:1.25;margin-bottom:6px;white-space:nowrap} .tdpd-fclock{font-size:13px;color:#8C93A0;margin:8px 0 16px} /* то же правило `.footer-links span` — без явных font-size/color/margin часы работы вылезали двадцатым кеглем серым #444, как заголовок */ .tdpd-fclock span{display:block;font-size:13px;line-height:1.5;color:#8C93A0;margin:0} .tdpd-fmails{margin-bottom:16px} .tdpd-fmails a{display:block;font-size:15px;color:#DDE1E8;margin-top:10px} .tdpd-fmails em{display:block;font-style:normal;font-size:12px;color:#7F8695;margin-top:2px} .tdpd-fadr{font-size:13px;line-height:1.55;color:#8C93A0;margin-bottom:18px} .tdpd-fcall{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 22px;background:#2F55D4;color:#fff;border-radius:9px;font-size:14.5px;font-weight:500} .tdpd-fcall:hover{background:#2646B0;color:#fff} .tdpd-fsoc{margin-top:18px} .tdpd-fsoc a{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;background:#2A2F3A;color:#B8BEC9;font-size:18px;margin-right:8px} .tdpd-fsoc a:hover{background:#2F55D4;color:#fff} /* нижняя строка: тема даёт ДВА почти белых разделителя — `.footer-copyright .inner{border-top:1px solid #ebebeb}` и отдельно `.footer-copyright > .container{border-top:1px solid #ebebeb}` (stylesheet_tdpd.css). Второй легко пропустить: он на .container, а не на .inner. На тёмном футере это была белая полоса. */ .footer-copyright > .container{border-top:0} .footer-copyright .inner{display:flex;flex-wrap:wrap;align-items:center;gap:10px 26px;width:100%;padding:18px 0 22px;border-top:1px solid #2E3340} .tdpd-fbot{display:flex;flex-wrap:wrap;align-items:center;gap:10px 26px;width:100%} .tdpd-fbot-l{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px} .tdpd-fbot-r{margin-left:auto} .tdpd-fcopy{font-size:12.5px;color:#7F8695} .tdpd-fbot-l a{font-size:12.5px;color:#8C93A0} .tdpd-fbot-l a:hover{color:#fff} .tdpd-flaw{display:inline-block;font-size:12.5px;color:#B8BEC9;background:#2A2F3A;border:1px solid #343A47;border-radius:8px;padding:7px 14px} @media (max-width:991px){ .footer-links .inner{padding:40px 0 28px} .tdpd-foot{grid-template-columns:1fr 1fr;gap:30px} .tdpd-fcol-about{grid-column:1/-1} } @media (max-width:560px){ .tdpd-foot{grid-template-columns:1fr;gap:26px} .tdpd-fbot-r{margin-left:0} .tdpd-fcol-sales .tdpd-fphone{font-size:22px} } /* ===== /TDPD футер ===== */ /* ===== TDPD: шапка — чистка и акценты (2026-08-03). Только десктоп >=1200px, мобильная не трогается ===== */ @media (min-width: 1200px) { /* «Перезвонить мне» под телефоном — это действие, а не подпись */ header .col-cart .header-phone .field-tip.show-phones { color: #2f55d4 !important; } header .col-cart .header-phone .field-tip.show-phones:hover { color: #20399a !important; text-decoration: underline; } /* «Тендерным отделам» — целевая страница, выделяем в служебной строке */ .box-top a.btn-top[href*="tenders"] { color: #2f55d4 !important; font-weight: 600; } } /* ===== /TDPD шапка ===== */ /* ===== TDPD: посадочная «Мебель для детского сада» (14.08.2026) ===== */ /* --- 1. Разделы каталога: плитки подкатегорий сжаты в строку чипов --------------- Работает на ВСЕХ категориях (правка в product/category.tpl общая). Классы новые, поэтому легаси #subcats .subcat-box из stylesheet.css не мешает. */ .tdpd-subs-row{margin:0 0 20px} .tdpd-subs-h{font-family:"Rubik","Segoe UI",Arial,sans-serif;font-size:13px;font-weight:500;color:#20242c;margin:0 0 10px} .tdpd-subs-cb{position:absolute!important;width:1px;height:1px;opacity:0;pointer-events:none} .tdpd-subs{display:flex;flex-wrap:wrap;gap:8px} .tdpd-subs .tdpd-subchip{display:inline-block;margin:0;padding:8px 14px;border:1px solid #dde2ee;border-radius:9px;background:#fff;color:#20242c;font-family:"Rubik","Segoe UI",Arial,sans-serif;font-size:13px;font-weight:400;line-height:1.25;text-decoration:none;white-space:nowrap;transition:.15s} .tdpd-subs .tdpd-subchip:hover{border-color:#2f55d4;color:#2f55d4;text-decoration:none} .tdpd-subs .tdpd-subchip.is-extra{display:none} .tdpd-subs-cb:checked ~ .tdpd-subs .tdpd-subchip.is-extra{display:inline-block} .tdpd-subs .tdpd-subchip-more{cursor:pointer;border-style:dashed;color:#5c6675;-webkit-user-select:none;user-select:none} .tdpd-subs .tdpd-subchip-more:hover{color:#2f55d4;border-color:#2f55d4} .tdpd-subs .tdpd-subs-close{display:none} .tdpd-subs-cb:checked ~ .tdpd-subs .tdpd-subs-open{display:none} .tdpd-subs-cb:checked ~ .tdpd-subs .tdpd-subs-close{display:inline} @media (max-width:767px){ .tdpd-subs .tdpd-subchip{padding:7px 12px;font-size:12.5px;white-space:normal} } /* --- 2. Метка ростовой группы на карточке товара ------------------------------- .caption у темы — флекс-колонка с order (h4:1, price:2, box-cart:5), поэтому метке нужен order:0, иначе она уедет вниз. */ :is(#res-products,.tdb-sale-row) .caption .tdpd-rost{order:0;align-self:flex-start;display:inline-block;margin:0 0 6px;padding:2px 8px;border-radius:5px;background:#e9f4ee;color:#12703c;font-family:"Rubik","Segoe UI",Arial,sans-serif;font-size:11px;font-weight:500;line-height:17px;letter-spacing:.01em;white-space:nowrap} /* --- 3. Полоса фактов — новая раскладка модуля tdpd_block ---------------------- Общая, не привязана к странице: пригодится на любой посадочной. */ .tdb-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:14px 0} .tdb-facts.tdb-n2{grid-template-columns:repeat(2,1fr)} .tdb-facts.tdb-n3{grid-template-columns:repeat(3,1fr)} .tdb-facts.tdb-n5{grid-template-columns:repeat(5,1fr)} .tdb-fact{padding:2px 20px;border-left:1px solid rgba(60,45,15,.16)} .tdb-fact:first-child{border-left:0;padding-left:0} .tdb-fact i{font-style:normal;font-size:15px;line-height:1;margin-right:6px} .tdb-fact b{display:block;font-size:14px;font-weight:500;line-height:1.25;color:#20242c} .tdb-fact span{display:block;margin-top:2px;font-size:12.5px;line-height:1.35;color:#7a756c} .tdb-dark .tdb-fact{border-left-color:rgba(255,255,255,.14)} .tdb-dark .tdb-fact b{color:#fff} .tdb-dark .tdb-fact span{color:#9aa2b1} @media (max-width:767px){ .tdb-facts{grid-template-columns:repeat(2,1fr);gap:10px 0} .tdb-fact{padding:2px 12px} .tdb-facts .tdb-fact:nth-child(2n+1){border-left:0;padding-left:0} } /* --- 4. Хвостовой блок «не нашли позицию» — на ВСЕХ категориях ------------------ body[class^="product-category-"] цепляет только листинги категорий: у главной класс common-home, у /tenders.html — information-information. */ body[class^="product-category-"] .tdb-warm .tdb-promo{gap:20px;align-items:center} body[class^="product-category-"] .tdb-warm .tdb-promo-lead{padding:24px 26px} body[class^="product-category-"] .tdb-warm .tdb-promo-lead h3{font-size:20px} body[class^="product-category-"] .tdb-warm .tdb-promo-lead p{margin-top:8px;font-size:14.5px} body[class^="product-category-"] .tdb-warm .tdb-promo-lead a{margin-top:16px} body[class^="product-category-"] .tdb-warm .tdb-promo-list{gap:12px} body[class^="product-category-"] .tdb-band.tdb-warm{padding:30px 0} /* Фильтр слева: шаблон отдаёт #content классом col-sm-9, а карточки остаются col-lg-3 — четыре штуки в ряд по 207 px. Ставим три. */ body[class^="product-category-"] #content.col-sm-9 :is(#res-products,.tdb-sale-row) .product-items{width:33.3333%} @media (max-width:991px){ body[class^="product-category-"] #content.col-sm-9 :is(#res-products,.tdb-sale-row) .product-items{width:50%} } /* --- 5. Ленты первого экрана — ТОЛЬКО «Мебель для детского сада» --------------- 233_242 — body-класс этой категории. На других категориях блоков 1, 2 и 4 нет, там остаются только фильтр и хвостовой блок. */ body.product-category-233_242 .tdb-band.tdb-white{padding:30px 0} body.product-category-233_242 .tdb-head{margin-bottom:20px} body.product-category-233_242 .tdb-head h2{font-size:23px} body.product-category-233_242 .tdb-head p{font-size:15px;margin-top:8px} /* 5.1 Блок 1 — хиро с формой расчёта (раскладка «Тендерная форма», фон «Белый»). Сжат по высоте: первый экран должен успевать показать и предложение, и начало каталога. */ body.product-category-233_242 .tdb-tender{gap:28px;align-items:start} body.product-category-233_242 .tdb-t-lead h3{font-size:24px} body.product-category-233_242 .tdb p.tdb-t-sub{margin-top:9px;font-size:14.5px} body.product-category-233_242 .tdb-t-list{margin-top:14px;gap:8px} body.product-category-233_242 .tdb-t-list li{margin:0} body.product-category-233_242 .tdb-t-card{padding:18px 20px 16px} body.product-category-233_242 .tdb-t-ttl{font-size:16px} body.product-category-233_242 .tdb-t-dsc{margin-bottom:12px;font-size:13px} body.product-category-233_242 .tdb-t-form input[type="text"], body.product-category-233_242 .tdb-t-form input[type="tel"], body.product-category-233_242 .tdb-t-form input[type="email"]{height:40px;margin-bottom:8px} body.product-category-233_242 .tdb-t-form textarea{height:52px;min-height:52px;margin-bottom:8px} body.product-category-233_242 .tdb-t-file{margin-bottom:10px} body.product-category-233_242 .tdb-t-btn{height:46px} body.product-category-233_242 .tdb-t-fine{margin-top:8px;font-size:11px;line-height:1.4} /* 5.2 Блок 4 — «С чем пришли?»: карточки-сценарии с синей отбивкой слева */ body.product-category-233_242 .tdb-warm .tdb-cards{gap:16px} body.product-category-233_242 .tdb-warm .tdb-card{padding:16px 18px;border-left:3px solid #2f55d4} body.product-category-233_242 .tdb-warm .tdb-card h3{font-size:16px} body.product-category-233_242 .tdb-warm .tdb-card p{margin-top:6px;font-size:13.5px;line-height:1.45} body.product-category-233_242 .tdb-warm .tdb-card a{color:#2f55d4;font-weight:500;white-space:nowrap} body.product-category-233_242 .tdb-warm .tdb-card a:hover{color:#2646b0;text-decoration:underline} /* 5.3 Заголовок категории между лентами и каталогом — как подпись раздела */ body.product-category-233_242 h1.cat-header{margin:26px 0 14px;font-size:22px} /* На мобильном ленты складываются в столбик и уводят товары далеко вниз (замер: первый товар 2279 px). Поэтому там режем повторы: список УТП в блоке 1 дублирует полосу фактов блока 2, подзаголовок блока 4 не нужен. После этого первый товар на 1943 px. */ @media (max-width:767px){ body.product-category-233_242 .tdb-band.tdb-white{padding:24px 0} body[class^="product-category-"] .tdb-band.tdb-warm{padding:24px 0} body.product-category-233_242 .tdb-t-lead h3{font-size:20px} body.product-category-233_242 .tdb p.tdb-t-sub{font-size:13.5px} body.product-category-233_242 .tdb-tender .tdb-t-list{display:none} body.product-category-233_242 .tdb-warm .tdb-head{margin-bottom:14px} body.product-category-233_242 .tdb-warm .tdb-head p{display:none} body.product-category-233_242 .tdb-warm .tdb-cards{gap:10px} body.product-category-233_242 .tdb-warm .tdb-card{padding:12px 14px} } /* ===== /TDPD посадочная «Мебель для детского сада» ===== */ /* ===== TDPD: фильтр товаров (oct_product_filter) — верстка 15.08.2026 ===== Почему всё оформление тут, а не в файлах модуля: 1) собственный `octemplates/oct_product_filter/stylesheet.css` модуль подключает только при выключенной минификации (контроллер, стр. 250) — на сайте она включена, поэтому файл не грузится; 2) `stylesheet_minify.css`, где лежала верстка фильтра и мобильной шторки, закомментирован в `header.tpl` (стр. 194); 3) даже если их включить, они грузятся ДО `custom.css` и перебивались бы отсюда. Значит здесь и функциональная база (ползунок, свёртка блоков), и оформление. */ /* --- 1. Ползунок цены ----------------------------------------------------------- Библиотечный `nouislider.css` на сайте не подключён (тот же контроллер, стр. 255), а без него у ползунка нет ни геометрии, ни позиционирования — на месте цены была пустая полоса. Ниже минимум из библиотеки плюс оформление. */ #tdpd-price-slider{position:relative;direction:ltr;height:4px;margin:6px 9px 20px;background:#e9eaee;border:0;border-radius:4px;box-shadow:none} #tdpd-price-slider *{box-sizing:border-box;touch-action:none;-webkit-user-select:none;-moz-user-select:none;user-select:none} #tdpd-price-slider .noUi-base{position:relative;z-index:1;width:100%;height:100%} #tdpd-price-slider .noUi-origin{position:absolute;width:0;height:0} #tdpd-price-slider .noUi-connect{position:absolute;top:0;right:0;bottom:0;left:0;background:#2f55d4;border-radius:4px;box-shadow:none} #tdpd-price-slider .noUi-handle{position:relative;z-index:1;top:-7px;left:-9px;width:18px;height:18px;background:#fff;border:2px solid #2f55d4;border-radius:50%;box-shadow:0 1px 3px rgba(32,36,44,.2);cursor:pointer} #tdpd-price-slider .noUi-handle::before, #tdpd-price-slider .noUi-handle::after{display:none} #tdpd-price-slider .noUi-active{box-shadow:0 0 0 4px rgba(47,85,212,.16)} #tdpd-price-slider .noUi-state-tap .noUi-connect, #tdpd-price-slider .noUi-state-tap .noUi-origin{transition:left .25s,right .25s} /* --- 2. Карточка фильтра -------------------------------------------------------- `#tdpd-ismobile` — это и есть коробка фильтра: на десктопе она лежит в `#filter-column`, на ширине ≤992 скрипт модуля переносит её в шторку `#filter-mobile`. Поэтому все правила цепляются к ней, а не к колонке. */ #tdpd-ismobile{margin-bottom:24px;background:#fff;border:1px solid #e9eaee;border-radius:14px;overflow:hidden} #tdpd-ismobile .box-heading{position:relative;margin:0;padding:15px 18px;background:#fff;border:0;border-bottom:1px solid #eef0f4;font-size:16px;font-weight:500;line-height:1.2;color:#20242c;text-transform:none;letter-spacing:0} #tdpd-ismobile .box-content, #tdpd-ismobile .box-content.filtered{margin:0;padding:0;border:0;background:#fff} /* Заголовок группы: «Цена», «Ростовая группа», «Производитель»… */ #tdpd-ismobile .item-title{margin:0} #tdpd-ismobile a.list-group-item.item-name{position:relative;display:block;margin:0;padding:14px 46px 14px 18px;background:#fff;border:0;border-radius:0;cursor:pointer} #tdpd-ismobile a.list-group-item.item-name .name{font-size:15px;font-weight:500;line-height:1.3;color:#20242c} #tdpd-ismobile a.list-group-item.item-name:hover .name{color:#2f55d4} /* Маркер «свернуть/развернуть». Иконку FontAwesome гасим: обработчик модуля переключает её классы с ошибкой (`toggleClass("fa-minus").addClass("fa-plus")` — плюс возвращается всегда). Рисуем ± сами от класса `.expanded`, который переключается верно. Две полоски, а не поворот глифа: повёрнутый плюс даёт ×. */ #tdpd-ismobile a.list-group-item .link{position:absolute;top:50%;right:17px;display:block;width:14px;height:14px;margin-top:-7px} #tdpd-ismobile a.list-group-item .link i{display:none} #tdpd-ismobile a.list-group-item .link::before, #tdpd-ismobile a.list-group-item .link::after{content:"";position:absolute;background:#98a2b3;border-radius:2px;transition:opacity .18s,transform .18s} #tdpd-ismobile a.list-group-item .link::before{top:6px;left:0;width:14px;height:2px} #tdpd-ismobile a.list-group-item .link::after{top:0;left:6px;width:2px;height:14px} #tdpd-ismobile .expanded > .item-title .link::after{opacity:0;transform:rotate(90deg)} #tdpd-ismobile a.list-group-item.item-name:hover .link::before, #tdpd-ismobile a.list-group-item.item-name:hover .link::after{background:#2f55d4} /* Содержимое группы. `display:none/block` держит stylesheet.min.css, но правило там одно и без него свёртка сломается — дублируем, чтобы блок был самодостаточным. */ #tdpd-product-filter-data .item-content{display:none} #tdpd-product-filter-data .expanded .item-content{display:block} #tdpd-ismobile .list-group-item.item-content{margin:0;padding:0 18px 14px;border:0;background:#fff} /* Разделители между группами */ #tdpd-ismobile .inner-box{border-top:1px solid #f0f1f5} #tdpd-ismobile .inner-box:first-child{border-top:0} #tdpd-ismobile .inner-box[data-type="option"] > div + div, #tdpd-ismobile .inner-box[data-type="attribute"] > div + div, #tdpd-ismobile .inner-box[data-type="standard"] > div + div{border-top:1px solid #f0f1f5} /* --- 3. Строки значений --------------------------------------------------------- Родные чекбоксы прячем и рисуем свои на `label::before`. Bootstrap тащит `.checkbox input{position:absolute;margin-left:-20px}` и `label{font-weight:700}` — оба перебиты ниже. */ #tdpd-ismobile .item-content .checkbox, #tdpd-ismobile .item-content .radio{position:relative;margin:0;padding:0} #tdpd-ismobile .item-content .checkbox input[type="checkbox"], #tdpd-ismobile .item-content .radio input[type="radio"]{position:absolute;left:0;top:12px;width:1px;height:1px;margin:0;opacity:0;pointer-events:none} #tdpd-ismobile .item-content label{position:relative;display:block;margin:0;padding:8px 38px 8px 27px;font-size:13.5px;font-weight:400;line-height:1.35;color:#3a4152;cursor:pointer} #tdpd-ismobile .item-content label::before{content:"";position:absolute;left:0;top:9px;width:18px;height:18px;background:#fff;border:1px solid #cfd4e0;border-radius:5px;transition:background-color .15s,border-color .15s} #tdpd-ismobile .item-content label:hover{color:#2f55d4} #tdpd-ismobile .item-content label:hover::before{border-color:#2f55d4} #tdpd-ismobile .item-content input[type="checkbox"]:checked + label::before{background:#2f55d4 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center;background-size:12px 12px;border-color:#2f55d4} #tdpd-ismobile .item-content input[type="checkbox"]:checked + label{color:#20242c;font-weight:500} #tdpd-ismobile .item-content .radio label::before{border-radius:50%} #tdpd-ismobile .item-content input[type="radio"]:checked + label::before{background:#fff;border:5px solid #2f55d4} #tdpd-ismobile .item-content input:disabled + label{color:#a9afbd;cursor:not-allowed} #tdpd-ismobile .item-content input:disabled + label::before{background:#f4f5f7;border-color:#e2e5ee} #tdpd-ismobile .item-content input:disabled + label:hover{color:#a9afbd} /* Счётчик товаров справа от значения */ #tdpd-ismobile .tdpd-filter-total-label{position:absolute;right:0;top:9px;float:none;min-width:24px;margin:0;padding:1px 6px;background:#f2f4f8;border-radius:8px;font-size:11.5px;font-weight:500;line-height:16px;color:#98a2b3;text-align:center} #tdpd-ismobile .tdpd-filter-total-label.label-danger{background:#fdeaea;color:#d64545;cursor:pointer} #tdpd-ismobile .tdpd-filter-total-label.label-danger:hover{background:#d64545;color:#fff} #tdpd-ismobile .tdpd-filter-icon-unselect{font-size:9px;line-height:16px} /* --- 4. Цена -------------------------------------------------------------------- Поля темы идут с градиентным фоном и DX-фильтром — гасим, иначе рамка «плывёт». `.row` внутри переводим во flex, обязательно гасив clearfix-псевдоэлементы bootstrap: в flex/grid они становятся полноценными элементами и рвут сетку. */ #tdpd-ismobile .price-item .row{display:flex;gap:10px;margin:0} #tdpd-ismobile .price-item .row::before, #tdpd-ismobile .price-item .row::after{display:none} #tdpd-ismobile .price-item .row > div{float:none;width:50%;padding:0} #tdpd-ismobile input.tdpd-inp-pr-filter{width:100%;height:40px;padding:0 10px;background:#fff;background-image:none;filter:none;border:1px solid #e2e5ee;border-radius:10px;box-shadow:none;font-size:14px;line-height:38px;color:#20242c;text-align:center} #tdpd-ismobile input.tdpd-inp-pr-filter:focus{border-color:#2f55d4;box-shadow:0 0 0 3px rgba(47,85,212,.12);outline:none} #tdpd-ismobile .price-item .checkbox{margin-top:8px} /* --- 5. Выбранные значения ------------------------------------------------------ Блок стоит над формой и в свёртке не участвует, поэтому его строки оформляем чипсами, а не строками списка. Квадрат чекбокса здесь не нужен. ВАЖНО: селекторы с двумя id. Блок лежит внутри `.item-content`, и правила строк значений выше (`#tdpd-ismobile .item-content .checkbox`, один id + два класса) специфичнее, чем `#tdpd-selected-values .checkbox` — свой же скин съедал отступы чипсов. */ #tdpd-ismobile #tdpd-selected-values{background:#fbfcfe;border-bottom:1px solid #eef0f4} #tdpd-ismobile #tdpd-selected-values a.list-group-item.item-name{padding:14px 18px 4px;cursor:default;background:transparent} #tdpd-ismobile #tdpd-selected-values a.list-group-item.item-name .name{font-size:11.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:#98a2b3} #tdpd-ismobile #tdpd-selected-values a.list-group-item.item-name:hover .name{color:#98a2b3} #tdpd-ismobile #tdpd-selected-values .list-group-item.item-content{display:block;padding:0 18px 4px;background:transparent} #tdpd-ismobile #tdpd-selected-values .tdpd-selected-group-label{margin:8px 0 6px;font-size:12px;font-weight:500;color:#7a8194} #tdpd-ismobile #tdpd-selected-values .checkbox{display:inline-flex;align-items:center;gap:4px;max-width:100%;margin:0 6px 6px 0;padding:5px 8px 5px 11px;background:#eef2ff;border-radius:999px} #tdpd-ismobile #tdpd-selected-values .checkbox label, #tdpd-ismobile #tdpd-selected-values .checkbox label.tdpd-selected-values-label{display:inline;padding:0;font-size:13px;font-weight:400;line-height:16px;color:#2f55d4;cursor:default} #tdpd-ismobile #tdpd-selected-values .checkbox label::before{display:none} #tdpd-ismobile #tdpd-selected-values .checkbox label:hover{color:#2f55d4} #tdpd-ismobile #tdpd-selected-values .tdpd-filter-total-label, #tdpd-ismobile #tdpd-selected-values .tdpd-filter-total-label.label-danger{position:static;min-width:0;width:16px;height:16px;padding:0;background:transparent;color:#8ba0e8;line-height:16px} #tdpd-ismobile #tdpd-selected-values .tdpd-filter-total-label.label-danger:hover{background:transparent;color:#2f55d4} /* Кнопка сброса. Тема красит её в синий через `.tdpd-btn-blue{background:#3f3ffa!important}` (custom.css:2057) и задаёт `#button-reset{width:90%;margin-bottom:15px!important}`, поэтому здесь ровно те же свойства с `!important` — иначе кнопка остаётся тяжёлым синим блоком во всю карточку. */ #tdpd-ismobile #button-reset{display:block;width:calc(100% - 36px)!important;height:40px;margin:4px 18px 14px!important;padding:0 14px;background:#fff!important;border:1px solid #d9dded;border-radius:10px;box-shadow:none;font-size:14px;font-weight:500;color:#4a5163!important} #tdpd-ismobile #button-reset:hover{background:#f7f9ff!important;border-color:#2f55d4;color:#2f55d4!important} /* --- 6. Мобильная шторка -------------------------------------------------------- Разметку шторки (`#filter-mobile`) и кнопку `#filter-button` создаёт скрипт модуля, а стили к ним лежали в отключённом `stylesheet_minify.css`. ПОЧИНКА 16.08.2026 «шторка открывается не полностью». У темы есть своя схема шторки (`responsive.css`, @media max-width:992): ширина 240px, `margin-left:-240px`, открытие — `transform:translateX(100%)`. 15.08 мы переопределили ширину (300px) и трансформы (`-100%` → `0`), но `margin-left:-240px` не погасили. Итог: открытая шторка стояла на -240px и наружу выходили ровно 60px из 300 — это и видно на скриншотах. Лечит одна строка `margin-left:0`; без неё любая ширина съедается на 240px. */ #filter-mobile{position:fixed;top:0;left:0;bottom:0;z-index:10000;width:300px;max-width:88vw;margin-left:0;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;background:#fff;transform:translateX(-100%);transition:transform .28s ease;box-shadow:0 0 30px rgba(0,0,0,.18);overscroll-behavior:contain} #filter-mobile:empty{display:none} #filter-mobile.filter-show{transform:translateX(0)} #filter-mobile #tdpd-ismobile{margin:0;border:0;border-radius:0;padding-bottom:74px} #filter-mobile .box-heading{padding-right:48px} #filter-close{display:none} #filter-mobile #filter-close{position:absolute;top:11px;right:12px;display:block;width:28px;height:28px;font-size:24px;line-height:26px;color:#98a2b3;text-align:center;cursor:pointer} #filter-mobile #filter-close:hover{color:#20242c} /* Затенение под шторкой. Тема рисует его правилом `#filter-mobile.filter-show + .wrapper::before`, но на нашей странице следующий за шторкой элемент — `.load-container`, и правило не срабатывает. Поэтому своя подложка: она же закрывает шторку по тапу. */ #tdpd-filter-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9990;background:rgba(20,24,33,.45);opacity:0;visibility:hidden;transition:opacity .28s,visibility .28s} #tdpd-filter-backdrop.show{opacity:1;visibility:visible} html.tdpd-filter-lock{overflow:hidden} /* Нижняя кнопка «Показать N товаров». `position:fixed` внутри шторки цепляется именно за шторку: у неё есть `transform`, а он создаёт содержащий блок для fixed-потомков. Поэтому кнопка стоит по низу панели и не уезжает при прокрутке списка значений. */ #tdpd-filter-apply{position:fixed;left:0;right:0;bottom:0;z-index:5;display:none;padding:10px 14px;padding-bottom:calc(10px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid #eef0f4;box-shadow:0 -6px 18px rgba(20,24,33,.10)} #filter-mobile.filter-show #tdpd-filter-apply{display:block} #tdpd-filter-apply button{display:block;width:100%;height:46px;padding:0 14px;background:#2f55d4;border:0;border-radius:12px;font-size:15px;font-weight:500;line-height:46px;color:#fff} #tdpd-filter-apply button:active{background:#2646b0} /* Родной попап «Показать (N)» модуля (режимы how_filter 0 и 2) внутри шторки позиционируется абсолютом от кликнутой строки и вылезает за панель. Приводим его к той же нижней плашке. */ #filter-mobile .popover{position:fixed!important;top:auto!important;left:0!important;right:0!important;bottom:0!important;z-index:6;width:auto!important;max-width:none;margin:0!important;padding:10px 14px;background:#fff;border:0;border-top:1px solid #eef0f4;border-radius:0;box-shadow:0 -6px 18px rgba(20,24,33,.10)} #filter-mobile .popover .arrow{display:none} #filter-mobile .popover .popover-content{padding:0} #filter-mobile .popover button{display:block;width:100%;height:46px;background:#2f55d4!important;border:0;border-radius:12px;font-size:15px;font-weight:500;color:#fff!important} /* Кнопка «Фильтр». Живёт в одной строке с сортировкой (см. блок 6б), поэтому невысокая и без внешних отступов. Счётчик справа — число выбранных значений, чтобы на мобильном было видно, что фильтр включён. */ #filter-button{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;background:#2f55d4;border-radius:10px;font-size:14px;font-weight:500;line-height:38px;color:#fff;white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none} #filter-button:hover,#filter-button:active{background:#2646b0} #filter-button svg{flex:0 0 auto;display:block} #filter-button .tdpd-fb-count{display:inline-block;min-width:19px;height:19px;padding:0 5px;background:#fff;border-radius:10px;font-size:12px;font-weight:600;line-height:19px;color:#2f55d4;text-align:center} /* 993, а не 992: скрипт модуля считает мобильным всё, что `<= 992`, и на ровно 992px правило `min-width:992` спрятало бы кнопку у ещё мобильной раскладки. */ @media (min-width:993px){ #filter-button,#tdpd-filter-backdrop,#tdpd-filter-apply{display:none} /* два id — иначе правило показа плашки (`#filter-mobile.filter-show #tdpd-filter-apply`) специфичнее и перебило бы строку выше */ #filter-mobile.filter-show #tdpd-filter-apply{display:none} /* на десктопе коробка фильтра лежит в `#filter-column`, а в шторке остаётся одна плашка — саму шторку прячем, иначе это пустая белая панель за левым краем экрана (`:empty` её больше не ловит) */ #filter-mobile{display:none} } /* --- 6б. Панель «Фильтр + сортировка» на мобильном ------------------------------ Кнопку модуль вешал в `.mobile-category-header` — пустой контейнер темы сразу под H1: синяя пилюля висела по центру отдельной строкой и отодвигала товары. Переносим её в `.sort-row` (скрипт модуля, см. `oct_product_filter.tpl`) и раскладываем строку во flex: [Фильтр] [сортировка]. Первый товар поднимается примерно на 80px. `.sort-row` — это bootstrap-овский `.row`, у него clearfix-псевдоэлементы: во flex они становятся полноценными элементами и рвут раскладку, поэтому гасятся явно. */ .mobile-category-header:empty{display:none} @media (max-width:992px){ .sort-row{display:flex!important;align-items:center;gap:10px;padding-top:0!important;margin-bottom:14px!important} .sort-row::before,.sort-row::after{display:none!important} .sort-row #filter-button{order:1;flex:0 0 auto;margin:0!important} .sort-row .right-sort-row{order:2;display:flex;align-items:center;justify-content:flex-end;gap:10px;flex:1 1 auto;width:auto!important;min-width:0;margin:0!important;float:none!important} .sort-row .left-sort-row{order:3;flex:0 0 auto;width:auto!important} /* в правой части темы живут ДВА контрола: «Сортировать» и «Показывать». Тянется «Сортировать» (`flex:1 1 auto` + `width:100%` на самом select). */ .sort-row .input-sort-div{display:flex!important;align-items:center;flex:1 1 auto;min-width:0;width:auto!important;margin:0!important;padding:0!important} .sort-row .input-sort-div .clearfix{display:none} .sort-row .input-sort-div > label, .sort-row .input-limit-div > label{width:auto;padding:0 6px 0 0;background:none;border:0;font-size:13px;color:#7a8194;white-space:nowrap} .sort-row #input-sort{width:100%!important;min-width:0} .sort-row #input-sort, .sort-row #input-limit{height:38px;padding:0 30px 0 12px;background:#fff;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2398a2b3' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center;filter:none;border:1px solid #e2e5ee;border-radius:10px;box-shadow:none;font-size:13.5px;color:#3a4152;-webkit-appearance:none;appearance:none;text-overflow:ellipsis} .sort-row #input-sort:focus, .sort-row #input-limit:focus{border-color:#2f55d4;outline:none} } /* «Показывать» тема показывает только с 768px. Его контейнер трогаем именно здесь: если раздать `display:flex!important` во всём мобильном диапазоне, на телефоне мы включим скрытый темой контрол и он съест 10px отступа. `flex:0 0 auto` — чтобы контейнер не сжимался: select внутри имеет ширину от темы, не сжимается вместе с ним и наезжает на переключатель вида (замерено на 768px). */ @media (min-width:768px) and (max-width:992px){ .sort-row .input-limit-div{display:flex!important;align-items:center;flex:0 0 auto;width:auto!important;margin:0!important;padding:0!important} } /* На телефоне «Показывать», подпись «Сортировать:» и переключатель вида тема скрывает сама — убираем и пустую левую ячейку, чтобы не съедала 10px на flex-отступ. */ @media (max-width:767px){ .sort-row .left-sort-row{display:none} } /* --- 7. Липкая шапка на десктопе ------------------------------------------------ Отдельный, ни с чем не связанный блок: если не понравится — удалить его целиком, остальное продолжит работать. Зачем: после фильтрации и после перехода по якорю («Отправить список →», /#tdpd-tender) страница оказывается в середине документа, шапка уезжает вверх и выглядит как пропавшая. Липкая шапка убирает сам класс жалобы. Почему так написано: * `body{overflow:hidden}` (custom.css:51) делает body scroll-контейнером и полностью убивает `position:sticky` — проверено. Пара `overflow-x:clip` + `overflow-y:visible` гасит горизонтальный скролл, но контейнер НЕ создаёт; это единственная пара, при которой `visible` не форсится в `auto`. * `@supports` нужен именно поэтому: без поддержки `clip` (Safari < 16) браузер оставил бы `hidden` по X и `auto` по Y — body стал бы прокручиваемым и поехала бы вся страница. С `@supports` в таких браузерах просто не меняется ничего. * Только от 992px: на мобильном шапка темы и так `position:fixed`. Проверено на боевой странице: мегаменю раскрывается и не обрезается (у шапки `overflow:visible`, z-index 900 — попапы Magnific выше), горизонтальной прокрутки не появляется. */ @media (min-width:992px){ @supports (overflow-x:clip){ body{overflow-x:clip;overflow-y:visible} header{position:sticky;top:0;z-index:900;background:#fff;box-shadow:0 1px 0 rgba(32,36,44,.08)} } } /* Якоря не должны прятаться под липкой шапкой: браузер прокручивает так, чтобы верх блока совпал с верхом окна, и блок оказывается под шапкой. */ #tdpd-tender, .tdb-band[id]{scroll-margin-top:104px} @media (max-width:991px){ #tdpd-tender, .tdb-band[id]{scroll-margin-top:60px} } /* ===== TDPD: карточки в каруселях «Рекомендуемые товары» и «Недавно просмотренные» (16.08.2026) ================================================================== Задача: те же плитки, что в листинге категории — блок «TDPD: карточки товаров в листинге категории (#res-products)» выше. Тот блок привязан к `#res-products` и на карусели не распространяется, поэтому здесь его копия с другой областью. Область — `.tdpd-carousel-box`: это общая обёртка обоих блоков. Важно, что «Рекомендуемые товары» приходят двумя разными путями (в зависимости от настройки `oct_rel_view`): либо сразу в разметке страницы (`#tdpd-related`), либо ajax-ом в `#autoreleted`. Разметка карточки в обоих случаях одна и та же, и обёртка `.tdpd-carousel-box` есть в обоих — поэтому селектор один. Работает В ПАРЕ с `product.tpl`: кнопка `.box-cart` в этой разметке лежит ВНУТРИ `.image` (в листинге категории её перенёс патч `category.tpl`), а средствами CSS вынуть её из картинки и прижать к низу карточки нельзя. Скрипт в product.tpl переносит её в конец `.caption`; правила ниже рассчитаны на то, что она уже там. */ /* Равная высота карточек в ряду. Это owl.carousel 1.x: `.owl-item` он раскладывает флоатами и проставляет им инлайновую ширину, а `.owl-wrapper` получает инлайновый `display:block` — поэтому здесь единственный `!important` в блоке, без него флекс не включится. Замерено на боевой странице: раскладка не ломается (элементы стоят на 50/325/600/875 при ширине 275), листание работает как и раньше. ВНИМАНИЕ: `float` у `.owl-item` не трогать. Пробовал `float:none` — карусель схлопывается, все слайды встают друг на друга в одной точке. */ .tdpd-carousel-box .owl-wrapper{display:flex!important;align-items:stretch} .tdpd-carousel-box .owl-item{display:flex} .tdpd-carousel-box .owl-item > .item{display:flex;width:100%} .tdpd-carousel-box .owl-item .product-layout{display:flex;width:100%;float:none} /* карточка-плитка — значения один в один из блока листинга категории */ .tdpd-carousel-box .product-thumb{width:100%;height:100%;display:flex;flex-direction:column;margin:0;padding:12px;background:#fff;border:1px solid #e8eaed;border-radius:14px;transition:box-shadow .2s ease,border-color .2s ease} .tdpd-carousel-box .product-thumb:hover{position:static!important;transform:none!important;right:auto!important;left:auto!important;border-color:#c9d2f7;box-shadow:0 8px 24px rgba(20,25,60,.10)} .tdpd-carousel-box .product-thumb .product-item{display:flex;flex-direction:column;flex:1 1 auto;height:auto} .tdpd-carousel-box .product-thumb .image{background:#f7f8fa;border-radius:10px;overflow:hidden} /* лишнее убираем ровно так же, как в листинге: пустые звёзды, hover-иконки, строку производителя и обрезанное описание */ .tdpd-carousel-box .product-thumb .caption .rating{display:none!important} .tdpd-carousel-box .product-thumb .button-group{display:none!important} .tdpd-carousel-box .product-thumb .caption .manufacture-product{display:none} .tdpd-carousel-box .product-thumb .caption .product-description{display:none!important} /* подпись: название(1) → цена(2) → кнопка (прижата к низу). Тема ставит `.price{order:1}` — из-за этого цена и стояла над названием. */ .tdpd-carousel-box .product-thumb .caption{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;padding:12px 4px 2px;text-align:left} .tdpd-carousel-box .product-thumb .caption h4{order:1;clear:both;margin:0 0 8px;padding:0;min-height:36px} .tdpd-carousel-box .product-thumb .caption h4 a{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:14px;line-height:18px;font-weight:500;color:#20242c;letter-spacing:0;text-transform:none} .tdpd-carousel-box .product-thumb .caption h4 a:hover{color:#3f3ffa;text-decoration:none} .tdpd-carousel-box .product-thumb .caption .price{order:2;margin:0 0 12px;font-size:18px;line-height:22px;font-weight:700;color:#20242c} .tdpd-carousel-box .product-thumb .caption .price .price-new{font-size:18px;font-weight:700;color:#e5372b} .tdpd-carousel-box .product-thumb .caption .price .price-old{margin-left:6px;font-size:13px;font-weight:400;color:#9aa0a6;text-decoration:line-through} /* постоянная кнопка «В корзину» на всю ширину — после переноса скриптом. Пока перенос не случился (или скрипт не отработал), кнопка остаётся в `.image` и ведёт себя как раньше: ничего не ломается. */ .tdpd-carousel-box .product-thumb .caption .box-cart{order:5;position:static!important;opacity:1!important;bottom:auto;margin:auto 0 0;padding:0;text-align:center} .tdpd-carousel-box .product-thumb .caption .box-cart .button-cart{display:block;width:100%;height:auto;padding:11px 12px;line-height:1.2;font-size:14px;font-weight:600;color:#fff;background:#3f3ffa;border:0;border-radius:9px;box-shadow:none;text-transform:none} .tdpd-carousel-box .product-thumb .caption .box-cart .button-cart:hover{background:#2f2fe0;color:#fff} .tdpd-carousel-box .product-thumb .caption .box-cart .button-cart span{display:inline} /* ===== TDPD: правки по замечаниям 17.08.2026 ===================================== Четыре куска: фильтр (ширины подписей и «снять значение»), мобильная шторка фильтра (кнопка «Показать товары» переставала быть липкой), ссылка на товары со скидкой в шапке. Липкая панель покупки правится в main.js, ширина блока рекомендаций — в шаблоне модуля. */ /* --- 1. Фильтр: ширина подписей ------------------------------------------------- `stylesheet.min.css` держит `.filtered label{width:190px}` (и 180px/150px в responsive.css). Из-за фиксированной ширины чипс «выбранного значения» растягивался на всю карточку — на скриншоте это «00» во всю ширину, — а в списке значений подпись не доходила до правого края строки. Замерено на бою до/после: чипс 225 → 158 (по содержимому), подпись значения 190 → 225 (вся строка, счётчик стоит абсолютом справа и не задевается). */ #tdpd-ismobile .item-content label{width:auto} #tdpd-ismobile #tdpd-selected-values .checkbox label, #tdpd-ismobile #tdpd-selected-values .checkbox label.tdpd-selected-values-label{width:auto;flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* Подпись группы («Ростовая группа» над чипсами) приходит подчёркнутой от темы. */ #tdpd-ismobile #tdpd-selected-values .tdpd-selected-group-label{text-decoration:none} /* --- 2. Фильтр: кнопка «снять значение» ----------------------------------------- У выбранной строки модуль ПОДМЕНЯЕТ счётчик товаров на красную плашку с × (`.label-danger` + `.fa-times`). Из-за красного фона выбранная строка читалась как ошибка, а плашка была шире счётчика — строки «прыгали». Делаем × того же размера, что счётчик, и спокойного цвета; красным он становится только под курсором, когда это действительно кнопка удаления. */ #tdpd-ismobile .inner-box .item-content .tdpd-filter-total-label.label-danger{width:24px;min-width:24px;height:20px;padding:0;background:#f2f4f8;color:#98a2b3} #tdpd-ismobile .inner-box .item-content .tdpd-filter-total-label.label-danger:hover{background:#fdeaea;color:#d64545} #tdpd-ismobile .inner-box .tdpd-filter-icon-unselect{font-size:10px;line-height:20px} /* --- 3. Мобильная шторка: кнопка «Показать товары» ------------------------------- Было `position:fixed` внутри `#filter-mobile`. У шторки есть `transform` (ей она открывается), а трансформированный предок становится содержащим блоком для fixed-потомков — и такой «fixed» прокручивается вместе с содержимым. Замерено на бою: при прокрутке списка на 600px кнопка уезжала с нижней кромки экрана (bottom 812) на bottom 212 — ровно то, что на скриншоте. `position:sticky` тоже не помог (проверено: элемент не прилипал). Рабочая схема — та же, что в попапе корзины: шторка сама не прокручивается, она флекс-колонка; прокручивается только карточка фильтра, а кнопка стоит отдельным элементом внизу. После правки замерено: кнопка держит 745..812 при любой прокрутке списка. */ #filter-mobile{display:flex;flex-direction:column;overflow:hidden} #filter-mobile #tdpd-ismobile{order:1;flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:0} #tdpd-filter-apply{order:2;position:static;flex:0 0 auto;left:auto;right:auto;bottom:auto} /* Заодно шапка фильтра с крестиком больше не уезжает вверх при прокрутке списка. */ #filter-mobile #tdpd-ismobile .box-heading{position:sticky;top:0;z-index:3;background:#fff} /* --- 4. Ссылка «Скидки» в шапке --------------------------------------------------- Стоит между строкой поиска и телефоном. Тексты, адрес и показ настраиваются в Дизайн → Темы → tech-store → вкладка «Шапка», блок «Кнопка "Скидки"». Про геометрию: `.col-cart` (телефон + корзина) позиционирован абсолютом с `right:80px`, поэтому свободное окно между поиском и телефоном ПОСТОЯННОЕ — 204px и на 1280, и на 1920. Отсюда потолок ширины: замерено 163px с бейджем и 112px без него, зазор до телефона 25 и 76px соответственно. Ниже 1200px шапка у темы своя (мобильная), туда ссылку не выводим. */ .tdpd-sale-link{display:none} /* ПРАВКА 17.08 (вечер): порог 1200 → 1201 и запрет сжимать соседей. На ровно 1200px у темы включается компактная шапка: `.ts-search-box` там не 1087px, а 351 — поиск сам по себе ужат до 152px. Моя кнопка вставала в ту же флекс-строку и доедала остаток: замерено 1200px → поиск 68px, кнопка каталога 123px вместо 154/184. На 1201px шапка уже широкая и всё встаёт штатно (поиск 330, кнопка 673..836, зазоры 16 и 25). `flex-shrink:0` у поиска и кнопки каталога — страховка: даже если тема изменит ширины, моя кнопка будет сжиматься сама, а не давить соседей. */ @media (min-width:1201px){ .ts-search-box .main-menu__button, .ts-search-box #search{flex-shrink:0} /* ПРАВКА 3 — вот почему кнопка «не влезала» даже с зазором. Синяя кнопка поиска ВЫЛЕЗАЕТ за свой контейнер на 40px. Причина — bootstrap-приём `.input-group-btn{width:1%}` (расчёт на table-cell), а `#search` у темы `display:flex`: обёртка кнопки схлопывается до 3px, а сама кнопка 45px рисуется поверх соседей. Замер: бокс `#search` 360..690, а кнопка 685..730 — она и накрывала иконку «Скидок» (кнопка начиналась на 706, перекрытие 24px). Возвращаем обёртке нормальную ширину — кнопка встаёт внутрь бокса. После правки: поле 360..645, кнопка 644..689, зазор до «Скидок» 17px, до телефона 25px. */ #search .input-group-btn:not(.dropdown){flex:0 0 45px;width:45px} .tdpd-sale-link{display:inline-flex;align-items:center;align-self:flex-start;flex:0 1 auto;min-width:0;gap:7px;height:45px;max-width:186px;margin-left:16px;padding:0 12px 0 6px;background:#fff1ec;border:1px solid #ffd9cb;border-radius:999px;text-decoration:none;white-space:nowrap;transition:background-color .18s,border-color .18s,box-shadow .18s} .tdpd-sale-link:hover{background:#ffe7de;border-color:#ffc3ad;box-shadow:0 4px 14px rgba(255,90,46,.18);text-decoration:none} .tdpd-sale-link .tdpd-sale-ico{flex:0 0 31px;display:inline-flex;align-items:center;justify-content:center;width:31px;height:31px;border-radius:50%;background:#ff5a2e;color:#fff} .tdpd-sale-link .tdpd-sale-ico svg{width:17px;height:17px} .tdpd-sale-link .tdpd-sale-text{display:inline-flex;align-items:center;gap:7px;min-width:0} .tdpd-sale-link .tdpd-sale-title{overflow:hidden;text-overflow:ellipsis;font-size:14px;font-weight:600;line-height:1.2;color:#20242c} .tdpd-sale-link .tdpd-sale-badge{flex:0 0 auto;padding:2px 7px;background:#ff5a2e;border-radius:999px;font-size:11px;font-weight:600;line-height:14px;color:#fff} } /* ===== TDPD: правки вечера 17.08.2026 ============================================ Отступы между карточками в витрине рекомендаций и отключение штатного блока «Рекомендуемые товары». */ /* --- Зазоры в карусели рекомендаций --------------------------------------------- Карточки стояли вплотную: в моей разметке `.product-thumb` занимал слайд целиком (замер: слайд 147..430 и карточка 147..430, зазор 0). У штатного блока «Недавно просмотренные» те же слайды, но карточка внутри уже с полями (162..415, зазор 30) — их даёт bootstrap-колонка, которой в моей разметке нет. Добираем ровно теми же 15px, чтобы блоки выглядели одинаково. После правки замерено: оба блока — первая карточка на 162, зазор 30, ширина карточки 253. */ .tdpd-reco-row .owl-item{padding:0 15px} /* --- Штатный блок «Рекомендуемые товары» ----------------------------------------- Выключение в админке его не убирает: тема тянет его сама — либо серверной разметкой `.tdpd-related-row`, либо ajax-ом в `#autoreleted` (запрос `product/product/getAutoRels` стоит прямо в product.tpl, вне настроек модуля). Прячем оба пути: витрину рекомендаций он дублирует. Это косметическое отключение — запрос всё ещё уходит. Чтобы убрать и его, нужна правка `product.tpl`, а живой версии этого файла у меня нет (скачать по HTTP нельзя). Пришлёте файл — вырежу и запрос. */ #autoreleted, .tdpd-carousel-row.tdpd-related-row{display:none!important} /* ===== TDPD: липкая панель покупки переехала вниз (17.08.2026, вечер) ============ Две попытки поставить её под шапку не прижились: панель прыгала (при загрузке шапка стоит на 35..124, а прилипнув — на 0..89, разница 35px «на глаз») и всё равно налезала на шапку в момент, когда та уезжает. Решение проще: на десктопе панель теперь внизу экрана — так же, как на мобильном. С шапкой она больше не пересекается вообще, положение постоянное, прыгать нечему. Круглая кнопка-трубка в правом нижнем углу поднимается, пока панель видна (замер: панель 663..720, трубка 575..650 — не задевают). */ #tdpd-sticky-buy{top:auto;bottom:0;border-top:1px solid #eceef1;border-bottom:0;box-shadow:0 -4px 16px rgba(20,25,60,.10);transform:translateY(100%)} #tdpd-sticky-buy.visible{transform:translateY(0)} body.tdpd-buybar-on #uptocall-mini, body.tdpd-buybar-on a.field-tip.current-link{bottom:80px;transition:bottom .2s ease} /* ===================================================================== */ /* TDPD: редизайн 2026-09, этап 01 - согласие на обработку данных. */ /* Штатная разметка попапов: сначала текст, потом чекбокс с инлайновым */ /* width:auto;height:auto - цель около 13 px, пальцем не попасть, а без */ /* галочки форма не уходит. Инлайновый стиль перебиваем !important, */ /* строку раскладываем флексом и ставим чекбокс первым (order:-1). */ /* Класс вешает скрипт в footer.tpl - он же делает кликабельной всю */ /* строку, включая попапы, приехавшие аяксом. */ /* ===================================================================== */ input[type="checkbox"][name="terms"]{ -webkit-appearance:checkbox; -moz-appearance:checkbox; appearance:checkbox; width:24px !important; height:24px !important; min-width:24px; min-height:24px; flex:0 0 24px; margin:0 !important; padding:0; cursor:pointer; accent-color:#2F55D4; } .tdpd-terms-row{ display:flex; align-items:flex-start; gap:10px; text-align:left; line-height:1.45; padding:6px 0; cursor:pointer; -webkit-tap-highlight-color:rgba(47,85,212,.12); } .tdpd-terms-row input[type="checkbox"][name="terms"]{order:-1; margin-top:1px !important} .tdpd-terms-row a{text-decoration:underline} /* ===================================================================== */ /* TDPD: редизайн 2026-09, этап 02 — свотчи цвета краски и декора ЛДСП. */ /* Размер и радиус взяты из макета карточки: 40x40, скруглeние 10. */ /* Правило темы задаёт этим картинкам 22 px; перебиваем адресно, по классу */ /* optid-, чтобы не задеть прочие опции с картинками. */ /* ===================================================================== */ #product .options-box .optid-65, #product .options-box .optid-66, .optid-65, .optid-66{ margin:0 8px 8px 0; } #product .options-box .optid-65 .img-thumbnail, #product .options-box .optid-66 .img-thumbnail, .optid-65 .img-thumbnail, .optid-66 .img-thumbnail{ width:40px !important; height:40px !important; padding:0; border-radius:10px; background:transparent; border:1px solid #DDE1E8; box-shadow:none; transition:border-color .15s ease, box-shadow .15s ease; } #product .options-box .optid-65:hover .img-thumbnail, #product .options-box .optid-66:hover .img-thumbnail, .optid-65:hover .img-thumbnail, .optid-66:hover .img-thumbnail{ border-color:#B8BEC9; } #product .options-box .optid-65.selected-img .img-thumbnail, #product .options-box .optid-66.selected-img .img-thumbnail, .optid-65.selected-img .img-thumbnail, .optid-66.selected-img .img-thumbnail{ border:2px solid #2F55D4; box-shadow:0 0 0 2px rgba(47,85,212,.15); } /* TDPD: редизайн 2026-09 — ссылка на политику в мелком тексте под кнопкой. У .tdb-t-fine такое правило уже есть, у хиро-формы (.tdpd-fine) не было: ссылка там ничем не отличалась от обычного текста и не читалась как ссылка. */ .tdpd-fine a{color:#7a756c; text-decoration:underline} .tdpd-fine a:hover{color:#2F55D4} /* TDPD: редизайн 2026-09 — уведомление о согласии под кнопкой в попапах. Обязательную галочку решили не включать: она отсекает отправки, а формы и без того конвертят слабо. Согласие оформляется действием, поэтому под кнопкой стоит пояснение со ссылкой на политику. Размеры и цвет — как у .tdpd-fine на главной и .tdb-t-fine в тендерных блоках. */ .tdpd-form-fine{ font-size:11px; line-height:1.45; color:#9a948a; text-align:center; margin:10px 0 0; padding:0 4px; } .tdpd-form-fine a{color:#7a756c; text-decoration:underline} .tdpd-form-fine a:hover{color:#2F55D4} /* ===================================================================== */ /* TDPD: редизайн 2026-09, этап 03 — ростовая группа карточками. */ /* Раскладку собирает скрипт в footer.tpl из штатных радиокнопок. */ /* ===================================================================== */ .options-box.tdpd-rg-box{display:flex; flex-wrap:wrap; gap:10px} .options-box.tdpd-rg-box .radio{margin:0; padding:0} .options-box.tdpd-rg-box .radio input[type="radio"]{position:absolute; opacity:0; pointer-events:none} label.tdpd-rg-card{ display:flex; flex-direction:column; gap:2px; min-width:186px; padding:12px 14px; margin:0; cursor:pointer; border:1px solid #E8E3D8; border-radius:12px; background:#fff; font-weight:400; line-height:1.35; transition:border-color .15s ease, box-shadow .15s ease; } label.tdpd-rg-card:hover{border-color:#B8BEC9} label.tdpd-rg-card.tdpd-rg-on{ border:2px solid #2F55D4; padding:11px 13px; box-shadow:0 0 0 2px rgba(47,85,212,.13); } .tdpd-rg-num{font-size:15px; font-weight:600; color:#1A1D24} .tdpd-rg-sub{font-size:12.5px; color:#7A756C} .tdpd-rg-seat{font-size:12.5px; color:#7A756C} .tdpd-rg-price{font-size:15px; font-weight:600; color:#1A1D24; margin-top:4px} @media (max-width:600px){ .options-box.tdpd-rg-box{gap:8px} label.tdpd-rg-card{min-width:calc(50% - 4px); flex:1 1 calc(50% - 4px); padding:10px 12px} label.tdpd-rg-card.tdpd-rg-on{padding:9px 11px} } /* ===================================================================== */ /* TDPD: редизайн 2026-09, этап 03 — оптовая шкала и заметки в карточке. */ /* ===================================================================== */ #tdpd-card-extra{margin:14px 0 16px} .tdpd-scale{border:1px solid #E8E3D8; border-radius:12px; padding:12px 14px; background:#FAF8F4} .tdpd-scale-h{font-size:12px; letter-spacing:.02em; color:#7A756C; margin-bottom:8px} .tdpd-scale-row{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:5px 0; border-bottom:1px solid rgba(232,227,216,.8); } .tdpd-scale-row:last-child{border-bottom:0} .tdpd-scale-row span{font-size:13px; color:#7A756C} .tdpd-scale-row b{font-size:15px; font-weight:600; color:#1A1D24; white-space:nowrap} .tdpd-note{ display:flex; align-items:flex-start; gap:8px; margin-top:10px; font-size:12.5px; line-height:1.45; color:#7A756C; } .tdpd-note svg{flex:0 0 15px; margin-top:2px; color:#B8BEC9} .tdpd-note-ship svg{color:#1E8E5A} /* TDPD: редизайн 2026-09 — число позиций в чипе раздела. Считается заранее (tdpd_cat_counts.php), в базу за ним никто не ходит. */ .tdpd-subchip-n{ display:inline-block; margin-left:6px; padding:0 5px; min-width:18px; border-radius:9px; background:rgba(47,85,212,.09); color:#2F55D4; font-size:11px; line-height:17px; font-weight:600; vertical-align:1px; } .tdpd-subchip:hover .tdpd-subchip-n{background:rgba(47,85,212,.16)} /* TDPD: редизайн 2026-09 — число позиций у групп в меню каталога. Тот же предрасчитанный массив, что и у чипов разделов. */ .tdpd-mm-n{ display:inline-block; margin-left:6px; padding:0 5px; min-width:17px; border-radius:9px; background:rgba(47,85,212,.09); color:#2F55D4; font-size:10.5px; line-height:16px; font-weight:600; vertical-align:1px; } a:hover > .tdpd-mm-n{background:rgba(47,85,212,.16)} /* ====================================================================== TDPD ЭТАП 08: мобильные экраны 39% визитов приходят с телефона, конверсия канала за три года не сдвинулась: 0,126% -> 0,124%. Разметку не переписываем — добавляем нижнюю панель действий, укорачиваем первый экран главной и вешаем липкую кнопку покупки на карточку. Граница мобильного — 992px: ровно так считает скрипт фильтра темы, и десктопные правила темы написаны от 993px. ====================================================================== */ /* --- 08.1 Нижняя панель действий ------------------------------------- В правом нижнем углу стояли две плавающие кнопки одна над другой: виджет звонка (#uptocall-mini, z-index 999) и чат Битрикса. Они закрывали цену на карточке и названия категорий в плитке. Панель даёт те же действия явно и в один ряд; чат поднимается над ней, виджет звонка на телефоне не нужен — его работу делает пункт «Позвонить». */ #tdpd-tabbar{display:none} #tdpd-buybar{display:none} @media (max-width:992px){ /* Панель была прибита к нижнему краю сплошной белой полосой и делила экран пополам с контентом. Теперь это плавающий островок со стеклом: фон страницы просвечивает и панель не читается как второй низ экрана. */ #tdpd-tabbar{ display:flex;align-items:stretch;position:fixed;z-index:1001; left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom)); padding:4px;border-radius:24px; background:rgba(255,255,255,.62); -webkit-backdrop-filter:blur(18px) saturate(180%); backdrop-filter:blur(18px) saturate(180%); border:1px solid rgba(255,255,255,.6); box-shadow:0 1px 0 rgba(255,255,255,.75) inset, 0 10px 30px rgba(32,36,44,.16), 0 2px 8px rgba(32,36,44,.08); } /* Размытие поддерживают не все: без него полупрозрачный фон превращается в мутное пятно поверх текста — там островок просто белый. */ @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ #tdpd-tabbar{background:rgba(255,255,255,.97)} } body.tdpd-drawer-open #tdpd-tabbar, body.tdpd-buybar-on #tdpd-tabbar{display:none} #tdpd-tabbar .tdpd-tab{ flex:1 1 0;min-width:0;position:relative; display:flex;flex-direction:column;align-items:center;justify-content:center; padding:7px 2px 6px;border-radius:20px;text-decoration:none;color:#4a4640; font-size:10.5px;line-height:1.15;text-align:center; -webkit-tap-highlight-color:rgba(47,85,212,.12); } #tdpd-tabbar .tdpd-tab:hover,#tdpd-tabbar .tdpd-tab:focus{color:#2F55D4;text-decoration:none} #tdpd-tabbar .tdpd-tab:active{background:rgba(47,85,212,.10)} #tdpd-tabbar .tdpd-tab svg{ width:22px;height:22px;margin-bottom:3px; stroke:#2F55D4;fill:none;stroke-width:1.7; stroke-linecap:round;stroke-linejoin:round; } #tdpd-tabbar .tdpd-tab-n{ position:absolute;top:2px;left:50%;margin-left:5px; min-width:16px;height:16px;padding:0 4px;border-radius:8px; background:#2F55D4;color:#fff; font-size:10px;line-height:16px;font-weight:600;text-align:center; } #tdpd-tabbar .tdpd-tab-n[hidden]{display:none} /* Высота островка плюс его отступ от края. */ body{padding-bottom:calc(84px + env(safe-area-inset-bottom))} /* плавающие кнопки убираются с текущих позиций */ #uptocall-mini{display:none!important} .b24-widget-button-wrapper.b24-widget-button-position-bottom-right{ bottom:96px!important;right:14px!important; } /* в открытой шторке меню чат ложился на кнопку «Заказать звонок» */ body.tdpd-drawer-open .b24-widget-button-wrapper.b24-widget-button-position-bottom-right{ display:none!important; } /* приветствие чата само раскрывалось поверх цены товара */ .b24-widget-button-popup{display:none!important} } /* --- 08.2 Первый экран главной --------------------------------------- Хиро занимал 894px — почти полтора экрана телефона, и плитка разделов начиналась за его нижней кромкой. Форма расчёта уезжает скриптом под плитку, а её место занимают поиск и две кнопки. Заодно мобильная раскладка хиро (она была написана до 900px) растянута до 992px: в промежутке 901–992 шапка темы уже фиксированная, а отступа под неё у хиро не было. */ #tdpd-mob-hero{display:none} #tdpd-mob-form{display:none} @media (max-width:992px){ .tdpd-hero{padding:22px 18px;margin-top:62px} /* Фон хиро на телефоне задаётся НИЖЕ по файлу, сразу после общего правила .tdpd-hero::after — здесь оно не работало: общее правило идёт позже с той же специфичностью и перебивало этот блок. */ .tdpd-hero-grid{grid-template-columns:1fr;gap:18px} .tdpd-h{font-size:24px;line-height:1.22} .tdpd-sub{max-width:none;font-size:15px;line-height:1.55;margin-top:12px} .tdpd-badge{margin-bottom:14px} .tdpd-chips{gap:8px;margin-top:16px} .tdpd-chip{font-size:12px;padding:6px 11px} #tdpd-mob-hero{display:block;margin-top:18px} .tdpd-ms{ display:flex;height:46px;overflow:hidden; background:#fff;border:1px solid #e6dcc4;border-radius:10px; } .tdpd-ms input{ flex:1;min-width:0;height:100%;border:0;background:transparent; padding:0 14px;font-size:15px;font-family:inherit;color:#20242c; -webkit-appearance:none;appearance:none; } .tdpd-ms input:focus{outline:none} .tdpd-ms input::placeholder{color:#a8a29a} .tdpd-ms button{ width:48px;flex:0 0 48px;border:0;background:#2F55D4;color:#fff; display:flex;align-items:center;justify-content:center; } .tdpd-ms svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round} .tdpd-ma{display:flex;gap:10px;margin-top:12px} .tdpd-ma a{ flex:1 1 0;min-width:0;height:46px;padding:0 6px; display:flex;align-items:center;justify-content:center;text-align:center; border-radius:10px;font-size:14.5px;font-weight:500;text-decoration:none; } .tdpd-ma-1,.tdpd-ma-1:hover,.tdpd-ma-1:focus{background:#2F55D4;color:#fff;text-decoration:none} .tdpd-ma-2,.tdpd-ma-2:hover,.tdpd-ma-2:focus{ background:rgba(255,255,255,.9);border:1px solid #e6dcc4;color:#20242c;text-decoration:none; } #tdpd-mob-form{display:block;margin:4px 0 26px} #tdpd-mob-form .tdpd-card{border:1px solid #EDE6D6;box-shadow:0 6px 22px rgba(60,45,15,.09)} } /* --- 08.3 Липкая кнопка покупки на карточке --------------------------- Кнопка «В корзину» на телефоне уезжает под опции и ростовую шкалу. Панель повторяет её и появляется только тогда, когда настоящая кнопка ушла с экрана: два одинаковых действия рядом не показываем. Количество пишется в штатный input и дёргает его onchange, поэтому пересчёт цены темой идёт как обычно. */ @media (max-width:992px){ body.tdpd-buybar-on #tdpd-buybar{ display:flex;position:fixed;left:0;right:0;bottom:0;z-index:1002; align-items:center;gap:9px;padding:9px 12px; background:#fff;border-top:1px solid #E8E3D8; box-shadow:0 -2px 14px rgba(40,32,12,.12); padding-bottom:calc(9px + env(safe-area-inset-bottom)); } #tdpd-buybar .tdpd-bb-price{ flex:0 0 auto;max-width:38%; font-size:15px;font-weight:600;color:#20242c;line-height:1.15; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } #tdpd-buybar .tdpd-bb-qty{ flex:0 0 auto;display:flex;align-items:center; border:1px solid #DCD7CC;border-radius:9px;height:42px;overflow:hidden; } #tdpd-buybar .tdpd-bb-qty button{ width:32px;height:100%;border:0;background:transparent; color:#4a4640;font-size:19px;line-height:1;padding:0; } #tdpd-buybar .tdpd-bb-qty button:active{background:rgba(47,85,212,.08)} #tdpd-buybar .tdpd-bb-qty span{ min-width:26px;text-align:center;font-size:14px;font-weight:600;color:#20242c; } #tdpd-buybar .tdpd-bb-go{ flex:1 1 auto;min-width:0;height:42px;padding:0 10px; border:0;border-radius:9px;background:#2F55D4;color:#fff; font-size:14.5px;font-weight:500;font-family:inherit; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } #tdpd-buybar .tdpd-bb-go:active{background:#20399a} } /* ====================================================================== TDPD: каталог по макету — ширина страницы и карточка листинга ====================================================================== */ /* Ширина. Тема держит контейнер на 1200px (stylesheet_tdpd.css: .container width:120rem от 1200px), в макете артборд 1440 с полями по 60 — то есть 1320 содержимого. Разжимаем в две ступени и только на широких экранах, чтобы не трогать ноутбучные 1366 и ниже, где 1200 стоит по делу. */ /* ОТМЕНЕНО 05.09.2026 по замечанию клиента: на экране 1520 контейнер 1440 оставлял по 33px полей и читался как «во всю ширину». Возвращаемся к штатной сетке темы (1200px, как колонка bootstrap) — четыре карточки в ряд при этом сохраняются, они просто уже. @media (min-width:1360px){ .container{width:1330px} } @media (min-width:1520px){ .container{width:1440px} } */ /* Карточка листинга: плашка наличия, артикул, цена от партии. Порядок в .caption задан флексом темы (у .tdpd-rost стоит order:0), поэтому новым строкам порядок тоже назначаем явно. */ :is(#res-products,.tdb-sale-row) .caption .tdpd-stock, .product-thumb .caption .tdpd-stock{ order:0; align-self:flex-start; display:inline-block; margin:0 0 6px; padding:2px 8px; border-radius:5px; background:#eaeefb; color:#2F55D4; font-family:"Rubik","Segoe UI",Arial,sans-serif; font-size:11px; font-weight:500; line-height:17px; white-space:nowrap; } :is(#res-products,.tdb-sale-row) .caption .tdpd-art, .product-thumb .caption .tdpd-art{ order:0; align-self:flex-start; display:block; margin:0 0 4px; color:#9a948a; font-size:11px; line-height:15px; letter-spacing:.01em; } :is(#res-products,.tdb-sale-row) .caption .tdpd-bulk, .product-thumb .caption .tdpd-bulk{ order:0; align-self:flex-start; margin:-4px 0 8px; color:#12703c; font-size:12px; line-height:16px; } /* ====================================================================== TDPD: страница сметы (этап 09) Корзину на этом сайте открывают 35 раз за полгода при 136 отправках форм — люди не «покупают», а собирают список на согласование. Страница свёрстана как документ: артикулы, количества, суммы и действия «сохранить ссылку / КП / спецификация», а не как чек магазина. ====================================================================== */ .tdpd-smeta{padding:0 0 40px} .tdpd-smeta *{box-sizing:border-box} .tdpd-sm-head{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap;margin:0 0 22px} .tdpd-smeta h1{margin:0 0 8px;font-size:28px;font-weight:600;color:#20242c} .tdpd-sm-meta{margin:0;max-width:620px;color:#7a756c;font-size:13.5px;line-height:1.55} .tdpd-sm-sum{flex:0 0 auto;text-align:right;background:#F3EEE3;border-radius:12px;padding:12px 18px;min-width:210px} .tdpd-sm-sum span{display:block;color:#7a756c;font-size:12px} .tdpd-sm-sum b{display:block;font-size:24px;font-weight:600;color:#20242c;line-height:1.25} .tdpd-sm-sum em{display:block;font-style:normal;color:#7a756c;font-size:12px} .tdpd-sm-table{border:1px solid #E8E3D8;border-radius:12px;overflow:hidden;background:#fff} .tdpd-sm-tr{display:grid;grid-template-columns:1fr 120px 132px 130px 44px;align-items:center; gap:12px;padding:14px 16px;border-bottom:1px solid #EFEAE0} .tdpd-sm-tr:last-child{border-bottom:0} .tdpd-sm-th{background:#FAF6EC;color:#7a756c;font-size:12px;letter-spacing:.02em;padding:10px 16px} .tdpd-sm-th .tdpd-sm-c-price,.tdpd-sm-th .tdpd-sm-c-sum{text-align:right} .tdpd-sm-th .tdpd-sm-c-qty{text-align:center} .tdpd-sm-c-name{display:flex;gap:14px;align-items:flex-start;min-width:0} .tdpd-sm-img{width:64px;height:64px;object-fit:contain;flex:0 0 64px;border-radius:8px;background:#FAF6EC} .tdpd-sm-nm{min-width:0} .tdpd-sm-art{display:block;color:#9a948a;font-size:11.5px;margin-bottom:3px} .tdpd-sm-nm a{color:#20242c;font-size:14.5px;line-height:1.35;text-decoration:none} .tdpd-sm-nm a:hover{color:#2F55D4} .tdpd-sm-free{display:block;color:#20242c;font-size:14.5px;line-height:1.35} .tdpd-sm-opt{display:block;margin-top:5px} .tdpd-sm-opt em{display:block;font-style:normal;color:#7a756c;font-size:12px;line-height:1.45} .tdpd-sm-opt em b{color:#4a4640;font-weight:500} .tdpd-sm-c-price{text-align:right;color:#4a4640;font-size:14px;white-space:nowrap} .tdpd-sm-c-sum{text-align:right;font-size:15px;white-space:nowrap} .tdpd-sm-c-sum b{font-weight:600;color:#20242c} .tdpd-sm-lbl{display:none} .tdpd-sm-c-qty{display:flex;justify-content:center} .tdpd-sm-qty-ro{color:#4a4640;font-size:14px;white-space:nowrap} .tdpd-sm-step{display:flex;align-items:center;height:38px;border:1px solid #DCD7CC;border-radius:9px;overflow:hidden} .tdpd-sm-step button{width:32px;height:100%;border:0;background:transparent;color:#4a4640;font-size:17px;line-height:1;padding:0;cursor:pointer} .tdpd-sm-step button:hover{background:rgba(47,85,212,.07);color:#2F55D4} .tdpd-sm-step input{width:44px;height:100%;border:0;text-align:center;font:600 14px/1 inherit;color:#20242c;background:transparent} .tdpd-sm-step input:focus{outline:none} .tdpd-sm-c-act{text-align:right} .tdpd-sm-del,.tdpd-sm-delfree{width:30px;height:30px;border:0;border-radius:8px;background:transparent; color:#a8a29a;font-size:20px;line-height:1;cursor:pointer} .tdpd-sm-del:hover,.tdpd-sm-delfree:hover{background:#fbeaea;color:#c0392b} .tdpd-sm-tr-free{background:#FAF6EC} .tdpd-sm-empty{border:1px solid #E8E3D8;border-radius:12px;padding:40px 24px;text-align:center;background:#fff} .tdpd-sm-empty b{display:block;font-size:18px;font-weight:600;color:#20242c;margin-bottom:8px} .tdpd-sm-empty span{display:block;max-width:520px;margin:0 auto 20px;color:#7a756c;font-size:14px;line-height:1.6} .tdpd-sm-add{margin:20px 0 0;border:1px dashed #DCD7CC;border-radius:12px;padding:18px 20px;background:#fff} .tdpd-sm-add-h{font-size:15px;font-weight:600;color:#20242c} .tdpd-sm-add-d{margin:4px 0 12px;color:#7a756c;font-size:13px;line-height:1.5} .tdpd-sm-add-f{display:flex;gap:10px;flex-wrap:wrap} .tdpd-sm-add-f input[type="text"]{flex:1 1 320px;min-width:0;height:44px;padding:0 14px; border:1px solid #DCD7CC;border-radius:9px;font:14px/1 inherit;color:#20242c} .tdpd-sm-add-f input[type="number"]{width:88px;height:44px;padding:0 10px; border:1px solid #DCD7CC;border-radius:9px;font:14px/1 inherit;color:#20242c} .tdpd-sm-add-f input:focus{outline:none;border-color:#2F55D4;box-shadow:0 0 0 3px rgba(47,85,212,.13)} .tdpd-sm-add-f button{height:44px;padding:0 20px;border:0;border-radius:9px;background:#20242c;color:#fff; font:500 14px/1 inherit;cursor:pointer} .tdpd-sm-add-f button:hover{background:#2F55D4} .tdpd-sm-err{margin-top:8px;color:#c0392b;font-size:13px} .tdpd-sm-actions{display:flex;gap:12px;flex-wrap:wrap;margin:24px 0 0} .tdpd-sm-btn{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 22px; border:0;border-radius:10px;background:#2F55D4;color:#fff;font:500 15px/1 inherit; text-decoration:none;cursor:pointer} .tdpd-sm-btn:hover,.tdpd-sm-btn:focus{background:#2646b0;color:#fff;text-decoration:none} .tdpd-sm-btn-2{background:#fff;border:1px solid #DCD7CC;color:#20242c} .tdpd-sm-btn-2:hover,.tdpd-sm-btn-2:focus{background:#FAF6EC;border-color:#2F55D4;color:#20242c} .tdpd-sm-save{margin:24px 0 0;border:1px solid #E8E3D8;border-radius:12px;padding:22px;background:#FAF6EC;max-width:640px} .tdpd-sm-save-h{font-size:17px;font-weight:600;color:#20242c} .tdpd-sm-save-d{margin:6px 0 16px;color:#7a756c;font-size:13px;line-height:1.55} .tdpd-sm-save input,.tdpd-sm-save textarea{width:100%;border:1px solid #DCD7CC;border-radius:9px; font:14px/1.4 inherit;color:#20242c;margin-bottom:10px;background:#fff} .tdpd-sm-save input{height:44px;padding:0 14px} .tdpd-sm-save textarea{padding:11px 14px;resize:vertical} .tdpd-sm-save input:focus,.tdpd-sm-save textarea:focus{outline:none;border-color:#2F55D4;box-shadow:0 0 0 3px rgba(47,85,212,.13)} .tdpd-sm-save button{width:100%;height:48px;border:0;border-radius:10px;background:#2F55D4;color:#fff; font:500 15px/1 inherit;cursor:pointer} .tdpd-sm-save button:hover{background:#2646b0} .tdpd-sm-fine{margin:11px 0 0;color:#9a948a;font-size:11.5px;line-height:1.45;text-align:center} .tdpd-sm-done b{display:block;font-size:17px;color:#1d8f4e;margin-bottom:4px} .tdpd-sm-done > span{display:block;color:#4a4640;font-size:14px;margin-bottom:12px} .tdpd-sm-link{display:flex;gap:8px} .tdpd-sm-link input{flex:1;margin:0} .tdpd-sm-link button{width:auto;flex:0 0 auto;padding:0 18px;height:44px} .tdpd-sm-done em{display:block;margin-top:10px;font-style:normal;color:#7a756c;font-size:12.5px;line-height:1.5} @media (max-width:992px){ .tdpd-smeta h1{font-size:23px} .tdpd-sm-sum{min-width:0;flex:1 1 100%;text-align:left} .tdpd-sm-th{display:none} .tdpd-sm-tr{grid-template-columns:1fr auto;grid-template-areas:"name name" "price qty" "sum act"; gap:10px 12px;padding:14px} .tdpd-sm-c-name{grid-area:name} .tdpd-sm-c-price{grid-area:price;text-align:left} .tdpd-sm-c-qty{grid-area:qty;justify-content:flex-end} .tdpd-sm-c-sum{grid-area:sum;text-align:left} .tdpd-sm-c-act{grid-area:act} .tdpd-sm-lbl{display:inline;color:#9a948a;font-size:12px;margin-right:6px} .tdpd-sm-actions .tdpd-sm-btn{flex:1 1 100%} } /* ---- Каталог: сортировка чипами и количество в карточке ---------------- Выпадающий список сортировки прятал самое нужное («сначала дешевле») за двумя нажатиями и подписями вида «Цена, порядок (Меньше > Больше)». Список остаётся в разметке — его слушает модуль фильтра, — но на экране вместо него понятные чипы. */ #tdpd-sortchips{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-left:auto} #tdpd-sortchips .tdpd-sortlbl{color:#7a756c;font-size:13px;margin-right:2px} #tdpd-sortchips .tdpd-sortchip{ height:34px;padding:0 14px;border:1px solid #DCD7CC;border-radius:9px;background:#fff; color:#4a4640;font:400 13px/1 "Rubik","Segoe UI",Arial,sans-serif;cursor:pointer; } #tdpd-sortchips .tdpd-sortchip:hover{border-color:#2F55D4;color:#2F55D4} #tdpd-sortchips .tdpd-sortchip-on{background:#2F55D4;border-color:#2F55D4;color:#fff;font-weight:500} body.tdpd-has-chips .input-sort-div{display:none!important} /* Степпер в карточке листинга: закупают десятками, а кнопка клала одну штуку. */ .product-layout .box-cart{display:flex;align-items:center;gap:8px} .product-layout .tdpd-qty{ flex:0 0 auto;display:flex;align-items:center;height:38px; border:1px solid #DCD7CC;border-radius:9px;overflow:hidden;background:#fff; } .product-layout .tdpd-qty button{ width:28px;height:100%;border:0;background:transparent;color:#4a4640; font-size:16px;line-height:1;padding:0;cursor:pointer; } .product-layout .tdpd-qty button:hover{background:rgba(47,85,212,.07);color:#2F55D4} .product-layout .tdpd-qty input{ width:36px;height:100%;border:0;text-align:center;background:transparent; font:600 13px/1 "Rubik","Segoe UI",Arial,sans-serif;color:#20242c;padding:0; } .product-layout .tdpd-qty input:focus{outline:none} .product-layout .box-cart .button-cart{flex:1 1 auto;min-width:0} @media (max-width:992px){ /* На телефоне чипы вставали в четыре строки и растягивали блок сортировки на пол-экрана. Одна строка с горизонтальной прокруткой: видно первые два варианта, остальные доезжают пальцем. */ #tdpd-sortchips{ clear:both;margin-left:0;width:100%;margin-top:10px; flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch; padding-bottom:4px;scrollbar-width:none; } #tdpd-sortchips::-webkit-scrollbar{display:none} #tdpd-sortchips .tdpd-sortlbl, #tdpd-sortchips .tdpd-sortchip{flex:0 0 auto;white-space:nowrap} #tdpd-sortchips .tdpd-sortchip{height:32px;padding:0 11px;font-size:12.5px} .product-layout .tdpd-qty{height:34px} .product-layout .tdpd-qty button{width:23px} .product-layout .tdpd-qty input{width:26px} .product-layout .box-cart{gap:6px} .product-layout .box-cart .button-cart{padding-left:6px;padding-right:6px;font-size:12.5px} } /* ====================================================================== TDPD: ШАПКА ПО МАКЕТУ (05.09.2026) Источник — redesign-2026-09/Main.dc.html, MenuDesktop.dc.html. Что меняется против темы: · утилитарная строка становится кремовой полосой 40px: слева регион и разделы, справа статус работы и личный кабинет. Раньше это была белая полоса из выпадающих списков с заглавными буквами (header4.css: text-transform:capitalize); · шапка выстраивается флексом. Тема держала .col-cart абсолютом (header4.css: .col-cart{position:absolute;right:1.5rem}), а .ts-search-box — с margin-left:30px;margin-top:22px, из-за чего между поиском и телефоном стояла постоянная дыра ~200px; · поиск получает рамку и подсказки «часто ищут» — он на этом сайте главный инструмент навигации; · корзина превращается в кнопку «Смета» (разметка — common/cart.tpl, подпись — наблюдатель в header.tpl). Порог 1201px взят от прежней правки шапки: ровно на 1200 у темы включается компактная раскладка, туда лезть незачем. ====================================================================== */ /* --- 1. Утилитарная строка ------------------------------------------- */ @media (min-width:992px){ #top{background:#FAF6EC;border-bottom:1px solid #E8E3D8} #top .not-mobile-container .box-inner{display:flex;align-items:center;min-height:40px} #top .box-top{display:flex;align-items:center;gap:22px;float:none!important;margin:0;padding:0} #top .box-top-left{flex:1 1 auto;min-width:0;flex-wrap:wrap} #top .box-top-right{flex:0 0 auto;margin-left:auto;gap:20px} #top .box-top > li{margin:0!important;display:flex;align-items:center} #top .box-top-left > li.apppli:first-child{margin-right:6px!important} #top .box-top a.btn-top, #top .box-top .btn-group > .btn-link{ font-family:"Rubik","Segoe UI",Arial,sans-serif; font-size:13px!important;line-height:20px!important;font-weight:400!important; text-transform:none!important;color:#7A756C!important;padding:10px 0!important; } #top .box-top a.btn-top:hover{color:#2F55D4!important;text-decoration:none} /* Регион: остаётся пин и название области (правка language.tpl). */ #top #form-language .btn-group > .btn-link{color:#20242C!important} #top #form-language .lnr-map-marker{color:#2F55D4;margin-right:4px} #top #form-language .fa-angle-down{color:#B8BEC9;margin-left:4px} /* «Тендерным отделам» — целевая страница, выделена и в макете. */ #top .box-top a.btn-top[href*="tenders"]{color:#2F55D4!important;font-weight:500!important} /* Статус работы вместо выпадающего списка часов. */ #top .tdpd-worktime{display:flex!important;align-items:center;gap:7px; font-family:"Rubik","Segoe UI",Arial,sans-serif;font-size:13px;line-height:20px; color:#7A756C;text-transform:none;padding:10px 0} #top .tdpd-worktime .tdpd-wt-dot{width:7px;height:7px;border-radius:50%;background:#1E8E5A;flex:0 0 7px} #top .tdpd-worktime.tdpd-worktime-off .tdpd-wt-dot{background:#B8BEC9} /* Личный кабинет — простая ссылка, без иконки и «галки». */ #top .box-top-right .user-dropdown > a .icons, #top .box-top-right .user-dropdown > a .icon-right{display:none} #top .box-top-right .user-dropdown > a{color:#7A756C!important;text-transform:none!important; font-size:13px!important;line-height:20px!important;font-weight:400!important;padding:10px 0!important} #top .box-top-right .user-dropdown > a:hover{color:#2F55D4!important} } /* --- 2. Шапка: раскладка ---------------------------------------------- */ @media (min-width:993px){ /* TDPD 22.09.2026: было 1201 — на 993..1200 оставалась полуразобранная шапка темы */ header .box-inner-inner{display:flex;align-items:center;gap:20px;min-height:96px;padding:12px 0} /* тема на 992..1200: .ts-search-box{width:30%} */ header .ts-search-box{width:auto!important} #logo{float:none;padding:0;flex:0 0 auto;margin:0} #logo img{max-height:64px;width:auto} /* Поиск с подсказкой под ним — сеткой, иначе подсказка встаёт под кнопку каталога, а не под поле. */ .ts-search-box{flex:1 1 auto;min-width:0;margin:0!important; display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center; column-gap:16px;row-gap:7px} .ts-search-box .main-menu__button{grid-column:1;grid-row:1} .ts-search-box #search{grid-column:2;grid-row:1} .ts-search-box .tdpd-hint{grid-column:2;grid-row:2} .col-cart{position:static!important;right:auto!important;margin:0!important; flex:0 0 auto;display:flex;align-items:center;gap:20px} /* Адрес салона в шапке дублирует регион из верхней строки — по макету в шапке его нет, контакты остаются в футере и на /contact-us/. */ .col-cart .header-phone.custom-location{display:none!important} } /* --- 3. Кнопка «Каталог товаров» --------------------------------------- */ @media (min-width:993px){ /* TDPD 22.09.2026: было 1201 — на 993..1200 оставалась полуразобранная шапка темы */ .main-menu__button{height:52px!important;border-radius:12px!important; display:flex!important;align-items:center;gap:10px;padding:0 20px!important; background:#2F55D4!important;cursor:pointer;transition:background-color .15s} .main-menu__button:hover{background:#24409E!important;filter:none} .main-menu__button svg{margin:0!important;flex:0 0 auto} .main-menu__button span{height:auto!important;float:none!important;padding:0!important; margin:0!important;font-size:15px!important;font-weight:500!important;line-height:1!important; white-space:nowrap} .main-menu__button.show{background:#20242C!important} } /* --- 4. Поиск ---------------------------------------------------------- */ @media (min-width:993px){ /* TDPD 22.09.2026: было 1201 — на 993..1200 оставалась полуразобранная шапка темы */ #search{display:flex!important;height:52px;margin:0;background:#fff; border:2px solid #2F55D4;border-radius:12px;overflow:hidden} #search > .input-group-btn.dropdown{display:none!important} #search input.input-lg{flex:1 1 auto!important;min-width:0;width:auto;height:100%; border:0!important;box-shadow:none!important;border-radius:0!important; padding:0 18px!important;background:#fff!important;background-image:none!important; filter:none!important;font-size:15px!important;color:#20242c!important} #search .input-group-btn:not(.dropdown){flex:0 0 56px!important;width:56px!important;height:100%} #search .btn-search{width:56px;height:100%;padding:0!important;border:0!important; border-radius:0!important;background:#2F55D4!important;color:#fff!important; display:flex;align-items:center;justify-content:center} #search .btn-search:hover{background:#24409E!important} /* TDPD 22.09.2026: bootstrap сдвигает кнопку margin-left:-1px — справа в рамке оставалась белая щель */ #search .input-group-btn:not(.dropdown) > .btn-search{margin:0!important;width:100%!important} #search .btn-search .lnr-magnifier{font-size:20px;color:#fff} .tdpd-hint{display:flex;align-items:center;gap:12px;min-width:0;overflow:hidden; font-family:"Rubik","Segoe UI",Arial,sans-serif;white-space:nowrap} .tdpd-hint .tdpd-hint-l{color:#8C93A0;font-size:12px;flex:0 0 auto} .tdpd-hint a{color:#2F55D4;font-size:12px;flex:0 0 auto;text-decoration:none} .tdpd-hint a:hover{color:#24409E;text-decoration:underline} } @media (max-width:1200px){ .tdpd-hint{display:none} } /* --- 5. Телефон -------------------------------------------------------- */ @media (min-width:993px){ /* TDPD 22.09.2026: было 1201 — на 993..1200 оставалась полуразобранная шапка темы */ .col-cart .header-phone{display:block;margin:0!important;text-align:right;line-height:1.2} /* Штатная «трубка» перед номером не нужна: номер и так читается как номер, а иконка съедает строку, которую макет отдал под действие. */ .col-cart .header-phone .phone-wrap:before{display:none!important} .col-cart .header-phone .phone-wrap{font-size:19px!important;font-weight:600!important; color:#20242C!important;white-space:nowrap;line-height:1.2} .col-cart .header-phone .phone-wrap .fa-caret-down{color:#B8BEC9;font-size:13px;margin-left:5px} /* «Перезвонить мне» — не подпись, а действие: оставляем кнопкой-таблеткой, режим работы при этом уехал в верхнюю строку (см. .tdpd-worktime). */ .col-cart .header-phone .field-tip.show-phones{ display:inline-flex!important;align-items:center;gap:6px;margin-top:6px; height:26px;padding:0 11px;border-radius:999px;background:#EDF1FD; color:#2F55D4!important;font-size:12px;font-weight:500;line-height:26px; text-decoration:none;cursor:pointer;transition:background-color .15s} .col-cart .header-phone .field-tip.show-phones:hover{background:#DDE6FB;text-decoration:none} .col-cart .header-phone .field-tip.show-phones .icons{font-size:13px;margin:0} } /* --- 6. Корзина = «Смета» ---------------------------------------------- */ #cart.tdpd-smeta-head{background:transparent} #cart .tdpd-smeta-a{display:flex;align-items:center;gap:10px;text-decoration:none} #cart .tdpd-smeta-ico{flex:0 0 auto;display:flex;align-items:center;justify-content:center;color:#2F55D4} #cart .tdpd-smeta-ico svg{width:22px;height:22px} #cart #cart-total{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15} #cart .tdpd-smeta-t{font-family:"Rubik","Segoe UI",Arial,sans-serif;font-size:14px;font-weight:600;color:#20242C} #cart .tdpd-smeta-n{font-family:"Rubik","Segoe UI",Arial,sans-serif;font-size:11px;color:#7A756C;white-space:nowrap} #cart .tdpd-smeta-b{display:none} #cart.tdpd-smeta-full .tdpd-smeta-n{color:#2F55D4} @media (min-width:1201px){ #cart.tdpd-smeta-head{flex:0 0 auto;width:auto!important} #cart .tdpd-smeta-a{height:52px;padding:0 18px!important;border:1px solid #DDE1E8; border-radius:12px;background:#fff!important;width:auto!important; transition:border-color .15s,background-color .15s} #cart .tdpd-smeta-a:hover{border-color:#2F55D4;background:#F7F9FE!important} #cart.tdpd-smeta-full .tdpd-smeta-a{border-color:#2F55D4;background:#EDF1FD!important} } /* Мобильная шапка-«островок»: смета остаётся иконкой со счётчиком, подпись и сумма туда не влезают — их несёт нижняя панель #tdpd-tabbar. */ @media (max-width:1200px){ #cart.tdpd-smeta-head{position:relative;width:auto!important} #cart .tdpd-smeta-a{height:auto;padding:0!important;border:0;background:transparent!important; width:auto!important;position:relative} #cart .tdpd-smeta-ico svg{width:23px;height:23px} #cart #cart-total{display:none} #cart .tdpd-smeta-b{position:absolute;top:-6px;right:-8px;display:none; min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:#E0531B; color:#fff;font:600 11px/17px "Rubik","Segoe UI",Arial,sans-serif;font-style:normal; text-align:center} #cart.tdpd-smeta-full .tdpd-smeta-b{display:block} } /* Штатная иконка корзины у .btn (::before с main_cart.svg) на кнопке сметы лишняя — свой знак документа уже стоит в разметке. */ #cart .tdpd-smeta-a:before, #cart .tdpd-smeta-a:after{content:none!important;display:none!important} /* ====================================================================== TDPD: плитка комплектов на главной (tdpd_block, раскладка kits) Макет — redesign-2026-09/Main.dc.html, полоса «Готовые комплекты». Отличие от макета одно и намеренное: нет цены «от N ₽» и кнопки «В смету» — состава и цен у комплектов ещё нет (решение клиента 05.09.2026: сначала продаём сборку, товары привязываем позже). Вместо цены — переход на посадочную комплекта. ====================================================================== */ .tdb-kits{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px} .tdb-kits.tdb-n3{grid-template-columns:repeat(3,minmax(0,1fr))} .tdb-kits.tdb-n6{grid-template-columns:repeat(3,minmax(0,1fr))} .tdb-kit{display:flex;flex-direction:column;background:#fff;border:1px solid #E8E3D8; border-radius:16px;overflow:hidden;color:#20242c;text-decoration:none; transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease} .tdb-kit:hover{transform:translateY(-3px);border-color:#c3d0f4; box-shadow:0 14px 30px rgba(60,45,15,.13);color:#20242c;text-decoration:none} .tdb-kit-ph{position:relative;display:flex;align-items:center;justify-content:center; height:170px;background:#F3EEE3;overflow:hidden} .tdb-kit:nth-child(even) .tdb-kit-ph{background:#EDF1FD} .tdb-kit-ph img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease} .tdb-kit:hover .tdb-kit-ph img{transform:scale(1.04)} .tdb-kit-badge{position:absolute;top:12px;left:12px;display:inline-flex;align-items:center; height:26px;padding:0 10px;border-radius:999px;background:#20242c;color:#fff; font-style:normal;font-size:12px;line-height:26px} .tdb-kit-b{display:flex;flex-direction:column;flex:1 1 auto;padding:18px} .tdb-kit-t{font-size:16px;font-weight:500;line-height:1.3;color:#20242c} .tdb-kit-d{margin-top:10px;font-size:13px;line-height:1.5;color:#7A756C} .tdb-kit-go{margin-top:auto;padding-top:14px;font-size:14px;font-weight:500;color:#2F55D4} .tdb-kit-go:after{content:" \2192"} @media (max-width:1199px){ .tdb-kits,.tdb-kits.tdb-n6{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px} } @media (max-width:640px){ .tdb-kits,.tdb-kits.tdb-n3,.tdb-kits.tdb-n6{grid-template-columns:1fr;gap:12px} .tdb-kit-ph{height:150px} .tdb-kit-b{padding:14px} } /* ====================================================================== TDPD: мегаменю — правый рельс и мелочи по макету (05.09.2026) Источник — redesign-2026-09/MenuDesktop.dc.html. ====================================================================== */ /* Кнопка «Каталог товаров»: у темы обе иконки (бургер и крестик) в открытом состоянии становятся position:absolute, и во флекс-строке подпись съезжала под крестик. Кладём обе иконки в одну ячейку сетки — переключение по visibility у темы продолжает работать, а место под иконку не пропадает. */ @media (min-width:993px){ /* TDPD 22.09.2026: было 1201 */ .main-menu__button{display:grid!important;grid-template-columns:17px auto; align-items:center;gap:10px;justify-content:center} .main-menu__button svg{grid-area:1/1;position:static!important;margin:0!important} .main-menu__button span{grid-area:1/2} } @media (min-width:993px){ /* TDPD 22.09.2026: меню было от 1201, на 993..1200 — компакт ниже */ .tdpd-mm-category > .dropdown-inner{display:flex;align-items:flex-start;gap:28px} .tdpd-mm-category > .dropdown-inner > .col-sm-12, .tdpd-mm-category > .dropdown-inner > .col-sm-8{flex:1 1 auto;min-width:0;width:auto;float:none} .tdpd-mm-category > .dropdown-inner > .megamenu-html-inner{flex:0 0 260px;width:auto;float:none} .tdpd-mm-rail{flex:0 0 280px;align-self:stretch;border-left:1px solid #E8E3D8; padding:4px 0 4px 24px;font-family:'Rubik','Segoe UI',Arial,sans-serif} .tdpd-mm-rail-h{font-size:11px;letter-spacing:.12em;text-transform:uppercase; font-weight:600;color:#8C93A0} .tdpd-mm-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px} .tdpd-mm-tags a{display:inline-flex;align-items:center;height:34px;padding:0 12px; border:1px solid #E8E3D8;border-radius:999px;background:#fff; font-size:13px;line-height:1;color:#2E3340;text-decoration:none;white-space:nowrap} .tdpd-mm-tags a:hover{border-color:#2F55D4;color:#2F55D4;text-decoration:none} .tdpd-mm-kit{display:block;margin-top:24px;border:1px solid #E8E3D8;border-radius:14px; overflow:hidden;color:#20242c;text-decoration:none;background:#fff} .tdpd-mm-kit:hover{border-color:#2F55D4;color:#20242c;text-decoration:none} .tdpd-mm-kit-ph{display:block;height:96px;background:#F3EEE3;overflow:hidden} .tdpd-mm-kit-ph img{width:100%;height:100%;object-fit:cover;display:block} .tdpd-mm-kit-b{display:block;padding:14px} .tdpd-mm-kit-b b{display:block;font-size:14px;font-weight:500;line-height:1.35;color:#20242c} .tdpd-mm-kit-b span{display:block;margin-top:5px;font-size:12px;line-height:1.45;color:#7A756C} .tdpd-mm-kit-b em{display:flex;align-items:center;justify-content:center;height:42px;margin-top:11px; border-radius:10px;background:#2F55D4;color:#fff;font-style:normal;font-size:14px;font-weight:500} .tdpd-mm-rail-cta{margin-top:20px;padding-top:16px;border-top:1px solid #E8E3D8} .tdpd-mm-rail-cta span{display:block;font-size:13px;line-height:1.5;color:#7A756C} .tdpd-mm-rail-cta a{display:flex;align-items:center;justify-content:center;height:44px;margin-top:10px; border:1px solid #DDE1E8;border-radius:10px;color:#20242c;font-size:14px;text-decoration:none} .tdpd-mm-rail-cta a:hover{border-color:#2F55D4;color:#2F55D4;text-decoration:none} } /* На планшете и телефоне меню — своя шторка, рельс туда не помещается. */ @media (max-width:1200px){ .tdpd-mm-rail{display:none} } /* Счётчик у корневых пунктов меню — тем же серым, что у подразделов, но чуть плотнее: строка узкая. */ .tdpd-mm-n-root{margin-left:7px;font-size:12px;font-weight:400;color:#8C93A0} /* --- Мегаменю: группа раздела одной строкой --------------------------- Правый рельс забрал 280px, и у групп иконка (42px картинка раздела) стала уводить название на вторую строку — список читался как лесенка. Кладём иконку и название в одну строку сетки, а подразделы — под названием: ровно так, как в макете MenuDesktop.dc.html. */ @media (min-width:993px){ /* TDPD 22.09.2026: меню было от 1201, на 993..1200 — компакт ниже */ .tdpd-mm-rail{flex:0 0 264px} .tdpd-mm-category .megamenu-hassubchild{ display:grid;grid-template-columns:34px minmax(0,1fr); column-gap:10px;align-items:center} .tdpd-mm-category .megamenu-parent-img{ grid-column:1;grid-row:1;display:flex!important;align-items:center;justify-content:center; width:34px;height:34px;margin:0!important;padding:0!important;float:none!important} .tdpd-mm-category .megamenu-parent-img img{max-width:100%;max-height:100%;width:auto;height:auto} .tdpd-mm-category .megamenu-parent-title{ grid-column:2;grid-row:1;margin:0!important;padding:0!important; font-size:15px;line-height:1.3} /* «Стрелка» раскрытия у групп не нужна: подразделы и так под названием. */ .tdpd-mm-category .megamenu-hassubchild > .parent-title-toggle{display:none!important} .tdpd-mm-category .megamenu-ischild{ grid-column:2;grid-row:2;margin:8px 0 0!important;padding:0!important} } /* ====================================================================== TDPD: страница категории по макету (05.09.2026) Источник — redesign-2026-09/Katalog.dc.html. ====================================================================== */ /* --- Четыре карточки в ряд --------------------------------------------- Раньше стояло три: контейнер темы держался на 1200px и четвёртая карточка выходила по 207px. С 05.09 контейнер разжат до 1330/1440 (см. блок «каталог по макету» выше), места хватает — возвращаем четыре, как в макете. Ниже 1360 остаются три, на планшете и телефоне — две. */ @media (min-width:1360px){ body[class^="product-category-"] #content.col-sm-9 :is(#res-products,.tdb-sale-row) .product-items{width:25%} } /* --- Что в карточке листинга не нужно ---------------------------------- Серия («Серия "ТД ПД"») повторяется у 95% товаров, звёзды пустые у всех — отзывов на сайте нет, а описание в две строки обрывается на середине слова. В макете этого нет: артикул, название, наличие, цена, партия, кнопка. На карточке товара серия и описание остаются. */ body[class^="product-category-"] :is(#res-products,.tdb-sale-row) .caption .manufacture-product, body[class^="product-category-"] :is(#res-products,.tdb-sale-row) .caption .rating, body[class^="product-category-"] :is(#res-products,.tdb-sale-row) .caption .product-description{display:none!important} /* --- Ростовая группа плашкой на фотографии ------------------------------ */ :is(#res-products,.tdb-sale-row) .product-item .image{position:relative} :is(#res-products,.tdb-sale-row) .product-item .image .tdpd-rost{ position:absolute;top:10px;left:10px;z-index:2; display:inline-flex;align-items:center;height:24px;padding:0 9px; border:1px solid #E8E3D8;border-radius:7px;background:#fff; font-family:"Rubik","Segoe UI",Arial,sans-serif; font-size:11px;font-weight:600;line-height:22px;color:#2F55D4; white-space:nowrap;max-width:calc(100% - 20px);overflow:hidden;text-overflow:ellipsis} /* --- Заголовок раздела и объём ------------------------------------------ */ h1.cat-header{display:flex;align-items:baseline;flex-wrap:wrap;gap:14px} h1.cat-header .tdpd-cat-n{ font-family:"Rubik","Segoe UI",Arial,sans-serif; font-size:15px;font-weight:400;line-height:1.2;color:#7A756C;letter-spacing:0} h1.cat-header .tdpd-cat-n:empty{display:none} @media (max-width:767px){ h1.cat-header{gap:8px} h1.cat-header .tdpd-cat-n{font-size:13px} :is(#res-products,.tdb-sale-row) .product-item .image .tdpd-rost{top:8px;left:8px;height:22px;font-size:10px;line-height:20px} } /* --- Порядок и вид строк в карточке листинга --------------------------- Макет: артикул → название → наличие → цена → цена от партии → кнопка. Раньше артикул и строка «от 25 шт» имели order:0 и вставали ВЫШЕ названия — цена от партии читалась раньше самой цены. */ :is(#res-products,.tdb-sale-row) .product-thumb .caption .tdpd-art{order:0} :is(#res-products,.tdb-sale-row) .product-thumb .caption h4{order:1} :is(#res-products,.tdb-sale-row) .product-thumb .caption .tdpd-stock{order:2} :is(#res-products,.tdb-sale-row) .product-thumb .caption .price{order:3;margin:0 0 2px; font-size:20px;line-height:26px;font-weight:600;color:#20242c} /* В макете новая цена — обычным тёмным, перечёркнутая старая — серым. Красная цена читается как распродажа; здесь это оптовая скидка. */ :is(#res-products,.tdb-sale-row) .product-thumb .caption .price .price-new{font-size:20px;font-weight:600;color:#20242c} :is(#res-products,.tdb-sale-row) .product-thumb .caption .price .price-old{margin-left:8px;font-size:13px;font-weight:400;color:#8C93A0} :is(#res-products,.tdb-sale-row) .product-thumb .caption .tdpd-bulk{order:4;margin:0 0 10px} :is(#res-products,.tdb-sale-row) .product-thumb .box-cart{order:5} /* Плашка скидки уехала вправо: слева теперь ростовая группа. */ :is(#res-products,.tdb-sale-row) .product-item .image .pro-label{left:auto!important;right:10px!important;z-index:2} /* Кнопка «В смету» в ряд со степпером не должна переноситься: при четырёх карточках в ряду на строку остаётся ~120px. */ :is(#res-products,.tdb-sale-row) .product-thumb .box-cart .button-cart{ font-size:13.5px;font-weight:500;padding:11px 8px;white-space:nowrap;border-radius:10px} @media (min-width:1360px){ .product-layout .tdpd-qty{height:42px} .product-layout .tdpd-qty button{width:26px} .product-layout .tdpd-qty input{width:30px} :is(#res-products,.tdb-sale-row) .product-thumb .box-cart .button-cart{height:42px;padding:0 8px;line-height:42px} } /* ====================================================================== TDPD: карточка товара по макету (05.09.2026) Источник — redesign-2026-09/Tovar.dc.html. ====================================================================== */ /* --- Ростовая группа: три карточки в ряд -------------------------------- Карточки уже были, но вставали по одной в строку: рядом с каждым