/* ==========================================================================
   Базовые стили сброса (Reset) и Сетка сайта
   ========================================================================== */

/* Без этого padding у .container и других элементов добавлялся бы СВЕРХ
   width:100%, делая их шире экрана — отсюда горизонтальный скролл и обрезанные
   по краям заголовки на мобильных. */
*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    overflow-x: hidden;
}

/* Базовый контейнер для ограничения ширины контента */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
    width: 100%;
}
body {
    margin: 0;
    padding: 0;
    font-family: "Inter", Arial, sans-serif;
    background-color: #ffffff;
    color: #333333;
    -webkit-font-smoothing: antialiased;
}

.site-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.site-main {
    flex: 1 0 auto;
}

/* ==========================================================================
   Стили Шапки (Header) в стиле оригинала Heatmann
   ========================================================================== */
.site-header {
    width: 100%;
    background-color: transparent; /* Перекрытие как на оригинале */
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
    padding: 20px 0;
    border-bottom: none !important;
}

/* Временный фон для тестирования видимости шапки на белом экране */
.home .site-header {
    background-color: #ffffff; 
    position: relative;
    border-bottom: 1px solid #e1dddd;
}

.header-container {
    max-width: 1222px;
    margin: 0 auto;
    padding: 0 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-col {
    display: flex;
    align-items: center;
}

.header-left {
    flex: 1;
    justify-content: flex-start;
}

.header-center {
    flex: 0 0 auto;
    justify-content: center;
}

.header-right {
    flex: 1;
    justify-content: flex-end;
    gap: 20px;
}

/* Стили элементов меню */
.nav-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 25px;
}

.nav-menu a {
    color: #242424;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-decoration: none;
    transition: color 0.3s ease;
}

.nav-menu a:hover {
    color: rgb(243, 115, 36); /* Фирменный оранжевый цвет Heatmann */
}

.main-logo {
    display: block;
    height: auto;
    max-width: 220px;
}

.search-btn {
    background: none;
    border: none;
    font-size: 16px;
    cursor: pointer;
    padding: 5px;
}
/* ==========================================================================
   Базовый сброс и структура макета
   ========================================================================== */
body {
    margin: 0;
    padding: 0;
    font-family: "Inter", Arial, sans-serif;
    background-color: #ffffff;
    color: #333333;
}

.site-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.site-main {
    flex: 1 0 auto;
}

/* ==========================================================================
   Компоненты Шапки (Header)
   ========================================================================== */
.site-header {
    width: 100%;
    background-color: #ffffff; /* Белый фон, чтобы элементы были четко видны */
    position: relative;
    z-index: 1000;
    padding: 20px 0;
    border-bottom: 1px solid #e1dddd; /* Тонкая серая линия снизу */
}

.header-container {
    max-width: 1222px;
    margin: 0 auto;
    padding: 0 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-col {
    display: flex;
    align-items: center;
}

.header-left {
    flex: 1;
    justify-content: flex-start;
}

.header-center {
    flex: 0 0 auto;
    justify-content: center;
}

.header-right {
    flex: 1;
    justify-content: flex-end;
    gap: 20px;
}

/* Навигационные списки */
.nav-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 25px;
}

.nav-menu a {
    color: #242424;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-decoration: none;
    transition: color 0.3s ease;
}

.nav-menu a:hover {
    color: rgb(243, 115, 36); /* Фирменный оранжевый цвет Heatmann */
}

/* Выпадающий список категорий (например "Продукція" → 3 категории товаров) */
.nav-menu li.menu-item-has-children {
    position: relative;
}

/* Маленькая стрелка-индикатор у пунктов с подменю, как у оригинала */
.nav-menu li.menu-item-has-children > a::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: 6px;
    margin-bottom: 2px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: rotate(45deg);
    vertical-align: middle;
}

.nav-menu .sub-menu {
    list-style: none;
    margin: 0;
    padding: 10px 0;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 260px;
    background-color: #212121;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    z-index: 1001;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}

.nav-menu li.menu-item-has-children:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-menu .sub-menu li a {
    display: block;
    padding: 10px 22px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.nav-menu .sub-menu li a:hover {
    background-color: rgba(255, 255, 255, 0.06);
    color: #f37324;
}

.main-logo {
    display: block;
    height: auto;
    max-width: 220px;
}

.search-btn {
    background: none;
    border: none;
    font-size: 16px;
    cursor: pointer;
    padding: 5px;
}

/* ==========================================================================
   Полноэкранный поиск товаров (оверлей)
   ========================================================================== */
body.hm-search-open {
    overflow: hidden; /* Запрещаем скролл страницы под оверлеем */
}

.hm-search-overlay {
    position: fixed;
    top: 0; /* Подменяется в JS высотой шапки, чтобы шапка оставалась видна сверху */
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ffffff;
    z-index: 999; /* Ниже шапки (у неё z-index 1000+), но выше остального контента */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-20px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
    overflow-y: auto;
}

.hm-search-overlay.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.hm-search-close {
    position: absolute;
    top: 30px;
    right: 40px;
    background: none;
    border: none;
    font-size: 36px;
    line-height: 1;
    color: #242424;
    cursor: pointer;
    transition: color 0.3s ease;
    z-index: 1;
}

.hm-search-close:hover {
    color: #f37324;
}

.hm-search-overlay-inner {
    max-width: 900px;
    margin: 0 auto;
    padding: 110px 20px 80px;
}

.hm-search-form {
    border-bottom: 1px solid #e1dddd;
    padding-bottom: 20px;
}

.hm-search-input {
    width: 100%;
    border: none;
    outline: none;
    font-size: 48px;
    font-weight: 600;
    color: #242424;
}

.hm-search-input::placeholder {
    color: #c5c5c5;
}

.hm-search-hint {
    color: #767676;
    font-size: 14px;
    margin-top: 20px;
}

.hm-search-results-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin-top: 30px;
}

.hm-search-result-item {
    display: flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
    color: #242424;
    transition: color 0.3s ease;
}

.hm-search-result-item:hover {
    color: #f37324;
}

.hm-search-result-thumb {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.hm-search-result-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hm-search-result-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}

.hm-search-view-all {
    display: inline-block;
    margin-top: 30px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #242424;
    text-decoration: none;
    border-bottom: 2px solid #f37324;
    padding-bottom: 4px;
    transition: color 0.3s ease;
}

.hm-search-view-all:hover {
    color: #f37324;
}

.hm-search-empty {
    margin-top: 30px;
    color: #767676;
}

@media (max-width: 768px) {
    .hm-search-input {
        font-size: 28px;
    }
    .hm-search-results-grid {
        grid-template-columns: 1fr;
    }
    .hm-search-overlay-inner {
        padding: 90px 20px 60px;
    }
}

/* ==========================================================================
   Стили переключателя языков (UA / RU)
   ========================================================================== */
.theme-language-switcher {
    display: flex;
    align-items: center;
    margin-left: 15px;
    padding-left: 15px;
    border-left: 1px solid #e1dddd; /* Красивая вертикальная черта-разделитель */
}

.lang-switcher-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 10px;
    text-transform: uppercase;
}

.lang-switcher-list li a {
    font-size: 13px;
    font-weight: 700;
    color: #767676; /* Серый цвет для неактивного языка */
    text-decoration: none;
    transition: color 0.3s ease;
}

/* Стили для активного или наведенного языка */
.lang-switcher-list li.current-lang a,
.lang-switcher-list li a:hover {
    color: rgb(243, 115, 36); /* Наш фирменный оранжевый Heatmann */
}
/* ==========================================================================
   Стили Подвала (Footer)
   ========================================================================== */
.site-footer {
    background-color: #1a1a1a;
    color: #e1dddd;
    padding-top: 60px;
    font-size: 14px;
    margin-top: auto; /* Прижимаем футер к низу экрана */
}

.footer-container {
    max-width: 1222px;
    margin: 0 auto;
    padding: 0 15px;
}

.footer-widgets-area {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    margin-bottom: 50px;
}

.footer-col {
    flex: 1;
    min-width: 250px;
}

.footer-logo img {
    max-width: 220px;
    margin-bottom: 10px;
}

.footer-company-desc p {
    font-size: 12px;
    letter-spacing: 1px;
    color: #767676;
    margin-bottom: 25px;
}

.footer-contact-list {
    list-style: none;
    padding: 0;
    margin: 0;
    line-height: 2;
}

.footer-contact-list li {
    margin-bottom: 10px;
}

.footer-contact-list strong {
    color: #ffffff;
    font-weight: 600;
}

