/*
Theme Name: Kniga24
Theme URI: https://woxel.ee
Template: astra
Author: Oleg Kuzin from Astra
Author URI: www.woxel.ee
Description: Тема для сайта kniga24.ee
Tags: custom-menu,custom-logo,entertainment,one-column,two-columns,left-sidebar,e-commerce,right-sidebar,custom-colors,editor-style,featured-images,full-width-template,microformats,post-formats,rtl-language-support,theme-options,threaded-comments,translation-ready,blog
Version: 4.11.12.1759039238
Updated: 2025-09-28 09:00:38

*/

/* ============================================================================
   KNIGA24.SHOP - ОСНОВНОЙ ФАЙЛ СТИЛЕЙ
   ============================================================================
   TABLE OF CONTENTS (ОГЛАВЛЕНИЕ):
   1.  GLOBAL SETTINGS & VARIABLES ..... (Цвета, шрифты, общие сбросы)
   2.  LAYOUT & CONTAINERS ............ (Сетка сайта, #primary, .ast-container)
   3.  HEADER SYSTEM .................. (Все 3 ряда шапки и их логика)
   4.  WXL NAVIGATION ................. (Кнопки категорий, меню-таблетки)
   5.  SHOP: CATALOG / ARCHIVE ........ (Сетки товаров, значки Новинка/Sale)
   6.  SHOP: SINGLE PRODUCT ........... (Карточка товара, галерея, липкая панель)
   7.  SHOP: CART & CHECKOUT .......... (Корзина, оформление, мини-корзина)
   8.  WXL MESSENGER & CHAT ........... (Весь функционал мессенджера)
   9.  SIDEBAR & WIDGETS .............. (Боковая колонка, фильтры, авторы)
   10. SPECIAL COMPONENTS ............. (Баннеры, модальные окна, баджи)
   11. FOOTER ......................... (Стили подвала)
   12. MOBILE OVERRIDES (768px) ....... (Специфические фиксы для телефонов)
============================================================================ */


/* --- 1. GLOBAL SETTINGS & VARIABLES --- 
   Сюда переноси: :root { --kniga-wine... }, стили заголовков h1-h6, 
   шрифты Montserrat и общие настройки ссылок. */
/* 1. Глобальные переменные палитры */
:root {
  --logo-color: rgb(138, 0, 34);
  --spacing-unit: 16px;
    --kniga-wine: #8a0022;        /* Твой основной цвет */
    --kniga-wine-hover: #6d001b;  /* Темнее для ховера */
    --kniga-gold: #c29958;        /* Акценты (звезды, скидки) */
    --kniga-bg: #f9f7f5;          /* Мягкий фон страницы */
    --kniga-text: #2d2d2d;        /* Цвет текста */
    --kniga-border: #e8e2de;      /* Цвет границ */
    --kniga-radius: 10px;         /* Скругление */
	
	/* легкий фон*/
	--light-bg: rgba(186, 173, 110, 1.0);
	--light-bg_transparent: rgba(186, 173, 110, 0.7);
	
/*rgba(138, 0, 34, 0.15);*/
}


/* --- 2. LAYOUT & CONTAINERS --- 
   Сюда переноси: Настройки #primary, .content-area, .ast-container, 
   отступы между блоками и общие фоны страниц. */
/* Принудительная сетка 6 колонок для десктопа */
@media (min-width: 922px) {
    .wxl-empty-cart-suggestions ul.products {
        display: grid !important;
        grid-template-columns: repeat(6, 1fr) !important; /* Ровно 6 колонок */
        gap: 15px !important;
    }
    
    /* Убираем стандартные отступы Astra, которые могут мешать сетке */
    .wxl-empty-cart-suggestions ul.products li.product {
        width: 100% !important;
        margin-right: 0 !important;
        float: none !important;
    }
}

/* Адаптивность для планшетов (3 колонки) */
@media (max-width: 921px) and (min-width: 545px) {
    .wxl-empty-cart-suggestions ul.products {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* Адаптивность для мобильных (2 колонки) */
@media (max-width: 544px) {
    .wxl-empty-cart-suggestions ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

#content.site-content {

background-image: 
        linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.7) 50%), 
        url(https://kniga24.shop/wp-content/uploads/gemini_generated_image_n9p8lxn9p8lxn9p8.png);
	
    background-repeat: no-repeat;
    background-position: bottom center;
    /* Растягивает на 100% ширины, высота подстраивается автоматически (пропорционально) */
    background-size: 100% auto; 
}

body  {
    /* Высота шапки.*/
    padding-top: 150px !important; 
}
.ast-single-post.ast-page-builder-template .site-main > article, .woocommerce.ast-page-builder-template .site-main, .ast-page-builder-template .post-navigation {
    padding-top: 2em;
    padding-left: 0px;
    padding-right: 00px;
}

/* Если в админке виден Admin Bar (черная полоса сверху) */
body.admin-bar .site-header {
    //top: 32px; /* Чтобы шапка не перекрывалась панелью WP */
}

/* 2. Общий фон страницы */
body {
	padding-top: 2px !important;
    background-color: var(--kniga-bg);
    color: var(--kniga-text);
}

#secondary li {
    line-height: 1.5em; 
}

#secondary li {
    margin-bottom: 0em;
}

media (min-width: 922px) {
    .site-content .ast-container {
       display: block;
    }
}


/* secondary левая панель*/
.ast-left-sidebar #secondary {
	width: 30% !important;
	margin: 0px;
	
	padding: 0px;
}
.ast-container  .primary {
	width: 100% !important;
  margin: 1em !important;
}

@media (max-width: 921px) { 
	.ast-container #secondary {

	width: 100% !important;
  margin: 0.5em ;
		
	}
	.main-root-menu {
   display: none;
	}
}
.ast-container  .primary {
	width: 100% !important;
  margin: 0.5em !important;
}

/* --- 3. HEADER SYSTEM --- 
   Сюда переноси: .ast-above-header-bar, .ast-primary-header-bar, .ast-below-header-bar,
   поиск (.wp-block-search), контакты (.html1, .html2), языки (.wxl-html-lang-list). */
.site-header  {
	 width: 100%;
    z-index: 9999;
    //position: fixed;
    top: 0;
    left: 0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
   animation: slideDown 0.6s ease-out;

}

/* Анимация появления */
@keyframes slideDown {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}

/* Скрываем все центральные секции во всех рядах шапки */
[class*="site-header-"][class*="-section-center"] {
    display: none !important;
}

/* Заставляем все ряды использовать 2 колонки вместо 3 */
.ast-builder-grid-row {
    grid-template-columns: 1fr 1fr !important;
}

@media (min-width: 922px) {
    /* 1. Настраиваем сетку ряда: Лого (30%) и всё остальное (70%) */
    .ast-primary-header-bar .ast-builder-grid-row {
        display: grid !important;
        grid-template-columns: 20% 80% !important;
        grid-template-areas: "left right" !important;
    }

    /* 2. Левая ячейка (Логотип) */
    .site-header-primary-section-left {
        width: 100% !important;
        justify-content: flex-start !important;
    }

    /* 3. Правая ячейка (Поиск + Меню) */
    .site-header-primary-section-right {
        width: 100% !important;
        /* Убираем прижатие к правому краю, чтобы убрать "пурпурный зазор" */
        justify-content: flex-start !important; 
        display: flex !important;
        align-items: center !important;
        gap: 20px; /* Расстояние между поиском и меню */
    }

    /* 4. Растягиваем поиск на всё свободное пространство */
    .ast-primary-header-bar .header-widget-area,
    .ast-primary-header-bar .widget_search,
    .ast-primary-header-bar .wp-block-search {
        flex-grow: 1 !important; /* Вот этот параметр уберет пустоту */
        margin: 0 !important;
    }

    .ast-primary-header-bar .wp-block-search__inside-wrapper {
        width: 100% !important;
    }
}

