/* Проверка: красим шапку в приятный цвет */
.site-header {
    background-color: #fff;
	padding: 0;
}
@media (min-width: 768px) {
    .col-full {
        max-width: 90%; /* Можете поставить своё значение, например 1400px */
    }
}
/* Скрываем количество товаров у категорий */
.product-category .count {
    display: none !important;
}
/* Уменьшаем карточки категорий на главной */
.home .product-category {
    padding: 10px;           /* меньше внутренние отступы */
}


.product-unit {
    font-size: 1.05em;
    color: #888;
    margin: 2px 0 6px;
    font-style: italic;
    display: block; /* чтобы не сливалось с ценой в каталоге */
}

/* Увеличение шрифта в меню-аккордеоне WPB Accordions */
.wpb_category_n_menu_accordion li a {
    font-size: 18px !important;  /* Задайте нужный размер */
}

/* Если нужно увеличить шрифт вложенных пунктов */
.wpb_category_n_menu_accordion li li a {
    font-size: 16px !important;
}

/* Можно также увеличить иконки-индикаторы (плюсик/минус) */
.wpb_category_n_menu_accordion .wpb-submenu-indicator {
    font-size: 22px !important;
}

/* Убираем обводку/подсветку при клике для всех элементов */
*:focus,
*:active {
    outline: none !important;
    -webkit-tap-highlight-color: transparent; /* убирает серый фон на мобильных устройствах */
}

/* Для ссылок и кнопок убираем любые эффекты при клике */
a:active,
a:focus,
button:active,
button:focus,
img:active,
img:focus,
[class*="link"]:active,
[class*="link"]:focus {
    outline: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
}


/* Переопределяем ширину карточек и отступы для 4-колоночной сетки */
@media (min-width: 768px) {
    .site-main ul.products.columns-4 li.product {
        width: 23.5%;          /* было 22.05% — увеличили */
        margin-right: 2%;      /* было 3.8% — уменьшили */
    }
    /* Чтобы последний в ряду не имел правого отступа */
    .site-main ul.products.columns-4 li.product:nth-child(4n) {
        margin-right: 0;
    }
}
/* Уменьшаем внутренние поля карточки */
.woocommerce ul.products li.product .product-inner {
    padding: 5px !important;
}

/* Убираем лишние отступы под картинкой */
.woocommerce ul.products li.product a img {
    margin-bottom: 5px;
}

/* Уменьшаем отступы заголовка и цены */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 0.95rem;
    margin: 5px 0;
}
.woocommerce ul.products li.product .price {
    font-size: 0.9rem;
    margin: 5px 0;
}

.woocommerce ul.products li.product .price {
    font-size: 0.9rem;
    margin: 5px 0;
	color: #f00;
}
.woocommerce ul.products li.product .price i{

	color: #100;
}

/* Верхнее меню над шапкой  */
.top-header-menu-wrapper {
    background: #f5f5f5;
    padding: 8px 5%;
    text-align: left;  /* */
    border-bottom: 1px solid #e0e0e0;
}
.top-header-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: left;
}
.top-header-menu li {
    display: inline-block;
    margin-right: 20px;  /* вместо margin-left, чтобы отступы были справа */
    margin-left: 0;
}
.top-header-menu li a {
    text-decoration: none;
    color: #333;
}
.top-header-menu li a:hover {
    text-decoration: underline;
}
/* Мобильная версия */
@media (max-width: 768px) {
    .top-header-menu-wrapper {
        text-align: center;
    }
    .top-header-menu li {
        margin: 0 10px;
    }
}

/* Строка шапки: 4 колонки */
.custom-header-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 15px 0;
}
.header-logo {
    flex: 1;  /* логотип занимает больше места */
    min-width: 180px;
}
.header-search {
    flex: 3;
    min-width: 200px;
}
.header-banner {
    flex: 1;
    text-align: center;
    min-width: 120px;
}
.header-contacts {
    flex: 1;
    text-align: right;
    min-width: 150px;
}
/* Стили для контактов (можно добавить иконки через Font Awesome) */
.header-contacts-widget p, 
.header-contacts-widget div {
    margin: 0;
    line-height: 1.4;
}
.header-contacts-widget a {
    text-decoration: none;
    color: #333;
}
/* Главное меню под шапкой */
.custom-header-nav {
    clear: both;
    margin-top: 10px;
}
/* Адаптация для планшетов и телефонов */
@media (max-width: 992px) {
    .custom-header-row {
        flex-wrap: wrap;
    }
    .header-logo, .header-search, .header-banner, .header-contacts {
        flex: 1 1 45%;
        text-align: left;
    }
    .header-contacts {
        text-align: left;
    }
}
@media (max-width: 768px) {
    .custom-header-row {
        flex-direction: column;
        align-items: stretch;
    }
    .header-banner, .header-contacts {
        text-align: center;
    }
}

