:root {
    --color-default: #014825;
    --color-second: #434343;
    --color-black: #434343;
    --color-muted: #717171;
    --color-white: #ffffff;
    --color-gray: #f8f8f8;
    --color-background-notify: #014825;
    --color-background-block: #ececec;
    --transition-default: all 0.2s ;
    --color-red: #d50000;
    --border-radius: 10px;
    ---color-whatsapp:#25d366;
    --box-shadow: 1px 1px 16px rgba(0, 0, 0, 0.02);
}

* {
    /*outline: 1px solid red;*/
}

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-thumb {
    background: #6b6b6b;
    border-radius: var(--border-radius);
}

html, body {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important; /* На всякий случай, если это рамка */
}

/* Это правило находит ЛЮБОЙ самый первый элемент внутри body
   и принудительно обнуляет его верхние отступы */
body > *:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}


html {
    scrollbar-width: thin;
    scrollbar-color: var(--color-default) transparent;
    margin: 0;
    padding: 0;
    /*overflow-y: scroll;*/
}

body {
    font-family: 'Roboto', serif;
    font-weight: 400;
    line-height: inherit;
    scroll-behavior: smooth;
    background-color: #d6d6d6;
}

.cover {
    position: relative;
    overflow-x: clip;
    overflow-y: clip;
    max-width: 1920px;
    margin: 0 auto;
    background-color: var(--color-gray);
    box-shadow: -0.7734375px 2.25390625px 26px rgba(13, 13, 13, 0.16);
}

