/*
Theme Name: BONO Child
Theme URI: https://wpshop.ru/themes/bono
Description: Дочерняя тема для сайта МАФБАЗА на базе темы BONO
Author: MAFBAZA
Template: bono
Version: 1.5.0
*/

:root {
--site-max-width: 1440px;
--brand-primary: #155336;
--brand-dark: #11422b;
--brand-darker: #0c2e1e;
}

/* Глобальный сброс для полноширинных страниц темы */
html,
body {
overflow-x: hidden !important;
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
max-width: 100% !important;
}

#page,
#content,
#content.fixed,
.site-content,
.site-content.fixed,
.site-content-inner,
.site-main,
.site-main-fullwidth {
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
box-sizing: border-box !important;
}

.e-con,
.e-con-inner,
.e-child,
.e-parent,
.elementor-widget,
.elementor-widget-container,
.glass-card-container {
min-width: 0 !important;
box-sizing: border-box !important;
}

/* Стилизация Glassmorphism карточек */
.glass-card-container {
background: rgba(255, 255, 255, 0.08) !important;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.18) !important;
border-radius: 20px !important;
padding: 16px !important;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
overflow: hidden !important;
width: 100% !important;
max-width: 100% !important;
}

/* Первый экран (Hero) */
.mafbaza-hero {
background: linear-gradient(135deg, #0c2e1e 0%, #11422b 50%, #155336 100%) !important;
position: relative;
width: 100% !important;
max-width: 100% !important;
overflow: hidden;
}

.mafbaza-hero::before {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px);
background-size: 16px 16px;
pointer-events: none;
z-index: 0;
}

.mafbaza-hero > .e-con-inner,
.mafbaza-hero > .e-child {
position: relative;
z-index: 1;
}

/* Пре-хэдер (Top Bar) */
.mafbaza-topbar {
display: flex;
justify-content: space-between;
align-items: center;
max-width: var(--site-max-width);
margin: 0 auto;
padding: 6px 15px;
font-size: 13px;
color: #e2e8f0;
background-color: #0c2e1e;
}

.mafbaza-topbar-left,
.mafbaza-topbar-right {
display: flex;
align-items: center;
gap: 12px;
}

