/* Красная линия под заголовками */
        .title-underline {
            width: 60px; 
            height: 3px; 
            background-color: var(--brand-red);
            margin-bottom: 1.5rem;
        }

        /* Стили для изображений в шахматном порядке */
        .story-img {
            height: 400px;
            width: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
        }
        
        .img-wrapper {
            overflow: hidden; /* Чтобы при увеличении фото не вылезало за границы */
        }
        
        .img-wrapper:hover .story-img {
            transform: scale(1.05); /* Легкий зум при наведении */
        }

        /* Цитата */
        .quote-box {
            background-color: #f8f9fa;
            border-left: 5px solid var(--brand-red);
            border-right: 5px solid var(--brand-red);
        }

        .story-caption {
            text-align: center;
            color: #6c757d;
            font-size: 0.9rem;
            margin-top: 10px;
            font-style: italic;
        }

        /* Списки */
        .custom-list {
            list-style: none;
            padding-left: 0;
        }
        .custom-list li {
            position: relative;
            padding-left: 20px;
            margin-bottom: 5px;
            font-size: 1.1rem;
        }
        .custom-list li::before {
            content: "•";
            color: var(--brand-red);
            font-weight: bold;
            font-size: 1.5rem;
            position: absolute;
            left: 0;
            top: -5px;
        }


        /* Стиль для иконок в карточках */
        .icon-box {
            width: 60px;
            height: 60px;
            background-color: rgba(0, 0, 0, 0.1); /* Прозрачный красный */
            color: var(--brand-red);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            margin-bottom: 1rem;
            transition: all 0.3s ease;
        }

        /* Эффект наведения на карточку контакта */
        .contact-card:hover .icon-box {
            background-color: var(--brand-red);
            color: white;
            transform: rotateY(360deg); /* Иконка прокрутится */
        }

        /* Стилизация формы */
        .form-control:focus, .form-select:focus {
            border-color: var(--brand-red);
            box-shadow: 0 0 0 0.25rem rgba(248, 0, 0, 0.25);
        }


        /* Аккордеон (FAQ) */
        .accordion-button:not(.collapsed) {
            color: var(--brand-red);
            background-color: rgba(0, 0, 0, 0.05);
            box-shadow: inset 0 -1px 0 rgba(0,0,0,.125);
        }
        .accordion-button:focus {
            box-shadow: none;
            border-color: rgba(0,0,0,.125);
        }




    /* Стилизация кружков выбора цвета */
    .color-dot {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        cursor: pointer;
        border: 2px solid transparent;
        transition: transform 0.2s, box-shadow 0.2s;
    }
    
    /* Эффект при наведении и активном состоянии */
    .color-dot:hover, .color-dot.active {
        transform: scale(1.2);
        box-shadow: 0 0 0 2px #fff, 0 0 0 4px #dee2e6; /* Двойная обводка */
    }






.color-selector {
    /*margin: 20px 0 0 0;*/
}
.color-label {
    display: block;
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 14px;
}
.colors-list {
    display: flex;
    gap: 10px; /* Отступ между квадратами */
}

/* Скрываем стандартную радио-кнопку */
.color-option input[type="radio"] {
    display: none;
}

/* Квадратик цвета */
.color-square {
    display: block;
    width: 50px;
    height: 50px;
    cursor: pointer;
    border: 2px solid #e0e0e0; /* Легкая рамка для светлых цветов */
    transition: all 0.2s ease;
    box-sizing: border-box;
}

/* Состояние: При наведении */
.color-square:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Состояние: Выбран (Активен) */
/* Ищем инпут, который checked, и стилизуем его соседа-спан */
.color-option input[type="radio"]:checked + .color-square {
    border: 3px solid #333; /* Жирная рамка активного цвета */
    transform: scale(0.95); /* Чуть вдавливаем эффект нажатия */
}


/* Блокировка кнопки */
.product-buy-link.disabled, 
.product-buy-link[disabled] {
    opacity: 0.5;
    pointer-events: none; /* Чтобы нельзя было кликнуть */
    cursor: not-allowed;
    background-color: #ccc !important;
    border-color: #ccc !important;
}



/* Ссылка в заголовке */
.product-info h3 a {
    text-decoration: none;
    color: #333; /* Черный цвет */
    transition: color 0.2s;
}

.product-info h3 a:hover {
    color: #c00; /* Красный при наведении (бренд Jawetta) */
}

/* Ссылка-картинка (убираем лишнее) */
.product-img a {
    display: block;
    text-decoration: none;
    border: none;
}








        /* Стили галереи */
        .main-image-container {
            background-color: #f8f9fa;
            border-radius: 1rem;
            overflow: hidden;
            cursor: zoom-in; /* Намек, что можно увеличить (в будущем) */
        }
        
        .thumb-img {
            cursor: pointer;
            opacity: 0.6;
            transition: all 0.2s ease;
            border: 2px solid transparent;
            border-radius: 0.5rem;
        }
        
        .thumb-img:hover {
            opacity: 1;
        }
        
        .thumb-img.active {
            opacity: 1;
            border-color: var(--brand-red);
        }

        /* Кастомные табы (вкладки) */
        .nav-tabs .nav-link {
            color: #6c757d;
            border: none;
            border-bottom: 3px solid transparent;
            font-weight: 600;
            padding-bottom: 1rem;
        }
        
        .nav-tabs .nav-link:hover {
            color: #212529;
            border-color: transparent; /* При наведении не подчеркиваем */
        }
        
        .nav-tabs .nav-link.active {
            color: var(--brand-red);
            border: none;
            border-bottom: 3px solid var(--brand-red);
            background: transparent;
        }

        /* Таблица характеристик */
        .specs-table th {
            width: 40%;
            color: #6c757d;
            font-weight: 400;
        }
        .specs-table td {
            font-weight: 600;
            font-size: 15px;
        }


        
        /* Ссылка-картинка */
        .product-img-link {
            display: block;
            overflow: hidden; /* Чтобы при зуме картинка не вылезала */
        }
        .product-img-link img {
            transition: transform 0.3s ease;
        }
        /* Зум при наведении на картинку */
        .product-img-link:hover img {
            transform: scale(1.05);
        }


.product-item:last-child hr.end {
    display: none;
}


ul.catalog-list {
    list-style-type: disc; /* Делаем точку сплошной */
}
ul.catalog-list li::marker {
    color: var(--brand-red); /* Цвет точки */
    font-size: 1.5em; /* Можно даже сделать точку чуть больше */
}

ul.catalog-list li {
    margin-bottom: 7px; /* Отступ снизу после каждого li */
}