/* Настройки для экранов от 768px до 1100px (Планшеты и небольшие ноутбуки) */
@media (max-width: 1100px) and (min-width: 768px) {
    
    /* 1. Работаем с правой секцией (80%) */
    .site-header-primary-section-right {
        display: flex !important;
        flex-direction: column !important; /* Меню сверху, поиск снизу */
        align-items: flex-end !important;   /* Прижимаем всё к правому краю */
        justify-content: center !important;
        padding-top: 5px !important;
        padding-bottom: 5px !important;
    }

    /* 2. Растягиваем поиск на всю доступную ширину ячейки (80%) */
    .site-header-primary-section-right .header-widget-area,
    .site-header-primary-section-right .wp-block-search {
        width: 100% !important;
        max-width: 100% !important;
        margin: 5px 0 0 0 !important; /* Минимальный отступ сверху от меню */
    }

    /* Убираем внутренние отступы обертки поиска WordPress */
    .wp-block-search__inside-wrapper {
        margin: 0 !important;
    }

    /* 3. Делаем саму строку поиска более компактной по высоте */
    .wp-block-search__input {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }

    /* 4. Уменьшаем общую высоту шапки за счет внутренних отступов Astra */
    .ast-primary-header-bar {
        padding-top: 5px !important;
        padding-bottom: 5px !important;
        min-height: auto !important;
    }

    /* 5. Центрируем логотип вертикально относительно двух строк справа */
    .site-header-primary-section-left {
        align-items: center !important;
        display: flex !important;
    }
}

@media (max-width: 921px) {
    /* 1. Убираем минимальную высоту и гигантские отступы основного ряда */
    .ast-primary-header-bar {
        padding-top: 5px !important;
        padding-bottom: 5px !important;
        min-height: 0 !important;
    }

    /* 2. Убираем отступы вокруг самого логотипа */
    .site-branding {
        padding: 5px 0 !important;
        margin: 0 !important;
    }

    /* 3. Убираем лишнее место в контейнере левой секции */
    .site-header-primary-section-left {
        min-height: 0 !important;
        align-items: center !important;
    }

    /* 4. Уменьшаем отступ сверху у блока поиска, чтобы он "прилип" выше */
    .site-header-below-section-left, 
    .ast-header-break-point .header-widget-area {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    /* 5. Если логотип сам по себе имеет нижний отступ */
    .custom-logo-link {
        line-height: 0 !important;
        margin-bottom: 0 !important;
    }
}

/* Горизонтальный скролл категорий в нижнем ряду шапки (только для мобильных) */
@media (max-width: 921px) {
    /* Растягиваем контейнер ряда на всю ширину */
    .ast-below-header-bar .ast-container {
        padding: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Включаем горизонтальный скролл для обертки меню */
    .ast-below-header-bar .main-header-bar-navigation {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch; /* Плавный скролл на iOS */
        scrollbar-width: none; /* Прячем скроллбар в Firefox */
    }

    .ast-below-header-bar .main-header-bar-navigation::-webkit-scrollbar {
        display: none; /* Прячем скроллбар в Chrome/Safari */
    }

    /* Выстраиваем пункты меню в одну неразрывную линию */
    .ast-below-header-bar .main-header-menu {
        display: inline-flex !important;
        flex-wrap: nowrap !important;
        padding: 10px 15px !important;
        margin: 0 !important;
    }

    /* Стилизуем каждый пункт как "таблетку" */
    .ast-below-header-bar .menu-item {
        display: inline-block !important;
        margin: 0 5px 0 0 !important;
        flex: 0 0 auto; /* Не даем пунктам сжиматься */
    }

    .ast-below-header-bar .menu-link {
        background: #fff !important;
        border: 1px solid var(--kniga-border) !important;
        padding: 6px 16px !important;
        border-radius: 20px !important;
        font-size: 13px !important;
        color: var(--kniga-text) !important;
        white-space: nowrap;
    }
    
    /* Подсвечиваем активную категорию */
    .ast-below-header-bar .current-menu-item .menu-link {
        background: var(--kniga-wine) !important;
        color: #fff !important;
        border-color: var(--kniga-wine) !important;
    }
}

/* 1. СБРОС ВЫСОТЫ РЯДА */
.ast-below-header-bar, 
.ast-below-header-bar .site-below-header-wrap {
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
}

/* 2. ОЧИСТКА КОНТЕЙНЕРОВ ВИДЖЕТОВ */
/* Таргетируем любую область виджетов в нижнем ряду */
.ast-below-header-bar .header-widget-area-inner,
.ast-below-header-bar .widget_block {
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
}

/* 3. УДАЛЕНИЕ "МУСОРНЫХ" ПАРАГРАФОВ */
/* Скрываем любые пустые или лишние P, которые WordPress вставляет в хедер */
.ast-below-header-bar .widget_block p {
    display: none !important;
}

/* 4. ТАРГЕТИНГ МЕНЮ (Через твой класс) */
/* Это самая надежная часть: пока ты используешь этот класс в коде, стили будут работать */
.wxl-buttons-menu-container {
    display: block !important;
    margin: 0 !important;
	margin-left: 1em !important;
    padding: 8px 0 !important; /* Управляй высотой ряда здесь (отступы кнопок) */
}

@media (max-width: 768px) {
    /* 1. Растягиваем контейнер на всю ширину без отступов */
    .wxl-buttons-menu-container {
        width: 100% !important;
        margin-top: 3px !important;
        padding: 0 !important;
    }

    /* 2. Делаем список гибким (Flex) */
    .wxl-buttons-menu-list {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important; /* Все в один ряд */
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
        gap: 0 !important; /* Убираем промежутки, сделаем границы через border */
    }

    /* 3. Каждый пункт меню (li) занимает равное место */
    .wxl-buttons-menu-list li {
        flex: 1 1 0 !important; /* Делит экран ровно на 3 части */
        margin: 0 !important;
        padding: 0 !important;
        border-right: 1px solid rgba(255,255,255,0.1); /* Тонкая светлая полоска-разделитель */
    }

    .wxl-buttons-menu-list li:last-child {
        border-right: none; /* У последнего пункта убираем границу */
    }


.site-header .site-description {
  color: white;
	font-weight: 600;
	text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.9);
}

// Главное меню
.ast-builder-menu-1 .main-header-menu .menu-item > .menu-link {
	  color: white;
	font-weight: 600;
	text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.6);
}

.ast-builder-menu-1 .main-header-menu .menu-item > .menu-link:hover {
	background-color: var(--kniga-wine);
}

/* 4. Стилизация ссылок-кнопок */
    .wxl-buttons-menu-list li a.menu-link {
display: flex !important;
align-items: center !important;
justify-content: center !important;
height: 48px !important; /* Оптимальная высота для пальца */
//background-color: var(--kniga-wine) !important;
color: #ffffff !important;
font-size: 12px !important; /* Чуть меньше, чтобы длинные слова влезли */
font-weight: 700 !important;
text-transform: uppercase;
text-decoration: none !important;
border-radius: 0 !important; /* Делаем строгие прямоугольники */
padding: 0 2px !important;
text-align: center;
transition: all 0.2s ease;
    }

    /* 5. Эффект при нажатии */
    .wxl-buttons-menu-list li a.menu-link:active,
    .wxl-buttons-menu-list li a.menu-link:hover {
        background-color: var(--kniga-wine-hover) !important;

    }
}

.wxl-buttons-menu-list {
    display: flex !important;
    flex-wrap: nowrap !important; /* Для горизонтального скролла */
    overflow-x: auto;
    gap: 10px;
    margin: 0 !important;
    padding: 0 15px !important; /* Отступы по бокам, чтобы кнопки не прилипали к краям экрана */
    list-style: none !important;
    -webkit-overflow-scrolling: touch;
}

/* Прячем полосу прокрутки, чтобы было эстетично */
.wxl-buttons-menu-list::-webkit-scrollbar {
    display: none;
}

/* 1. Переопределяем сетку ряда: левая часть забирает всё свободное место (1fr), 
   а правая — только столько, сколько нужно её контенту (auto) */
