/*
Theme Name: Hello Elementor Child
Template: hello-elementor
Version: 1.0
*/


#site-global-header,
#site-global-footer {
  width: 100%;
  position: relative;
  margin: 0;
  padding: 0;
  display: flex !important;
  flex-direction: row !important; /* Строго горизонтальная линия */
  flex-wrap: nowrap !important; 
}

#site-global-header > .elementor,
#site-global-footer > .elementor {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

#site-global-header .header-surface,
#site-global-footer .footer-surface {
  width: 100%;
  margin: 0;
  padding: 0;
}

#site-global-header .header-surface .e-con,
#site-global-footer .footer-surface .e-con,
#site-global-header .header-surface .e-con-inner,
#site-global-footer .footer-surface .e-con-inner {
  width: 100%;
}

@media (max-width: 767px) {

    body.archive ul.products,
    body.search-results ul.products,
    body.tax-product_cat ul.products,
    .poparim-shop-products-column ul.products {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
        padding: 0 !important;
        margin: 15px 0 !important;
        box-sizing: border-box !important;
    }

    body.archive ul.products li.product.first,
    body.archive ul.products li.product.last,
    body.search-results ul.products li.product.first,
    body.search-results ul.products li.product.last,
    body.tax-product_cat ul.products li.product.first,
    body.tax-product_cat ul.products li.product.last,
    html body ul.products li.product {
        clear: none !important;
        margin: 0 !important;
        float: none !important;
    }

    .poparim-shop-sidebar-column,
    div.poparim-shop-sidebar-column {
        display: none !important;
    }

    #site-global-header,
    .site-global-header {
        position: sticky !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 99999 !important;
        background: #ffffff !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    #site-global-footer,
    .site-global-footer {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    #site-global-header .header-surface,
    .site-global-header .header-surface,
    #site-global-footer .footer-surface,
    .site-global-footer .footer-surface {
        width: 100% !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    #poparim-mobile-bottom-nav {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 65px !important;
        background: #ffffff !important;
        border-radius: 20px 20px 0 0 !important;
        border-top: 1px solid rgba(0, 0, 0, 0.04) !important;
        box-shadow: 0 -5px 25px rgba(0, 0, 0, 0.05) !important;
        z-index: 99999999 !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-around !important;
        padding: 0 15px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
    }

    #poparim-mobile-bottom-nav.nav-hidden {
        transform: translateY(100%) !important;
    }

    #poparim-mobile-bottom-nav .elementor-widget-image,
    #poparim-mobile-bottom-nav .elementor-widget-container img,
    #poparim-mobile-bottom-nav img {
        width: 36px !important;
        height: 36px !important;
        max-width: 36px !important;
        min-width: 36px !important;
        object-fit: contain !important;
        margin: 0 auto !important;
        display: block !important;
    }

    body.woocommerce-page,
    body.home,
    body.archive,
    body.tax-product_cat,
    body.search-results {
        padding-bottom: 15px !important; /* было 85px */
    }
}

/* ==========================================================================
   ФАБРИЧНАЯ ЗАЩИТА ИКОНОК ОТ ФАНТОМНОГО РАЗДУВАНИЯ (ПК И МОБИЛА)
   ========================================================================== */
/* Задаем базовый фоновый размер для шрифтовых иконок до загрузки тяжелых CSS-пакетов темы */
.elementor-icon-list-icon i,
.elementor-icon-list-icon svg,
i.fa, i.fas, i.fab, i.far {
    width: 1em;
    height: 1em;
    display: inline-block;
}


/* ==========================================================================
   БРУТАЛЬНЫЙ BENTO-ДИЗАЙН БОКОВОГО МЕНЮ И ПОИСКА ДЛЯ POPARIM (HELLO CHILD)
   ========================================================================== */

/* 1. СВОБОДНАЯ ПОДЛОЖКА ДЛЯ ВСЕГО БЛОКА МЕНЮ В САЙДБАРЕ (УПРАВЛЯЕТСЯ ИЗ ELEMENTOR) */
.widget_nav_menu,
.widget_nav_menu .menu-menu-kataloga-container,
.widget_nav_menu ul.menu {
    box-sizing: border-box !important;
    width: 100% !important;
}
.widget_nav_menu { padding: 0 !important; border: none !important; box-shadow: none !important; background: transparent !important; }
.widget_nav_menu .menu-menu-kataloga-container { margin: 0 !important; }

