body {
    background-color: #fdfdfd; /* Тёмно-серый фон на случай, если узор не загрузится */
    background-image: url('https://www.toptal.com/designers/subtlepatterns/uploads/cart.png');
    background-repeat: repeat; /* Повторять узор по всему экрану */
    color: #f8f9fa;           /* Светлый цвет для основного текста */
    font-family: 'Inter', sans-serif;
}

:root {
    --bs-body-font-family: 'Inter', sans-serif;
    --bs-font-sans-serif: 'Inter', sans-serif;
}

/* Сохраняем светлый фон для основных элементов,
  чтобы они оставались читаемыми.
*/
.product-card, 
.sidebar-widget, 
.catalog-controls-popup, 
.modal-content,
.hero-brand {
    background-color: #fff;
}

/* ===== БАЗА ===== */
:root {
    /* Устанавливаем приоритет для главной шапки, чтобы она всегда была сверху */
nav.navbar.sticky-top {
    z-index: 1030;
}
  --brand-grad-1: #ffd24a;
  --brand-grad-2: #ff9a28;
  --brand-grad-3: #ff4700;
  --brand-grad-4: #ff3b00;
  --product-grid-gap: 10px; /* <-- РАССТОЯНИЕ МЕЖДУ КАРТОЧКАМИ ТОВАРОВ */
/* --- Настройки иконки в КАТАЛОГЕ --- */
  --fav-icon-card-top: 10px;
  --fav-icon-card-right: 10px;
  /* --- Настройки иконки на СТРАНИЦЕ ТОВАРА --- */
  --fav-icon-detail-top: 25px;
  --fav-icon-detail-right: 25px;
    /* --- Прозрачность шапки (от 0.0 до 1.0) --- */
  --navbar-bg-opacity: 0.8;
}
.brand-name { 
    color: #4c2011; 
    font-weight: 700; 
}

/* --- ГЛОБАЛЬНОЕ УДАЛЕНИЕ ПОДЧЁРКИВАНИЙ --- */
a, a:hover, a:focus {
    text-decoration: none !important;
}
/* ------------------------------------------- */


/* ===== ШАПКА (HEADER) ===== */
.navbar { 
    --brand-h: 64px;
}
@media (max-width:576px) { 
    .navbar { --brand-h: 52px; } 
}
.navbar-brand {
  height: var(--brand-h) !important;
  display: flex !important;
  align-items: flex-end !important;
  gap: 8px !important;
  padding: 0 !important;
  margin: 0 !important;
}
.navbar-brand img {
  height: 100% !important;
  width: auto !important;
  display: block !important;
}
.navbar-brand .brand-name {
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
  white-space: nowrap;
  padding-bottom: 0px;
  margin-bottom: -1px !important;
}
@media (max-width:576px) {
  .navbar-brand .brand-title { font-size: 22px; padding-bottom: 1px; }
}

/* ===== HERO (градиент на главной) ===== */
.hero-brand {
  border-radius: 24px;
  padding: 48px 24px;
  color: #fff;
  background: linear-gradient(135deg, var(--brand-grad-1) 0%, var(--brand-grad-2) 35%, var(--brand-grad-3) 70%, var(--brand-grad-4) 100%) !important;
}