.ast-builder-grid-row-has-sides {
    grid-template-columns: 1fr auto !important;
    display: grid !important;
    gap: 5px; /* Отступ между поиском и меню */
}

/* 2. Растягиваем левую секцию и все вложенные контейнеры виджета */
.site-header-above-section-left,
.site-header-above-section-left .header-widget-area,
.site-header-above-section-left .widget_block,
.site-header-above-section-left .wp-block-search {
    width: 100% !important;
    max-width: 100% !important;
}

/* 3. Убираем ограничение ширины у обертки формы поиска WordPress */
.wp-block-search__inside-wrapper {
    width: 100% !important;
    display: flex !important;
}

/* 4. Заставляем само поле ввода (input) расти на всю доступную длину */
.wp-block-search__input {
    flex-grow: 1 !important;
    width: 100% !important;
}

/* 5. На мобилках  */
@media (max-width: 768px) {
    /* --- 1. ГЛОБАЛЬНЫЕ СБРОСЫ (для всех рядов) --- */
    .ast-builder-grid-row, 
    .ast-primary-header-bar, 
    .ast-below-header-bar, 
    .ast-above-header-bar,
    .site-header-section {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* --- 2. РАСПРЕДЕЛЕНИЕ ПО СТРОКАМ --- */
    
    /* СТРОКА 1 (Above): Логотип и Языки — оставляем 50/50 в один ряд */
    .ast-above-header-bar .ast-builder-grid-row {
        grid-template-columns: 1fr 1fr !important;
        display: grid !important;
        padding: 10px 10px !important;
        align-items: center !important;
    }

    /* СТРОКА 2 (Primary): Поиск и прочее — возвращаем 100% (друг под другом) */
    .ast-primary-header-bar .ast-builder-grid-row {
        grid-template-columns: 1fr !important;
        display: grid !important;
    }

    /* СТРОКА 3 (Below): Если там что-то есть — тоже 100% */
    .ast-below-header-bar .ast-builder-grid-row {
        grid-template-columns: 1fr !important;
        display: grid !important;
    }

    /* --- 3. НАСТРОЙКИ ПОИСКА И ВИДЖЕТОВ (Строка 2) --- */
    .header-widget-area, 
    .widget_block, 
    .wp-block-search,
    .wp-block-search__inside-wrapper {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        display: flex !important;
    }

    .wp-block-search__input {
        flex-grow: 1 !important;
        width: 100% !important;
        border-radius: 0 !important;
    }

    /* Высота выпадающих списков (категории) для удобства */
    .header-widget-area select {
        width: 100% !important;
        height: 45px;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    /* --- 4. ВЫРАВНИВАНИЕ ЭЛЕМЕНТОВ В ПЕРВОЙ СТРОКЕ --- */
    .site-header-above-section-left { justify-content: flex-start !important; }
    .site-header-above-section-right { justify-content: flex-end !important; }

    /* Межстрочный интервал между рядами шапки */
    .ast-builder-grid-row {
        margin-bottom: 4px !important;
    }
}

/* Контейнер лозунга (Astra HTML элемент) */
.site-title, .page-title {
    //font-style: italic;
    font-size: 1.4rem;
    color: var(--kniga-wine); /* Твой фирменный бордовый */
    border-left: 2px solid var(--kniga-border); /* Тонкая разделительная линия */
    padding-left: 20px;
    margin-left: 20px;
    line-height: 1.2;
    display: flex;
    align-items: center;
    height: 100%;
}
.ast-header-html-1 .ast-builder-html-element {
	font-size: 1.4rem;
}

/* Адаптация для мобильных: убираем линию, центрируем */
@media (max-width: 768px) {
    .ast-header-html-1 .ast-builder-html-element, .site-title, .page-title {
        border-left: none;
        padding-left: 0;
        margin-left: 0;
        font-size: 2rem;
        justify-content: center;
        margin-top: 10px;
    }
	.ast-site-identity .site-title a {
		color: #fff;
	}
   .ast-site-title-wrap {
			display: none;
		}
	}
	.custom-logo {
		padding-left: 1em;
	}
}

/* стили дополнительного меню в шапке сайта */
/* Сетка меню */
.wxl-buttons-menu-list {
    display: flex;
    flex-wrap: wrap; /* Чтобы на небольших экранах кнопки переносились */
    gap: 0px;       /* Расстояние между кнопками */
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Стилизация каждого пункта меню как кнопки */
.wxl-buttons-menu-list li a {
    display: inline-block;
    background-color: #8a0022; /* --kniga-wine */
    color: #ffffff !important;
    padding: 10px 20px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none !important;
    border-radius: 0px; /* Скругление как на картинке */
    transition: all 0.3s ease;
    border: none;
    line-height: 1.2;
}

/* Эффект при наведении */
.wxl-buttons-menu-list li a:hover {
    background-color: #6d001b; /* --kniga-wine-hover */
    transform: translateY(-2px); /* Легкий подъем при наведении */
    box-shadow: 0 4px 8px rgba(138, 0, 34, 0.2);
}

/* Адаптивность для мобильных: делаем кнопки чуть крупнее для нажатия */
@media (max-width: 767px) {
    .wxl-buttons-menu-list {
        justify-content: center;
    }
    .wxl-buttons-menu-list li a {
        padding: 12px 18px;
        font-size: 14px;
    }
}

/* 1. Стили HTML1 (контакты и язык) */
.html1 {
    display: flex !important;
    flex-wrap: wrap; /* Позволяет перенос на узких экранах */
    justify-content: flex-end; /* Выравнивание всего блока по правому краю */
    align-items: center; /* Центровка по вертикали */
    gap: 20px; /* Расстояние между телефоном, почтой и флагами */
    width: 100%;
	  color: white;
}

/* 2. Общие стили для текста и ссылок в шапке */
.html1 span, 
.html1 .icon-mail a,
.html1 .icon-phone a{
    font-size: 0.85em !important;
    color: white !important;
    font-weight: 500;
    text-decoration: none;
    display: flex;
    align-items: center;
}

/* 3. Базовый стиль для всех иконок Font Awesome */
.icon-phone::before, 
.icon-mail::before, 
.icon-clock::before {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 1em;
    margin-right: 8px;
    color: white;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
}

/* Конкретные символы иконок */
.icon-phone::before { content: "\f095"; } /* Трубка */
.icon-mail::before  { content: "\f0e0"; } /* Конверт */
.icon-clock::before { content: "\f017"; } /* Часы */

/* 4. Стилизация переключателя языков (Шорткод) */
.wxl-html-switcher-wrapper {
    display: flex;
    align-items: center;
}

.wxl-html-lang-list {
    display: flex !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 12px;
}

.wxl-html-lang-list li {
    line-height: 0 !important;
    margin: 0 !important;
}

.wxl-html-lang-list img {
    width: 32px !important; /* Крупные флаги */
    height: auto !important;
    border-radius: 25% !important; /* Скругление 25% */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    transition: transform 0.2s;
    display: block;
}

.wxl-html-lang-list img:hover {
    transform: scale(1.1);
}

/* Убираем лишние точки списков темы */
.wxl-html-lang-list li::before,
.html1 li::before {
    display: none !important;
}

@media (max-width:480px) {
	.html1 {
		gap: 0px;
	}
	.woocommerce-js ul.products li.product .price, .woocommerce-page ul.products li.product .price  {
		font-size: 1.2em !important;
	}

}

/* --- 4. WXL NAVIGATION --- 
   Сюда переноси: .wxl-buttons-menu-list, .wxl-subcat-button, .wxl-subcat-count, 
   а также все стили для "меню-кнопок" (Книги, Канцтовары и т.д.). */

/* Уменьшаем логотип в липком меню */
.header-sticky .site-logo img {
    max-height: 40px; /* Было, например, 80px */
    width: auto;
}

/* Прячем лишние элементы (например, верхнюю полоску с контактами), если они есть */
.header-sticky .top-bar {
    display: none;
}

.ast-site-title-wrap {
	margin-left: 1em;
	font-size: 1.2em;
}
/* Адаптируем поиск в липком меню */
.header-sticky .header-search-form {
    max-width: 400px; /* Чуть сужаем, чтобы всё влезло в ряд */
}


/* Подкатегории товаров на странице каталога подкатегории */
.main-root-menu {
	background-color: rgba(138, 0, 34, 0.01) !important;
	border: 0px !important;
}

.wxl-subcat-button {
    display: inline-flex;
    align-items: center;
    background-color: var(--light-bg) !important;

    border-radius: 10px; 
    padding: 6px 16px;
    text-decoration: none !important;
    color: white !important;
	text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.6);
    font-size: 14px;
    line-height: 1.4;

}

.wxl-subcat-button:hover {
    background-color: var(--kniga-wine)!important;
}

/* Счётчик товаров внутри кнопки */
.wxl-subcat-count {
    margin-left: 8px;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 7px;
    transition: background 0.2s ease;
}

/* Счётчик при наведении */
.wxl-subcat-button:hover .wxl-subcat-count {
    background: var(--kniga-wine);
    color: white;
}

/* Адаптивность для мобильных */
@media (max-width: 768px) {
    .wxl-subcat-button {
        padding: 8px 14px; /* Чуть больше для удобства нажатия */
        font-size: 13px;
    }
}

/* стили для html1 */
/* Общий контейнер */
.wxl-mobile-header-wrapper {
    //display: flex;
	width: 100% !important;
    flex-direction: column;
    gap: 10px;
}

/* Строка с иконками и языками */
.wxl-tools-row {
    display: flex;
    justify-content: space-between; /* Распределяем: языки слева, иконки справа */
    align-items: center;
    //background: #f5f5f5; /* Легкий фон для выделения зоны (по желанию) */
    //padding: 5px 10px;
    //border-radius: 5px;
}

.wxl-icons-part {
    display: flex;
    gap: 15px; /* Расстояние между аккаунтом и корзиной */
    align-items: center;
}

.wxl-header-icon {
    font-size: 20px;
    color: #333;
    position: relative;
    text-decoration: none;
}

/* Стили бабла корзины */
.wxl-cart-count {
    position: absolute;
    top: -8px;
    right: -10px;
    background: #d91d1d;
    color: #fff;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 10px;
    font-weight: bold;
}

.icon-account { 
 color: white;
	margin: 0px;
	padding: 0px;
}

/* 2я строка заголовка */
@media (max-width: 768px) {
    /* 1. Сбрасываем сетку ряда, чтобы секции не стояли в ряд */
    .ast-primary-header-bar .ast-builder-grid-row {
        display: flex !important;
        flex-direction: column !important; /* Складываем секции (левую и правую) друг под друга */
        width: 100% !important;
    }

    /* 2. Растягиваем левую секцию, в которой лежит ваш HTML 2 */
    .site-header-primary-section-left.site-header-section {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important; /* Занимать все доступное пространство */
        padding: 0 !important;
    }

    /* 3. Убираем те самые margin 20px/24px, которые мы видели в инспекторе */
    .ast-header-html-2 {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important; 
flex: 1 1 100% !important;
display: block !important;
    }

    /* 4. Теперь ваш внутренний контейнер сможет работать на 100% ширины */
.wxl-mobile-header-wrapper {
display: flex !important;
flex-direction: row !important; 
flex-wrap: wrap !important; 
        justify-content: space-between !important; /* Разносим контакты и иконки по краям */
        justify-content: space-between !important; /* Разносим контакты и иконки по краям */
        width: 100% !important;
        padding: 10px 15px !important;  /* Аккуратные отступы внутри */
        box-sizing: border-box !important;
    }

    /* Центрируем блоки внутри, если они перенеслись на вторую строку */
    .wxl-contacts-row, .wxl-tools-row {
        flex: 0 1 auto;
    }
	.wxl-contacts-row {
        
		padding-top: 1em;
    }
}

@media (max-width: 768px) {
    /* 1. Общий контейнер инструментов — всё в одну линию по центру */
    .wxl-tools-row {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 15px !important;
    }

    /* 2. Блок иконок (Аккаунт + Корзина) */
    .wxl-icons-part {
        display: flex !important;
        align-items: center !important;
        gap: 15px !important;
    }


    /* 4. Выравниваем список флагов */
    .wxl-html-lang-list {
        display: flex !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 8px !important;
    }

    /* 5. Точечная настройка иконок (SVG) */
    .wxl-account-link,
    .ast-site-header-cart-li a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        margin: 0 !important;
        line-height: 1 !important;
    }

    /* Исправляем высоту иконки аккаунта и корзины, чтобы они были одинаковыми */
    .icon-account svg,
    .icon-cart svg {
        width: 22px !important;
        height: 22px !important;
        display: block !important;
    }

    /* 6. Позиционирование цифры (бабла) корзины */
    .ast-icon-shopping-cart {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
    }

    /* Если у тебя включен стандартный индикатор корзины Astra */
    .ast-header-woo-cart .ast-cart-menu-wrap .count,
    .ast-header-woo-cart .ast-addon-cart-wrap .count {
        top: -8px !important;
        right: -10px !important;
        margin: 0 !important;
    }
	
	.wp-block-search__inside-wrapper {
		margin-left: 10px !important;
		margin-right: 10px !important;
	}
}