.footer-contact-list a {
    color: #a5a5a5;
    text-decoration: none;
    transition: color 0.3s;
}

.footer-contact-list a:hover {
    color: #f37324;
}

.footer-widget-title {
    color: #ffffff;
    font-size: 16px;
    text-transform: uppercase;
    margin-bottom: 25px;
    letter-spacing: 0.5px;
    margin-top: 0;
}

/* Аккордеон для колонок футера на мобильном (Новости / Полезные ссылки) */
@media (max-width: 768px) {
    .footer-col-collapsible .footer-widget-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        margin-bottom: 0;
        padding: 18px 0;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .footer-col-collapsible .footer-widget-title::after {
        content: '';
        width: 8px;
        height: 8px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(45deg);
        transition: transform 0.3s ease;
        flex-shrink: 0;
    }

    .footer-col-collapsible.footer-col-open .footer-widget-title::after {
        transform: rotate(225deg);
    }

    /* Высоту в пикселях для плавной анимации выставляет JS (по scrollHeight) —
       фиксированный max-height давал рывки и задержку при закрытии. */
    .footer-collapsible-content {
        max-height: 0;
        padding-top: 0;
        overflow: hidden;
        transition: max-height 0.35s ease, padding-top 0.35s ease;
    }
}

.footer-menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-menu-list li {
    margin-bottom: 15px;
}

.footer-menu-list a {
    color: #e1dddd;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-menu-list a:hover {
    color: rgb(243, 115, 36); /* Оранжевый цвет при наведении */
}

.footer-copyrights {
    background-color: #0a0a0a;
    padding: 20px 0;
    text-align: left;
    font-size: 13px;
    color: #767676;
}
/* ==========================================================================
   Каталог товаров (WooCommerce Shop)
   ========================================================================== */
.shop-layout-wrapper {
    padding: 60px 0;
    background-color: #fcfcfc; /* Очень легкий серый фон для контраста */
}

.shop-container {
    max-width: 1222px;
    margin: 0 auto;
    padding: 0 15px;
    display: flex;
    align-items: flex-start;
    gap: 40px;
}

/* Сайдбар (Левая колонка) */
.shop-sidebar {
    flex: 0 0 250px; /* Фиксированная ширина сайдбара */
}

.widget-title {
    font-size: 16px;
    text-transform: uppercase;
    margin-bottom: 20px;
    border-bottom: 2px solid #e1dddd;
    padding-bottom: 10px;
    color: #242424;
}

.temporary-filters {
    list-style: none;
    padding: 0;
    margin: 0;
}

.temporary-filters li {
    margin-bottom: 10px;
}

.temporary-filters a {
    color: #767676;
    text-decoration: none;
    transition: color 0.3s ease;
}

.temporary-filters a:hover {
    color: rgb(243, 115, 36);
}

/* Контент каталога (Правая колонка) */
.shop-content-area {
    flex: 1; /* Занимает всё оставшееся пространство */
}

/* Верхняя панель (Хлебные крошки и сортировка) */
.shop-loop-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    background: #ffffff;
    padding: 15px 20px;
    border-radius: 5px;
    border: 1px solid #e1dddd;
}

.shop-breadcrumbs nav {
    font-size: 13px;
    color: #767676;
}

.shop-breadcrumbs a {
    color: #333;
    text-decoration: none;
}

.shop-sorting select {
    padding: 8px 15px;
    border: 1px solid #e1dddd;
    border-radius: 4px;
    outline: none;
    background: #fff;
}

/* Сетка карточек товаров WooCommerce */
.products-grid ul.products {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Ровно 3 товара в один ряд */
    gap: 30px;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* WooCommerce по умолчанию добавляет ul.products::before/::after как clearfix
   для старой float-вёрстки (content: " "; display: table;). В CSS Grid эти
   псевдоэлементы становятся настоящими ячейками сетки и сдвигают все карточки
   на одну позицию (именно это вызывало "съехавшую" сетку товаров). Отключаем. */
.products-grid ul.products::before,
.products-grid ul.products::after {
    content: none !important;
    display: none !important;
}

.products-grid ul.products li.product {
    margin: 0 !important; /* Сбрасываем стандартные отступы WooCommerce */
    width: 100% !important;
    min-width: 0; /* Иначе длинный заголовок товара растягивает колонку грида шире экрана */
}

.shop-sidebar-toggle {
    display: none;
    align-items: center;
    gap: 8px;
    background: none;
    border: 1px solid #e1dddd;
    border-radius: 4px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    color: #242424;
    cursor: pointer;
}

/* Каталог на планшете/мобильном: сайдбар уходит из потока и скрывается,
   открывается кнопкой "Показати фільтри"; сетка товаров — 2 колонки */
@media (max-width: 900px) {
    .shop-container {
        flex-direction: column;
        gap: 20px;
    }

    .shop-sidebar {
        flex: auto;
        width: 100%;
        display: none;
        order: 2;
    }

    .shop-sidebar.shop-sidebar-open {
        display: block;
    }

    .shop-content-area {
        order: 1;
        width: 100%;
    }

    /* Тулбар без рамки-коробки на мобильном — как у донора (десктоп остаётся в рамке) */
    .shop-loop-head {
        flex-wrap: wrap;
        gap: 12px;
        background: none;
        border: none;
        border-radius: 0;
        padding: 0;
    }

    .shop-sidebar-toggle {
        display: flex;
    }

    .products-grid ul.products {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    /* Карточка товара на мобильном — компактнее и без "застревающего"
       hover-эффекта (на тач-экранах :hover может не сниматься после тапа,
       из-за чего соседние карточки получались разной высоты) */
    .custom-product-card .product-wrapper {
        padding: 12px;
    }

    .custom-product-card .product-wrapper:hover {
        transform: none;
        box-shadow: none;
    }

    .custom-product-card .product-wrapper:hover .product-element-top img {
        transform: none;
    }

    .custom-product-card .product-element-top img {
        margin-bottom: 12px;
    }

    .custom-product-card .wd-entities-title {
        font-size: 12px;
        margin-bottom: 6px;
    }

    .custom-product-card .wd-product-cats a {
        font-size: 8px;
    }

    .custom-product-card .hover-content,
    .custom-product-card .product-wrapper:hover .hover-content {
        display: none;
    }
}

/* ==========================================================================
   Дизайн карточки товара (Product Card)
   ========================================================================== */
.custom-product-card .product-wrapper {
    background: #ffffff;
    border: 1px solid #e1dddd;
    border-radius: 5px;
    padding: 20px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Эффект "приподнятой" карточки при наведении — как в оригинале:
   карточка слегка всплывает и получает более выраженную тень */
.custom-product-card .product-wrapper:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.12);
    border-color: transparent;
    z-index: 2;
}

.custom-product-card .product-element-top img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 20px;
    transition: transform 0.5s ease;
}

/* Легкое увеличение картинки при наведении */
.custom-product-card .product-wrapper:hover .product-element-top img {
    transform: scale(1.05);
}

.custom-product-card .product-information {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    text-align: center;
}

.custom-product-card .wd-entities-title {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    margin: 0 0 10px;
    overflow-wrap: break-word; /* ломает слово ТОЛЬКО если оно само не влезает в строку */
}

.custom-product-card .wd-entities-title a {
    color: #333333;
    text-decoration: none;
    transition: color 0.3s ease;
}

/* Оранжевый заголовок при наведении */
.custom-product-card .wd-entities-title a:hover {
    color: rgb(243, 115, 36);
}

.custom-product-card .wd-product-cats a {
    font-size: 9px;
    color: #767676;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 0.2px;
    display: block;
    overflow-wrap: break-word; /* ломает слово ТОЛЬКО если оно само не влезает в строку */
}

/* Описание товара (изначально скрыто, появляется при наведении) */
.custom-product-card .hover-content {
    font-size: 13px;
    color: #767676;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #eee;
    opacity: 0;
    max-height: 0;
    transition: all 0.4s ease;
}

.custom-product-card .product-wrapper:hover .hover-content {
    opacity: 1;
    max-height: 200px;
}

/* Карточки каталога на мобильном — без рамки-коробки, единообразно с похожими
   и популярными товарами (как у донора). Блок идёт ПОСЛЕ базовых стилей карточки
   выше, иначе десктопная рамка перебивала бы его при равной специфичности.
   Десктоп (>900px) остаётся с рамкой — он одобрен. */