/* Растягиваем поиск на всю доступную ширину */
.woocommerce-active .site-header .site-search {
    width: auto;           /* убираем фиксированную ширину */
    float: none;           /* убираем прижатие вправо */
    flex: 1;               /* разрешаем растяжение (если родитель — flex) */
    margin-left: 0px;     /* небольшой отступ от логотипа */
    margin-right: 20px;
}

.custom-sale-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #e63946;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    padding: 5px 12px;
    border-radius: 4px;
    z-index: 10;
    text-transform: uppercase;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.woocommerce-loop-product__link {
    position: relative;
    display: block;
}
.texxx1 {
    font-size: 14px;            
    line-height: 2;             
    color: #333;               
}
.texxx2 {
    font-size: 21px;            
    line-height: 2;             
    color: #b53000;               
}
.texxx3 {
    font-size: 11px; 
	line-height: 2;
    color: #b53000;
    font-style: italic;               
}
.content-wrapper {
    display: flex;          
    justify-content: center;        
}
.contacts-block {
    background-color: #ffffff; 
    padding: 7px;             
    border-radius: 8px;        
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); 
    display: flex;             
    flex-direction: column;    
    align-items: center;       
    gap: 5px;                
}

/* Растягиваем фон главного меню на всю ширину экрана (безопасный способ) */
.primary-navigation {
    background-color: #f5f5f5;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    position: relative;
    left: 0;
}

/* Само меню остаётся внутри контейнера 90% (или вашей ширины) */
.primary-navigation .main-navigation {
    width: 90%;
    margin: 0 auto;
    background: transparent;
}

/* Если нужно сохранить горизонтальное расположение пунктов */
.primary-navigation .main-navigation ul.menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 20px;
    padding: 10px 0;
    margin: 0;
}
/* Добавляем отступ слева для пунктов меню (как у остального контента) */
.primary-navigation  {
    padding-left: 5%;  /* или задайте точное значение, например 20px, 30px */
}

@media (min-width: 768px) {
    /* Растягиваем блок меню на всю ширину */
    .woocommerce-active .site-header .main-navigation {
        width: 100%;
        background-color: #f5f5f5; /* цвет под ваш дизайн */
    }
    
    /* Сам список пунктов меню центрируем и даём ему комфортную ширину */
    .woocommerce-active .site-header .main-navigation .menu {
        max-width: 100%; /* или 1300px, если хотите фиксированную ширину */
        margin: 0 auto;
     
    }
    
    /* Отключаем стандартные float */
    .woocommerce-active .site-header .main-navigation .menu > li {
        float: none;
        margin: 0;
        white-space: nowrap;
    }
}

/* Страница товара: растягиваем главное изображение на всю ширину блока */
.single-product .woocommerce-product-gallery {
    width: 100%; /* чтобы галерея занимала всю ширину своей колонки */
}

.single-product .woocommerce-product-gallery .flex-viewport {
    width: 100% !important;
}

.single-product .woocommerce-product-gallery__image img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: contain; /* чтобы картинка не обрезалась, если пропорции не совпадают */
}

/* По желанию: увеличить саму колонку с изображением (по умолчанию в Storefront ~48%) */
.single-product .product .images {
    width: 60%; /* можно 55%, 65% — экспериментируйте */
    max-width: none;
}

.single-product .product .summary {
    width: 36%; /* чтобы описание было рядом, подберите пропорции */
}


/* Кастомное модальное окно */
.custom-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.custom-modal-content {
    background: #fff;
    padding: 25px;
    border-radius: 8px;
    max-width: 500px;
    width: 90%;
    position: relative;
    max-height: 90%;
    overflow: auto;
}
.custom-modal-close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 28px;
    cursor: pointer;
    color: #666;
}
.custom-modal-close:hover {
    color: #000;
}

