:root {
	--brand-red: #f80000;
	--bg-color: #f6f6f6;
	--text: #000000;
}


.btn-outline-danger {
    --bs-btn-color: var(--brand-red);
    --bs-btn-border-color: var(--brand-red);
    --bs-btn-hover-bg: var(--brand-red);
    --bs-btn-hover-border-color: var(--brand-red);
    --bs-btn-active-bg: var(--brand-red);
    --bs-btn-active-border-color: var(--brand-red);
    --bs-btn-disabled-color: var(--brand-red);
    --bs-btn-disabled-border-color: var(--brand-red);
}

.text-danger, .text-danger span {
    color: var(--brand-red) !important;
}
.bg-danger {
    background-color: var(--brand-red) !important;
}


.navbar-toggler:focus {
    /* 0 0 0 1px - это толщина 1 пиксель. */
    /* black - цвет (можно заменить на red или rgba(0,0,0,0.5)) */
    box-shadow: none; 
}




.line-red {
	width: 60px;
	height: 3px;
	background-color: var(--brand-red);
}


body {
	font-family: 'Inter', sans-serif;
    font-size:17px;
    color:var(--text);
}

/* Remove outline on the forms and links */
:active, :hover, :focus {
    outline: 0 !important;
    outline-offset: 0 !important;
    outline: none !important;
}

.clearfix::after {
    display: block;
    clear: both;
    content: " ";
    font-size: 0;
    height: 0;
    visibility: hidden;
}



/***  FOOTER  ***/
    .footer-link {
        color: rgba(255, 255, 255, 0.5);
        text-decoration: none;
        transition: color 0.3s ease, padding-left 0.3s ease;
    }
    .footer-link:hover {
        color: #fff;
        padding-left: 5px;
    }
    .hover-white:hover {
        color: #fff !important;
        text-decoration: underline !important;
    }
    .social-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
    }
/***  end FOOTER  ***/



h1, h2 {
  font-weight: 700;
}

h2 { font-size: clamp(1.2rem, 4vw, 3.0rem); }
h3 { font-size: clamp(1rem, 4vw, 1.5rem); }
h4 { font-size: clamp(1rem, 4vw, 1.2rem); }

.accordion-body h2 { font-size: clamp(1rem, 4vw, 1.2rem); }

/* 2. Делаем спан "базой" для полоски */
.navbar-nav .nav-link span {
    position: relative; /* Чтобы полоска позиционировалась относительно текста */
    display: inline-block; /* Чтобы спан вел себя как блочный элемент */
    padding: 8px 0 3px 0; /* Отступ от букв до полоски */
}

/* 3. Рисуем полоску внутри спана */
.navbar-nav .nav-link span::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0%; /* Скрыта */
    height: 3px; /* Ваша толщина */
    background-color: #f80000;
    transition: width 0.3s ease-in-out;
}

/* 4. При наведении на ССЫЛКУ, расширяем полоску у СПАНА */
.navbar-nav .nav-link:hover span::after {
    width: 100%;
}

/* Активный пункт */
.navbar-nav .nav-link.active span::after {
    width: 100%;
}





.bc-cart-w-btn-show-cart {
    height: 63px;
}
.bc-cart-w-btn-show-cart-count__ico {
    top: 10px;
}
.bc-cart-w-btn-show-cart-count {
    top: 10px;
}