/* --- 5. SHOP: CATALOG / ARCHIVE --- 
   Сюда переноси: ul.products, li.product, .wxl-new-badge, .astra-shop-thumbnail-wrap, 
   цены в каталоге и сетку категорий. */
/* ==========================================================================
   Kniga24 Importer: Стили для миниатюр товаров на страницах архивов (Вариант 1)
   - Изображения имеют фиксированную высоту, обрезаются при необходимости
   ========================================================================== */
/*************************/
/*   content             */
/*************************/
@media (max-width: 768px) {
    /* 1. Убираем отступы самого контейнера */
    .ast-container {
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* 2. Обнуляем отступы основного блока контента */
    #primary {
        padding-left: 10px !important;
        padding-right: 10px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }

    /* 3. Убираем отступы внутри контента WooCommerce (если они есть) */
    .ast-woocommerce-container {
        padding: 0 !important;
        margin: 0 !important;
    }
}

/* каталог товаров */
.woocommerce ul.products li.product .ast-loop-product__link .woocommerce-loop-product__title {
	font-family: 'Roboto', sans-serif !important;
}
 .woocommerce-page ul.products li.product .ast-woo-product-category {  
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3em; 
    min-height: calc(2 * 1.3em);   
}

/* цена в каталоге */
.woocommerce-js ul.products li.product .price,.woocommerce-page ul.products li.product .price {
    line-height: 1.3;
    margin-bottom: 0;
    font-weight: 400;
    margin-bottom: .5em !important;
    font-size: .9em !important
}

/* Скрываем заголовок, если он пустой */
h1.woocommerce-products-header__title.page-title:empty, p:empty {
    display: none !important;
}

/* Общие стили для контейнера изображения в цикле товаров */
//.woocommerce ul.products li.product .woocommerce-loop-product__link {
    display: block; /* Убедимся, что ссылка занимает всю доступную область */
    height: 250px; /* Установите желаемую фиксированную высоту для контейнера изображения */
    overflow: hidden; /* Скрываем все, что выходит за пределы высоты */
    position: relative; /* Для правильного позиционирования дочерних элементов */
}

/* Стили для самого изображения */
//.woocommerce ul.products li.product .woocommerce-loop-product__link img.kniga24-external-thumbnail {
    width: 100%; /* Изображение занимает всю доступную ширину контейнера */
    height: 100%; /* Изображение растягивается на всю высоту контейнера */
    object-fit: cover; /* Это главное: изображение заполняет контейнер, обрезая лишнее */
    display: block; /* Убираем возможные отступы под изображением */
}