img {
    pointer-events: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.object{
    position: absolute;
}

.img-thumbnail{
    width: fit-content;
}


h1{
    color: var(--color-black);
}

a {
    color: var(--color-black);
    transition: var(--transition-default);
    outline: none;
    cursor: pointer;
}

a:focus{
    outline: none;
}

a:hover {
    transition: var(--transition-default);
    color: var(--color-default);
}

p{
    font-size: 18px;
    font-weight: 300;
}

.breadcrumb-container{
    padding-top: 20px;
}
.breadcrumb{
    font-weight: 300;
    --bs-breadcrumb-margin-bottom: 0;
}
.section_title{
    padding-top: 10px;
    margin-bottom: 20px;
}

.section_title h1{
    margin-bottom: 0;
}




.img-thumbnail{
    --bs-body-bg:var(--color-white);
    border: unset;
    border-radius: var(--border-radius);
    overflow: hidden;
    padding: 0;
}
/*::-webkit-scrollbar-thumb {*/
/*    background-color: #888; !* Цвет ползунка *!*/
/*    border-radius: 2px; !* Скругляем углы ползунка *!*/
/*}*/

/*::-webkit-scrollbar-track {*/
/*    background-color: #f1f1f1; !* Цвет фона трека *!*/
/*}*/

.form-check-input:checked {
    background-color:var(--color-default);
    border-color: var(--color-default);
}


.btn{
    border: none;
}


.btn img {
    max-width: 22px;
    filter: invert() brightness(350%) contrast(100%);
    margin-right: 5px;
}



.btn_one, .btn_one:active, .btn_one:focus{
    background: var(--color-default)!important;
    color: var(--color-white)!important;
    font-weight: 300;
    text-transform: uppercase;
    font-size: 16px;
    border-radius: 10px;
    padding: 10px 20px;
}

.btn_one:hover{
    background: var(--color-second) !important;
    color: var(--color-white);
}

.btn_one:hover img{

}

.btn_second, .btn_second:active, .btn_second:focus{
    background: var(--color-background-block);
    color: var(--color-black);
    font-weight: 300;
    text-transform: uppercase;
    font-size: 16px;
    border-radius: 10px;
    padding: 10px 20px;
}

.btn_second:hover{
    background: var(--color-black) !important;
    color: var(--color-white) !important;
}


/* 1. Превращаем <main> в гибкий контейнер */
main.cover {
    display: flex;
    flex-direction: column; /* Элементы внутри будут идти друг под другом */
    min-height: 100vh;      /* Контейнер будет занимать минимум всю высоту экрана */
}

/* 2. "Прижимаем" футер к низу этого контейнера */
main.cover footer {
    margin-top: auto; /* Это главный трюк! Заставляет футер занять все доступное пространство сверху, тем самым прижимаясь к низу. */
}


.countdown-wrapper {
    padding: 20px 10px;
    text-align: center;
    color: white;
}

.countdown-wrapper h6 {
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 10px;
}

.countdown {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 5px;
}

.countdown .countdown-block {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.countdown .time-flipper {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
    border-radius: 6px;
    padding: 5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    position: relative;
}

.countdown .time-flipper::after {
    content: '';
    position: absolute;
    top: 10%;
    left: 50%;
    width: 1px;
    height: 80%;
    background-color: #e0e0e0;
    transform: translateX(-50%);
}

.countdown .digit {
    color: #333;
    font-size: 24px;
    font-weight: bold;
    width: 18px;
    text-align: center;
    line-height: 1;
}

.countdown .label {
    font-size: 10px;
    color: #f0f0f0;
    margin-top: 5px;
    text-transform: lowercase;
}

.countdown .colon {
    font-size: 24px;
    font-weight: bold;
    color: white;
    line-height: 1.2;
}

#countdown-end-message h2 {
    color: white;
    font-size: 22px;
}

.search{
    position: relative;
}
.js-search-input{
    outline: unset !important;
    box-shadow: unset !important;
}
.js-search-input:focus{
    border-color: var(--color-default);
}
.search-results-container {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #fff;
    border: 1px solid #ddd;
    border-top: none;
    border-radius: 0 0 .25rem .25rem;
    z-index: 1000;
    max-height: 450px;
    overflow-y: auto;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    display: none;
}

/* --- ОСНОВНЫЕ ИЗМЕНЕНИЯ ЗДЕСЬ --- */

.search-result-item {
    display: flex;
    /* Vertically center the content (image and text block) */
    align-items: center;
    padding: 10px;
    text-decoration: none;
    color: #333;
    border-bottom: 1px solid #eee;
    transition: background-color 0.2s;
    /* Set a minimum height for all items */
    min-height: 72px;
    text-align: left;
}

.search-result-item:hover {
    background-color: #f5f5f5;
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-item img {
    /*width: 50px;*/
    height: 50px;
    object-fit: cover;
    margin-right: 15px;
    border-radius: 4px;
    /* Prevent image from shrinking */
    flex-shrink: 0;
}

.search-result-info {
    /* Allow text block to take up remaining space */
    flex-grow: 1;
    /* This is important to contain the overflowing text */
    overflow: hidden;
}

.search-result-info .name {
    font-weight: 600;
    margin-bottom: 2px;
    /* --- Logic for truncating long text with "..." --- */
    white-space: nowrap;     /* 1. Don't wrap text */
    overflow: hidden;        /* 2. Hide the overflow */
    text-overflow: ellipsis; /* 3. Add an ellipsis */
}

.search-result-info .sku {
    font-size: 0.85em;
    color: #777;
}

.search-no-results {
    padding: 15px;
    text-align: center;
    color: #888;
}


.notify{
    background: var(--color-background-notify);
    padding-top: 4px;
    padding-bottom: 10px;
    text-align: center;
    font-weight: 300;
    font-size: 14px;
}

.notify .container a{
    color: var(--color-white);
}

.notify .container a:hover{
    color: var(--color-white);
   text-decoration: underline;
}



/* Стили для родительского блока */
.catalog {
    position: relative; /* Обязательно для позиционирования меню */
    display: inline-block;
}

/* Стили для выпадающего меню */
.nav_catalog {
    display: none;
    position: absolute;
    background-color: #fff;
    width: 100%;

    z-index: 10;
    border-radius: 4px;
    top: 0;
    left: 0;
}

.nav_catalog a {
    color: black;
    padding: 92px 16px;
    text-decoration: none;
    display: block;
    flex-grow: 1;
    width: 100%;
    text-align: center;
    border-left: 1px solid #f1f1f1;
}

.nav_catalog a:hover {
    background-color: #f1f1f1;
}
.nav_catalog img{
    max-width: 62px;
    margin-bottom: 10px;
}
/* Этот класс будет добавляться через JS для отображения меню */
.nav_catalog.show {
    display: flex;
}

/* --- ОСНОВНЫЕ ИЗМЕНЕНИЯ В СТИЛЕ КНОПКИ --- */
.btn_catalog {
    /* ДОБАВЛЕНО: Используем Flexbox для выравнивания текста и иконки */
    display: inline-flex;
    align-items: center; /* Вертикально выравниваем по центру */
    gap: 12px;           /* Расстояние между текстом "Каталог" и иконкой */

    /* ИЗМЕНЕНО: Возвращаем стили, чтобы элемент снова был похож на кнопку, а не на иконку */
    background-color: #5d9d7b; /* Пример цвета, как на вашем первом скриншоте */
    color: white;
    padding: 12px 20px;
    border-radius: 5px;

    /* УБРАНО: Убираем фиксированные размеры, чтобы кнопка подстраивалась под контент */
    /* width: 40px; */
    /* height: 40px; */

    /* Остаются без изменений */
    border: none;
    cursor: pointer;
}

/* ИЗМЕНЕНО: Убираем центрирование иконки, так как Flexbox теперь управляет её положением */
.burger-icon {
    position: relative;
    width: 24px;
    height: 18px;
    /* margin: auto; */ /* <-- Убрали это свойство */
}

/* ================================================================
 СТИЛИ НИЖЕ ОСТАЮТСЯ ПОЛНОСТЬЮ БЕЗ ИЗМЕНЕНИЙ
================================================================
*/

/* Общие стили для всех трёх линий бургера */
.burger-icon span {
    display: block;
    position: absolute;
    width: 100%;
    height: 3px;
    /* ИЗМЕНЕНО: Цвет линий на белый для контраста с зеленой кнопкой */
    background-color: white;
    border-radius: 3px;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Расположение линий в состоянии "бургер" */
.burger-icon span:nth-child(1) {
    top: 0;
}

.burger-icon span:nth-child(2) {
    top: 50%;
    transform: translateY(-50%);
}

.burger-icon span:nth-child(3) {
    bottom: 0;
}


/* АНИМАЦИЯ В КРЕСТИК (когда у .btn_catalog есть класс .active) */
.btn_catalog, .btn_catalog:focus, .btn_catalog:active{
    font-size: 16px;
    font-weight: 400;
    text-transform: unset;
    border-radius: 10px;
    padding: 10px 20px;
}
.btn_catalog.active{
    background: var(--color-second) !important;
}
.btn_catalog.active .burger-icon span:nth-child(1) {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
}

.btn_catalog.active .burger-icon span:nth-child(2) {
    opacity: 0;
}

.btn_catalog.active .burger-icon span:nth-child(3) {
    bottom: 50%;
    transform: translateY(50%) rotate(-45deg);
}

/* Класс, который делает шапку "липкой" */
.header.fixed-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    background-color: white;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
section.plus-pudding{
    padding-top: 35px !important;
}

.plus-pudding-sidebar{
    top: 100px !important;
}

/* Класс, который скрывает меню внутри нижней части шапки */
.hide-menu {
    display: none !important;
    /* Можно добавить анимацию, чтобы исчезновение было плавным */
    /* opacity: 0; */
    /* transition: opacity 0.3s ease; */
}

/* Это необязательный, но полезный класс. Он делает .bottom flex-контейнером */
/*
==================================================================
==                                                              ==
==     ФИНАЛЬНЫЙ СТИЛЬ ДЛЯ ХЕДЕРА (ДЕСКТОП + МОБИЛЬНЫЕ)         ==
==                                                              ==
==================================================================
*/

/*
------------------------------------------------------------
-- 1. ОБЩИЕ СТИЛИ (применяются везде)
------------------------------------------------------------
*/

/* --- Стили элементов верхней строки --- */
.header .top .logo a {
    font-size: 27px !important;
    font-weight: bold;
    text-decoration: none;
    color: #333;
}
.header .top .logo img {
    max-width: 220px;
}
.header .top .search {
    width: 100%;
}
.header .top .search img {
    max-width: 25px;
}
.header .top .svyz {
    display: flex;
    column-gap: 20px;
}
.header .top .svyz .social {
    display: flex;
    flex-flow: column;
}
.header .top .svyz .social a {
    display: flex;
    align-items: center;
    gap: 3px;
}
.header .top .svyz .social .icon {
    max-width: 18px;
    display: block;
}
.header .top .phone a {
    display: block;
    cursor: pointer;
}
/* Эти широкие селекторы могут ломать стили. Оставил как у вас, но будьте осторожны. */
.header .top div a:nth-child(1) {
    font-size: 18px;
    font-weight: 400;
    text-decoration: unset;
    margin-bottom: 4px;
}
.header .top div a:nth-child(2) {
    font-size: 14px;
    font-weight: 100;
    text-decoration: underline;
}
.header .icon {
    max-width: 32px;
}
.header .top .header-cart {
    position: relative;
    padding-right: 10px;
}
.header .top .header-cart img {
    max-width: 35px;
}
.header .top .cart-badge {
    background-color: red;
    color: white;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border-radius: 50%;
    font-size: 10px;
    position: absolute;
    top: 0;
    right: 0px;
}

/* --- Стили элементов нижней строки --- */
.header .bottom {
    position: relative;
}
.header .bottom .menu {
    display: flex;
    align-items: center;
    width: 100%;
}
.header .bottom .menu ul {
    background: var(--color-background-block);
    padding: 8px 40px;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    flex-grow: 1;
    margin-left: 15px;
    list-style-type: none;
    margin: 0 0 0 15px;
}
.header .bottom .menu ul li a {
    text-decoration: unset;
    font-size: 16px;
    font-weight: 300;
}
.header .bottom .menu ul li a:hover {
    text-decoration: underline;
}
.header .bottom .buttons, .mobile-nav-panel .buttons {
    display: flex;
    gap: 10px;
}
.header .bottom .buttons .btn, .mobile-nav-panel .buttons .btn {
    font-weight: 300;
    display: flex;
    align-items: center;
}
.header .bottom .buttons .btn-shops, .mobile-nav-panel .buttons .btn-shops {
    background: #dfeee9;
    color: #78a395;
    transition: var(--transition-default);
}
.header .bottom .buttons .btn-sales, .mobile-nav-panel .buttons .btn-sales {
    background: #f0e3d9;
    color: #ab8b72;
    transition: var(--transition-default);
}
.header .bottom .buttons .btn-shops:hover, .mobile-nav-panel .btn-shops:hover {
    background: #ccddd8;
    transition: var(--transition-default);
}
.header .bottom .buttons .btn-sales:hover, .mobile-nav-panel .btn-sales:hover {
    background: #dccec4;
    transition: var(--transition-default);
}
.icon_sales, .icon_shops {
    width: 18px;
    height: 18px;
    margin-right: 3px;
    margin-top: -2px;
    mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
}
.icon_sales {
    background-color: #ab8b72;
    mask-image: url('/files/assets/icon_sales.png');
    -webkit-mask-image: url('/files/assets/icon_sales.png');
}
.icon_shops {
    background-color: #78a395;
    mask-image: url('/files/assets/icon_shops.png');
    -webkit-mask-image: url('/files/assets/icon_shops.png');
}

.mobile-nav-panel{
    display: none;
}
a.mobile-phone-icon{
    display: none !important;
}


/*
------------------------------------------------------------
-- 2. СТИЛИ ДЛЯ ДЕСКТОПА (ЭКРАНЫ 992px И БОЛЬШЕ)
------------------------------------------------------------
*/
@media only screen and (min-width: 992px) {
    .header .top {
        display: flex;
        align-items: center;
        gap: 25px;
        padding: 10px 0;
    }
    .header .top .search {
        flex-grow: 1;
        max-width: 535px;
    }
    .header-left-group, .header-right-group {
        display: flex;
        align-items: center;
        gap: 20px;
        flex-shrink: 0;
    }
    .header .top .mobile-menu {
        display: none;
    }
}



.home .main{
    padding: 20px 0;
}

.home .section_title{
    margin-bottom: 40px;
}

.home .main .grid-container {
    display: grid;
    gap: 15px;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas:
        "left-col form form"
        "item3    item4 item5";
}

.home .main .left-column {
    grid-area: left-col;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.home .main .left-column .item {
    flex-grow: 1;
}

.home .main .item-big {
    grid-area: form;
}


.home .main .item-3 {
    grid-area: item3;
}

.home .main .item-4 {
    grid-area: item4;
}

.home .main .item-5 {
    grid-area: item5;
}

.home .main .item {
    background-color: #fff;
    padding: 48px 31px 40px 74px;
    min-height: 120px;
    display: flex;
    justify-content: start;
    align-items: start;
    position: relative;
    overflow: clip;
    border-radius: 8px;
    box-shadow: 1px 1px 16px rgba(0, 0, 0, 0.02);
}

.home .main .item h4{
    font-size: 25px;
    font-weight: 400;
    color: var(--color-black);
}

.home .main .item p{
    font-size: 18px;
    font-weight: 200;
    color: var(--color-muted);
    margin-bottom: 0;
}

.home .main .item a{
    display: block;
    margin-top: 15px;
    font-weight: 200;
    color: var(--color-default);
}

.home .main .item .icon{
    position: absolute;
    padding: 20px;
    background-color: var(--color-default);
    border-radius: 50%;
    left: -11px;
    top: -11px;
    transition: var(--transition-default);
}

.home .main .item .icon img{
    max-width: 38px;
    filter: invert(100%) brightness(350%) contrast(100%);
}

.home .main .item:hover .icon{
    background-color: var(--color-black);
    transition: var(--transition-default);
}

.home .main .item-big{
    position: relative;
    padding: 0;
    display: flex;
    justify-content: end;
    box-shadow: 1.23046875px 1.00390625px 8px rgba(0, 0, 0, 0.25);
    background: linear-gradient(to right, #454545, #22784c);
    color: var(--color-white);
}

.home .main .item-big .content{
    padding: 30px;
}
.home .main .item-big h4,
.home .main .item-big h5,
.home .main .item-big p{
    color: var(--color-white);
}

.home .main .item-big .content h4{
    font-weight: bold;
    font-size: 45px;
    text-transform: uppercase;
    margin-bottom: 0px;
}

.home .main .item-big .content h5 {
    font-size: 25.5px;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.home .main .item-big .content p{
    font-weight: 300;
    font-style: italic;
    font-size: 14px;
}


.call_to_action{
    position: relative;
    width: 100%;
    display: flex;
    gap: 20px;
    margin-bottom: 26px;
    justify-content: center;
    align-items: center;
}


.home .main .item-big .content .btn_one,
.home .main .item-big .content .btn_one:focus,
.home .main .item-big .content .btn_one:active{
    background: #fff !important;
    color: var(--color-black) !important;
}

.home .main .item-big .content .btn_one:hover{
    background: var(--color-black) !important;
    color: var(--color-white) !important;
}
.home .main .item-big .content .dedline{
    display: flex;
    justify-content: center;
}

.home .main .item-big .content .countdown-wrapper {
    text-align: start;
    padding: 20px 22px;
    background-color: rgba(0, 0, 0, 0.12);
    width: fit-content;
    border-radius: 12px;
}

.home .main .item-big .content .countdown-wrapper h6 {
    font-size: 12px;
    font-weight: 300;
    margin-bottom: 10px;
}

.home .main .item-big .content .countdown{
    text-align: start;
    justify-content: start;
}

.home .main .item-big .banner{
    position: absolute;
    left: 0;
    bottom: 0;
}

.home .main .item-big .banner.banner-1{
    max-height: 320px;
}


/* ---- АДАПТАЦИЯ ДЛЯ МОБИЛЬНЫХ УСТРОЙСТВ ---- */
@media (max-width: 375px) {

    /* Перестраиваем основную сетку */
    .home .main .grid-container {
        /* Делаем сетку в одну колонку */
        grid-template-columns: 1fr;
        /* Убираем сложные именованные области, они больше не нужны */
        grid-template-areas: none;
    }

    /* "Растворяем" контейнер .left-column, чтобы его дочерние
       элементы (1 и 2) стали полноценными участниками сетки */
    .home .main .left-column {
        display: contents;
    }

    .home .main .item,
    .home .main .left-column {
        grid-area: auto; /* Сбрасываем привязку к grid-area */
    }

    /* Шаг 2: Задаем новый порядок */
    .home .main .item-big {
        grid-row: 1; /* Форма будет первой */
    }

    .home .main .item-1 {
        grid-row: 2; /* Блок 1 - второй */
    }

    .home .main .item-2 {
        grid-row: 3; /* Блок 2 - третий */
    }

    .home .main .item-3 {
        grid-row: 4;
    }

    .home .main .item-4 {
        grid-row: 5;
    }

    .home .main .item-5 {
        grid-row: 6; /* Последний */
    }
}



.home .select_catalog{
    padding: 50px 0;
}

.home .select_catalog .blocks {
    display: flex;
    flex-direction: row; /* Или row, если они должны быть в строку */
    gap: 20px;
    box-shadow: 1px 1px 16px rgba(0, 0, 0, 0.02);
}

/* Стили для самого блока-ссылки */
.home .select_catalog .block {
    display: flex; /* ✨ ГЛАВНОЕ: создаём flex-контейнер */
    flex-direction: row; /* Элементы внутри (текст и картинка) встанут в ряд */
    justify-content: space-between; /* Расталкиваем их по краям */
    align-items: center; /* Выравниваем по центру по вертикали */
    width: 100%; /* Занимает всю доступную ширину */
    padding: 20px 40px;
    background-color: var(--color-background-block); /* Светло-серый фон, как в примере */
    border-radius: 20px; /* Скруглённые углы */
    /* Убираем стандартное поведение ссылки */
    text-decoration: none;
    color: #222; /* Цвет текста */
    transition: all 0.2s ease-in-out;
    position: relative;

}

.home .select_catalog .block:hover .btn_one{
    background: var(--color-black) !important;
    color: var(--color-white) !important;
}

/* Заголовок */
.home .select_catalog .block h3 {
    font-size: 28px;
    font-weight: 300;
    margin: 0 0 24px 0; /* Отступ только снизу до кнопки */
}

.home .select_catalog .block img{
    position: absolute;
    right: 40px;
    bottom: 0px;
    max-height: 165px;
}
/* Картинка товара */
.home  .block .object {
    position: absolute; /* Ключевое свойство */
    right: 0;
    bottom: 0;
    width: 50%; /* Ограничиваем ширину, чтобы не вылезала */
    height: auto;
}


.category .section_title, .product-page .section_title{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.category .section_title .icon, .product-page .section_title .icon{
    max-width: 28px;
    filter: invert() brightness(250%) contrast(100%);
    transform: rotate(-90deg);
    margin-right: 10px;
}

/* 1. The main container for the entire page */
.catalog {
    display: grid;
    /* ✨ Create two columns: filters (left) and products (right) */
    grid-template-columns: 280px 1fr; /* Fixed width for filters, rest for products */
    column-gap: 20px;
    align-items: start; /* Prevents columns from stretching to equal height */
}

/* 2. The filter block on the left */
.filters-toggle, .close-filters {
    display: none;
}
.filters {
    height: fit-content; /* Это свойство уже есть, можно оставить */
    /*position: sticky;*/
    /*top: 20px;*/
    /*max-height: calc(100vh - 40px);*/
    /*overflow-y: auto;*/
}


/* Style for the inner filter box */
.filters .filter {
    padding: 20px;
    border-radius: 20px;
    background: #fff;
    box-shadow: 1px 1px 16px rgba(0, 0, 0, 0.02);
}


/* Общий контейнер для одного элемента фильтра (свотча или чекбокса) */
.form-check-swatch {
    padding-left: 0; /* Убираем стандартный отступ Bootstrap */
}

/* Скрываем настоящий чекбокс, он нужен только для отправки формы */
.form-check-swatch .form-check-input {
    display: none;
}

/* Стилизуем label, чтобы он правильно расположил кружок и текст */
.form-check-swatch .form-check-label {
    display: inline-flex; /* Используем flexbox для выравнивания */
    align-items: center;  /* Вертикальное выравнивание по центру */
    cursor: pointer;
    margin-bottom: 0.5rem; /* Добавляем отступ снизу, как у обычного .form-check */
}

/* Стили для самого кружка-свотча */
.form-check-swatch .swatch-circle {
    display: inline-block;
    width: 24px;
    height: 24px;
    border-radius: 50%; /* Делает свотч круглым */
    border: 1px solid #575757;
    transition: all 0.2s ease-in-out;
    background-size: cover;
    background-position: center;
    margin-right: 8px; /* Отступ между кружком и текстом */
}

/* Стиль при наведении на весь элемент */
.form-check-swatch .form-check-label:hover .swatch-circle {
    transform: scale(1.1);
    border-color: var(--color-default);
}


.form-check-swatch .form-check-input:checked + .form-check-label .swatch-circle {
    border-color: var(--color-default);
    box-shadow: 0 0 0 -0.5px #fff, 0 0 0 2px var(--color-default);
}

/* Стиль для активного (выбранного) фильтра */
.filters .form-check-swatch.active {
    background-color: #e6f7e6;
    border-radius: 5px;
    padding-top: 8px;
    margin-bottom: 9px;
    padding-left:10px;
}

/* Можно также сделать текст жирным */
.filters .form-check-swatch.active label {
    font-weight: bold;
}

.filters_top {
    display: flex;
    margin-bottom: 15px;
    background-color: #fff;
    padding: 5px 20px;
    border-radius: 10px;
}
.sort-container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px; /* Расстояние между блоком сортировки и блоком лимита */
    width: 100%;
    /* Выравнивает два дочерних блока по краям */
    justify-content: space-between;
}
.sort-group, .limit-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap; /* Для мобильных устройств */
    gap: 10px;
}
.sort-container span {
    font-weight: 500;
    white-space: nowrap;
}
.sort-container .btn {
    text-decoration: none;
    padding: 8px 15px;
    border-radius: 5px;
    font-size: 14px;
    border: 1px solid transparent;
    transition: all 0.3s ease;
    font-weight: 300;
}
.sort-container .btn.btn_one, .sort-container .btn.btn_one:active, .sort-container .btn.btn_one:focus {
    color: white;
    font-size: 14px;
    padding: 8px 15px;
    font-weight: 300;
    text-transform: unset;
}
.sort-container .btn.btn_one:hover{
    background: var(--color-default) !important;
}
.sort-container .btn.btn_second, .sort-container .btn.btn_second:active, .sort-container .btn.btn_second:focus {
    background-color: #f8f9fa;
    color: var(--color-black);
    border-color: #dee2e6;
    text-transform: unset;
}
.sort-container .btn.btn_second:hover {
    background-color: #e2e6ea !important;
    border-color: #dae0e5 !important;
    color: var(--color-black) !important;
}
.limit-group .dropdown-toggle {
    padding: 8px 15px;
    font-size: 14px;
    font-weight: 500;
}

.products {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

.home .products{
    grid-template-columns: repeat(5, 1fr);
}
.products .block {
    display: block;
    background: #fff;
    border-radius: 10px;
    text-align: center;
    box-shadow: var(--box-shadow);
    transition: all 0.3s ease;
    position: relative;
}
.products .block:hover{
    background: #eaf0ee;
    transition: var(--transition-default);
}
.products .block a{
    display: block;
    padding: 20px 10px;
    text-decoration: unset;
}
.products .block a:hover{
    color: unset;
}
.products .block img {
    max-height: 425px;
    margin-bottom: 20px;
    max-width: 201px;
    width: 100%;
}
.products .block h4 {
    text-align: center;
    font-size: 17px;
}
.products .block .price{
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
    align-items: center;
}
.products .block .price .new, .products .block .price .default{
    color: var(--color-default);
    font-weight: 400;
    font-size: 21px;
}
.products .block .price .old{
    font-size: 16px;
    color: var(--color-muted);
    text-decoration: line-through;
    font-weight: 300;
}
.products .block .product-card-image {
    position: relative;
}
.products .block .product-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(234, 240, 238, 0.8);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 3;
}
.products .block:hover .product-card-overlay, .products .block:hover .sku {
    opacity: 1;
}
.products .block .product-card-overlay .btn_one {
    width: 100%;
    padding: 10px 5px;
    border-radius: 5px;
    font-weight: 400;
    cursor: pointer;
    font-size: 14px;
}
.products .block .product-card-overlay .btn_second {
    background-color: #28a745;
    color: white;
}
.products .block .sku{
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 3;
    color: var(--color-default);
    font-size: 12px;
}
.products .block .discount-badge{
    background-color: red;
    color: #fff;
    padding: 5px;
    font-size: 12px;
    border-radius: 3px;
    font-weight: 400;
}
.products .block .product-badges {
    position: absolute;
    top: 10px;
    left: 0;
    display: flex;
    justify-content: space-between;
    flex-direction: row; /* Горизонтальное расположение */
    align-items: center; /* Выравнивание по вертикали */
    z-index: 2;
    width: 100%;
    padding: 0 20px;
}
.products .block .badge-hit-star {
    color: #fff;
    font-size: 12px;
    font-weight: 300;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    padding-left: 2px;
    background-color: var(--color-black);
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 51 48" xmlns="http://www.w3.org/2000/svg"><path fill="%23000" d="M25.5 1l6.9 14.2 15.6 2.3-11.3 11 2.7 15.5-13.9-7.3-13.9 7.3 2.7-15.5-11.3-11 15.6-2.3z"/></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 51 48" xmlns="http://www.w3.org/2000/svg"><path fill="%23000" d="M25.5 1l6.9 14.2 15.6 2.3-11.3 11 2.7 15.5-13.9-7.3-13.9 7.3 2.7-15.5-11.3-11 15.6-2.3z"/></svg>');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}
.products .block .badge-stock {
    background-color:var(--color-default);
    color: white;
    padding: 4px 12px;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 300;
}


.product-page .product_line{
    padding-bottom: 80px;
}
.product-page .product{
    align-items: start;
}

.product-page .product-gallery a{
    display: block;
}
.product-page .product-gallery{
    padding-top: 50px;
    /*background-color: var(--color-white);*/
    text-align: center;
    /*padding: 20px;*/
    border-radius: 20px;

}
.product-page .product-gallery img{
    max-width: 260px

}
.product-page .product-info{
    margin-left: 40px;
    border-radius: 20px;
    background-color: var(--color-white);
    padding:40px;
    position: relative;
}
.product-page .product-variants h5 {
    font-weight: bold;
    margin-bottom: 10px;
    font-size: 1rem;
}
.product-page .variants-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}
.product-page .variant-item {
    text-decoration: none;
    color: #333;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px; /* Расстояние между иконкой и текстом */
}
.product-page .variant-item:hover {
    opacity: 0.8;
}
.product-page .variant-item .swatch-circle {
    width: 35px;
    height: 35px;
    /*border-radius: 50%;*/
    border: 1px solid #ddd;
    background-size: cover;
    background-position: center;
    display: block;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transition: transform 0.2s ease;
}
.product-page .variant-item:hover .swatch-circle {
    /*transform: scale(1.1);*/
    border: 2px solid var(--color-default); /* Цвет рамки при наведении */
}
.product-page .variant-item .variant-name {
    font-size: 12px;
    max-width: 60px;
    line-height: 1.2;
    color: #555;
}
.product-page .products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}
.product-page .variant-item.active .swatch-circle {
    border-color: var(--color-default); /* Яркая рамка для активного элемента */
    border-width: 2px;
    transform: scale(1.1); /* Немного увеличить активный элемент */
}
.product-page span.variant-item.active .swatch-circle {
    border-color: #007bff;
    border-width: 2px;
    transform: scale(1.1);
}

.product-page .product-info .nav-pills{
    border-bottom: 1px solid #dedede;
    padding-bottom: 20px;
}

.product-page .product-info .block{
    margin-bottom: 30px;
}
.product-page .product-info .left-column{
    padding-right: 40px;
    border-right: 1px solid #f1f1f1;
}
.product-page .product-info .block.main_price{
    margin-bottom: 5px;
}
.product-page .product-info  .block.info p{
    font-weight: 200;
    font-style: italic;
    font-size: 14px;
}
.product-page .product-info .right-column{
    padding-left: 40px;
}


.product-page .product-info .badges{
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
}
.product-page .product-info .sku{
    padding: 4px 12px;
    border-radius: 5px;
    background-color: var(--color-gray);
    width: fit-content;

}
.product-page .product-info .sku small{
    font-size: 12px;
    font-weight: 300;
}
.product-page .product-info .badge-stock,
.product-page .product-info .badge-hit {
    width: fit-content;
    background-color:var(--color-default);
    color: white;
    padding: 4px 12px;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 300;
}
.product-page .product-info .badge-hit{
    background-color: var(--color-black);
}



.product-page .product-info .block.product-variants{
    margin-bottom: 10px;
}

.product-page .product-info .block.product-variants:last-child{
    margin-bottom: 30px;
}
.product-page .product-info .block h5{
    font-weight: 400;
}
.product-page .product-info .price{
    display: flex;
    gap: 5px;
    align-items: center;
}
.product-page .product-info .price .new, .product-page .product-info .price .default{
    color: var(--color-default);
    font-weight: 400;
    font-size: 29px;
}
.product-page .product-info .price .old{
    font-size: 16px;
    color: var(--color-muted);
    text-decoration: line-through;
    font-weight: 300;
}
.product-page .product-info .price .discount-badge{
    background-color: red;
    color: #fff;
    padding: 5px;
    font-size: 12px;
    border-radius: 3px;
    font-weight: 400;
}

.product-page .product-info .component{
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: space-between;
}

.product-page .product-info .wa_get{
    margin-bottom: 30px;
}
.product-page .product-info .wa_get p{
    font-size: 16px;
    font-weight: 300;
}
.product-page .product-info .wa_get .btn_one.btn_wa img{
    max-width: 22px;
    margin-right: 5px;
    filter: invert() brightness(350%) contrast(100%);
}
.product-page .product-info .wa_get .btn_one.btn_wa,
.product-page .product-info .wa_get .btn_one.btn_wa:active,
.product-page .product-info .wa_get .btn_one.btn_wa:focus{
    background-color: var(---color-whatsapp) !important;
    display: flex !important;
    align-items: center !important;
    width: fit-content !important;
    font-size: 15px !important;
}

.product-page .product-info .form-check{
    border-bottom: 1px solid #f1f1f1;
    padding-bottom: 10px;
}

.product-page .product-info .form-check:last-child{
    padding-bottom: unset;
    border: unset;
}

.product-page .product-info #price-calculator .block:first-child{
    border-radius: 10px;
    border: 1px dashed #b3b3b3;
    padding: 10px;
}


.product-page .product-info .product-attributes li{
    border-bottom: 1px solid #f1f1f1;
    padding: 5px 0;
    font-weight: 300;
}

.product-page .product-info .product-attributes li b{
    font-weight: 500;
}

.product-page .product-info .card_footer{
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 10px;
}
.product-page .product-info .card_footer .btn-outline-secondary{
    background-color: #dddedd;
}

.product-page .product-info .card_footer .btn-outline-secondary:hover{
    background-color: color(srgb 0.726 0.88 0.8012)
}

.product-page .product-info .card_footer .btn_one{
    font-size: 14px;
    padding: 7px 20px;
}
.product-page .product-info .card_footer .form-label{
    font-size: 12px;
    font-weight: 300;
}



.product-page .triggers{
    padding-bottom: 80px;
}

.product-page .triggers .container {
    display: grid;
    /* Creates 5 columns of equal width */
    grid-template-columns: repeat(3, 1fr);
    /* Adds a 20px gap between the items */
    gap: 20px;
}

/* Basic styling to make the items look like cards */
.product-page .triggers .item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;

    border-radius: 8px;

}
.product-page .triggers .item h4{
    font-size: 20px;
}

.product-page .triggers .item p{
    font-size: 16px;
    font-weight: 300;
}
.product-page .triggers .item .icon img {
    width: 40px; /* Adjust icon size as needed */
    height: auto;
}


.product-page .products{
    display: block;
}

footer{
    padding-top: 100px;
}
footer .content{
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    padding:  10px 20px;
    background: #fff;
}



/* Container for the promotions grid */
.promotions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 30px;
}

/* Individual promotion card */
.promo-card {
    display: flex;
    flex-direction: column;
    background-color: var(--color-white);
    border-radius: 8px;
    box-shadow: var(--box-shadow);
    overflow: hidden;
}



.promo-card-image img {
    width: 100%;
    /*height: 220px;*/
    object-fit: cover;
    display: block;
}

.promo-card-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Pushes footer to the bottom */
}