.btn-danger { background-color:#f80000; text-shadow:none !important; }

.blockquote-footer::after {
    content: "— ";
}


.navbar-toggler {
    padding: 0.25rem 0.5rem;
}

.navbar-toggler-icon {
    width: 1.2em;
    height: 1.2em;
}



.nav-link { font-size:13px; }

.navbar-bg { background-color:#f6f6f6; }

.img-logo { height:50px; }
.img-logo-bottom { height:30px; }

.tel-width { width:44px; padding-left:4px; }

.icon-tel { width:40px; height:40px; }


        .carousel-item img {
            object-fit: cover; /* Чтобы фото не сплющивалось */
        }

        .carousel-indicators [data-bs-target] {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            margin: 0 6px;
            background-color: transparent;
            border: 2px solid #fff;
            opacity: 0.7;
        }

        .carousel-indicators .active {
            background-color: #fff;
            opacity: 1;
        }

        .carousel-caption {
            text-shadow: 2px 2px 8px rgba(0,0,0,0.7);
        }

.block-carousel { bottom:auto; max-width:50%; }



        /* Кастомные стили для красных акцентов */
        .brand-accent-color {
            color: var(--brand-red);
        }
        
        /* Стилизация буллита (маркера) */
        .custom-bullet {
            min-width: 12px;
            height: 12px;
            background-color: var(--brand-red);
            border-radius: 50%; /* Круглый буллит */
            margin-top: 8px; /* Выравнивание по первой строке текста */
            margin-right: 15px;
            box-shadow: 0 0 10px rgba(248, 0, 0, 0.5); /* Небольшое свечение */
        }

        /* Чтобы картинки красиво заполняли пространство */
        .feature-img {
            object-fit: cover;
            width: 100%;
            height: 100%;
            min-height: 300px;
        }

/* Стиль для блока с главной мыслью */
.main-thought-rounded {
    position: relative;
    background: rgba(255, 255, 255, 0.05); /* Полупрозрачный фон */
    padding: 2.0rem 6rem; /* Большие отступы внутри, чтобы текст не наезжал на скобки */
}

/* Общие стили для левой и правой скобки */
.main-thought-rounded::before,
.main-thought-rounded::after {
    content: "";
    position: absolute;
    top: 50%; /* Центрируем по вертикали */
    transform: translateY(-50%);
    width: 10px; /* Ширина дуги скобки */
    height: 70%; /* Высота скобки (не на всю высоту блока, чтобы было стильнее) */
    border: 5px solid #f80000; /* Цвет и толщина скобки */
    transition: all 0.3s ease;
}

/* Левая скобка ( */
.main-thought-rounded::before {
    left: 40px; /* Отступ от левого края */
    border-right: none; /* Убираем правую границу */
    border-radius: 20px 0 0 20px; /* Скругляем только левые углы */
}

/* Правая скобка ) */
.main-thought-rounded::after {
    right: 40px; /* Отступ от правого края */
    border-left: none; /* Убираем левую границу */
    border-radius: 0 20px 20px 0; /* Скругляем только правые углы */
}



/* Адаптив для телефонов: уменьшаем отступы и размер скобок */
@media (max-width: 768px) {
    .main-thought-rounded {
        padding: 3rem 3.5rem;
    }
    .main-thought-rounded::before,
    .main-thought-rounded::after {
        width: 12px;
        border-width: 2px;
    }
	.main-thought-rounded::before {
  	  left: 20px; /* Отступ от левого края */
	}
	.main-thought-rounded::after {
    	right: 20px; /* Отступ от правого края */
	}
}





/* 1. Базовая высота (для мобильных телефонов) */
/* Это будет работать на ВСЕХ экранах МЕНЬШЕ 576px */
.carousel-item img {
    height: 200px; /* Достаточно для телефона */
}
.block-carousel { top:5%; }

/* 2. Для планшетов (от 576px и выше) */
@media (min-width: 576px) {
    .carousel-item img {
        height: 350px; 
    }
	.block-carousel { top:15%; }
}

/* 3. Для ноутбуков и десктопов (от 992px и выше) */
@media (min-width: 992px) {
    .carousel-item img {
        height: 500px; /* Или 700px, 80vh и т.д. */
    }
	.block-carousel { top:25%; }
}

/* 4. Для огромных экранов (от 1400px и выше) */
@media (min-width: 1400px) {
    .carousel-item img {
        height: 750px; 
    }
}






/* --- КУКИ --- */

/* --- СТИЛИ ДЛЯ КОРОТКОЙ ПЛАШКИ ВНИЗУ --- */
.cookies-popup {
    bottom: 24px;
    width: 328px;
    left: 50%;
    display: flex;
    justify-content: space-between;
    border-radius: 10px;
    font-size: 14px;
    line-height: 20px;
    display: none; 
    position: fixed;
    background-color: var(--brand-red);
    color: #fff;
    padding: 15px 20px;
    box-sizing: border-box;
    z-index: 9998; /* Чуть меньше, чем у модалки */
    transform: translateX(-50%);
}

@media screen and (max-width: 991px) {
    .cookies-popup {
        transform: none;
        left: 75px;
        right: 75px;
        width: auto;
        max-width: 328px;
        margin: 0 auto;
    }
}

.cookies-popup.open-cookie {
    display: block;
}


.cookies-short-text {
    display: flex;
    justify-content: space-between; /* Текст налево, кнопка направо */
    align-items: center; /* Центрируем по вертикали */
    gap: 20px; /* Отступ между текстом и кнопкой */
    width: 100%;
}

/* Контейнер, который сближает текст и кнопку */
.cookies-container {
    max-width: 300px;
    margin: 0 auto;
    width: 100%;
}

/* Оборачиваем текст и ссылку в отдельный контейнер для правильного поведения */
.cookies-text-content {
    flex-grow: 1; /* Позволяем тексту занимать всё свободное место */
    line-height: 1.4; /* Улучшаем читаемость многострочного текста */
}

.cookies-more-link {
    color: #fff;
    text-decoration: underline;
}

.cookies-popup-btn {
    background-color: #fff;
    color: var(--brand-red);
    border: none;
    border-radius: 5px;
    padding: 5px 10px;
    cursor: pointer;
    white-space: nowrap;
}
.cookies-popup-btn.red {
    background-color: var(--brand-red);
    color: #fff;
    border: none;
    padding: 8px 15px;
    cursor: pointer;
    white-space: nowrap;
}

.small-h3 { font-size:1.2rem; }

/* --- СТИЛИ ДЛЯ МОДАЛЬНОГО ОКНА --- */

/* Темный фон на весь экран */
.cookies-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); /* 50% черного */
    z-index: 9999; /* Поверх всего сайта */
    
    /* Используем Flexbox для центрирования окна внутри */
    display: flex; 
    justify-content: center;
    align-items: center;
    
    /* Отступы по бокам, чтобы окно не прилипало к краям на узких экранах */
    padding: 20px; 
    box-sizing: border-box;
}

/* Само белое окно по центру */
.cookies-modal-window {
    background-color: #fff;
    color: #333;
    padding: 30px;
    border-radius: 8px;
    max-width: 600px; /* Максимальная ширина на больших экранах */
    width: 100%;
    position: relative;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    font-family: sans-serif;
}

.cookies-modal-window a {
    color: var(--brand-red);
}

.cookies-modal-window h3 {
    margin-top: 0;
}

/* Крестик закрытия */
.cookies-modal-close {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 28px;
    font-weight: bold;
    color: #888;
    cursor: pointer;
    line-height: 1;
}

.cookies-modal-close:hover {
    color: #333;
}