/* ========================================================================== AKVALIFE — PREMIUM UI LAYER (единый премиум-слой РІ стиле лендинга akvalife.club) Дизайн-система В«Aqua PremiumВ»: аква-акцент, чернильные тексты, платина/серебро, шрифт Manrope, стекло (glass), РјСЏРіРєРёРµ тени, скругления 20px, микроанимации. Подключается ПОСЛЕДНИМ РІ РїРѕРґ режимом ?akva=1 (СЃРј. header.php), поэтому переопределяет тему Aspro. Обычные посетители сайт РІРёРґСЏС‚ без изменений. Полный запуск РЅР° всех — $akvaShow = true; РІ header.php. ========================================================================== */ :root { /* РђРєРІР°-шкала (акцент = РІРѕРґР°) */ --aqua-50:#f2f4f3; --aqua-200:#d6dcda; --aqua-400:#657984; --aqua-500:#3f5664; --aqua-600:#263746; /* Чернила / графит */ --ink:#181a1b; --black:#111315; --graphite:#292d2f; --steel:#73716c; --titanium:#9b9891; /* Нейтрали */ --platinum:#f7f6f2; --silver-50:#faf9f6; --silver-100:#f1efe9; --silver-200:#e5e2da; --silver-300:#d7d2c8; --white:#fff; --bronze:#a88656; --bronze-dark:#85683f; --bronze-soft:#f2eadf; /* Фирменные градиенты / поверхности */ --grad-aqua:linear-gradient(92deg,#263746,#3f5664 58%,#a88656); --grad-btn:linear-gradient(135deg,#334957 0%,#22323e 100%); --grad-section:linear-gradient(180deg,#fff 0%,#f8f7f3 100%); --glow-top:radial-gradient(55% 45% at 50% 0,rgba(168,134,86,.09),rgba(0,0,0,0)); --hairline:linear-gradient(90deg,transparent,var(--silver-300),transparent); /* Тени */ --shadow-soft:0 1px 2px rgba(24,26,27,.03),0 14px 34px -18px rgba(24,26,27,.18); --shadow-lift:0 24px 56px -24px rgba(24,26,27,.28); --shadow-btn:0 10px 24px -10px rgba(38,55,70,.48); /* Форма / движение */ --r-card:20px; --r-md:12px; --r-sm:9px; --r-pill:999px; --ease:cubic-bezier(.4,0,.2,1); --ease-out:cubic-bezier(.22,.61,.36,1); } /* 18. Premium editorial header — Apple/Tesla inspired, Bitrix-safe */ .akva-menu-toggle, .akva-account-link { display:none; } @media (min-width: 99999px) { body .header_wrap { position:relative; z-index:100; background:rgba(255,255,255,.92) !important; border-bottom:1px solid rgba(20,24,29,.09); box-shadow:0 10px 35px rgba(20,24,29,.035); -webkit-backdrop-filter:saturate(160%) blur(18px); backdrop-filter:saturate(160%) blur(18px); } body .header_wrap .wrapper_inner, body .header_wrap #header > .wrapper_inner, body .header_wrap #header .catalog_menu > .wrapper_inner { width:100% !important; max-width:1480px !important; padding-left:32px !important; padding-right:32px !important; background:transparent !important; } body .header_wrap .top-h-row { height:38px !important; background:#f7f8f9 !important; border:0 !important; } body .header_wrap .top-h-row .top_inner { display:flex; align-items:center; justify-content:flex-end; height:38px; gap:24px; font-size:12px; letter-spacing:.01em; color:#68717b; } body .header_wrap .top-h-row .content_menu { margin-right:auto; } body .header_wrap .top-h-row .content_menu, body .header_wrap .top-h-row .phones, body .header_wrap .top-h-row .h-user-block { float:none !important; } body .header_wrap .top-h-row a, body .header_wrap .top-h-row .phone_text { color:#68717b !important; } body .header_wrap .top-h-row a:hover { color:#111418 !important; } body .header_wrap #header { margin:0 !important; padding:0 !important; background:transparent !important; } body .header_wrap #header > .wrapper_inner { position:relative; display:block; min-height:88px; padding-top:0 !important; padding-bottom:0 !important; } body .header_wrap #header .top_br { display:none !important; } body .header_wrap #header .middle-h-row { display:table; width:100%; height:88px !important; table-layout:fixed; } body .header_wrap #header .middle-h-row .logo_wrapp { width:34%; } body .header_wrap #header .middle-h-row .center_block { width:32%; padding:0 !important; } body .header_wrap #header .middle-h-row .basket_wrapp { width:34%; padding:0 !important; white-space:nowrap; } body .header_wrap #header .logo_wrapp .logo { display:flex; justify-content:center; align-items:center; } body .header_wrap #header .logo_wrapp .logo a { background:transparent !important; } body .header_wrap #header .logo_wrapp .logo img { width:176px !important; max-height:44px; margin:0 !important; object-fit:contain; } .akva-menu-toggle { display:flex; position:absolute; z-index:3; left:32px; top:50%; width:44px; height:44px; margin-top:-22px; padding:0; align-items:center; justify-content:center; flex-direction:column; gap:7px; border:0; border-radius:50%; background:transparent; cursor:pointer; transition:background .2s ease; } .akva-menu-toggle:hover { background:#f2f4f5; } .akva-menu-toggle span { display:block; width:22px; height:1.5px; background:#111418; transition:transform .25s ease; } .akva-menu-open .akva-menu-toggle span:first-child { transform:translateY(4.25px) rotate(45deg); } .akva-menu-open .akva-menu-toggle span:last-child { transform:translateY(-4.25px) rotate(-45deg); } body .header_wrap #header .center_block .search { display:flex !important; justify-content:flex-end; } body .header_wrap #header .center_block .search_middle_block { width:44px; height:44px; } body .header_wrap #header .center_block .search_block { float:none; } body .header_wrap #header .center_block .search_block .icon { top:12px; } body .header_wrap #header .basket_wrapp .wrapp_all_icons { display:inline-flex; align-items:center; gap:4px; } .akva-account-link { display:inline-flex; width:44px; height:44px; align-items:center; justify-content:center; vertical-align:middle; border-radius:50%; color:#111418; transition:background .2s ease, transform .2s ease; } .akva-account-link:hover { color:#111418; background:#f2f4f5; transform:translateY(-1px); } .akva-account-link svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; } body .header_wrap #header .catalog_menu { background:#fff !important; border-top:1px solid rgba(20,24,29,.08); } body .header_wrap #header .catalog_menu .wrap_menu { height:58px !important; overflow:visible; background:transparent !important; } body .header_wrap #header .catalog_menu .wrapper_middle_menu { display:flex; justify-content:center; } body .header_wrap #header .catalog_menu .catalog_menu_ext, body .header_wrap #header .catalog_menu .inc_menu { position:static !important; width:auto !important; padding:0 !important; } body .header_wrap #header .catalog_menu .menu_top_block { display:flex; justify-content:center; gap:34px; } body .header_wrap #header .catalog_menu .menu_top_block > li { height:58px !important; background:transparent !important; } body .header_wrap #header .catalog_menu .menu_top_block > li > a { display:flex !important; align-items:center; height:58px !important; padding:0 2px !important; border:0 !important; background:transparent !important; color:#171a1f !important; font-size:14px !important; font-weight:500 !important; letter-spacing:-.01em; text-transform:none !important; } body .header_wrap #header .catalog_menu .menu_top_block > li > a:before { content:""; position:absolute; left:2px; right:2px; bottom:0; height:1px; background:#171a1f; transform:scaleX(0); transition:transform .25s ease; } body .header_wrap #header .catalog_menu .menu_top_block > li:hover > a:before, body .header_wrap #header .catalog_menu .menu_top_block > li.current > a:before { transform:scaleX(1); } .akva-menu-open body .header_wrap #header .catalog_menu { display:block; } } @media (max-width: 0px) { body .header_wrap { background:rgba(255,255,255,.94) !important; border-bottom:1px solid rgba(20,24,29,.09); } body .header_wrap .top-h-row { display:none !important; } body .header_wrap #header { padding:0 !important; margin:0 !important; } body .header_wrap #header > .wrapper_inner { min-height:68px; padding:0 16px !important; } body .header_wrap #header .middle-h-row { height:68px !important; } body .header_wrap #header .logo_wrapp .logo img { width:132px !important; margin:0 !important; } .akva-account-link { display:none; } } @media (prefers-reduced-motion: reduce) { .akva-menu-toggle span, .akva-account-link, body .header_wrap #header .catalog_menu .menu_top_block > li > a:before { transition:none !important; } } /* --- 1. ШРИФТ Manrope везде (РёРєРѕРЅРєРё FontAwesome/glyphs РЅРµ трогаем) ---------- */ body, button, input, select, textarea, optgroup, .wrapper, .wrapper h1, .wrapper h2, .wrapper h3, .wrapper h4, .wrapper h5, .wrapper h6, .wrapper p, .wrapper a, .wrapper span, .wrapper li, .wrapper td, .wrapper th, .wrapper label, .wrapper div, ul.menu li a, .button, .basket_button, .price, .cost { font-family:'Manrope','Montserrat','Ubuntu',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif !important; } .wrapper .fa, .wrapper .fas, .wrapper .far, .wrapper .fab, .wrapper .icons, .wrapper i[class*="fa-"], .wrapper [class^="fa-"], .wrapper [class*=" fa-"], .wrapper [class^="icon"], .wrapper [class*=" icon"] { font-family:'FontAwesome' !important; } /* --- 2. БАЗА -------------------------------------------------------------- */ body { background:var(--white) !important; color:var(--ink); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } .wrapper h1, .wrapper h2, .wrapper h3, .wrapper h4, h1#pagetitle { color:var(--ink) !important; letter-spacing:-0.025em; font-weight:800 !important; } .wrapper h2, .wrapper h3 { font-weight:700 !important; } .muted, .grey, .text-muted, .list_item .article, .prewiew_text .muted, .preview_text .muted, .article, .date, .steel { color:var(--steel) !important; } html { scroll-behavior:smooth; } ::selection { background:var(--aqua-600); color:#fff; } ::-moz-selection { background:var(--aqua-600); color:#fff; } * { scrollbar-color:#b6c2cc var(--silver-100); scrollbar-width:thin; } ::-webkit-scrollbar { width:11px; height:11px; } ::-webkit-scrollbar-track { background:var(--silver-100); } ::-webkit-scrollbar-thumb { background:#c2ccd4; border-radius:8px; border:2px solid var(--silver-100); } ::-webkit-scrollbar-thumb:hover { background:var(--titanium); } /* видимый фокус для доступности */ .wrapper a:focus-visible, .button:focus-visible, input:focus-visible, button:focus-visible, select:focus-visible, textarea:focus-visible { outline:2px solid var(--aqua-500); outline-offset:2px; border-radius:6px; } /* плавность всех интерактивных элементов */ .wrapper a, .button, .basket_button, button.button, input.button, .list_item, .catalog_item, .stiker, .sticker, .tabs-head li, .list_item .image img, .catalog_item .image img { transition:color .2s var(--ease), background-color .25s var(--ease), border-color .25s var(--ease), box-shadow .35s var(--ease), transform .4s var(--ease-out), opacity .3s ease; } /* --- 3. ЛАЙАУТ: премиальный простор, контент РЅР° РІСЃСЋ ширину ----------------- */ body .wrapper { max-width:1440px !important; margin-left:auto !important; margin-right:auto !important; float:none !important; } .left_block { display:none !important; } .wraps .right_block { width:100% !important; float:none !important; margin-left:0 !important; padding-left:0 !important; } .wraps .middle { width:100% !important; } .wrapper a { color:var(--aqua-600); } .wrapper a:hover { color:var(--aqua-500); } /* --- 4. РЁРђРџРљРђ ------------------------------------------------------------- */ .top-h-row { background:var(--silver-50) !important; border-bottom:1px solid var(--silver-200) !important; } .middle-h-row { background:var(--white) !important; } .header_wrap #header { box-shadow:0 6px 24px -18px rgba(20,24,29,.5); } /* подчёркивание пунктов меню РІ фирменной гамме */ .main-nav ul.menu > li > a, #header .catalog_menu ul.menu > li > a { transition:color .2s var(--ease); } .main-nav ul.menu > li:hover > a, .main-nav ul.menu > li.current > a { color:var(--aqua-600) !important; } /* РїРѕРёСЃРє-пилюля */ .search .inputbox, .search input[type="text"], #title-search-input { border-radius:var(--r-pill) !important; border-color:var(--silver-200) !important; background:var(--silver-50) !important; } .search .inputbox:focus, #title-search-input:focus { border-color:var(--aqua-400) !important; background:#fff !important; box-shadow:0 0 0 4px rgba(63,86,100,.12) !important; } /* РєРѕСЂР·РёРЅР°/РёРєРѕРЅРєРё — аква РЅР° наведение */ .basket_wrapp .wraps_icon_block:hover .count a, .basket_wrapp .basket_block .title:hover { color:var(--aqua-600) !important; } /* --- 5. КНОПКИ ------------------------------------------------------------ */ .button, button.button, input.button, .basket_button, .basket_button.add, .basket_button.to-cart, .to-cart, .in-cart, #order_form_div input[type="submit"], .big_btn, .button_block .button { border-radius:var(--r-pill) !important; font-weight:700 !important; letter-spacing:.2px; border:0 !important; } /* первичная — аква-градиент */ .button:not(.transparent):not(.white_bg):not(.type_block), .basket_button.to-cart, .basket_button.add, .to-cart.button, #order_form_div input[type="submit"], .big_btn.to-cart { background:var(--grad-btn) !important; color:#fff !important; box-shadow:var(--shadow-btn); } .button:not(.transparent):not(.white_bg):not(.type_block):hover, .basket_button.to-cart:hover, .basket_button.add:hover, .to-cart.button:hover, #order_form_div input[type="submit"]:hover { transform:translateY(-2px); box-shadow:0 14px 30px -10px rgba(38,55,70,.55) !important; filter:saturate(1.06); } .button:active, .basket_button:active { transform:translateY(0); } /* вторичная / «в 1 клик» — прозрачная СЃ аква-РѕР±РІРѕРґРєРѕР№ */ .transparent.button, .type_block.button, .one_click, .white_bg.button { background:#fff !important; color:var(--aqua-600) !important; box-shadow:inset 0 0 0 1.5px var(--aqua-200) !important; } .transparent.button:hover, .type_block.button:hover, .one_click:hover { background:var(--aqua-50) !important; box-shadow:inset 0 0 0 1.5px var(--aqua-400) !important; color:var(--aqua-600) !important; } /* «в корзине» (добавлено) */ .in-cart.button { background:var(--aqua-50) !important; color:var(--aqua-600) !important; box-shadow:inset 0 0 0 1.5px var(--aqua-200) !important; } /* --- 6. КАТАЛОГ: плитки Рё строки ------------------------------------------ */ .catalog_block .catalog_item, .list_item { border-radius:var(--r-card) !important; border:1px solid var(--silver-200) !important; background:#fff; overflow:hidden; } .catalog_block .catalog_item { box-shadow:var(--shadow-soft); } .catalog_block .catalog_item:hover { transform:translateY(-6px); box-shadow:var(--shadow-lift) !important; border-color:var(--silver-300) !important; } .list_item { padding:20px 18px !important; } .list_item:hover { background:var(--silver-50) !important; box-shadow:var(--shadow-soft); border-color:var(--silver-300) !important; } /* Р·СѓРј фото РїСЂРё наведении */ .catalog_item .image, .list_item .image, .catalog_item .image_wrapper, .section_gallery_wrapper { overflow:hidden; } .catalog_block .catalog_item:hover .image img, .list_item:hover .image img { transform:scale(1.06); } /* название */ .catalog_item .item-title a, .list_item .name a, .list_item h2 a, .catalog_item .name a { color:var(--ink) !important; font-weight:700 !important; } .catalog_item:hover .item-title a, .list_item:hover .name a { color:var(--aqua-600) !important; } /* --- 7. ЦЕНЫ ------------------------------------------------------------- */ .cost .price_value, .list_item .price, .catalog_item .price, .prices_block .price, .cost.prices .price { color:var(--ink) !important; font-weight:800 !important; letter-spacing:-0.02em; } .price.discount, .old_price, .cost .discount { color:var(--titanium) !important; text-decoration:line-through; font-weight:600 !important; } .special_price, .min_price .price, .sale_block .value { color:var(--aqua-600) !important; } /* бейдж В«-N%В» */ .sale_block, .sale_block .sale_wrapper { border-radius:var(--r-sm) !important; } .sale_block .value { background:var(--grad-aqua) !important; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; font-weight:800 !important; } /* --- 8. СТИКЕРЫ / БЕЙДЖИ -------------------------------------------------- */ .stickers .stiker, .sticker, .labels .label, .stiker_wrap span, .sticker_hit, .sticker_new, .sticker_sale_text { border-radius:var(--r-pill) !important; font-weight:700 !important; letter-spacing:.3px; box-shadow:0 6px 16px -8px rgba(20,24,29,.4); backdrop-filter:blur(4px); } .sticker_hit { background:var(--grad-btn) !important; color:#fff !important; } .sticker_sale_text, .sticker_sale { background:linear-gradient(135deg,#e8583f,#c23a27) !important; color:#fff !important; } /* --- 9. КАРТОЧКА РўРћР’РђР Рђ (детальная) --------------------------------------- */ .catalog_detail .item_main_info { border:0 !important; } .catalog_detail .item_slider .slides > ul > li img, .catalog_detail .item_slider .slides .offers_img img { border-radius:var(--r-card); } .catalog_detail .info_item .top_info { border-bottom:1px solid var(--silver-200) !important; } .catalog_detail .article .block_title, .catalog_detail .brand .block_title { color:var(--titanium) !important; } /* блок цены */ .catalog_detail .prices_block { } .catalog_detail .cost.prices .price { font-size:34px !important; } /* плашка «при оплате РЅР° сайте» — РїСЂРёРІРѕРґРёРј Рє аква-стеклу */ .akl-site-pay-badge { border-radius:var(--r-md) !important; border:1px solid var(--aqua-200) !important; background:linear-gradient(180deg,#fff,var(--aqua-50)) !important; box-shadow:0 8px 22px -14px rgba(38,55,70,.34) !important; } .akl-site-pay-badge__price { color:var(--aqua-600) !important; } /* остаток/таймер акции */ .view_sale_block { background:var(--silver-50) !important; border:1px solid var(--silver-200) !important; border-radius:var(--r-md) !important; padding:14px 16px !important; } .view_sale_block .countdown, .view_sale_block .values { color:var(--ink) !important; font-weight:800 !important; } /* наличие */ .stock_board { background:var(--aqua-50) !important; border:1px solid var(--aqua-200) !important; border-radius:var(--r-md) !important; } .stock_board .title { color:var(--aqua-600) !important; } /* преимущества (тизеры) */ .tizers_block_detail { background:var(--grad-section); border:1px solid var(--silver-200); border-radius:var(--r-card); padding:22px 24px; box-shadow:var(--shadow-soft); } /* вкладки */ .tabs_section .tabs-head, .tabs1.main_tabs1 { border-bottom:1px solid var(--silver-200) !important; gap:4px; } .tabs_section .tabs-head li, .tabs1.main_tabs1 li { border-radius:var(--r-md) var(--r-md) 0 0 !important; color:var(--steel) !important; font-weight:700 !important; } .tabs_section .tabs-head li:hover { color:var(--aqua-600) !important; background:var(--aqua-50) !important; } .tabs_section .tabs-head li.current, .tabs1.main_tabs1 li.current { color:var(--aqua-600) !important; background:var(--aqua-50) !important; box-shadow:inset 0 -3px 0 var(--aqua-500); } /* таблица характеристик — зебра + аква-крючок */ .props_list tr:nth-child(even) td { background:var(--silver-50); } .props_list td.char_name, .char .char_name { color:var(--steel) !important; } .props_list td.char_value, .char .char_value { color:var(--ink) !important; font-weight:600 !important; } .char { border-bottom:1px dashed var(--silver-200) !important; } .detail_text a:not(.button) { background-image:linear-gradient(var(--aqua-500),var(--aqua-500)); background-size:0 1px; background-position:0 100%; background-repeat:no-repeat; transition:background-size .3s var(--ease), color .2s ease; padding-bottom:1px; } .detail_text a:not(.button):hover { background-size:100% 1px; } /* услуги */ .iblock.serv .services_block .item a:hover .link { color:var(--aqua-600) !important; } /* --- 10. ФОРМЫ / ИНПУТЫ --------------------------------------------------- */ .wrapper input[type="text"], .wrapper input[type="email"], .wrapper input[type="tel"], .wrapper input[type="password"], .wrapper input[type="search"], .wrapper input[type="number"], .wrapper textarea, .wrapper select, .form-control input, .form-control textarea { border-radius:var(--r-md) !important; border:1px solid var(--silver-200) !important; background:var(--silver-50) !important; transition:border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease); } .wrapper input:focus, .wrapper textarea:focus, .wrapper select:focus, .form-control input:focus { border-color:var(--aqua-400) !important; background:#fff !important; box-shadow:0 0 0 4px rgba(63,86,100,.12) !important; outline:none !important; } /* --- 11. ХЛЕБНЫЕ КРОШКИ / ПАГИНАЦИЯ / РАЗДЕЛИТЕЛИ ------------------------- */ .breadcrumbs a, .breadcrumb a { color:var(--steel) !important; } .breadcrumbs a:hover, .breadcrumb a:hover { color:var(--aqua-600) !important; } .module-pagination .nums a, .module-pagination .nums span, .navigation .nums a { border-radius:var(--r-md) !important; border:1px solid var(--silver-200) !important; transition:all .2s var(--ease); } .module-pagination .nums a:hover { border-color:var(--aqua-400) !important; color:var(--aqua-600) !important; } .module-pagination .nums a.current, .module-pagination .nums span.nav-current, .navigation .nums .current { background:var(--grad-btn) !important; color:#fff !important; border-color:transparent !important; box-shadow:var(--shadow-btn); } .border_block, .tabs_section, .props_list td, .props_list th, .middle, .list_item { border-color:var(--silver-200); } /* --- 12. ФУТЕР ----------------------------------------------------------- */ #footer, .footer_top { background:var(--ink) !important; color:var(--silver-300); } #footer a, .footer_top a { color:var(--silver-300) !important; } #footer a:hover, .footer_top a:hover { color:#fff !important; } .footer_top .sblock .title, #footer .title { color:#fff !important; } .footer_bottom { background:var(--black) !important; color:var(--titanium); } #footer .subscribe input[type="text"] { background:rgba(255,255,255,.06) !important; border-color:rgba(255,255,255,.12) !important; color:#fff !important; } /* --- 13. СЕКЦИИ / ЗАГОЛОВКИ БЛОКОВ ---------------------------------------- */ .block_title_wrapp, .title_block, h2.title { position:relative; } .section_title:after, .block_title_wrapp .title:after { content:""; display:block; height:3px; width:54px; margin-top:12px; background:var(--grad-aqua); border-radius:2px; } /* --- 14. ПОЯВЛЕНИЕ ПРИ РџР РћРљР РЈРўРљР• (reveal) --------------------------------- */ .akva-js .akva-reveal { opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .7s var(--ease-out); will-change:opacity,transform; } .akva-js .akva-reveal.akva-in { opacity:1; transform:none; } /* РјСЏРіРєРѕРµ проявление контента страницы */ @keyframes akvaFade { from { opacity:0; } to { opacity:1; } } #content .middle { animation:akvaFade .45s ease both; } /* --- 15. ДОСТУПНОСТЬ: уменьшенное движение -------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } .akva-js .akva-reveal { opacity:1 !important; transform:none !important; transition:none !important; } #content .middle { animation:none; } .catalog_block .catalog_item:hover, .list_item:hover { transform:none; } .catalog_block .catalog_item:hover .image img, .list_item:hover .image img { transform:none; } .button:hover, .to-cart.button:hover { transform:none !important; } } /* --- 16. АДАПТИВ ---------------------------------------------------------- */ @media (max-width:1024px) { body .wrapper { max-width:100% !important; } } @media (max-width:767px) { .catalog_detail .cost.prices .price { font-size:26px !important; } .list_item { padding:16px 14px !important; } } /* ========================================================================== 17. РАСШИРЕНИЕ: РєРѕСЂР·РёРЅР° В· заказ В· ЛК В· сравнение В· попапы В· главная В· формы Премиальная подача остальных экранов (черновой РїСЂРѕС…РѕРґ, далее допиливаем). ========================================================================== */ /* --- 17.1 Универсальные блоки/карточки ----------------------------------- */ .border_block, .white_block, .info_block, .gray_block, .block_wrap, .main_wrap .block, .services_block > .item, .stores .item, .staff_wrapp .item { border-radius:var(--r-card) !important; border:1px solid var(--silver-200) !important; background:#fff; } .info_block, .gray_block { background:var(--grad-section) !important; box-shadow:var(--shadow-soft); } /* нативные чекбоксы/радио/ползунки — РІ аква РѕРґРЅРёРј свойством */ input[type="checkbox"], input[type="radio"], input[type="range"], progress { accent-color:var(--aqua-600); } /* --- 17.2 Кастомные radio/checkbox Aspro --------------------------------- */ .checkbox i, .radio i, .form-control .checkbox label:before, .form-control .radio label:before { border-radius:6px !important; border-color:var(--silver-300) !important; transition:all .2s var(--ease); } .radio i { border-radius:50% !important; } .checkbox.checked i, .radio.checked i, input:checked + .checkbox i { background:var(--grad-btn) !important; border-color:var(--aqua-500) !important; } /* --- 17.3 Счётчик количества (minus / input / plus) ---------------------- */ .counter_block, .counter_block_wr { border-radius:var(--r-pill) !important; border:1px solid var(--silver-200) !important; background:var(--silver-50) !important; overflow:hidden; } .counter_block .minus, .counter_block .plus { color:var(--steel) !important; transition:background .2s var(--ease), color .2s var(--ease); cursor:pointer; } .counter_block .minus:hover, .counter_block .plus:hover { background:var(--aqua-50) !important; color:var(--aqua-600) !important; } .counter_block .text, .counter_block input { background:transparent !important; border:0 !important; font-weight:700 !important; color:var(--ink) !important; } /* --- 17.4 КОРЗИНА (страница) --------------------------------------------- */ .basket-items-list-wrapper, .bx_ordercart .bx_ordercart_order_table_container, .basket-items-list-item-container { border-radius:var(--r-card) !important; border:1px solid var(--silver-200) !important; background:#fff; box-shadow:var(--shadow-soft); } .basket-items-list-item-container { padding:6px 8px; margin-bottom:14px; transition:box-shadow .3s var(--ease), border-color .25s ease; } .basket-items-list-item-container:hover { box-shadow:var(--shadow-lift); border-color:var(--silver-300) !important; } .bx_ordercart_photo, .basket-item-block-image { border-radius:var(--r-md) !important; overflow:hidden; background:var(--silver-50); } .bx_ordercart_itemtitle a, .basket-item-label-left, .basket-item-block-name a { color:var(--ink) !important; font-weight:700 !important; } .bx_ordercart_itemtitle a:hover, .basket-item-block-name a:hover { color:var(--aqua-600) !important; } /* РїСЂРѕРјРѕРєРѕРґ/РєСѓРїРѕРЅ */ .bx_ordercart_coupon input[type="text"], .basket-coupon-block-field input, .basket-coupon-input { border-radius:var(--r-pill) !important; border:1px solid var(--silver-200) !important; background:var(--silver-50) !important; } /* итоги/СЃСѓРјРјР° */ .bx_ordercart_order_pay, .basket-checkout-block, .order_total, .basket-coupon-block-total-price { border-radius:var(--r-card) !important; border:1px solid var(--silver-200) !important; background:var(--grad-section) !important; box-shadow:var(--shadow-soft); } .bx_ordercart_order_sum .fwb, .basket-coupon-block-total-price-current, .order_total .value { color:var(--ink) !important; font-weight:800 !important; letter-spacing:-.02em; } /* --- 17.5 ОФОРМЛЕНИЕ Р—РђРљРђР—Рђ (sale.order.ajax / .bx_soa_*) ----------------- */ .bx_soa_section, .bx_soa_pp_company, .bx_soa_cart { border-radius:var(--r-card) !important; border:1px solid var(--silver-200) !important; background:#fff !important; box-shadow:var(--shadow-soft); overflow:hidden; } .bx_soa_section .bx_soa_section_title, .bx_soa_section_title { background:var(--grad-section) !important; border-bottom:1px solid var(--silver-200) !important; color:var(--ink) !important; font-weight:800 !important; letter-spacing:-.01em; } .bx_soa_section.bx_active .bx_soa_section_title, .bx_soa_editStep { color:var(--aqua-600) !important; } .bx_soa_pp_company.bx_selected, .bx_soa_pp_item.bx_selected { border-color:var(--aqua-400) !important; box-shadow:0 0 0 3px rgba(63,86,100,.13) !important; } #bx_soa_total .bx_soa_cart_total, .bx_soa_cart_total { border-radius:var(--r-card) !important; border:1px solid var(--silver-200) !important; background:var(--grad-section) !important; } .bx_soa_orderSave, #bx-soa-orderSave { border-radius:var(--r-pill) !important; background:var(--grad-btn) !important; color:#fff !important; border:0 !important; box-shadow:var(--shadow-btn); font-weight:700 !important; } .bx_soa_orderSave:hover { transform:translateY(-2px); box-shadow:0 14px 30px -10px rgba(38,55,70,.55) !important; } /* --- 17.6 ЛИЧНЫЙ КАБИНЕТ -------------------------------------------------- */ .personal_wrapper, .personal_section, .sale_order_full, .order_detail { border-radius:var(--r-card) !important; border:1px solid var(--silver-200) !important; background:#fff; } .personal_menu { border-radius:var(--r-card) !important; border:1px solid var(--silver-200) !important; overflow:hidden; background:#fff; } .personal_menu li a { transition:background .2s var(--ease), color .2s var(--ease); } .personal_menu li a:hover, .personal_menu li.active a, .personal_menu li.current a { background:var(--aqua-50) !important; color:var(--aqua-600) !important; } /* статусы заказа — пилюли */ .status, .order-status, .sale_order_full .status { border-radius:var(--r-pill) !important; font-weight:700 !important; padding:4px 12px !important; background:var(--aqua-50) !important; color:var(--aqua-600) !important; display:inline-block; } .status.green, .status-payed, .status.paid { background:#e9f7ee !important; color:#1f9d55 !important; } .status.red, .status-canceled { background:#fdecea !important; color:#d3402f !important; } /* --- 17.7 СРАВНЕНИЕ ------------------------------------------------------- */ .compare_wrapp, .compare_view, table.compare_table { border-radius:var(--r-card) !important; border:1px solid var(--silver-200) !important; overflow:hidden; background:#fff; } .compare_view .item_block:hover { box-shadow:var(--shadow-soft); } .compare_link, .compare_button { color:var(--aqua-600) !important; } /* --- 17.8 РџРћРџРђРџР« / МОДАЛКИ (быстрый просмотр, 1 клик, обратный Р·РІРѕРЅРѕРє) ---- */ .popup-window, .popup, .fancybox-skin, .window_prompt_content { border-radius:var(--r-card) !important; border:1px solid var(--silver-200) !important; box-shadow:0 40px 90px -30px rgba(20,24,29,.5) !important; overflow:hidden; } .popup-window-titlebar, .popup .popup-intro, .popup-window-top-row { background:var(--grad-section) !important; border-bottom:1px solid var(--silver-200) !important; } .popup-window-titlebar .popup-window-title, .popup .pop-up-title { color:var(--ink) !important; font-weight:800 !important; letter-spacing:-.01em; } .popup-window-overlay, .fancybox-overlay { background:rgba(13,18,24,.5) !important; backdrop-filter:blur(3px); } .popup-window-close-icon, .popup-window-titlebar-close-icon, .fancybox-close { opacity:.6; transition:opacity .2s var(--ease); } .popup-window-close-icon:hover, .fancybox-close:hover { opacity:1; } /* --- 17.9 ТАБЛИЦЫ ДАННЫХ (зебра, аккуратные границы) --------------------- */ table.data_table, .module-cart table, .data_table_props, .props_table { border-radius:var(--r-md); overflow:hidden; border-collapse:separate; border-spacing:0; } table.data_table th, .module-cart table thead td, .data_table_props th { background:var(--grad-section) !important; color:var(--ink) !important; font-weight:700 !important; } table.data_table tr:nth-child(even) td { background:var(--silver-50); } table.data_table td, .module-cart table td { border-color:var(--silver-200) !important; } /* --- 17.10 ГЛАВНАЯ: РїСЂРѕРјРѕ-плитки, преимущества, табы, бренды -------------- */ .start_promo .item { border-radius:var(--r-card); overflow:hidden; transition:transform .4s var(--ease), box-shadow .4s var(--ease); } .start_promo .item:hover { transform:translateY(-4px); box-shadow:var(--shadow-lift); } .tizers_block .item, .advantages .item { border-radius:var(--r-card) !important; border:1px solid var(--silver-200) !important; background:var(--grad-section); box-shadow:var(--shadow-soft); transition:transform .4s var(--ease), box-shadow .4s var(--ease); } .tizers_block .item:hover, .advantages .item:hover { transform:translateY(-4px); box-shadow:var(--shadow-lift); } .tizers_block .item .img i, .tizers_block .item .icon { color:var(--aqua-600) !important; } /* табы РЅР° главной Рё РІ блоках */ .main_tabs .tabs li, .tabs_section .tabs li, ul.tabs li { border-radius:var(--r-md) var(--r-md) 0 0 !important; color:var(--steel) !important; font-weight:700 !important; transition:all .2s var(--ease); } .main_tabs .tabs li:hover, ul.tabs li:hover { color:var(--aqua-600) !important; } .main_tabs .tabs li.current, ul.tabs li.current, ul.tabs li.active { color:var(--aqua-600) !important; background:var(--aqua-50) !important; box-shadow:inset 0 -3px 0 var(--aqua-500); } /* бренды/партнёры — РјСЏРіРєРѕРµ проявление логотипов */ .brands_block .item img, .brands .item img, .partners .item img { filter:grayscale(1) opacity(.7); transition:filter .3s var(--ease); } .brands_block .item:hover img, .brands .item:hover img, .partners .item:hover img { filter:none; } /* --- 17.11 Подсказки/тултипы --------------------------------------------- */ .hint .tooltip, .tooltip, .whint .tooltip { border-radius:var(--r-md) !important; border:1px solid var(--silver-200) !important; background:#fff !important; box-shadow:var(--shadow-lift) !important; color:var(--ink) !important; } .hint .icon i, .whint .icon i { background:var(--aqua-50) !important; color:var(--aqua-600) !important; border-radius:50%; } /* --- 17.12 Прочие акценты ------------------------------------------------- */ .quantity_block .value, .count_d_block .values, .sale_block .value { color:var(--aqua-600) !important; } .read_more, .more_text_ajax, .all_link, .view_all { color:var(--aqua-600) !important; } .rating .stars, .star.active, .vote_up.active { color:var(--aqua-500) !important; } /* ========================================================================== 18. PREMIUM CALM — стабилизация интерфейса РїРѕ результатам проверки Только CSS: header.php Рё HTML-компоненты РЅРµ изменяются. ========================================================================== */ /* Тёплая премиальная РѕСЃРЅРѕРІР° Рё сдержанная навигация */ body { background:#fff !important; } .top-h-row { background:#f1efe9 !important; border-color:var(--silver-200) !important; } .main-nav, #header .catalog_menu, #header .catalog_menu ul.menu, .wrapper_middle_menu, .wrapper_middle_menu .menu { background:var(--aqua-600) !important; } .main-nav ul.menu > li > a, #header .catalog_menu ul.menu > li > a, .wrapper_middle_menu .menu > li > a { color:#fff !important; } .main-nav ul.menu > li:hover > a, .main-nav ul.menu > li.current > a, #header .catalog_menu ul.menu > li:hover > a, #header .catalog_menu ul.menu > li.current > a { color:#fff !important; background:rgba(255,255,255,.09) !important; } .main-nav ul.menu > li + li, #header .catalog_menu ul.menu > li + li { border-left-color:rgba(255,255,255,.10) !important; } /* РљРЅРѕРїРєРё: спокойная геометрия, без чрезмерных пилюль */ .button, button.button, input.button, .basket_button, .to-cart, .in-cart, .big_btn, .button_block .button { min-height:40px; padding:10px 20px !important; border-radius:10px !important; line-height:20px !important; white-space:normal; box-sizing:border-box; } .button:not(.transparent):not(.white_bg):not(.type_block), .basket_button.to-cart, .basket_button.add, .to-cart.button, .big_btn.to-cart { background:var(--grad-btn) !important; box-shadow:var(--shadow-btn) !important; } .button:not(.transparent):not(.white_bg):not(.type_block):hover, .basket_button.to-cart:hover, .basket_button.add:hover, .to-cart.button:hover { box-shadow:0 13px 28px -13px rgba(38,55,70,.62) !important; } /* Плашки товара: убираем старые хвостики-ленты Рё нормализуем высоту */ .stickers { left:10px !important; top:10px !important; line-height:1 !important; } .item .stickers, .display_list .item .stickers, .catalog_item .stickers { left:10px !important; } .stickers [class*="sticker_"], .stickers .sticker_sale_text { height:auto !important; min-height:28px; padding:7px 12px !important; font-size:12px !important; line-height:14px !important; border-radius:8px !important; box-shadow:0 8px 18px -12px rgba(24,26,27,.50) !important; } .stickers .sticker_hit { background:var(--aqua-600) !important; } .stickers .sticker_new, .stickers .sticker_stock { background:#6e8b48 !important; color:#fff !important; } .stickers .sticker_recommend { background:var(--bronze) !important; color:#fff !important; } .stickers .sticker_sale_text, .stickers .sticker_sale { background:#9b4b3f !important; } .stickers .sticker_sale_text:before, .stickers [class*="sticker_"]:before { display:none !important; } /* Цена «при оплате РЅР° сайте»: РѕРґРёРЅ устойчивый компонент РІРѕ всех видах */ .akl-site-pay-badge { display:flex !important; flex-direction:column !important; align-items:flex-start !important; justify-content:center !important; gap:1px !important; width:100% !important; max-width:220px !important; min-width:0 !important; min-height:48px !important; margin:10px 0 0 !important; padding:7px 12px 8px !important; box-sizing:border-box !important; white-space:normal !important; border:1px solid #cfe2d2 !important; border-radius:10px !important; background:linear-gradient(180deg,#ffffff 0%,#f4faf5 100%) !important; box-shadow:none !important; text-align:left !important; overflow:hidden !important; } .akl-site-pay-badge__text { display:block !important; order:1; width:100%; font-size:11px !important; font-weight:500 !important; line-height:14px !important; color:var(--steel) !important; white-space:normal !important; } .akl-site-pay-badge__text span { display:inline !important; } .akl-site-pay-badge__price { display:block !important; order:2; width:100%; font-size:21px !important; font-weight:800 !important; line-height:23px !important; letter-spacing:-.03em !important; color:#2f8f46 !important; white-space:nowrap !important; text-shadow:0 1px 0 rgba(255,255,255,.7); } .akl-site-pay-badge__icon, .akl-site-pay-badge__divider { display:none !important; } .catalog_block .akl-site-pay-badge { max-width:none !important; align-items:center !important; text-align:center !important; } .catalog_block .akl-site-pay-badge__text, .catalog_block .akl-site-pay-badge__price { text-align:center !important; } .display_list .akl-site-pay-badge, .display_table .akl-site-pay-badge { max-width:215px !important; } /* FAQ/отзывы: РєРЅРѕРїРєР° РЅРµ перекрывает описание Рё РЅРµ растягивается */ .reviews-collapse { display:block !important; width:100% !important; margin:0 0 20px !important; float:none !important; } .reviews-collapse-link.button { display:inline-flex !important; align-items:center !important; justify-content:center !important; width:auto !important; max-width:100% !important; min-height:42px !important; margin:0 0 12px !important; padding:10px 18px !important; line-height:20px !important; } .reviews-reply-form { clear:both !important; } /* РљРѕСЂР·РёРЅР°: карточка РѕРґРЅР°, её внутренние колонки больше РЅРµ превращаются РІ плашки */ #basket-root .basket-checkout-container { display:flex; align-items:center; gap:20px; padding:24px 32px !important; border:1px solid var(--silver-200) !important; border-radius:14px !important; background:#fff !important; box-shadow:var(--shadow-soft) !important; } #basket-root .basket-checkout-block, #basket-root .basket-coupon-block-total-price, #basket-root .basket-checkout-block-total, #basket-root .basket-checkout-block-btn { min-width:0 !important; border:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; } #basket-root .basket-checkout-block-total { margin-left:auto !important; } #basket-root .basket-coupon-block-total-price-current { font-size:32px !important; line-height:1.1 !important; white-space:nowrap !important; } #basket-root .basket-checkout-block-btn .btn, #basket-root .basket-checkout-block-btn button, #basket-root .basket-checkout-block-btn .button { min-width:180px; min-height:46px; border-radius:10px !important; background:var(--grad-btn) !important; color:#fff !important; box-shadow:var(--shadow-btn) !important; } #basket-root .basket-items-list-wrapper { border-radius:14px !important; overflow:hidden !important; box-shadow:var(--shadow-soft) !important; } #basket-root .basket-items-list-item-container { margin:0 !important; padding:18px 20px !important; border:0 !important; border-bottom:1px solid var(--silver-200) !important; border-radius:0 !important; box-shadow:none !important; } #basket-root .basket-items-list-item-container:last-child { border-bottom:0 !important; } #basket-root .basket-items-list-item-container:hover { background:#fcfbf8 !important; box-shadow:none !important; } #basket-root .basket-item-amount-filed, #basket-root .basket-item-amount-filed:hover, #basket-root .basket-item-amount-filed:focus { width:42px !important; height:36px !important; padding:0 !important; border:1px solid var(--silver-200) !important; border-radius:0 !important; background:#fff !important; box-shadow:none !important; text-align:center !important; line-height:34px !important; } #basket-root .basket-item-amount-btn-minus, #basket-root .basket-item-amount-btn-plus { width:34px !important; height:36px !important; } /* РќРµ превращаем любые .status/.info_block РЅР° сторонних страницах РІ пилюли */ .status:not(.order-status):not(.status-payed):not(.status-canceled):not(.paid):not(.green):not(.red) { padding:0 !important; border-radius:0 !important; background:transparent !important; display:initial; } @media (max-width:900px) { #basket-root .basket-checkout-container { flex-wrap:wrap; gap:16px; padding:20px !important; } #basket-root .basket-checkout-block-total { margin-left:0 !important; } #basket-root .basket-checkout-block-btn { width:100%; } #basket-root .basket-checkout-block-btn .btn, #basket-root .basket-checkout-block-btn button, #basket-root .basket-checkout-block-btn .button { width:100%; } } @media (max-width:570px) { .akl-site-pay-badge { max-width:100% !important; min-height:46px !important; padding:7px 10px !important; } .akl-site-pay-badge__price { font-size:19px !important; line-height:21px !important; } #basket-root .basket-items-list-item-container { padding:14px 12px !important; } } /* ========================================================================== 31. V2 BASKET SUMMARY — coupons, attribution and site-payment total ========================================================================== */ /* The extra total is present in the shared Bitrix template, but visible only in V2. */ .akl-site-pay-badge--basket-total, .akva-v2-coupon-alerts { display:none !important; } /* Attribution stays attached to the basket item/order; V2 only suppresses its UI. */ body.akva-v2-theme #basket-root .basket-item-property.akva-tracking-property, body.akva-v2-theme #basket-root .basket-items-list-item-container .akl-site-pay-badge:not(.akl-site-pay-badge--basket-total), body.akva-v2-theme #basket-root .akva-legacy-coupon-alerts { display:none !important; } body.akva-v2-theme #basket-root .basket-checkout-container { display:grid !important; grid-template-columns:minmax(250px, .8fr) minmax(560px, 1.8fr); grid-template-areas: "coupon checkout"; align-items:start; gap:24px 40px; } body.akva-v2-theme #basket-root .basket-coupon-section { grid-area:coupon; min-width:0; } body.akva-v2-theme #basket-root .akva-v2-coupon-alerts { display:block !important; margin:10px 0 0 !important; padding:0 !important; } body.akva-v2-theme #basket-root .akva-v2-coupon-alerts .basket-coupon-alert-inner { margin:0 !important; padding:0 !important; } body.akva-v2-theme #basket-root .akva-v2-coupon-alerts .basket-coupon-alert { margin:6px 0 0 !important; } body.akva-v2-theme #basket-root .basket-checkout-section { grid-area:checkout; min-width:0; } body.akva-v2-theme #basket-root .basket-checkout-section-inner { display:grid !important; grid-template-columns:auto minmax(145px, auto) minmax(190px, auto) minmax(180px, auto); align-items:center; justify-content:end; gap:14px 22px; } body.akva-v2-theme #basket-root .basket-checkout-block-total { margin-left:0 !important; text-align:left !important; } body.akva-v2-theme #basket-root .basket-checkout-block-total-price { text-align:left !important; } body.akva-v2-theme #basket-root .akl-site-pay-badge--basket-total { display:flex !important; width:100% !important; max-width:220px !important; margin:0 !important; } @media (max-width:1100px) { body.akva-v2-theme #basket-root .basket-checkout-container { grid-template-columns:minmax(220px, .7fr) minmax(0, 1.3fr); } body.akva-v2-theme #basket-root .basket-checkout-section-inner { grid-template-columns:auto auto; justify-content:stretch; } body.akva-v2-theme #basket-root .basket-checkout-block-btn { grid-column:1 / -1; } } @media (max-width:760px) { body.akva-v2-theme #basket-root .basket-checkout-container { grid-template-columns:1fr; grid-template-areas: "coupon" "checkout"; gap:22px; } body.akva-v2-theme #basket-root .basket-checkout-section-inner { grid-template-columns:1fr 1fr; } } @media (max-width:480px) { body.akva-v2-theme #basket-root .basket-checkout-section-inner { grid-template-columns:1fr; } body.akva-v2-theme #basket-root .basket-checkout-block-btn { grid-column:auto; } } /* ========================================================================== 19. VISUAL FIXES — поиск, скидки, остаточные цвета темы, floating UI ========================================================================== */ /* Поиск: независимая CSS-лупа вместо устаревшего sprite */ #header .search #search-submit-button, .middle-h-row .search #search-submit-button, .top-h-row .search #search-submit-button { display:flex !important; align-items:center !important; justify-content:center !important; width:50px !important; height:50px !important; padding:0 !important; border:0 !important; border-radius:12px !important; background:var(--aqua-600) !important; box-shadow:0 9px 22px -12px rgba(38,55,70,.65) !important; cursor:pointer; } #header .search #search-submit-button:hover, .middle-h-row .search #search-submit-button:hover, .top-h-row .search #search-submit-button:hover { background:var(--aqua-500) !important; transform:translateY(-1px); } #header .search #search-submit-button i, .middle-h-row .search #search-submit-button i, .top-h-row .search #search-submit-button i { display:block !important; position:relative !important; width:17px !important; height:17px !important; margin:0 !important; background:none !important; border:2px solid #fff !important; border-radius:50% !important; box-sizing:border-box !important; } #header .search #search-submit-button i:after, .middle-h-row .search #search-submit-button i:after, .top-h-row .search #search-submit-button i:after { content:"" !important; position:absolute !important; right:-5px !important; bottom:-3px !important; width:7px !important; height:2px !important; border:0 !important; border-radius:2px !important; background:#fff !important; transform:rotate(45deg) !important; transform-origin:center !important; } /* Полностью перекрываем голубую заливку штатной темы в основном меню */ #header .catalog_menu, #header .catalog_menu .wrapper_inner, #header .catalog_menu .wrapper_middle_menu, #header .catalog_menu ul.menu, #header .catalog_menu ul.menu > li, #header .catalog_menu ul.menu > li.catalog, #header .catalog_menu ul.menu > li.stretch { background-color:var(--aqua-600) !important; background-image:none !important; } #header .catalog_menu ul.menu > li { border-right:1px solid rgba(255,255,255,.11) !important; border-bottom-color:transparent !important; } #header .catalog_menu ul.menu > li > a, #header .catalog_menu ul.menu > li > a span, #header .catalog_menu ul.menu > li > a div { color:#fff !important; } #header .catalog_menu ul.menu > li:hover, #header .catalog_menu ul.menu > li.current { background-color:var(--aqua-500) !important; } /* Телефон в шапке */ .middle_phone .phone_wrap .icons, .phones .phone_wrap .icons { background-color:var(--aqua-600) !important; color:#fff !important; box-shadow:0 8px 20px -12px rgba(38,55,70,.65) !important; } /* Скидка: процент всегда читаемый, экономия остаётся тёплым акцентом */ .cost.prices .sale_block, .display_list .sale_block, .catalog_block .sale_block { display:block !important; clear:both !important; margin:8px 0 4px !important; min-height:25px !important; font-size:0 !important; } .sale_block .sale_wrapper { display:inline-flex !important; align-items:stretch !important; gap:3px !important; border-radius:6px !important; overflow:visible !important; } .sale_block .value, .cost.prices .sale_block .value, .display_list .sale_block .value, .catalog_block .sale_block .value { display:inline-flex !important; align-items:center !important; justify-content:center !important; float:none !important; min-width:43px !important; height:25px !important; margin:0 !important; padding:4px 8px !important; box-sizing:border-box !important; border-radius:5px !important; background:var(--aqua-600) !important; background-image:none !important; color:#fff !important; -webkit-text-fill-color:#fff !important; -webkit-background-clip:border-box !important; background-clip:border-box !important; font-size:12px !important; font-weight:800 !important; line-height:17px !important; letter-spacing:0 !important; text-shadow:none !important; } .sale_block .text, .cost.prices .sale_block .text { display:inline-flex !important; align-items:center !important; float:none !important; height:25px !important; margin:0 !important; padding:4px 9px !important; box-sizing:border-box !important; border-radius:5px !important; background:#e8c85a !important; color:#292821 !important; font-size:11px !important; line-height:17px !important; white-space:nowrap !important; } .sale_block .text *, .sale_block .text .title { color:#292821 !important; } /* Старая цена: только одна аккуратная линия */ .price.discount, .cost .price.discount, .row_values .price.discount { text-decoration:none !important; background-image:none !important; } .price.discount strike, .price.discount span, .cost .price.discount strike, .row_values .price.discount strike { position:relative; display:inline-block; color:#77746e !important; text-decoration:none !important; line-height:17px !important; } .price.discount strike:after, .price.discount > span:after, .cost .price.discount strike:after, .cost .price.discount > span:after, .row_values .price.discount strike:after { content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:#77746e; transform:translateY(-50%); pointer-events:none; } /* Плавающая корзина: бронзовый акцент вместо ярко-голубого */ #header .basket_fly .opener, #header .basket_fly .opener > div { background-color:var(--aqua-600) !important; } #header .basket_fly .opener .basket_count, #header .basket_fly .opener .basket_count:hover { background-color:var(--bronze) !important; } #header .basket_fly .opener > div:not(.basket_count):hover { background-color:var(--aqua-500) !important; } #header .basket_fly .opener .count, #header .basket_fly .opener .count span { background:var(--graphite) !important; color:#fff !important; } /* Кнопка вверх */ a.scroll-to-top, a.scroll-to-top.ROUND_COLOR, a.scroll-to-top.RECT_COLOR { background-color:var(--aqua-600) !important; box-shadow:0 12px 28px -14px rgba(38,55,70,.65) !important; } a.scroll-to-top:hover, a.scroll-to-top.ROUND_COLOR:hover, a.scroll-to-top.RECT_COLOR:hover { background-color:var(--bronze) !important; transform:translateY(-2px); } /* ========================================================================== 20. HEADER NAV CONSISTENCY — единая ширина и состояние пункта «Каталог» ========================================================================== */ /* Внешний контейнер больше не рисует тёмные полосы за пределами шапки */ .header_wrap #header, #header .catalog_menu { background:transparent !important; box-shadow:none !important; } #header .catalog_menu { border:0 !important; filter:none !important; } /* Тёмная поверхность ограничена той же центральной шириной, что и шапка */ #header .catalog_menu > .wrapper_inner { width:100% !important; max-width:1440px !important; margin-left:auto !important; margin-right:auto !important; padding-left:0 !important; padding-right:0 !important; box-sizing:border-box !important; background:var(--aqua-600) !important; box-shadow:none !important; } #header .catalog_menu .wrapper_middle_menu, #header .catalog_menu .catalog_menu_ext, #header .catalog_menu .inc_menu, #header .catalog_menu ul.menu { box-shadow:none !important; filter:none !important; } /* «Каталог» имеет одно и то же оформление во всех разделах сайта */ #header .catalog_menu .catalog_menu_ext .menu_top_block > li.catalog, #header .catalog_menu .catalog_menu_ext .menu_top_block > li.catalog.current, #header .catalog_menu .catalog_menu_ext .menu_top_block > li.catalog:hover, #header .catalog_menu .catalog_menu_ext .menu_top_block > li.catalog > a, #header .catalog_menu .catalog_menu_ext .menu_top_block > li.catalog.current > a, #header .catalog_menu .catalog_menu_ext .menu_top_block > li.catalog:hover > a { background:#53636e !important; background-color:#53636e !important; background-image:none !important; color:#fff !important; box-shadow:none !important; border-color:rgba(255,255,255,.12) !important; } #header .catalog_menu .catalog_menu_ext .menu_top_block > li.catalog > a:after { background:rgba(255,255,255,.12) !important; } #header .catalog_menu .catalog_menu_ext .menu_top_block > li.catalog:hover, #header .catalog_menu .catalog_menu_ext .menu_top_block > li.catalog:hover > a { background:#5f707b !important; background-color:#5f707b !important; } /* Адаптивная кнопка получает ту же гамму */ #header .catalog_menu ul.menu.adaptive > li.menu_opener, #header .catalog_menu ul.menu.adaptive > li.menu_opener:hover, #header .catalog_menu ul.menu.adaptive.opened > li.menu_opener { background:#53636e !important; background-image:none !important; color:#fff !important; } /* Только тонкий разделитель под меню — без размытых боковых теней */ #header .catalog_menu > .wrapper_inner { border-bottom:1px solid rgba(17,19,21,.16) !important; } @media (max-width:1488px) { #header .catalog_menu > .wrapper_inner { width:calc(100% - 48px) !important; max-width:1440px !important; } } /* ========================================================================== 32. DELIVERY & PAYMENT — реальная структура Bitrix, две равные колонки ========================================================================== */ @media (min-width:901px) { /* В Bitrix .row и .bx-soa-pp находятся на одном элементе. */ #bx-soa-order #bx-soa-delivery .bx-soa-pp, #bx-soa-order #bx-soa-paysystem .bx-soa-pp { display:grid !important; grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important; align-items:start !important; gap:28px !important; width:100% !important; margin-left:0 !important; margin-right:0 !important; } #bx-soa-order #bx-soa-delivery .bx-soa-pp > .bx-soa-pp-item-container, #bx-soa-order #bx-soa-paysystem .bx-soa-pp > .bx-soa-pp-item-container, #bx-soa-order #bx-soa-delivery .bx-soa-pp > .bx-soa-pp-desc-container, #bx-soa-order #bx-soa-paysystem .bx-soa-pp > .bx-soa-pp-desc-container { float:none !important; width:100% !important; max-width:none !important; min-width:0 !important; padding-left:0 !important; padding-right:0 !important; margin:0 !important; } } /* Левая половина: варианты строго один под другим. */ #bx-soa-order #bx-soa-delivery .bx-soa-pp > .bx-soa-pp-item-container, #bx-soa-order #bx-soa-paysystem .bx-soa-pp > .bx-soa-pp-item-container { display:flex !important; flex-direction:column !important; align-items:stretch !important; gap:14px !important; } #bx-soa-order #bx-soa-delivery .bx-soa-pp-item-container > .bx-soa-pp-company, #bx-soa-order #bx-soa-paysystem .bx-soa-pp-item-container > .bx-soa-pp-company { display:grid !important; grid-template-columns:96px minmax(0,1fr) !important; grid-template-rows:auto auto !important; align-items:center !important; gap:6px 18px !important; width:100% !important; min-height:112px !important; height:auto !important; margin:0 !important; padding:16px !important; } #bx-soa-order #bx-soa-delivery .bx-soa-pp-item-container > .bx-soa-pp-company .bx-soa-pp-company-graf-container, #bx-soa-order #bx-soa-paysystem .bx-soa-pp-item-container > .bx-soa-pp-company .bx-soa-pp-company-graf-container { grid-column:1 !important; grid-row:1 / span 2 !important; } #bx-soa-order #bx-soa-delivery .bx-soa-pp-item-container > .bx-soa-pp-company .bx-soa-pp-company-smalltitle, #bx-soa-order #bx-soa-paysystem .bx-soa-pp-item-container > .bx-soa-pp-company .bx-soa-pp-company-smalltitle { display:block !important; grid-column:2 !important; grid-row:1 !important; align-self:end !important; width:100% !important; padding:0 !important; white-space:normal !important; overflow:visible !important; text-overflow:clip !important; overflow-wrap:anywhere !important; } #bx-soa-order #bx-soa-delivery .bx-soa-pp-item-container > .bx-soa-pp-company .bx-soa-pp-delivery-cost, #bx-soa-order #bx-soa-paysystem .bx-soa-pp-item-container > .bx-soa-pp-company .bx-soa-pp-delivery-cost { position:static !important; display:block !important; grid-column:2 !important; grid-row:2 !important; align-self:start !important; width:auto !important; margin:0 !important; padding:0 !important; border:0 !important; background:transparent !important; text-align:left !important; white-space:normal !important; } /* Правая половина: самостоятельная карточка описания выбранного варианта. */ #bx-soa-order #bx-soa-delivery .bx-soa-pp > .bx-soa-pp-desc-container, #bx-soa-order #bx-soa-paysystem .bx-soa-pp > .bx-soa-pp-desc-container { display:block !important; align-self:start !important; } #bx-soa-order #bx-soa-delivery .bx-soa-pp-desc-container > .bx-soa-pp-company, #bx-soa-order #bx-soa-paysystem .bx-soa-pp-desc-container > .bx-soa-pp-company { display:block !important; width:100% !important; min-height:240px !important; margin:0 !important; padding:24px !important; } #bx-soa-order #bx-soa-delivery .bx-soa-pp-desc-container .bx-soa-pp-company-desc, #bx-soa-order #bx-soa-paysystem .bx-soa-pp-desc-container .bx-soa-pp-company-desc { width:100% !important; padding-top:16px !important; white-space:normal !important; overflow:visible !important; overflow-wrap:anywhere !important; } @media (max-width:900px) { #bx-soa-order #bx-soa-delivery .bx-soa-pp, #bx-soa-order #bx-soa-paysystem .bx-soa-pp { display:flex !important; flex-direction:column !important; gap:18px !important; margin-left:0 !important; margin-right:0 !important; } #bx-soa-order #bx-soa-delivery .bx-soa-pp > .bx-soa-pp-item-container, #bx-soa-order #bx-soa-paysystem .bx-soa-pp > .bx-soa-pp-item-container, #bx-soa-order #bx-soa-delivery .bx-soa-pp > .bx-soa-pp-desc-container, #bx-soa-order #bx-soa-paysystem .bx-soa-pp > .bx-soa-pp-desc-container { float:none !important; width:100% !important; max-width:100% !important; padding-left:0 !important; padding-right:0 !important; margin:0 !important; } } @media (max-width:767px) { #header .catalog_menu > .wrapper_inner { width:100% !important; max-width:100% !important; } } /* ========================================================================== 21. MENU WIDTH LOCK — меню строго равно ширине родительской шапки ========================================================================== */ body .wrapper #header .catalog_menu { position:relative !important; left:0 !important; right:auto !important; width:100% !important; max-width:100% !important; min-width:0 !important; margin-left:0 !important; margin-right:0 !important; transform:none !important; box-sizing:border-box !important; overflow:visible !important; } body .wrapper #header .catalog_menu > .wrapper_inner { position:relative !important; left:0 !important; right:auto !important; width:100% !important; max-width:none !important; min-width:0 !important; margin:0 !important; padding:0 !important; transform:none !important; box-sizing:border-box !important; } body .wrapper #header .catalog_menu .wrapper_middle_menu, body .wrapper #header .catalog_menu .wrap_menu { position:relative !important; left:0 !important; right:auto !important; width:100% !important; max-width:100% !important; min-width:0 !important; margin:0 !important; transform:none !important; box-sizing:border-box !important; } body .wrapper #header .catalog_menu .inc_menu { width:100% !important; max-width:100% !important; box-sizing:border-box !important; } /* ========================================================================== 22. ASPRO GRID RESTORE + FOOTER CONTRAST ========================================================================== */ /* Штатная сетка Optimus: контейнер 1208px, включая отступы по 24px. */ body .wrapper #header .catalog_menu { width:100% !important; max-width:none !important; margin:0 !important; background:transparent !important; box-shadow:none !important; } body .wrapper #header .catalog_menu > .wrapper_inner { width:100% !important; max-width:1208px !important; margin:0 auto !important; padding:0 24px !important; box-sizing:border-box !important; background:var(--aqua-600) !important; box-shadow:none !important; } body .wrapper #header .catalog_menu .wrapper_middle_menu, body .wrapper #header .catalog_menu .wrap_menu, body .wrapper #header .catalog_menu .inc_menu { width:100% !important; max-width:100% !important; margin:0 !important; box-sizing:border-box !important; } @media (max-width:767px) { body .wrapper #header .catalog_menu > .wrapper_inner { max-width:100% !important; padding-left:0 !important; padding-right:0 !important; } } /* Затемняем только нижнюю часть футера; блок просмотренных товаров не затрагиваем. */ #footer > .footer_inner > .wrapper_inner { background:var(--ink) !important; color:#cfd3d4 !important; } #footer .footer_bottom_inner, #footer .footer_bottom_inner .middle, #footer .footer_bottom_inner .rows_block { color:#cfd3d4 !important; } #footer .footer_inner .submenu_top .menu_item a, #footer .footer_inner .submenu_top .menu_item a.dark_link, #footer .footer_inner .footer_bottom_inner .title { color:#fff !important; opacity:1 !important; } #footer .footer_inner .submenu .menu_item a, #footer .footer_inner .submenu .menu_item a.dark_link, #footer .footer_bottom_inner .small_title, #footer .footer_bottom_inner .copyright, #footer .footer_bottom_inner .copyright * { color:#cfd3d4 !important; opacity:1 !important; } #footer .footer_bottom_inner .phones .phone_wrap, #footer .footer_bottom_inner .phones .phone_wrap a, #footer .footer_bottom_inner .calltouch_phone, #footer .footer_bottom_inner .calltouch_phone a { color:#fff !important; opacity:1 !important; } #footer .footer_inner .submenu .menu_item a:hover, #footer .footer_inner .submenu_top .menu_item a:hover, #footer .footer_bottom_inner .callback_btn:hover { color:#d2b27f !important; } /* ========================================================================== 23. PREMIUM FOOTER COMPOSITION ========================================================================== */ /* Светлая зона просмотренных товаров отделена от нижнего футера. */ #footer, #footer > .footer_inner, #footer > .footer_inner.fill, #footer > .footer_inner.no_fill { background:#f4f5f3 !important; } #footer { overflow:hidden; } #footer .viewed_block { padding:30px 0 34px !important; border-bottom:0 !important; background:#f4f5f3 !important; } #footer .viewed_block .title_block { margin:0 0 22px !important; color:var(--graphite) !important; font-size:22px !important; line-height:1.25 !important; font-weight:700 !important; letter-spacing:-.02em; } #footer .viewed_block .outer_wrap { background:transparent !important; border:0 !important; box-shadow:none !important; } #footer .viewed_block .rows_block { margin:0 -6px !important; } #footer .viewed_block .item_block { margin-right:12px !important; } #footer .viewed_block .item_block .item { min-height:190px; padding:18px 12px 16px !important; background:#e9ebe8 !important; border:1px solid #e2e4e0 !important; border-radius:14px !important; opacity:.58 !important; box-shadow:none !important; } #footer .viewed_block .item_block .item.has-item { background:#fff !important; border-color:#e1e3df !important; opacity:1 !important; box-shadow:0 8px 24px -20px rgba(24,26,27,.42) !important; } #footer .viewed_block .item_block .item.has-item:hover { border-color:#c9c2b6 !important; box-shadow:0 16px 34px -22px rgba(24,26,27,.42) !important; transform:translateY(-2px); } #footer .viewed_block .image_wrapper_block, #footer .viewed_block .image_wrapper_block a { height:92px !important; line-height:92px !important; } #footer .viewed_block .item-title, #footer .viewed_block .item-title a, #footer .viewed_block .item-title a span, #footer .viewed_block .dark_link { color:#39434a !important; font-size:14px !important; line-height:19px !important; font-weight:600 !important; } /* Нижний футер получает цельный фон на всю ширину окна. */ #footer > .footer_inner > .wrapper_inner { position:relative; max-width:1208px !important; padding:0 24px !important; background:var(--ink) !important; box-shadow:0 0 0 100vmax var(--ink) !important; clip-path:inset(0 -100vmax); } #footer .footer_bottom_inner { padding:40px 0 44px !important; border-top:1px solid rgba(255,255,255,.1); } #footer .footer_bottom_inner .left_block { color:#aeb5b7 !important; } #footer .footer_inner .submenu_top .menu_item a { font-size:13px !important; line-height:18px !important; letter-spacing:.04em; } #footer .footer_inner .submenu .menu_item { margin-top:7px !important; } #footer .footer_inner .submenu .menu_item a, #footer .footer_inner .submenu .menu_item a.dark_link { color:#c8cdce !important; font-size:14px !important; line-height:20px !important; } #footer .footer_bottom_inner .phones .phone_wrap, #footer .footer_bottom_inner .phones .phone_wrap *, #footer .footer_bottom_inner .calltouch_phone, #footer .footer_bottom_inner .calltouch_phone * { color:#fff !important; opacity:1 !important; } #footer .footer_bottom_inner .phones .phone_wrap a { font-size:19px !important; line-height:21px !important; font-weight:700 !important; } #footer .footer_bottom_inner .order_wrap_btn, #footer .footer_bottom_inner .order_wrap_btn .callback_btn { color:#d2b27f !important; } #footer .footer_bottom_inner .small_title { margin:18px 0 8px !important; color:#c8cdce !important; } @media (max-width:767px) { #footer .viewed_block { padding:24px 0 28px !important; } #footer > .footer_inner > .wrapper_inner { padding-left:18px !important; padding-right:18px !important; } #footer .footer_bottom_inner { padding:32px 0 36px !important; } } /* ========================================================================== 24. VIEWED PRODUCTS FULL-BLEED FIX ========================================================================== */ /* Светлая полоса просмотренных товаров продолжается до краёв окна. */ #footer .viewed_block { position:relative; z-index:1; background:#f4f5f3 !important; box-shadow:0 0 0 100vmax #f4f5f3 !important; clip-path:inset(0 -100vmax); } /* Пустые технические ячейки слайдера не должны выглядеть как skeleton-загрузка. */ #footer .viewed_block .item_block .item:not(.has-item) { background:transparent !important; border-color:transparent !important; box-shadow:none !important; opacity:0 !important; pointer-events:none !important; } /* Более аккуратная граница между светлой витриной и тёмным футером. */ #footer > .footer_inner > .wrapper_inner { border-top:1px solid rgba(255,255,255,.08); } /* ========================================================================== 25. PREMIUM CHECKOUT — оформление заказа Bitrix ========================================================================== */ #content #bx-soa-order-form, #content #bx-soa-order-form * { font-family:Manrope,Arial,sans-serif !important; } #bx-soa-order { --checkout-ink:#263746; --checkout-bronze:#a88656; --checkout-border:#e3e1dc; --checkout-soft:#f7f6f2; color:#30363a; } /* Этапы заказа */ #bx-soa-order .bx-soa-section, #bx-soa-order .bx-soa-section.bx-selected, #bx-soa-order .bx-soa-section.bx-step-completed { margin-bottom:22px !important; background:#fff !important; border:1px solid var(--checkout-border) !important; border-radius:16px !important; overflow:hidden; box-shadow:0 14px 36px -32px rgba(24,26,27,.5); transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease !important; } #bx-soa-order .bx-soa-section.bx-selected { border-color:#cfc8bc !important; box-shadow:0 18px 42px -30px rgba(24,26,27,.42); } #bx-soa-order .bx-soa-section:not(.bx-selected):hover { border-color:#d3cec5 !important; transform:translateY(-1px); } #bx-soa-order .bx-soa-section .bx-soa-section-title-container { padding:26px 24px 26px 76px !important; background:linear-gradient(135deg,#fbfaf7 0%,#f5f4f0 100%) !important; border-bottom:1px solid var(--checkout-border) !important; } #bx-soa-order .bx-soa-section .bx-soa-section-title { color:#1f2529 !important; font-size:21px !important; line-height:28px !important; font-weight:700 !important; letter-spacing:-.02em; } #bx-soa-order .bx-soa-section .bx-soa-section-title:before { left:-48px !important; top:-3px !important; width:34px !important; height:34px !important; background-color:#fff !important; border:1px solid #d8d5cf; border-radius:50%; box-shadow:0 7px 16px -10px rgba(24,26,27,.5); } #bx-soa-order .bx-soa-section.bx-step-completed .bx-soa-section-title:before { background-color:#4f8f58 !important; border-color:#4f8f58 !important; } #bx-soa-order .bx-soa-editstep, #bx-soa-order .change_link { color:var(--checkout-bronze) !important; font-weight:600 !important; transition:color .2s ease !important; } #bx-soa-order .bx-soa-editstep:hover, #bx-soa-order .change_link:hover { color:#7d623e !important; } #bx-soa-order .bx-soa-section .bx-soa-section-content { padding:30px 34px 32px 76px !important; color:#3e4549 !important; transition:opacity .25s ease,transform .25s ease !important; } /* Поля и выбор региона */ #bx-soa-order .form-control, #bx-soa-order div[class*=bx-sls] .form-control.dropdown-block, #bx-soa-order .bx-sls .dropdown-block, #bx-soa-order textarea.form-control { min-height:46px; background:#fff !important; color:#283238 !important; border:1px solid #dcdad5 !important; border-radius:10px !important; box-shadow:0 1px 0 rgba(24,26,27,.02) !important; transition:border-color .2s ease,box-shadow .2s ease,background .2s ease !important; } #bx-soa-order .form-control:hover, #bx-soa-order div[class*=bx-sls] .form-control.dropdown-block:hover { border-color:#bdb7ad !important; } #bx-soa-order .form-control:focus, #bx-soa-order div[class*=bx-sls] .form-control.dropdown-block:focus-within { border-color:var(--checkout-bronze) !important; box-shadow:0 0 0 3px rgba(168,134,86,.14) !important; } #bx-soa-order .bx-soa .bx-soa-custom-label, #bx-soa-order .bx-soa .form-group label, #bx-soa-order .bx-soa-reference { color:#73797b !important; } #bx-soa-order div[class*=bx-sls] .quick-locations { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 16px !important; } #bx-soa-order div[class*=bx-sls] .quick-locations .quick-location-tag { margin:0 !important; padding:8px 14px !important; background:#fff !important; color:#526068 !important; border:1px solid #d9d6d0 !important; border-radius:9px !important; transition:all .2s ease !important; } #bx-soa-order div[class*=bx-sls] .quick-locations .quick-location-tag:hover { background:#f3efe8 !important; color:#6f5737 !important; border-color:#b89a70 !important; transform:translateY(-1px); } #bx-soa-order div[class*=bx-sls] .quick-locations .quick-location-tag.bx-selected, #bx-soa-order div[class*=bx-sls] .quick-locations .quick-location-tag.quick-location-tag-selected { background:var(--checkout-ink) !important; color:#fff !important; border-color:var(--checkout-ink) !important; } /* Радиокнопки, чекбоксы и варианты доставки/оплаты */ #bx-soa-order .bx-soa .form-group .radio-inline label:before, #bx-soa-order .bx-soa-pp-item-container .bx-soa-pp-company-graf-container:before { background:#fff !important; border:1px solid #cfcac1 !important; box-shadow:inset 0 0 0 4px #fff; transition:border-color .2s ease,background .2s ease !important; } #bx-soa-order .bx-soa .form-group .radio-inline:hover label:before { border:1px solid var(--checkout-bronze) !important; } #bx-soa-order .bx-soa .form-group .radio-inline.checked label:before, #bx-soa-order .bx-soa-pp-company.bx-selected .bx-soa-pp-company-graf-container:before { background:var(--checkout-bronze) !important; border:1px solid var(--checkout-bronze) !important; } #bx-soa-order .bx-soa-pp-company-graf-container, #bx-soa-order .bx-soa-pp-company-graf-container .bx-soa-pp-company-image { background-color:#fff !important; border-color:#dedbd5 !important; border-radius:10px !important; } #bx-soa-order .bx-soa-pp-desc-container .bx-soa-pp-company { background:var(--checkout-soft) !important; border-color:var(--checkout-border) !important; border-radius:0 0 12px 12px !important; } /* Корзина внутри заказа */ #bx-soa-order #bx-soa-basket .bx-soa-item-table .bx-soa-item-tr:first-child { background:#f7f6f2 !important; } #bx-soa-order #bx-soa-basket .bx-soa-item-table .bx-soa-item-tr .bx-soa-item-td { border-color:#ebe8e2 !important; } #bx-soa-order #bx-soa-basket .bx-soa-item-imgcontainer { background-color:#f7f7f5 !important; border-radius:10px !important; } #bx-soa-order #bx-soa-basket .bx-soa-item-title a, #bx-soa-order #bx-soa-basket .bx-price { color:#26343d !important; } /* Правая карточка итогов */ #bx-soa-order .bx-soa-cart-total { padding:28px 26px 32px !important; background:#fff !important; border:1px solid var(--checkout-border) !important; border-radius:16px !important; box-shadow:0 18px 44px -32px rgba(24,26,27,.48) !important; } #bx-soa-order .bx-soa-cart-total .change_basket { color:#20282d !important; border-color:#e7e3dc !important; } #bx-soa-order .bx-soa-cart-total .bx-soa-cart-total-line { color:#4b5357 !important; } #bx-soa-order .bx-soa-cart-total .bx-soa-cart-total-line-highlighted { margin-top:14px !important; padding:9px 11px !important; background:#eef6eb !important; color:#366d40 !important; border:1px solid #d4e7d0 !important; border-radius:9px !important; } #bx-soa-order .bx-soa-cart-total .bx-soa-cart-total-line-total { border-color:#e5e1da !important; } #bx-soa-order .bx-soa-cart-total-line-total .bx-soa-cart-t, #bx-soa-order .bx-soa-cart-total-line-total .bx-soa-cart-d { color:#172027 !important; font-weight:700 !important; } /* Кнопки — графит с бронзовым hover вместо старого голубого. */ #bx-soa-order .btn, #bx-soa-order .btn.btn-default, #bx-soa-order #bx-soa-orderSave a, #bx-soa-order .bx-soa-cart-total-button-container .btn { background:var(--checkout-ink) !important; background-image:none !important; color:#fff !important; border:1px solid var(--checkout-ink) !important; border-radius:11px !important; box-shadow:0 12px 25px -16px rgba(38,55,70,.8) !important; text-shadow:none !important; transition:transform .2s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease !important; } #bx-soa-order .btn:hover, #bx-soa-order .btn.btn-default:hover, #bx-soa-order #bx-soa-orderSave a:hover, #bx-soa-order .bx-soa-cart-total-button-container .btn:hover { background:var(--checkout-bronze) !important; border-color:var(--checkout-bronze) !important; transform:translateY(-2px); box-shadow:0 16px 28px -16px rgba(109,82,48,.65) !important; } #bx-soa-order .bx-soa-more .bx-soa-more-btn .pull-left { background:transparent !important; color:#58646b !important; border-color:#cfcac1 !important; box-shadow:none !important; } /* Информационные сообщения */ #bx-soa-order .alert, #bx-soa-order .alert-warning { padding:16px 18px !important; background:#f7f2e7 !important; color:#6f5d3e !important; border:1px solid #e4d7be !important; border-radius:12px !important; } @media (max-width:767px) { #bx-soa-order .bx-soa-section .bx-soa-section-title-container { padding:20px 18px 20px 62px !important; } #bx-soa-order .bx-soa-section .bx-soa-section-content { padding:24px 18px !important; } #bx-soa-order .bx-soa-cart-total { padding:24px 20px 28px !important; } } @media (prefers-reduced-motion:reduce) { #bx-soa-order *,#bx-soa-order *:before,#bx-soa-order *:after { transition:none !important; animation:none !important; } } /* ========================================================================== 26. PRODUCT DETAIL COMPACT BUY ROW Важно: display скрытых состояний кнопок здесь не переопределяется. ========================================================================== */ /* Обычная цена и зелёная цена при оплате на сайте — в одной строке. */ .catalog_detail .middle_info .prices_block .cost.prices { display:flex !important; align-items:center !important; flex-wrap:wrap; gap:12px 18px; } .catalog_detail .middle_info .prices_block .cost.prices > .price, .catalog_detail .middle_info .prices_block .cost.prices > .price_matrix_block, .catalog_detail .middle_info .prices_block .cost.prices > .with_matrix, .catalog_detail .middle_info .prices_block .cost.prices > .akl-site-pay-badge { margin-top:0 !important; margin-bottom:0 !important; } .catalog_detail .middle_info .prices_block .akl-site-pay-badge { width:auto !important; min-width:220px !important; max-width:250px !important; min-height:68px; } /* Два независимых действия располагаются рядом; служебные состояния остаются скрытыми. */ .catalog_detail .middle_info .buy_block > .counter_wrapp { display:inline-flex; align-items:center; vertical-align:top; width:auto !important; padding:14px 10px 0 0 !important; margin:0 !important; } .catalog_detail .middle_info .buy_block > .counter_wrapp .button_block { display:inline-block; width:auto !important; margin:0 !important; } .catalog_detail .counter_wrapp .button_block .big_btn.w_icons.to-cart, .catalog_detail .counter_wrapp .button_block .big_btn.w_icons.in-cart { align-items:center; justify-content:center; width:auto !important; min-width:184px !important; min-height:50px !important; padding:13px 24px 13px 50px !important; line-height:22px !important; white-space:nowrap !important; text-align:center; box-sizing:border-box !important; } /* Flex включается только у реально видимого состояния, без !important. */ .catalog_detail .counter_wrapp .button_block .big_btn.w_icons.to-cart:not([style*="display: none"]), .catalog_detail .counter_wrapp .button_block .big_btn.w_icons.in-cart:not([style*="display: none"]) { display:inline-flex; } .catalog_detail .counter_wrapp .button_block .big_btn.w_icons.to-cart:before { left:20px !important; top:50% !important; margin-top:-8px !important; transform:none !important; } .catalog_detail .counter_wrapp .button_block .big_btn.w_icons > span { display:block; white-space:nowrap !important; line-height:22px !important; } .catalog_detail .counter_wrapp .button_block .big_btn.w_icons.in-cart i { position:absolute; left:22px; top:50%; margin:-7px 0 0 !important; } .catalog_detail .counter_wrapp .button_block .big_btn.to-cart_test { min-width:210px !important; } .catalog_detail .counter_wrapp .button_block .big_btn.to-cart_real { min-width:184px !important; } @media (max-width:640px) { .catalog_detail .middle_info .prices_block .cost.prices { align-items:stretch !important; } .catalog_detail .middle_info .prices_block .akl-site-pay-badge { width:100% !important; max-width:100% !important; } .catalog_detail .middle_info .buy_block > .counter_wrapp { display:flex; width:100% !important; padding-right:0 !important; } .catalog_detail .middle_info .buy_block > .counter_wrapp .button_block, .catalog_detail .counter_wrapp .button_block .big_btn.w_icons.to-cart, .catalog_detail .counter_wrapp .button_block .big_btn.w_icons.in-cart { width:100% !important; max-width:100% !important; } } /* ========================================================================== 27. CHECKOUT 2.0 — 21st.dev inspired premium flow ========================================================================== */ /* Общая сцена и двухколоночная композиция. */ body #bx-soa-order-form { position:relative; padding:24px !important; background:linear-gradient(180deg,#f8f7f4 0%,#fff 520px) !important; border:1px solid #ebe8e1; border-radius:22px; } #bx-soa-order .row { margin-left:-12px !important; margin-right:-12px !important; } #bx-soa-order .col-sm-9, #bx-soa-order .col-sm-3 { padding-left:12px !important; padding-right:12px !important; } /* Информационный блок вверху. */ #bx-soa-order .alert-warning, #bx-soa-order .bx-soa-order-description { margin:0 0 24px !important; padding:16px 18px 16px 48px !important; background:#f5f0e6 !important; color:#66583f !important; border:1px solid #e4d8c2 !important; border-radius:13px !important; font-size:13px !important; line-height:20px !important; box-shadow:none !important; } /* Карточки шагов: номер, статус, раскрытие. */ #bx-soa-order .bx-soa-section { position:relative; isolation:isolate; } #bx-soa-order .bx-soa-section:after { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; border-radius:16px; opacity:0; box-shadow:0 24px 58px -42px rgba(38,55,70,.7); transition:opacity .25s ease; } #bx-soa-order .bx-soa-section.bx-selected:after { opacity:1; } #bx-soa-order .bx-soa-section .bx-soa-section-title-container { min-height:88px; display:flex; align-items:center; position:relative; } #bx-soa-order .bx-soa-section .bx-soa-section-title:before { display:flex !important; align-items:center; justify-content:center; background-image:none !important; color:#647078; font-size:13px; font-weight:800; line-height:1; } #bx-soa-order #bx-soa-region .bx-soa-section-title:before { content:"01"; } #bx-soa-order #bx-soa-properties .bx-soa-section-title:before { content:"02"; } #bx-soa-order #bx-soa-delivery .bx-soa-section-title:before { content:"03"; } #bx-soa-order #bx-soa-paysystem .bx-soa-section-title:before { content:"04"; } #bx-soa-order #bx-soa-basket .bx-soa-section-title:before { content:"05"; } #bx-soa-order .bx-soa-section.bx-step-completed .bx-soa-section-title:before { content:"✓" !important; color:#fff !important; font-size:17px !important; } #bx-soa-order .bx-soa-section.bx-selected .bx-soa-section-title:before { background:var(--checkout-ink) !important; border-color:var(--checkout-ink) !important; color:#fff !important; } #bx-soa-order .bx-soa-section .bx-soa-section-title-container:after { content:""; position:absolute; left:0; top:18px; bottom:18px; width:3px; border-radius:0 3px 3px 0; background:transparent; transition:background .2s ease; } #bx-soa-order .bx-soa-section.bx-selected .bx-soa-section-title-container:after { background:var(--checkout-bronze); } #bx-soa-order .bx-soa-section .bx-soa-section-content { border-top:0 !important; } #bx-soa-order .bx-soa-section.bx-selected .bx-soa-section-content { animation:akvaCheckoutReveal .32s cubic-bezier(.22,.7,.3,1) both; } @keyframes akvaCheckoutReveal { from { opacity:0;transform:translateY(8px); } to { opacity:1;transform:translateY(0); } } /* Поля: крупнее, чище, понятнее. */ #bx-soa-order .form-group { margin-bottom:20px !important; } #bx-soa-order .bx-soa .bx-soa-custom-label, #bx-soa-order .bx-soa .form-group > label:not(.error) { display:block; margin:0 0 7px !important; color:#596269 !important; font-size:12px !important; line-height:16px !important; font-weight:650 !important; letter-spacing:.015em; } #bx-soa-order input.form-control, #bx-soa-order select.form-control, #bx-soa-order textarea.form-control { padding:12px 14px !important; font-size:15px !important; line-height:20px !important; } #bx-soa-order textarea.form-control { min-height:112px;resize:vertical; } #bx-soa-order .has-error .form-control { border-color:#c95f5f !important; box-shadow:0 0 0 3px rgba(201,95,95,.1) !important; } #bx-soa-order .bx-soa-tooltip .tooltip-inner { color:#b64848 !important; font-weight:600; } /* Быстрые города как компактные chips. */ #bx-soa-order div[class*=bx-sls] .quick-locations .quick-location-tag { min-height:38px; display:inline-flex; align-items:center; justify-content:center; font-size:13px !important; font-weight:650; } /* Доставка и оплата — полноценные selectable cards. */ #bx-soa-order .bx-soa-pp-item-container { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } #bx-soa-order .bx-soa-pp-item-container .bx-soa-pp-company { display:grid !important; grid-template-columns:88px minmax(0,1fr); align-items:center; gap:15px; min-height:96px; margin:0 !important; padding:14px !important; background:#fff; border:1px solid #dfddd7 !important; border-radius:13px !important; transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease !important; } #bx-soa-order .bx-soa-pp-item-container .bx-soa-pp-company:hover { border-color:#b8a17e !important; box-shadow:0 12px 26px -22px rgba(38,55,70,.65); transform:translateY(-1px); } #bx-soa-order .bx-soa-pp-item-container .bx-soa-pp-company.bx-selected { background:#fbf8f2 !important; border-color:var(--checkout-bronze) !important; box-shadow:0 0 0 3px rgba(168,134,86,.1) !important; } #bx-soa-order .bx-soa-pp-item-container .bx-soa-pp-company-graf-container, #bx-soa-order .bx-soa-pp-company-graf-container .bx-soa-pp-company-image { display:block !important; width:88px !important; height:62px !important; } #bx-soa-order .bx-soa-pp-item-container .bx-soa-pp-company-smalltitle { display:block !important; padding:0 !important; color:#445058 !important; font-size:14px !important; font-weight:700 !important; } #bx-soa-order .bx-soa-pp-item-container .bx-soa-pp-delivery-cost { position:static !important; grid-column:2; margin-top:-34px; padding:0 !important; background:transparent !important; color:#80643f !important; border:0 !important; text-align:left !important; font-weight:700; } /* Детали выбранного способа. */ #bx-soa-order .bx-soa-pp-desc-container .bx-soa-pp-company { margin-top:14px !important; padding:20px !important; background:#f8f7f4 !important; border:1px solid #e4e1db !important; border-radius:13px !important; } /* Таблица товаров — визуально легче и читабельнее. */ #bx-soa-order #bx-soa-basket .bx-soa-item-table { border-collapse:separate !important; border-spacing:0 !important; } #bx-soa-order #bx-soa-basket .bx-soa-item-table .bx-soa-item-tr:first-child { background:#f5f4f0 !important; } #bx-soa-order #bx-soa-basket .bx-soa-item-table .bx-soa-item-tr:first-child .bx-soa-item-td { padding-top:11px !important; padding-bottom:11px !important; color:#7a8184 !important; font-size:11px !important; font-weight:700; text-transform:uppercase; letter-spacing:.045em; } #bx-soa-order #bx-soa-basket .bx-soa-item-table .bx-soa-item-tr:not(:first-child) .bx-soa-item-td { padding-top:24px !important; padding-bottom:24px !important; } #bx-soa-order #bx-soa-basket .bx-soa-item-imgcontainer { border:1px solid #e7e4de !important; box-shadow:0 8px 18px -16px rgba(24,26,27,.6); } #bx-soa-order #bx-soa-basket .bx-soa-item-title a { font-size:14px !important; line-height:20px !important; font-weight:650 !important; } /* Промокод — одно цельное поле. */ #bx-soa-order .bx-soa-coupon { border-color:#e8e5df !important; } #bx-soa-order .bx-soa-coupon-input { width:min(100%,340px) !important; border-radius:10px !important; } #bx-soa-order .bx-soa-coupon-input input.form-control { padding-right:58px !important; } /* Итог: sticky card по паттерну 21st.dev Payment Summary. */ #bx-soa-order .bx-soa-sidebar { position:relative; } #bx-soa-order .bx-soa-cart-total { position:sticky !important; top:24px; z-index:5; } #bx-soa-order .bx-soa-cart-total .change_basket { margin:-2px -26px 28px !important; padding:2px 26px 24px !important; font-size:17px !important; font-weight:750 !important; } #bx-soa-order .bx-soa-cart-total .bx-soa-cart-total-line { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-top:10px !important; font-size:13px !important; line-height:18px !important; } #bx-soa-order .bx-soa-cart-total .bx-soa-cart-total-line .bx-soa-cart-t, #bx-soa-order .bx-soa-cart-total .bx-soa-cart-total-line .bx-soa-cart-d { float:none !important; width:auto !important; } #bx-soa-order .bx-soa-cart-total .bx-soa-cart-total-line .bx-soa-cart-d { margin-left:auto; white-space:nowrap; font-weight:650; } #bx-soa-order .bx-soa-cart-total .bx-soa-cart-total-line-total { margin-top:24px !important; padding-top:20px !important; border-top:1px dashed #d9d5ce !important; } #bx-soa-order .bx-soa-cart-total-line-total .bx-soa-cart-t, #bx-soa-order .bx-soa-cart-total-line-total .bx-soa-cart-d { font-size:20px !important; line-height:26px !important; } #bx-soa-order .bx-soa-cart-total-button-container .btn { width:100%; min-height:52px; font-size:15px !important; font-weight:750 !important; } /* Согласие с правилами. */ #bx-soa-order .licence_block { max-width:760px; text-align:left; } #bx-soa-order .licence_block label { color:#525c62 !important; font-size:13px !important; line-height:19px !important; } @media (max-width:991px) { body #bx-soa-order-form { padding:18px !important; } #bx-soa-order .bx-soa-cart-total { position:static !important; } #bx-soa-order .bx-soa-pp-item-container { grid-template-columns:1fr; } } @media (max-width:600px) { body #bx-soa-order-form { padding:10px !important; border-radius:15px; } #bx-soa-order .bx-soa-section .bx-soa-section-title-container { min-height:74px; } #bx-soa-order .bx-soa-section .bx-soa-section-title { font-size:18px !important; } #bx-soa-order .bx-soa-section .bx-soa-section-content { padding:22px 16px !important; } #bx-soa-order .bx-soa-pp-item-container .bx-soa-pp-company { grid-template-columns:72px minmax(0,1fr); } #bx-soa-order .bx-soa-pp-item-container .bx-soa-pp-company-graf-container, #bx-soa-order .bx-soa-pp-company-graf-container .bx-soa-pp-company-image { width:72px !important; } } /* ========================================================================== 30. DELIVERY & PAYMENT — список слева, описание выбранного способа справа ========================================================================== */ /* На широком экране возвращаем две смысловые колонки. */ #bx-soa-order #bx-soa-delivery .bx-soa-pp > .row, #bx-soa-order #bx-soa-paysystem .bx-soa-pp > .row { display:grid !important; grid-template-columns:minmax(360px, 58%) minmax(300px, 42%) !important; align-items:start !important; column-gap:24px !important; margin-left:0 !important; margin-right:0 !important; } #bx-soa-order #bx-soa-delivery .bx-soa-pp > .row > [class*="col-sm-"], #bx-soa-order #bx-soa-paysystem .bx-soa-pp > .row > [class*="col-sm-"] { float:none !important; width:auto !important; max-width:none !important; min-width:0 !important; padding-left:0 !important; padding-right:0 !important; } /* Варианты остаются вертикальным списком в левой колонке. */ #bx-soa-order #bx-soa-delivery .bx-soa-pp-item-container, #bx-soa-order #bx-soa-paysystem .bx-soa-pp-item-container { display:grid !important; grid-template-columns:minmax(0,1fr) !important; gap:12px !important; width:100% !important; } #bx-soa-order #bx-soa-delivery .bx-soa-pp-item-container .bx-soa-pp-company, #bx-soa-order #bx-soa-paysystem .bx-soa-pp-item-container .bx-soa-pp-company { grid-template-columns:96px minmax(0,1fr) auto !important; min-height:104px !important; height:auto !important; padding:14px 16px !important; } #bx-soa-order #bx-soa-delivery .bx-soa-pp-company-smalltitle, #bx-soa-order #bx-soa-paysystem .bx-soa-pp-company-smalltitle { min-width:0 !important; height:auto !important; white-space:normal !important; overflow:visible !important; text-overflow:clip !important; } /* Детальная карточка выбранного способа занимает правую колонку. */ #bx-soa-order #bx-soa-delivery .bx-soa-pp-desc-container, #bx-soa-order #bx-soa-paysystem .bx-soa-pp-desc-container { width:100% !important; max-width:none !important; margin:0 !important; padding:0 !important; } #bx-soa-order #bx-soa-delivery .bx-soa-pp-desc-container .bx-soa-pp-company, #bx-soa-order #bx-soa-paysystem .bx-soa-pp-desc-container .bx-soa-pp-company { display:grid !important; grid-template-columns:112px minmax(0,1fr) !important; grid-template-rows:auto auto !important; align-items:start !important; gap:18px 20px !important; width:100% !important; min-height:100% !important; padding:22px !important; } #bx-soa-order #bx-soa-delivery .bx-soa-pp-desc-container .bx-soa-pp-company-desc, #bx-soa-order #bx-soa-paysystem .bx-soa-pp-desc-container .bx-soa-pp-company-desc { min-width:0 !important; white-space:normal !important; overflow:visible !important; overflow-wrap:anywhere; } /* На планшете и телефоне описание переносится под список без сжатия текста. */ @media (max-width:900px) { #bx-soa-order #bx-soa-delivery .bx-soa-pp > .row, #bx-soa-order #bx-soa-paysystem .bx-soa-pp > .row { grid-template-columns:minmax(0,1fr) !important; row-gap:18px !important; } } @media (max-width:600px) { #bx-soa-order #bx-soa-delivery .bx-soa-pp-item-container .bx-soa-pp-company, #bx-soa-order #bx-soa-paysystem .bx-soa-pp-item-container .bx-soa-pp-company { grid-template-columns:76px minmax(0,1fr) !important; } #bx-soa-order #bx-soa-delivery .bx-soa-pp-desc-container .bx-soa-pp-company, #bx-soa-order #bx-soa-paysystem .bx-soa-pp-desc-container .bx-soa-pp-company { display:block !important; padding:18px !important; } } @media (prefers-reduced-motion:reduce) { #bx-soa-order .bx-soa-section.bx-selected .bx-soa-section-content { animation:none !important; } } /* ========================================================================== 28. CHECKOUT HOTFIX — images, business order, final CTA ========================================================================== */ /* Не сбрасываем штатные background-image Bitrix у логотипов и товаров. */ #bx-soa-order .bx-soa-pp-company-graf-container .bx-soa-pp-company-image { background-color:#fff !important; background-position:center center !important; background-repeat:no-repeat !important; background-size:contain !important; } #bx-soa-order #bx-soa-basket .bx-soa-item-imgcontainer { background-color:#f7f7f5 !important; background-position:center center !important; background-repeat:no-repeat !important; background-size:contain !important; } #bx-soa-order .bx-soa-pp-desc-container .bx-soa-pp-company .bx-soa-pp-company-image { background-color:#fff !important; background-position:center center !important; background-repeat:no-repeat !important; background-size:contain !important; } /* Бизнес-порядок шагов: Регион → Доставка → Оплата → Покупатель → Товары. */ #bx-soa-order #bx-soa-region .bx-soa-section-title:before { content:"01" !important; } #bx-soa-order #bx-soa-delivery .bx-soa-section-title:before { content:"02" !important; } #bx-soa-order #bx-soa-paysystem .bx-soa-section-title:before { content:"03" !important; } #bx-soa-order #bx-soa-properties .bx-soa-section-title:before { content:"04" !important; } #bx-soa-order #bx-soa-basket .bx-soa-section-title:before { content:"05" !important; } #bx-soa-order .bx-soa-section.bx-step-completed .bx-soa-section-title:before { content:"✓" !important; } /* Нижняя CTA — одна большая кнопка без второй тёмной подложки. */ #bx-soa-order #bx-soa-orderSave, #bx-soa-order .bx_soa_orderSave { display:block !important; width:100% !important; max-width:none !important; min-height:0 !important; margin:24px 0 0 !important; padding:0 !important; background:transparent !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; } #bx-soa-order #bx-soa-orderSave a, #bx-soa-order #bx-soa-orderSave .btn, #bx-soa-order .bx_soa_orderSave a, #bx-soa-order .bx_soa_orderSave .btn { display:flex !important; align-items:center; justify-content:center; float:none !important; width:100% !important; max-width:none !important; min-height:58px !important; margin:0 !important; padding:16px 28px !important; background:var(--checkout-ink) !important; color:#fff !important; border:1px solid var(--checkout-ink) !important; border-radius:14px !important; box-shadow:0 16px 30px -20px rgba(38,55,70,.75) !important; font-size:17px !important; line-height:24px !important; font-weight:750 !important; text-align:center; } #bx-soa-order #bx-soa-orderSave a:hover, #bx-soa-order #bx-soa-orderSave .btn:hover, #bx-soa-order .bx_soa_orderSave a:hover, #bx-soa-order .bx_soa_orderSave .btn:hover { background:var(--checkout-bronze) !important; border-color:var(--checkout-bronze) !important; transform:translateY(-2px); box-shadow:0 18px 32px -18px rgba(109,82,48,.6) !important; } /* ========================================================================== 29. DELIVERY & PAYMENT — вертикальная компоновка ========================================================================== */ /* Список вариантов и описание выбранного варианта идут друг под другом. */ #bx-soa-order #bx-soa-delivery .bx-soa-pp > .row > [class*="col-sm-"], #bx-soa-order #bx-soa-paysystem .bx-soa-pp > .row > [class*="col-sm-"] { float:none !important; width:100% !important; max-width:100% !important; min-height:0 !important; padding-left:15px !important; padding-right:15px !important; } #bx-soa-order #bx-soa-delivery .bx-soa-pp-item-container, #bx-soa-order #bx-soa-paysystem .bx-soa-pp-item-container { display:grid !important; grid-template-columns:1fr !important; gap:12px !important; width:100% !important; } /* Каждый вариант занимает отдельную горизонтальную карточку. */ #bx-soa-order #bx-soa-delivery .bx-soa-pp-item-container .bx-soa-pp-company, #bx-soa-order #bx-soa-paysystem .bx-soa-pp-item-container .bx-soa-pp-company { display:grid !important; grid-template-columns:104px minmax(0,1fr) auto !important; grid-template-rows:auto !important; align-items:center !important; column-gap:18px !important; width:100% !important; min-height:94px !important; padding:14px 18px !important; } #bx-soa-order #bx-soa-delivery .bx-soa-pp-company-graf-container, #bx-soa-order #bx-soa-paysystem .bx-soa-pp-company-graf-container { grid-column:1 !important; grid-row:1 !important; } #bx-soa-order #bx-soa-delivery .bx-soa-pp-company-smalltitle, #bx-soa-order #bx-soa-paysystem .bx-soa-pp-company-smalltitle { grid-column:2 !important; grid-row:1 !important; width:auto !important; max-width:none !important; padding:0 !important; font-size:15px !important; line-height:21px !important; white-space:normal !important; overflow-wrap:anywhere; } #bx-soa-order #bx-soa-delivery .bx-soa-pp-delivery-cost, #bx-soa-order #bx-soa-paysystem .bx-soa-pp-delivery-cost { position:static !important; grid-column:3 !important; grid-row:1 !important; margin:0 !important; padding:0 !important; white-space:nowrap; text-align:right !important; } /* Описание выбранного способа располагается ниже и использует всю ширину. */ #bx-soa-order #bx-soa-delivery .bx-soa-pp-desc-container, #bx-soa-order #bx-soa-paysystem .bx-soa-pp-desc-container { width:100% !important; max-width:100% !important; margin-top:14px !important; padding-top:0 !important; } #bx-soa-order #bx-soa-delivery .bx-soa-pp-desc-container .bx-soa-pp-company, #bx-soa-order #bx-soa-paysystem .bx-soa-pp-desc-container .bx-soa-pp-company { display:grid; grid-template-columns:120px minmax(0,1fr); gap:22px; width:100% !important; padding:22px !important; } #bx-soa-order #bx-soa-delivery .bx-soa-pp-company-desc, #bx-soa-order #bx-soa-paysystem .bx-soa-pp-company-desc { font-size:14px !important; line-height:21px !important; overflow-wrap:anywhere; } @media (max-width:600px) { #bx-soa-order #bx-soa-delivery .bx-soa-pp-item-container .bx-soa-pp-company, #bx-soa-order #bx-soa-paysystem .bx-soa-pp-item-container .bx-soa-pp-company { grid-template-columns:76px minmax(0,1fr) !important; gap:12px !important; padding:12px !important; } #bx-soa-order #bx-soa-delivery .bx-soa-pp-delivery-cost, #bx-soa-order #bx-soa-paysystem .bx-soa-pp-delivery-cost { grid-column:2 !important; grid-row:2 !important; text-align:left !important; } #bx-soa-order #bx-soa-delivery .bx-soa-pp-desc-container .bx-soa-pp-company, #bx-soa-order #bx-soa-paysystem .bx-soa-pp-desc-container .bx-soa-pp-company { display:block; padding:18px !important; } } /* ========================================================================== 31. DELIVERY & PAYMENT — итоговая двухколоночная раскладка ========================================================================== */ @media (min-width:901px) { #bx-soa-order #bx-soa-delivery .bx-soa-pp > .row, #bx-soa-order #bx-soa-paysystem .bx-soa-pp > .row { display:grid !important; grid-template-columns:minmax(360px, 58%) minmax(300px, 42%) !important; align-items:start !important; column-gap:24px !important; margin-left:0 !important; margin-right:0 !important; } #bx-soa-order #bx-soa-delivery .bx-soa-pp > .row > [class*="col-sm-"], #bx-soa-order #bx-soa-paysystem .bx-soa-pp > .row > [class*="col-sm-"] { float:none !important; width:auto !important; max-width:none !important; min-width:0 !important; padding-left:0 !important; padding-right:0 !important; } #bx-soa-order #bx-soa-delivery .bx-soa-pp-desc-container, #bx-soa-order #bx-soa-paysystem .bx-soa-pp-desc-container { width:100% !important; max-width:none !important; margin:0 !important; padding:0 !important; } } #bx-soa-order #bx-soa-delivery .bx-soa-pp-item-container, #bx-soa-order #bx-soa-paysystem .bx-soa-pp-item-container { display:grid !important; grid-template-columns:minmax(0,1fr) !important; gap:12px !important; } #bx-soa-order #bx-soa-delivery .bx-soa-pp-item-container .bx-soa-pp-company, #bx-soa-order #bx-soa-paysystem .bx-soa-pp-item-container .bx-soa-pp-company { grid-template-columns:96px minmax(0,1fr) auto !important; min-height:104px !important; height:auto !important; padding:14px 16px !important; } #bx-soa-order #bx-soa-delivery .bx-soa-pp-company-smalltitle, #bx-soa-order #bx-soa-paysystem .bx-soa-pp-company-smalltitle { min-width:0 !important; height:auto !important; white-space:normal !important; overflow:visible !important; text-overflow:clip !important; } #bx-soa-order #bx-soa-delivery .bx-soa-pp-desc-container .bx-soa-pp-company, #bx-soa-order #bx-soa-paysystem .bx-soa-pp-desc-container .bx-soa-pp-company { display:grid !important; grid-template-columns:112px minmax(0,1fr) !important; grid-template-rows:auto auto !important; align-items:start !important; gap:18px 20px !important; width:100% !important; padding:22px !important; } #bx-soa-order #bx-soa-delivery .bx-soa-pp-desc-container .bx-soa-pp-company-desc, #bx-soa-order #bx-soa-paysystem .bx-soa-pp-desc-container .bx-soa-pp-company-desc { min-width:0 !important; white-space:normal !important; overflow:visible !important; overflow-wrap:anywhere; } @media (max-width:900px) { #bx-soa-order #bx-soa-delivery .bx-soa-pp > .row, #bx-soa-order #bx-soa-paysystem .bx-soa-pp > .row { display:grid !important; grid-template-columns:minmax(0,1fr) !important; row-gap:18px !important; margin-left:0 !important; margin-right:0 !important; } #bx-soa-order #bx-soa-delivery .bx-soa-pp > .row > [class*="col-sm-"], #bx-soa-order #bx-soa-paysystem .bx-soa-pp > .row > [class*="col-sm-"] { float:none !important; width:100% !important; max-width:100% !important; padding-left:0 !important; padding-right:0 !important; } } /* Premium header final cascade lock (kept last intentionally). */ @media (min-width:99999px) { body .wrapper #header .catalog_menu { left:0 !important; width:100% !important; margin:0 !important; background:#fff !important; border-top:1px solid rgba(20,24,29,.08) !important; } body .wrapper #header .catalog_menu > .wrapper_inner { width:100% !important; max-width:1480px !important; padding-left:32px !important; padding-right:32px !important; background:transparent !important; border-bottom:0 !important; } body #header .catalog_menu .catalog_menu_ext .menu_top_block > li.catalog, body #header .catalog_menu .catalog_menu_ext .menu_top_block > li.catalog.current, body #header .catalog_menu .catalog_menu_ext .menu_top_block > li.catalog:hover, body #header .catalog_menu .catalog_menu_ext .menu_top_block > li.catalog > a, body #header .catalog_menu .catalog_menu_ext .menu_top_block > li.catalog.current > a, body #header .catalog_menu .catalog_menu_ext .menu_top_block > li.catalog:hover > a { background:transparent !important; color:#171a1f !important; border-color:transparent !important; } body #header .catalog_menu .menu_top_block > li + li { border-left:0 !important; } } /* Checkout final cascade lock: 50/50 choice and selected description. */ @media (min-width:901px) { body #bx-soa-order #bx-soa-delivery .bx-soa-pp.row, body #bx-soa-order #bx-soa-paysystem .bx-soa-pp.row, body #bx-soa-order #bx-soa-delivery .bx-soa-pp, body #bx-soa-order #bx-soa-paysystem .bx-soa-pp { display:grid !important; grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important; align-items:start !important; gap:28px !important; width:100% !important; margin-left:0 !important; margin-right:0 !important; } body #bx-soa-order #bx-soa-delivery .bx-soa-pp > .bx-soa-pp-item-container, body #bx-soa-order #bx-soa-paysystem .bx-soa-pp > .bx-soa-pp-item-container, body #bx-soa-order #bx-soa-delivery .bx-soa-pp > .bx-soa-pp-desc-container, body #bx-soa-order #bx-soa-paysystem .bx-soa-pp > .bx-soa-pp-desc-container { float:none !important; width:100% !important; max-width:none !important; min-width:0 !important; margin:0 !important; padding-left:0 !important; padding-right:0 !important; } } body #bx-soa-order #bx-soa-delivery .bx-soa-pp-item-container, body #bx-soa-order #bx-soa-paysystem .bx-soa-pp-item-container { display:flex !important; flex-direction:column !important; align-items:stretch !important; gap:14px !important; } body #bx-soa-order #bx-soa-delivery .bx-soa-pp-item-container > .bx-soa-pp-company, body #bx-soa-order #bx-soa-paysystem .bx-soa-pp-item-container > .bx-soa-pp-company { display:grid !important; grid-template-columns:96px minmax(0,1fr) !important; grid-template-rows:auto auto !important; align-items:center !important; gap:6px 18px !important; width:100% !important; min-height:112px !important; height:auto !important; margin:0 !important; padding:16px !important; } body #bx-soa-order #bx-soa-delivery .bx-soa-pp-item-container .bx-soa-pp-company-graf-container, body #bx-soa-order #bx-soa-paysystem .bx-soa-pp-item-container .bx-soa-pp-company-graf-container { grid-column:1 !important; grid-row:1 / span 2 !important; } body #bx-soa-order #bx-soa-delivery .bx-soa-pp-item-container .bx-soa-pp-company-smalltitle, body #bx-soa-order #bx-soa-paysystem .bx-soa-pp-item-container .bx-soa-pp-company-smalltitle { display:block !important; grid-column:2 !important; grid-row:1 !important; width:100% !important; padding:0 !important; white-space:normal !important; overflow:visible !important; text-overflow:clip !important; } body #bx-soa-order #bx-soa-delivery .bx-soa-pp-item-container .bx-soa-pp-delivery-cost, body #bx-soa-order #bx-soa-paysystem .bx-soa-pp-item-container .bx-soa-pp-delivery-cost { position:static !important; display:block !important; grid-column:2 !important; grid-row:2 !important; width:auto !important; margin:0 !important; padding:0 !important; border:0 !important; background:transparent !important; text-align:left !important; white-space:normal !important; } body #bx-soa-order #bx-soa-delivery .bx-soa-pp-desc-container, body #bx-soa-order #bx-soa-paysystem .bx-soa-pp-desc-container { display:block !important; align-self:start !important; margin:0 !important; padding-top:0 !important; } body #bx-soa-order #bx-soa-delivery .bx-soa-pp-desc-container > .bx-soa-pp-company, body #bx-soa-order #bx-soa-paysystem .bx-soa-pp-desc-container > .bx-soa-pp-company { display:block !important; width:100% !important; min-height:240px !important; margin:0 !important; padding:24px !important; } @media (max-width:900px) { body #bx-soa-order #bx-soa-delivery .bx-soa-pp, body #bx-soa-order #bx-soa-paysystem .bx-soa-pp { display:flex !important; flex-direction:column !important; gap:18px !important; margin-left:0 !important; margin-right:0 !important; } body #bx-soa-order #bx-soa-delivery .bx-soa-pp > .bx-soa-pp-item-container, body #bx-soa-order #bx-soa-paysystem .bx-soa-pp > .bx-soa-pp-item-container, body #bx-soa-order #bx-soa-delivery .bx-soa-pp > .bx-soa-pp-desc-container, body #bx-soa-order #bx-soa-paysystem .bx-soa-pp > .bx-soa-pp-desc-container { float:none !important; width:100% !important; max-width:100% !important; margin:0 !important; padding-left:0 !important; padding-right:0 !important; } } /* ROLLBACK: отмена экспериментальной раскладки checkout 50/50. */ body #bx-soa-order #bx-soa-delivery .bx-soa-pp, body #bx-soa-order #bx-soa-paysystem .bx-soa-pp { display:block !important; width:100% !important; margin-left:0 !important; margin-right:0 !important; } body #bx-soa-order #bx-soa-delivery .bx-soa-pp > .bx-soa-pp-item-container, body #bx-soa-order #bx-soa-paysystem .bx-soa-pp > .bx-soa-pp-item-container, body #bx-soa-order #bx-soa-delivery .bx-soa-pp > .bx-soa-pp-desc-container, body #bx-soa-order #bx-soa-paysystem .bx-soa-pp > .bx-soa-pp-desc-container { float:none !important; display:block !important; width:100% !important; max-width:100% !important; margin-left:0 !important; margin-right:0 !important; padding-left:15px !important; padding-right:15px !important; } body #bx-soa-order #bx-soa-delivery .bx-soa-pp > .bx-soa-pp-item-container, body #bx-soa-order #bx-soa-paysystem .bx-soa-pp > .bx-soa-pp-item-container { display:grid !important; grid-template-columns:minmax(0,1fr) !important; gap:12px !important; } body #bx-soa-order #bx-soa-delivery .bx-soa-pp-item-container > .bx-soa-pp-company, body #bx-soa-order #bx-soa-paysystem .bx-soa-pp-item-container > .bx-soa-pp-company { display:grid !important; grid-template-columns:104px minmax(0,1fr) auto !important; grid-template-rows:auto !important; align-items:center !important; column-gap:18px !important; width:100% !important; min-height:94px !important; height:auto !important; margin:0 !important; padding:14px 18px !important; } body #bx-soa-order #bx-soa-delivery .bx-soa-pp-item-container .bx-soa-pp-company-graf-container, body #bx-soa-order #bx-soa-paysystem .bx-soa-pp-item-container .bx-soa-pp-company-graf-container { grid-column:1 !important; grid-row:1 !important; } body #bx-soa-order #bx-soa-delivery .bx-soa-pp-item-container .bx-soa-pp-company-smalltitle, body #bx-soa-order #bx-soa-paysystem .bx-soa-pp-item-container .bx-soa-pp-company-smalltitle { display:block !important; grid-column:2 !important; grid-row:1 !important; align-self:center !important; width:auto !important; padding:0 !important; white-space:normal !important; overflow:visible !important; } body #bx-soa-order #bx-soa-delivery .bx-soa-pp-item-container .bx-soa-pp-delivery-cost, body #bx-soa-order #bx-soa-paysystem .bx-soa-pp-item-container .bx-soa-pp-delivery-cost { position:static !important; display:block !important; grid-column:3 !important; grid-row:1 !important; align-self:center !important; width:auto !important; margin:0 !important; padding:0 !important; border:0 !important; background:transparent !important; text-align:right !important; white-space:nowrap !important; } body #bx-soa-order #bx-soa-delivery .bx-soa-pp > .bx-soa-pp-desc-container, body #bx-soa-order #bx-soa-paysystem .bx-soa-pp > .bx-soa-pp-desc-container { margin-top:14px !important; } body #bx-soa-order #bx-soa-delivery .bx-soa-pp-desc-container > .bx-soa-pp-company, body #bx-soa-order #bx-soa-paysystem .bx-soa-pp-desc-container > .bx-soa-pp-company { display:grid !important; grid-template-columns:120px minmax(0,1fr) !important; gap:22px !important; width:100% !important; min-height:0 !important; margin:0 !important; padding:22px !important; } @media (max-width:600px) { body #bx-soa-order #bx-soa-delivery .bx-soa-pp-item-container > .bx-soa-pp-company, body #bx-soa-order #bx-soa-paysystem .bx-soa-pp-item-container > .bx-soa-pp-company { grid-template-columns:76px minmax(0,1fr) !important; grid-template-rows:auto auto !important; padding:12px !important; } body #bx-soa-order #bx-soa-delivery .bx-soa-pp-item-container .bx-soa-pp-company-graf-container, body #bx-soa-order #bx-soa-paysystem .bx-soa-pp-item-container .bx-soa-pp-company-graf-container { grid-row:1 / span 2 !important; } body #bx-soa-order #bx-soa-delivery .bx-soa-pp-item-container .bx-soa-pp-delivery-cost, body #bx-soa-order #bx-soa-paysystem .bx-soa-pp-item-container .bx-soa-pp-delivery-cost { grid-column:2 !important; grid-row:2 !important; text-align:left !important; } body #bx-soa-order #bx-soa-delivery .bx-soa-pp-desc-container > .bx-soa-pp-company, body #bx-soa-order #bx-soa-paysystem .bx-soa-pp-desc-container > .bx-soa-pp-company { display:block !important; padding:18px !important; } } /* ========================================================================== CHECKOUT CLASSIC — штатное расположение доставки и оплаты как в Aspro ========================================================================== */ @media (min-width:901px) { body #bx-soa-order #bx-soa-delivery .bx-soa-pp.row, body #bx-soa-order #bx-soa-paysystem .bx-soa-pp.row, body #bx-soa-order #bx-soa-delivery .bx-soa-pp, body #bx-soa-order #bx-soa-paysystem .bx-soa-pp { display:grid !important; grid-template-columns:minmax(0,7fr) minmax(0,5fr) !important; align-items:start !important; gap:30px !important; width:100% !important; margin:0 !important; } body #bx-soa-order #bx-soa-delivery .bx-soa-pp > .bx-soa-pp-item-container, body #bx-soa-order #bx-soa-paysystem .bx-soa-pp > .bx-soa-pp-item-container, body #bx-soa-order #bx-soa-delivery .bx-soa-pp > .bx-soa-pp-desc-container, body #bx-soa-order #bx-soa-paysystem .bx-soa-pp > .bx-soa-pp-desc-container { float:none !important; display:block !important; width:100% !important; max-width:none !important; min-width:0 !important; margin:0 !important; padding:0 !important; } } /* Слева: штатный вертикальный список способов. */ body #bx-soa-order #bx-soa-delivery .bx-soa-pp-item-container, body #bx-soa-order #bx-soa-paysystem .bx-soa-pp-item-container { display:flex !important; flex-direction:column !important; align-items:stretch !important; gap:16px !important; } body #bx-soa-order #bx-soa-delivery .bx-soa-pp-item-container > .bx-soa-pp-company, body #bx-soa-order #bx-soa-paysystem .bx-soa-pp-item-container > .bx-soa-pp-company { display:grid !important; grid-template-columns:132px minmax(0,1fr) !important; grid-template-rows:auto auto !important; align-items:center !important; gap:0 22px !important; width:100% !important; min-height:104px !important; height:auto !important; margin:0 !important; padding:0 !important; background:transparent !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; transform:none !important; } body #bx-soa-order #bx-soa-delivery .bx-soa-pp-item-container .bx-soa-pp-company-graf-container, body #bx-soa-order #bx-soa-paysystem .bx-soa-pp-item-container .bx-soa-pp-company-graf-container { display:block !important; grid-column:1 !important; grid-row:1 !important; width:132px !important; height:82px !important; border:1px solid #dfddd7 !important; border-radius:10px 10px 0 0 !important; background:#fff !important; } body #bx-soa-order #bx-soa-delivery .bx-soa-pp-item-container .bx-soa-pp-company-image, body #bx-soa-order #bx-soa-paysystem .bx-soa-pp-item-container .bx-soa-pp-company-image { width:130px !important; height:80px !important; border:0 !important; background-color:#fff !important; background-position:center !important; background-repeat:no-repeat !important; background-size:contain !important; } body #bx-soa-order #bx-soa-delivery .bx-soa-pp-item-container .bx-soa-pp-company-smalltitle, body #bx-soa-order #bx-soa-paysystem .bx-soa-pp-item-container .bx-soa-pp-company-smalltitle { display:block !important; grid-column:2 !important; grid-row:1 / span 2 !important; align-self:center !important; width:100% !important; padding:0 !important; color:#445058 !important; font-size:15px !important; line-height:21px !important; font-weight:700 !important; white-space:normal !important; overflow:visible !important; text-overflow:clip !important; } body #bx-soa-order #bx-soa-delivery .bx-soa-pp-item-container .bx-soa-pp-delivery-cost, body #bx-soa-order #bx-soa-paysystem .bx-soa-pp-item-container .bx-soa-pp-delivery-cost { position:static !important; display:flex !important; grid-column:1 !important; grid-row:2 !important; align-items:center !important; justify-content:center !important; width:132px !important; min-height:28px !important; margin:0 !important; padding:3px 8px !important; background:#f8f7f4 !important; color:#263746 !important; border:1px solid #dfddd7 !important; border-top:0 !important; border-radius:0 0 10px 10px !important; font-size:13px !important; line-height:20px !important; font-weight:650 !important; text-align:center !important; white-space:nowrap !important; } body #bx-soa-order #bx-soa-paysystem .bx-soa-pp-item-container .bx-soa-pp-company:not(:has(.bx-soa-pp-delivery-cost)) .bx-soa-pp-company-graf-container { grid-row:1 / span 2 !important; border-radius:10px !important; } /* Справа: отдельное описание выбранного способа. */ body #bx-soa-order #bx-soa-delivery .bx-soa-pp > .bx-soa-pp-desc-container, body #bx-soa-order #bx-soa-paysystem .bx-soa-pp > .bx-soa-pp-desc-container { align-self:start !important; margin:0 !important; padding:0 !important; } body #bx-soa-order #bx-soa-delivery .bx-soa-pp-desc-container > .bx-soa-pp-company, body #bx-soa-order #bx-soa-paysystem .bx-soa-pp-desc-container > .bx-soa-pp-company { display:block !important; width:100% !important; min-height:300px !important; margin:0 !important; padding:24px !important; background:#f8f7f4 !important; border:1px solid #dfddd7 !important; border-top:2px solid #a88656 !important; border-radius:0 0 13px 13px !important; box-shadow:none !important; } body #bx-soa-order #bx-soa-delivery .bx-soa-pp-desc-container .bx-soa-pp-company-desc, body #bx-soa-order #bx-soa-paysystem .bx-soa-pp-desc-container .bx-soa-pp-company-desc { width:100% !important; padding-top:16px !important; font-size:14px !important; line-height:22px !important; white-space:normal !important; overflow:visible !important; } /* Убираем красный артефакт под полем промокода. */ body #bx-soa-order .bx-soa-coupon .bx-soa-coupon-input { overflow:hidden !important; isolation:isolate; } body #bx-soa-order .bx-soa-coupon .bx-soa-tooltip, body #bx-soa-order .bx-soa-coupon .tooltip, body #bx-soa-order .bx-soa-coupon .tooltip-arrow, body #bx-soa-order .bx-soa-coupon .tooltip:before, body #bx-soa-order .bx-soa-coupon .tooltip:after { background:transparent !important; border:0 !important; box-shadow:none !important; } body #bx-soa-order .bx-soa-coupon .tooltip-arrow, body #bx-soa-order .bx-soa-coupon .tooltip-inner:empty { display:none !important; } @media (max-width:900px) { body #bx-soa-order #bx-soa-delivery .bx-soa-pp, body #bx-soa-order #bx-soa-paysystem .bx-soa-pp { display:flex !important; flex-direction:column !important; gap:20px !important; margin:0 !important; } body #bx-soa-order #bx-soa-delivery .bx-soa-pp > .bx-soa-pp-item-container, body #bx-soa-order #bx-soa-paysystem .bx-soa-pp > .bx-soa-pp-item-container, body #bx-soa-order #bx-soa-delivery .bx-soa-pp > .bx-soa-pp-desc-container, body #bx-soa-order #bx-soa-paysystem .bx-soa-pp > .bx-soa-pp-desc-container { float:none !important; width:100% !important; max-width:100% !important; margin:0 !important; padding:0 !important; } } @media (max-width:520px) { body #bx-soa-order #bx-soa-delivery .bx-soa-pp-item-container > .bx-soa-pp-company, body #bx-soa-order #bx-soa-paysystem .bx-soa-pp-item-container > .bx-soa-pp-company { grid-template-columns:92px minmax(0,1fr) !important; gap:0 14px !important; } body #bx-soa-order #bx-soa-delivery .bx-soa-pp-item-container .bx-soa-pp-company-graf-container, body #bx-soa-order #bx-soa-paysystem .bx-soa-pp-item-container .bx-soa-pp-company-graf-container, body #bx-soa-order #bx-soa-delivery .bx-soa-pp-item-container .bx-soa-pp-company-image, body #bx-soa-order #bx-soa-paysystem .bx-soa-pp-item-container .bx-soa-pp-company-image, body #bx-soa-order #bx-soa-delivery .bx-soa-pp-item-container .bx-soa-pp-delivery-cost, body #bx-soa-order #bx-soa-paysystem .bx-soa-pp-item-container .bx-soa-pp-delivery-cost { width:92px !important; } } /* ========================================================================== FULL-WIDTH PREMIUM LAYOUT — широкая композиция в духе Apple / Tesla ========================================================================== */ :root { --akva-screen-gutter:clamp(20px,3.35vw,64px); --akva-screen-gutter-mobile:16px; } html, body { width:100% !important; max-width:none !important; overflow-x:hidden; } body .wrapper, body .wrapper.has_menu, body .wrapper.basket_fly, body .wrapper.basket_normal { width:100% !important; max-width:none !important; min-width:0 !important; margin-left:0 !important; margin-right:0 !important; float:none !important; } /* Все основные контейнеры занимают ширину окна с единым адаптивным полем. */ body .wrapper > .wrapper_inner, body .wraps > .wrapper_inner, body .header_wrap .wrapper_inner, body .header_wrap #header > .wrapper_inner, body #header .catalog_menu > .wrapper_inner, body #footer > .footer_inner > .wrapper_inner, body .wrapper_inner.wides, body .wrapper_inner.wides_big { box-sizing:border-box !important; width:100% !important; max-width:none !important; margin-left:auto !important; margin-right:auto !important; padding-left:var(--akva-screen-gutter) !important; padding-right:var(--akva-screen-gutter) !important; } /* Шапка и навигация — полноценные горизонтальные полосы без внешних полей. */ body .header_wrap, body .header_wrap #header, body .wrapper #header .catalog_menu, body #header .catalog_menu { width:100% !important; max-width:none !important; left:0 !important; right:0 !important; margin-left:0 !important; margin-right:0 !important; } body .wrapper #header .catalog_menu > .wrapper_inner, body #header .catalog_menu > .wrapper_inner { width:100% !important; max-width:none !important; padding-left:var(--akva-screen-gutter) !important; padding-right:var(--akva-screen-gutter) !important; } /* Основная область больше не наследует старую фиксированную ширину Optimus. */ body .wraps, body .wraps .middle, body .wraps .right_block, body .middle > .container, body #content { box-sizing:border-box !important; width:100% !important; max-width:none !important; } body .wraps .right_block, body .wraps .middle { float:none !important; margin-left:0 !important; margin-right:0 !important; } /* Футер продолжает широкую сетку сайта. */ body #footer, body #footer .footer_inner { width:100% !important; max-width:none !important; } /* Широкие витрины и таблицы используют доступное пространство. */ body .catalog_section_list, body .catalog_page, body .catalog_detail, body .basket_wrapp, body #bx-soa-order-form, body #bx-soa-order { box-sizing:border-box !important; max-width:none !important; } @media (min-width:1921px) { :root { --akva-screen-gutter:clamp(64px,4vw,96px); } } @media (max-width:768px) { :root { --akva-screen-gutter:var(--akva-screen-gutter-mobile); } body .wrapper > .wrapper_inner, body .wraps > .wrapper_inner, body .header_wrap .wrapper_inner, body .header_wrap #header > .wrapper_inner, body #header .catalog_menu > .wrapper_inner, body #footer > .footer_inner > .wrapper_inner, body .wrapper_inner.wides, body .wrapper_inner.wides_big { padding-left:var(--akva-screen-gutter-mobile) !important; padding-right:var(--akva-screen-gutter-mobile) !important; } } /* ========================================================================== SALE — убираем форму «Задать вопрос» только со страницы списка акций ========================================================================== */ body:has(.akva-promos-grid) .right_side.wide:has(> .ask_small_block) { display:none !important; } body:has(.akva-promos-grid) .left_side.wide { float:none !important; width:100% !important; max-width:none !important; margin:0 !important; padding:0 !important; } /* ========================================================================== FANCYBOX — заметная кнопка закрытия увеличенного изображения ========================================================================== */ .fancybox-opened .fancybox-skin > .fancybox-close, .fancybox-wrap .fancybox-close, a.fancybox-item.fancybox-close { display:block !important; position:absolute !important; top:14px !important; right:14px !important; width:46px !important; height:46px !important; margin:0 !important; padding:0 !important; background:#293847 !important; background-image:none !important; border:1px solid rgba(255,255,255,.72) !important; border-radius:50% !important; box-shadow:0 10px 28px rgba(15,27,38,.28) !important; opacity:1 !important; visibility:visible !important; transform:none !important; transition:background-color .2s ease, box-shadow .2s ease, transform .2s ease !important; cursor:pointer !important; z-index:8065 !important; font-size:0 !important; line-height:0 !important; } .fancybox-wrap .fancybox-close::before, .fancybox-wrap .fancybox-close::after { content:"" !important; position:absolute !important; top:50% !important; left:50% !important; width:20px !important; height:2px !important; margin:-1px 0 0 -10px !important; background:#fff !important; border:0 !important; border-radius:2px !important; opacity:1 !important; pointer-events:none !important; } .fancybox-wrap .fancybox-close::before { transform:rotate(45deg) !important; } .fancybox-wrap .fancybox-close::after { transform:rotate(-45deg) !important; } .fancybox-wrap .fancybox-close:hover, .fancybox-wrap .fancybox-close:focus { background:#a98d5d !important; box-shadow:0 12px 32px rgba(15,27,38,.34) !important; transform:scale(1.06) !important; outline:none !important; } .fancybox-wrap .fancybox-close:focus-visible { outline:3px solid rgba(169,141,93,.4) !important; outline-offset:3px !important; } @media (max-width:600px) { .fancybox-opened .fancybox-skin > .fancybox-close, .fancybox-wrap .fancybox-close, a.fancybox-item.fancybox-close { top:10px !important; right:10px !important; width:42px !important; height:42px !important; } } @media (prefers-reduced-motion:reduce) { .fancybox-wrap .fancybox-close { transition:none !important; } } /* ========================================================================== PRODUCT PHOTO — крупное изображение и плавное перелистывание ========================================================================== */ @media (min-width:769px) { .catalog_detail .item_main_info .item_slider:not(.flex) { width:48% !important; padding:24px 28px 30px !important; } .catalog_detail .item_main_info .right_info { padding-left:48% !important; } .catalog_detail .item_slider:not(.flex) .slides { width:min(100%, 500px) !important; max-width:500px !important; height:500px !important; margin:0 auto 24px !important; line-height:500px !important; overflow:visible !important; background:transparent !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; } .catalog_detail .item_slider:not(.flex) .slides > ul, .catalog_detail .item_slider:not(.flex) .slides > ul > li, .catalog_detail .item_slider:not(.flex) .slides .offers_img { width:100% !important; height:500px !important; line-height:500px !important; } .catalog_detail .item_slider:not(.flex) .slides img { width:100% !important; height:100% !important; max-width:100% !important; max-height:100% !important; object-fit:contain !important; border-radius:0 !important; } .catalog_detail .item_slider:not(.flex) .slides a { display:block !important; width:100% !important; height:100% !important; } } .catalog_detail .item_slider:not(.flex) .slides li.current { animation:akvaProductPhotoIn .46s cubic-bezier(.22,.72,.24,1) both; } .catalog_detail .item_slider:not(.flex) .slides li.current img { animation:akvaProductImageIn .58s cubic-bezier(.22,.72,.24,1) both; will-change:transform, opacity; } .catalog_detail .item_slider .thumbs .slides_block li { border-radius:12px !important; transition:border-color .22s ease, box-shadow .22s ease, transform .22s ease !important; } .catalog_detail .item_slider .thumbs .slides_block li:hover { transform:translateY(-2px); box-shadow:0 8px 20px rgba(27,39,49,.12); } .catalog_detail .item_slider .thumbs .slides_block li.current { border-color:#a98d5d !important; box-shadow:0 0 0 2px rgba(169,141,93,.16); } /* Fancybox уже анимирует контейнер средствами JavaScript. Повторная CSS-анимация изображения вызывала мерцание. */ .fancybox-opened .fancybox-image { animation:none !important; opacity:1 !important; filter:none !important; will-change:auto !important; } .fancybox-opened .fancybox-skin { border-radius:24px !important; overflow:visible !important; box-shadow:0 28px 80px rgba(10,19,28,.34) !important; } .fancybox-wrap .fancybox-prev span, .fancybox-wrap .fancybox-next span { width:46px !important; height:46px !important; margin-top:-23px !important; background:#293847 !important; background-image:none !important; border:1px solid rgba(255,255,255,.7) !important; border-radius:50% !important; box-shadow:0 10px 28px rgba(15,27,38,.25) !important; opacity:1 !important; visibility:visible !important; transition:background-color .2s ease, transform .2s ease !important; } .fancybox-wrap .fancybox-prev span::before, .fancybox-wrap .fancybox-next span::before { content:"" !important; position:absolute; top:50%; width:11px; height:11px; margin-top:-6px; border-top:2px solid #fff; border-right:2px solid #fff; } .fancybox-wrap .fancybox-prev span::before { left:19px; transform:rotate(-135deg); } .fancybox-wrap .fancybox-next span::before { right:19px; transform:rotate(45deg); } .fancybox-wrap .fancybox-prev:hover span, .fancybox-wrap .fancybox-next:hover span { background:#a98d5d !important; transform:scale(1.06); } @keyframes akvaProductPhotoIn { from { opacity:.25; transform:translateX(14px); } to { opacity:1; transform:translateX(0); } } @keyframes akvaProductImageIn { from { opacity:.35; transform:scale(.965); } to { opacity:1; transform:scale(1); } } @media (max-width:1100px) and (min-width:769px) { .catalog_detail .item_slider:not(.flex) .slides, .catalog_detail .item_slider:not(.flex) .slides > ul, .catalog_detail .item_slider:not(.flex) .slides > ul > li, .catalog_detail .item_slider:not(.flex) .slides .offers_img { height:420px !important; line-height:420px !important; } } @media (max-width:768px) { .catalog_detail .item_slider.flex .slides img { animation:akvaProductImageIn .48s cubic-bezier(.22,.72,.24,1) both; } .fancybox-wrap .fancybox-prev span, .fancybox-wrap .fancybox-next span { width:42px !important; height:42px !important; margin-top:-21px !important; } } @media (prefers-reduced-motion:reduce) { .catalog_detail .item_slider .slides li.current, .catalog_detail .item_slider .slides li.current img { animation:none !important; } } /* ========================================================================== V2 CONTENT WIDTH — centered modern layout with full-width backgrounds ========================================================================== */ body.akva-v2-theme:not(.akva-v3-theme) { --akva-v2-content-width:1440px; --akva-v2-content-gutter:clamp(20px,2.5vw,40px); } body.akva-v2-theme:not(.akva-v3-theme) .wrapper > .wrapper_inner, body.akva-v2-theme:not(.akva-v3-theme) .wraps > .wrapper_inner, body.akva-v2-theme:not(.akva-v3-theme) .header_wrap .wrapper_inner, body.akva-v2-theme:not(.akva-v3-theme) .header_wrap #header > .wrapper_inner, body.akva-v2-theme:not(.akva-v3-theme) #header .catalog_menu > .wrapper_inner, body.akva-v2-theme:not(.akva-v3-theme) #footer > .footer_inner > .wrapper_inner, body.akva-v2-theme:not(.akva-v3-theme) .wrapper_inner.wides, body.akva-v2-theme:not(.akva-v3-theme) .wrapper_inner.wides_big { box-sizing:border-box !important; width:100% !important; max-width:var(--akva-v2-content-width) !important; margin-left:auto !important; margin-right:auto !important; padding-left:var(--akva-v2-content-gutter) !important; padding-right:var(--akva-v2-content-gutter) !important; } @media (max-width:768px) { body.akva-v2-theme:not(.akva-v3-theme) { --akva-v2-content-gutter:16px; } }