.promo-card-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.promo-card-description {
    color: #555;
    line-height: 1.6;
    flex-grow: 1; /* Takes up available space */
    margin-bottom: 20px;
}

.promo-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /*border-top: 1px solid #eee;*/
    /*padding-top: 15px;*/
    margin-top: auto; /* Pushes to the bottom */
}

.promo-card-deadline {
    color: #777;
    font-size: 0.9em;
}

/* Media query for smaller screens */
@media (max-width: 768px) {
    .promotions-grid {
        grid-template-columns: 1fr;
    }
}


.shops-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 30px;
}

.shop-card-link {
    display: block; /* Makes the link fill the grid area */
    text-decoration: none; /* Removes the default blue underline */
    color: inherit; /* Makes text inside the link inherit its color */
}

.shop-card-link:hover {
    color: inherit; /* Prevents text from turning blue on hover */
}

.shop-card {
    background-color: var(--color-white);
    border-radius: 12px;
    box-shadow: var(--box-shadow);
    padding: 25px;
    display: flex;
    flex-direction: column;
}


.shop-card .top{
    margin-bottom: 20px;
}
.shop-card-main {
    position: relative;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 20px;
    margin-bottom: 20px;
    padding-right: 40px;
}

.shop-card-badge {
    background-color: #eaf7f0;
    color: #28a745;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 300;
    display: inline-block;

}