/* Полное выжигание унылых синих точек-маркеров и дефисов темы Hello */
.widget_nav_menu ul, .widget_nav_menu ul.menu { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.widget_nav_menu ul li { list-style: none !important; padding: 12px 0 !important; border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important; margin: 0 !important; position: relative !important; }
.widget_nav_menu ul li:last-child { border-bottom: none !important; }
.widget_nav_menu ul li::before, .widget_nav_menu ul li::after, .widget_nav_menu ul.menu li::before { display: none !important; content: "" !important; }

/* Интерактивные ссылки категорий с красным откликом Poparim (+5px вправо на ПК) */
.widget_nav_menu ul li a, .widget_nav_menu ul.menu li a { color: #4a4d56 !important; font-weight: 700 !important; font-size: 14px !important; text-decoration: none !important; display: block !important; transition: all 0.22s ease !important; }
.widget_nav_menu ul li a:hover, .widget_nav_menu ul.menu li a:hover { color: #e11c23 !important; transform: translateX(5px) !important; padding-left: 0 !important; }

/* Красивые вложенные ссылки (дочерние пункты: поды, коилы) */
.widget_nav_menu ul.sub-menu { padding-left: 15px !important; margin-top: 5px !important; border-top: 1px dashed rgba(0, 0, 0, 0.04) !important; list-style: none !important; }
.widget_nav_menu ul.sub-menu li { padding: 8px 0 !important; border-bottom: 1px dashed rgba(0, 0, 0, 0.03) !important; }
.widget_nav_menu ul.sub-menu li:last-child { border-bottom: none !important; }


/* 2. ОРИГИНАЛЬНЫЙ ПОИСК С ЛУПОЙ, ВСТРОЕННОЙ ВНУТРИ ПОЛЯ ВВОДA СПРАВА */
.widget_product_search h2, .widget_product_search .widget-title, .woocommerce-product-search label, .wp-block-search__label, .widget_product_search label { display: none !important; }
.widget_product_search form, .woocommerce-product-search, .wp-block-search, .wp-block-search__inside-wrapper { position: relative !important; display: block !important; width: 100% !important; margin: 0 0 20px 0 !important; padding: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; }

/* Стилизация серого поля ввода «Искать товары...» */
.widget_product_search input[type="search"], .woocommerce-product-search input[type="search"], .woocommerce-product-search .search-field, .wp-block-search__input { width: 100% !important; height: 48px !important; padding: 0 60px 0 16px !important; background: #f4f5f7 !important; border: 1px solid rgba(0, 0, 0, 0.04) !important; border-radius: 14px !important; font-size: 14px !important; color: #060709 !important; box-sizing: border-box !important; outline: none !important; transition: all 0.2s ease !important; margin: 0 !important; }
.widget_product_search input[type="search"]:focus, .woocommerce-product-search input[type="search"]:focus { border-color: #e11c23 !important; background: #ffffff !important; }

/* Красная квадратная кнопка-капсула, прижатая к правому краю поля ввода */
.widget_product_search button, .widget_product_search input[type="submit"], .woocommerce-product-search button, .woocommerce-product-search input[type="submit"], .woocommerce-product-search [type="submit"], .wp-block-search__button { position: absolute !important; right: 0 !important; top: 0 !important; height: 48px !important; width: 48px !important; background: #e11c23 !important; color: transparent !important; border: none !important; border-radius: 0 14px 14px 0 !important; cursor: pointer !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 0 !important; box-shadow: none !important; background-image: none !important; transition: background 0.2s ease !important; z-index: 5 !important; }
.widget_product_search button:hover, .woocommerce-product-search button:hover { background: #b81218 !important; }

/* Генерация белой контурной лупы 🔍 строго по центру красной кнопки */
.widget_product_search button::before, .woocommerce-product-search button::before, .wp-block-search__button::before { content: "🔍" !important; font-size: 16px !important; color: #ffffff !important; display: block !important; line-height: 1 !important; position: relative !important; visibility: visible !important; }

/* 3. СБРОС ДЕФОЛТНЫХ СЧЕТЧИКОВ КОЛИЧЕСТВА ТОВАРОВ В ПЛИТКАХ КАТЕГОРИЙ WOO */
.woocommerce-loop-category__title .count, mark.count, .products .product-category mark { display: none !important; }

/* 4. ТОТАЛЬНОЕ ВЫЖИГАНИЕ ВСТРОЕННЫХ ХЛЕБНЫХ КРОШЕК WOOCOMMERCE */
.woocommerce-breadcrumb, .breadcrumbs, .woocommerce-breadcrumb a { display: none !important; height: 0 !important; padding: 0 !important; margin: 0 !important; visibility: hidden !important; opacity: 0 !important; font-size: 0 !important; line-height: 0 !important; }

/* ==========================================================================
   ФИКСИРОВАННЫЙ СТИЛЬ ГЛАВНОГО БОКСА ПОДВАЛА (ПАРАМЕТРЫ С ЭКРАНА)
   ========================================================================== */
#site-global-footer,
.site-global-footer,
.poparim-light-footer-wrap {
    background-color: #444444 !important; /* Наш брутальный темно-серый фон */
    background: #444444 !important;
    
    border: 1px solid #9d9d9d !important;  /* Сплошная серая рамка 1px */
    border-radius: 15px !important;        /* Bento-скругление углов 15px */
    
    box-sizing: border-box !important;
    overflow: hidden !important;           /* Чтобы внутренний контент не вылезал за скругления */
}

/* ==========================================================================
   УЛЬТИМАТИВНОЕ ПРАВОЕ ЛИПКОЕ СКОЛЬЖЕНИЕ САЙДБАРA ДЛЯ POPARIM (HELLO CHILD)
   ========================================================================== */
@media (min-width: 768px) {
    /* Разблокируем свободное движение контейнеров для липкости */
    .poparim-main-shop-layout-container,
    .poparim-shop-products-column,
    #content,
    .site-main {
        overflow: visible !important;
    }

    /* Намертво приклеиваем правую боковую панель к стеклу экрана при прокрутке */
    aside#poparim-dynamic-sidebar-right,
    .poparim-shop-sidebar-column {
        position: -webkit-sticky !important;
        position: sticky !important;
        top: 140px !important;                 /* Идеальный отступ сверху под размер вашей шапки */
        width: 280px !important;               /* Фиксируем аккуратную ширину Bento-карточки */
        height: auto !important;
        max-height: calc(100vh - 180px) !important; /* Меню никогда не залезет под экран снизу */
        overflow-y: auto !important;           /* Внутренний микро-скролл, если категорий станет слишком много */
        z-index: 99 !important;
        align-self: flex-start !important;     /* Flexbox-активатор липкости */
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Поправка высоты скольжения под черную админку WordPress (если вы авторизованы) */
    .admin-bar aside#poparim-dynamic-sidebar-right,
    .admin-bar .poparim-shop-sidebar-column {
        top: 172px !important;
        max-height: calc(100vh - 212px) !important;
    }
}

/* Смываем системный ползунок скролла внутри сайдбара для идеальной Bento-чистоты */
aside#poparim-dynamic-sidebar-right::-webkit-scrollbar,
.poparim-shop-sidebar-column::-webkit-scrollbar {
    width: 0px !important;
}

/* ==========================================================================
   КОРРЕКЦИЯ ЗАЗОРА: РАЗДВИГАЕМ ТОВАРЫ И ПРАВОЕ МЕНЮ КАТАЛОГА
   ========================================================================== */
/* Немного сужаем колонку товаров, чтобы освободить место под красивую дыру */
.poparim-shop-products-column {
    width: calc(100% - 340px) !important; /* Увеличиваем вычитаемый зазор */
    max-width: calc(100% - 340px) !important;
}

/* Добавляем жесткий левый отступ для нашей правой Bento-карточки */
aside#poparim-dynamic-sidebar-right,
.poparim-shop-sidebar-column {
    margin-left: 40px !important; /* Этот отступ мощно оттолкнет меню от аромабаз в левую сторону */
    width: 300px !important;       /* Идеальная фиксированная ширина сайдбара */
}

/* ==========================================================================
   КОСМЕТИКА КАТАЛОГА: ИДЕАЛЬНОЕ ЦЕНТРИРОВАНИЕ НАЗВАНИЙ ТОВАРОВ И КАТЕГОРИЙ
   ========================================================================== */

/* 1. Центрируем названия категорий на витрине */
.woocommerce ul.products li.product-category h2,
.woocommerce-loop-category__title,
.product-category h2,
.product-category h3 {
    text-align: center !important;
    width: 100% !important;
    display: block !important;
    margin: 10px auto 0 auto !important; /* Дали аккуратный зазор сверху от круглой иконки */
}

/* 2. Центрируем названия самих товаров внутри разделов */
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product h3,
.woocommerce-loop-product__title,
.products .product h2,
.products .product h3 {
    text-align: center !important;
    width: 100% !important;
    display: block !important;
    margin: 12px auto 6px auto !important;
}

	/* ==========================================================================
   КОСМЕТИКА КАТАЛОГА: ИДЕАЛЬНОЕ ЦЕНТРИРОВАНИЕ И ПРЕМИУМ-СТИЛЬ ЦЕННИКОВ
   ========================================================================== */

/* 1. Центрируем блок с ценой в плитке товара */
.woocommerce ul.products li.product .price,
.woocommerce-Price-amount,
.products .product .price {
    text-align: center !important;
    display: flex !important;
    justify-content: center !important; /* Центрируем флекс-элементы по горизонтали */
    align-items: center !important;
    gap: 8px !important;               /* Даем аккуратный зазор между старой и новой ценой */
    width: 100% !important;
    margin: 4px auto 12px auto !important;
}

/* 2. Делаем акцент на новой (акционной) цене */
.woocommerce ul.products li.product .price ins,
.products .product .price ins,
.price ins .woocommerce-Price-amount {
    color: #ff4500 !important;          /* Подсвечиваем оранжево-красным цветом */
    font-weight: 700 !important;
    text-decoration: none !important;  /* Убираем стандартное подчеркивание */
}

/* 3. Окультуриваем старую (перечеркнутую) цену */
.woocommerce ul.products li.product .price del,
.products .product .price del,
.price del .woocommerce-Price-amount {
    color: #94a3b8 !important;          /* Уводим в мягкий серый цвет */
    font-size: 0.9em !important;        /* Слегка уменьшаем размер шрифта */
    font-weight: 500 !important;
}

	/* ==========================================================================
   ТАКТИЛЬНЫЙ ОТКЛИК: ЭФФЕКТ НАЖАТИЯ НА КАРТОЧКУ ДЛЯ СМАРТФОНОВ
   ========================================================================== */
@media (max-width: 767px) {
    /* Когда покупатель касается карточки товара пальцем на смартфоне */
    .woocommerce ul.products li.product:active,
    ul.products li.product:active,
    .woocommerce-page ul.products li.product:active {
        transform: scale(0.97) !important; /* Карточка уютно и мягко приседает/уменьшается вовнутрь на 3% */
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02) !important; /* Мягко прижимаем тень */
        transition: transform 0.15s ease, box-shadow 0.15s ease !important; /* Мгновенная плавная реакция */
    }
}

/* ==========================================================================
   УЛЬТИМАТИВНОЕ УНИЧТОЖЕНИЕ ИКОНКИ ЛУПЫ НА ФОТОГРАФИЯХ ТОВАРОВ
   ========================================================================== */
.woocommerce-product-gallery__trigger,
html body .woocommerce-product-gallery__trigger,
.single-product .woocommerce-product-gallery__trigger,
.product-gallery-slider-wrapper .woocommerce-product-gallery__trigger {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Сбрасываем курсор увеличения на самой картинке товара */
.woocommerce-product-gallery__image a,
.woocommerce-product-gallery__image img {
    cursor: default !important;
    pointer-events: none !important; /* Полностью блокирует клик и зум под пальцем/мышкой */
}

/* ==========================================================================
   ФИРМЕННАЯ АКТИВАЦИЯ И ХАЙ-ТЕК СТИЛИЗАЦИЯ ССЫЛОК КАТЕГОРИЙ В МЕНЮ
   ========================================================================== */

/* 1. БАЗОВАЯ КРАСОТА ССЫЛОК */
.widget_nav_menu ul li a, 
.widget_nav_menu ul.menu li a {
    color: #212529 !important;      /* Делаем шрифт пунктов более глубоким и читаемым */
    font-weight: 800 !important;      /* Наш фирменный жирный Brutal Bold стиль */
    font-size: 14px !important;
    letter-spacing: 0.3px !important;
    text-transform: none !important;
    position: relative !important;
    display: inline-block !important;
    transition: all 0.25s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* 2. АВТОМАТИЧЕСКАЯ ПОДСВЕТКА АКТИВНОЙ СТРАНИЦЫ (ГДЕ СЕЙЧАС КЛИЕНТ) */
.widget_nav_menu ul li.current-menu-item > a,
.widget_nav_menu ul li.current-menu-ancestor > a,
.widget_nav_menu ul li.current_page_item > a {
    color: #e11c23 !important;       /* Пункт горит фирменным сочным красным */
    transform: translateX(8px) !important; /* Намертво сдвигается вправо, показывая фокус */
    font-weight: 900 !important;
}

/* Генерируем жесткий статический маркер перед активным пунктом */
.widget_nav_menu ul li.current-menu-item > a::before,
.widget_nav_menu ul li.current_page_item > a::before {
    content: "— " !important;
    color: #e11c23 !important;
    font-weight: 900 !important;
}

/* 3. ИНТЕРАКТИВНЫЙ ВЫЛЕТ МАРКЕРА ПРИ НАВЕДЕНИИ МЫШИ НА ПК */
@media (min-width: 768px) {
    /* Создаем скрытый маркер перед каждой ссылкой */
    .widget_nav_menu ul li a::before {
        content: "— " !important;
        position: absolute !important;
        left: -15px !important;       /* Прячем его чуть левее видимой зоны */
        opacity: 0 !important;         /* Делаем полностью прозрачным */
        color: #e11c23 !important;
        transition: all 0.22s ease !important;
    }

    /* ЭФФЕКТ НАВЕДЕНИЯ: маркер плавно проявляется и вылетает вперед */
    .widget_nav_menu ul li a:hover {
        color: #e11c23 !important;    /* Ссылка вспыхивает красным */
        transform: translateX(12px) !important; /* Вся строчка изящно отпрыгивает вправо */
    }

    .widget_nav_menu ul li a:hover::before {
        left: -18px !important;       /* Маркер встает ровно перед текстом */
        opacity: 1 !important;         /* Становится на 100% видимым */
    }
}

/* 4. ОФОРМЛЕНИЕ ЛИНИЙ-РАЗДЕЛИТЕЛЕЙ МЕЖДУ КАТЕГОРИЯМИ */
.widget_nav_menu ul li {
    border-bottom: 1px dashed rgba(6, 7, 9, 0.06) !important; /* Превращаем унылые полосы в аккуратный хай-тек пунктир */
    padding: 13px 0 !important;       /* Увеличиваем кликабельную зону для пальцев */
}
.widget_nav_menu ul li:last-child {
    border-bottom: none !important;   /* Убираем нижнюю полосу у самого последнего пункта */
}

/* ==========================================================================
   БРУТАЛЬНЫЙ СТИЛЬ ДЛЯ СЕЛЕКТОРА СОРТИРОВКИ ТОВАРОВ WOOCOMMERCE
   ========================================================================== */
/* 1. БАЗОВОЕ СОСТОЯНИЕ ВЫПАДАЮЩЕГО СПИСКА «ИСХОДНАЯ СОРТИРОВКА» */
.woocommerce-ordering select,
form.woocommerce-ordering select,
body .woocommerce-ordering select {
    height: 44px !important;               /* Оптимальная высота, аккуратная и плотная */
    padding: 0 40px 0 16px !important;     /* Свободные Bento-отступы внутри селектора */
    background-color: #f4f5f7 !important;  /* Идеальный мягкий серый фон, точно как у поля поиска */
    background: #f4f5f7 !important;
    
    border: 1px solid rgba(0, 0, 0, 0.05) !important; /* Легкий, едва заметный брутальный контур */
    border-radius: 12px !important;        /* Наше аккуратное bento-скругление углов */
    
    color: #212529 !important;             /* Глубокий и жирный цвет шрифта самого текста */
    font-weight: 800 !important;           /* Наш фирменный жирный стиль Brutal Bold */
    font-size: 14px !important;
    letter-spacing: 0.2px !important;
    
    outline: none !important;
    box-shadow: none !important;
    cursor: pointer !important;
    transition: all 0.22s ease-in-out !important;
    
    /* Красивая кастомная хай-тек стрелочка выпадающего списка */
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://w3.org' width='12' height='12' fill='%23212529' viewBox='0 0 16 16'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important; /* Четко позиционируем стрелку справа */
}

/* 2. ЭФФЕКТ НАВЕДЕНИЯ МЫШИ НА СОРТИРОВКУ НА ПК */
@media (min-width: 768px) {
    .woocommerce-ordering select:hover,
    form.woocommerce-ordering select:hover {
        border-color: #e11c23 !important;       /* Рамка вспыхивает фирменным красным */
        background-color: #ffffff !important;   /* Фон становится чистым белым */
        box-shadow: 0 4px 15px rgba(225, 28, 35, 0.04) !important; /* Мягкое брендовое свечение */
        
        /* При наведении стрелочка тоже может подсвечиваться красным */
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://w3.org' width='12' height='12' fill='%23e11c23' viewBox='0 0 16 16'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>") !important;
    }
}

/* Фикс внешних отступов обертки формы, чтобы она стояла ровно по сетке */
.woocommerce-ordering {
    margin: 0 0 25px 0 !important;
    float: right !important; /* Аккуратно прижимаем блок к правой стороне над товарами */
}


/* ==========================================================================
   УЛЬТИМАТИВНЫЙ ТЯЖЕЛЫЙ КАСКАД СЕТКИ МАГАЗИНА (РАЗРЫВ ЛЮБЫХ БЛОКИРОВОК)
   ========================================================================== */
/* Намертво заставляем главный контейнер WooCommerce развернуться в широкую линию */
body.woocommerce-page .poparim-main-shop-layout-container,
html body .poparim-main-shop-layout-container,
div.poparim-main-shop-layout-container {
  display: flex !important;
  flex-direction: row !important; /* Строго горизонтальная линия */
  flex-wrap: nowrap !important;   /* Запрещаем товарам падать под меню */
  width: 100% !important;
  max-width: 1300px !important;  /* Наша премиальная bento-ширина холста */
  margin: 40px auto !important;   /* Автоматическая идеальная центровка по центру экрана */
  padding: 0 20px !important;
  box-sizing: border-box !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  position: relative !important;
}

/* Колонна товаров — силой отбираем 100% ширину и заставляем встать широким блоком */
body.woocommerce-page .poparim-shop-products-column,
html body .poparim-shop-products-column,
div.poparim-shop-products-column {
  width: calc(100% - 340px) !important; 
  max-width: calc(100% - 340px) !important;
  flex-grow: 1 !important;
  display: block !important;
  float: left !important;
  box-sizing: border-box !important;
}

/* Колонна правого сайдбара — фиксируем ширину и левый зазор от товаров */
body.woocommerce-page .poparim-shop-sidebar-column,
html body .poparim-shop-sidebar-column,
aside.poparim-shop-sidebar-column {
  width: 300px !important;
  min-width: 300px !important;
  max-width: 300px !important;
  margin-left: 40px !important; /* Этот зазор красиво оттолкнет меню от карточек */
  float: right !important;
  box-sizing: border-box !important;
}


/* ==========================================================================
   НАТИВНОЕ ЛИПКОЕ СЛЕДОВАНИЕ ШАПКИ ДЛЯ ВСЕГО САЙТА (HELLO CHILD)
   ========================================================================== */
@media (min-width: 768px) {
    /* Намертво приклеиваем верхнюю плашку хедера к стеклу экрана компьютера */
    #site-global-header,
    .site-global-header {
        position: -webkit-sticky !important;
        position: sticky !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 99999 !important; /* Хедер ВСЕГДА будет на самом переднем плане над товарами */
        background-color: #ffffff !important; /* Чистый белый защитный фон, чтобы контент не просвечивал при скролле */
        box-shadow: 0 4px 25px rgba(0, 0, 0, 0.03) !important; /* Элегантная воздушная тень под шапкой в момент движения */
    }

    /* Автоматическая поправка высоты липкого следования под черную админку WordPress (если вы авторизованы) */
    .admin-bar #site-global-header,
    .admin-bar .site-global-header {
        top: 32px !important;
    }
}

/* ==========================================================================
   ФИРМЕННЫЙ ИНТЕРАКТИВ POPARIM: ОТДАЛЕНИЕ ТОВАРА ВНУТРЬ КАРТОЧКИ (STEALTH 3D)
   ========================================================================== */
@media (min-width: 768px) {
    /* 1. БАЗОВОЕ СОСТОЯНИЕ КАРТОЧЕК: Премиальный bento-минимализм */
    .woocommerce ul.products li.product,
    .woocommerce-page ul.products li.product,
    .products .product,
    .product-grid-item,
    .elementor-loop-item,
    li.product.type-product {
        border: 1px solid rgba(0, 0, 0, 0.05) !important; /* Тонкий, едва заметный контур */
        background: #ffffff !important;
        border-radius: 16px !important; /* Наше аккуратное bento-скругление 16px */
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02) !important; /* Легкая воздушная тень */
        transform: scale(1) !important; /* Внешняя рамка стоит стабильно */
        transition: border-color 0.3s ease, transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
        overflow: hidden !important; /* Удерживаем картинку строго внутри, создавая эффект окна-коридора */
    }

    /* 2. ЭФФЕКТ НАВЕДЕНИЯ МЫШИ НА ВСЮ КАРТОЧКУ */
    .woocommerce ul.products li.product:hover,
    .woocommerce-page ul.products li.product:hover,
    .products .product:hover,
    .product-grid-item:hover,
    .elementor-loop-item:hover,
    li.product.type-product:hover {
        border-color: #e11c23 !important; /* Рамка аккуратно подсвечивается красным */
        box-shadow: 0 10px 30px rgba(225, 28, 35, 0.05) !important; /* Мягкое брендовое свечение */
        transform: scale(1.01) !important; /* Внешняя рамка делает микро-шаг вперед для контраста */
    }

    /* 3. КИНЕМАТОГРАФИЧНОЕ ОТДАЛЕНИЕ: Флакон плавно уменьшается и уходит вглубь */
    .woocommerce ul.products li.product:hover img,
    .woocommerce-page ul.products li.product:hover img,
    .products .product:hover img,
    .product-grid-item:hover img,
    .elementor-loop-item:hover img,
    li.product.type-product:hover img {
        transform: scale(0.91) translateY(3px) !important; /* ТОВАР УМЕНЬШАЕТСЯ И ПЛАВНО ОТДАЛЯЕТСЯ ВНУТРЬ Страницы */
        filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.03)) !important; /* Смягчаем тень, так как девайс ушел вглубь */
        transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), filter 0.3s ease !important;
    }

    /* Плавный и мягкий возврат картинки товара в исходный 100% масштаб, когда мышь убрали */
    .woocommerce ul.products li.product img,
    .products .product img,
    li.product.type-product img {
        transform: scale(1) translateY(0) !important;
        transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), filter 0.3s ease !important;
    }
}

/* ==========================================================================
   ЖЕЛЕЗОБЕТОННЫЙ ВИЗУАЛЬНЫЙ ФИКС СТРЕЛОЧКИ «НАВЕРХ» СТОРОГО СНИЗУ СПРАВА
   ========================================================================== */
.poparim-custom-scroll-btn,
#site-global-footer .poparim-custom-scroll-btn,
body .poparim-custom-scroll-btn {
    position: fixed !important;
    bottom: 35px !important;      /* Жёстко фиксируем расстояние от нижнего края экрана */
    right: 35px !important;       /* Жёстко фиксируем расстояние от правого края экрана */
    top: auto !important;          /* Намертво уничтожаем любые попытки темы утянуть стрелочку вверх */
    left: auto !important;
    
    z-index: 99999999 !important; /* Стрелочка ВСЕГДА на самом переднем плане поверх товаров и подвала */
    cursor: pointer !important;
    display: block !important;
    width: 55px !important;       /* Оптимальный плотный размер вашей картинки */
    height: auto !important;
    transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* ЭФФЕКТ НАВЕДЕНИЯ МЫШИ НА ПК (Красивый взлет и микро-зум вашей иконки) */
@media (min-width: 768px) {
    .poparim-custom-scroll-btn:hover,
    body .poparim-custom-scroll-btn:hover {
        transform: translateY(-6px) scale(1.08) !important; /* Стрелочка плавно взлетает вверх */
        filter: drop-shadow(0 10px 15px rgba(225, 28, 35, 0.35)) !important; /* Мягкое брендовое облако-тень */
    }
}

/* ==========================================================================
   ФИРМЕННЫЙ БЕНТО-СТИЛЬ ДЛЯ ОКНА ЖИВЫХ РЕЗУЛЬТАТОВ AJAX-ПОИСКА
   ========================================================================== */
.poparim-ajax-search-results {
    position: absolute !important;
    top: 54px !important;                 /* Всплывает ровно под серым полем ввода */
    left: 0 !important;
    width: 100% !important;
    background: #ffffff !important;
    border: 1px solid #eef0f2 !important;
    border-radius: 14px !important;       /* Наше фирменное Bento-скругление */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06) !important;
    z-index: 999999 !important;
    display: none;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* Стилизация каждой строчки найденного товара */
.poparim-search-item {
    display: flex !important;
    align-items: center !important;
    padding: 12px 16px !important;
    text-decoration: none !important;
    border-bottom: 1px solid #f4f6f8 !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
    width: 100% !important;
}
.poparim-search-item:last-child {
    border-bottom: none !important;
}

/* Маленькая круглая аватарка флакона/девайса в результатах */
.poparim-search-item img {
    width: 40px !important;
    height: 40px !important;
    object-fit: contain !important;
    border-radius: 6px !important;
    background: #f4f5f7 !important;
    margin-right: 12px !important;
    flex-shrink: 0 !important;
}

.poparim-search-info {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

/* Название товара: жирное, сочное, цвета антрацита */
.poparim-search-title {
    color: #0f172a !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
    margin-bottom: 2px !important;
}

/* Цена: аккуратная, серая или красная вордпрессовская */
.poparim-search-price, 
.poparim-search-price amount, 
.poparim-search-price bdi {
    color: #ff4500 !important; /* Горит нашим оранжево-красным ценником */
    font-weight: 800 !important;
    font-size: 12px !important;
}

/* ЭФФЕКТ НАВЕДЕНИЯ НА НАЙДЕННЫЙ ТОВАР: строчка плавно скользит и краснеет */
@media (min-width: 768px) {
    .poparim-search-item:hover {
        background: #fffcfb !important; /* Мягкий кремовый оттенок фона */
        padding-left: 20px !important;  /* Небольшое интерактивное смещение вправо */
    }
    .poparim-search-item:hover .poparim-search-title {
        color: #ff4500 !important;      /* Текст вспыхивает красным */
    }
}

/* Внутренние служебные текстовые заглушки */
.poparim-search-loading, 
.poparim-search-no-results {
    padding: 16px !important;
    text-align: center !important;
    color: #4a4d56 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}

/* ==========================================================================
   ТОТАЛЬНЫЙ СИЛОВОЙ ВОССТАНОВИТЕЛЬ КАРУСЕЛИ АКЦИЙ (АДАПТИРОВАН ПОД POPARIM)
   ========================================================================== */
@media (min-width: 768px) {
    /* Насильно возвращаем карусели акций режим горизонтальной прокрутки, игнорируя любые другие правила! */
    html body .custom-sales-carousel ul.products,
    html body.home .custom-sales-carousel ul.products,
    .custom-sales-carousel ul.products {
        display: flex !important;              /* Только в один горизонтальный ряд! */
        flex-direction: row !important;
        flex-wrap: nowrap !important;          /* Категорически запрещаем карточкам падать вниз! */
        overflow-x: auto !important;           /* Включаем прокрутку мышкой влево-вправо */
        overflow-y: hidden !important;         /* Прячем вертикальный вылет */
        max-height: none !important;
        scroll-snap-type: x mandatory !important;
        padding: 15px 5px 25px 5px !important;
        margin: 0 !important;
        gap: 15px !important;                  /* Красивые зазоры между товарами */
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Насильно зажимаем карточки товаров в идеальный размер по 6 штук в ряд с учетом зазоров */
    html body .custom-sales-carousel ul.products li.product,
    html body.home .custom-sales-carousel ul.products li.product,
    .custom-sales-carousel ul.products li.product {
        flex: 0 0 calc((100% - (15px * 5)) / 6) !important; /* Ровно 6 сочных товаров в один ряд */
        width: calc((100% - (15px * 5)) / 6) !important;
        max-width: calc((100% - (15px * 5)) / 6) !important;
        scroll-snap-align: start !important;
        margin: 0 !important;
        display: flex !important;              /* Переключаем в режим колонки для выравнивания контента */
        flex-direction: column !important;
        float: none !important;
        box-sizing: border-box !important;
        
        /* СБРОС И КОРРЕКЦИЯ ДЛЯ АВТОНОМНОСТИ ОТ КРУГЛЫХ ЛИНЗ КАТАЛОГА */
        border-radius: 14px !important;        /* Наше аккуратное bento-скругление углов */
        aspect-ratio: auto !important;         /* Смываем круглую геометрию 1 к 1, разрешая карточке расти вниз */
        padding: 20px 15px !important;         /* Уменьшаем огромные внутренние отступы, чтобы все влезло */
    }

    /* Мягко глушим горизонтальный системный скроллбар WooCommerce, оставляя только чистое скольжение */
    .custom-sales-carousel ul.products::-webkit-scrollbar {
        height: 4px !important;                /* Делаем полосу прокрутки ультра-тонкой и аккуратной */
    }
    .custom-sales-carousel ul.products::-webkit-scrollbar-thumb {
        background: rgba(225, 28, 35, 0.15) !important; /* Покрасили ползунок в прозрачно-красный цвет */
        border-radius: 10px !important;
    }
}

/* ==========================================================================
   ФИРМЕННЫЙ ИНТЕРАКТИВ ДЛЯ ИНФОРМАЦИОННОГО ТЕЛЕГРАМ-БАННЕРА POPARIM
   ========================================================================== */
.poparim-tg-banner,
.poparim-tg-banner img {
    cursor: pointer !important;
    transform: scale(1) !important; /* Исходный 100% масштаб баннера */
    border-radius: 16px !important; /* Наше фирменное Bento-скругление углов 16px */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02) !important; /* Легкая воздушная тень в покое */
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* ЭФФЕКТ НАВЕДЕНИЯ МЫШИ НА ПК: Баннер красиво и плавно отдаляется вглубь экрана */
@media (min-width: 768px) {
    .poparim-tg-banner:hover,
    .poparim-tg-banner:hover img {
        transform: scale(0.97) !important; /* БАННЕР ИЗЯЩНО СЖИМАЕТСЯ НАЗАД (эффект парения вглубь) */
        box-shadow: 0 12px 30px rgba(0, 136, 204, 0.08) !important; /* Роскошное мягкое телеграм-синее свечение */
    }
}

/* ==========================================================================
   НАТИВНОЕ ПЛАВНОЕ СКОЛЬЖЕНИЕ БОКОВОГО МЕНЮ НА СТРАНИЦЕ АКЦИЙ ДЛЯ ПК
   ========================================================================== */
@media (min-width: 768px) {
    /* Намертво заставляем правую колонку с меню парить при скролле */
    .poparim-sticky-sales-sidebar,
    html body .poparim-sticky-sales-sidebar,
    div.poparim-sticky-sales-sidebar {
        position: -webkit-sticky !important;
        position: sticky !important;
        
        /* Идеальный верхний зазор 80px, чтобы меню не заезжало ПОД нашу липкую шапку */
        top: 80px !important; 
        
        /* Фиксируем высоту, чтобы браузер правильно рассчитывал точку прилипания */
        align-self: flex-start !important;
        height: auto !important;
        
        /* Плавное время отклика физики движения */
        transition: top 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
        z-index: 90 !important;
    }

    /* Коррекция высоты, если вы авторизованы в админке WordPress (черная полоса сверху) */
    .admin-bar .poparim-sticky-sales-sidebar {
        top: 112px !important; /* 80px нашего зазора + 32px высота админки */
    }
}


/* ==========================================================================
   АДАПТАЦИЯ ЖИВОГО БЕНТО-ПОИСКА POPARIM ПОД ЭКРАНЫ СМАРТФОНОВ (ДО 767PX)
   ========================================================================== */
@media (max-width: 767px) {
    /* 1. ПРИЖИМАЕМ ФОРМУ ПОИСКА К ГРАНИЦАМ МОБИЛЬНОГО ЭКРАНА */
    .widget_product_search form, 
    .woocommerce-product-search,
    .poparim-top-search-widget-wrap .widget_product_search form {
        margin: 10px 0 !important;
        width: 100% !important;
    }

    /* 2. КОМПАКТНАЯ ВЫСОТА И ОТСТУПЫ ПОЛЯ ВВОДА ПОД ПАЛЕЦ */
    .widget_product_search input[type="search"], 
    .woocommerce-product-search input[type="search"],
    .woocommerce-product-search .search-field {
        height: 44px !important;               /* Чуть снизили высоту для аккуратности на смартфонах */
        padding: 0 55px 0 15px !important;     /* Сбалансированный зазор справа под мобильную лупу */
        font-size: 13px !important;            /* Оптимальный размер шрифта на мобилках */
        border-radius: 12px !important;        /* Компактное Bento-скругление углов */
    }

    /* 3. МОБИЛЬНАЯ КРАСНАЯ КНОПКА-ЛУПА */
    .widget_product_search button, 
    .widget_product_search input[type="submit"], 
    .woocommerce-product-search button,
    .woocommerce-product-search input[type="submit"] {
        height: 44px !important;               /* Высота строго вровень с полем ввода */
        width: 48px !important;                /* Аккуратный квадрат под тап пальцем */
        border-radius: 0 12px 12px 0 !important; /* Скругление строго по правому краю */
    }

    /* Идеальное центрирование эмодзи-лупы внутри мобильной кнопки */
    .widget_product_search button::before, 
    .woocommerce-product-search button::before {
        font-size: 14px !important;            /* Слегка уменьшили значок под размер кнопки */
    }

    /* 4. МОБИЛЬНАЯ АДАПТАЦИЯ ВЫПАДАЮЩЕГО ОКНА ЖИВЫХ РЕЗУЛЬТАТОВ AJAX */
    .poparim-ajax-search-results {
        top: 48px !important;                  /* Раскрывается впритык под компактной строкой */
        border-radius: 12px !important;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08) !important;
    }

    /* Уплотняем строчки найденных жидкостей и вейпов под экраны телефонов */
    .poparim-search-item {
        padding: 10px 12px !important;
    }

    /* Мобильный размер миниатюры флакона/девайса в результатах */
    .poparim-search-item img {
        width: 34px !important;
        height: 34px !important;
        margin-right: 10px !important;
    }

    .poparim-search-title {
        font-size: 12px !important;            /* Аккуратный плотный текст названия */
    }

    .poparim-search-price, 
    .poparim-search-price amount, 
    .poparim-search-price bdi {
        font-size: 11px !important;            /* Читаемый мобильный ценник */
    }
}

/* ==========================================================================
   ФИРМЕННАЯ ПАРЯЩАЯ НИЖНЯЯ НАВИГАЦИЯ ДЛЯ СМАРТФОНОВ (TAB BAR POPARIM)
   ========================================================================== */
@media (max-width: 767px) {
    /* 1. НАМЕРТВО ПРИКЛЕИВАЕМ КОНТЕЙНЕР К НИЖНЕМУ СТЕКЛУ СМАРТФОНА */
    #poparim-mobile-bottom-nav {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 65px !important;
        background: #ffffff !important;
        border-radius: 20px 20px 0 0 !important;
        border-top: 1px solid rgba(0, 0, 0, 0.04) !important;
        box-shadow: 0 -5px 25px rgba(0, 0, 0, 0.05) !important;
        z-index: 99999999 !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-around !important;
        padding: 0 15px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        gap: 0 !important;
        font-size: 0 !important;
        line-height: 0 !important;
    }

    /* 2. ЖЕСТКИЙ ПЕРЕХВАТ И СЖАТИЕ ВИДЖЕТОВ ИЗОБРАЖЕНИЙ ELEMENTOR ДО 36PX */
    #poparim-mobile-bottom-nav .elementor-widget-image,
    #poparim-mobile-bottom-nav .elementor-widget-image img,
    #poparim-mobile-bottom-nav img,
    html body #poparim-mobile-bottom-nav .elementor-widget-image img {
        width: 36px !important;
        height: 36px !important;
        max-width: 36px !important;
        min-width: 36px !important;
        object-fit: contain !important;
        margin: 0 auto !important;
        display: block !important;
        filter: none !important;
        transition: all 0.18s ease-in-out !important;
    }

    /* 3. ИНТЕРАКТИВНЫЙ ОРАНЖЕВО-КРАСНЫЙ ОТКЛИК ПРИ НАЖАТИИ ПАЛЬЦЕМ */
    #poparim-mobile-bottom-nav .elementor-widget-image:active img,
    #poparim-mobile-bottom-nav img:active,
    #poparim-mobile-bottom-nav a:active img,
    #poparim-mobile-bottom-nav p img:active {
        transform: scale(0.88) !important;
        filter: invert(18%) sepia(87%) saturate(6416%) hue-rotate(352deg) brightness(96%) contrast(96%) !important;
    }

    /* Пустая страховочная подушка под контент и текст оферты в самом низу */
    body.woocommerce-page,
    body.home,
    html body {
        padding-bottom: 5px !important;  /* 85рх было */
    }
    /* ДОБАВЛЯЕМ ПЛАВНОСТЬ ДЛЯ ДИНАМИЧЕСКОГО СДВИГА ПАНЕЛИ */
    #poparim-mobile-bottom-nav {
        transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
    }

    /* КЛАСС СКРЫТИЯ: Сдвигаем панель на 100% ее высоты вниз под экран */
    #poparim-mobile-bottom-nav.nav-hidden {
        transform: translateY(100%) !important;
    }

}

/* ==========================================================================
   ТОТАЛЬНАЯ ЗАЧИСТКА ПК-САЙДБАРА И ФИКС МАСШТАБА ЭКРАНА НА СМАРТФОНАХ (ДО 767PX)
   ========================================================================== */
@media screen and (max-width: 767px) {
    /* 1. НАМЕРТВО УБИРАЕМ ТЯЖЕЛОЕ БОКОВОЕ МЕНЮ КАТЕГОРИЙ НА СМАРТФОНАХ */
    .poparim-shop-sidebar-column,
    .poparim-sticky-sales-sidebar,
    .widget_nav_menu,
    html body .poparim-shop-sidebar-column,
    div.poparim-shop-sidebar-column {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

    /* 2. РАСПРАВЛЯЕМ КОЛОННУ С ТОВАРАМИ НА 100% ШИРИНЫ БЕЗ СДВИГОВ И ПРОКРУТОК */
    .poparim-shop-products-column,
    html body .poparim-shop-products-column,
    body.woocommerce-page .poparim-main-shop-layout-container {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        padding: 0 10px !important; /* Легкие bento-отступы, чтобы карточки не липли к стеклу телефона */
        margin: 0 auto !important;
        box-sizing: border-box !important;
        float: none !important;
    }

    /* 3. НАМЕРТВО БЛОКИРУЕМ ГОРИЗОНТАЛЬНЫЙ СКРОЛЛ (ЗАПРЕЩАЕМ СТРАНИЦЕ ШАТАТЬСЯ ВЛЕВО-ВПРАВО) */
    html, body {
        max-width: 100% !important;
        overflow-x: hidden !important; /* Обрезаем любые вылезающие боковые хвосты */
        width: 100% !important;
    }
}

/* ==========================================================================
   УЛЬТИМАТИВНЫЙ ФИКС РАЗРЫВА НА ПК: ТОТАЛЬНОЕ СХЛОПЫВАНИЕ СКРЫТЫХ БЛОКОВ
   ========================================================================== */
@media screen and (min-width: 768px) {
    /* Силой ловим абсолютно любой скрытый на десктопе контейнер или виджет Elementor */
    [data-element_type="container"].elementor-hidden-desktop,
    [data-element_type="section"].elementor-hidden-desktop,
    .elementor-hidden-desktop,
    .header-id-853,
    .footer-id-856,
    html body .elementor-hidden-desktop {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        
        /* Смываем физические размеры обёртки в абсолютный ноль */
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        line-height: 0 !important;
        font-size: 0 !important;
        overflow: hidden !important;
        border: none !important;
    }
}

/* ==========================================================================
   ГЕРМЕТИЧНАЯ МОБИЛЬНАЯ СЕТКА: 3 ТОВАРА В РЯД ТОЛЬКО В КАТАЛОГАХ (ДО 767PX)
   ========================================================================== */
@media screen and (max-width: 767px) {
    /* Нацеливаем 3 колонки строго на страницы архивов каталога, поиска и таксономий, защищая Главную */
    body.archive ul.products,
    body.search-results ul.products,
    body.tax-product_cat ul.products,
    .poparim-shop-products-column ul.products {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important; /* Жестко 3 товара в ряд на смартфонах */
        grid-template-rows: auto !important;
        gap: 8px !important;                               /* Компактные bento-зазоры */
        padding: 0 !important;
        margin: 15px 0 !important;
        box-sizing: border-box !important;
    }

    /* Адаптируем внутренности карточки товара под узкую сетку каталога */
    body.archive ul.products li.product,
    body.tax-product_cat ul.products li.product,
    .poparim-shop-products-column ul.products li.product {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 10px 6px !important;                     /* Уплотненные bento-отступы */
        box-sizing: border-box !important;
    }

    /* Оптимизируем высоту картинок испарителей и жиж в каталоге 3 в ряд */
    body.archive ul.products li.product img,
    body.tax-product_cat ul.products li.product img,
    .poparim-shop-products-column ul.products li.product img {
        max-height: 85px !important;                      /* Фиксируем высоту флаконов/девайсов */
        object-fit: contain !important;
        margin: 0 auto 6px auto !important;
    }

    /* Компактные e-commerce шрифты для каталога 3 в ряд */
    body.archive ul.products li.product h2,
    body.tax-product_cat ul.products li.product h2 {
        font-size: 11px !important;
        font-weight: 700 !important;
        min-height: 28px !important;
        line-height: 1.2 !important;
    }

    body.archive ul.products li.product .price,
    body.tax-product_cat ul.products li.product .price bdi {
        font-size: 11px !important;
        font-weight: 800 !important;
        margin-top: 4px !important;
    }
}

/* ==========================================================================
   ФИКС ПЕРВОЙ ПУСТОЙ КАРТОЧКИ: СБРОС ЗАВОДСКИХ СДВИГОВ WOOCOMMERCE НА МОБ
   ========================================================================== */
@media screen and (max-width: 767px) {
    /* Намертво сбрасываем боковые очистки потока и отступы у первых/последних товаров */
    .woocommerce ul.products li.product.first,
    .woocommerce-page ul.products li.product.first,
    .woocommerce ul.products li.product.last,
    .woocommerce-page ul.products li.product.last,
    html body ul.products li.product {
        clear: none !important;        /* Стираем заводскую очистку строки, которая ломала Grid */
        margin-right: 0 !important;    /* Обнуляем ПК-зазоры */
        margin-left: 0 !important;
        float: none !important;        /* Убираем старое обтекание */
    }
}
/* ==========================================================================
   УЛЬТИМАТИВНОЕ УНИЧТОЖЕНИЕ ПУСТОЙ КАРТОЧКИ: СБРОС ПСЕВДОБЛОКОВ GRID НА МОБ
   ========================================================================== */
@media screen and (max-width: 767px) {
    /* Намертво сжимаем в 0 пикселей скрытые псевдоэлементы, которые резервировали ячейку */
    .woocommerce ul.products::before,
    .woocommerce-page ul.products::before,
    .woocommerce ul.products::after,
    .woocommerce-page ul.products::after,
    html body ul.products::before {
        content: none !important;
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}


/* ==========================================================================
   ОТКРЫТЫЙ ДВУХРЯДНЫЙ КАРКАС АКЦИЙ С ФИРМЕННЫМ BENTO-КОНТУРОМ (POPARIM)
   ========================================================================== */
@media screen and (max-width: 767px) {
    /* ЗАДАЕМ ТОЛЬКО СЕТКУ: Строим товары в 2 ряда со скроллом вбок */
    .poparim-double-sale-carousel ul.products,
    html body .poparim-double-sale-carousel ul.products {
        display: grid !important;
        grid-template-rows: repeat(2, auto) !important;   /* Высота этажей слушается настроек в Elementor */
        grid-template-columns: none !important;
        grid-auto-flow: column !important;
        grid-auto-columns: calc((100% - 16px) / 3) !important; /* Строго 3 товара в ширину экрана */
        
        overflow-x: auto !important;           /* Включаем скролл вбок */
        overflow-y: hidden !important;         /* Запрещаем вертикальное шатание */
        -webkit-overflow-scrolling: touch !important; /* Плавный свайп на смартфонах */
        gap: 8px !important;                   /* Зазор между карточками */
        padding: 5px 5px 25px 5px !important;  /* Место снизу под красный ползунок */
        margin: 15px 0 !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }

    /* ФИРМЕННЫЙ КОНТУР И СКРУГЛЕНИЕ ДЛЯ КАРТОЧЕК: Свобода настроек текста сохранена */
    .poparim-double-sale-carousel ul.products li.product,
    html body .poparim-double-sale-carousel ul.products li.product {
        border: 1px solid rgba(6, 7, 9, 0.08) !important; /* Наша стильная фирменная обводка */
        background-color: #ffffff !important;              /* Чистый белый фон плитки */
        background: #ffffff !important;
        border-radius: 16px !important;                    /* Наше аккуратное bento-скругление 16px */
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02) !important; /* Легкая воздушная тень под карточкой */
        
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: 100% !important;
        float: none !important;
        clear: none !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        box-sizing: border-box !important;
    }

    /* СТИЛИЗАЦИЯ НАШЕГО КРАСНОГО ПОЛЗУНКА ПРОКРУТКИ СНИЗУ */
    .poparim-double-sale-carousel ul.products::-webkit-scrollbar {
        height: 3px !important;
    }
    .poparim-double-sale-carousel ul.products::-webkit-scrollbar-track {
        background: #f1f3f5 !important;
        border-radius: 10px !important;
    }
    .poparim-double-sale-carousel ul.products::-webkit-scrollbar-thumb {
        background: #e11c23 !important;
        border-radius: 10px !important;
    }
}

/* ==========================================================================
   ТОЧЕЧНЫЙ FLEX-ФИКС ДЛЯ МОБИЛЬНОЙ ШАПКИ В КАТАЛОГАХ (ПО КЛАССУ КОНТЕЙНЕРА)
   ========================================================================== */
@media screen and (max-width: 767px) {
    /* Принудительно заставляем этот контейнер включить горизонтальный ряд в каталогах */
    body.archive .elementor-element-5a38a374,
    body.tax-product_cat .elementor-element-5a38a374,
    html body .elementor-element-5a38a374 {
        display: flex !important;            /* Жестко активируем Flex-физику */
        flex-direction: row !important;       /* Строго горизонтальная линия */
        flex-wrap: nowrap !important;         /* Запрещаем перенос элементов на 2 строку */
        align-items: center !important;        /* Центрируем логотип и телефон по одной высоте */
        justify-content: space-between !important; /* Разносим логотип влево, а контакты вправо */
        width: 100% !important;
        box-sizing: border-box !important;
    }

}

/* ==========================================================================
   ТОЧЕЧНЫЙ FLEX-ФИКС ДЛЯ МОБИЛЬНОГО ПОДВАЛА (ПО КЛАССУ КОНТЕЙНЕРА 4e025119)
   ========================================================================== */
@media screen and (max-width: 767px) {
    /* Намертво выпрямляем 5 ваших авторских иконок в каталогах и на страницах */
    body.archive .elementor-element-4e025119,
    body.tax-product_cat .elementor-element-4e025119,
    html body .elementor-element-4e025119,
    #poparim-mobile-bottom-nav {
        display: flex !important;            /* Жестко активируем Flex-физику */
        flex-direction: row !important;       /* Строго горизонтальная линия */
        flex-wrap: nowrap !important;         /* Запрещаем иконкам падать друг под друга */
        align-items: center !important;        /* Выравниваем все иконки ровно по одной высоте */
        justify-content: space-around !important; /* Равномерно и сочно распределяем элементы по ширине */
        width: 100% !important;
        box-sizing: border-box !important;
    }

}

/* ==========================================================================
   КОМПАКТНЫЕ ШРИФТЫ ДЛЯ КАТЕГОРИЙ И ПОДКАТЕГОРИЙ В КАТАЛОГАХ (ДО 767PX)
   ========================================================================== */
@media screen and (max-width: 767px) {
    /* 1. УМЕНЬШАЕМ ГЛАВНЫЙ ЗАГОЛОВОК КАТЕГОРИИ (H1 / НАЗВАНИЕ РАЗДЕЛА) */
    body.archive .woocommerce-products-header__title,
    body.archive h1.page-title,
    body.tax-product_cat h1,
    .woocommerce-products-header h1 {
        font-size: 18px !important;             /* ИСПРАВЛЕНО: Снизили гигантские буквы до аккуратных 18px */
        font-weight: 850 !important;            /* Плотный, сочный Brutal Bold стиль */
        line-height: 1.3 !important;            /* Компактный межстрочный интервал */
        margin-top: 20px !important;            /* Легкий аккуратный отступ от нашей новой шапки */
        margin-bottom: 12px !important;
        text-align: left !important;            /* Ровное выравнивание по левому краю витрины */
    }

    /* 2. УМЕНЬШАЕМ ЗАГОЛОВКИ ПОДКАТЕГОРИЙ И ТЕКСТОВЫЕ БЛОКИ (H2 / H3) */
    body.archive h2,
    body.archive .woocommerce-loop-category__title,
    body.tax-product_cat h2,
    html body.archive h2 {
        font-size: 15px !important;             /* ИСПРАВЛЕНО: Подкатегории и подзаголовки сжали до 15px */
        font-weight: 750 !important;
        line-height: 1.3 !important;
        margin-top: 15px !important;
        margin-bottom: 8px !important;
    }

    /* 3. ОПТИМИЗИРУЕМ РАЗМЕР ОБЫЧНОГО ОПИСАТЕЛЬНОГО ТЕКСТА КАТЕГОРИИ (P) */
    body.archive .term-description,
    body.archive .term-description p,
    body.tax-product_cat .term-description p {
        font-size: 12px !important;             /* Сделали e-commerce описание карточки мелким и аккуратным */
        line-height: 1.4 !important;
        color: #475569 !important;              /* Приятный мягкий графитовый цвет текста */
        margin-bottom: 15px !important;
    }
}

/* ==========================================================================
   АВТОРСКИЙ ДИЗАЙН МОБИЛЬНОЙ PNG-СТРЕЛOЧКИ «НАВЕРХ» (СТРОГО ДО 767PX)
   ========================================================================== */
@media screen and (max-width: 767px) {
    #poparim-mobile-to-top {
        position: fixed !important;
        bottom: 80px !important;              /* Приподняли на 80px, чтобы она летела НАД плавающим меню */
        right: 16px !important;               /* Аккуратный Bento-отступ от правого стекла смартфона */
        width: 44px !important;               /* Идеальный размер клика под большой палец */
        height: 44px !important;
        background: transparent !important;   /* Прозрачная основа без рамок (под вашу PNG) */
        border: none !important;
        box-shadow: none !important;          /* Никакой грязи и теней на фоне */
        z-index: 9999999 !important;          /* Выше карточек товаров и каталога */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease !important; /* Мягкое проявление */
        transform: scale(1) !important;
        opacity: 1 !important;
    }

    /* Геометрия самой картинки внутри невидимого бокса */
    #poparim-mobile-to-top img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;       /* Защита стрелочки от сплющивания */
        display: block !important;
    }

    /* Эффект упругого тапа (кнопка пружинит при касании как в дорогих приложениях) */
    #poparim-mobile-to-top:active {
        transform: scale(0.85) !important;    /* Сжимаем стрелочку на 15% в момент клика */
    }

    /* Скрытие кнопки: когда пользователь наверху, стрелочка изящно схлопывается в точку */
    #poparim-mobile-to-top.poparim-to-top-hidden {
        transform: scale(0) !important;
        opacity: 0 !important;
        pointer-events: none !important;     /* Выключаем фантомные клики по скрытому блоку */
    }
}