/* ===== КАРТОЧКИ ТОВАРОВ ===== */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--product-grid-gap);
    padding-left: 0;
    margin: 16px 0 0;
}
.product-card {
    list-style: none;
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 0 0 16px 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
.product-card-image {
    height: auto;
    aspect-ratio: 1 / 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

/* Растягиваем ТОЛЬКО ссылку вокруг картинки, но НЕ сердечко */
.product-card-image a:not(.favorite-icon) { display:block; height:100%; width:100%; }
.product-card-image img { width: 100% !important; height: 100% !important; object-fit: contain !important; display:block !important; } /* <-- ЭТО ВПИСЫВАЕТ КАРТИНКУ */
/* ===== НАСТРОЙКИ РАССТОЯНИЙ В КАРТОЧКАХ (ВЕБ-ВЕРСИЯ) ===== */
.product-card-body {
    padding: 14px 16px 16px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0; /* Обнуляем gap, теперь управляем только margin'ами */
}
.product-card-title {
    margin-bottom: 6px; /* <-- РУЧНАЯ НАСТРОЙКА (ВЕБ): Отступ ПОСЛЕ названия. */
    line-height: 1.1;   /* <-- РУЧНАЯ НАСТРОЙКА (ВЕБ): Расстояние между строками. Можно ставить меньше 1 (напр. 0.9). */
}
.product-card-price {
    margin-top: 0px; /* <-- РУЧНАЯ НАСТРОЙКА (ВЕБ): Отрицательный отступ, чтобы ПРИБЛИЗИТЬ цену к названию. */
    margin-bottom: 0px; /* <-- РУЧНАЯ НАСТРОЙКА (ВЕБ): Отступ ПОСЛЕ цены. */
}
.add-to-cart-link {
    display: inline-block; /* <-- ДОБАВЛЕНО: Превращаем ссылку в "коробочку", чтобы отступы работали. */
    margin-top: 0; /* Отступ ПЕРЕД кнопкой. */
    line-height: 1.1; /* <-- РУЧНАЯ НАСТРОЙКА (ВЕБ): Расстояние между строками. Меньше 1 = наложение. */
    padding-top: 4px; /* <-- РУЧНАЯ НАСТРОЙКА (ВЕБ): Внутренний отступ СВЕРХУ у кнопки. */
    padding-bottom: 4px; /* <-- РУЧНАЯ НАСТРОЙКА (ВЕБ): Внутренний отступ СНИЗУ у кнопки. */
}
.product-card-title { font-weight: normal; }
.product-card-category { font-size: 0.9em; }
.product-card-price {
    color: #4c2011; /* Фирменный тёмно-коричневый цвет */
    font-weight: bold; /* Делаем текст жирным */
}
.product-card-links { margin-top: auto; }

/* ===== БЕЙДЖ СКИДКИ НА КАРТОЧКЕ ===== */
.discount-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 10;
    background: rgba(255, 71, 0, 0.7);
    color: #fff;
    font-weight: 700;
    font-size: 1.0rem;
    letter-spacing: 0.05em;
    padding: 2px 8px;
    border-radius: 4px;
    line-height: 1.1;
    pointer-events: none;
}

/* ===== ДВЕ СТРОКИ ЦЕН (iade ile / iadesiz) В КАРТОЧКЕ ===== */
.card-price-line {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
    flex-wrap: wrap;
    line-height: 1.3;
}
.card-price-label {
    font-size: 0.78em;
    color: #888;
    white-space: nowrap;
}
.card-price-old {
    text-decoration: line-through;
    color: #999;
    font-size: 0.85em;
    font-weight: 400;
}
.card-price-new {
    color: #ff4700;
    font-weight: 700;
    font-size: 1em;
}
.card-price-current {
    font-weight: 700;
    font-size: 1em;
}

/* Иконка избранного (сердечко) */
/* Иконка в КАРТОЧКЕ КАТАЛОГА */
.product-card-image .favorite-icon {
    position: absolute;
    top: var(--fav-icon-card-top);
    right: var(--fav-icon-card-right);
    left: auto;
    z-index: 10;
    font-size: 1.5rem;
    line-height: 1;
    transition: transform 0.2s ease;
}

/* Иконка на СТРАНИЦЕ ТОВАРА */
.main-image-wrapper .favorite-icon,
.hover-zoom-main .favorite-icon,
.hover-zoom-wrapper .favorite-icon {
    position: absolute;
    top: var(--fav-icon-detail-top);
    right: var(--fav-icon-detail-right);
    left: auto;
    z-index: 10;
    font-size: 1.5rem;
    line-height: 1;
    transition: transform 0.2s ease;
}

/* Общий стиль для эффекта при наведении */
.favorite-icon:hover { transform: scale(1.15); }
.favorite-icon .bi-heart { color: var(--bs-primary); }
.favorite-icon .bi-heart-fill { 
    color: rgba(91, 56, 38, 0.65);
    -webkit-text-stroke: 1px var(--bs-primary); 
    text-stroke: 1px var(--bs-primary); 
}
/* --- Убираем подчёркивание у +/- в корзине --- */
td a.qty-link {
    text-decoration: none !important;
}

/* ===== ФОРМЫ (ТЕЛЕФОН) ===== */
.input-group .select2-container {
    width: 125px !important;
    flex: 0 0 auto !important;
}
.select2-container--open .select2-dropdown {
    width: 300px !important;
}

/* ===== ФУТЕР ===== */
footer .navbar-brand img {
    height: 90px !important;
    width: auto !important;
}
footer .list-unstyled a {
    color: #4c2011 !important;
    display: inline-block;
    transition: transform 0.2s ease-in-out;
    line-height: 1;
    padding: 0.15rem 0;
}
footer .list-unstyled a:hover,
footer .list-unstyled a:focus {
    color: #000 !important;
    transform: scale(1.05);
}

/* --- СТИЛЬ ДЛЯ ВСПЛЫВАЮЩЕЙ ПОДСКАЗКИ --- */
.custom-tooltip .tooltip-inner {
    background-color: #e7f5fe; /* Светло-голубой фон */
    color: #000;              /* Чёрный текст */
    border: 1px solid #bce8f1; /* Светло-голубая рамка */
}
.custom-tooltip .tooltip-arrow::before {
    border-top-color: #bce8f1; /* Цвет стрелочки под рамку */
}
/* ===== НОВЫЕ СТИЛИ ДЛЯ ЕДИНОГО ОФОРМЛЕНИЯ (ГОЛУБОЙ ЦВЕТ) ===== */

/* --- Стиль для ссылок "Назад" --- */
.btn-back {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    font-size: 0.9rem;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    border: 1px solid #2FA4E7; /* Голубая рамка */
    border-radius: 0.375rem;
    color: #2FA4E7; /* Голубой текст */
    background-color: transparent;
    transition: all 0.2s ease-in-out;
}
.btn-back:hover {
    color: #fff; /* Белый текст при наведении */
    background-color: #2FA4E7; /* Голубой фон при наведении */
}

/* --- Делаем все остальные кнопки голубыми --- */
/* Меняем стиль стандартных кнопок, чтобы они соответствовали основной */
.btn-secondary, .btn-success, .btn-danger, .btn-warning, .btn-info {
    background-color: #2FA4E7 !important;
    border-color: #2FA4E7 !important;
    color: #fff !important;
}
/* Эффект при наведении для этих кнопок */
.btn-secondary:hover, .btn-danger:hover, .btn-warning:hover, .btn-info:hover {
    opacity: 0.85;
}
.btn-success:hover {
    background-color: #1a8a3e !important;
    border-color: #1a8a3e !important;
}

/* --- СТИЛЬ ДЛЯ УВЕДОМЛЕНИЙ (СООБЩЕНИЙ) --- */
.alert-success, .alert-info, .alert-warning, .alert-danger {
    background-color: #eaf6fd; /* Светло-голубой фон */
    color: #0c5460; /* Тёмно-синий текст */
    border-color: #2FA4E7; /* Голубая рамка */
}
.alert-success .btn-close, .alert-info .btn-close, .alert-warning .btn-close, .alert-danger .btn-close {
    filter: none; /* Убираем фильтр с крестика, чтобы он был виден */
}

/* --- ФИНАЛЬНЫЙ СТИЛЬ ДЛЯ ВСПЛЫВАЮЩЕЙ ПОДСКАЗКИ (СТИЛЬ КНОПКИ) --- */
.tooltip.custom-tooltip .tooltip-inner {
    background-color: #2FA4E7;
    color: #fff;
    border-radius: 0.375rem;
    padding: 8px 12px; /* Слегка скорректируем поля */
    font-weight: 500;
    white-space: nowrap;
    opacity: 1;
    max-width: none; /* Убираем ограничение по ширине, чтобы фон не обрезался */
}
.tooltip.custom-tooltip.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before,
.tooltip.custom-tooltip.bs-tooltip-bottom .tooltip-arrow::before {
    border-bottom-color: #2FA4E7;
}
.tooltip.custom-tooltip.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before,
.tooltip.custom-tooltip.bs-tooltip-top .tooltip-arrow::before {
    border-top-color: #2FA4E7;
}
.tooltip.custom-tooltip.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before,
.tooltip.custom-tooltip.bs-tooltip-start .tooltip-arrow::before {
    border-left-color: #2FA4E7;
}
.tooltip.custom-tooltip.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before,
.tooltip.custom-tooltip.bs-tooltip-end .tooltip-arrow::before {
    border-right-color: #2FA4E7;
}
/* --- ФИНАЛЬНЫЙ СТИЛЬ ДЛЯ СЕРЫХ КНОПОК И ИХ ОБВОДКИ --- */

/* 1. Делаем кнопку серой по умолчанию */
.btn-secondary {
    color: #fff !important;
    background-color: #adb5bd !important;
    border-color: #adb5bd !important;
}

/* 2. Делаем кнопку чуть темнее при наведении курсора */
.btn-secondary:hover {
    background-color: #5a6268 !important;
    border-color: #545b62 !important;
}

/* 3. Устанавливаем СЕРУЮ обводку при клике/фокусе */
.btn-secondary:focus,
.btn-secondary.focus {
    box-shadow: 0 0 0 0.25rem rgba(130, 138, 145, 0.5) !important;
}

/* --- Делаем ручку сортировки компактной --- */
/* Обращаемся к ячейке, у которой есть ОБА класса: drag и handle */
td.drag.handle {
    width: 50px !important;
    background-size: 20px;
    background-position: center center;
}

/* ===== САЙДБАР (Финальная версия) ===== */

/* Внешний вид всей кнопки "Каталог" */
.sidebar-title {
    display: flex;
    align-items: stretch;
    background-color: #5B3826;
    border-radius: 0.375rem;
    width: 100%;
    padding: 0;
    overflow: hidden;
    cursor: default;
    border: none;
    
    box-shadow: 
        /* Теперь здесь СВЕТЛЫЙ цвет */
        inset -3px 3px 7px #a1887f, 
        
        /* Теперь здесь ТЕМНЫЙ цвет */
        inset 3px -3px 5px #411b0c;
    transition: transform 0.2s ease-in-out;
}

/* Стили для основной зоны-ссылки (текст "Каталог") */
.sidebar-title-link {
    flex-grow: 1;
    padding: 12px 16px;
    font-size: 1.2rem;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}
/* Убираем индивидуальную подсветку у дочерних элементов, т.к. теперь подсвечивается вся кнопка */
.sidebar-title-link:hover {
    background-color: transparent;
    color: #fff;
}

/* Стили для зоны-переключателя (стрелка) */
.sidebar-toggler {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-left: 1px solid rgba(255, 255, 255, 0.4); /* Сделали разделитель чуть заметнее */
    color: #fff;
    cursor: pointer;
}
.sidebar-toggler:hover {
    background-color: transparent;
}

/* Стили для списка категорий и эффекта "наезда" */
.sidebar-widget .list-group-flush {
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    padding: 5px;
}
.sidebar-widget .list-group-item {
    border: none;
    padding: 8px 15px;
    background-color: transparent;
    transition: transform 0.15s ease-in-out, background-color 0.15s ease, color 0.15s ease;
}
.sidebar-widget .list-group-item:hover:not(.active) {
    transform: scale(1.05);
    z-index: 2;
    position: relative;
    background-color: #f0f0f0;
    border-radius: 0.25rem;
}
.sidebar-widget .list-group-item.active {
    background-color: #2FA4E7;
    color: #fff;
    border-radius: 0.25rem;
}

/* Эффект "наезда" для категорий в сайдбаре */
@media (min-width: 992px) {
    .sidebar-title:hover {
        transform: scale(1.04); /* Увеличиваем элемент на 4% */
        z-index: 10; /* Размещаем его поверх других элементов, чтобы тень не обрезалась */
        position: relative; /* Необходимо для работы z-index */

        /* Улучшаем тень, чтобы создать эффект "отрыва" от страницы */
        box-shadow: 
            inset 3px -3px 5px #411b0c, 
            inset -3px 3px 7px #a1887f,
            0 5px 15px rgba(0, 0, 0, 0.2);
    }
}
/* --- Стили для текста в сайдбаре --- */
/* 1. Делаем текст ОСНОВНЫХ категорий фирменным синим */
.sidebar-title .sidebar-title-link,
.sidebar-title .sidebar-toggler {
    color: #2FA4E7;
}

/* 2. Возвращаем тёмно-коричневый цвет для ПОДКАТЕГОРИЙ (этот стиль переопределяет синий) */
.subcategory .sidebar-title .sidebar-title-link,
.subcategory .sidebar-title .sidebar-toggler {
    color: #4c2011;
}

/* --- Стили для фона ПОДКАТЕГОРИЙ --- */
.subcategory .sidebar-title {
    /* Уменьшаем непрозрачность еще на 10%, до 35% */
    background-color: rgba(91, 56, 38, 0.35);
    
    /* Немного смягчаем 3D-тень, чтобы она лучше смотрелась на более светлом фоне */
    box-shadow: 
        inset -2px 2px 5px rgba(161, 136, 127, 0.7),
        inset 2px -2px 4px rgba(65, 27, 12, 0.7);
}

.sidebar-title.sidebar-title-active {
    background-color: #2FA4E7;

    /* Копируем 3D-эффект с основной синей кнопки .btn-primary */
    box-shadow: 
        inset -3px 3px 7px #5cb3f2, 
        inset 3px -3px 5px #1a82c3;
}

.sidebar-title.sidebar-title-active .sidebar-title-link,
.sidebar-title.sidebar-title-active .sidebar-toggler {
    color: #fff;
}

/* ===== КНОПКИ УПРАВЛЕНИЯ КАТАЛОГОМ (СОРТИРОВКА/ФИЛЬТРЫ) ===== */
.catalog-controls-popup {
    display: flex;
    gap: 10px;
}
.catalog-controls-popup .btn-sm {
    display: flex;
    align-items: center;
    gap: 6px;
}
.title-and-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem; /* Отступ снизу до карточек товаров */
}

