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

/* Сохраняем светлый фон для основных элементов,
  чтобы они оставались читаемыми.
*/
.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: #ff6a00;
  --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; }

/* Иконка избранного (сердечко) */
/* Иконка в КАРТОЧКЕ КАТАЛОГА */
.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); 
}
.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); /* Прозрачность 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-success:hover, .btn-danger:hover, .btn-warning:hover, .btn-info:hover {
    opacity: 0.85;
}

/* --- СТИЛЬ ДЛЯ УВЕДОМЛЕНИЙ (СООБЩЕНИЙ) --- */
.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;
}
/* ===== ГЛОБАЛЬНЫЙ ЦВЕТ ТЕКСТА ===== */

/* 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;
    min-height: 460px;
}
.hover-zoom-main img {
    width: 100%;
    height: 450px;
    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;
    }
    .hover-zoom-main img {
        width: 100%;
        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;   /* <-- РУЧНАЯ НАСТРОЙКА (МОБ.): Расстояние между строками в названии. */
}
.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; /* <-- РУЧНАЯ НАСТРОЙКА (МОБ.): Внутренний отступ СНИЗУ у кнопки. */
}
/* Управляем отступом для основного контента на мобильных */
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; /* Центрирует иконку */
}
/* === СТИЛИ ФУТЕРА (подвала) [НОВАЯ ВЕРСИЯ С НУЛЯ] === */
    footer.bg-body-tertiary {
        padding-top: 0.6rem !important;
    }
    footer .row {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important; /* Два столбца */
        grid-auto-rows: auto !important;
        gap: 0rem 0rem !important; /* Без отступов */
    }
    /* Логотип (1-й элемент) */
    footer .row > div:nth-child(1) {
        grid-column: 1 / -1 !important; /* На всю ширину */
        grid-row: 3 !important; /* Переносим логотип в самый низ */
        margin: 0.9rem 0 0.3rem !important; /* Дополнительный отступ сверху */
    }
    /* Общий стиль для всех колонок */
    footer .row > div.col-6 {
        width: 100% !important;
        margin: 0 !important; /* Убираем ВСЕ margin */
    }
    
    /* -- Левый столбец -- */
    /* 2-й блок (Kategoriler) */
    footer .row > div:nth-child(2) {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }
    /* 4-й блок (Politikalar) */
    footer .row > div:nth-child(4) {
        grid-column: 1 !important;
        grid-row: 2 !important;
        margin-top: 0.75rem !important; /* Вертикальный отступ */
    }

    /* -- Правый столбец -- */
    /* 3-й блок (Bilgi) */
    footer .row > div:nth-child(3) {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }
    /* 5-й блок (Şikayetler ve Öneriler) */
    footer .row > div:nth-child(5) {
        grid-column: 2 !important;
        grid-row: 2 !important;
        margin-top: -4rem !important; /* Опускаем чуть ниже для тонкой настройки */
    }

    /* Стили для заголовков и ссылок */
    footer .row h5 {
        text-align: left;
        margin-bottom: 0.3rem !important;
    }
    footer .row .col-6 ul {
        margin-bottom: 0 !important;
        margin-top: 0 !important;
    }
    footer .list-unstyled a {
        line-height: 1.2;
    }
    footer .list-unstyled li {
        padding-bottom: 0.1rem;
        margin-bottom: 0 !important;
    }

    /* === СТИЛИ КОНТЕНТА ДЛЯ МОБИЛЬНОЙ ВЕРСИИ [НОВАЯ ВЕРСИЯ С НУЛЯ] === */
    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; /* Фирменный голубой при наведении */
}