/* Если есть плейсхолдеры, убедитесь, что они тоже выглядят хорошо */
//.woocommerce ul.products li.product .woocommerce-loop-product__link .woocommerce-placeholder {
    height: 100%; /* Плейсхолдер тоже должен быть фиксированной высоты */
    display: flex; /* Используем flexbox для центрирования иконки */
    align-items: center; /* Центрируем по вертикали */
    justify-content: center; /* Центрируем по горизонтали */
}

/* ==========================================================================
   Kniga24 Importer: Стили для заголовков товаров на страницах архивов
   - Ограничение заголовка двумя строками с обрезанием
   - Минимальная высота в две строки
   ========================================================================== */

.woocommerce ul.products li.product .woocommerce-loop-product__title, .woocommerce-page ul.products li.product .ast-woo-product-category {
    /* Основные свойства для обрезания текста */
	
    display: -webkit-box; /* Включаем flexbox-поведение для WebKit */
    -webkit-line-clamp: 2; /* Ограничиваем текст двумя строками */
    -webkit-box-orient: vertical; /* Ориентация блока по вертикали */
    overflow: hidden; /* Скрываем весь текст, выходящий за пределы */
    text-overflow: ellipsis; /* Добавляем "..." в конце обрезанного текста */
    
    /* Минимальная высота для заголовка в две строки */
    /* Используем line-height, чтобы рассчитать минимальную высоту */
    line-height: 1.3em; /* Пример межстрочного интервала. Возможно, придется настроить */
    min-height: calc(2 * 1.3em); /* 2 строки * 1.3em (line-height) = минимальная высота */
    /* Важно: если изменить line-height, нужно изменить и calc() */

    /* Дополнительные стили, если нужны */
    font-size: 1.1em; /* Пример размера шрифта, подстрой под свой дизайн */
    margin-top: 10px; /* Отступ сверху от изображения */
    margin-bottom: 10px; /* Отступ снизу до цены */
}
.woocommerce ul.products li.product .ast-loop-product__link .woocommerce-loop-product__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3em;
    min-height: calc(2 * 1.3em);
    font-size: 1.1em;
    margin-top: 10px;
    margin-bottom: 10px;
}

.astra-shop-summary-wrap .ast-woo-product-category {
    /* --- Свойства для обрезания текста WebKit/Blink (Chrome, Safari, Edge) --- */
    display: -webkit-box; /* Включаем flexbox-поведение для WebKit */
    -webkit-line-clamp: 2; /* Ограничиваем текст двумя строками */
    -webkit-box-orient: vertical; /* Ориентация блока по вертикали */
    overflow: hidden; /* Скрываем весь текст, выходящий за пределы */
    text-overflow: ellipsis; /* Добавляем "..." в конце обрезанного текста */
    
    /* --- Свойства для обеспечения стабильной высоты --- */
    line-height: 1.3em; /* Устанавливаем межстрочный интервал (ВАЖНО, должен совпадать с line-height товара) */
    /* Вычисляем минимальную высоту, чтобы избежать "прыжков" сетки */
    min-height: calc(2 * 1.3em); /* 2 строки * 1.3em (line-height) */

    /* --- Дополнительные стили, если нужны --- */
    /* В зависимости от вашего дизайна, возможно, потребуется скорректировать шрифт, отступы и цвет */
    /* font-size: 0.9em; */ 
    /* margin-bottom: 5px; */
}

 .woocommerce-page ul.products li.product .ast-woo-product-category {  
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: 
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3em; 
    min-height: calc(2 * 1.3em) !important;   
}


/* 3. Карточка товара в каталоге */
.products .product {
    background: #fff;
    //border: 1px solid var(--kniga-border);
    border-radius: var(--kniga-radius);
    padding: 5px;
	  margin: 5px !important;
    transition: all 0.3s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Эффект при наведении на карточку */
.products .product:hover {
    box-shadow: 0 10px 25px rgba(138, 0, 34, 0.2); /* Легкая бордовая тень */
    transform: translateY(-5px);
    border-color: var(--kniga-wine);
}

/* категория товра */
.woocommerce ul.products li.product .woocommerce-loop-product__title, .woocommerce-page ul.products li.product .ast-woo-product-category {
	margin-top: 0px;
	margin-bottom: 0px;
	padding-left: 5px;

}

/* Заголовок книги */
.woocommerce-loop-product__title {
	  font-family: inherit
    font-size: 1.1rem !important;
    min-height: 1.8em; /* Выравнивает высоту всех заголовков */
    margin-bottom: 10px !important;
    color: var(--kniga-text);
}

/* 4. Цена */
.price {
    color: var(--kniga-wine) !important;
    font-weight: 700 !important;
    font-size: 1.25rem !important;
    margin-bottom: 15px !important;
}

/* 5. Кнопки «В корзину» */
.button.product_type_simple, 
.button.add_to_cart_button {
    background-color: var(--kniga-wine) !important;
    color: #fff !important;
    border-radius: var(--kniga-radius) !important;
    padding: 12px 20px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: background 0.2s ease !important;
    border: none !important;
	width: 100%;
	text-align: center;
}

.button.product_type_simple:hover, 
.button.add_to_cart_button:hover {
    background-color: var(--kniga-wine-hover) !important;
}

/* 6. Мобильная адаптация: 2 колонки */
@media (max-width: 768px) {

    .woocommerce ul.products[class*="columns-"] li.product:nth-child(2n), 
    .woocommerce-page ul.products[class*="columns-"] li.product:nth-child(2n) {
        margin-right: 0 !important;
    }
}

/* Заголовки в списке товаров (каталог) */
.woocommerce-loop-product__title {
    font-family: 'Playfair Display', serif !important;
    font-weight: 400;
    font-size: 1.0rem !important;
    line-height: 1.3;
    letter-spacing: 0.3px;
    color: var(--kniga-text);
}

/* Заголовок на странице самого товара (Single Product) */
.product_title.entry-title {
    font-family: 'Playfair Display', serif !important;
    font-size: 2.2rem !important;
    font-weight: 700;
    color: var(--kniga-wine); /* Сделаем его бордовым для акцента */
    margin-bottom: 0.5em;
}

/* страницы авторов, серий */
/* Разделение списка на 2 колонки */
.authors-list-columns {
    list-style: none; 
    padding-left: 0; 
    column-count: 2;
    column-gap: 30px; 
}

.authors-list-columns li {
    break-inside: avoid-column;
    margin-bottom: 5px; 
}
@media (max-width: 768px) {
    .authors-list-columns {
        column-count: 1;
        column-gap: 0;
    }
}

a.active {
	color: var(--logo-color);
	font-weight: 600;
}

/* 1. Превращаем список товаров в Grid-контейнер */
.woocommerce ul.products {
    display: grid !important;
    /* Ключевая строка: 
       auto-fill — заполняет ряд максимально возможным числом колонок.
       minmax(200px, 1fr) — книга не может быть уже 200px, но может расширяться, чтобы занять всё место. 
    */
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
    grid-gap: 40px 25px !important; /* Отступы: 40px между рядами, 25px между колонками */
    margin: 2em 0 !important;
}

/* 2. Сбрасываем старые стили Astra для колонок */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    width: 100% !important; /* Ширину теперь диктует Grid */
    margin: 0 !important;   /* Убираем старые отступы */
    float: none !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

/* 3. Улучшение для 2K мониторов (от 2000px и выше) */
@media (min-width: 2000px) {
    .woocommerce ul.products {
        /* Увеличиваем минимальную ширину книги для огромных экранов, чтобы они не казались слишком мелкими */
        grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) !important;
        grid-gap: 50px 30px !important;
    }
}

/* 4. Адаптация для мобильных устройств (менее 768px) */
@media (max-width: 768px) {
    .woocommerce ul.products {
        /* Делаем минимум 140px, чтобы на телефонах точно влезало 2 колонки */
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
        //grid-gap: 10px 0px !important;
    }
}