/* ===== СТИЛИ ДЛЯ ШАПКИ И ФУТЕРА (исправленная версия) ===== */

/* Прозрачная шапка с эффектом размытия (frosted glass) */
nav.navbar {
    background-color: rgba(244, 244, 244, var(--navbar-bg-opacity)) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* Для поддержки Safari */
}

/* Возвращаем сплошной фон для футера */
footer.bg-body-tertiary {
    background-color: #f4f4f4 !important;
}
/* ===== ВДАВЛЕННЫЕ 3D-КНОПКИ (Финальная версия) ===== */

/* Стили для основной голубой кнопки в обычном состоянии */
.btn-primary {
    border: none;
    
    box-shadow: 
        /* Теперь здесь СВЕТЛЫЙ цвет */
        inset -3px 3px 7px #5cb3f2, 
        
        /* Теперь здесь ТЕМНЫЙ цвет */
        inset 3px -3px 5px #1a82c3;
    
    transition: all 0.1s ease-in-out;
}

/* При нажатии инвертируем тени */
.btn-primary:active {
    box-shadow: 
        inset 3px -3px 7px #5cb3f2, 
        inset -3px 3px 5px #1a82c3;
    transform: none;
}
/* ===== Фирменный цвет для плашек (badge) ===== */
.bg-brand-brown {
    background-color: #5B3826 !important; /* Наш фирменный коричневый цвет */
}
/* ===== КОРИЧНЕВЫЕ КНОПКИ КАТЕГОРИЙ НА ГЛАВНОЙ ===== */
.btn-category-brown {
    background-color: #5B3826; /* Наш фирменный коричневый */
    color: #fff;
    border: none;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
    
    /* Тот же 3D-эффект, что и у кнопки "Каталог" */
    box-shadow: 
        inset 3px -3px 5px #411b0c, 
        inset -3px 3px 7px #a1887f;
    transition: all 0.1s ease-in-out;
}