/* ==========================================================================
   ГЛОБАЛЬНЫЙ ПЛАВАЮЩИЙ ЗНАЧОК ДИАЛОГА СЛЕВА И ПОП-АП ФОРМА POPARIM (ПК И МОБ)
   ========================================================================== */

/* 1. СТИЛИЗАЦИЯ ПЛАВАЮЩЕГО КРАСНОГО ЗНАЧКА СЛЕВА */
#poparim-global-chat-badge {
    position: fixed !important;
    bottom: 30px !important;               /* Идеальная высота парения на компьютерах */
    left: 24px !important;                 /* НАМЕРТВО ЗАПЕЧАТАЛИ У ЛЕВОГО КРАЯ НА ВСЕХ СТРАНИЦАХ */
    width: 54px !important;                /* Комфортный e-commerce размер кнопки */
    height: 54px !important;
    background-color: #e11c23 !important;  /* Фирменный сочный красный цвет Poparim */
    color: #ffffff !important;
    border-radius: 50% !important;         /* Идеальный ровный круг */
    box-shadow: 0 8px 25px rgba(225, 28, 35, 0.4) !important; /* Красивое неоновое свечение */
    z-index: 99999998 !important;          /* Выше карточек товаров и каталогов */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

#poparim-global-chat-badge:hover {
    transform: scale(1.08) !important;     /* Аккуратное увеличение при наведении мышки на ПК */
}
#poparim-global-chat-badge:active {
    transform: scale(0.95) !important;     /* Сочно пружинит при нажатии и тапе */
}
#poparim-global-chat-badge svg {
    width: 24px !important;
    height: 24px !important;
}