/* Плавающая круглая кнопка */
.floating-btn {
    position: fixed;
    bottom: 30px;      /* Отступ от нижнего края */
    right: 30px;       /* Отступ от правого края */
    width: 60px;
    height: 60px;
    border-radius: 50%;  /* Делаем кнопку идеально круглой */
    background-color: #E53935;  /* Яркий красный цвет — замените на ваш */
    border: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    z-index: 9999;       /* Чтобы кнопка была поверх всех элементов */
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Стиль для иконки (знак вопроса) */
.floating-btn-icon {
    font-size: 32px;
    font-weight: bold;
    color: white;
    line-height: 1;
}

/* Эффект при наведении */
.floating-btn:hover {
    transform: scale(1.05);
    background-color: #C62828;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4);
}

/* Эффект при нажатии */
.floating-btn:active {
    transform: scale(0.95);
}

/* Адаптация для мобильных устройств */
@media (max-width: 768px) {
    .floating-btn {
        width: 50px;
        height: 50px;
        bottom: 20px;
        right: 20px;
    }
    .floating-btn-icon {
        font-size: 28px;
    }
}

/* Скрываем текстовые метки кнопок только в каталоге */
body:not(.single-product) .woosq-btn-text,
body:not(.single-product) .wishowl-button__label {
    display: none !important;
}

/* Чтобы кнопки встали в одну строку (если ещё не в одной) */
body:not(.single-product) .woosq-btn,
body:not(.single-product) .wishowl-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin-right: 8px; /* отступ между кнопками */
}

/* Если нужно убрать отступы у последней кнопки */
body:not(.single-product) .wishowl-button {
    margin-right: 0;
}

body:not(.single-product) .wishowl-button svg {
    width: 13px !important;
    height: 13px !important;
}

.hentry .entry-content a {
  text-decoration: none;
}

/* Скрываем кнопку "Задать вопрос" внутри блока похожих товаров */
.related a[data-popup-id="2892"],
.related .button[data-popup-id="2892"] {
    display: none !important;
}


/* Скрываем текст кнопок и делаем их иконками в блоках похожих/сопутствующих товаров */
.related.products .woosq-btn-text,
.related.products .wishowl-button__label,
.upsells.products .woosq-btn-text,
.upsells.products .wishowl-button__label {
    display: none !important;
}


/* Применяем те же стили к кнопкам в блоках "Похожие товары" и "Сопутствующие" */
.related .woosq-btn,
.related .wishowl-button,
.upsells .woosq-btn,
.upsells .wishowl-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin-right: 8px; /* отступ между кнопками */
}

/* Если нужно убрать отступ у последней кнопки */
.related .wishowl-button,
.upsells .wishowl-button {
    margin-right: 0;
}



/* Размер иконок сердечка в блоках */
.related .wishowl-button svg,
.upsells .wishowl-button svg {
    width: 13px !important;
    height: 13px !important;
}


/* Привязываем плашку "Акция" к изображению товара */
.woocommerce-loop-product__link {
    position: relative;
    display: block;
}

.custom-sale-badge {
    position: absolute;
    top: 5%;
    left: 15%;
    background: #e63946;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    padding: 5px 12px;
    border-radius: 4px;
    z-index: 10;
    text-transform: uppercase;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    white-space: nowrap;
    pointer-events: none; /* чтобы плашка не мешала кликать по картинке */
}


/* Исправление центрирования на мобильных только для страницы товара */
@media (max-width: 768px) {
    .single-product .col-full {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding-left: 15px;
        padding-right: 15px;
        box-sizing: border-box;
    }
    
    /* Сама галерея и описание на всю ширину */
    .single-product .product .images,
    .single-product .product .summary {
        width: 100% !important;
        margin-left: 0;
        margin-right: 0;
        padding: 0;
    }
}



/* Мобильная шапка: логотип и контакты */
@media (max-width: 768px) {
    /* 1. Уменьшаем логотип, делаем его блочным, убираем обтекание */
    .site-header .site-branding {
        width: 100%;
        text-align: center;
        margin-bottom: 10px;
    }
    .site-branding .site-title {
        font-size: 1.5rem; /* уменьшаем размер шрифта логотипа */
    }
    .site-branding img {
        max-width: 100px !important;    /* ограничиваем ширину картинки логотипа */
        height: auto;
    }
    
    /* 2. Контакты (телефон, email, иконки) — отдельная строка, не перекрывается */
    .header-contacts {
        width: 100%;
        text-align: center;
        margin-top: 10px;
        white-space: normal;
    }
    .header-contacts-widget {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
    }
    
    /* 3. Поле поиска — на всю ширину, центрируем */
    .site-search {
        width: 100%;
        margin: 10px 0;
    }
    
    /* 4. Главное меню — белый фон, чёткий текст */
    .main-navigation {
        background-color: #ffffff !important;
        border-top: 1px solid #eee;
        border-bottom: 1px solid #eee;
    }
    .main-navigation ul.menu > li > a {
        color: #333 !important;
        font-weight: normal;
    }
}
@media (max-width: 768px) {
    .site-header .site-branding {
        width: 100%;
        text-align: center !important;
        float: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .site-branding img {
        display: block;
        margin-left: auto;
        margin-right: auto;
        max-width: 100px;
        height: auto;
    }
	
	
}
@media (max-width: 768px) {
 .main-navigation ul li a {
    padding: .675em;
    display: block;
   
}
}