@media (max-width: 900px) {
    .products-grid .custom-product-card .product-wrapper {
        border: none;
        border-radius: 0;
        padding: 0;
        background: none;
    }

    .products-grid .custom-product-card .product-element-top img {
        margin-bottom: 10px;
        border-radius: 8px;
    }

    .products-grid .custom-product-card .wd-entities-title {
        font-size: 13px;
        margin-bottom: 5px;
    }

    .products-grid .custom-product-card .wd-product-cats a {
        font-size: 9px;
    }
}

/* ==========================================================================
   Стили динамических виджетов WooCommerce (Сайдбар)
   ========================================================================== */

/* Отступы между разными виджетами */
.shop-sidebar .sidebar-widget {
    margin-bottom: 40px;
}

/* Очистка стандартных списков WordPress */
.shop-sidebar .sidebar-widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.shop-sidebar .sidebar-widget ul li {
    margin-bottom: 12px;
    position: relative;
    padding-left: 0;
}

/* Стили самих ссылок (категорий, атрибутов) */
.shop-sidebar .sidebar-widget ul li a {
    color: #767676; /* Фирменный серый цвет */
    text-decoration: none;
    font-size: 15px;
    transition: color 0.3s ease;
    display: inline-block;
}

/* Эффект при наведении (Оранжевый цвет Heatmann) */
.shop-sidebar .sidebar-widget ul li a:hover {
    color: rgb(243, 115, 36); 
}

/* Выделение активной (текущей) категории жирным шрифтом */
.shop-sidebar .sidebar-widget ul li.current-cat > a {
    color: #242424;
    font-weight: 600;
}

/* Стили для счетчика количества товаров (если включен в админке) */
.shop-sidebar .sidebar-widget ul li .count {
    color: #999999;
    font-size: 13px;
    margin-left: 5px;
}
/* Эффект наведения для активной (текущей) категории */
.shop-sidebar .sidebar-widget ul li.current-cat > a:hover {
    color: rgb(243, 115, 36);
}
/* ==========================================================================
   Страница отдельного товара (Single Product)
   ========================================================================== */
.heatmann-single-product {
    margin-top: 40px;
    margin-bottom: 60px;
}

/* Хлебные крошки WooCommerce выводятся вне .container, поэтому у них нет
   общих с остальным контентом отступов слева/справа — задаём те же вручную.
   Селектор #primary нужен, чтобы перебить специфичность встроенного правила
   WooCommerce ".woocommerce .woocommerce-breadcrumb" (margin:0 0 1em;padding:0). */
#primary .woocommerce-breadcrumb {
    max-width: 1200px;
    margin: 20px auto 1em;
    padding: 0 15px;
    box-sizing: border-box;
}

/* Разделяем верхнюю часть на 2 равные колонки.
   minmax(0, 1fr) вместо просто 1fr — иначе при первой отрисовке колонка
   подстраивается под "естественную" ширину галереи (flexslider), и фото
   остаётся маленьким, пока не случится настоящий resize окна. */
.heatmann-single-product .product-image-summary-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 50px;
    margin-bottom: 60px;
}