.mafbaza-topbar .divider { color: #245e41; }
.mafbaza-topbar a { color: #ffffff; text-decoration: none; font-weight: 500; transition: opacity 0.2s; }
.mafbaza-topbar a:hover { color: #4ade80; }
.topbar-btn { background-color: #155336; color: #ffffff !important; border: none; padding: 4px 12px; border-radius: 4px; font-size: 12px; font-weight: 600; cursor: pointer; transition: background-color 0.2s; }
.topbar-btn:hover { background-color: #166534; }

@media (max-width: 768px) {
.hide-mobile { display: none !important; }
.mafbaza-topbar-left { font-size: 11px; }
.topbar-email { display: none !important; }
}

/* ==========================================================================
ЖЕСТКОЕ ЦЕНТРИРОВАНИЕ И СЕТКА ДЛЯ СТРАНИЦЫ ТОВАРА (WOOCOMMERCE + BONO)
========================================================================== */

/* 1. Переопределение родительских оберток темы BONO */
body.single-product #page,
body.single-product #content,
body.single-product #primary,
body.single-product .site-content,
body.single-product .site-main {
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
float: none !important;
}

/* 2. Центрирование главного контейнера товара */
body.single-product .product-container,
body.single-product div.product {
max-width: 1280px !important;
width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
margin-top: 35px !important;
padding-left: 20px !important;
padding-right: 20px !important;
box-sizing: border-box !important;
display: flex !important;
flex-wrap: wrap !important;
gap: 40px !important;
align-items: flex-start !important;
float: none !important;
clear: both !important;
}

/* 3. Левая колонка (Галерея) и Правая колонка (Инфо) */
body.single-product .product-images {
flex: 1 1 480px !important;
max-width: 50% !important;
width: 50% !important;
box-sizing: border-box !important;
}

body.single-product .product-info {
flex: 1 1 480px !important;
max-width: calc(50% - 40px) !important;
width: calc(50% - 40px) !important;
box-sizing: border-box !important;
}

/* 4. Полное удаление артефактов Previous / Next FlexSlider */
body.single-product .woocommerce-product-gallery .flex-direction-nav,
body.single-product ul.flex-direction-nav,
.flex-direction-nav {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
height: 0 !important;
width: 0 !important;
pointer-events: none !important;
}

/* 5. Адаптив под мобильные */
@media (max-width: 768px) {
body.single-product .product-container,
body.single-product div.product {
margin-top: 15px !important;
gap: 20px !important;
padding-left: 12px !important;
padding-right: 12px !important;
}

body.single-product .product-images,
body.single-product .product-info {
    max-width: 100% !important;
    width: 100% !important;
    flex: 1 1 100% !important;
}


}









































/* ==========================================================================

ОБЩИЕ СБРОСЫ И ОТМЕНА ДЕКОРАЦИЙ ДЛЯ ВСЕХ МЕНЮ
========================================================================== */
.elementor-nav-menu li,
.elementor-nav-menu a,
.elementor-nav-menu span,
.e-n-menu-item,
.e-n-menu-title,
.e-n-menu-title-container {
transform: none !important;
transition: color 0.2s ease, background-color 0.2s ease !important;
}

.elementor-nav-menu .elementor-item::before,
.elementor-nav-menu .elementor-item::after,
.elementor-nav-menu .elementor-sub-item::before,
.elementor-nav-menu .elementor-sub-item::after,
.elementor-nav-menu a::before,
.elementor-nav-menu a::after {
display: none !important;
content: none !important;
}

/* ==========================================================================
2. СТИЛИЗАЦИЯ МЕНЮ В ФУТЕРЕ (ВЕРТИКАЛЬНОЕ МЕНЮ)
========================================================================== */

/* Вертикальное меню футера: базовый светлый цвет текста */
.elementor-widget-nav-menu .elementor-nav-menu--layout-vertical .elementor-nav-menu a.elementor-item,
.elementor-widget-nav-menu .elementor-nav-menu--layout-vertical .elementor-nav-menu .removed-link,
.elementor-widget-nav-menu .elementor-nav-menu--layout-vertical .elementor-nav-menu li a,
.elementor-widget-nav-menu .elementor-nav-menu--layout-vertical .elementor-nav-menu li span {
color: #e2e8f0 !important;
font-weight: 500 !important;
background: transparent !important;
transform: none !important;
margin-left: 0 !important;
padding-left: 0 !important;
padding-top: 4px !important;
padding-bottom: 4px !important;
display: inline-flex !important;
align-items: center !important;
}

/* Ховер в футере: светло-зеленый текст */
.elementor-widget-nav-menu .elementor-nav-menu--layout-vertical .elementor-nav-menu a.elementor-item:hover,
.elementor-widget-nav-menu .elementor-nav-menu--layout-vertical .elementor-nav-menu li:hover > a {
color: #4ade80 !important;
background: transparent !important;
transform: none !important;
}

/* Активный пункт в футере: белый цвет, ровное выравнивание без съезжания */
.elementor-widget-nav-menu .elementor-nav-menu--layout-vertical .elementor-nav-menu li.current-menu-item > a,
.elementor-widget-nav-menu .elementor-nav-menu--layout-vertical .elementor-nav-menu li.current-menu-item > .removed-link,
.elementor-widget-nav-menu .elementor-nav-menu--layout-vertical .elementor-nav-menu li.current-menu-ancestor > a,
.elementor-widget-nav-menu .elementor-nav-menu--layout-vertical .elementor-nav-menu li.current-menu-ancestor > .removed-link,
.elementor-widget-nav-menu .elementor-nav-menu--layout-vertical .elementor-nav-menu .elementor-item.elementor-item-active {
color: #ffffff !important;
background: transparent !important;
font-weight: 500 !important;
transform: none !important;
margin-left: 0 !important;
padding-left: 0 !important;
border: none !important;
box-shadow: none !important;
position: static !important;
}

/* ==========================================================================
3. СТИЛИЗАЦИЯ МЕНЮ В ХЭДЕРЕ (ГОРИЗОНТАЛЬНАЯ ПАНЕЛЬ И ВЫПАДАЮЩИЙ КАТАЛОГ)
========================================================================== */

/* 3.1 Горизонтальные плашки шапки ("Каталог продукции", "О компании" и т.д.) */
.e-n-menu-heading > .e-n-menu-item:first-child .e-n-menu-title {
background-color: #11422B !important;
padding: 12px 20px !important;
border-radius: 6px 6px 0 0 !important;
transform: none !important;
}

.e-n-menu-heading > .e-n-menu-item:first-child .e-n-menu-title:hover {
background-color: #0c3321 !important;
transform: none !important;
}

.e-n-menu-heading > .e-n-menu-item:not(:first-child) .e-n-menu-title-container {
padding: 10px 16px !important;
border-radius: 6px !important;
transform: none !important;
background: transparent !important;
}

.e-n-menu-heading > .e-n-menu-item:not(:first-child) .e-n-menu-title-text {
color: #ffffff !important;
font-size: 14px !important;
font-weight: 600 !important;
transform: none !important;
}

.e-n-menu-heading > .e-n-menu-item:not(:first-child):hover .e-n-menu-title-container {
background-color: #155336 !important;
transform: none !important;
}

.e-n-menu-heading > .e-n-menu-item:not(:first-child):hover .e-n-menu-title-text {
color: #ffffff !important;
}

.e-n-menu-heading .e-n-menu-item.e-active .e-n-menu-title-text,
.e-n-menu-heading .e-n-menu-item .e-focus .e-n-menu-title-text,
.e-n-menu-heading .e-n-menu-item.current-menu-item .e-n-menu-title-text {
color: #ffffff !important;
font-weight: 600 !important;
transform: none !important;
}

/* 3.2 Выпадающий контейнер каталога 1-го уровня */
.e-n-menu-content,
.e-n-menu-content .e-con,
.e-n-menu-content .e-con-inner,
div[id^="e-n-menu-content-"] {
background: transparent !important;
background-color: transparent !important;
box-shadow: none !important;
border: none !important;
}

.e-n-menu-content .elementor-widget-nav-menu {
background-color: #0c2e1e !important; /* Основной темный фон выпадающего списка */
border: none !important;
border-radius: 0 0 12px 12px !important;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4) !important;
padding: 10px !important;
width: 290px !important;
max-width: 100% !important;
}

/* Пункты каталога 1-го уровня */
.e-n-menu-content .elementor-nav-menu a.elementor-item,
.e-n-menu-content .elementor-nav-menu .removed-link,
.e-n-menu-content .elementor-nav-menu li > a,
.e-n-menu-content .elementor-nav-menu li > span {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
width: 100% !important;
padding: 10px 16px !important;
color: #e2e8f0 !important;
background-color: transparent !important;
border: none !important;
border-radius: 8px !important;
font-size: 14px !important;
font-weight: 500 !important;
box-sizing: border-box !important;
text-decoration: none !important;
transition: all 0.2s ease !important;
}

/* Выравнивание стрелочек прижатием ВПРАВО */
.e-n-menu-content .elementor-nav-menu .sub-arrow {
margin-left: auto !important;
padding-left: 12px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
}

.e-n-menu-content .elementor-nav-menu .sub-arrow svg {
fill: currentColor !important;
width: 12px !important;
height: 12px !important;
}

/* Ховер 1-го уровня в каталоге: зеленый фон #155336, белый текст #ffffff */
.e-n-menu-content .elementor-nav-menu a.elementor-item:hover,
.e-n-menu-content .elementor-nav-menu li:hover > a,
.e-n-menu-content .elementor-nav-menu li:hover > span {
background-color: #155336 !important;
color: #ffffff !important;
}

.e-n-menu-content .elementor-nav-menu li:hover .sub-arrow svg {
fill: #ffffff !important;
}

/* 3.3 ВЫПАДАЮЩИЕ ПОДМЕНЮ 2-ГО УРОВНЯ (ФИКС БЕЛОГО ФОНА И ТЕКСТА) */
.e-n-menu-content .sub-menu,
.e-n-menu-content .sub-menu.elementor-nav-menu--dropdown,
.elementor-nav-menu--main .sub-menu.elementor-nav-menu--dropdown,
.elementor-widget-nav-menu .sub-menu.elementor-nav-menu--dropdown,
ul.sub-menu.elementor-nav-menu--dropdown {
background-color: #000000 !important; /* Тот же темный зеленый фон как у 1-го уровня */
border: 1px solid rgba(255, 255, 255, 0.1) !important; /* Легкий темный бордер вместо белого */
border-radius: 12px !important;
padding: 8px 0 !important;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5) !important;
width: max-content !important; /* АВТО-ШИРИНА ПО САМОМУ ДЛИННОМУ ПУНКТУ */
min-width: 240px !important;
max-width: none !important;
z-index: 999999 !important;
}

/* Пункты подменю 2-го уровня - ТЕКСТ И ЗАПРЕТ ПЕРЕНОСА СЛОВ */
.e-n-menu-content .sub-menu a,
.e-n-menu-content .sub-menu .elementor-sub-item,
.elementor-widget-nav-menu .sub-menu a,
.elementor-widget-nav-menu .sub-menu .elementor-sub-item,
.elementor-widget-nav-menu .sub-menu li > a,
.elementor-widget-nav-menu .sub-menu li > span,
.elementor-nav-menu--main .sub-menu a,
.elementor-nav-menu--main .sub-menu .removed-link {
white-space: nowrap !important; /* ЗАПРЕТ ПЕРЕНОСА СЛОВ В 2-3 СТРОКИ */
padding: 10px 20px !important;
color: #e2e8f0 !important; / Светлый читаемый текст 
background-color: transparent !important;
font-size: 13.5px !important;
font-weight: 500 !important;
display: block !important;
text-decoration: none !important;
transition: all 0.2s ease !important;
}

/* Ховер подменю 2-го уровня /*/
.e-n-menu-content .sub-menu a:hover,
.e-n-menu-content .sub-menu .elementor-sub-item:hover,
.elementor-widget-nav-menu .sub-menu a:hover,
.elementor-widget-nav-menu .sub-menu li:hover > a,
.elementor-widget-nav-menu .sub-menu li:hover > span {
background-color: #155336 !important; / Зеленый ховер 
color: #ffffff !important;
}

/* Активный пункт 2-го уровня */
.elementor-widget-nav-menu .sub-menu .current-menu-item > a,
.elementor-widget-nav-menu .sub-menu .current-menu-item > span,
.elementor-widget-nav-menu .sub-menu .removed-link {
color: #4ade80 !important; / Светло-зеленый шрифт 
font-weight: 600 !important;
background-color: transparent !important;
}