html {
    overflow-y: scroll !important;
}

body { 
    background-color: transparent; /* Делаем фон body прозрачным, чтобы фон из контейнера был виден */
    font-family: 'Exo 2', sans-serif;
    font-weight: 500;
} 

body.modal-open {
    padding-right: 0 !important;
}

/* Если у вас есть фиксированная шапка (navbar) */
.fixed-top, .sticky-top {
    padding-right: 0 !important;
}

.welcome-screen-content {
    max-width: 500px;
}

#promotion-image {
    max-height: 90px;
    max-width: 90px;
    object-fit: contain;
    mix-blend-mode: multiply;
}
#background-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1; /* Помещаем фон за всем контентом */
    background-color: #9e9e9e; /* Устанавливаем серый фон здесь */
    background-image: url(../img/bg-fon.webp);
    /*background-size:contain;*/
    background-position: center; 
}

/* Дополнительный стиль для контейнера логотипа */
.image-container {
    max-width: 300px; /* Ограничиваем максимальную ширину логотипа */
}

/* Добавленные стили для отступа, чтобы фиксированные заголовки не перекрывали контент */
/* Высота логоблока (примерно 80px) */
#logo-block { 
    height: 80px; 
    z-index: 1031;
    width: 90%;
    left: 5%;
    right: 5%;
    border-radius: .5rem .5rem 0 0; /* Скругляем только верхние углы */
} 
/* Высота nav (примерно 56px). Установим его фиксированно на 80px. */
#main-nav { 
    top: 80px;
    padding-top: 0;
    padding-bottom: 0; 
    z-index: 1030;
    width: 90%;
    left: 5%;
    right: 5%;
    /* Добавляем transition для плавного скрытия/появления */
    transition: top 0.3s ease-in-out; 
} 
/* Отступ для основного контента: высота логоблока + высота навигации */
main { 
    padding-top: 96px;
} 