/* На мобильных устройствах колонки встают друг под друга */
@media (max-width: 768px) {
    .heatmann-single-product .product-image-summary-inner {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    /* Крошки переехали (через JS) в строку навигации между товарами */
    .single-product-nav {
        justify-content: space-between;
    }

    .single-product-nav .mobile-inline-breadcrumb {
        order: -1;
        flex: 1 1 auto;
        min-width: 0;
        margin: 0;
        font-size: 13px;
        color: #767676;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .single-product-nav .mobile-inline-breadcrumb a {
        color: #767676;
    }

    /* Миниатюры в строку со свайпом, без переноса — на десктопе уже flex-wrap по умолчанию */
    .heatmann-single-product .flex-control-thumbs {
        flex-wrap: nowrap;
    }
}

/* Скругленные углы на галерее товара — как у донора (десктоп и мобильный) */
.heatmann-single-product .woocommerce-product-gallery__image img {
    border-radius: 8px;
}

/* Миниатюры строит JS-библиотека flexslider (ol.flex-control-thumbs) —
   это отдельная от .woocommerce-product-gallery__image структура */
.heatmann-single-product .flex-control-thumbs {
    display: flex !important;
    gap: 10px;
    margin-top: 14px !important;
}

.heatmann-single-product .flex-control-thumbs li {
    flex: 1;
    list-style: none;
}

.heatmann-single-product .flex-control-thumbs li img {
    width: 100%;
    height: auto;
    border-radius: 6px;
    margin: 0 !important;
}

/* Очистка стандартных стилей галереи WooCommerce.
   !important нужен, т.к. у элемента галереи одновременно есть классы
   "woocommerce-product-gallery" И "images" — из-за этого его подхватывает
   старое правило ядра ".woocommerce div.product div.images{width:48%}"
   (для лэйаута с боковой галереей), которое по специфичности (2 доп. тега
   div.product div.images) побеждает обычное правило с тем же числом классов. */
.heatmann-single-product .product-images .woocommerce-product-gallery {
    float: none !important;
    width: 100% !important;
}


.heatmann-single-product .product-summary {
    padding-top: 15px;
}

/* Навигация между товарами (prev / к каталогу / next) — как на оригинале */
.single-product-nav {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.single-product-nav-arrow,
.single-product-nav-grid {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #767676;
    text-decoration: none;
    font-size: 18px;
    transition: color 0.3s ease;
}

.single-product-nav-grid {
    font-size: 13px;
}

.single-product-nav-arrow:hover,
.single-product-nav-grid:hover {
    color: #f37324;
}

.single-product-nav-arrow.disabled {
    color: #d5d5d5;
    pointer-events: none;
}

/* Блок "Поделиться" с иконками соцсетей */
.single-product-share {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
    font-size: 14px;
    color: #767676;
}

.single-product-share a {
    color: #767676;
    transition: color 0.3s ease;
}

.single-product-share a:hover {
    color: #f37324;
}

.single-product-share .dashicons {
    width: 18px;
    height: 18px;
    font-size: 18px;
}

/* Иконки "Поделиться" на мобильном крупнее — как у донора. Блок идёт ПОСЛЕ
   десктопных правил выше, чтобы перекрывать их при равной специфичности. */
@media (max-width: 768px) {
    .single-product-share {
        gap: 16px;
        font-size: 15px;
    }

    .single-product-share strong {
        margin-right: 4px;
    }

    .single-product-share a {
        text-decoration: none;
    }

    .single-product-share .dashicons {
        width: 22px;
        height: 22px;
        font-size: 22px;
    }
}

/* Фирменный шрифт для заголовка товара */
.heatmann-single-product .product-summary .product_title {
    font-size: 32px;
    font-weight: 600;
    color: #242424;
    margin-bottom: 25px;
    line-height: 1.3;
}

/* Заголовок товара уменьшается ступенчато, как у донора. Эти медиа-запросы
   обязаны идти ПОСЛЕ десктопного правила выше — при равной специфичности
   побеждает то, что ниже в файле. Десктоп (>1024px) остаётся 32px. */
@media (max-width: 1024px) {
    .heatmann-single-product .product-summary .product_title {
        font-size: 24px;
        margin-bottom: 18px;
    }
}

@media (max-width: 768px) {
    .heatmann-single-product .product-summary .product_title {
        font-size: 20px;
        margin-bottom: 15px;
    }
}

/* Цвет и размер для краткого описания */
.heatmann-single-product .product-summary .woocommerce-product-details__short-description {
    font-size: 15px;
    color: #767676;
    line-height: 1.6;
    margin-bottom: 30px;
}

/* Прячем кнопку "Добавить в корзину" и блок цены (Режим каталога) */
.heatmann-single-product .cart,
.heatmann-single-product .price {
    display: none !important;
}
/* ==========================================================================
   Стилизация категории товара (Meta)
   ========================================================================== */
.heatmann-single-product .product_meta {
    font-size: 14px;
    color: #767676;
    margin-bottom: 30px;
    display: block;
    border-top: 1px solid #e1dddd;
    padding-top: 15px;
}

.heatmann-single-product .product_meta a {
    color: #333333;
    font-weight: 500;
    text-decoration: underline;
    transition: color 0.3s ease;
}

.heatmann-single-product .product_meta a:hover {
    color: #f37324; /* Фирменный оранжевый Heatmann */
}

/* ==========================================================================
   Стилизация нижних вкладок (Tabs - Описание и Характеристики)
   ========================================================================== */
.heatmann-single-product .woocommerce-tabs {
    margin-top: 60px;
    padding-top: 40px;
}

/* Убираем стандартные стили списка */
.heatmann-single-product .woocommerce-tabs ul.tabs {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
    display: flex;
    gap: 40px;
    border-bottom: 1px solid #e1dddd;
}

.heatmann-single-product .woocommerce-tabs ul.tabs li {
    margin: 0;
}

/* Дизайн самих кнопок-вкладок */
.heatmann-single-product .woocommerce-tabs ul.tabs li a {
    font-size: 16px;
    font-weight: 600;
    color: #767676;
    text-transform: uppercase;
    text-decoration: none;
    padding-bottom: 15px;
    display: block;
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease;
    margin-bottom: -1px; /* Наложение на нижнюю границу */
}

/* Активная вкладка и эффект при наведении */
.heatmann-single-product .woocommerce-tabs ul.tabs li.active a,
.heatmann-single-product .woocommerce-tabs ul.tabs li a:hover {
    color: #242424;
    border-bottom: 2px solid #f37324;
}

/* Оформление текста внутри вкладки "Описание" */
.heatmann-single-product .woocommerce-Tabs-panel {
    font-size: 16px;
    color: #444444;
    line-height: 1.8;
}

.heatmann-single-product .woocommerce-Tabs-panel h2 {
    display: none; /* Прячем дублирующийся заголовок "Описание" */
}

/* Вкладки товара (десктоп): прижаты вплотную к «Опису», неактивная — светло-серая.
   Высокая специфичность ".woocommerce div.product.heatmann-single-product" нужна,
   чтобы перебить дефолтную "коробку" ядра WooCommerce (#ebe9eb + уголки li::before/after).
   Блок идёт ДО мобильного @media — мобильный аккордеон ниже его перекрывает. */
.woocommerce div.product.heatmann-single-product .woocommerce-tabs ul.tabs {
    gap: 4px;
    align-items: flex-end;
}
.woocommerce div.product.heatmann-single-product .woocommerce-tabs ul.tabs li {
    background: #f4f4f5;
    border: 1px solid #e8e8e8;
    border-bottom: none;
    border-radius: 7px 7px 0 0;
    margin: 0;
    overflow: hidden;
}
.woocommerce div.product.heatmann-single-product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product.heatmann-single-product .woocommerce-tabs ul.tabs li::after {
    display: none;
}
.woocommerce div.product.heatmann-single-product .woocommerce-tabs ul.tabs li.active {
    background: #fff;
}
.woocommerce div.product.heatmann-single-product .woocommerce-tabs ul.tabs li a {
    padding: 13px 24px;
    margin: 0;
    border-bottom: 3px solid transparent;
}
.woocommerce div.product.heatmann-single-product .woocommerce-tabs ul.tabs li a:hover {
    color: #242424;
}
.woocommerce div.product.heatmann-single-product .woocommerce-tabs ul.tabs li.active a {
    color: #242424;
    border-bottom-color: #f37324;
}

/* Краткое описание над калькулятором во вкладке товара */
.hm-calc-tab-lead {
    font-size: 15px;
    line-height: 1.6;
    color: #555;
    margin: 0 0 18px;
}

/* Вкладки товара на мобильном выглядят как раскрытый аккордеон, а не кнопки-табы.
   Префикс ".woocommerce div.product.heatmann-single-product" нужен, чтобы перебить
   специфичность правил ядра ".woocommerce div.product .woocommerce-tabs ul.tabs li"
   (4 класса), которые рисуют "коробочку" с рамкой/фоном/уголками. Блок идёт ПОСЛЕ
   десктопных правил, поэтому десктоп остаётся как был. */
@media (max-width: 768px) {
    .woocommerce div.product.heatmann-single-product .woocommerce-tabs ul.tabs {
        display: block;
        border-bottom: none;
        margin: 0;
        padding: 0;
    }

    .woocommerce div.product.heatmann-single-product .woocommerce-tabs ul.tabs li {
        display: block;
        border: none;
        border-top: 1px solid #e1dddd;
        background: none;
        border-radius: 0;
        margin: 0;
        padding: 0;
    }

    /* Декоративные уголки ядра WooCommerce (li::before / li::after) и линию-полосу
       снизу списка вкладок (ul.tabs::before) убираем */
    .woocommerce div.product.heatmann-single-product .woocommerce-tabs ul.tabs li::before,
    .woocommerce div.product.heatmann-single-product .woocommerce-tabs ul.tabs li::after,
    .woocommerce div.product.heatmann-single-product .woocommerce-tabs ul.tabs::before {
        display: none;
    }

    .woocommerce div.product.heatmann-single-product .woocommerce-tabs ul.tabs li a {
        display: block;
        padding: 16px 0;
        color: #f37324; /* оранжевый, как у донора для раскрытой секции */
        font-weight: 600;
        border-bottom: none;
        position: relative;
    }

    /* Шеврон у правого края строки (не у текста), серый — как у донора */
    .woocommerce div.product.heatmann-single-product .woocommerce-tabs ul.tabs li a::after {
        content: "\f347";
        font-family: dashicons;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        font-size: 20px;
        color: #999999;
        transition: transform 0.3s ease;
    }

    /* Стрелка повёрнута вверх, когда панель раскрыта (класс hm-open ставит JS-аккордеон) */
    .woocommerce div.product.heatmann-single-product .woocommerce-tabs ul.tabs li.hm-open a::after {
        transform: translateY(-50%) rotate(180deg);
    }

    /* Панели-аккордеоны анимируются по max-height (display:none анимировать нельзя).
       Высоту в пикселях выставляет JS, здесь только переход и обрезка.
       Каждая панель управляется независимо. */
    .heatmann-single-product .woocommerce-Tabs-panel {
        padding-top: 20px;
        overflow: hidden;
        transition: max-height 0.35s ease, padding-top 0.35s ease;
    }
}

/* "Похожие товары" под карточкой товара (та же категория, тот же язык) */
.heatmann-single-product .related.products {
    margin-top: 60px;
    margin-bottom: 60px;
    padding-top: 50px;
    border-top: 1px solid #e1dddd;
}

.heatmann-single-product .related.products h2 {
    font-size: 28px;
    font-weight: 600;
    color: #242424;
    text-transform: uppercase;
    margin-bottom: 35px;
}

.heatmann-single-product .related.products ul.products {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Тот же фикс WooCommerce-клирфикса, что и на главной (см. .products-grid) —
   иначе ::before/::after ломают раскладку в CSS Grid */
.heatmann-single-product .related.products ul.products::before,
.heatmann-single-product .related.products ul.products::after {
    content: none !important;
    display: none !important;
}

.heatmann-single-product .related.products ul.products li.product {
    margin: 0 !important;
    width: 100% !important;
}

@media (max-width: 900px) {
    .heatmann-single-product .related.products ul.products {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    /* Карусель из 2 карточек в ряд со свайпом — как у донора, вместо списка в столбик */
    .heatmann-single-product .related.products ul.products {
        display: flex;
        grid-template-columns: unset;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 16px;
        padding-bottom: 10px;
    }

    .heatmann-single-product .related.products ul.products li.product {
        flex: 0 0 calc(50% - 8px);
        scroll-snap-align: start;
    }

    /* У донора карточки похожих товаров компактные и без рамки-коробки.
       Убираем рамку/паддинг/тень и уменьшаем заголовок (каталог и главную
       это не затрагивает — селектор привязан к .related.products). */
    .heatmann-single-product .related.products .custom-product-card .product-wrapper {
        border: none;
        border-radius: 0;
        padding: 0;
        background: none;
    }

    .heatmann-single-product .related.products .custom-product-card .product-element-top img {
        margin-bottom: 10px;
        border-radius: 8px;
    }

    .heatmann-single-product .related.products .custom-product-card .wd-entities-title {
        font-size: 12px;
        margin-bottom: 5px;
    }

    .heatmann-single-product .related.products .custom-product-card .wd-product-cats a {
        font-size: 8px;
    }

    .heatmann-single-product .related.products h2 {
        font-size: 22px;
        margin-bottom: 20px;
    }
}

/* ==========================================================================
   Главная страница (Front Page)
   ========================================================================== */

/* ==========================================================================
   Слайдер на Главной (Hero Slider)
   ========================================================================== */
.heatmann-slider {
    position: relative;
    width: 100%;
    height: 80vh; /* Высота на весь экран */
    overflow: hidden;
}

.slide {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.8s ease-in-out; /* Плавное затухание */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.slide.active {
    opacity: 1;
    z-index: 10;
}

/* 1. Легкий фильтр на фото — на оригинале это естественное затемнение фото, без сплошной плашки */
.slide-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.15) !important;
    z-index: 1;
}

/* 2. Железобетонно делаем текст ЧИСТО БЕЛЫМ, убивая стили темы */
.hero-content .hero-title {
    color: #ffffff !important;
    text-shadow: none !important; /* Убираем грязную тень */
    font-weight: 700 !important; /* Делаем шрифт чуть жирнее для читаемости */
    opacity: 1 !important;
}

.hero-content .hero-subtitle {
    color: #ffffff !important;
    text-shadow: none !important;
    opacity: 0.9 !important; /* Легкая прозрачность для подзаголовка */
}

.heatmann-slider .container {
    position: relative;
    z-index: 2;
}

/* Стрелки слайдера */
.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 40px;
    color: white;
    cursor: pointer;
    z-index: 20;
    padding: 15px;
    transition: 0.3s;
    user-select: none;
}
.slider-arrow:hover { color: #f37324; }
.slider-arrow.prev { left: 20px; }
.slider-arrow.next { right: 20px; }

.hero-content {
    position: relative;
    z-index: 2;
}

/* Анимация появления текста слайда — как в оригинале: каждый элемент
   "падает" сверху с задержкой друг за другом (transform 1s, opacity 0.25s) */
.hero-content .hero-subtitle,
.hero-content .hero-title,
.hero-content .btn-primary {
    opacity: 0;
    transform: translateY(-40px);
    transition: opacity 0.25s ease, transform 1s cubic-bezier(0, 0.87, 0.58, 1);
}

.slide.active .hero-content .hero-subtitle {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.2s;
}

.slide.active .hero-content .hero-title {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.35s;
}

.slide.active .hero-content .btn-primary {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.5s;
}

.hero-title {
    font-size: 64px; /* Увеличили размер как на оригинале */
    font-weight: 600;
    margin: 20px 0;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.hero-subtitle {
    font-size: 20px;
    font-style: italic;
    letter-spacing: 1px;
}

/* Кнопка READ MORE в слайдере — на оригинале белая с темным текстом, без рамки оранжевого цвета */
.heatmann-slider .btn-primary {
    background-color: #ffffff !important;
    color: #333333 !important;
    border: none !important;
    height: 48px !important;
    padding: 0 28px !important;
}

.heatmann-slider .btn-primary:hover {
    background-color: #f2f2f2 !important;
}

/* Кнопка READ MORE */
.btn-primary {
    display: inline-block;
    background-color: #f37324;
    color: #fff;
    padding: 15px 40px;
    text-decoration: none;
    font-weight: 600;
    text-transform: uppercase;
    transition: 0.3s;
    margin-top: 30px;
    border-radius: 0; /* Строгий прямоугольный стиль оригинала */
}

/* 2. Сетка товаров на главной */
.home-featured-products {
    margin-bottom: 80px;
}

.section-title {
    font-size: 32px;
    margin-bottom: 40px;
    color: #242424;
    font-weight: 600;
    text-transform: uppercase;
}

.heatmann-products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.heatmann-products-carousel-wrap {
    position: relative;
}

/* Стрелки карусели — скрыты на десктопе, появляются только на мобильном */
.products-carousel-arrow {
    display: none;
}

/* 2.1 Блок "Новости" на главной (между двумя parallax-баннерами) */
.home-news {
    padding: 80px 0;
}

.home-news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.news-card {
    border: 1px solid #e1dddd;
    padding: 15px;
    text-align: center;
    transition: box-shadow 0.3s ease;
}

.news-card:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
}

.news-card-thumb {
    position: relative;
    display: block;
    overflow: hidden;
}

.news-card-thumb img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.news-card-thumb:hover img {
    transform: scale(1.06);
}


.news-card-title {
    font-size: 18px;
    margin: 20px 0 10px;
}

.news-card-title a {
    color: #242424;
    text-decoration: none;
}

.news-card-link {
    color: #f37324;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
}

@media (max-width: 900px) {
    .home-news-grid { grid-template-columns: 1fr; }
}

/* 3. Темные секции-баннеры (Parallax / CTA) — фото зафиксировано (background-attachment: fixed),
   поэтому при скролле картинка "стоит на месте", а шапка плывёт над ней — как на оригинале */
.dark-bg {
    position: relative;
    background-color: #242424;
    color: #ffffff;
    padding: 120px 0;
    text-align: center;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.dark-bg::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(20, 20, 20, 0.6);
    z-index: 0;
}

.dark-bg .container {
    position: relative;
    z-index: 1;
}

/* На мобильных background-attachment: fixed работает нестабильно — отключаем */
@media (max-width: 768px) {
    .dark-bg {
        background-attachment: scroll;
        padding: 60px 0; /* было 120px — баннеры занимали почти весь экран по высоте */
    }

    /* Заголовок баннера 36px на мобильном переполнял экран и обрезался —
       уменьшаем (десктоп остаётся 36px) */
    .dark-bg .banner-title {
        font-size: 26px;
        margin-bottom: 15px;
    }

    .dark-bg .banner-text {
        font-size: 15px;
        line-height: 1.7;
        margin-bottom: 28px;
    }
}

.dark-bg .banner-title {
    font-size: 36px;
    margin-bottom: 20px;
    color: #ffffff;
}

.dark-bg .banner-text {
    font-size: 16px;
    line-height: 1.8;
    max-width: 800px;
    margin: 0 auto 40px auto;
    color: #a5a5a5;
}

/* ==========================================================================
   Глобальные стили для кнопок (работают ВЕЗДЕ)
   ========================================================================== */

/* Общая физика для обеих кнопок */
.btn-primary,
.btn-outline-white {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 54px !important; 
    padding: 0 40px !important; 
    box-sizing: border-box !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    line-height: 1 !important;
    transition: all 0.3s ease !important;
    border-radius: 0 !important;
    margin-top: 30px; /* Отступ от текста сверху */
}

/* Оранжевая кнопка */
.btn-primary {
    background-color: #f37324 !important;
    color: #ffffff !important;
    border: 2px solid #f37324 !important;
}

.btn-primary:hover {
    background-color: #d6601a !important;
    border-color: #d6601a !important;
}

/* Прозрачная кнопка с белой рамкой */
.btn-outline-white {
    background-color: transparent !important;
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
}

.btn-outline-white:hover {
    background-color: #ffffff !important;
    color: #242424 !important;
}

/* Выравнивание, когда две кнопки стоят рядом (Секция 4) */
.cta-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: center;
}

.cta-buttons .btn-primary,
.cta-buttons .btn-outline-white {
    margin-top: 0; /* Убираем верхний отступ, чтобы стояли ровно */
}

/* Индивидуальный цвет: Оранжевая кнопка */
.cta-buttons .btn-primary {
    background-color: #f37324 !important;
    color: #ffffff !important;
    border: 2px solid #f37324 !important; /* Рамка, чтобы уровнять размер */
}

.cta-buttons .btn-primary:hover {
    background-color: #d6601a !important;
    border-color: #d6601a !important;
}

/* Индивидуальный цвет: Прозрачная кнопка с белой рамкой */
.cta-buttons .btn-outline-white {
    background-color: transparent !important;
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
}

.cta-buttons .btn-outline-white:hover {
    background-color: #ffffff !important;
    color: #242424 !important;
}

/* Адаптивность для мобильных */
@media (max-width: 1024px) {
    .heatmann-products-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    /* Заголовки секций на мобильном мельче — у донора 28px (десктоп остаётся 32px) */
    .section-title {
        font-size: 28px;
        margin-bottom: 25px;
    }

    /* "Популярные товары" на мобильном — горизонтальная карусель со свайпом
       (как на оригинале), а не список вниз */
    .heatmann-products-grid {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 80%;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 16px;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .heatmann-products-grid::-webkit-scrollbar {
        display: none;
    }

    .heatmann-products-grid > li,
    .heatmann-products-grid .product {
        scroll-snap-align: start;
    }

    /* Карточки "Популярных товаров" на мобильном — без рамки-коробки,
       единообразно с блоком похожих товаров (каталог/главную-десктоп не трогаем) */
    .heatmann-products-grid .custom-product-card .product-wrapper {
        border: none;
        border-radius: 0;
        padding: 0;
        background: none;
    }

    .heatmann-products-grid .custom-product-card .product-element-top img {
        margin-bottom: 10px;
        border-radius: 8px;
    }

    .heatmann-products-grid .custom-product-card .wd-entities-title {
        font-size: 12px;
        margin-bottom: 5px;
    }

    .heatmann-products-grid .custom-product-card .wd-product-cats a {
        font-size: 8px;
    }

    .products-carousel-arrow {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 40%;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: #ffffff;
        border: 1px solid #e1dddd;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
        font-size: 18px;
        color: #242424;
        cursor: pointer;
        z-index: 5;
    }

    .products-carousel-arrow.prev { left: -6px; }
    .products-carousel-arrow.next { right: -6px; }

    .cta-buttons { flex-direction: column; }

    /* Слайдер на мобильном: меньше шрифт, отступы от краёв и от стрелок,
       чтобы текст не "наезжал" на навигацию и не шёл край-в-край */
    .hero-title {
        font-size: 26px;
        letter-spacing: 0.5px;
        margin: 12px 0;
    }

    .hero-subtitle {
        font-size: 15px;
    }

    .heatmann-slider .container {
        padding: 0 42px;
    }

    .slider-arrow {
        font-size: 22px;
        padding: 8px;
    }

    .slider-arrow.prev { left: 5px; }
    .slider-arrow.next { right: 5px; }

    /* Кнопки — компактнее, чем на десктопе */
    .btn-primary,
    .btn-outline-white,
    .btn-outline-white-dark {
        height: 44px !important;
        padding: 0 24px !important;
        font-size: 12px !important;
    }
}
/* ==========================================================================
   ФИНАЛЬНОЕ ИСПРАВЛЕНИЕ: Шапка и Слайдер
   ========================================================================== */

/* 1. Умная прозрачная шапка (с правильными отступами) */
body.home header {
    position: fixed !important;
    top: 0; left: 0; width: 100% !important;
    padding: 25px 0 !important; /* Даем шапке воздух сверху и снизу */
    background-color: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 10000 !important;
    transition: all 0.4s ease !important; /* Плавное сужение при скролле */
}

/* 2. Шапка при прокрутке вниз */
body.home header.scrolled {
    padding: 10px 0 !important; /* Шапка становится чуть уже */
    background-color: #242424 !important;
    border-bottom: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

/* 3. Железобетонно белый текст меню (и прозрачной, и скролл-шапки).
   .mobile-menu-toggle — это <button>, а не <a>, поэтому его нужно указать
   отдельно, иначе кнопка "МЕНЮ" остаётся тёмной и сливается с фото. */
body.home header a,
body.home header .main-nav a,
body.home header .lang-switcher a,
body.home header.scrolled a,
body.home header.scrolled .main-nav a,
body.home header .mobile-menu-toggle {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3); /* Легкая тень для читаемости на фото */
}

/* 4. Фикс наложения текстов в слайдере */
.slide {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    visibility: hidden; /* Полностью прячем неактивные тексты */
    transition: opacity 0.7s ease-in-out, visibility 0.7s;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.slide.active {
    opacity: 1;
    visibility: visible; /* Показываем активный слайд */
    z-index: 10;
}
/* ==========================================================================
   ИСПРАВЛЕНИЕ: Конфликт фиксированной шапки с админ-панелью WP
   ========================================================================= */

/* Если на сайте авторизован админ (есть класс .admin-bar), 
   опускаем шапку ровно на высоту черной панели (32px) */
body.admin-bar.home header {
    top: 32px !important;
}

/* На мобильных устройствах админ-панель чуть толще (46px) */
@media screen and (max-width: 782px) {
    body.admin-bar.home header {
        top: 46px !important;
    }
}

/* Строгое вертикальное центрирование всех элементов внутри шапки */
body.home header .container,
body.home header .header-inner {
    display: flex !important;
    align-items: center !important;
}

/* ==========================================================================
   ВНУТРЕННИЕ СТРАНИЦЫ (page.php, single.php, index.php, 404.php)
   Шапка на этих страницах не прозрачная — на главной она "плавает" над
   слайдером, а здесь должна быть обычной, в потоке документа.
   ========================================================================== */
body:not(.home) .site-header {
    position: relative;
    background-color: #212121; /* Тёмная шапка, как на внутренних страницах оригинала */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

body:not(.home) .site-header a {
    color: #ffffff;
}

body:not(.home) .site-header .nav-menu a:hover,
body:not(.home) .site-header .lang-switcher-list li.current-lang a,
body:not(.home) .site-header .lang-switcher-list li a:hover {
    color: #f37324; /* Фирменный оранжевый остаётся акцентом при наведении */
}

body:not(.home) .site-header .lang-switcher-list li a {
    color: rgba(255, 255, 255, 0.6);
}

body:not(.home) .theme-language-switcher {
    border-left-color: rgba(255, 255, 255, 0.15);
}

/* Баннер заголовка страницы (Contact, Blog, 404 и т.д.) */
.page-title-banner {
    padding: 60px 0;
}

.page-title-breadcrumb {
    margin-top: 15px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
}

.page-title-breadcrumb a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color 0.3s ease;
}

.page-title-breadcrumb a:hover {
    color: #f37324;
}

.page-title-breadcrumb span {
    color: #ffffff;
    font-weight: 600;
}

/* Лёгкий вступительный блок страницы About (светлый фон вместо тёмного баннера,
   близко к стилю оригинала — оранжевый лейбл + крупный заголовок) */
.about-intro-section {
    background-color: #f6f6f6;
    padding: 70px 0;
}

.about-intro-label {
    display: block;
    color: #f37324;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1px;
    margin-bottom: 12px;
}

.about-intro-title {
    font-size: 36px;
    font-weight: 700;
    color: #242424;
    margin: 0;
    max-width: 700px;
}

/* Центрированный вариант вступления — для страницы Контакты */
.about-intro-section.text-center .about-intro-title {
    margin: 0 auto;
}

.contact-intro-text {
    color: #767676;
    font-size: 16px;
    max-width: 560px;
    margin: 20px auto 0;
}

.about-intro-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr;
    gap: 40px;
}

.about-intro-col h3 {
    font-size: 17px;
    font-weight: 700;
    color: #242424;
    margin: 0 0 12px;
}

.about-intro-col p {
    font-size: 15px;
    color: #767676;
    line-height: 1.7;
    margin: 0;
}

@media (max-width: 900px) {
    .about-intro-grid {
        grid-template-columns: 1fr;
    }
}

/* Блок "Фото + текст" ниже вступления */
.about-photo-section {
    padding: 70px 15px;
}

.about-photo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
}

.about-photo-col img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.about-photo-title {
    font-size: 32px;
    font-weight: 700;
    color: #242424;
    margin: 10px 0 25px;
}

@media (max-width: 900px) {
    .about-photo-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

.page-title-banner .banner-title {
    margin: 0;
    font-size: 32px;
    text-transform: uppercase;
}

/* Контентная область внутренних страниц */
.page-content-area {
    padding: 60px 15px;
}

.entry-content,
.about-entry-content {
    font-size: 16px;
    line-height: 1.8;
    color: #333333;
    max-width: 900px;
    margin: 0 auto;
}

.entry-content h2,
.about-entry-content h2 {
    font-size: 26px;
    margin-top: 40px;
    margin-bottom: 15px;
    color: #242424;
}

.entry-content img,
.about-entry-content img {
    max-width: 100%;
    height: auto;
}

.about-cta-strip {
    max-width: 900px;
    margin: 60px auto 0;
    padding: 40px;
    background-color: #f6f6f6;
    text-align: center;
}

.about-cta-strip .about-cta-text {
    font-size: 22px;
    font-weight: 600;
    color: #242424;
    margin-bottom: 10px;
}

/* ==========================================================================
   БЛОГ — лента (index.php) и одиночный пост (single.php)
   ========================================================================== */
.blog-list-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.blog-card {
    background-color: #ffffff;
    border: 1px solid #eeeeee;
    border-radius: 5px;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Приподнятая карточка при наведении — как у карточек товара */
.blog-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.12);
    border-color: transparent;
    z-index: 2;
}

.blog-card-thumb,
.blog-card-thumb-placeholder {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    background-color: #e9e9e9;
    overflow: hidden;
}

.blog-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

/* Лёгкое увеличение картинки при наведении — как у товара */
.blog-card:hover .blog-card-thumb img {
    transform: scale(1.05);
}

.blog-card-body {
    padding: 20px;
}

.blog-card-title {
    font-size: 19px;
    margin: 0 0 12px;
}

.blog-card-title a {
    color: #242424;
    text-decoration: none;
    transition: color 0.3s ease;
}

.blog-card-title a:hover {
    color: #f37324;
}

/* Краткое описание скрыто и раскрывается при наведении на карточку —
   единообразно с .hover-content на карточках товара. */
.blog-card-excerpt {
    font-size: 14px;
    color: #555555;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    border-top: 0 solid #eee;
    transition: max-height 0.4s ease, opacity 0.4s ease, margin 0.4s ease, padding 0.4s ease, border-width 0.4s ease;
}

.blog-card:hover .blog-card-excerpt {
    max-height: 240px;
    opacity: 1;
    margin-top: 12px;
    padding-top: 12px;
    margin-bottom: 12px;
    border-top-width: 1px;
}

.blog-card-excerpt p {
    margin: 0;
}

.blog-card-link {
    color: #f37324;
    font-weight: 600;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 13px;
}

.blog-pagination {
    margin-top: 40px;
    text-align: center;
}

.blog-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0 4px;
    color: #242424;
    text-decoration: none;
    border: 1px solid #e1dddd;
}

.blog-pagination .page-numbers.current {
    background-color: #f37324;
    color: #ffffff;
    border-color: #f37324;
}

/* Шапка статьи: бейдж категории + заголовок по центру (как у донора) */
.blog-single-header {
    max-width: 760px;
    margin: 0 auto 30px;
}

.blog-single-cat {
    display: inline-block;
    background: #f37324;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 6px 16px;
    border-radius: 3px;
    text-decoration: none;
    margin-bottom: 20px;
    transition: background 0.3s ease;
}

.blog-single-cat:hover {
    background: #d95f16;
}

.blog-single-title {
    font-size: 34px;
    font-weight: 600;
    line-height: 1.25;
    color: #242424;
    margin: 0;
}

.blog-single-thumb {
    max-width: 900px;
    margin: 0 auto 30px;
}

.blog-single-thumb img {
    width: 100%;
    height: auto;
}

.blog-single-footer {
    margin-top: 40px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.btn-outline-dark {
    display: inline-block;
    padding: 12px 30px;
    border: 2px solid #242424;
    color: #242424;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 600;
}

.btn-outline-dark:hover {
    background-color: #242424;
    color: #ffffff;
}

/* Динамический блок новостей в футере */
.footer-news-item {
    display: block;
    text-decoration: none;
    color: inherit;
    margin-bottom: 8px;
}

.footer-news-date {
    display: block;
    font-size: 12px;
    color: #a5a5a5;
}

.footer-news-title {
    display: block;
    color: #ffffff;
    transition: color 0.3s ease;
}

.footer-news-item:hover .footer-news-title {
    color: #f37324; /* Фирменный оранжевый Heatmann */
}

/* ==========================================================================
   КОНТАКТЫ (page-contact-us.php)
   ========================================================================== */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
}

.contact-company-name {
    font-size: 16px;
    color: #242424;
    margin: 0 0 25px;
}

/* Блок контактов с иконками — как у оригинала */
.contact-icon-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.contact-icon-list li {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 25px;
}

.contact-icon-box {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    background-color: #fdf1e9;
    border-radius: 8px;
}

.contact-icon-box .dashicons {
    color: #f37324;
    font-size: 18px;
    width: 18px;
    height: 18px;
}

.contact-icon-text {
    display: block;
    color: #444444;
    line-height: 1.5;
}

.contact-icon-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #242424;
    margin-bottom: 3px;
}