/* КОРРЕКЦИЯ ДЛЯ СМАРТФОНОВ: приподнимаем значок слева строго НАД нижним меню */
@media screen and (max-width: 767px) {
    #poparim-global-chat-badge {
        bottom: 80px !important;           /* Защита от наложения: парит ровно над нижним таб-баром */
        left: 16px !important;             /* Чуть плотнее к краю мобильного стекла */
        width: 48px !important;
        height: 48px !important;
    }
    #poparim-global-chat-badge svg {
        width: 20px !important;
        height: 20px !important;
    }
}

/* 2. СТИЛИЗАЦИЯ СКРЫТОГО ВСЛЫВАЮЩЕГО BENTO-ОКНА ФОРМЫ */
#poparim-global-chat-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 99999999 !important;          /* Абсолютный приоритет видимости */
    display: none !important;              /* По умолчанию скрыто от глаз */
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}
#poparim-global-chat-modal.poparim-modal-open {
    display: flex !important;              /* Показываем по клику на значок диалога */
}
.poparim-modal-overlay {
    position: absolute !important;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(6, 7, 9, 0.4) !important; /* Мягкое размытие заднего фона сайта */
    backdrop-filter: blur(4px) !important;
}

/* КАРКАС САМОЙ ФОРМЫ ВНУТРИ ОКНА */
.poparim-bento-form-wrapper.global-modal-form {
    position: relative !important;
    width: 90% !important;
    max-width: 440px !important;
    background: #ffffff !important;
    border: 1px solid rgba(6, 7, 9, 0.08) !important;
    border-radius: 24px !important;        /* Премиальные Bento-углы */
    padding: 30px 25px 25px 25px !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15) !important;
    animation: poparimFormSlide 0.3s cubic-bezier(0.25, 1, 0.5, 1) forwards !important; /* Красивый вылет из центра */
}
@keyframes poparimFormSlide {
    from { transform: scale(0.9) translateY(20px); opacity: 0; }
    to { transform: scale(1) translateY(0); opacity: 1; }
}