/* 5. Выравнивание содержимого карточки */
.astra-shop-summary-wrap {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
    padding: 0px !important; /* Отступы внутри карточки */
}

/* 1. Ссылка-обертка заголовка становится "пружиной" */
.astra-shop-summary-wrap .ast-loop-product__link {
    margin-top: auto !important; /* Толкает всё содержимое вниз */
    margin-bottom: 0 !important;
    display: block !important;
}

/* 2. Обнуляем отступы самого заголовка */
.woocommerce-loop-product__title,  {
	  font-family: Roboto, sans-serif !important;
	  font-weight: 500 !important;
    margin-top: 0 !important;
    margin-bottom: 5px !important;
    padding: 0 !important;
    min-height: 0 !important; /* Убираем фиксацию высоты, раз мы жмем к низу */
}

.product_title.entry-title {
	 font-family: Roboto, sans-serif !important;
	  font-weight: 500 !important;
}
/* 3. Подтягиваем цену вплотную к заголовку */
.price {
    margin-top: 0 !important;
    margin-bottom: 12px !important; /* Расстояние до кнопки */
    display: block !important;
    line-height: 1 !important;
}

/* 4. Кнопка всегда в самом низу по порядку в flex */
.astra-shop-summary-wrap .button {
    margin-top: 0 !important;
    width: 100% !important;
}

/* Мягкий акцент на обложке без искажений */
/* 1. Исходное состояние: картинка чуть меньше и с легкой тенью */
.astra-shop-thumbnail-wrap img {
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    transform: scale(0.92); /* Уменьшаем до 92% от исходного размера */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); /* Мягкая базовая тень */
    backface-visibility: hidden;
    border-radius: 2px; /* Совсем легкое скругление углов, как у книги */
}

/* 2. Состояние при наведении: картинка увеличивается и "подлетает" */
.products .product:hover .astra-shop-thumbnail-wrap img {
    transform: scale(1); /* Возвращается к полному размеру (или 1.05 для сильного зума) */
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15); /* Тень становится глубже */
}

/* 3. Центрируем картинку, чтобы она росла из центра */
.astra-shop-thumbnail-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible !important;
    background: transparent !important; /* Убираем фоны, если они были */
}

/* Контейнер товара должен быть базой для позиционирования */
.site-main ul.products li.product {
    position: relative;
}

/* Стили значка Новинка */
.wxl-new-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 20; /* Поверх картинки */
    background: #ffcc00; /* Ярко-желтый */
    color: #000;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 800;
    font-family: 'Montserrat', sans-serif;
    display: flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
    pointer-events: none; /* Чтобы значок не мешал кликать по товару */
    animation: wxl-pulse 2s infinite; /* Легкое мерцание, чтобы привлечь внимание */
}

.wxl-star {
    font-size: 14px;
    color: #000;
}

/* На мобильных чуть уменьшаем */
@media (max-width: 480px) {
    .wxl-new-badge {
        top: 5px;
        right: 5px;
        padding: 2px 6px;
        font-size: 9px;
    }
}

/* 1. Главный контейнер в углу */
.wxl-right-badges-container {
    position: absolute;
    top: 10px; /* Смещаем весь блок выше к краю */
    right: 5px;
    display: flex;
    flex-direction: column; /* Элементы в столбик */
    gap: 0px; /* Расстояние между звездочкой и сердечком */
    align-items: flex-end;
    z-index: 30;
    pointer-events: none; /* Пропускаем клики насквозь на картинку */
}

/* 2. СБРОС старых стилей для звездочки */
.wxl-new-badge {
    position: static !important; /* Отменяем абсолютную позицию из старого CSS */
    margin: 0 !important;
    pointer-events: none; /* Звездочка не кликабельна */
    display: flex !important;
    width: auto;
    height: auto;
    padding: 4px 10px !important;
}

/* 3. Стиль Сердечка (делаем ярким и кликабельным) */
.wxl-wishlist-badge {
    pointer-events: auto; 
}

.wxl-wishlist-badge .tinv-wraper {
    display: block !important;
    margin: 0 !important;
}

.wxl-wishlist-badge a.tinvwl_add_to_wishlist_button {
    width: 32px !important;
    height: 32px !important;
    background: #ff4343 !important; /* Яркий красный как на ваших правках */
    color: #fff !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    border: 2px solid #ff4343 !important; /* Белая обводка как у звездочки */
    transition: transform 0.2s ease;
    text-decoration: none !important;
}

/* Скрываем лишний текст плагина */
.wxl-wishlist-badge .tinvwl-txt, 
.wxl-wishlist-badge .tinvwl-tooltip {
    display: none !important;
}

/* 4. Адаптив для мобильных */
@media (max-width: 480px) {
    .wxl-right-badges-container {
        top: 5px;
        right: 5px;
        gap: 5px;
    }
    .wxl-wishlist-badge a.tinvwl_add_to_wishlist_button {
        width: 28px !important;
        height: 28px !important;
    }
}


/* --- 6. SHOP: SINGLE PRODUCT --- 
   Сюда переноси: .woocommerce-product-gallery, .summary, .ast-sticky-add-to-cart, 
   вкладки описания и сопутствующие товары. */
   
/* Стили плашки в карточке товара */
.wxl-product-shipping-wrapper {
    margin-bottom: 1.5em;
}


/* Разрешаем плашке выходить за границы контейнера, если нужно */
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap {
    overflow: visible !important;
}

/* Стили самой плашки о наличии товара или на складе */
.wxl-delivery-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 20;
    padding: 12px 18px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.4;
    text-transform: uppercase;
    border-radius: 4px;
    color: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.12);
	text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.5);
}

.wxl-instock { background-color: rgba(46, 125, 50, 0.7); } /* Зеленый */
.wxl-preorder { background-color: var(--light-bg_transparent); } /* Твой винный */


/* карточка товара */
/* Ограничиваем растяжение основного изображения */
.woocommerce-product-gallery__image img {
    width: auto !important; /* Не даем растягиваться на всю ширину блока */
    max-width: 100%;       /* Но не даем вылезать за пределы, если картинка огромная */
    height: auto;
    margin: 0 auto;        /* Центрируем, если нужно */
    display: block;
}

/* ==========================================================================
   Kniga24 Importer: Стили для основной картинки и галереи товаров на карточке товара
   - Учитываем стандартную разметку WooCommerce/Astra
   ========================================================================== */

/* Стили для основного изображения товара */
.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image img.kniga24-main-product-image {
    max-width: 100%;
    height: auto; /* Позволяем основному изображению быть гибким */
    display: block;
}


/* Стили для наших кастомных миниатюр галереи */
/* Это обертка, которую мы добавили в kniga24_replace_product_thumbnails_with_external() */
.kniga24-custom-thumbnails-wrapper {
    display: flex; /* Используем flexbox для аккуратного размещения миниатюр */
    flex-wrap: wrap; /* Позволяем миниатюрам переноситься на новую строку */
    gap: 5px; /* Отступ между миниатюрами */
    margin-top: 10px; /* Отступ от основного изображения */
}

/* Каждый элемент миниатюры галереи */
.kniga24-custom-thumbnails-wrapper .kniga24-gallery-thumbnail-item {
    width: 80px; /* Примерная ширина миниатюры. Подстройте */
    height: 80px; /* Фиксированная высота для миниатюры */
    overflow: hidden; /* Обрезаем все, что выходит за границы */
    border: 1px solid #eee;
    box-sizing: border-box;
    display: flex; /* Для центрирования */
    align-items: center;
    justify-content: center;
}

/* Само изображение внутри миниатюры галереи */
.kniga24-custom-thumbnails-wrapper .kniga24-gallery-thumbnail-item img.kniga24-gallery-image {
    width: 100%; /* Изображение заполняет всю ширину */
    height: 100%; /* Изображение заполняет всю высоту */
    object-fit: cover; /* Заполняем контейнер, обрезая лишнее */
    display: block;
}


/* Контейнер товара должен быть флекс-боксом для управления колонками */
.woocommerce div.product {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0;
}