.contact-icon-text a {
    color: #444444;
    text-decoration: none;
    transition: color 0.3s ease;
}

.contact-icon-text a:hover {
    color: #f37324;
}

.contact-form-title {
    font-size: 22px;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.heatmann-contact-form .form-row {
    margin-bottom: 18px;
}

.heatmann-contact-form label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 14px;
}

.heatmann-contact-form input,
.heatmann-contact-form textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 15px;
    border: 1px solid #e1dddd;
    font-family: inherit;
    font-size: 14px;
}

.heatmann-contact-form button {
    cursor: pointer;
    border: none;
}

.contact-form-notice {
    padding: 15px 20px;
    margin-bottom: 20px;
    font-size: 14px;
}

.contact-form-notice.success {
    background-color: #eaf7ec;
    color: #1e7e34;
    border: 1px solid #c3e6cb;
}

.contact-form-notice.error {
    background-color: #fdecea;
    color: #b02a37;
    border: 1px solid #f5c2c7;
}

/* ==========================================================================
   404
   ========================================================================== */
.error-404-section {
    padding: 100px 0;
}

/* Крупная серая цифра "404" как водяной знак, как у оригинала */
.error-404-code {
    font-size: 160px;
    font-weight: 800;
    color: #f0f0f0;
    margin: 0;
    line-height: 1;
}