.shop-card-rating {
    font-weight: 300;
    font-size: 16px;
    display: flex;
    flex-direction: column;
}

.shop-card-rating .badge{
    background-color: #eaf7f0;
    color: #28a745;
    padding: 4px 10px;
    border-radius: 20px;

    display: inline-block;
    margin-bottom: 2px;
}


.shop-card-metro {
    font-size: 0.95em;
    color: #555;
    margin-bottom: 10px;
}
.metro-icon {
    color: #D43634; /* Moscow Metro Red */
}

.shop-card-name {
    font-size: 21px;
    font-weight: 600;
    margin-bottom: 5px;
}

.shop-card-address {
    font-size: 16px;
    font-weight: 300;
    color: #666;
    margin-bottom: 0;
}

.shop-card-details {
    margin-bottom: 25px;
}

.shop-detail-item {
    display: flex;
    flex-direction: column;
    font-size: 0.95em;
    margin-bottom: 10px;
}
.shop-detail-item strong {
    color: #333;
    margin-bottom: 3px;
}
.shop-detail-item span,
.shop-detail-item a {
    color: #666;
    text-decoration: none;
}
.shop-detail-item a:hover {
    color: #000;
}

.shop-card-actions {
    margin-top: auto; /* Pushes actions to the bottom */
}

