/* ========================================================= 1REACTOR — UNIFIED FRONTEND STYLES WordPress / WooCommerce / Enfold ОГЛАВЛЕНИЕ 01. CORE / ОСНОВНЫЕ СТИЛИ 02. SEARCH / ПОИСК 03. FAVORITES / ИЗБРАННОЕ 04. AJAX CART / AJAX-КОРЗИНА 05. BOTTOM NAVIGATION / НИЖНЯЯ НАВИГАЦИЯ ВАЖНО Все публичные стили Reactor собраны в этом файле. Стили админки и динамические inline-стили модулей сюда не входят. ========================================================= */ /* ========================================================= 01. CORE / ОСНОВНЫЕ СТИЛИ Источник до объединения: assets/css/frontend.css ========================================================= */ /* ========================================================= 01. DESKTOP MEGA MENU / ДЕСКТОПНОЕ МЕГА-МЕНЮ 01.1. Контейнер и открытие панели 01.2. Сетка и masonry-раскладка 01.3. Карточки категорий 01.4. Кнопка «Показать ещё» 01.5. Адаптивность десктопной панели ========================================================= */ #avia-menu > li.reactor-shop-menu-parent { position: static !important; } #avia-menu > li.reactor-shop-menu-parent > a .avia-menu-fx, #avia-menu > li.reactor-shop-menu-parent > a .avia-arrow-wrap, #avia-menu > li.reactor-shop-menu-parent > a .avia-arrow { display: none !important; } #avia-menu > li.reactor-shop-menu-parent > ul.sub-menu { display: block !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; position: absolute !important; top: calc(100% - 1px) !important; left: 50% !important; transform: translateX(-50%) translateY(8px) !important; width: min(1320px, calc(100vw - 40px)) !important; max-width: min(1320px, calc(100vw - 40px)) !important; max-height: calc(100vh - var(--reactor-shop-mega-top, 120px)) !important; overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain !important; -webkit-overflow-scrolling: touch !important; scrollbar-gutter: stable !important; margin: 0 !important; padding: 24px !important; background: #fff !important; border: 1px solid #edf1f4 !important; border-radius: 22px !important; box-shadow: 0 14px 34px rgba(20, 35, 45, 0.1) !important; box-sizing: border-box !important; z-index: 9999999 !important; transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease !important; } #avia-menu > li.reactor-shop-menu-parent:hover > ul.sub-menu, #avia-menu > li.reactor-shop-menu-parent > ul.sub-menu:hover { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: translateX(-50%) translateY(0) !important; } #avia-menu > li.reactor-shop-menu-parent > ul.sub-menu::before { content: "" !important; position: absolute !important; left: 0 !important; right: 0 !important; top: -2px !important; height: 3px !important; background: transparent !important; display: block !important; } #avia-menu li.reactor-shop-desktop-panel { display: block !important; float: none !important; clear: both !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; } #avia-menu li.reactor-shop-desktop-panel > a, #avia-menu li.reactor-shop-desktop-panel::before, #avia-menu li.reactor-shop-desktop-panel::after { display: none !important; content: none !important; } #avia-menu li.reactor-mobile-only-menu-item, #avia-menu li.reactor-shop-mobile-cat, #avia-menu li.reactor-shop-mobile-subcat { display: none !important; } .reactor-shop-mega__layout { gap: 18px !important; align-items: start !important; } .reactor-shop-mega__layout--grid-3 { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } .reactor-shop-mega__layout--grid-4 { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } .reactor-shop-mega__layout--grid-5 { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; } .reactor-shop-mega__layout--masonry-3 { column-count: 3 !important; column-gap: 18px !important; display: block !important; } .reactor-shop-mega__layout--masonry-4 { column-count: 4 !important; column-gap: 18px !important; display: block !important; } .reactor-shop-mega__layout--masonry-5 { column-count: 5 !important; column-gap: 18px !important; display: block !important; } .reactor-shop-mega__layout--masonry-3 .reactor-shop-mega__cat, .reactor-shop-mega__layout--masonry-4 .reactor-shop-mega__cat, .reactor-shop-mega__layout--masonry-5 .reactor-shop-mega__cat { display: inline-block !important; width: 100% !important; margin: 0 0 18px !important; break-inside: avoid !important; } .reactor-shop-mega__cat { width: 100% !important; margin: 0 !important; padding: 14px !important; background: #f9fbfc !important; border: 1px solid #edf1f4 !important; border-radius: 18px !important; box-sizing: border-box !important; transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease !important; } .reactor-shop-mega__cat.is-featured { border-color: rgba(var(--reactor-primary-rgb), 0.32) !important; box-shadow: inset 0 0 0 1px rgba(var(--reactor-primary-rgb), 0.08) !important; } .reactor-shop-mega__cat:hover { border-color: rgba(var(--reactor-primary-rgb), 0.35) !important; box-shadow: 0 8px 22px rgba(20, 35, 45, 0.07) !important; transform: translateY(-2px) !important; } .reactor-shop-mega__head { display: flex !important; align-items: center !important; gap: 12px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; text-decoration: none !important; border: 0 !important; box-shadow: none !important; } .reactor-shop-mega__image { width: var(--reactor-shop-mega-image-size, 64px) !important; height: var(--reactor-shop-mega-image-size, 64px) !important; min-width: var(--reactor-shop-mega-image-size, 64px) !important; overflow: hidden !important; border-radius: 14px !important; background: #fff !important; border: 1px solid #edf1f4 !important; } .reactor-shop-mega__image img { display: block !important; width: 100% !important; height: 100% !important; object-fit: fill !important; } .reactor-shop-mega--thumbnail-original .reactor-shop-mega__image img { object-fit: contain !important; } .reactor-shop-mega__title { color: #111 !important; font-size: 16px !important; font-weight: 600 !important; line-height: 1.25 !important; } .reactor-shop-mega__children { display: block !important; padding: 10px 0 0 76px !important; margin: 0 !important; } .reactor-shop-mega__children a { display: block !important; margin: 0 0 7px !important; padding: 0 !important; color: #555 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1.25 !important; text-decoration: none !important; } .reactor-shop-mega__children a:hover, .reactor-shop-mega__head:hover .reactor-shop-mega__title { color: var(--reactor-primary) !important; } .reactor-shop-mega__children-extra[hidden] { display: none !important; } .reactor-shop-mega__more { display: inline-flex !important; align-items: center !important; gap: 6px !important; margin: 3px 0 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; color: var(--reactor-primary) !important; font: inherit !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1.3 !important; cursor: pointer !important; box-shadow: none !important; text-decoration: none !important; } .reactor-shop-mega__more:hover, .reactor-shop-mega__more:focus { text-decoration: none !important; } .reactor-shop-mega__more-arrow { width: 7px !important; height: 7px !important; border-right: 1.5px solid currentColor !important; border-bottom: 1.5px solid currentColor !important; transform: rotate(45deg) translateY(-2px) !important; transform-origin: center !important; transition: transform 0.2s ease !important; box-sizing: border-box !important; } .reactor-shop-mega__more.is-open .reactor-shop-mega__more-arrow { transform: rotate(225deg) translate(-1px, -1px) !important; } #header_main .header-custom-widgets.cart-area, #header_main #menu-item-shop { z-index: 25 !important; } @media (max-width: 1200px) { .reactor-shop-mega__layout--grid-5, .reactor-shop-mega__layout--grid-4 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } .reactor-shop-mega__layout--masonry-4, .reactor-shop-mega__layout--masonry-5 { column-count: 3 !important; } } @media (max-width: 989px) { .reactor-shop-mega__layout--grid-3, .reactor-shop-mega__layout--grid-4, .reactor-shop-mega__layout--grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .reactor-shop-mega__layout--masonry-3, .reactor-shop-mega__layout--masonry-4, .reactor-shop-mega__layout--masonry-5 { column-count: 2 !important; } } /* ========================================================= 02. MOBILE SHOP MENU / КАТЕГОРИИ В МОБИЛЬНОМ BURGER-МЕНЮ 02.1. Родительская категория и зона клика 02.2. Стрелка раскрытия 02.3. Показ и скрытие подменю ========================================================= */ @media only screen and (max-width: 767px) { #av-burger-menu-ul li.reactor-shop-mobile-cat-has-children { position: relative !important; } #av-burger-menu-ul li.reactor-shop-mobile-cat-has-children > a.reactor-shop-mobile-category-link { position: relative !important; display: flex !important; align-items: center !important; width: 100% !important; min-height: 64px !important; padding-right: 124px !important; box-sizing: border-box !important; } #av-burger-menu-ul li.reactor-shop-mobile-cat-has-children > a.reactor-shop-mobile-category-link > .av-submenu-indicator { position: absolute !important; z-index: 50 !important; top: 0 !important; right: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 120px !important; height: 100% !important; min-height: 64px !important; margin: 0 !important; padding: 0 !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; touch-action: manipulation !important; cursor: pointer !important; } #av-burger-menu-ul li.reactor-shop-mobile-cat-has-children > a.reactor-shop-mobile-category-link > .av-submenu-indicator::before { content: "" !important; display: block !important; width: 8px !important; height: 8px !important; border-right: 2px solid currentColor !important; border-bottom: 2px solid currentColor !important; transform: rotate(45deg) !important; transition: transform 0.18s ease !important; } #av-burger-menu-ul li.reactor-shop-mobile-cat-has-children.reactor-cat-open > a.reactor-shop-mobile-category-link > .av-submenu-indicator::before { transform: rotate(225deg) !important; } #av-burger-menu-ul li.reactor-shop-mobile-cat-has-children:not(.reactor-cat-open) > ul.sub-menu { display: none !important; } #av-burger-menu-ul li.reactor-shop-mobile-cat-has-children.reactor-cat-open > ul.sub-menu { display: block !important; } } /* ========================================================= 03. CATEGORY SIDEBAR / САЙДБАР КАТЕГОРИЙ 03.1. Контейнеры и списки 03.2. Ссылка категории 03.3. Изображение, текст и зона стрелки 03.4. Hover-состояние 03.5. Активная категория 03.6. Родитель текущей категории 03.7. Подкатегории 03.8. Состояние стрелки: вниз/вверх 03.9. Отключение оверлеев Enfold 03.10. Мобильная адаптация ========================================================= */ .categories-menu { width: 100% !important; max-width: 100% !important; } .categories-menu-list, .categories-menu-sub { list-style: none !important; margin: 0 !important; padding: 0 !important; } .categories-menu-list { width: 100% !important; max-width: 100% !important; display: flex !important; flex-direction: column !important; gap: 8px !important; } .categories-menu-list > li, .categories-menu-sub > li { width: 100% !important; margin: 0 !important; padding: 0 !important; position: relative !important; } .categories-menu-link { width: 100% !important; max-width: 100% !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; padding: 10px 14px !important; text-decoration: none !important; color: #121212 !important; background: #ffffff !important; border: 1px solid #edf2f4 !important; border-radius: 16px !important; box-shadow: none !important; overflow: hidden !important; position: relative !important; transition: background-color 0.25s ease, border-color 0.25s ease !important; } .categories-menu-link::before { display: none !important; content: none !important; } .categories-menu-link__inner { display: flex !important; align-items: center !important; gap: 12px !important; min-width: 0 !important; width: 100% !important; position: relative !important; z-index: 2 !important; } .categories-menu-link__text { display: block !important; min-width: 0 !important; color: inherit !important; font-size: 15px !important; font-weight: 500 !important; line-height: 1.35 !important; word-break: break-word !important; } .categories-menu-link img { width: 40px !important; height: 40px !important; min-width: 40px !important; max-width: 40px !important; object-fit: fill !important; border-radius: 10px !important; border: 1px solid #eef2f4 !important; background: #f9fbfc !important; display: block !important; flex-shrink: 0 !important; margin: 0 !important; } .categories-menu--thumbnail-original .categories-menu-link img { object-fit: contain !important; } .categories-menu-link__arrow { width: 52px !important; height: 100% !important; min-width: 52px !important; min-height: 44px !important; flex: 0 0 52px !important; flex-shrink: 0 !important; position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; align-self: stretch !important; border: 0 !important; transform: none !important; margin: 0 -12px 0 auto !important; cursor: pointer !important; touch-action: manipulation !important; } .categories-menu-link__arrow::before { content: "" !important; display: block !important; width: 10px !important; height: 10px !important; border-right: 2px solid #9aa7ad !important; border-bottom: 2px solid #9aa7ad !important; transform: rotate(45deg) !important; transition: transform 0.25s ease, border-color 0.25s ease !important; } .categories-menu-link:hover { background: #f9fbfc !important; border-color: #dfe8ec !important; box-shadow: none !important; transform: none !important; } .categories-menu-link:hover .categories-menu-link__text { color: #121212 !important; } .categories-menu-link:hover .categories-menu-link__arrow::before { border-color: #9aa7ad !important; } .categories-menu-list > li.is-current > .categories-menu-link, .categories-menu-list > li.current-cat > .categories-menu-link, .categories-menu-list > li.current-product-cat > .categories-menu-link, .categories-menu-list > li.is-active > .categories-menu-link, .categories-menu-link.is-current, .categories-menu-link[aria-current="page"] { background: var(--reactor-primary) !important; border-color: var(--reactor-primary) !important; box-shadow: none !important; color: #ffffff !important; } .categories-menu-list > li.is-current > .categories-menu-link img, .categories-menu-list > li.current-cat > .categories-menu-link img, .categories-menu-list > li.current-product-cat > .categories-menu-link img, .categories-menu-list > li.is-active > .categories-menu-link img, .categories-menu-link.is-current img, .categories-menu-link[aria-current="page"] img { border-color: rgba(255, 255, 255, 0.35) !important; background: rgba(255, 255, 255, 0.15) !important; } .categories-menu-list > li.is-current > .categories-menu-link .categories-menu-link__text, .categories-menu-list > li.current-cat > .categories-menu-link .categories-menu-link__text, .categories-menu-list > li.current-product-cat > .categories-menu-link .categories-menu-link__text, .categories-menu-list > li.is-active > .categories-menu-link .categories-menu-link__text, .categories-menu-link.is-current .categories-menu-link__text, .categories-menu-link[aria-current="page"] .categories-menu-link__text { color: #ffffff !important; } .categories-menu-list > li.is-current > .categories-menu-link .categories-menu-link__arrow::before, .categories-menu-list > li.current-cat > .categories-menu-link .categories-menu-link__arrow::before, .categories-menu-list > li.current-product-cat > .categories-menu-link .categories-menu-link__arrow::before, .categories-menu-list > li.is-active > .categories-menu-link .categories-menu-link__arrow::before, .categories-menu-link.is-current .categories-menu-link__arrow::before, .categories-menu-link[aria-current="page"] .categories-menu-link__arrow::before { border-color: #ffffff !important; } .categories-menu-list > li.is-parent-current > .categories-menu-link, .categories-menu-list > li.current-cat-parent > .categories-menu-link, .categories-menu-list > li.current-product-cat-parent > .categories-menu-link, .categories-menu-list > li.is-active-parent > .categories-menu-link { background: #ffffff !important; border-color: #edf2f4 !important; box-shadow: none !important; color: #121212 !important; } .categories-menu-sub-wrap { margin-top: 8px !important; } .categories-menu-sub { display: flex !important; flex-direction: column !important; gap: 6px !important; padding-left: 18px !important; } .categories-menu-sub > li > .categories-menu-link { background: #f9fbfc !important; border: 1px solid #eef3f5 !important; border-radius: 14px !important; padding: 8px 12px !important; } .categories-menu-sub > li > .categories-menu-link .categories-menu-link__inner { gap: 10px !important; } .categories-menu-sub > li > .categories-menu-link img { width: 34px !important; height: 34px !important; min-width: 34px !important; max-width: 34px !important; border-radius: 9px !important; } .categories-menu-sub > li > .categories-menu-link .categories-menu-link__text { font-size: 14px !important; font-weight: 400 !important; } .categories-menu-sub > li > .categories-menu-link:hover { background: #f3f8f8 !important; border-color: #dbe8e7 !important; box-shadow: none !important; transform: none !important; } .categories-menu-sub > li.is-current > .categories-menu-link, .categories-menu-sub > li.current-cat > .categories-menu-link, .categories-menu-sub > li.current-product-cat > .categories-menu-link, .categories-menu-sub > li.is-active > .categories-menu-link, .categories-menu-sub > li > .categories-menu-link[aria-current="page"] { background: var(--reactor-primary) !important; border-color: var(--reactor-primary) !important; color: #ffffff !important; box-shadow: none !important; } .categories-menu-sub > li.is-current > .categories-menu-link .categories-menu-link__text, .categories-menu-sub > li.current-cat > .categories-menu-link .categories-menu-link__text, .categories-menu-sub > li.current-product-cat > .categories-menu-link .categories-menu-link__text, .categories-menu-sub > li.is-active > .categories-menu-link .categories-menu-link__text, .categories-menu-sub > li > .categories-menu-link[aria-current="page"] .categories-menu-link__text { color: #ffffff !important; } .categories-menu-sub > li.is-current > .categories-menu-link img, .categories-menu-sub > li.current-cat > .categories-menu-link img, .categories-menu-sub > li.current-product-cat > .categories-menu-link img, .categories-menu-sub > li.is-active > .categories-menu-link img, .categories-menu-sub > li > .categories-menu-link[aria-current="page"] img { border-color: rgba(255, 255, 255, 0.35) !important; background: rgba(255, 255, 255, 0.15) !important; } .categories-menu-sub > li.is-current > .categories-menu-link .categories-menu-link__arrow::before, .categories-menu-sub > li.current-cat > .categories-menu-link .categories-menu-link__arrow::before, .categories-menu-sub > li.current-product-cat > .categories-menu-link .categories-menu-link__arrow::before, .categories-menu-sub > li.is-active > .categories-menu-link .categories-menu-link__arrow::before, .categories-menu-sub > li > .categories-menu-link[aria-current="page"] .categories-menu-link__arrow::before { border-color: #ffffff !important; } /* * */ .categories-menu-link .categories-menu-link__arrow::before { transform: rotate(45deg) !important; transform-origin: center !important; transition: transform 0.25s ease, border-color 0.25s ease !important; } .categories-menu-list > li.is-open > .categories-menu-link .categories-menu-link__arrow::before, .categories-menu-list > li.is-expanded > .categories-menu-link .categories-menu-link__arrow::before, .categories-menu-link._spoller-active .categories-menu-link__arrow::before, .categories-menu-link.is-expanded .categories-menu-link__arrow::before, .categories-menu-link[aria-expanded="true"] .categories-menu-link__arrow::before { transform: rotate(225deg) !important; } /* * */ .categories-menu-list > li:has(> .categories-menu-sub-wrap[style*="display: none"]) > .categories-menu-link .categories-menu-link__arrow::before, .categories-menu-list > li:has(> .categories-menu-sub-wrap[style*="display:none"]) > .categories-menu-link .categories-menu-link__arrow::before { transform: rotate(45deg) !important; } .categories-menu-list > li:has(> .categories-menu-sub-wrap[style*="display: block"]) > .categories-menu-link .categories-menu-link__arrow::before, .categories-menu-list > li:has(> .categories-menu-sub-wrap[style*="display:block"]) > .categories-menu-link .categories-menu-link__arrow::before { transform: rotate(225deg) !important; } .categories-menu .image-overlay, .categories-menu .image-overlay-inside, .categories-menu .avia-arrow { display: none !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } .categories-menu-link:not(:has(img)) .categories-menu-link__inner { gap: 0 !important; } @media (max-width: 767px) { .categories-menu-list { gap: 6px !important; } .categories-menu-link { border-radius: 14px !important; padding: 9px 12px !important; } .categories-menu-link__inner { gap: 10px !important; } .categories-menu-link img { width: 40px !important; height: 40px !important; min-width: 40px !important; max-width: 40px !important; border-radius: 10px !important; } .categories-menu-link__text { font-size: 14px !important; line-height: 1.3 !important; } .categories-menu-sub { padding-left: 14px !important; margin-top: 6px !important; } .categories-menu-sub > li > .categories-menu-link { padding: 8px 10px !important; border-radius: 12px !important; } .categories-menu-sub > li > .categories-menu-link img { width: 30px !important; height: 30px !important; min-width: 30px !important; max-width: 30px !important; border-radius: 8px !important; } .categories-menu-sub > li > .categories-menu-link .categories-menu-link__text { font-size: 13px !important; } } @media only screen and (max-width: 767px) { .categories-menu a.categories-menu-link[data-toggle] > .categories-menu-link__inner > .categories-menu-link__arrow { position: absolute !important; z-index: 50 !important; top: 0 !important; right: 0 !important; bottom: 0 !important; width: 112px !important; min-width: 112px !important; height: 100% !important; min-height: 60px !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; pointer-events: auto !important; touch-action: manipulation !important; } } /* ========================================================= 04. PRODUCT SLIDER / КАРУСЕЛЬ ТОВАРОВ Карточка товара остаётся нативной WooCommerce/Enfold. Модуль управляет только каруселью, шириной элементов, стрелками навигации и точками-переключателями. 04.1. Контейнер и viewport 04.2. Лента и элементы 04.3. Стрелки навигации 04.4. Мобильная адаптация 04.5. Точки-переключатели ========================================================= */ .reactor-product-slider { --reactor-product-slider-gap: 18px; --reactor-product-slider-item-width: var(--reactor-product-slider-item-width-desktop, 280px); position: relative; width: 100%; max-width: 100%; box-sizing: border-box; } /* Prevent WooCommerce/Enfold native product layout from flashing before slider init. */ .reactor-product-slider--preinit .reactor-product-slider__track, .reactor-product-slider--preinit .reactor-product-slider__arrow, .reactor-product-slider--preinit .reactor-product-slider__bullets { visibility: hidden !important; } .reactor-product-slider--preinit .reactor-product-slider__viewport { min-height: 240px; } @media (max-width: 767px) { .reactor-product-slider--preinit .reactor-product-slider__viewport { min-height: 180px; } } .reactor-product-slider *, .reactor-product-slider *::before, .reactor-product-slider *::after { box-sizing: border-box; } .reactor-product-slider__viewport { width: calc(100% - 100px); max-width: calc(100% - 100px); margin-left: 50px; margin-right: 50px; overflow: hidden; position: relative; z-index: 1; } #top .reactor-product-slider ul.products.reactor-product-slider__track, .reactor-product-slider ul.products.reactor-product-slider__track { display: flex !important; flex-flow: row nowrap !important; align-items: stretch !important; gap: var(--reactor-product-slider-gap) !important; width: max-content !important; max-width: none !important; margin: 0 !important; padding: 0 !important; list-style: none !important; transform: translate3d(0, 0, 0); will-change: transform; } #top .reactor-product-slider ul.products.reactor-product-slider__track > li.product, .reactor-product-slider ul.products.reactor-product-slider__track > li.product { float: none !important; clear: none !important; flex: 0 0 var(--reactor-product-slider-item-width) !important; width: var(--reactor-product-slider-item-width) !important; min-width: var(--reactor-product-slider-item-width) !important; max-width: var(--reactor-product-slider-item-width) !important; margin: 0 !important; height: auto !important; position: relative !important; z-index: 1 !important; } .reactor-product-slider__arrow { position: absolute; top: 50%; z-index: 9999; isolation: isolate; pointer-events: auto; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; transform: translateY(-50%); background: #fff; color: #222; box-shadow: 0 6px 22px rgba(0, 0, 0, 0.15); font-size: 0; line-height: 1; cursor: pointer; transition: opacity 0.2s ease, transform 0.2s ease; } .reactor-product-slider__arrow::before { content: "" !important; position: absolute !important; top: 50% !important; left: 50% !important; display: block !important; width: 14px !important; height: 14px !important; box-sizing: border-box !important; border-right: 3px solid #9aa7ad !important; border-bottom: 3px solid #9aa7ad !important; transform-origin: 50% 50% !important; transition: border-color 0.25s ease !important; } .reactor-product-slider__arrow--prev::before { transform: translate(-50%, -50%) rotate(135deg) !important; } .reactor-product-slider__arrow--next::before { transform: translate(-50%, -50%) rotate(-45deg) !important; } .reactor-product-slider__arrow--prev::before { left: 55% !important; } .reactor-product-slider__arrow--next::before { left: 45% !important; } .reactor-product-slider__arrow:hover { transform: translateY(-50%) scale(1.05); } .reactor-product-slider__arrow:hover::before { border-color: #9aa7ad !important; } .reactor-product-slider__arrow:disabled { opacity: 0.35; cursor: default; } .reactor-product-slider__arrow--prev { left: 20px; } .reactor-product-slider__arrow--next { right: 20px; } .reactor-product-slider__arrow[hidden] { display: none !important; } @media (max-width: 767px) { .reactor-product-slider { --reactor-product-slider-gap: 10px; --reactor-product-slider-item-width: calc((100% - 10px) / 2); } .reactor-product-slider__viewport { width: calc(100% - 60px); max-width: calc(100% - 60px); margin-left: 30px; margin-right: 30px; } .reactor-product-slider__arrow { width: 38px; height: 38px; } .reactor-product-slider__arrow--prev { left: 10px; } .reactor-product-slider__arrow--next { right: 10px; } } /* Product slider sale price styling only. */ .reactor-product-slider .price del { color: inherit !important; text-decoration-line: line-through !important; text-decoration-color: currentColor !important; text-decoration-thickness: 3px !important; } .reactor-product-slider .price del .woocommerce-Price-amount, .reactor-product-slider .price del .woocommerce-Price-amount bdi, .reactor-product-slider .price del .woocommerce-Price-currencySymbol { color: inherit !important; text-decoration: none !important; } .reactor-product-slider .price ins, .reactor-product-slider .price ins .woocommerce-Price-amount, .reactor-product-slider .price ins .woocommerce-Price-amount bdi, .reactor-product-slider .price ins .woocommerce-Price-currencySymbol { color: #e53935 !important; text-decoration: none !important; } /* Product slider: sale currency symbol follows the red sale price. */ .reactor-product-slider .price ins .woocommerce-Price-amount bdi .woocommerce-Price-currencySymbol { color: #e53935 !important; } .reactor-product-slider__bullets { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 18px; } .reactor-product-slider__bullet { width: 9px; height: 9px; min-width: 9px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: currentColor; opacity: 0.28; cursor: pointer; } .reactor-product-slider__bullet.is-active { opacity: 1; transform: scale(1.2); } .reactor-product-slider__bullets[hidden] { display: none !important; } /* ========================================================= Mobile header/search/menu integration Only applies up to 767px. ========================================================= */ @media (max-width: 767px) { /* * Search results are positioned by search.js directly below the * actual field. These declarations prevent theme mobile rules from * moving the panel back under the top meta bar. */ html body .reactor-search .reactor-search__results { z-index: 2147482990 !important; } /* * The Enfold burger overlay must cover the complete viewport, * including #header_meta. The close button remains above it. */ html.av-burger-overlay-active #header_meta, body.av-burger-overlay-active #header_meta { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } html.av-burger-overlay-active .av-burger-overlay, body.av-burger-overlay-active .av-burger-overlay { position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100dvh !important; min-height: 100dvh !important; z-index: 2147483100 !important; } html.av-burger-overlay-active .av-burger-overlay-scroll, body.av-burger-overlay-active .av-burger-overlay-scroll { height: 100dvh !important; max-height: 100dvh !important; padding-top: 0 !important; overflow-y: auto !important; } html.av-burger-overlay-active #header_main .av-burger-menu-main, body.av-burger-overlay-active #header_main .av-burger-menu-main { position: fixed !important; top: 12px !important; right: 12px !important; z-index: 2147483646 !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; } html.av-burger-overlay-active #header_main .av-hamburger, body.av-burger-overlay-active #header_main .av-hamburger { display: block !important; visibility: visible !important; opacity: 1 !important; z-index: 2147483647 !important; } html.av-burger-overlay-active #header_main .av-hamburger-inner, html.av-burger-overlay-active #header_main .av-hamburger-inner::before, html.av-burger-overlay-active #header_main .av-hamburger-inner::after, body.av-burger-overlay-active #header_main .av-hamburger-inner, body.av-burger-overlay-active #header_main .av-hamburger-inner::before, body.av-burger-overlay-active #header_main .av-hamburger-inner::after { background-color: #111 !important; opacity: 1 !important; visibility: visible !important; } } @media(max-width:767px){.av-hamburger-inner,.av-hamburger-inner:before,.av-hamburger-inner:after,.av-burger-overlay .av-hamburger-inner,.reactor-mobile-menu-close{z-index:2147483647!important;visibility:visible!important;opacity:1!important}.av-burger-menu-main,.av-burger-menu-main>a{position:relative!important;z-index:2147483647!important}} /* iOS Safari safety: closed Enfold burger overlay must never intercept taps. */ @media (max-width: 767px) { body:not(.av-burger-overlay-active) .av-burger-overlay { pointer-events: none !important; } html.av-burger-overlay-active .av-burger-overlay, body.av-burger-overlay-active .av-burger-overlay { pointer-events: auto !important; } } /* Product slider: smaller sale badge on mobile only. */ @media (max-width: 767px) { #top .reactor-product-slider .onsale { top: -60px !important; transform: scale(0.8) !important; transform-origin: top left !important; } } \n\n /* ========================================================= PRODUCT CARD HOVER ========================================================= */ /* * Shared image stack. * These rules intentionally restore the image-container behavior that * previously lived in the child theme. */ #top ul.products li.product.type-product .product-image-hover-container.reactor-product-hover-pair { position: relative !important; overflow: hidden !important; } #top ul.products li.product.type-product .product-image-hover-container.reactor-product-hover-pair .product-main-img { z-index: 1 !important; opacity: 1 !important; visibility: visible !important; } /* ========================================================= ZOOM ========================================================= */ #top ul.products li.product.type-product .product-image-hover-container.reactor-product-hover-pair--zoom .product-main-img { transform: scale(1) !important; -webkit-transform: scale(1) !important; transform-origin: center center !important; transition: transform .35s ease !important; will-change: transform; } @media (min-width: 768px) { #top ul.products li.product.type-product:hover .product-image-hover-container.reactor-product-hover-pair--zoom .product-main-img { transform: scale(1.04) !important; -webkit-transform: scale(1.04) !important; } } /* ========================================================= CHANGE IMAGE ========================================================= */ #top ul.products li.product.type-product .product-image-hover-container.reactor-product-hover-pair--image .product-main-img { z-index: 1 !important; opacity: 1 !important; visibility: visible !important; transform: none !important; -webkit-transform: none !important; transition: opacity .45s ease, visibility .45s ease !important; } #top ul.products li.product.type-product .product-image-hover-container.reactor-product-hover-pair--image .product-hover-img { z-index: 2 !important; opacity: 0 !important; visibility: hidden !important; transform: none !important; -webkit-transform: none !important; transition: opacity .45s ease, visibility .45s ease !important; pointer-events: none !important; } @media (min-width: 768px) { #top ul.products li.product.type-product:hover .product-image-hover-container.reactor-product-hover-pair--image.has-hover-img .product-hover-img { opacity: 1 !important; visibility: visible !important; } #top ul.products li.product.type-product:hover .product-image-hover-container.reactor-product-hover-pair--image.has-hover-img .product-main-img { opacity: 0 !important; visibility: hidden !important; } } @media (max-width: 767px) { #top ul.products li.product.type-product .product-image-hover-container.reactor-product-hover-pair--image .product-hover-img { display: none !important; } #top ul.products li.product.type-product .product-image-hover-container.reactor-product-hover-pair--image .product-main-img { display: block !important; opacity: 1 !important; visibility: visible !important; } } /* ========================================================= 02. SEARCH / ПОИСК Источник до объединения: assets/css/search.css ========================================================= */ .reactor-search{position:relative;width:100%;max-width:680px}.reactor-search__form{display:flex;position:relative}.reactor-search__input{width:100%!important;height:48px!important;padding:0 52px 0 16px!important;border:1px solid #dfe5e7!important;border-radius:14px!important;background:#fff!important;box-shadow:none!important;font-size:15px!important}.reactor-search__input:focus{border-color:var(--reactor-primary)!important;box-shadow:0 0 0 3px rgba(var(--reactor-primary-rgb),.12)!important;outline:0!important}.reactor-search__button{position:absolute;right:5px;top:5px;width:38px;height:38px;border:0;border-radius:10px;background:var(--reactor-primary);color:#fff;font-size:25px;cursor:pointer}.reactor-search__results{position:absolute;z-index:999999;top:calc(100% + 8px);left:0;right:0;max-height:min(70vh,620px);overflow:auto;background:#fff;border:1px solid #e4e9ea;border-radius:16px;box-shadow:0 18px 50px rgba(20,35,40,.16)}.reactor-search-item{position:relative;display:grid;grid-template-columns:64px minmax(0,1fr);gap:14px;align-items:start;padding:12px 14px;border-bottom:1px solid #eef1f2}.reactor-search-item:hover{background:#f7fafb}.reactor-search-item__cover{position:absolute;inset:0;z-index:1}.reactor-search-item__image img{display:block;width:64px;height:64px;object-fit:contain;border-radius:10px}.reactor-search-item__content{position:relative;z-index:2;min-width:0;pointer-events:none}.reactor-search-item__meta{display:flex;align-items:baseline;justify-content:flex-start;gap:8px;flex-wrap:wrap;min-width:0;margin-top:6px;pointer-events:none}.reactor-search-item__title{font-size:14px;font-weight:600;line-height:1.35;color:#1e2a2b}.reactor-search-item__title strong{color:var(--reactor-primary)}.reactor-search-item__desc,.reactor-search-item__cats,.reactor-search-item__sku,.reactor-search-item__stock{margin-top:4px;color:#718083;font-size:12px}.reactor-search-item__price{display:block;width:100%;white-space:normal;text-align:left;font-weight:700;color:#1e2a2b}.reactor-search-item__price del{display:block;font-size:12px;font-weight:400;opacity:.55}.reactor-search-item__price ins{text-decoration:none}.reactor-search-sale,.reactor-search-star{display:inline-block;margin-bottom:5px;padding:3px 7px;border-radius:20px;background:var(--reactor-primary);color:#fff;font-size:11px}.reactor-search-more{display:block;padding:14px;text-align:center;font-weight:700;color:var(--reactor-primary)}.reactor-search-empty{padding:22px;text-align:center;color:#718083}.reactor-search.is-loading .reactor-search__button{opacity:.55}@media(max-width:767px){ .reactor-search__input{font-size:16px!important;-webkit-text-size-adjust:100%;text-size-adjust:100%} .reactor-search__input:focus{border-color:#dfe5e7!important;box-shadow:none!important;outline:0!important;-webkit-tap-highlight-color:transparent!important} .reactor-search-item{grid-template-columns:52px minmax(0,1fr)!important;column-gap:10px!important;align-items:start!important;padding:10px!important} .reactor-search-item__image{align-self:start!important} .reactor-search-item__image img{width:52px!important;height:52px!important} .reactor-search-item__content{width:100%!important;min-width:0!important} .reactor-search-item__title{display:block!important;width:100%!important;max-width:none!important;min-width:0!important} .reactor-search-item__meta{display:block!important;width:100%!important;min-width:0!important;margin-top:4px!important;padding:0!important} .reactor-search-item__price{display:block!important;width:100%!important;margin-top:2px!important;text-align:left!important;white-space:normal!important} .reactor-search__results{position:absolute;left:0;right:auto;top:calc(100% + 3px);width:calc(100vw - 40px);min-width:0;max-height:50dvh;overflow-y:auto} } .reactor-search__button{display:inline-flex;align-items:center;justify-content:center}.reactor-search__icon{width:22px;height:22px}.reactor-search.is-loading .reactor-search__icon{animation:reactor-search-spin .8s linear infinite;transform-origin:center}@keyframes reactor-search-spin{to{transform:rotate(360deg)}} /* ========================================================= 03. FAVORITES / ИЗБРАННОЕ Источник до объединения: assets/css/favorites.css ========================================================= */ .reactor-favorite-button{position:absolute!important;z-index:20!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;width:38px!important;height:38px!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;color:#222!important;box-shadow:none!important;cursor:pointer!important;line-height:1!important;-webkit-appearance:none!important;appearance:none!important;transition:transform .18s ease,color .18s ease,background-color .18s ease!important} .reactor-favorite-button:hover,.reactor-favorite-button:focus-visible{color:var(--reactor-primary,#0A95AE)!important;transform:scale(1.06)!important;outline:none!important} .reactor-favorite-button:active{transform:scale(.94)!important} .reactor-favorite-button__icon{display:block!important;width:25px!important;height:25px!important;background-color:currentColor!important;-webkit-mask:url('../icons/favorites/heart-outline.svg') center/contain no-repeat!important;mask:url('../icons/favorites/heart-outline.svg') center/contain no-repeat!important;pointer-events:none!important} .reactor-favorite-button.is-active{color:var(--reactor-primary,#0A95AE)!important} .reactor-favorite-button.is-active .reactor-favorite-button__icon{-webkit-mask-image:url('../icons/favorites/heart-filled.svg')!important;mask-image:url('../icons/favorites/heart-filled.svg')!important} .woocommerce ul.products li.product,.woocommerce-page ul.products li.product{position:relative!important} .reactor-favorite-button--archive{top:10px!important;right:10px!important} .reactor-favorite-button--single{top:14px!important;right:14px!important;width:44px!important;height:44px!important;border-radius:12px!important;background:#f0f1f2!important;box-shadow:none!important} .reactor-favorite-button--single .reactor-favorite-button__icon{width:27px!important;height:27px!important} .woocommerce-product-gallery{position:relative!important} /* Keep the single-product favorite control above Enfold image hover/lightbox overlays. */ .single-product .woocommerce-product-gallery{isolation:isolate!important} .single-product .woocommerce-product-gallery .image-overlay{z-index:5!important} .single-product .woocommerce-product-gallery .reactor-favorite-button--single{z-index:10050!important;pointer-events:auto!important} .reactor-favorites-page{min-height:120px} .reactor-favorites-page ul.products{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:10px!important;margin:0!important;padding:0 10px!important;box-sizing:border-box!important} .reactor-favorites-page ul.products li.product{float:none!important;width:auto!important;margin:0!important;clear:none!important} .reactor-favorites-empty,.reactor-favorites-loading{padding:28px;border:1px solid #e5e7eb;border-radius:14px;background:#fafafa;text-align:center;color:#555} .reactor-favorite-button.is-loading{pointer-events:none!important;opacity:.55!important} @media(max-width:767px){.reactor-favorite-button--archive{top:7px!important;right:7px!important;width:34px!important;height:34px!important}.reactor-favorite-button--archive .reactor-favorite-button__icon{width:23px!important;height:23px!important}.reactor-favorite-button--single{top:10px!important;right:10px!important}} /* Desktop Enfold header actions: Cart -> Favorites -> Account, icons only. */ .reactor-header-action{ position:relative!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; flex:0 0 44px!important; width:44px!important; height:44px!important; margin:0 0 0 6px!important; padding:0!important; color:#111!important; text-decoration:none!important; line-height:1!important; box-sizing:border-box!important; vertical-align:top!important; -webkit-tap-highlight-color:transparent!important; transition:color .18s ease,background-color .18s ease,transform .18s ease!important; } .reactor-header-action:hover, .reactor-header-action:focus-visible{ color:var(--reactor-primary,#0A95AE)!important; background:transparent!important; text-decoration:none!important; outline:none!important; } .reactor-header-action:active{transform:scale(.96)!important} .reactor-header-action__icon{ display:block!important; width:28px!important; height:28px!important; background-color:currentColor!important; -webkit-mask-image:var(--reactor-header-action-icon)!important; mask-image:var(--reactor-header-action-icon)!important; -webkit-mask-position:center!important; mask-position:center!important; -webkit-mask-repeat:no-repeat!important; mask-repeat:no-repeat!important; -webkit-mask-size:contain!important; mask-size:contain!important; pointer-events:none!important; } .reactor-header-action__badge{ position:absolute!important; top:1px!important; left:26px!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; min-width:20px!important; height:20px!important; padding:0 5px!important; border:2px solid #fff!important; border-radius:999px!important; background:var(--reactor-primary,#0A95AE)!important; color:#fff!important; font-size:10px!important; font-weight:700!important; line-height:1!important; box-sizing:border-box!important; pointer-events:none!important; } /* Keep Enfold's native cart element and hover dropdown intact. */ #header_main #menu-item-shop{ order:10!important; margin-left:6px!important; } #header_main .reactor-header-favorites{order:11!important} #header_main .reactor-header-account{order:12!important} @media only screen and (max-width:989px){ .reactor-header-action{display:none!important} #header_main #menu-item-shop{margin-left:0!important} } @media(max-width:989px){.reactor-favorites-page ul.products{grid-template-columns:repeat(3,minmax(0,1fr))!important}} @media(max-width:767px){.reactor-favorites-page ul.products{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;padding:0!important}} @media(max-width:420px){.reactor-favorites-page ul.products{grid-template-columns:repeat(2,minmax(0,1fr))!important}} /* ========================================================= 04. AJAX CART / AJAX-КОРЗИНА Источник до объединения: assets/css/ajax-cart.css ========================================================= */ body.reactor-ajax-cart-enabled .custom-cart-notification { position: fixed !important; top: 50% !important; left: 50% !important; right: auto !important; z-index: 999999 !important; min-width: 320px !important; max-width: 420px !important; opacity: 0 !important; visibility: hidden !important; transform: translate(-50%, -50%) scale(.86) !important; transition: opacity .28s ease, transform .28s ease, visibility .28s ease !important; pointer-events: none !important; } body.reactor-ajax-cart-enabled .custom-cart-notification.show { opacity: 1 !important; visibility: visible !important; transform: translate(-50%, -50%) scale(1) !important; pointer-events: auto !important; } body.reactor-ajax-cart-enabled .custom-cart-notification.show * { pointer-events: auto !important; } body.reactor-ajax-cart-enabled .notification-content { position: relative !important; z-index: 1000000 !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 14px !important; padding: 18px 22px !important; background: #fff !important; border: 1px solid rgba(var(--reactor-primary-rgb), .14) !important; border-radius: 20px !important; box-shadow: 0 18px 46px rgba(20,35,40,.14), 0 4px 12px rgba(20,35,40,.06) !important; box-sizing: border-box !important; } body.reactor-ajax-cart-enabled .notification-icon { display: block !important; width: 42px !important; height: 42px !important; flex-shrink: 0 !important; background-color: var(--reactor-primary) !important; -webkit-mask-image: url(../icons/ajax-cart/checkmark-circle.svg) !important; mask-image: url(../icons/ajax-cart/checkmark-circle.svg) !important; -webkit-mask-repeat: no-repeat !important; mask-repeat: no-repeat !important; -webkit-mask-position: center !important; mask-position: center !important; -webkit-mask-size: contain !important; mask-size: contain !important; } body.reactor-ajax-cart-enabled .notification-icon img { display: none !important; } body.reactor-ajax-cart-enabled .notification-texts { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 4px !important; min-width: 0 !important; } body.reactor-ajax-cart-enabled .notification-main-text { margin: 0 !important; color: #1e2a2b !important; font-size: 15px !important; font-weight: 600 !important; line-height: 1.35 !important; white-space: nowrap !important; } body.reactor-ajax-cart-enabled .notification-link { position: relative !important; z-index: 1000001 !important; color: var(--reactor-primary) !important; text-decoration: none !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1.3 !important; white-space: nowrap !important; transition: opacity .2s ease !important; } body.reactor-ajax-cart-enabled .notification-link:hover { opacity: .75 !important; text-decoration: none !important; } /* Hide only duplicate success notices while this module is enabled. Errors and information remain visible. */ body.reactor-ajax-cart-enabled .woocommerce-message, body.reactor-ajax-cart-enabled .added_to_cart_notification { display: none !important; } @media (max-width: 480px) { body.reactor-ajax-cart-enabled .custom-cart-notification { width: calc(100% - 32px) !important; min-width: 0 !important; } body.reactor-ajax-cart-enabled .notification-main-text, body.reactor-ajax-cart-enabled .notification-link { white-space: normal !important; } } /* ========================================================= 05. BOTTOM NAVIGATION / НИЖНЯЯ НАВИГАЦИЯ Источник до объединения: assets/css/bottom-navigation.css ========================================================= */ #reactor-bottom-navigation { box-sizing: border-box; overflow: hidden; position: fixed; right: 0; bottom: 0; left: 0; z-index: 2147483000; display: block; width: auto; max-width: none; margin: 0; min-height: calc(var(--reactor-bottom-nav-height) + env(safe-area-inset-bottom, 0px)); padding: var(--reactor-bottom-nav-padding) 0 calc(var(--reactor-bottom-nav-padding) + env(safe-area-inset-bottom, 0px)); background: rgba(var(--reactor-bottom-nav-bg-rgb), var(--reactor-bottom-nav-opacity)); border-top: 1px solid rgba(0, 0, 0, .08); box-shadow: 0 -8px 28px rgba(0, 0, 0, .10); transform: translate3d(0, 0, 0); transition: transform .24s ease, opacity .24s ease, visibility .24s ease; } #reactor-bottom-navigation.is-hidden { transform: translate3d(0, 110%, 0); opacity: 0; visibility: hidden; pointer-events: none; } .reactor-bottom-navigation__inner { box-sizing: border-box; gap: 0; overflow: visible; padding: 0; display: flex; align-items: stretch; justify-content: center; width: 100%; max-width: 720px; min-height: var(--reactor-bottom-nav-height); margin: 0 auto; } .reactor-bottom-navigation__item { box-sizing: border-box; max-width: none; overflow: visible; position: relative; display: flex; flex: 1 1 20%; min-width: 0; min-height: var(--reactor-bottom-nav-height); padding: 7px 4px 6px; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--reactor-bottom-nav-text) !important; text-decoration: none !important; -webkit-tap-highlight-color: transparent; transition: color .18s ease, background-color .18s ease, transform .18s ease; } .reactor-bottom-navigation__item:hover, .reactor-bottom-navigation__item:focus-visible, .reactor-bottom-navigation__item.is-current { color: var(--reactor-primary, #0A95AE) !important; background: rgba(0, 0, 0, .025); } .reactor-bottom-navigation__item:active { transform: scale(.96); } .reactor-bottom-navigation__icon { flex: 0 0 auto; max-width: 100%; display: inline-flex; width: 25px; height: 25px; align-items: center; justify-content: center; line-height: 1; } .reactor-bottom-navigation__svg { display: block; width: 24px; height: 24px; background-color: currentColor; -webkit-mask-image: var(--reactor-bottom-nav-icon); mask-image: var(--reactor-bottom-nav-icon); -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; pointer-events: none; } .reactor-bottom-navigation__label { box-sizing: border-box; width: 100%; min-width: 0; padding: 0; display: block; max-width: 100%; overflow: hidden; font-size: 10px; font-weight: 500; line-height: 1.1; text-align: center; text-overflow: ellipsis; white-space: nowrap; } .reactor-bottom-navigation__badge { position: absolute; top: 5px; left: calc(50% + 5px); display: inline-flex; min-width: 17px; height: 17px; padding: 0 4px; align-items: center; justify-content: center; border: 2px solid rgba(var(--reactor-bottom-nav-bg-rgb), 1); border-radius: 999px; background: var(--reactor-primary, #0A95AE); color: #fff; font-size: 9px; font-weight: 700; line-height: 1; box-sizing: border-box; } .reactor-bottom-navigation--icons-only .reactor-bottom-navigation__item { box-sizing: border-box; max-width: none; overflow: visible; padding-top: 8px; padding-bottom: 8px; } .reactor-bottom-navigation--icons-only .reactor-bottom-navigation__icon, .reactor-bottom-navigation--icons-only .reactor-bottom-navigation__svg { width: 28px; height: 28px; } @media (prefers-reduced-motion: reduce) { #reactor-bottom-navigation, .reactor-bottom-navigation__item { transition: none !important; } } @media(max-width:767px){.av-hamburger-inner,.av-hamburger-inner:before,.av-hamburger-inner:after,.av-burger-overlay .av-hamburger-inner,.reactor-mobile-menu-close{z-index:2147483647!important;visibility:visible!important;opacity:1!important}.av-burger-menu-main,.av-burger-menu-main>a{position:relative!important;z-index:2147483647!important}} /* ========================================================= TELEGRAM APPEARANCE ========================================================= */ @media (max-width: 767px) { html.reactor-telegram-browser #reactor-bottom-navigation, body.reactor-telegram-browser #reactor-bottom-navigation { width: var(--reactor-bottom-nav-tg-panel-width) !important; max-width: var(--reactor-bottom-nav-tg-panel-width) !important; bottom: var(--reactor-bottom-nav-tg-bottom-offset) !important; min-height: calc( var(--reactor-bottom-nav-tg-height) + (var(--reactor-bottom-nav-tg-padding) * 2) ) !important; padding: var(--reactor-bottom-nav-tg-padding) 0 var(--reactor-bottom-nav-tg-padding) !important; background: rgba( var(--reactor-bottom-nav-tg-bg-rgb), var(--reactor-bottom-nav-tg-opacity) ) !important; color: var(--reactor-bottom-nav-tg-text) !important; border-radius: var(--reactor-bottom-nav-tg-radius) !important; } html.reactor-telegram-browser #reactor-bottom-navigation .reactor-bottom-navigation__inner, body.reactor-telegram-browser #reactor-bottom-navigation .reactor-bottom-navigation__inner { height: var(--reactor-bottom-nav-tg-height) !important; min-height: var(--reactor-bottom-nav-tg-height) !important; max-height: var(--reactor-bottom-nav-tg-height) !important; } html.reactor-telegram-browser #reactor-bottom-navigation .reactor-bottom-navigation__item, html.reactor-telegram-browser #reactor-bottom-navigation .reactor-bottom-navigation__label, body.reactor-telegram-browser #reactor-bottom-navigation .reactor-bottom-navigation__item, body.reactor-telegram-browser #reactor-bottom-navigation .reactor-bottom-navigation__label { color: var(--reactor-bottom-nav-tg-text) !important; } html.reactor-telegram-browser #reactor-bottom-navigation .reactor-bottom-navigation__item.is-current, html.reactor-telegram-browser #reactor-bottom-navigation .reactor-bottom-navigation__item:hover, body.reactor-telegram-browser #reactor-bottom-navigation .reactor-bottom-navigation__item.is-current, body.reactor-telegram-browser #reactor-bottom-navigation .reactor-bottom-navigation__item:hover { color: var(--reactor-primary, #0A95AE) !important; } } /* ========================================================= LIQUID GLASS ========================================================= */ #reactor-bottom-navigation.reactor-bottom-navigation--liquid-glass { background: linear-gradient( 135deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .025) ), rgba( var(--reactor-bottom-nav-bg-rgb), calc(var(--reactor-bottom-nav-opacity) * .75) ) !important; -webkit-backdrop-filter: blur(2px) saturate(125%) !important; backdrop-filter: blur(2px) saturate(125%) !important; border: 1px solid rgba(255, 255, 255, .14) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -1px 0 rgba(255, 255, 255, .025), 0 10px 30px rgba(0, 0, 0, .16) !important; } html.reactor-telegram-browser #reactor-bottom-navigation.reactor-bottom-navigation--liquid-glass, body.reactor-telegram-browser #reactor-bottom-navigation.reactor-bottom-navigation--liquid-glass { background: linear-gradient( 135deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .025) ), rgba( var(--reactor-bottom-nav-tg-bg-rgb), calc(var(--reactor-bottom-nav-tg-opacity) * .75) ) !important; } #reactor-bottom-navigation.reactor-bottom-navigation--liquid-glass::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none; background: radial-gradient( circle at 20% 0%, rgba(255,255,255,.10), transparent 42% ), radial-gradient( circle at 80% 100%, rgba(255,255,255,.045), transparent 44% ); } #reactor-bottom-navigation.reactor-bottom-navigation--liquid-glass .reactor-bottom-navigation__inner { position: relative !important; z-index: 1 !important; } /* ========================================================= LABEL VISIBILITY ========================================================= */ #reactor-bottom-navigation.reactor-bottom-navigation--icons-only .reactor-bottom-navigation__label { display: none !important; visibility: hidden !important; opacity: 0 !important; height: 0 !important; min-height: 0 !important; max-height: 0 !important; margin: 0 !important; padding: 0 !important; line-height: 0 !important; overflow: hidden !important; pointer-events: none !important; } /* ========================================================= ACTIVE ITEM — NO BACKGROUND ========================================================= */ #reactor-bottom-navigation .reactor-bottom-navigation__item, #reactor-bottom-navigation .reactor-bottom-navigation__item:hover, #reactor-bottom-navigation .reactor-bottom-navigation__item:focus, #reactor-bottom-navigation .reactor-bottom-navigation__item:active, #reactor-bottom-navigation .reactor-bottom-navigation__item.is-current, #reactor-bottom-navigation .reactor-bottom-navigation__item[aria-current="page"] { background: transparent !important; background-color: transparent !important; box-shadow: none !important; } /* ========================================================= CART / FAVORITES BADGES — SOLID BRAND CIRCLE ========================================================= */ #reactor-bottom-navigation .reactor-bottom-navigation__badge, #reactor-bottom-navigation .reactor-bottom-navigation__badge--favorites, #reactor-bottom-navigation .reactor-bottom-navigation__badge--cart { background: var(--reactor-primary) !important; background-color: var(--reactor-primary) !important; color: #fff !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; } html.reactor-telegram-browser #reactor-bottom-navigation .reactor-bottom-navigation__badge, html.reactor-telegram-browser #reactor-bottom-navigation .reactor-bottom-navigation__badge--favorites, html.reactor-telegram-browser #reactor-bottom-navigation .reactor-bottom-navigation__badge--cart, body.reactor-telegram-browser #reactor-bottom-navigation .reactor-bottom-navigation__badge, body.reactor-telegram-browser #reactor-bottom-navigation .reactor-bottom-navigation__badge--favorites, body.reactor-telegram-browser #reactor-bottom-navigation .reactor-bottom-navigation__badge--cart { background: var(--reactor-primary) !important; background-color: var(--reactor-primary) !important; color: #fff !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; } /* ========================================================= IOS TELEGRAM — CENTERED + SMOOTH ========================================================= */ @media (max-width: 767px) { html.reactor-telegram-browser #reactor-bottom-navigation, body.reactor-telegram-browser #reactor-bottom-navigation { left: 50% !important; right: auto !important; width: var(--reactor-bottom-nav-tg-panel-width) !important; max-width: var(--reactor-bottom-nav-tg-panel-width) !important; transform: translate3d(-50%, var(--reactor-ios-tg-shift-y, 0px), 0) !important; transition: transform .42s cubic-bezier(.16, 1, .3, 1), opacity .20s ease, background-color .20s ease !important; will-change: transform, bottom; -webkit-backface-visibility: hidden; backface-visibility: hidden; } } /* ========================================================= 22. CATEGORY GRID / CATEGORY CARDS ========================================================= */ .categories__item-price { display: none !important; } #top ul.products.categories__content, #top ul.products:has(li.reactor-category-card) { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 18px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } #top ul.products.categories__content > li.reactor-category-card, #top ul.products:has(li.reactor-category-card) > li.reactor-category-card { width: 100% !important; margin: 0 !important; padding: 0 !important; float: none !important; clear: none !important; border: none !important; list-style: none !important; } .reactor-category-card .inner_product, .reactor-category-card .thumbnail_container, .reactor-category-card .avia_cart_buttons { display: contents !important; } .reactor-category-card a, .reactor-category-card a:hover { text-decoration: none !important; } .categories__content-item { position: relative !important; display: flex !important; flex-direction: column !important; width: 100% !important; min-height: 100% !important; overflow: hidden !important; background: #fff !important; border: 1px solid #edf1f4 !important; border-radius: 22px !important; box-shadow: 0 10px 28px rgba(20,35,45,.07) !important; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important; } .categories__content-item .image-overlay, .categories__content-item .image-overlay-inside, .categories__content-item::before { display: none !important; content: none !important; } /* Fixed square image area. The original file is centered inside it. */ .categories__content-item > img { position: relative !important; order: 1 !important; display: block !important; width: calc(100% - 24px) !important; height: auto !important; aspect-ratio: 1 / 1 !important; margin: 12px auto 0 !important; padding: 12px !important; object-position: 50% 50% !important; background: #fff !important; border-radius: 0 !important; box-sizing: border-box !important; transform: none !important; } .categories__content-item.reactor-category-thumbnail--original > img { object-fit: contain !important; } .categories__content-item.reactor-category-thumbnail--stretch > img { object-fit: fill !important; } .categories__item-head { position: relative !important; order: 2 !important; display: flex !important; flex-direction: column !important; justify-content: center !important; gap: 6px !important; width: 100% !important; min-height: 88px !important; margin: 0 !important; padding: 16px 56px 18px 16px !important; background: #fff !important; box-sizing: border-box !important; } .categories__item-title { margin: 0 !important; color: #111 !important; font-size: 16px !important; font-weight: 600 !important; line-height: 1.25 !important; overflow: hidden !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; } .categories__item-count { margin: 0 !important; color: #6d747c !important; font-size: 13px !important; font-weight: 400 !important; } .categories__item-btn { position: absolute !important; right: 16px !important; bottom: 22px !important; width: 34px !important; height: 34px !important; z-index: 10 !important; } .categories__item-btn svg { display: block !important; width: 34px !important; height: 34px !important; } .categories__item-btn circle { fill: #f3f8fa !important; transition: .25s ease !important; } .categories__item-btn path { stroke: #111 !important; transition: .25s ease !important; } .categories__content-item:hover { transform: translateY(-4px) !important; border-color: rgba(var(--r1-primary-rgb),.35) !important; box-shadow: 0 18px 42px rgba(20,35,45,.14) !important; } .categories__content-item:hover > img { transform: none !important; } .categories__content-item:hover .categories__item-btn circle { fill: var(--r1-primary) !important; } .categories__content-item:hover .categories__item-btn path { stroke: #fff !important; } @media (max-width: 1200px) { #top ul.products.categories__content, #top ul.products:has(li.reactor-category-card) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } @media (max-width: 900px) { #top ul.products.categories__content, #top ul.products:has(li.reactor-category-card) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px !important; } } @media (max-width: 520px) { #top ul.products.categories__content, #top ul.products:has(li.reactor-category-card) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; } .categories__content-item { border-radius: 16px !important; } .categories__content-item > img { width: calc(100% - 16px) !important; height: auto !important; aspect-ratio: 1 / 1 !important; margin: 8px auto 0 !important; padding: 8px !important; object-position: 50% 50% !important; } .categories__item-head { min-height: 72px !important; padding: 10px 38px 12px 10px !important; gap: 4px !important; } .categories__item-title { font-size: 13px !important; line-height: 1.2 !important; } .categories__item-count { font-size: 11px !important; } .categories__item-btn { width: 26px !important; height: 26px !important; right: 10px !important; bottom: 18px !important; } .categories__item-btn svg { width: 26px !important; height: 26px !important; } }