.error-404-title {
    font-size: 32px;
    font-weight: 700;
    color: #f37324;
    text-transform: uppercase;
    margin-top: -40px;
}

.error-404-text {
    color: #767676;
    font-size: 16px;
    max-width: 480px;
    margin: 0 auto 30px;
}

.error-404-search {
    display: flex;
    max-width: 420px;
    margin: 0 auto 40px;
    border: 1px solid #e1dddd;
}

.error-404-search input {
    flex: 1;
    border: none;
    padding: 14px 18px;
    font-size: 14px;
    outline: none;
}

.error-404-search button {
    background: #f37324;
    border: none;
    color: #fff;
    width: 50px;
    cursor: pointer;
    font-size: 16px;
}

/* Кнопка с тёмной обводкой — для использования на светлом фоне (404 и т.п.) */
.btn-outline-white-dark {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 54px !important;
    padding: 0 40px !important;
    box-sizing: border-box !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    line-height: 1 !important;
    transition: all 0.3s ease !important;
    border-radius: 0 !important;
    margin-top: 30px;
    background-color: transparent !important;
    color: #242424 !important;
    border: 2px solid #242424 !important;
}

.btn-outline-white-dark:hover {
    background-color: #242424 !important;
    color: #ffffff !important;
}

/* ==========================================================================
   Адаптивность внутренних страниц
   ========================================================================== */