/* Защита от "мыла": картинка не растягивается больше своего реального размера */
.woocommerce-product-gallery__image img {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    display: block;
    margin: 0 auto;
}

/* --- 2. ДЕКСТОПЫ (шире 1024px): 25% на 75% --- */
@media (min-width: 1025px) {
    .woocommerce div.product div.images {
        width: 25% !important;
        flex: 0 0 25% !important;
    }
    .woocommerce div.product div.summary {
        width: 75% !important;
        flex: 0 0 75% !important;
        padding-left: 40px; /* Большой отступ для красоты */
    }
}

/* --- 3. ПЛАНШЕТЫ (768px - 1024px): 50% на 50% --- */
@media (min-width: 768px) and (max-width: 1024px) {
    .woocommerce div.product div.images {
        width: 50% !important;
        flex: 0 0 50% !important;
    }
    .woocommerce div.product div.summary {
        width: 50% !important;
        flex: 0 0 50% !important;
        padding-left: 30px; /* Средний отступ */
    }
}

/* --- 4. МОБИЛЬНЫЕ (меньше 767px): 100% и 100% --- */
@media (max-width: 767px) {
    .woocommerce div.product div.images,
    .woocommerce div.product div.summary {
        width: 100% !important;
        flex: 0 0 100% !important;
        padding-left: 0 !important; /* Убираем боковые отступы */
    }
    
    .woocommerce div.product div.summary {
        margin-top: 20px; /* Отступ текста от картинки сверху */
    }
}


/* Адаптация липкой панели на мобильных (до 768px) */
@media (max-width: 768px) {
	/* 1. Сбрасываем ограничения родительского контейнера Astra */
    .ast-sticky-add-to-cart .ast-container {
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
	
    /* 1. Делаем главный контейнер вертикальным и разрешаем перенос */
    .ast-sticky-add-to-cart-content {
        display: flex !important;
        flex-direction: column !important;
        padding: 10px 15px !important;
        gap: 8px !important; /* Отступы между рядами */
    }
	
.ast-sticky-add-to-cart-content {	
	background-color: var(--light-bg);

	}
	
    /* РЯД 1: Название на всю ширину */
    .ast-sticky-add-to-cart-title-wrap {
        width: 100% !important;
        justify-content: center !important;
    }
    
    /* Скрываем картинку в липкой панели на мобильных, чтобы сэкономить место */
    .ast-sticky-add-to-cart-title-wrap img {
        display: none !important;
    }

    .ast-sticky-add-to-cart-title {
        font-size: 14px !important;
        font-weight: 600 !important;
        text-align: center;
    }

    /* РЯД 2: Цена и кнопка в одну строку */
    .ast-sticky-add-to-cart-action-wrap {
        display: flex !important;
        flex-wrap: wrap !important; /* Позволяет перекинуть доставку на 3-й ряд */
        width: 100% !important;
        justify-content: space-between !important;
        align-items: center !important;
        margin: 0 !important;
    }

    /* Цена */
    .ast-sticky-add-to-cart-action-price {
        margin: 0 !important;
        font-size: 16px !important;
    }

    /* Форма с кнопкой и количеством */
    .ast-sticky-add-to-cart-action-wrap .cart {
        display: flex !important;
        align-items: center !important;
        margin: 0 !important;
    }

    /* РЯД 3: Доставка на всю ширину под ценой и кнопкой */
    .wxl-product-shipping-wrapper {
        width: 100% !important;
        order: 10 !important; /* Уходит в самый низ внутри родителя */
        margin-top: 5px !important;
    }

    .wxl-delivery-badge-link {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        background-color: #f8f9fa; /* Легкий фон, чтобы выделить как кнопку */
        padding: 6px !important;
        border-radius: 4px !important;
        border: 1px solid #e9ecef !important;
        font-size: 12px !important;
    }
}
.woocommerce-Price-amount{
	font-size: 1.4em !important;
}
/* Фикс для очень маленьких экранов (кнопка и цена) */
@media (max-width: 400px) {
    .ast-sticky-add-to-cart-action-wrap {
        justify-content: center !important;
        gap: 15px;
    }
}

/* --- 7. SHOP: CART & CHECKOUT --- 
   Сюда переноси: .woocommerce-cart-form, .shop_table, .checkout, .woocommerce-mini-cart,
   и все стили для оформления заказа Montonio. */

/* правила для пустой корзины */
/* Контейнер предложений в пустой корзине */
.wxl-empty-cart-suggestions {
    margin-top: 50px;
    padding-top: 30px;
    border-top: 1px solid #eee;
}

.wxl-suggestion-title {
    text-align: center;
    margin-bottom: 30px;
    font-size: 24px;
    font-weight: 700;
}


/* --- 8. WXL MESSENGER & CHAT --- 
   Сюда переноси: .wxl-chat-container, .wxl-message-bubble, .wxl-messenger-header 
   и любые стили, относящиеся к твоему плагину сообщений. */

/* Контейнер чата */
#wxl-chat-container {
    background: #f0f0f1;
    border: 1px solid #ccd0d4;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    max-height: 600px;
}

