/* Bundle extra: custom, header-tablet-fix, logo-anim, premium */ html,body{overflow-x:hidden!important;max-width:100%!important;background-color:#fff!important}#loader,#loader *,#loadingText,.loader-wrapper,.loader-wrapper *{font-family:"GothamPro",Arial,sans-serif!important;font-weight:400}#loadingText{font-size:clamp(1rem,4vw,1.5rem)}@font-face{font-family:"Font Awesome 5 Free";font-style:normal;font-weight:900;font-display:swap;ascent-override:90%;descent-override:10%;size-adjust:100%;src:url(/catalog/view/javascript/font-awesome/webfonts/fa-solid-900.woff2)format("woff2")}@font-face{font-family:"Font Awesome 5 Free";font-style:normal;font-weight:400;font-display:swap;src:url(/catalog/view/javascript/font-awesome/webfonts/fa-regular-400.woff2)format("woff2")}@font-face{font-family:"Font Awesome 5 Brands";font-style:normal;font-weight:400;font-display:swap;src:url(/catalog/view/javascript/font-awesome/webfonts/fa-brands-400.woff2)format("woff2")}@media (max-width:992px){.mobilescrollpanel{display:flex!important;align-items:center!important;justify-content:flex-start!important;position:relative;height:50px;padding:0 10px 0 0}.menu_container{flex:0 0 auto;width:56px;height:100%;order:1;z-index:2;margin-right:8px}.menu_container .mobile_menu{width:56px;height:100%;padding:0}.menu_container .mobile_menu .icon--menu{width:32px!important;height:24px!important;color:#fff;display:block}.logomobile,.menu_container,.menu_container .mobile_menu,.mobsearch{display:flex;align-items:center;justify-content:center}.mobsearch{flex:0 0 auto;order:2;z-index:2;margin-right:10px}.logomobile{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1;order:3;pointer-events:none;max-width:calc(100% - 200px)}.logomobile a{pointer-events:auto}.logomobile img{max-width:48px;height:auto}.mobile_menu_container{left:0!important;right:auto!important;transform:translateX(-300px)!important}.mobile_menu_container.loaded{transform:translateX(0)!important}.mobile_menu_container ul li a{text-align:left!important;justify-content:flex-start!important}.mobile_menu_container .mobile_menu_content{text-align:left!important}.mobilescrollpanel .mobile-icons-container{position:absolute!important;right:0!important;left:auto!important;top:50%!important;transform:translateY(-50%)!important;display:flex!important;flex-direction:row!important;align-items:center!important;gap:10px!important;z-index:2!important;padding-right:10px!important;margin:0!important;order:999!important;width:auto!important;max-width:none!important}.mobile-icons-container #cart .cart-button i,.mobile-icons-container #compare .compare-button i,.mobile-icons-container #wishlist .wishlist-button i{color:#fff!important}.mobile-icons-container #cart .cart-button.cart-has-items i,.mobile-icons-container #compare .compare-button.compare-has-items i,.mobile-icons-container #wishlist .wishlist-button.wishlist-has-items i{color:red!important}.alert.alert-success.alert-dismissible{position:fixed;top:60px;left:10px;right:10px;z-index:1001}}@media (min-width:768px){.alert-cart-overlay,.alert.alert-success.alert-dismissible.alert-cart-overlay,body .alert-cart-overlay{position:fixed!important;top:56px!important;left:10px!important;right:10px!important;width:auto!important;min-width:0!important;max-width:none!important;transform:none!important;z-index:99999!important;display:block!important;visibility:visible!important;opacity:1!important;box-sizing:border-box;padding:12px 40px 12px 14px!important;font-size:14px;line-height:1.4;word-wrap:break-word;box-shadow:0 4px 20px rgba(0,0,0,.2)}}@media (max-width:992px){.floating-alert-container{top:60px!important}}.header-icons-container{display:flex;align-items:center;gap:15px}.header-icons-container #cart .cart-button i,.header-icons-container #compare .compare-button i,.header-icons-container #wishlist .wishlist-button i{color:gray!important}.header-icons-container #cart .cart-button.cart-has-items i,.header-icons-container #compare .compare-button.compare-has-items i,.header-icons-container #wishlist .wishlist-button.wishlist-has-items i{color:red!important}.header-icons-container .cart-badge,.header-icons-container .compare-badge,.header-icons-container .wishlist-badge,.mobile-icons-container .cart-badge,.mobile-icons-container .compare-badge,.mobile-icons-container .wishlist-badge{font-weight:700!important}@media (max-width:992px){.mobile-icons-container .cart-badge,.mobile-icons-container .compare-badge,.mobile-icons-container .wishlist-badge{color:#fff!important}}@media (min-width:993px){.header-icons-container .cart-badge,.header-icons-container .compare-badge,.header-icons-container .wishlist-badge{color:#000!important}}@media (max-width:992px){body .mobilescrollpanel .mobile-icons-container{position:absolute!important;right:0!important;left:auto!important;top:50%!important;transform:translateY(-50%)!important;margin-left:0!important;margin-right:0!important;flex-direction:row!important;display:flex!important;align-items:center!important}body .mobilescrollpanel .mobile-icons-container .mobile-account-icon{width:40px!important;height:40px!important;font-size:18px!important;color:#fff!important;text-decoration:none!important;order:0!important}body .mobilescrollpanel .mobile-icons-container .mobile-account-icon i{font-size:18px!important;line-height:1!important;color:inherit!important}.mobile-icons-container #cart .cart-button.cart-has-items,.mobile-icons-container #compare .compare-button.compare-has-items,.mobile-icons-container #wishlist .wishlist-button.wishlist-has-items,body .mobilescrollpanel .mobile-icons-container .mobile-account-icon.is-logged{color:red!important}body .mobilescrollpanel .mobile-icons-container #wishlist{order:1!important}body .mobilescrollpanel .mobile-icons-container #compare{order:2!important}body .mobilescrollpanel .mobile-icons-container #cart{order:3!important}body .mobilescrollpanel .mobile-icons-container .mobile-account-icon,body .mobilescrollpanel .mobile-icons-container>*{flex-shrink:0!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;vertical-align:middle!important}.mobile-icons-container #cart .cart-button,.mobile-icons-container #compare .compare-button,.mobile-icons-container #wishlist .wishlist-button{color:#fff!important}.mobile-icons-container #cart .cart-button i,.mobile-icons-container #cart .cart-button.cart-has-items i,.mobile-icons-container #compare .compare-button i,.mobile-icons-container #compare .compare-button.compare-has-items i,.mobile-icons-container #wishlist .wishlist-button i,.mobile-icons-container #wishlist .wishlist-button.wishlist-has-items i{color:inherit!important}}@media (min-width:993px){.header-icons-container #cart .cart-button,.header-icons-container #compare .compare-button,.header-icons-container #wishlist .wishlist-button{color:gray!important}.header-icons-container #cart .cart-button i,.header-icons-container #cart .cart-button.cart-has-items i,.header-icons-container #compare .compare-button i,.header-icons-container #compare .compare-button.compare-has-items i,.header-icons-container #wishlist .wishlist-button i,.header-icons-container #wishlist .wishlist-button.wishlist-has-items i{color:inherit!important}.header-icons-container #cart .cart-button.cart-has-items,.header-icons-container #compare .compare-button.compare-has-items,.header-icons-container #wishlist .wishlist-button.wishlist-has-items{color:red!important}}.swiper-pagination-bullet{width:32px;height:32px;margin:0 8px;background:0 0;opacity:1;position:relative;display:inline-flex;align-items:center;justify-content:center}.swiper-pagination-bullet::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--swiper-pagination-bullet-inactive-color, #000);opacity:.3}.swiper-pagination-bullet-active::after{background:var(--swiper-pagination-color, var(--swiper-theme-color));opacity:1}@media (max-width:767px){.swiper-pagination-bullet{width:36px;height:36px;margin:0 10px}.swiper-pagination-bullet::after{width:10px;height:10px}}.mainpage_categories__item a{position:relative;inset:auto;min-height:48px;z-index:2}.mainpage_categories__item a,.mainpage_categories__item a img{display:block;width:100%;height:auto}.mainpage_categories__item a strong{pointer-events:none}@media (max-width:992px){.wrap-content-more,.wrap-content-more *{transition:none!important}.mainpage_categories__item,.mainpage_categories__item *,.mobile_menu_container,.mobile_menu_container *,.mobilescrollpanel,.mobilescrollpanel *,.swiper,.swiper *,.tp-bullets,.tp-bullets *{transition-property:opacity,transform!important}}.product-thumb .button-group-absolute button{min-width:44px;min-height:44px;padding:8px;margin:2px;display:inline-flex;align-items:center;justify-content:center}.product-thumb .caption .title a{display:block;min-height:48px;padding:6px 0}#mainpage_products_modules ul li a{transition:none!important}@media (min-width:992px){.sticky-category-wrapper{position:fixed!important;z-index:999!important;transition:none!important}.sticky-category-wrapper .category-sheme,.sticky-category-wrapper .menu-box,.sticky-category-wrapper.blog-category-menu{max-height:calc(100vh - 160px);overflow-y:auto;overflow-x:hidden}#column-left .blog-category-menu::-webkit-scrollbar,.sticky-category-wrapper .category-sheme::-webkit-scrollbar,.sticky-category-wrapper .menu-box::-webkit-scrollbar,.sticky-category-wrapper.blog-category-menu::-webkit-scrollbar{width:4px}#column-left .blog-category-menu::-webkit-scrollbar-thumb,.sticky-category-wrapper .category-sheme::-webkit-scrollbar-thumb,.sticky-category-wrapper .menu-box::-webkit-scrollbar-thumb,.sticky-category-wrapper.blog-category-menu::-webkit-scrollbar-thumb{background:rgba(0,0,0,.2);border-radius:4px}.sticky-category-wrapper.blog-category-menu{background:#fff;padding:10px;border-radius:4px;box-shadow:0 2px 8px rgba(0,0,0,.1)}#column-left,.bm,.bm .row,body .container,body .container>.row,body .row{overflow:visible!important}body .container>.row{align-items:flex-start!important}#column-left .blog-category-menu{position:-webkit-sticky!important;position:sticky!important;top:150px!important;max-height:calc(100vh - 180px);overflow-y:auto;z-index:100;background:#fff;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent}body.header-fixed #column-left .blog-category-menu{top:calc(var(--top-fixed-height, 58px) + var(--header-fixed-height, 72px) + 20px)!important}#column-left{align-self:stretch!important;min-height:100%!important}#menu-vsheme .dropdown-menu-simple.ns-dd,#menu-vsheme .ns-dd{max-height:70vh!important;min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;z-index:2147483647!important;padding-bottom:12px!important}}@media (min-width:992px) and (max-width:1199px){#menu-vsheme .dropdown-menu-simple.ns-dd,#menu-vsheme .ns-dd{max-height:50vh!important}}@media (min-width:992px) and (max-width:1024px){#menu-vsheme .dropdown-menu-simple.ns-dd,#menu-vsheme .ns-dd{max-height:min(45vh,380px)!important}}@media (min-width:992px) and (max-height:700px){#menu-vsheme .dropdown-menu-simple.ns-dd,#menu-vsheme .ns-dd{max-height:55vh!important}}@media (min-width:992px){#menu-vsheme .ns-dd .dropdown-inner,#menu-vsheme .ns-dd .nsmenu-haschild{max-height:none!important;min-height:0!important;overflow:visible!important}#menu-vsheme .ns-dd .nsmenu-haschild,.submenu-clone{display:block!important}#menu-vsheme,#menu-vsheme #menu-vsheme-list,#menu-vsheme #menu-vsheme-list>li,#menu-vsheme .dropdown-inner,#menu-vsheme .dropdown-menu-simple,#menu-vsheme .nsmenu-haschild{z-index:2147483646!important}#menu-vsheme .dropdown-menu-simple .child_4level_simple,#menu-vsheme .dropdown-menu-simple .nsmenu-ischild-simple{display:none!important}#menu-vsheme #menu-vsheme-list>li.menu-open>.dropdown-menu-simple,#menu-vsheme #menu-vsheme-list>li.menu-open>.ns-dd{opacity:1!important;visibility:visible!important;transform:translateX(0)!important}#menu-vsheme .dropdown-menu-simple .menu-open-2level,#menu-vsheme .dropdown-menu-simple li.menu-open-2level{background:linear-gradient(to right,#f5f5f5 70%,#fff 80%)!important;color:#2b8cdb!important}#menu-vertical.submenu-clone-active+#maskMenuHC,#menu-vsheme.submenu-clone-active+#maskMenuHC,#menu-vsheme.submenu-clone-active+#maskMenuSheme,.submenu-clone.submenu-visible{opacity:1!important;visibility:visible!important}.submenu-clone{position:fixed!important;z-index:2147483647!important;background:#fff!important;border:1px solid #ddd!important;border-radius:12px!important;box-shadow:0 4px 12px rgba(0,0,0,.15)!important;min-width:200px!important;max-height:calc(100vh - 100px)!important;overflow-y:auto!important;opacity:0!important;visibility:hidden!important;transform:translateX(-10px);transition:opacity .3s ease,visibility .3s ease,transform .3s ease}.submenu-clone.submenu-visible{transform:translateX(0)}.submenu-clone li{border-top:1px solid #eee}.submenu-clone li:first-child{border-top:none}.submenu-clone li.nsmenu-view-all-li{border-bottom:1px solid #e8e8e8;padding:8px 16px}.submenu-clone li.nsmenu-view-all-li a.nsmenu-view-all-link{display:inline-block!important;padding:0!important;color:#c00!important;font-weight:600!important;font-size:13px!important;background:0 0!important}.submenu-clone li.nsmenu-view-all-li a.nsmenu-view-all-link:hover{color:#a00!important;background:0 0!important;text-decoration:underline!important}.submenu-clone li a{display:block;padding:10px 15px;color:#333;text-decoration:none}.submenu-clone li a:hover{background:#f5f5f5;color:#2b8cdb}#menu-vsheme .ns-dd{scrollbar-width:none;-ms-overflow-style:none}#menu-vsheme .ns-dd::-webkit-scrollbar{display:none}} #product-product #button-cart.btn-primary,#product-product #product #button-cart.btn-primary{width:100%!important;max-width:100%!important;color:#000!important;-webkit-text-fill-color:#000!important;background-color:transparent!important;border:2px solid #e30016!important;box-shadow:none!important;background-image:none!important;outline:0!important;transition:background-color .2s ease,color .2s ease,border-color .2s ease} #product-product #button-cart.btn-primary:hover,#product-product #button-cart.btn-primary:focus,#product-product #product #button-cart.btn-primary:hover,#product-product #product #button-cart.btn-primary:focus{color:#fff!important;-webkit-text-fill-color:#fff!important;background-color:#e30016!important;border-color:#e30016!important;box-shadow:none!important} #checkout-cart .buttons .btn-primary{width:100%!important;max-width:100%!important;display:block!important;box-sizing:border-box!important;color:#e30016!important;background-color:transparent!important;border:2px solid #e30016!important;box-shadow:none!important;background-image:none!important;transition:background-color .2s ease,color .2s ease,border-color .2s ease} #checkout-cart .buttons .pull-left,#checkout-cart .buttons .pull-right{float:none!important;width:100%!important;max-width:100%!important;margin-bottom:10px!important} #checkout-cart .buttons .btn-primary:hover,#checkout-cart .buttons .btn-primary:focus{color:#fff!important;background-color:#e30016!important;border-color:#e30016!important} .wrappanelfix #button-cart.btn-primary{width:100%!important;max-width:100%!important;color:#000!important;-webkit-text-fill-color:#000!important;background-color:transparent!important;border:2px solid #e30016!important;box-shadow:none!important;background-image:none!important;transition:background-color .2s ease,color .2s ease,border-color .2s ease} .wrappanelfix #button-cart.btn-primary:hover,.wrappanelfix #button-cart.btn-primary:focus{color:#fff!important;-webkit-text-fill-color:#fff!important;background-color:#e30016!important;border-color:#e30016!important} /* === Кнопки сайта: прозрачный фон, при наведении красная заливка; красный текст → белый на hover; там где был белый текст (моб. шапка) → чёрный на hover. Исключение: «В корзину» в #product-category / #product-catalog / #product-search === */ :root{--site-btn-hover-bg:#e30016;--site-btn-hover-border:#e30016} body .btn, body a.btn, body button.btn, body input.btn, body .button_oc, body a.button, body input.button_oc, body .button-shop, body button[type="submit"]:not(.close), body button[type="button"]:not(.close):not(.home-products-card__wishlist):not(.swiper-pagination-bullet):not(.owl-dot):not(.bt_minus):not(.bt_plus), body input[type="submit"], body label.btn{ transition:background-color .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease!important; } body .btn, body a.btn, body button.btn, body input.btn, body .button_oc, body a.button, body input.button_oc, body .button-shop, body button[type="submit"]:not(.close), body button[type="button"]:not(.close):not(.home-products-card__wishlist):not(.swiper-pagination-bullet):not(.owl-dot):not(.bt_minus):not(.bt_plus), body input[type="submit"], body label.btn{ background-color:transparent!important; background-image:none!important; box-shadow:none!important; } /* .button-shop на светлой карточке — красная обводка/текст до hover (листинги с тёмной кнопкой переопределяются ниже) */ body .button-shop{ color:var(--red,#e30016)!important; border-width:1px!important; border-style:solid!important; border-color:var(--red,#e30016)!important; } body .button-shop.out-of-stock-text, body span.button-shop.out-of-stock-text{ color:var(--white,#fff)!important; background:var(--dark-gray,#292929)!important; border-color:var(--gray-border,#5f5f5f)!important; cursor:default!important; } body .button-shop.out-of-stock-text:hover, body .button-shop.out-of-stock-text:focus-visible, body span.button-shop.out-of-stock-text:hover, body span.button-shop.out-of-stock-text:focus-visible{ background:var(--dark-gray,#292929)!important; background-color:var(--dark-gray,#292929)!important; color:var(--white,#fff)!important; border-color:var(--gray-border,#5f5f5f)!important; } body .btn:hover, body .btn:focus-visible, body a.btn:hover, body a.btn:focus-visible, body button.btn:hover, body button.btn:focus-visible, body input.btn:hover, body input.btn:focus-visible, body .button_oc:hover, body .button_oc:focus-visible, body a.button:hover, body a.button:focus-visible, body input.button_oc:hover, body input.button_oc:focus-visible, body .button-shop:not(.availability-inquiry-btn):hover, body .button-shop:not(.availability-inquiry-btn):focus-visible, body button[type="submit"]:not(.close):hover, body button[type="submit"]:not(.close):focus-visible, body button[type="button"]:not(.close):not(.home-products-card__wishlist):not(.swiper-pagination-bullet):not(.owl-dot):not(.bt_minus):not(.bt_plus):hover, body button[type="button"]:not(.close):not(.home-products-card__wishlist):not(.swiper-pagination-bullet):not(.owl-dot):not(.bt_minus):not(.bt_plus):focus-visible, body input[type="submit"]:hover, body input[type="submit"]:focus-visible, body label.btn:hover, body label.btn:focus-visible{ background-color:var(--site-btn-hover-bg)!important; border-color:var(--site-btn-hover-border)!important; color:#fff!important; } body .btn:hover span, body .btn:focus-visible span, body a.btn:hover span, body a.btn:focus-visible span, body a.button:hover span, body a.button:focus-visible span, body .button-shop:not(.availability-inquiry-btn):hover span, body .button-shop:not(.availability-inquiry-btn):focus-visible span, body button:hover>i, body button:focus-visible>i, body .btn:hover>i, body .btn:focus-visible>i{ color:inherit!important; } /* .btn-danger: до hover — красная обводка/текст; на красном фоне (общий hover) — белый текст */ body .btn-danger:not(:hover):not(:focus-visible), body a.btn-danger:not(:hover):not(:focus-visible), body button.btn-danger:not(:hover):not(:focus-visible){ color:var(--red,#e30016)!important; border-color:var(--red,#e30016)!important; } body .btn-danger:hover, body .btn-danger:focus-visible, body a.btn-danger:hover, body a.btn-danger:focus-visible, body button.btn-danger:hover, body button.btn-danger:focus-visible{ color:#fff!important; } /* Мобильная шапка: светлый текст на тёмной полосе — на красном чёрная надпись */ body .mobilescrollpanel .btn:hover, body .mobilescrollpanel .btn:focus-visible, body .mobilescrollpanel button[type="button"]:not(.close):not(.bt_minus):not(.bt_plus):hover, body .mobilescrollpanel button[type="button"]:not(.close):not(.bt_minus):not(.bt_plus):focus-visible, body .mobilescrollpanel button[type="submit"]:hover, body .mobilescrollpanel button[type="submit"]:focus-visible, body .mobilescrollpanel .button-shop:hover, body .mobilescrollpanel .button-shop:focus-visible{ color:#000!important; } body .mobilescrollpanel .btn:hover>i, body .mobilescrollpanel .btn:focus-visible>i, body .mobilescrollpanel button:hover>i, body .mobilescrollpanel button:focus-visible>i{ color:inherit!important; } /* Модуль отзывов RAS: как «В корзину» на странице товара (#product-product #button-cart.btn-primary), не как в сетке категории */ #reviews-and-stores-module button.ras-btn-submit, .ras-review-form-block button.ras-btn-submit{ width:100%!important; max-width:100%!important; color:#000!important; -webkit-text-fill-color:#000!important; background-color:transparent!important; border:2px solid #e30016!important; box-shadow:none!important; background-image:none!important; outline:0!important; transition:background-color .2s ease,color .2s ease,border-color .2s ease!important; } #reviews-and-stores-module button.ras-btn-submit:hover, #reviews-and-stores-module button.ras-btn-submit:focus, #reviews-and-stores-module button.ras-btn-submit:focus-visible, .ras-review-form-block button.ras-btn-submit:hover, .ras-review-form-block button.ras-btn-submit:focus, .ras-review-form-block button.ras-btn-submit:focus-visible{ color:#fff!important; -webkit-text-fill-color:#fff!important; background-color:#e30016!important; border-color:#e30016!important; box-shadow:none!important; } /* Вернуть стиль «В корзину» только в сетках категории / каталога / поиска */ #product-category .product-thumb .button-group>button[onclick*="cart.add"], #product-catalog .product-thumb .button-group>button[onclick*="cart.add"], #product-search .product-thumb .button-group>button[onclick*="cart.add"]{ background-color:transparent!important; background-image:none!important; box-shadow:none!important; color:#545454!important; border:none!important; } #product-category .product-thumb .button-group>button[onclick*="cart.add"]:hover, #product-category .product-thumb .button-group>button[onclick*="cart.add"]:focus-visible, #product-catalog .product-thumb .button-group>button[onclick*="cart.add"]:hover, #product-catalog .product-thumb .button-group>button[onclick*="cart.add"]:focus-visible, #product-search .product-thumb .button-group>button[onclick*="cart.add"]:hover, #product-search .product-thumb .button-group>button[onclick*="cart.add"]:focus-visible{ background-color:transparent!important; color:#545454!important; border:none!important; } #product-category .home-products-card__actions>.button-shop[onclick*="cart.add"], #product-category .home-products-card__actions>.button-shop.availability-inquiry-btn, #product-catalog .home-products-card__actions>.button-shop[onclick*="cart.add"], #product-catalog .home-products-card__actions>.button-shop.availability-inquiry-btn, #product-search .home-products-card__actions>.button-shop[onclick*="cart.add"], #product-search .home-products-card__actions>.button-shop.availability-inquiry-btn, #product-manufacturer .home-products-card__actions>.button-shop[onclick*="cart.add"], #product-manufacturer .home-products-card__actions>.button-shop.availability-inquiry-btn, #product-special .home-products-card__actions>.button-shop[onclick*="cart.add"], #product-special .home-products-card__actions>.button-shop.availability-inquiry-btn{ color:var(--white,#fff)!important; background:var(--dark-gray,#292929)!important; border:1px solid var(--gray-border,#5f5f5f)!important; box-shadow:none!important; transition:background-color .3s ease,color .3s ease,border-color .3s ease!important; } #product-category .home-products-card__actions>.button-shop[onclick*="cart.add"]:hover, #product-category .home-products-card__actions>.button-shop[onclick*="cart.add"]:focus-visible, #product-category .home-products-card__actions>.button-shop.availability-inquiry-btn:hover, #product-category .home-products-card__actions>.button-shop.availability-inquiry-btn:focus-visible, #product-catalog .home-products-card__actions>.button-shop[onclick*="cart.add"]:hover, #product-catalog .home-products-card__actions>.button-shop[onclick*="cart.add"]:focus-visible, #product-catalog .home-products-card__actions>.button-shop.availability-inquiry-btn:hover, #product-catalog .home-products-card__actions>.button-shop.availability-inquiry-btn:focus-visible, #product-search .home-products-card__actions>.button-shop[onclick*="cart.add"]:hover, #product-search .home-products-card__actions>.button-shop[onclick*="cart.add"]:focus-visible, #product-search .home-products-card__actions>.button-shop.availability-inquiry-btn:hover, #product-search .home-products-card__actions>.button-shop.availability-inquiry-btn:focus-visible, #product-manufacturer .home-products-card__actions>.button-shop[onclick*="cart.add"]:hover, #product-manufacturer .home-products-card__actions>.button-shop[onclick*="cart.add"]:focus-visible, #product-manufacturer .home-products-card__actions>.button-shop.availability-inquiry-btn:hover, #product-manufacturer .home-products-card__actions>.button-shop.availability-inquiry-btn:focus-visible, #product-special .home-products-card__actions>.button-shop[onclick*="cart.add"]:hover, #product-special .home-products-card__actions>.button-shop[onclick*="cart.add"]:focus-visible, #product-special .home-products-card__actions>.button-shop.availability-inquiry-btn:hover, #product-special .home-products-card__actions>.button-shop.availability-inquiry-btn:focus-visible{ color:var(--white,#fff)!important; background:var(--black,#000)!important; border-color:var(--black,#000)!important; } /* Главная: модуль «Новинки / Скидки / Рекомендуем» (#home-products-module) — как в home-products.css */ #home-products-module .home-products-card__actions>.button-shop[onclick*="cart.add"], #home-products-module .home-products-card__actions>.button-shop.availability-inquiry-btn{ color:var(--white,#fff)!important; background:var(--dark-gray,#292929)!important; border:1px solid var(--gray-border,#5f5f5f)!important; box-shadow:none!important; transition:background-color .3s ease,color .3s ease,border-color .3s ease!important; } #home-products-module .home-products-card__actions>.button-shop[onclick*="cart.add"]:hover, #home-products-module .home-products-card__actions>.button-shop[onclick*="cart.add"]:focus-visible, #home-products-module .home-products-card__actions>.button-shop.availability-inquiry-btn:hover, #home-products-module .home-products-card__actions>.button-shop.availability-inquiry-btn:focus-visible{ color:var(--white,#fff)!important; background:var(--black,#000)!important; border-color:var(--black,#000)!important; } #home-products-module .home-products-tab:not(.active){ background:transparent!important; color:var(--black,#000)!important; border:none!important; box-shadow:none!important; } #home-products-module .home-products-tab:not(.active):hover, #home-products-module .home-products-tab:not(.active):focus-visible{ background:transparent!important; color:var(--black,#000)!important; border:none!important; } #home-products-module .home-products-tab.active{ color:var(--white,#fff)!important; background:var(--red,#e30016)!important; border:none!important; } #home-products-module .home-products-tab.active:hover, #home-products-module .home-products-tab.active:focus-visible{ color:var(--white,#fff)!important; background:var(--red,#e30016)!important; border:none!important; } #home-products-module .home-products-card--load-more-tile .btn-load-more{ background:var(--dark-gray,#292929)!important; color:var(--green,#b3ff00)!important; border:2px solid var(--green,#b3ff00)!important; border-radius:4px!important; box-shadow:0 2px 12px rgba(0,0,0,0.35)!important; } #home-products-module .home-products-card--load-more-tile .btn-load-more:hover:not(:disabled), #home-products-module .home-products-card--load-more-tile .btn-load-more:focus-visible{ background:var(--green,#b3ff00)!important; color:var(--black,#000)!important; border-color:var(--green,#b3ff00)!important; box-shadow:0 4px 18px rgba(179,255,0,0.25)!important; } #home-products-module .home-products-special-footer .btn-view-all{ display:inline-block!important; background:transparent!important; color:var(--black,#000)!important; border:2px solid var(--black,#000)!important; border-radius:4px!important; box-shadow:none!important; text-decoration:none!important; } #home-products-module .home-products-special-footer .btn-view-all:hover, #home-products-module .home-products-special-footer .btn-view-all:focus-visible{ background:var(--red,#e30016)!important; color:var(--black,#000)!important; border-color:var(--red,#e30016)!important; } /* Старые отдельные блоки latest/special/featured на главной (.mainpage-products-module) */ .mainpage-products-module .product-thumb .button-group>.button-shop[onclick*="cart.add"], .mainpage-products-module .product-thumb .button-group>.button-shop.availability-inquiry-btn{ color:var(--white,#fff)!important; background:var(--dark-gray,#292929)!important; border:1px solid var(--gray-border,#5f5f5f)!important; box-shadow:none!important; transition:background-color .3s ease,color .3s ease,border-color .3s ease!important; } .mainpage-products-module .product-thumb .button-group>.button-shop[onclick*="cart.add"]:hover, .mainpage-products-module .product-thumb .button-group>.button-shop[onclick*="cart.add"]:focus-visible, .mainpage-products-module .product-thumb .button-group>.button-shop.availability-inquiry-btn:hover, .mainpage-products-module .product-thumb .button-group>.button-shop.availability-inquiry-btn:focus-visible{ color:var(--white,#fff)!important; background:var(--black,#000)!important; border-color:var(--black,#000)!important; } /* «В корзину»: чёрный текст, красная обводка; липкая панель — те же селекторы */ #product-product #product .wrap-cart-block #button-cart.btn-primary, #product-product #product #button-cart.btn-primary, #product .wrap-cart-block #button-cart.btn-primary, .wrappanelfix .wrap-cart-block #button-cart.btn-primary, .fixbtnblock .wrap-cart-block #button-cart.btn-primary, #product-product #button-cart.btn-primary{ color:#000!important; -webkit-text-fill-color:#000!important; border-color:#e30016!important; } #product-product #product .wrap-cart-block #button-cart.btn-primary:hover, #product-product #product .wrap-cart-block #button-cart.btn-primary:focus, #product-product #product .wrap-cart-block #button-cart.btn-primary:focus-visible, #product-product #product #button-cart.btn-primary:hover, #product-product #product #button-cart.btn-primary:focus, #product-product #product #button-cart.btn-primary:focus-visible, #product .wrap-cart-block #button-cart.btn-primary:hover, #product .wrap-cart-block #button-cart.btn-primary:focus, #product .wrap-cart-block #button-cart.btn-primary:focus-visible, .wrappanelfix .wrap-cart-block #button-cart.btn-primary:hover, .wrappanelfix .wrap-cart-block #button-cart.btn-primary:focus, .wrappanelfix .wrap-cart-block #button-cart.btn-primary:focus-visible, .fixbtnblock .wrap-cart-block #button-cart.btn-primary:hover, .fixbtnblock .wrap-cart-block #button-cart.btn-primary:focus, .fixbtnblock .wrap-cart-block #button-cart.btn-primary:focus-visible, #product-product #button-cart.btn-primary:hover, #product-product #button-cart.btn-primary:focus, #product-product #button-cart.btn-primary:focus-visible{ color:#fff!important; -webkit-text-fill-color:#fff!important; background-color:#e30016!important; border-color:#e30016!important; } /* Модуль «Уточнить наличие»: грузится вместе с остальными стилями; здесь дублируем критичные правила после всех link из document (custom.css идёт следом) */ body:not([data-availability-inquiry="1"]) .availability-inquiry-btn{ display:none!important; } body[data-availability-inquiry="1"] .out-of-stock-text, body[data-availability-inquiry="1"] .button-shop.out-of-stock-text, body[data-availability-inquiry="1"] .btn.out-of-stock-text{ display:none!important; } /* «Уточнить наличие» — как кнопка «В корзину» в карточках категорий (цвета + плавность как .home-products-card__actions) */ body[data-availability-inquiry="1"] .button-shop.availability-inquiry-btn, body[data-availability-inquiry="1"] button.availability-inquiry-btn{ color:var(--white,#fff)!important; background:var(--dark-gray,#292929)!important; border:1px solid var(--gray-border,#5f5f5f)!important; box-shadow:none!important; transition:background-color .3s ease,color .3s ease,border-color .3s ease!important; } body[data-availability-inquiry="1"] .button-shop.availability-inquiry-btn:hover, body[data-availability-inquiry="1"] .button-shop.availability-inquiry-btn:focus-visible, body[data-availability-inquiry="1"] button.availability-inquiry-btn:hover, body[data-availability-inquiry="1"] button.availability-inquiry-btn:focus-visible{ color:var(--white,#fff)!important; background:var(--black,#000)!important; border-color:var(--black,#000)!important; }/* ============================================================ ПЛАНШЕТ 768–991px: верхнюю серую полосу (#top) не показываем; header не скрываем через display:none — иначе .header-inline-block-search при клике на иконку поиска остаётся внутри невидимого блока (как в common ≤767px). ============================================================ */ @media (min-width: 768px) and (max-width: 991px) { nav#top { display: none !important; } header { display: block !important; height: 0 !important; min-height: 0 !important; max-height: 0 !important; padding: 0 !important; margin: 0 !important; border: none !important; overflow: visible !important; background: transparent !important; border-radius: 0 !important; } header > .header-inline { height: 0 !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; overflow: visible !important; background: transparent !important; border-radius: 0 !important; } header .header-inline-block-search.act { position: fixed !important; top: 50px !important; left: 0 !important; width: 100% !important; z-index: 9998 !important; } } /* ============================================================ УНИФИКАЦИЯ: при 992px показываем десктопную шапку (переопределяем common.css) ============================================================ */ @media (min-width: 992px) { body #top{ z-index:10000001 !important; height:auto !important; min-height:auto !important; padding:0 !important; border:none !important; position:relative !important; top:auto !important; left:0 !important; right:0 !important; width:100% !important; } body #top > .container{display:block !important} header{ position:relative !important; top:auto !important; left:0 !important; right:0 !important; width:100% !important; z-index:10000002 !important; overflow:visible !important; } header > .header-inline > .header-inline-row{display:flex !important} body .mobilescrollpanel, body .logomobile, body .mobile_menu_overlay{ display:none !important; visibility:hidden !important; opacity:0 !important; pointer-events:none !important; position:absolute !important; left:-9999px !important; width:0 !important; height:0 !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; } body{padding-top:0 !important} /* header-fixed стили задаются в stylesheet.min.css — там position: fixed при прокрутке */ } /* ============================================================ Компактный десктоп / планшет 992–1599px (раньше до 1366 — часть экранов выпадала из правил) ============================================================ */ @media (min-width:992px) and (max-width:1599px){ /* ---- Bootstrap 4 _grid.scss: переопределяем margin -15px на 0 для .row в #top ---- */ #top .row{ margin-left:0 !important; margin-right:0 !important; } /* ---- Верхняя полоска #top: одна строка, без полоски, без overflow ---- */ #top::before, #top::after, #top .container::before, #top .container::after, #top .row::before, #top .row::after{display:none !important;content:none !important} body #top{ max-width:100% !important; min-height:36px !important; max-height:36px !important; height:36px !important; flex-shrink:0 !important; border:none !important; border-top:none !important; border-bottom:none !important; border-left:none !important; border-right:none !important; border-radius:0 !important; box-shadow:none !important; -webkit-box-shadow:none !important; background:#f5f4f2 !important; margin-bottom:-2px !important; isolation:isolate !important; outline:none !important; } #top .container::before, #top .container::after, #top .row::before, #top .row::after, #top .top_menu_left::before, #top .top_menu_left::after{display:none !important;content:none !important} #top .container.header-inline{ max-width:100% !important; width:100% !important; padding-left:12px !important; padding-right:12px !important; box-sizing:border-box !important; border:none !important; box-shadow:none !important; } #top .row.header-inline-row{ display:flex !important; flex-wrap:nowrap !important; align-items:center !important; min-height:36px !important; max-height:36px !important; height:36px !important; gap:0 !important; margin-left:0 !important; margin-right:0 !important; border:none !important; box-shadow:none !important; } #top .rowtopleft{display:none !important} #top .top_menu_left{ flex:1 1 auto !important; min-width:0 !important; overflow-x:auto !important; overflow-y:hidden !important; -webkit-overflow-scrolling:touch; scrollbar-width:none !important; -ms-overflow-style:none !important; } #top .top_menu_left::-webkit-scrollbar{ display:none !important; width:0 !important; height:0 !important; background:transparent !important; } #top .top_menu_left .top-nav-list{ display:flex !important; flex-wrap:nowrap !important; align-items:center !important; gap:4px 8px !important; margin:0 !important; padding:0 !important; white-space:nowrap !important; min-width:min-content !important; } #top .top_menu_left .top-nav-link{ font-size:11px !important; white-space:nowrap !important; flex-shrink:0 !important; padding:4px 0 !important; } #top .top_menu_left .top-nav-link--sale{ padding:3px 10px !important; font-size:10px !important; } #top .wrap-item-flex{ flex:0 0 auto !important; width:auto !important; max-width:none !important; display:flex !important; align-items:center !important; gap:2px !important; padding:2px 4px !important; margin-right:0 !important; background:transparent !important; box-shadow:none !important; border:none !important; } #top .wrap-item-flex .top_menu_right ul, #top .wrap-item-flex .top-bar-search-phone, #top .wrap-item-flex .header-icons-container{ display:flex !important; align-items:center !important; gap:2px !important; flex-shrink:0 !important; } #top .wrap-item-flex .top_menu_right ul li a, #top .wrap-item-flex .top-bar-search-phone a, #top .wrap-item-flex .header-icons-container a, #top .wrap-item-flex .header-icons-container .btn{ display:inline-flex !important; align-items:center !important; justify-content:center !important; width:32px !important; height:32px !important; min-width:32px !important; min-height:32px !important; padding:0 !important; box-sizing:border-box !important; } #top .top-bar-search-phone{ display:flex !important; align-items:center !important; gap:2px !important; margin-left:6px !important; padding-left:6px !important; border-left:1px solid rgba(0,0,0,.12) !important; } /* ---- Серая полоска header: логотип слева, категории справа, без наложений ---- */ body header::before, body header::after{display:none !important;content:none !important} header{ top:auto !important; margin-top:0 !important; border-radius:0 !important; border-top:none !important; box-shadow:none !important; outline:none !important; } body header{ min-height:52px !important; max-height:none !important; height:auto !important; display:flex !important; align-items:center !important; margin:0 !important; padding:0 !important; flex-shrink:0 !important; overflow:visible !important; } /* Одна строка шапки + нулевой слот: панель поиска вне потока (fixed), выезжает слева — не растягивает header */ body header .header-inline{ display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important; align-items:center !important; max-width:100% !important; width:100% !important; padding-left:10px !important; padding-right:10px !important; min-height:52px !important; max-height:none !important; height:auto !important; box-sizing:border-box !important; gap:10px !important; overflow:visible !important; } body header .header-inline-row{ display:flex !important; align-items:center !important; flex-wrap:nowrap !important; flex:1 1 auto !important; min-width:0 !important; width:auto !important; min-height:52px !important; max-height:none !important; height:auto !important; padding:0 !important; margin:0 !important; gap:12px !important; overflow:visible !important; } /* Предки без transform/filter — иначе fixed привязывается к узкому контексту (как было «узкая полоска»). */ body header, body header .header-inline, body header .container.header-inline{ transform:none !important; filter:none !important; } html body header .header-inline-block-search.header-search-slot{ flex:0 0 0 !important; width:0 !important; min-width:0 !important; max-width:0 !important; height:0 !important; margin:0 !important; padding:0 !important; border:none !important; overflow:visible !important; position:relative !important; z-index:10000050 !important; pointer-events:none !important; } html body header .header-inline-block-search.header-search-slot.act{ pointer-events:auto !important; } /* Пока #search в слоте (JS переносит в body при открытии) — не занимает место и не ломает layout */ html body header .header-inline-block-search.header-search-slot > #search.header-search-input:not(.header-search-portal){ position:absolute !important; left:-9999px !important; width:1px !important; height:1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; opacity:0 !important; pointer-events:none !important; margin:0 !important; padding:0 !important; border:none !important; } /* JS: append #search к body — fixed к viewport, без «узкой полоски» из-за предков с transform */ body > #search.header-search-input.header-search-portal{ position:fixed !important; top:calc(env(safe-area-inset-top, 0px) + var(--top-fixed-height, 36px) + var(--header-fixed-height, 52px)) !important; left:0 !important; right:0 !important; width:auto !important; max-width:none !important; min-width:0 !important; margin:0 !important; padding:14px 16px !important; box-sizing:border-box !important; background:#fff !important; box-shadow:0 8px 28px rgba(0,0,0,.14) !important; border-bottom:1px solid rgba(0,0,0,.08) !important; transform:translateX(-100%) !important; transition:transform 0.28s ease,opacity 0.22s ease,visibility 0.22s ease !important; opacity:0 !important; visibility:hidden !important; pointer-events:none !important; overflow:visible !important; z-index:10000050 !important; display:flex !important; flex-wrap:nowrap !important; align-items:stretch !important; } body.header-search-panel-open > #search.header-search-input.header-search-portal{ transform:translateX(0) !important; opacity:1 !important; visibility:visible !important; pointer-events:auto !important; } body > #search.header-search-input.header-search-portal #search_input, body > #search.header-search-input.header-search-portal input[type="text"]{ min-width:0 !important; width:100% !important; flex:1 1 auto !important; } @media (prefers-reduced-motion: reduce){ body > #search.header-search-input.header-search-portal{ transition:none !important; } } body header .header-inline-block.header-telephone{ display:none !important; } body header .header-inline-block.logoblock{ flex:0 0 140px !important; width:140px !important; min-width:140px !important; max-width:140px !important; padding:0 12px 0 0 !important; order:1; flex-shrink:0 !important; position:relative !important; left:0 !important; } body header .header-inline #logo{ display:flex !important; align-items:center !important; margin:0 !important; } body header .header-inline #logo img{ max-width:100% !important; max-height:42px !important; width:auto !important; height:auto !important; object-fit:contain !important; } body header .header-inline .header-inline-block.menublock{ flex:1 1 auto !important; min-width:0 !important; max-width:100% !important; overflow:visible !important; padding:0 !important; order:2; position:relative !important; left:auto !important; top:auto !important; transform:none !important; z-index:10050 !important; } body header .header-inline .header-inline-block.menublock #mainmenu, body header .header-inline .header-inline-block.menublock .mainmenu-ul{ display:flex !important; flex-wrap:nowrap !important; white-space:nowrap !important; align-items:center !important; justify-content:flex-start !important; margin:0 !important; padding:0 !important; gap:0 !important; min-width:min-content !important; } /* Панель поиска открыта: без горизонтального «прыжка» страницы */ html.header-search-overlay-open, body.header-search-overlay-open{ overflow-x:hidden !important; overflow-x:clip !important; } body header .mainmenu-ul>li{ flex-shrink:0 !important; margin:0 !important; font-size:11px !important; } body header .mainmenu-ul>li>a{ padding:6px 6px !important; font-size:11px !important; white-space:nowrap !important; display:inline-flex !important; align-items:center !important; } } /* ============================================================ Узкий диапазон 992–1050px: устранение полоски (в этом диапазоне зазор виден из-за sub-pixel/overflow) ============================================================ */ @media (min-width:992px) and (max-width:1050px){ body #top{margin-bottom:-3px !important} body header{margin-top:-2px !important} } /* Мобильное выезжающее меню: белый фон (common.css) + light.css давал color:#fff у ссылок — подписи «невидимы» */ @media (max-width: 991.98px) { body .mobile_menu_container ul li a, body .mobile_menu_container ul li a span, body .mobile_menu_container .prrtcat, body .mobile_menu_container .prrtcat span { color: #1a1a1a !important; } body .mobile_menu_container ul li a i { color: #e30016 !important; } body .mobile_menu_container ul li a img + span { flex: 1 1 auto; min-width: 0; text-align: left; } } /* Десктоп: подписи категорий в мегаменю (иконка + span) — на светлом фоне не должны унаследовать «невидимый» цвет */ @media (min-width: 992px) { #mainmenu .mainmenu-ul .inner-block li a.category-link, #mainmenu .mainmenu-ul .inner-block li a.category-link span, #mainmenu .mainmenu-ul .inner-block li a:not(.submenu-toggle) span { color: #1a1a1a !important; } } /* Хлебные крошки: desktop.min.css подключается после light.css и перебивает #333 на var(--light-gray) — текст «исчезает» на светлой полосе */ body ul.breadcrumb > li > a, body ul.breadcrumb > li > a i { color: #333 !important; } body ul.breadcrumb > li:not(:last-child) > a:hover, body ul.breadcrumb > li:not(:last-child) > a:hover i { color: #000 !important; } body ul.breadcrumb > li:last-child > a, body ul.breadcrumb > li:last-child > a i { color: #1a1a1a !important; } /* ========================================================================== Анимированный логотип «Адам и Ева» Слои: лист / яблоко / тела (лев+прав) / текст / силуэт-маска для блика. Подключение: modification/logo-anim.css (после custom.css). Разметка: .anim-logo > (.slot>.art | .half>.halfIdle>.halfArt | .sheen) ========================================================================== */ .anim-logo{ position: relative; width: 160px; aspect-ratio: 2628 / 1211; flex: 0 0 auto; perspective: 900px; perspective-origin: 58% 55%; transition: transform .35s cubic-bezier(.2,.7,.3,1); } .anim-logo:hover{ transform: translateY(-2px) scale(1.02); } .anim-logo .slot{ position:absolute; inset:0; opacity:0; } .anim-logo .art{ position:absolute; inset:0; background-repeat:no-repeat; background-position:center; background-size:contain; will-change:transform; } .anim-logo .art--leaf { background-image:url('/catalog/view/theme/default/image/logo-anim/leaf.png'); transform-origin:45% 26%; } .anim-logo .art--apple{ background-image:url('/catalog/view/theme/default/image/logo-anim/apple-solid.png'); transform-origin:54.5% 70%; } .anim-logo .art--text{ transform-origin:50% 60%; } .anim-logo--dark .art--text{ background-image:url('/catalog/view/theme/default/image/logo-anim/text-light.png'); } .anim-logo--light .art--text{ background-image:url('/catalog/view/theme/default/image/logo-anim/text-dark.png'); } /* ── тела ── */ .anim-logo .half{ position:absolute; inset:0; opacity:0; } .anim-logo .halfIdle{ position:absolute; inset:0; } .anim-logo .halfArt{ position:absolute; inset:0; background-repeat:no-repeat; background-position:center; background-size:contain; filter:url(#logoAnimWrithe); } .anim-logo .half--left { transform-origin:58% 58%; } .anim-logo .half--right { transform-origin:57% 58%; } .anim-logo .halfIdle--left { transform-origin:52% 62%; animation: logoAliveL 6.5s ease-in-out 1.8s infinite; } .anim-logo .halfIdle--right { transform-origin:63% 62%; animation: logoAliveR 6.5s ease-in-out 1.8s infinite; } .anim-logo .half--left .halfArt{ background-image:url('/catalog/view/theme/default/image/logo-anim/figures-left.png'); } .anim-logo .half--right .halfArt{ background-image:url('/catalog/view/theme/default/image/logo-anim/figures-right.png'); } /* ── блик по силуэту ── */ .anim-logo .sheen{ position:absolute; inset:0; pointer-events:none; background-image:linear-gradient(105deg, rgba(255,255,255,0) 43%, rgba(255,255,255,.92) 50%, rgba(255,255,255,0) 57%); background-size:250% 100%; background-repeat:no-repeat; background-position:85% 0; -webkit-mask-image:url('/catalog/view/theme/default/image/logo-anim/full.png'); mask-image:url('/catalog/view/theme/default/image/logo-anim/full.png'); -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; -webkit-mask-size:contain; mask-size:contain; mix-blend-mode:screen; opacity:0; animation: logoSheen 4.5s ease-in-out infinite; } /* ── вариант «только яблоко-иконка» (прелоадер) ── */ .anim-logo--icon{ width: 460px; max-width: 86vw; aspect-ratio: 1205 / 1023; perspective-origin: 50% 55%; } .anim-logo--icon .art--leaf{ background-image:url('/catalog/view/theme/default/image/logo-anim/icon-leaf.png'); transform-origin:21% 31%; } .anim-logo--icon .art--apple{ background-image:url('/catalog/view/theme/default/image/logo-anim/icon-apple.png'); transform-origin:50% 63%; } .anim-logo--icon .half--left .halfArt{ background-image:url('/catalog/view/theme/default/image/logo-anim/icon-figures-left.png'); } .anim-logo--icon .half--right .halfArt{ background-image:url('/catalog/view/theme/default/image/logo-anim/icon-figures-right.png'); } .anim-logo--icon .half--left { transform-origin:50% 69%; } .anim-logo--icon .half--right { transform-origin:48% 69%; } .anim-logo--icon .halfIdle--left { transform-origin:37% 73%; } .anim-logo--icon .halfIdle--right { transform-origin:61% 73%; } .anim-logo--icon .slot--text{ display:none; } /* в прелоадере яблоко появляется быстро и мягко (~0.3с), а не резко */ /* логотип прелоадера показываем сразу, без fade — иначе при переходах лого «моргает» (базовый .slot/.half имеет opacity:0, из-за чего был кадр без логотипа) */ .anim-logo--icon .slot, .anim-logo--icon .half{ animation: none !important; opacity: 1 !important; } /* «жизнь» стартует сразу, без задержки */ .anim-logo--icon .art--apple, .anim-logo--icon .art--leaf, .anim-logo--icon .halfIdle--left, .anim-logo--icon .halfIdle--right{ animation-delay:0s !important; } .anim-logo--icon .sheen{ -webkit-mask-image:url('/catalog/view/theme/default/image/logo-anim/icon-sheen.png'); mask-image:url('/catalog/view/theme/default/image/logo-anim/icon-sheen.png'); } /* ══════════ Анимации ══════════ */ .anim-logo .slot--apple { animation: logoIconIn .8s cubic-bezier(.16,.9,.3,1.18) .1s forwards; } .anim-logo .slot--leaf { animation: logoIconIn .85s cubic-bezier(.16,.9,.3,1.18) .26s forwards; } .anim-logo .slot--text { animation: logoTextWipe 1s cubic-bezier(.2,.7,.2,1) .42s forwards; } .anim-logo .half--left { animation: logoEveIn 1.6s cubic-bezier(.22,.75,.2,1) .65s forwards; } .anim-logo .half--right { animation: logoAdamIn 1.6s cubic-bezier(.22,.75,.2,1) .65s forwards; } .anim-logo .art--apple{ animation: logoBeat 3.2s ease-in-out .85s infinite; } .anim-logo .art--leaf { animation: logoSway 3.8s ease-in-out .85s infinite; } .anim-logo--dark .art--apple{ animation: logoBeat 3.2s ease-in-out .85s infinite, logoAppleGlow 3.2s ease-in-out .85s infinite; } .anim-logo--dark:hover .art--apple{ animation: logoBeat 3.2s ease-in-out infinite, logoAppleGlowHover 1.2s ease-in-out infinite; } .anim-logo--light .art--apple{ filter: drop-shadow(0 6px 12px rgba(0,0,0,.07)); } .anim-logo:hover .sheen{ animation-duration:2s; } .anim-logo:hover .halfIdle--left { animation-duration:3s; } .anim-logo:hover .halfIdle--right { animation-duration:3s; } @keyframes logoIconIn{ 0%{ opacity:0; transform:scale(.74) translateY(9%); filter:blur(4px); } 60%{ opacity:1; filter:blur(0); } 100%{ opacity:1; transform:scale(1) translateY(0); filter:blur(0); } } @keyframes logoPreIn{ 0%{ opacity:0; } 100%{ opacity:1; } } @keyframes logoTextWipe{ 0%{ opacity:0; clip-path:inset(0 100% 0 0); } 15%{ opacity:1; } 100%{ opacity:1; clip-path:inset(0 0 0 0); } } @keyframes logoEveIn{ 0%{ opacity:0; transform: translate(-11%, 9%) rotateY(68deg) scale(.9); } 25%{ opacity:.85; } 100%{ opacity:1; transform: translate(0,0) rotateY(0deg) scale(1); } } @keyframes logoAdamIn{ 0%{ opacity:0; transform: translate(11%, 9%) rotateY(-68deg) scale(.9); } 25%{ opacity:.85; } 100%{ opacity:1; transform: translate(0,0) rotateY(0deg) scale(1); } } @keyframes logoAliveL{ 0%{ transform:rotate(0) translate(0,0) scale(1); } 50%{ transform:rotate(1.1deg) translate(.35%,-.5%) scale(1.006); } 100%{ transform:rotate(0) translate(0,0) scale(1); } } @keyframes logoAliveR{ 0%{ transform:rotate(0) translate(0,0) scale(1); } 50%{ transform:rotate(-1.1deg) translate(-.35%,-.5%) scale(1.006); } 100%{ transform:rotate(0) translate(0,0) scale(1); } } @keyframes logoBeat{ 0%{transform:scale(1);} 9%{transform:scale(1.05);} 18%{transform:scale(1.006);} 27%{transform:scale(1.032);} 40%{transform:scale(1);} 100%{transform:scale(1);} } @keyframes logoSway{ 0%{transform:rotate(-3deg);} 50%{transform:rotate(3deg);} 100%{transform:rotate(-3deg);} } @keyframes logoSheen{ 0%,44% { background-position:85% 0; opacity:0; } 48% { opacity:.95; } 68% { opacity:.95; } 80%,100%{ background-position:15% 0; opacity:0; } } @keyframes logoAppleGlow{ 0% { filter: drop-shadow(0 0 12px rgba(227,0,22,.5)) drop-shadow(0 0 4px rgba(255,120,120,.35)); } 9% { filter: drop-shadow(0 0 26px rgba(227,0,22,.9)) drop-shadow(0 0 12px rgba(255,120,120,.65)); } 27% { filter: drop-shadow(0 0 18px rgba(227,0,22,.65)) drop-shadow(0 0 7px rgba(255,120,120,.45)); } 40% { filter: drop-shadow(0 0 12px rgba(227,0,22,.5)) drop-shadow(0 0 4px rgba(255,120,120,.35)); } 100% { filter: drop-shadow(0 0 12px rgba(227,0,22,.5)) drop-shadow(0 0 4px rgba(255,120,120,.35)); } } @keyframes logoAppleGlowHover{ 0%,100%{ filter: drop-shadow(0 0 20px rgba(227,0,22,.75)); } 50% { filter: drop-shadow(0 0 36px rgba(227,0,22,1)); } } /* ── контейнеры в шапке ── */ #logo .anim-logo, .logoblock .anim-logo{ width:220px; } /* Десктоп: снимаем жёсткие 140px у блока логотипа; логотип слева, полоса тянется по логотипу */ @media (min-width: 992px){ body header .header-inline-block.logoblock{ flex:0 0 auto !important; width:auto !important; min-width:0 !important; max-width:none !important; } body header .header-inline #logo{ width:auto !important; height:auto !important; margin:0 !important; } } /* Страховка от «margin:0 auto» из desktop.min.css, который центрирует логотип на широких экранах */ #logo .anim-logo{ margin:0 !important; } /* ── мобильная шапка: полное лого по центру (полоса увеличена до 64px) ── */ @media (max-width: 992px){ body{ padding-top: 64px; } .mobilescrollpanel{ height: 64px; } .logomobile .anim-logo{ width: auto; height: 58px; } } /* ── доступность ── */ @media (prefers-reduced-motion: reduce){ .anim-logo *, .anim-logo *::after{ animation:none !important; } .anim-logo .slot, .anim-logo .half{ opacity:1 !important; } } /* ========================================================================== Premium polish (подключать после logo-anim.css): 1) плавные переходы между страницами (cross-document View Transitions) 2) sticky-шапка со сжатием логотипа 3) микро-анимации кнопок 4) лёгкие «стеклянные» акценты меню 5) prefers-reduced-motion ========================================================================== */ /* ── 1. Переходы между страницами ── Кросс-фейд View Transitions отключён: он накладывался на прелоадер и давал мерцание. Прелоадер сам даёт непрерывное чёрное покрытие при переходах. */ #preloader{ view-transition-name: none; } /* ── 2. Sticky-шапка со сжатием логотипа (десктоп) ── */ /* sticky не работает, если у предка overflow:hidden — меняем на clip (визуально то же) */ html, body{ overflow-x: clip !important; } @media (min-width: 992px){ body header{ position: sticky !important; top: 0 !important; z-index: 1000; transition: box-shadow .3s ease; } body.scrolled header{ box-shadow: 0 10px 28px rgba(0,0,0,.38); } #logo .anim-logo{ transition: width .35s cubic-bezier(.2,.7,.3,1); } body.scrolled #logo .anim-logo{ width: 150px; } body.scrolled header .header-inline .header-inline-row{ min-height: 74px; } } /* ── 3. Микро-анимации кнопок / CTA ── */ a.button-shop, .btn, .btn-primary:not(#button-cart), .btn-secondary, button.button, .header-icons-container .btn, .mobile-icons-container a{ transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .25s ease, background-color .2s ease, color .2s ease; will-change: transform; } a.button-shop:hover, .btn:hover, .btn-primary:not(#button-cart):hover, .btn-secondary:hover, button.button:hover{ transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.28); } /* ── 4. Лёгкие стеклянные акценты для выпадающих меню ── */ #mainmenu .dropdown-menu, .mainmenu-ul li.expanded-level-1 > ul, .header-telephone-items, .header-address-items{ backdrop-filter: blur(10px) saturate(1.15); -webkit-backdrop-filter: blur(10px) saturate(1.15); border: 1px solid rgba(255,255,255,.08) !important; box-shadow: 0 18px 44px rgba(0,0,0,.42) !important; } /* ── 5. Доступность: уважаем reduced-motion ── */ @media (prefers-reduced-motion: reduce){ .preloader-glow, .preloader-particles i, .preloader-bar > i, #preloader-text{ animation: none !important; } ::view-transition-old(root), ::view-transition-new(root){ animation: none !important; } body header, #logo .anim-logo, a.button-shop, .btn, .btn-primary, .btn-secondary, button.button, .header-icons-container .btn, .mobile-icons-container a{ transition: none !important; } a.button-shop:hover, .btn:hover, .btn-primary:not(#button-cart):hover, .btn-secondary:hover, button.button:hover{ transform: none !important; } } /* ── 6. Премиум-тост (показывается вместо стандартного алерта) ── */ .cart-toast-wrap{ position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 14px); transform: translateX(-50%); z-index: 50000000; /* выше липкой шапки, ниже прелоадера (99999999) */ width: min(560px, calc(100% - 24px)); pointer-events: none; display: flex; justify-content: center; } .cart-toast{ position: relative; pointer-events: auto; display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px 16px; border-radius: 16px; background: rgba(28,28,30,.94); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); border: 1px solid rgba(255,255,255,.1); box-shadow: 0 18px 48px rgba(0,0,0,.5); color: #fff; transform: translateY(-16px); opacity: 0; transition: transform .32s cubic-bezier(.2,.8,.25,1), opacity .32s ease; overflow: hidden; } .cart-toast.is-in{ transform: translateY(0); opacity: 1; } .cart-toast::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background: linear-gradient(180deg,#ff6a6a,#e30016); } .cart-toast__icon{ flex: 0 0 auto; width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; background: radial-gradient(circle at 30% 30%, #ff6a6a, #e30016); color:#fff; font-size:16px; box-shadow: 0 0 0 6px rgba(227,0,22,.14); } .cart-toast__body{ flex: 1 1 auto; min-width: 0; } .cart-toast__title{ font-weight:700; font-size:15px; line-height:1.3; } .cart-toast__text, .cart-toast__name{ font-size:13px; opacity:.72; line-height:1.35; margin-top:2px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; } .cart-toast__btn{ flex: 0 0 auto; display:inline-flex; align-items:center; justify-content:center; padding: 10px 16px; border-radius: 12px; background: linear-gradient(135deg,#e30016,#c41e3a); color:#fff !important; font-weight:600; font-size:13px; text-decoration:none !important; white-space:nowrap; box-shadow: 0 6px 16px rgba(227,0,22,.4); transition: transform .18s ease, box-shadow .25s ease; } .cart-toast__btn:hover{ transform: translateY(-2px); box-shadow: 0 10px 22px rgba(227,0,22,.55); } .cart-toast__close{ position:absolute; top:8px; right:8px; width:26px; height:26px; border:0; border-radius:50%; background: rgba(255,255,255,.08); color:#fff; font-size:12px; display:flex; align-items:center; justify-content:center; cursor:pointer; opacity:.7; } .cart-toast__close:hover{ opacity:1; background: rgba(255,255,255,.16); } .cart-toast__progress{ position:absolute; left:0; bottom:0; height:2px; width:100%; background: linear-gradient(90deg,#ff6a6a,#e30016); transform-origin: left center; animation-name: toastProgress; animation-timing-function: linear; animation-fill-mode: forwards; } @keyframes toastProgress{ from{ transform: scaleX(1); } to{ transform: scaleX(0); } } @media (max-width: 992px){ .cart-toast-wrap{ top: calc(env(safe-area-inset-top, 0px) + 76px); } .cart-toast__btn{ padding: 10px 14px; } } /* ── 7. Анимация корзины при добавлении товара ── */ #cart-badge.is-bump{ animation: cartBadgeBump .5s cubic-bezier(.2,.8,.25,1); } #cart-button.is-bump .fa-shopping-cart{ display:inline-block; animation: cartIconBump .5s cubic-bezier(.2,.8,.25,1); } @keyframes cartBadgeBump{ 0%{transform:scale(1);} 40%{transform:scale(1.5);} 100%{transform:scale(1);} } @keyframes cartIconBump{ 0%{transform:scale(1) rotate(0);} 40%{transform:scale(1.15) rotate(-8deg);} 100%{transform:scale(1) rotate(0);} } /* ── 8. Состояние кнопки «В корзину» ── */ #button-cart.loading, #button-cart2.loading{ opacity:.75; pointer-events:none; cursor:progress; } #product #button-cart.btn-primary.is-added, #product #button-cart2.btn-primary.is-added, #product-product #button-cart.is-added, #product-product #button-cart2.is-added, body #button-cart.is-added, body #button-cart2.is-added{ background: linear-gradient(135deg,#12a150,#0e8a43) !important; border-color:#12a150 !important; color:#fff !important; -webkit-text-fill-color:#fff !important; box-shadow: 0 10px 26px rgba(18,161,80,.5) !important; transform: translateY(-1px); transition: background .25s ease, box-shadow .25s ease, transform .25s ease; } #button-cart.is-added i, #button-cart2.is-added i{ margin-right:8px; } /* ── 8b. Кнопка «В корзину» в карточках каталога ── */ .button-shop.loading{ opacity:.7; pointer-events:none; cursor:progress; } .button-shop.is-added, .product-thumb .button-shop.is-added, .product-grid .button-shop.is-added, .product-layout .button-shop.is-added{ background: linear-gradient(135deg,#12a150,#0e8a43) !important; border-color:#12a150 !important; color:#fff !important; -webkit-text-fill-color:#fff !important; box-shadow: 0 8px 20px rgba(18,161,80,.4) !important; } .button-shop.is-added i{ margin-right:6px; } @media (prefers-reduced-motion: reduce){ .cart-toast, .cart-toast__progress, #cart-badge, #cart-button .fa-shopping-cart{ animation: none !important; transition: none !important; } .cart-toast{ transform: none !important; opacity: 1 !important; } }