@media (max-width: 1024px) {
    .blog-list-grid { grid-template-columns: repeat(2, 1fr); }
    .contact-grid { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 768px) {
    .blog-list-grid { grid-template-columns: 1fr; }
    .page-title-banner .banner-title { font-size: 24px; }

    /* Заголовок статьи мельче на мобильном (десктоп остаётся 34px) */
    .blog-single-title { font-size: 24px; }
}

/* ==========================================================================
   Мобильное меню (гамбургер) — полноэкранная панель
   ========================================================================== */
.mobile-menu-toggle {
    display: none;
    align-items: center;
    gap: 10px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    color: inherit;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mobile-menu-toggle-icon {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 24px;
    height: 18px;
}

.mobile-menu-toggle-icon span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: currentColor;
}

.mobile-nav-drawer {
    position: fixed;
    inset: 0;
    background-color: #212121;
    z-index: 100000;
    padding: 80px 30px 40px;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateX(20px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}

.mobile-nav-drawer.active {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

.mobile-nav-close {
    position: absolute;
    top: 25px;
    right: 25px;
    background: none;
    border: none;
    color: #ffffff;
    font-size: 34px;
    line-height: 1;
    cursor: pointer;
}

.mobile-nav-menu .nav-menu.mobile-menu {
    flex-direction: column;
    gap: 0;
    margin-bottom: 20px;
}

.mobile-nav-menu .nav-menu.mobile-menu a {
    display: block;
    padding: 14px 0;
    color: #ffffff;
    font-size: 17px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.mobile-nav-menu .nav-menu.mobile-menu a:hover {
    color: #f37324;
}

/* На мобильном выпадающее подменю ("Продукція") раскрывается аккордеоном по тапу,
   а не по hover — у тач-устройств hover не работает */
.mobile-nav-menu .menu-item-has-children .sub-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: none;
    box-shadow: none;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.mobile-nav-menu .menu-item-has-children.mobile-submenu-open .sub-menu {
    max-height: 500px;
}

.mobile-nav-menu .menu-item-has-children.mobile-submenu-open > a::after {
    transform: rotate(225deg);
}

.mobile-lang-switcher {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 20px;
    gap: 15px !important;
}

.mobile-lang-switcher li a {
    color: rgba(255, 255, 255, 0.6);
}

.mobile-lang-switcher li.current-lang a {
    color: #f37324;
}

body.hm-mobile-nav-open {
    overflow: hidden;
}

@media (max-width: 1200px) {
    .header-col.header-left,
    .header-col.header-right .secondary-navigation,
    .header-col.header-right .theme-language-switcher {
        display: none;
    }

    .mobile-menu-toggle {
        display: flex;
        order: -1; /* Гамбургер первым слева */
        flex: 1; /* равная ширина с правой колонкой — чтобы лого встало точно по центру */
        justify-content: flex-start;
    }

    /* Кнопка — не <a>, поэтому не подхватывает белый цвет ссылок шапки
       (body:not(.home) .site-header a) и сливается с тёмным фоном */
    body:not(.home) .mobile-menu-toggle {
        color: #ffffff;
    }

    .header-container {
        justify-content: space-between;
    }

    .header-col.header-center.site-logo {
        order: 0;
        flex: 0 0 auto; /* лого по центру, не растягивается */
    }

    .header-col.header-right {
        order: 1;
        flex: 1; /* равная ширина с кнопкой меню слева */
    }
}

@media (max-width: 768px) {
    /* Лого в шапке компактнее — как у донора (десктоп остаётся 220px) */
    .main-logo {
        max-width: 150px;
    }
}
/* ==========================================================================
   Кнопка "Наверх" (scroll-to-top) — на всех разрешениях (как у донора).
   Появляется при прокрутке вниз (класс .visible навешивает JS).
   ========================================================================== */
.hm-scroll-top {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid #e1dddd;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    color: #242424;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s, color 0.3s ease, border-color 0.3s ease;
    z-index: 998;
}

.hm-scroll-top:hover {
    color: #f37324;
    border-color: #f37324;
}

.hm-scroll-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.hm-scroll-top .dashicons {
    font-size: 22px;
    width: 22px;
    height: 22px;
    line-height: 22px;
}

@media (max-width: 768px) {
    .hm-scroll-top {
        right: 16px;
        bottom: 16px;
    }
}

/* ===== Кнопка и модалка "Оставить заявку" на странице товара ===== */
.hm-request-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 22px 0 10px;
    padding: 13px 28px;
    background: #f37324;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease;
}
.hm-request-btn:hover { background: #d95f16; transform: translateY(-2px); }
.hm-request-btn .dashicons { font-size: 18px; width: 18px; height: 18px; }

.hm-request-notice {
    margin: 16px 0 0;
    padding: 12px 16px;
    border-radius: 4px;
    font-size: 14px;
}
.hm-request-notice.success { background: #e7f6ec; color: #1a7f37; border: 1px solid #b7e0c4; }
.hm-request-notice.error { background: #fdecea; color: #b3261e; border: 1px solid #f5c2bd; }

.hm-request-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 20px;
}
.hm-request-overlay.open { display: flex; }
body.hm-modal-open { overflow: hidden; }

.hm-request-dialog {
    background: #ffffff;
    border-radius: 8px;
    padding: 32px 28px 28px;
    width: 100%;
    max-width: 420px;
    position: relative;
    box-shadow: 0 25px 60px rgba(0,0,0,0.25);
    animation: hmReqIn 0.25s ease;
}
@keyframes hmReqIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

.hm-request-close {
    position: absolute;
    top: 12px;
    right: 14px;
    background: none;
    border: none;
    font-size: 26px;
    line-height: 1;
    color: #999999;
    cursor: pointer;
}
.hm-request-close:hover { color: #333333; }

.hm-request-modal-title { font-size: 22px; font-weight: 600; margin: 0 0 6px; color: #242424; }
.hm-request-modal-product { font-size: 15px; color: #f37324; font-weight: 600; margin: 0 0 4px; }
.hm-request-modal-sub { font-size: 14px; color: #767676; margin: 0 0 20px; }

.hm-request-form input[type="text"],
.hm-request-form input[type="tel"] {
    width: 100%;
    padding: 13px 15px;
    margin-bottom: 12px;
    border: 1px solid #dddddd;
    border-radius: 4px;
    font-size: 15px;
    box-sizing: border-box;
}
.hm-request-form input:focus { outline: none; border-color: #f37324; }
.hm-request-submit {
    width: 100%;
    padding: 14px;
    background: #f37324;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s ease;
}
.hm-request-submit:hover { background: #d95f16; }

@media (max-width: 768px) {
    .hm-request-btn { width: 100%; justify-content: center; }
    .hm-request-dialog { padding: 26px 20px 22px; }
}

/* ===== Список файлов на странице "Загрузки" ===== */
.hm-dl{list-style:none;margin:0 0 34px;padding:0;}
.hm-dl li{margin:0 0 10px;}
.hm-dl a{display:flex;align-items:center;gap:14px;padding:14px 18px;border:1px solid #e1dddd;border-radius:6px;color:#242424;text-decoration:none;background:#ffffff;transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease;}
.hm-dl a:hover{border-color:#f37324;box-shadow:0 6px 18px rgba(0,0,0,.07);transform:translateY(-1px);}
.hm-dl a::before{content:"PDF";flex:0 0 auto;font-size:11px;font-weight:700;color:#ffffff;background:#f37324;padding:5px 9px;border-radius:4px;letter-spacing:.5px;}
.hm-dl-name{flex:1;font-weight:600;font-size:15px;}
.hm-dl-meta{flex:0 0 auto;font-size:12px;color:#767676;text-transform:uppercase;letter-spacing:.5px;}
.page-content-area h3{font-size:18px;font-weight:700;color:#242424;margin:8px 0 16px;}

/* ===== Калькулятор теплової потужності ===== */
.hm-calc{max-width:720px;margin:30px auto;background:#fff;border:1px solid #e1dddd;border-radius:10px;padding:26px 28px;box-shadow:0 6px 24px rgba(0,0,0,.06);}
.hm-calc-head{margin-bottom:20px;}
.hm-calc-model{display:inline-block;font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#f37324;}
.hm-calc-title{margin:4px 0 0;font-size:22px;font-weight:700;color:#242424;}
.hm-calc-modelpick{margin-bottom:18px;padding-bottom:18px;border-bottom:1px solid #eee;}
.hm-calc-modelpick label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:#555;}
.hm-calc-modelpick select{padding:12px 14px;border:1px solid #cfcccc;border-radius:7px;font-size:16px;font-weight:600;color:#242424;background:#fafafa;}
.hm-calc-modelpick select:focus{outline:none;border-color:#f37324;background:#fff;}
.hm-calc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 18px;}
.hm-calc-grid label{display:flex;flex-direction:column;font-size:13px;font-weight:600;color:#555;gap:6px;}
.hm-calc-grid select,.hm-calc-grid input{padding:10px 12px;border:1px solid #cfcccc;border-radius:7px;font-size:15px;color:#242424;background:#fafafa;width:100%;}
.hm-calc-grid select:focus,.hm-calc-grid input:focus{outline:none;border-color:#f37324;background:#fff;}
.hm-calc-result{margin-top:22px;background:#212121;border-radius:8px;padding:18px 22px;display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px;}
.hm-calc-result-label{font-size:13px;text-transform:uppercase;letter-spacing:.5px;color:#a5a5a5;flex:1 1 100%;}
.hm-calc-result-value{font-size:34px;font-weight:800;color:#fff;line-height:1;}
.hm-calc-result-value .hmc-q{color:#f37324;}
.hm-calc-result-value .hmc-unit{font-size:18px;font-weight:600;color:#fff;}
.hmc-kcal{font-size:15px;color:#a5a5a5;}
.hm-calc-energy{flex:1 1 100%;margin-top:10px;padding-top:10px;border-top:1px solid #3a3a3a;font-size:14px;color:#c5c5c5;}
.hm-calc-energy strong{color:#fff;font-weight:700;}
.hm-calc-msg{margin:10px 0 0;color:#c0392b;font-size:13px;min-height:1px;}
.hm-calc-note{margin:14px 0 0;font-size:12px;line-height:1.5;color:#888;}
@media (max-width:640px){
  .hm-calc{padding:20px 16px;margin:24px 0;}
  .hm-calc-grid{grid-template-columns:1fr 1fr;gap:12px 12px;}
  .hm-calc-result-value{font-size:28px;}
}

/* ===== Описание категории товаров (SEO-текст) ===== */
.shop-category-header{margin:0 0 16px;}
.shop-category-title{font-size:26px;font-weight:700;color:#242424;margin:0;}
.shop-category-description{font-size:15px;line-height:1.7;color:#555;margin:0 0 26px;}
.shop-category-description h2{font-size:19px;font-weight:700;color:#242424;margin:0 0 12px;}
.shop-category-description p{margin:0 0 12px;}
.shop-category-description a{color:#bf4d0a;}
.shop-category-description :last-child{margin-bottom:0;}
@media (max-width:768px){
  .shop-category-title{font-size:22px;}
  /* На мобильном: описание уходит В КОНЕЦ (после товаров), чтобы сначала были товары.
     Флекс-колонка + order только здесь; на десктопе — обычный поток (описание сверху). */
  .shop-content-area{display:flex;flex-direction:column;}
  .shop-category-description{order:1;font-size:14px;margin:28px 0 0;padding-top:22px;border-top:1px solid #e1dddd;}
}