.btn-category-brown:hover {
    background-color: #6C4E3D; /* Чуть светлее при наведении */
    color: #fff;
}

/* Эффект нажатия - инвертируем тени */
.btn-category-brown:active {
    box-shadow: 
        inset -3px 3px 5px #411b0c, 
        inset 3px -3px 7px #a1887f;
}
/* ===== ХЛЕБНЫЕ КРОШКИ И КНОПКА МЕНЮ ===== */
.breadcrumb-item a,
.breadcrumb-item.active,
.breadcrumb-item.active a {
    color: #5B3826 !important;
}
#mobileBreadcrumbBar .bi-three-dots {
    color: #5B3826 !important;
}
/* Партнёрские страницы — синий */
.partner-page .breadcrumb-item a,
.partner-page .breadcrumb-item.active,
.partner-page .breadcrumb-item.active a {
    color: #1a237e !important;
}
.partner-page #mobileBreadcrumbBar .bi-three-dots {
    color: #1a237e !important;
}

/* ===== ГЛОБАЛЬНЫЙ ЦВЕТ ТЕКСТА ===== */

/* 1. Устанавливаем фирменный коричневый как основной цвет текста для всей страницы */
body {
    color: #4c2011;
}

/* 2. Делаем большинство ссылок коричневыми */
a,
.dropdown-item,
.product-card-title a,
.sidebar-widget .list-group-item {
    color: #4c2011;
}

/* 3. Задаем цвет при наведении на ссылки */
a:hover,
.dropdown-item:hover,
.sidebar-widget .list-group-item:hover:not(.active) {
    color: #2FA4E7; /* При наведении делаем ссылки синими для акцента */
}