.wxl-chat-messages {
    padding: 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Общий стиль сообщения */
.wxl-chat-msg {
    max-width: 80%;
    padding: 10px 15px;
    border-radius: 10px;
    position: relative;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.msg-header {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    margin-bottom: 5px;
    font-weight: bold;
    text-transform: uppercase;
}

/* 1. ОТ КЛИЕНТА (Желтый) */
.msg-from-client {
    align-self: flex-start;
    background-color: #fff9c4; /* Желтый */
    border: 1px solid #fbc02d;
    color: #5d4037;
}

/* 2. АДМИНИСТРАТОР (Зеленый) */
.msg-to-client {
    align-self: flex-end;
    background-color: #e8f5e9; /* Зеленый */
    border: 1px solid #81c784;
    color: #1b5e20;
}

/* 3. СТАТУС / СИСТЕМА (Голубой) */
.msg-system {
    align-self: center;
    background-color: #e3f2fd;
    border: 1px solid #90caf9;
    color: #1565c0;
    max-width: 95%;
    font-style: italic;
    text-align: center;
}

.wxl-chat-input-area {
    padding: 15px;
    background: #fff;
    border-top: 1px solid #ccd0d4;
}

.wxl-chat-input-area textarea {
    width: 100%;
    height: 70px;
    margin-bottom: 10px;
    resize: none;
}

/* Общий стиль для всех бабблов */
.wxl-chat-item { 
    margin-bottom: 10px !important; 
    padding: 12px 15px !important; 
    border-radius: 4px !important; 
    width: 100% !important; /* Теперь все сообщения на всю ширину */
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: block !important;
    clear: both !important;
}

/* Системные уведомления (Голубой) - теперь тоже на всю ширину */
.msg-system { 
    background: #e3f2fd !important; 
    border: 1px solid #bbdefb !important; 
    text-align: center; 
    color: #1565c0 !important;
}

/* От Магазина (Зеленый) */
.msg-to-client { 
    background: #e8f5e9 !important; 
    border: 1px solid #c8e6c9 !important; 
    color: #2e7d32 !important; 
}

/* От Клиента (Желтый) */
.msg-from-client { 
    background: #fff9c4 !important; 
    border: 1px solid #fff176 !important; 
    color: #5d4037 !important; 
}

.wxl-chat-meta { font-size: 11px; font-weight: bold; margin-bottom: 5px; opacity: 0.8; }


/* --- 9. SIDEBAR & WIDGETS --- 
   Сюда переноси: #secondary, .widget-title, стили для списков авторов и серий
   в боковой колонке. */
/* Заголовки виджетов в сайдбаре (Категории, Фильтры) */
.widget-title {
    font-family: 'Playfair Display', serif;
    text-transform: none; /* Убираем капс, если он был, для элегантности */
    border-bottom: 2px solid var(--kniga-wine);
    padding-bottom: 10px;
    margin-bottom: 15px;
}

/* Принудительная сетка для нашего блока серии */
.wxl-series-block ul.products {
    display: grid !important;
    /* Создаем 5 равных колонок */
    grid-template-columns: repeat(5, 1fr) !important; 
    gap: 20px !important;
}

/* Сбрасываем стандартные флоаты и отступы Astra, которые ломают сетку */
.wxl-series-block ul.products li.product {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
}

/* Адаптация для планшетов (3 колонки) */
@media (max-width: 921px) {
    .wxl-series-block ul.products {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* Адаптация для мобильных (2 колонки) */
@media (max-width: 544px) {
    .wxl-series-block ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
}

/* --- 10. SPECIAL COMPONENTS --- 
   Сюда переноси: .wxl-delivery-badge, .wxl-banner-container, .wxl-modal 
   и другие уникальные элементы. */
.wxl-delivery-badge-link {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: 700;
    text-decoration: none !important;
    color: #fff !important;
    font-size: 14px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

.wxl-delivery-badge-link .dashicons {
    margin-right: 8px;
    font-size: 18px;
}

.wxl-delivery-badge-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.wxl-delivery-badge-link.wxl-instock { background-color: rgba(46, 125, 50, 1); }
.wxl-delivery-badge-link.wxl-preorder { background-color: rgba(138, 0, 34, 1); }

/* Модальное окно */
.wxl-modal {
    display: none;
    position: fixed;
    z-index: 99999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6);
    backdrop-filter: blur(3px);
}

.wxl-modal-content {
    position: relative;
    background-color: #fff;
    margin: 5% auto;
    padding: 0;
    width: 80%;
    max-width: 800px;
    height: 80vh;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 30px rgba(0,0,0,0.3);
}

.wxl-modal-close {
    position: absolute;
    top: 10px;
    right: 20px;
    color: #333;
    font-size: 35px;
    font-weight: bold;
    cursor: pointer;
    z-index: 10;
}

.wxl-modal-content iframe {
    width: 100%;
    height: 100%;
    border: none;
}

@media (max-width: 768px) {
    .wxl-modal-content { width: 95%; height: 90vh; margin: 2% auto; }
}



.wxl-banner-container {
    position: relative;
    width: 100%;
    /* Убираем min-height или ставим очень маленьким */
    min-height: 10px; 
    overflow: hidden;
    line-height: 0; /* Убирает лишние отступы под картинкой */
}

/* Слайд по умолчанию (первый) должен определять высоту контейнера */
.wxl-slide-item:first-child {
    position: relative; /* Не абсолютный! */
    display: block;
    opacity: 1;
    visibility: visible;
}

/* Все остальные слайды накладываются сверху */
.wxl-slide-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
}

.wxl-slide-item img {
    width: 100%;
    height: auto; /* Картинка сохраняет пропорции */
    display: block;
}

/* --- 11. FOOTER --- 
   Сюда переноси: .site-footer, .ast-footer-copyright, вертикальные разделители
   в подвале и меню подвала. */
/******** ПОДВАЛ **********/
/* 1. настройка ряда подвала */
.site-above-footer-wrap .ast-builder-grid-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 0 !important;
	  padding-left: 10px;
}

/* 2. ширины ячеек (по 25%) */
.site-above-footer-wrap .site-footer-section {
    width: 25% !important;
    max-width: 25% !important;
    flex: 1 1 25% !important;
    margin: 0 !important;
    
}

/* 3. ПРЕВРАЩАЕМ МЕНЮ В ВЕРТИКАЛЬНЫЙ СПИСОК */
.site-above-footer-wrap .wxl-buttons-menu-list {
    flex-direction: column !important; /* Строго в столбик */
    display: flex !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 8px !important;
    overflow: visible !important;
}

/* Убираем оформление кнопок-таблеток для ссылок в подвале */
.site-above-footer-wrap .menu-link {
    background: none !important;
    border: none !important;
    padding: 1px 20px !important;
    border-radius: 0 !important;
    color: white !important;
	text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.5);
    font-size: 14px !important;
    box-shadow: none !important;
    font-weight: 400 !important;
    text-align: left !important;
}

.site-above-footer-wrap .menu-link:hover {
    color: #fff !important;
    text-decoration: underline !important;
}

/* 4. ВЕРТИКАЛЬНЫЕ РАЗДЕЛИТЕЛИ */
@---media (min-width: 922px) {
    .site-footer-above-section-1 {

     padding-right: 20px !important;
			padding-left: 3em;
			padding-top: 20px;
			min-height: 160px !important;
    }
    

	  .site-footer-above-section-2,
    .site-footer-above-section-3,
    .site-footer-above-section-4 {
        padding-left: 0px !important;
			padding-top: 20px;
			border-left: 1px solid rgba(255, 255, 255, 0.3) !important;
			min-height: 200px !important;
    }
}

.site-footer {
	background-color: var(--light-bg);
}
.site-footer-above-section-2 h4,
.site-footer-above-section-3 h4,
.site-footer-above-section-1 h4 {
	padding-left: 2em;
	color: white !important;
	text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.5);
} 

.site-footer-above-section-1 hr,
.site-footer-above-section-2 hr,
.site-footer-above-section-3 hr{
  border: none;
  height: 2px;
  background-image: linear-gradient(to right, var(--light-bg), white, var(--light-bg));
}

/* 5. ЗАГОЛОВКИ И 4-Я КОЛОНКА */
.site-above-footer-wrap .wp-block-heading {
    font-size: 17px !important;
    color: white !important;
    margin-bottom: 15px !important;
    font-weight: 700 !important;
	text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.5);
}

.site-footer-above-section-4 .ast-builder-html-element table {
    width: 100% !important;
    color: white;
    font-size: 13px;
}

/* Фикс для Копирайта (чтобы не улетал) */
.ast-footer-copyright {
    text-align: left !important;
    font-size: 12px !important;
    color: rgba(255,255,255,0.8) !important;
    margin-top: 15px !important;
}

/* 6. МОБИЛЬНАЯ АДАПТАЦИЯ (921px и ниже) */
@media (max-width: 921px) {
    .site-above-footer-wrap .ast-builder-grid-row {
        flex-direction: column !important;
    }
    
    .site-above-footer-wrap .site-footer-section {
        width: 100% !important;
        max-width: 100% !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        padding: 20px 0 !important;
    }
}
/* 1. Убираем пустые параграфы и лишние отступы в подвале */
.site-above-footer-wrap p:empty,
.site-above-footer-wrap p:is(:blank) {
    display: none !important;
}

/* Убираем отступы у блоков виджетов, которые создают дыры */
.site-above-footer-wrap .widget_block p {
    margin-bottom: 0 !important;
}


/* --- 12. MOBILE OVERRIDES (768px) --- 
   Это самый важный блок! Перенеси сюда все свои @media (max-width: 768px).
   Если внутри разделов выше есть свои медиа-запросы, их можно оставить там,
   но глобальные "выравнивания" лучше держать здесь в конце. */
   
 
/*****************************************************************************************/

/* стили для аккардеона details + summary */
details {
        margin-bottom: 2px;
        border-radius: 5px;
        overflow: hidden;
        border: 1px solid #ddd;
    }

    summary {
        //background-color: var(--kniga-wine);
        //color: var(--white);
        padding: 15px;
        cursor: pointer;
        //font-weight: bold;
        list-style: none; /* Убираем стандартную стрелку в Chrome */
        transition: background-color 0.3s ease;
    }

    summary::-webkit-details-marker {
        display: none; /* Убираем стандартную стрелку в Safari */
    }

    summary:hover {
        background-color: var(--kniga-wine);
		color: white;
    }

	details[open] summary {
        background-color: var(--kniga-wine);
		color: white;
    }
    summary:after {
        content: ' +';
        float: right;
    }

    details[open] summary:after {
        content: ' −';
    }

    .answer {
        //background-color: var(--light-bg);
        padding: 20px;
        line-height: 1.6;
        border: 1px solid var(--kniga-wine);
		
    }