.shop-card-actions .btn_one{
    width: 100%;
    margin-bottom: 20px;
}
    /*.shop-card-actions .btn-block {*/
/*    width: 100%;*/
/*    padding: 12px;*/
/*    font-size: 1rem;*/
/*    margin-bottom: 20px;*/
/*}*/



.shop-card-actions .route-buttons .btn{
    display: flex;
    align-items: center;
    justify-content: center;
}
.shop-card-actions .route-buttons .btn img{
    filter: unset;
    max-width: 16px;
}

.route-builder {
    text-align: center;
}

.route-builder small {
    display: block;
    margin-bottom: 8px;
    color: #888;
}

.route-buttons {
    display: flex;
    gap: 10px;
}

.route-buttons .btn {
    flex-grow: 1;
}

.cart-items-list { border-radius: var(--border-radius); background-color: var(--color-white); }
.cart-item { display: flex; align-items: center; padding: 15px;  }
.cart-page .info{
    display: flex;
    align-items: center;
    padding: 15px;
    justify-content: space-between;
    flex-grow: 1;
}
.cart-item:last-child { border-bottom: none; }
.cart-item-image img { width: 80px; object-fit: cover; border-radius: 4px; }
.cart-item-details { flex-grow: 1; margin: 0 15px; }
.cart-item-name { font-weight: 600; text-decoration: none; color: #333; }
.cart-item-name:hover { color: #000; }
.cart-item-accessories { color: #777; font-size: 0.85em; display: block; }
.cart-item-price-per-item { font-size: 0.9em; color: #555; margin-top: 5px; }
.cart-item-quantity { display: flex; align-items: center; }
.cart-item-total { font-weight: bold; font-size: 1.1em; width: 120px; text-align: right; }
.cart-item-remove .btn-remove { background: none; border: none; font-size: 1.2em; cursor: pointer; color: #999; }
.btn-remove:hover { color: #d9534f; }
.order-summary { background-color: #fdf5f5; padding: 25px; border-radius: 8px; }
.summary-row, .summary-total { display: flex; justify-content: space-between; margin-bottom: 15px; }
.summary-total { font-size: 1.2em; }
.cart-empty { padding: 50px 0; }

.cart-page  .btn-outline-secondary{
    background-color: #dddedd;
}

.cart-page  .btn-outline-secondary:hover{
    background-color: color(srgb 0.726 0.88 0.8012)
}


body.page .content{
    background-color: var(--color-white);
    border-radius: 20px;
    padding: 20px 25px;
    box-shadow: var(--box-shadow);
}

body.page .sidebar{
    top: 0;
    position: sticky;
}

body.page .sidebarForm{
    padding-left: 40px;
}


/* ====== MODAL ====== */
body.modal-open .cover{
    padding-right: 11px;
}


.modal-content{
    position: relative;
    padding-bottom: 10px;
}
.modal .btn-close{
    position: absolute;
    top: 10px;
    right: 10px;
    background: #000;
    z-index: 10;
    color: #fff;
    line-height: 1px;
    padding: 5px;
}
.modal .title {
    color: #000;
    text-align: center;
    margin-bottom: 20px;
}
.modal .title h5{
    font-size: 30px;
    text-transform: uppercase;
    font-weight: 800;
}
.form{
    background-color: #e4eeeb;
    padding: 30px;
    border-radius: var(--border-radius);
}
.form .title h4{
    font-size: 22px;
    font-weight: 400;
    text-align: center;
    margin-bottom: 20px;
}
.form .form-floating{
    margin-bottom: 12px;
}
.form .btn{
    margin-bottom: 8px;
}
p.politics{
    text-align: center;
    font-size: 12px
}


.zamer-dostavka-i-montage-page .tab-pane{
    padding-top: 20px;

}


.nav-tabs .nav-link{
    color:var(--color-default);
}

.modal .form .form-floating{
    margin-bottom: 12px;
}
.modal .form .btn{
    margin-bottom: 8px;
}


.pagination{
    --bs-pagination-color: var(--color-default);
    --bs-pagination-hover-color: var(--color-second);
    --bs-pagination-focus-color: var(--color-default);
    --bs-pagination-active-bg: var(--color-default);
    --bs-pagination-active-border-color:  var(--color-default);
}