/* 4. ВАЖНО: Возвращаем синий цвет для кнопок призыва к действию */
.add-to-cart-link,
.add-to-cart-link:hover {
    color: #2FA4E7 !important;
}
/* ===== ЦВЕТ ТЕКСТА В ШАПКЕ ===== */
.navbar .link-body-emphasis,
.navbar .dropdown-toggle {
    color: #4c2011 !important;
}
.navbar .favorites-link i {
    color: #4c2011 !important;
}
/* ===== ЦВЕТ ЦЕНЫ НА СТРАНИЦЕ ТОВАРА ===== */
.product-detail-price {
    color: #4c2011; /* Фирменный тёмно-коричневый */
}
/* ===== ЗУМ ПРИ НАВЕДЕНИИ НА СТРАНИЦЕ ТОВАРА ===== */
.hover-zoom-wrapper { position: relative; }
.hover-zoom-main {
    position: relative;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 0.5rem;
    background-color: #fff;
    cursor: zoom-in;
    height: min(450px, calc(100vh - 230px));
    min-height: 180px;
}
.hover-zoom-main img,
.hover-zoom-main video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.hover-zoom-lens {
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid rgba(47,164,231,0.75);
    border-radius: 18px;
    background-color: rgba(255,255,255,0.22);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    display: none;
}
.hover-zoom-preview {
    position: absolute;
    top: 0;
    left: calc(100% + 24px);
    width: min(520px, 45vw);
    aspect-ratio: 1 / 1;
    border: 1px solid #eee;
    border-radius: 12px;
    background: #fff;
    box-shadow: none;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease;
    z-index: 30;
    pointer-events: none;
}
.hover-zoom-preview.active {
    opacity: 1;
    visibility: visible;
}
.hover-zoom-preview-box {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 200%;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.hover-zoom-preview.active .hover-zoom-preview-box {
    opacity: 1;
}
@media (min-width: 992px) {
    .hover-zoom-lens { display: block; }
}
@media (max-width: 991.98px) {
    .hover-zoom-main {
        min-height: auto;
        aspect-ratio: 1 / 1;
        height: auto;
        position: relative;
        overflow: hidden;
    }
    .hover-zoom-main img,
    .hover-zoom-main video {
        width: 100%;
        height: 100% !important;
        max-height: 100%;
        object-fit: contain;
        display: block;
    }
    .hover-zoom-preview { display: none !important; }
}
/* Отступы для кнопок категорий на главной */
.category-buttons-container {
    margin-top: 1.3rem;    /* Отступ СВЕРХУ */
    margin-bottom: 0.4rem; /* Отступ СНИЗУ */
}
/* Отступ сверху для оранжевого блока на главной */
main > section.text-center {
    margin-top: 0.4rem;
}

@media (max-width: 767.98px) {
:root {
    /* НАСТРОЙКИ РАЗМЕРА КНОПКИ-БУРГЕРА */
    --burger-button-icon-size: 1.1rem;  /* <-- Размер самой иконки (три полоски) */
    --burger-button-padding-y: 0rem;  /* <-- Отступ на кнопке сверху/снизу */
    --burger-button-padding-x: 0rem;  /* <-- Отступ на кнопке слева/справа */
    --breadcrumb-bar-padding-top: 0.2rem;    /* <-- НОВЫЙ ОТСТУП СВЕРХУ */
    --breadcrumb-bar-padding-bottom: 0.2rem; /* <-- НОВЫЙ ОТСТУП СНИЗУ */
    --main-content-padding-top: 0.3rem; /* <-- ОТСТУП СВЕРХУ ДЛЯ ВСЕГО КОНТЕНТА */
    --filter-bar-margin-bottom: 0.1rem; /* <-- ОТСТУП СНИЗУ ДЛЯ КНОПОК ФИЛЬТРА */
}
/* ===== НОВОЕ ПРАВИЛО: ДВЕ КОЛОНКИ ДЛЯ ТОВАРОВ ===== */
.product-grid {
    grid-template-columns: repeat(2, 1fr);
}
/* ===== НАСТРОЙКИ РАССТОЯНИЙ В КАРТОЧКАХ (МОБ. ВЕРСИЯ) ===== */
.product-card-body {
    gap: 0; /* Обнуляем gap */
    padding-left: 6px;  /* <-- РУЧНАЯ НАСТРОЙКА (МОБ.): Поле слева (было 16px). */
    padding-right: 6px; /* <-- РУЧНАЯ НАСТРОЙКА (МОБ.): Поле справа (было 16px). */
}
.product-card-title {
    margin-bottom: 4px; /* <-- РУЧНАЯ НАСТРОЙКА (МОБ.): Отступ ПОСЛЕ названия. */
    line-height: 1.1;   /* <-- РУЧНАЯ НАСТРОЙКА (МОБ.): Расстояние между строками в названии. */
    font-weight: 500 !important;
}
.product-card-price {
    margin-top: -2px; /* <-- РУЧНАЯ НАСТРОЙКА (МОБ.): Приблизить цену к названию. */
    margin-bottom: 2px; /* <-- РУЧНАЯ НАСТРОЙКА (МОБ.): Отступ ПОСЛЕ цены. */
}
.add-to-cart-link {
    display: inline-block; /* <-- ДОБАВЛЕНО: Превращаем ссылку в "коробочку", чтобы отступы работали. */
    margin-top: 0; /* Отступ ПЕРЕД кнопкой. */
    line-height: 1.0; /* <-- РУЧНАЯ НАСТРОЙКА (МОБ.): Расстояние между строками. Меньше 1 = наложение. */
    padding-top: 0px; /* <-- РУЧНАЯ НАСТРОЙКА (МОБ.): Внутренний отступ СВЕРХУ у кнопки. */
    padding-bottom: 0px; /* <-- РУЧНАЯ НАСТРОЙКА (МОБ.): Внутренний отступ СНИЗУ у кнопки. */
}
/* ===== БЕЙДЖ СКИДКИ И ЦЕНЫ (МОБ.) ===== */
.discount-badge {
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    padding: 1px 6px;
    top: 6px;
    left: 6px;
    line-height: 1.1;
}
.card-price-label {
    font-size: 0.68em;
    font-weight: 400 !important;
}
.card-price-old {
    font-size: 0.75em;
}
.card-price-new {
    font-size: 0.88em;
    font-weight: 900 !important;
}
.card-price-current {
    font-size: 0.88em;
    font-weight: 900 !important;
}
/* Управляем отступом для основного контента на мобильных */
main.container-fluid {
    padding-top: 0.5rem !important;
}
/* Управляем отступами строки с хлебными крошками */
.d-lg-none > .container-fluid {
    padding-top: var(--breadcrumb-bar-padding-top) !important;
    padding-bottom: var(--breadcrumb-bar-padding-bottom) !important;
}
/* Применяем размеры к САМОЙ КНОПКЕ и иконке */
button[data-bs-target="#mobileMenuCollapse"] {
    padding: var(--burger-button-padding-y) var(--burger-button-padding-x) !important;
    line-height: 0; /* Убирает лишнюю высоту строки */
    border-radius: 0.2rem !important;
}

button[data-bs-target="#mobileMenuCollapse"] .bi {
    font-size: var(--burger-button-icon-size) !important;
    vertical-align: middle; /* Центрирует иконку */
}
/* === СТИЛИ ФУТЕРА (подвала) === */
/* Мобильная версия: две реальные колонки */
@media (max-width: 767.98px) {
    footer.bg-body-tertiary {
        padding-top: 0.6rem !important;
    }
    footer .footer-col {
        display: flex !important;
        flex-direction: column !important;
        padding-left: 12px !important;
        padding-right: 4px !important;
    }
    /* Отступ между разделами внутри колонки */
    footer .footer-section + .footer-section {
        margin-top: 0.9rem !important;
    }
    footer .footer-section h5 {
        text-align: left;
        margin-top: 0 !important;
        margin-bottom: 0.15rem !important;
        font-size: 1rem !important;
    }
    footer .footer-section ul {
        margin-bottom: 0 !important;
        margin-top: 0 !important;
    }
    footer .footer-section li {
        line-height: 1.35;
        margin-bottom: 0 !important;
    }
    footer .footer-section a {
        line-height: 1.35;
    }
    footer .footer-logo {
        margin-top: 0.7rem !important;
    }
}
/* Десктоп: футер теперь отдельный блок в шаблоне (d-none d-md-flex) */

    /* === СТИЛИ КОНТЕНТА ДЛЯ МОБИЛЬНОЙ ВЕРСИИ [НОВАЯ ВЕРСИЯ С НУЛЯ] === */
    h2 {
        font-size: 1rem !important;
        margin-top: 0.5rem !important;
        margin-bottom: 0 !important;
        line-height: 1.2 !important;
    }
    h4 {
        font-size: 1rem !important;
        margin-top: 0 !important;
        margin-bottom: 0.3rem !important;
        line-height: 1.2 !important;
    }
    main.container-fluid p.lead,
    main p.lead,
    .container-fluid p.lead,
    p.lead {
        font-size: 1rem !important;
        margin-top: -1rem !important;
        margin-bottom: -0.5rem !important;
        line-height: 1.3 !important;
        display: block !important;
    }
    p {
        margin-top: 0 !important;
        margin-bottom: 0.1rem !important;
        line-height: 1.3 !important;
    }
    .hero-brand .btn {
        margin-top: 1.2rem !important;
    }
    .list-unstyled + p.text-muted,
    ul.list-unstyled + p.text-muted {
        margin-top: -0.5rem !important;
    }
    footer .row h5 {
        font-size: 1rem !important;
        margin-bottom: 0.3rem !important;
    }
    form .btn-primary,
    .btn-primary[type="submit"] {
        margin-bottom: 1rem !important;
    }
    
    /* ИСПРАВЛЕНИЕ: .mb-3 работает ТОЛЬКО внутри <form> */
    form .mb-3 {
        margin-bottom: 0.75rem !important;
    }
    
    .form-label {
        font-size: 0.9rem !important;
        margin-bottom: 0.25rem !important;
    }
    /* === СТИЛИ ШАПКИ === */
    /* Исправляем размер и поведение логотипа */
    .d-md-none .navbar-brand {
        height: auto !important;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .d-md-none .navbar-brand img {
        height: 47px !important;
        width: auto !important;
    }
    .d-md-none .navbar-brand .brand-name {
        margin-bottom: 0 !important;
        position: relative;
        top: 4px; /* <-- Настройка положения названия магазина */
    }

    /* Делаем шапку более компактной */
    nav.navbar .d-md-none {
        padding-top: 0.25rem !important;
        padding-bottom: 0.25rem !important;
        height: 95px !important;
    }
    nav.navbar {
        padding-bottom: 0px !important;
    }
    nav.navbar .d-md-none .mt-2 {
        margin-top: 0.5rem !important;
    }

    /* Настройка положения ссылок входа/регистрации */
    .auth-link-register,
    .auth-link-login {
        position: relative;
    }
    .auth-link-register {
        top: 5px; /* <-- Настройка положения "Регистрация" */
    }
    .auth-link-login {
        top: 0px; /* <-- Настройка положения "Войти" / "Выйти" */
    }

    /* Стили для формы поиска в шапке */
    .search-form-header .form-control {
        height: 25px !important;       /* <-- НАСТРОЙКА ВЫСОТЫ ПОИСКА */
        min-height: auto !important;   /* Сбрасываем ограничение Bootstrap */
        font-size: 0.85rem;
    }

    /* Выравниваем кнопки "Фильтры" и "Сортировка" */
    .catalog-controls-container {
        display: flex;
        justify-content: space-between;
        margin-top: -0.5rem;
    }
    /* Настройка кнопки поиска и иконки-лупы */
    .search-form-header .btn {
        height: 25px !important; /* <-- ПОСТАВЬТЕ ТУ ЖЕ ВЫСОТУ, ЧТО И У СТРОКИ ПОИСКА */
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 0;
        padding-bottom: 0;
    }
    .search-form-header .bi-search {
        font-size: 1rem; /* <-- ИЗМЕНЯЙТЕ ЭТУ ЦИФРУ для размера самой лупы */
    }
    /* --- ФИНАЛЬНЫЕ СТИЛИ ДЛЯ ЦЕНТРАЛЬНОГО ЭЛЕМЕНТА (КНОПКА/ТРЕУГОЛЬНИК) --- */
    
    /* 1. Общий контейнер (только для центрирования по горизонтали) */
    .mobile-center-container {
        position: absolute;
        /* 'top' теперь настраивается у каждого элемента отдельно */
        left: 50%;
        transform: translateX(-50%);
        z-index: 10;
        display: flex;
        justify-content: center;
    }

    /* 2. Настройки для кнопки "Купить без авторизации" */
    .mobile-center-container .btn {
        position: relative; /* Включаем позиционирование */
        top: -90px;          /* <-- ВЕРТИКАЛЬНОЕ ПОЛОЖЕНИЕ КНОПКИ */
        font-size: 0.7rem !important;
        padding-top: 0px !important;
        padding-bottom: 2px !important;
    }

    /* 3. Настройки для иконки-треугольника */
    .mobile-center-container #guest-tooltip-trigger {
        position: relative; /* Включаем позиционирование */
        top: -97px;          /* <-- ВЕРТИКАЛЬНОЕ ПОЛОЖЕНИЕ ТРЕУГОЛЬНИКА */
        font-size: 1.1rem !important; /* <-- РАЗМЕР ТРЕУГОЛЬНИКА (!important ОБЯЗАТЕЛЕН) */
    }
/* Настройка ширины строки поиска */
    .search-form-header {
        width: 190px; /* <-- ИЗМЕНЯЙТЕ ЭТУ ЦИФРУ для настройки ширины */
    }
    /* Управляем отступом ПОД кнопками "Фильтр" и "Сортировка" */
    .d-md-none.d-flex.justify-content-end {
        margin-bottom: var(--filter-bar-margin-bottom) !important;
    }
    .product-grid {
        margin-top: 0.3rem !important; /* <-- Изменяйте это значение для настройки зазора */
    }
    /* Исправляем цвет теней у активной кнопки в мобильном меню */
    .sidebar-title.sidebar-title-active {
        box-shadow: 
            inset -3px 3px 7px #5cb3f2, 
            inset 3px -3px 5px #1a82c3 !important; /* Голубые тени */
    }
}
/* ===== СТИЛИ ДЛЯ ПУТИ К ТОВАРУ (ХЛЕБНЫЕ КРОШКИ) ===== */
.product-category-path {
  margin-bottom: 0.75rem; /* Отступ снизу */
  color: #6c757d; /* Приглушенный цвет для разделителей */
  font-size: 0.95rem;
}

.product-category-path a {
  color: #4c2011; /* Фирменный коричневый цвет для ссылок */
  text-decoration: none !important;
}

.product-category-path a:hover {
  color: #2FA4E7; /* Фирменный голубой при наведении */
}

/* Подсветка заголовков выбранных секций фильтров - максимальная специфичность */
#filterModal.modal .modal-dialog .modal-content .modal-body div.mb-4.filter-section-has-selection h6.mb-3,
#filterModal.modal.fade .modal-dialog .modal-content .modal-body div.mb-4.filter-section-has-selection h6.mb-3,
#filterModal .modal-body div.mb-4.filter-section-has-selection h6,
#filterModal .modal-body .mb-4.filter-section-has-selection h6,
#filterModal .modal-content .modal-body div.mb-4.filter-section-has-selection h6,
div.mb-4.filter-section-has-selection h6,
/* Подсветка всей секции фильтров с выбранными элементами */
.filter-section-has-selection,
#filterModal .filter-section-has-selection,
#filterModal .modal-body .filter-section-has-selection,
.mb-4.filter-section-has-selection,
#filterModal .mb-4.filter-section-has-selection {
  background-color: #f8f9fa !important; /* Светло-серый фон для всей секции */
  padding: 1rem !important;
  border-radius: 0.375rem !important;
  margin-bottom: 1rem !important;
}