/* КРЕСТИК ЗАКРЫТИЯ МОДАЛКИ */
.poparim-modal-close {
    position: absolute !important;
    top: 14px !important;
    right: 18px !important;
    font-size: 26px !important;
    font-weight: 400 !important;
    color: #94a3b8 !important;
    cursor: pointer !important;
    transition: color 0.2s ease !important;
}
.poparim-modal-close:hover { color: #e11c23 !important; }
.poparim-modal-title {
    font-size: 18px !important;
    font-weight: 900 !important;
    margin: 0 0 20px 0 !important;
    color: #060709 !important;
}

/* ПОВТОРЯЕМ НАШИ БАЗОВЫЕ BENTO-СТИЛИ ДЛЯ ПОЛЕЙ */
.poparim-bento-form { display: flex !important; flex-direction: column !important; gap: 14px !important; }
.poparim-form-field { display: flex !important; flex-direction: column !important; gap: 5px !important; }
.poparim-form-field label { font-size: 13px !important; font-weight: 800 !important; color: #060709 !important; }
.poparim-form-field input, .poparim-form-field textarea {
    width: 100% !important; padding: 12px 14px !important;
    border: 1px solid rgba(6, 7, 9, 0.12) !important; border-radius: 12px !important;
    background: #f8fafc !important; font-size: 14px !important; color: #060709 !important;
    box-sizing: border-box !important;
}
.poparim-form-field input:focus, .poparim-form-field textarea:focus {
    border-color: #e11c23 !important; outline: none !important; background: #ffffff !important;
}
.poparim-form-btn {
    width: 100% !important; padding: 14px !important; background: #e11c23 !important; color: #ffffff !important;
    border: none !important; border-radius: 12px !important; font-size: 15px !important; font-weight: 850 !important;
    cursor: pointer !important; box-shadow: 0 4px 15px rgba(225, 28, 35, 0.2) !important;
}
.poparim-form-success { background: #ecfdf5 !important; border: 1px solid #10b981 !important; color: #065f46 !important; padding: 15px !important; border-radius: 12px !important; font-size: 14px !important; font-weight: 700 !important; text-align: center !important; }
.poparim-form-error { background: #fef2f2 !important; border: 1px solid #ef4444 !important; color: #991b1b !important; padding: 12px !important; border-radius: 12px !important; }


/* ==========================================================================
   УЛЬТИМАТИВНЫЙ БЕНТО-ФИКС ЦВЕТОВ КАТАЛОГА POPARIM (ПК + МОБИЛКА)
   ========================================================================== */

/* 1. Намертво перекрашиваем заголовки (названия) товаров в WooCommerce */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-loop-product__title,
.product-title a,
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product h3 {
    color: #333 !important;
    font-weight: 800 !important; /* Делаем шрифт плотным и брутальным */
    transition: color 0.2s ease-in-out;
}

/* Эффект при наведении мышки на название (мягкое потемнение/акцент) */
.woocommerce ul.products li.product a:hover .woocommerce-loop-product__title {
    color: #fd3d60 !important; /* При наведении название слегка подсветится нашим фирменным малиновым */
}

/* 2. Перекрашиваем ОБЫЧНУЮ цену товара (когда нет скидки) в строгий черный */
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .price span.amount,
.price,
.amount {
    color: #000000 !important;
}

/* 3. ФИКС ДЛЯ АКЦИОННЫХ ТОВАРОВ (Перечеркнутая старая цена) */
/* Старую базовую цену делаем блекло-черной/серой и зачеркнутой, чтобы она не сливалась с новой */
.woocommerce ul.products li.product .price del,
.woocommerce ul.products li.product .price del span.amount,
.price del,
.price del .amount {
    color: #777777 !important; /* Приглушенный серый для старой цены */
    font-size: 0.85em !important; /* Чуть уменьшаем размер старой цены */
    font-weight: 400 !important;
}

/* Новую сочную акционную цену оставляем горящей малиново-красной */
.woocommerce ul.products li.product .price ins,
.woocommerce ul.products li.product .price ins span.amount,
.price ins,
.price ins .amount {
    color: #fd3d60 !important; /* Наш броский e-commerce акцент для скидки */
    font-weight: 900 !important;
    text-decoration: none !important; /* Убираем подчеркивание, если хостинг его добавляет */
}