/* Стили для блока с логотипом */
.logo-container { display: flex; align-items: center; }
.logo-image-wrapper { flex-shrink: 0; }
.logo-separator { width: 4px; height: 40px; background-color: #e85300; }
.logo-text-container { display: flex; flex-direction: column; justify-content: center; padding-left: 20px; }
.logo-main-text { font-size: x-large; color: #e85300; text-align: left; font-weight: 800; }
.logo-sub-text { font-size:small; color: #000; }

/* Дерево */
.tree-list { list-style-type: none; padding-left: 1.2rem; }
.tree-item { margin-bottom: 4px; }
.tree-toggle { cursor: pointer; transition: color 0.2s; }
.tree-toggle:hover { color: #0d6efd; }

/* Стили иконок для дерева */
.tree-toggle::before { content: "\F285"; font-family: 'bootstrap-icons'; display: inline-block; margin-right: 5px; } /* chevron-right */
.tree-toggle.expanded::before { content: "\F282"; } /* chevron-up */
.tree-toggle.empty::before { content: "\F285"; color: #6c757d; } /* chevron-right (серый) */

.category-link { text-decoration: none; color: #212529; cursor: pointer; }
.category-link:hover, .category-link.active { color: #0d6efd; font-weight: bold; }

/* Таблица */
.table-img { width: 50px; height: 50px; object-fit: contain; mix-blend-mode: multiply; }
.sortable-header { cursor: pointer; user-select: none; }

/* Позволяет тексту в ячейке с названием товара переноситься */
.product-name-cell {
    word-break: break-word;
}

/* Модальное окно */
.modal-product-image { 
    max-height: 300px; 
    object-fit: contain; 
    mix-blend-mode: multiply;
    transition: transform 0.2s ease-in-out; /* Плавный переход */
    cursor: zoom-in;
}
.modal-product-image:hover {
    transform: scale(2); /* Увеличиваем изображение еще больше */
    background-color: white; /* Добавляем белый фон */
    mix-blend-mode: normal; /* Убираем прозрачность */
    position: relative; /* Нужно для z-index */
    z-index: 10; /* Отображаем поверх другого контента */
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15); /* Добавляем тень для объема */
}
.modal-scrollable-content {
    max-height: 40vh; /* Ограничиваем высоту прокручиваемого блока */
    overflow-y: auto;   /* Добавляем вертикальную прокрутку при переполнении */
    overflow-x: hidden; /* Убираем горизонтальную прокрутку */
}
#modal-product-name {
    overflow-wrap: break-word; /* Добавляем перенос для очень длинных слов */
}

/* Выравнивание для значений характеристик в модальном окне */
.param-value { text-align: right; }

/* Приветственный экран */
#welcome-screen {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: white; z-index: 2000; /* Выше всех элементов */
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}

/* Дополнительный стиль для переключения фильтров */
.filter-toggle-header {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.filter-toggle-header .bi-chevron-down {
    transition: transform 0.3s;
}
.filter-toggle-header[aria-expanded="true"] .bi-chevron-down {
    transform: rotate(180deg);
}
.vendor-filters-container { max-height: 20vh; overflow-y: auto; }
.consumable-type-filters-container { max-height: 20vh; overflow-y: auto; }
.originality-filters-container { max-height: 20vh; overflow-y: auto; }

/* Утилиты */
.cursor-pointer { cursor: pointer; }

/* Стили для основного контейнера контента */
main > .container {
    background-color: #fff; /* Белый фон только для контентной части */
    padding: 1.5rem; /* Внутренние отступы */
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15); /* Тень для объема */
    max-width: 90%;
}

footer {
    font-size: 0.9rem;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    border-radius: 0 0 .5rem .5rem; /* Скругляем только нижние углы */
}

.footer-bg {
    background-color: #e9ecef; /* Более темный оттенок серого для лучшего контраста */
}

/* Пользовательский цвет для основного акцента */
.bg-primary {
    background-color: #e85300 !important;
    background-image: url(../img/bg-nav.webp);
    background-position: center;
    background-repeat: no-repeat; 
}
.category-link.active {
    color: #e85300 !important;
}
.category-link:hover {
    color: #e85300 !important;
}
.bg-warning {
    background-color: #e85300 !important;
}
.btn-outline-light {
    color: #e85300 !important;
    border-color: #d1d4d8 !important;
    padding-top: 3px;
    padding-bottom: 3px;
}
/* Пользовательский цвет для иконок в шапке */
#logo-block .bi-telephone-fill,
#logo-block .bi-envelope-fill {
    color: #e85300 !important;
}

/* Стиль для скрытия поля-ловушки для ботов */
.honeypot-field {
    position: absolute;
    left: -5000px;
}

/* Стили для анимации добавления в корзину */
.fly-to-cart {
    position: fixed;
    z-index: 2000;
    border-radius: 50%;
    transition: all 0.7s ease-in-out;
    object-fit: contain;
    mix-blend-mode: multiply;
}

@keyframes cart-shake {
    0%, 100% { transform: scale(1); }
    25% { transform: scale(1.2) rotate(-5deg); }
    75% { transform: scale(1.2) rotate(5deg); }
}

.cart-shake-animation {
    animation: cart-shake 0.4s ease-in-out;
}

/* Стили для рекламного блока */
#promotion-block {
    font-size: 1.05rem; /* Немного увеличиваем весь текст в блоке */
}
#promotion-block .alert-link {
    cursor: pointer;
    text-decoration: underline;
    text-decoration-style: dotted;
}


 /* Изменение цвета галочек выбора для фильтов */
.form-check-input:checked {
    background-color: #e85300 !important;
    border-color: #e85300 !important;
}

.form-check.ps-4 {
    padding-left: 1.9rem !important;
}
/* Пользовательские стили для всплывающей подсказки */
.tooltip.custom-tooltip .tooltip-inner {
    background-color: #ffffff; /* Светло-серый цвет фона */
    color: #212529; /* Темный цвет текста для контраста */
    max-width: 500px; /* Увеличиваем максимальную ширину */
    padding: 1rem; /* Увеличиваем внутренние отступы */
    font-size: 1rem; /* Увеличиваем размер шрифта */
    border: 1px solid #000000; /* Добавляем рамку */
    opacity: 1; /* Убираем прозрачность */
}
.tooltip.custom-tooltip {
    opacity: 1; /* Убираем прозрачность со всего тултипа */
}
.tooltip.custom-tooltip.bs-tooltip-bottom .tooltip-arrow::before {
    border-bottom-color: #f8f9fa; /* Цвет стрелки в цвет фона */
}

/* Адаптивность для шапки на маленьких экранах */
@media (max-width: 991.98px) {
    .logo-separator,
    .logo-text-container {
        display: none; /* Скрываем разделитель и текстовый блок */
    }

    .logo-image-wrapper .image-container {
        max-width: 180px; /* Уменьшаем максимальную ширину контейнера логотипа */
    }

    /* Уменьшаем шрифт для блока контактов */
    #logo-block .d-flex.flex-column.align-items-start {
        font-size: 0.75rem; /* Уменьшаем базовый размер шрифта для этого блока */
    }

    /* Убираем отступ у блока с контактами на мобильных */
    .d-flex.flex-column.align-items-start.me-4 {
        margin-right: 0 !important;
    }

    /* Убираем фоновое изображение для основной навигации на мобильных */
    #main-nav.bg-primary {
        background-image: none;
    }

    /* Allow the search/contacts container to shrink */
    #logo-block .d-flex.align-items-center.flex-shrink-0 {
        flex-shrink: 1 !important;
        min-width: 0;
    }
}

body.modal-open {
    overflow: hidden;
}

/* 
  Фикс сдвига влево для кастомной шапки при открытии модального окна.
  На разрешениях < 1024px мы отменяем добавленный Bootstrap'ом 
  padding-right для наших элементов, возвращая им исходное состояние.
*/
@media (max-width: 1023.98px) {
  body.modal-open #logo-block,
  body.modal-open #main-nav,
  body {
    padding-right: 0 !important;
  }
}

/* --- Cart Modal Fixes --- */

/* 1. Widen the modal on larger screens (lg and up) */
@media (min-width: 992px) {
  #cartModal .modal-lg {
    max-width: 900px; /* default is 800px */
  }
}

/* 2. On smaller screens, use more screen width and prevent content overflow */
@media (max-width: 991.98px) {
  #cartModal .modal-dialog {
    max-width: 95%;
  }
  #cartModal .modal-body {
    overflow-x: auto;
  }
}

/* --- Responsive Logo --- */
.logo-mobile {
    display: none;
}

@media (max-width: 599.98px) {
    .logo-main {
        display: none;
    }
    .logo-mobile {
        display: block;
    }
    /* Adjust container size for the smaller mobile logo */
    .logo-image-wrapper .image-container {
        max-width: 60px;
    }
}

.rotate-icon {
    animation: spin 0.5s linear;
}
@keyframes spin { 100% { transform: rotate(360deg); } }

/* Убираем стандартный разделитель (слэш) */
.breadcrumb-item + .breadcrumb-item::before {
    font-family: "bootstrap-icons" !important; /* Указываем шрифт иконок */
    font-weight: 900 !important; /* Жирный шрифт */
    content: "\F27B" !important; /* Unicode код иконки bi-chevron-compact-right */
    color: #b94202    /* Цвет иконки */
}