/* Подсветка заголовка секции */
.mb-4.filter-section-has-selection h6,
#filterModal div.filter-section-has-selection h6,
#filterModal .filter-section-has-selection h6,
.filter-section-has-selection h6,
.modal-body .filter-section-has-selection h6,
#filterModal .modal-body .filter-section-has-selection h6,
#filterModal .modal-body div.filter-section-has-selection h6.mb-3,
#filterModal .modal-body .filter-section-has-selection h6.mb-3 {
  color: #4c2011 !important; /* Фирменный коричневый цвет для заголовка */
  font-weight: 600 !important;
}

/* Стили для кнопок размеров в фильтрах - как в карточках товаров */
.size-filter-btn,
.btn.size-filter-btn {
  border: 1px solid #2FA4E7 !important;
  color: #2FA4E7 !important;
  background-color: transparent !important;
  transition: all 0.2s ease-in-out !important;
}

.size-filter-btn:hover,
.btn.size-filter-btn:hover {
  background-color: #2FA4E7 !important;
  color: #fff !important;
  border-color: #2FA4E7 !important;
}

.size-filter-btn.active,
.btn.size-filter-btn.active {
  background-color: #2FA4E7 !important;
  color: #fff !important;
  border-color: #2FA4E7 !important;
}

/* Стили для кнопок цветов в фильтрах - как кнопки размеров */
.color-filter-btn,
.btn.color-filter-btn {
  border: 1px solid #2FA4E7 !important;
  color: #2FA4E7 !important;
  background-color: transparent !important;
  transition: all 0.2s ease-in-out !important;
  display: inline-flex !important;
  align-items: center !important;
}

.color-filter-btn:hover,
.btn.color-filter-btn:hover {
  background-color: #2FA4E7 !important;
  color: #fff !important;
  border-color: #2FA4E7 !important;
}

.color-filter-btn.active,
.btn.color-filter-btn.active {
  background-color: #2FA4E7 !important;
  color: #fff !important;
  border-color: #2FA4E7 !important;
}

/* Прокрутка для модального окна фильтров */
#filterModal.modal.fade .modal-dialog.modal-dialog-scrollable,
#filterModal.modal .modal-dialog.modal-dialog-scrollable,
#filterModal .modal-dialog.modal-dialog-scrollable,
#filterModal .modal-dialog {
  max-height: 90vh !important;
  height: auto !important;
  margin: 1.75rem auto !important;
  display: flex !important;
  flex-direction: column !important;
}

#filterModal.modal.fade .modal-dialog.modal-dialog-scrollable .modal-content,
#filterModal.modal .modal-dialog.modal-dialog-scrollable .modal-content,
#filterModal .modal-dialog.modal-dialog-scrollable .modal-content,
#filterModal .modal-content {
  max-height: 90vh !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

#filterModal.modal.fade .modal-dialog.modal-dialog-scrollable .modal-content .modal-body,
#filterModal.modal .modal-dialog.modal-dialog-scrollable .modal-content .modal-body,
#filterModal .modal-dialog.modal-dialog-scrollable .modal-content .modal-body,
#filterModal .modal-body {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  flex: 1 1 auto !important;
  max-height: calc(90vh - 150px) !important;
  -webkit-overflow-scrolling: touch !important;
}

#filterModal .modal-header {
  flex-shrink: 0 !important;
}

#filterModal .modal-footer {
  flex-shrink: 0 !important;
}

/* Для мобильных устройств */
@media (max-width: 768px) {
  #filterModal.modal.fade .modal-dialog.modal-dialog-scrollable,
  #filterModal.modal .modal-dialog.modal-dialog-scrollable,
  #filterModal .modal-dialog.modal-dialog-scrollable,
  #filterModal .modal-dialog {
    max-height: 95vh !important;
    height: auto !important;
    margin: 0.5rem !important;
    display: flex !important;
    flex-direction: column !important;
  }
  
  #filterModal.modal.fade .modal-dialog.modal-dialog-scrollable .modal-content,
  #filterModal.modal .modal-dialog.modal-dialog-scrollable .modal-content,
  #filterModal .modal-dialog.modal-dialog-scrollable .modal-content,
  #filterModal .modal-content {
    max-height: 95vh !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
  }
  
  #filterModal.modal.fade .modal-dialog.modal-dialog-scrollable .modal-content .modal-body,
  #filterModal.modal .modal-dialog.modal-dialog-scrollable .modal-content .modal-body,
  #filterModal .modal-dialog.modal-dialog-scrollable .modal-content .modal-body,
  #filterModal .modal-body {
    max-height: calc(95vh - 160px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    flex: 1 1 auto !important;
  }
  
  #filterModal .modal-footer {
    flex-shrink: 0 !important;
    border-top: 1px solid #dee2e6 !important;
    background-color: #fff !important;
    position: sticky !important;
    bottom: 0 !important;
    z-index: 10 !important;
  }
}

/* ----- Страница товара: вкладки на всю ширину и крупный шрифт на мобильных ----- */
@media (max-width: 991px) {
  body.product-detail-page .product-detail-tabs-nav {
    display: block !important;
    width: 100% !important;
    margin-bottom: 0 !important;
  }
  body.product-detail-page .product-detail-tabs-nav #productDetailTabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    margin: 0 !important;
    border-bottom: 1px solid #dee2e6 !important;
  }
  body.product-detail-page .product-detail-tabs-nav #productDetailTabs .nav-item {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    text-align: center !important;
  }
  body.product-detail-page .product-detail-tabs-nav #productDetailTabs .nav-link {
    font-size: 1rem !important;
    font-weight: 500 !important;
    padding: 1rem 0.5rem !important;
    white-space: normal !important;
    line-height: 1.3 !important;
    width: 100% !important;
  }
}

/* ===== ХАРАКТЕРИСТИКИ ТОВАРА (двухколоночная сетка) ===== */
.specs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem 2rem;
}
.specs-item {
    padding: 0.35rem 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.95rem;
    line-height: 1.4;
}
@media (max-width: 767.98px) {
    .specs-grid {
        grid-template-columns: 1fr;
    }
}
/* ===== Карусель рекомендованных товаров ===== */
.recommended-section {
    padding: 0;
}
.recommended-title {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 12px;
    color: #333;
}
.recommended-carousel {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.recommended-carousel::-webkit-scrollbar {
    display: none;
}
.recommended-list {
    display: flex;
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0 0 8px 0;
}
.recommended-list .product-card {
    flex: 0 0 200px;
    width: 200px;
    min-width: 200px;
}
@media (max-width: 767px) {
    .recommended-list .product-card {
        flex: 0 0 160px;
        width: 160px;
        min-width: 160px;
    }
    .recommended-title {
        font-size: 1.1rem;
    }
}