/* @import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap'); */ /* Удаляем дублирующийся импорт */

/* Удаляем дублирующиеся стили для body */
/* 
body {
    font-family: 'Jost', sans-serif; 
    background-color: #f8f9fa; 
}
*/

.product-page-container {
    background-color: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    padding: 2rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
    overflow: hidden;
    width: 95%;
}

/* --- Хлебные крошки (Breadcrumbs) --- */
.breadcrumb-item a {
    text-decoration: none;
    color: #6c757d; /* Серый цвет для ссылок */
    font-weight: 500; /* Немного жирнее */
}
.breadcrumb-item a:hover {
    color: #0d6efd; /* Синий при наведении */
}
.breadcrumb-item.active {
    color: #212529; /* Темный цвет для активного элемента */
    font-weight: 600; /* Еще жирнее */
}


/* --- Галерея изображений --- */
.image-gallery-wrapper {
    position: relative; /* Для позиционирования стрелок */
    margin-bottom: 0.5rem; /* Отступ снизу для точек */
    /* Добавим немного отступа слева/справа, чтобы стрелки не прилипали к краям колонки */
    padding: 0 50px; /* Пространство для стрелок */
}

.product-image-gallery {
    display: flex; /* Используем flex для горизонтального расположения */
    overflow: hidden; /* Скрываем изображения, которые не помещаются */
    border: 1px solid #dee2e6; /* Обновленная рамка */
    background-color: #fff; /* Белый фон */
    align-items: center; /* Вертикальное выравнивание */
    justify-content: flex-start; /* Начинаем отображение с первого изображения */
    aspect-ratio: 1 / 1; /* Делаем блок квадратным */
    scroll-snap-type: x mandatory; /* Плавная прокрутка по изображениям */
    scroll-behavior: smooth; /* Плавная анимация прокрутки */
}

.product-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f8f9fa; /* Светло-серый фон для плейсхолдера */
    opacity: 0.5;
}

.product-image-placeholder img {
    max-width: 50%; /* Уменьшаем размер иконки */
    max-height: 50%;
}

.gallery-image { /* Стиль для реальных изображений */
    flex: 0 0 100%; /* Каждое изображение занимает всю ширину галереи */
    width: 100%; /* Явно указываем ширину */
    height: 100%; /* И высоту, чтобы object-fit корректно работал */
    display: block; /* Убираем лишние отступы */
    object-fit: contain; /* Масштабируем изображение, сохраняя пропорции */
    scroll-snap-align: start; /* Привязываем прокрутку к началу изображения */
    padding: 0.5rem; /* ДОБАВЛЯЕМ отступ сюда */
    box-sizing: border-box; /* Убедимся, что padding включен в общую ширину */
}

.gallery-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.4); /* Полупрозрачный фон */
    color: white;
    border: none;
    padding: 0.5rem 0.8rem; /* Немного увеличим padding */
    font-size: 1.4rem; /* Увеличим размер иконки */
    z-index: 10;
    border-radius: 50%; /* Круглые кнопки */
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s ease-in-out, background-color 0.2s ease-in-out;
}
.gallery-arrow:hover {
    background-color: rgba(0, 0, 0, 0.7); 
    opacity: 1; 
}
.gallery-arrow.left {
    left: 10px; /* Немного отступим от края */
}
.gallery-arrow.right {
    right: 10px; /* Немного отступим от края */
}

.gallery-dots {
    text-align: center;
    /* margin-top: 0.5rem; */ /* Убираем верхний отступ */
}
.dot {
    height: 12px; /* Увеличим размер точек */
    width: 12px;
    margin: 0 4px; /* Увеличим отступы */
    background-color: #ccc; /* Серый цвет неактивной точки */
    border: 1px solid #aaa; /* Добавим рамку */
    border-radius: 50%;
    display: inline-block;
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease; 
}
.dot.active {
    background-color: #0d6efd; /* Синий цвет активной точки */
    border-color: #0a58ca; /* Темно-синяя рамка */
}


/* --- Информация о товаре --- */
.product-info-main h1 {
    font-weight: 600; /* Жирный заголовок */
    margin-bottom: 0.5rem;
}
.product-info-main .product-description {
    margin-bottom: 1rem; /* Отступ после описания */
    font-size: 1rem; /* Стандартный размер шрифта */
    color: #495057; /* Немного темнее серого */
    line-height: 1.6;
}

/* --- Статус наличия --- */
.availability {
    font-weight: 500;
    padding: 0.4rem 0.8rem; /* Немного увеличим */
    border-radius: 0.25rem;
    display: inline-flex; /* Используем flex для иконки и текста */
    align-items: center; /* Выравниваем иконку и текст */
    gap: 0.4rem; /* Отступ между иконкой и текстом */
    margin-bottom: 1rem;
    font-size: 0.9rem;
}
.availability i {
    font-size: 1.1em; /* Иконка чуть больше текста */
}
.availability-in-stock {
    background-color: #d1e7dd; /* Зеленоватый фон */
    color: #0f5132; /* Темно-зеленый текст */
    border: 1px solid #badbcc;
}
.availability-out-of-stock {
    background-color: #f8d7da; /* Розоватый фон */
    color: #842029; /* Темно-красный текст */
    border: 1px solid #f5c2c7;
}

/* --- Цена товара --- */
.product-price {
    font-size: 1.8rem; /* Крупная цена */
    font-weight: 700; /* Очень жирная */
    color: #212529; /* Черный цвет */
    margin-bottom: 1.5rem;
}

/* --- Кнопка "В корзину" --- */
.btn-add-to-cart {
    background-color: #0d6efd; /* Синий Bootstrap */
    color: white;
    font-weight: 500;
    padding: 0.75rem 1.25rem; /* Крупнее стандартной */
    font-size: 1.1rem;
    transition: background-color 0.2s ease-in-out;
}
.btn-add-to-cart:hover {
    background-color: #0b5ed7; /* Темнее синий при наведении */
    color: white;
}
.btn-add-to-cart:disabled {
    background-color: #6c757d; /* Серый для неактивной */
    border-color: #6c757d;
    cursor: not-allowed;
}


/* --- Селектор количества --- */
.quantity-selector {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
    max-width: 200px; /* Уменьшим ширину */
}
.quantity-selector .form-label {
    margin-right: 0.8rem; /* Уменьшим отступ */
    white-space: nowrap; /* Чтобы "Количество:" не переносилось */
}
.quantity-selector .input-group {
    flex-grow: 1; /* Чтобы поле ввода заняло доступное место */
}
.quantity-selector .form-control {
    text-align: center; /* Число по центру */
    /* max-width: 60px; */ /* Уберем фикс. ширину, пусть тянется */
    height: calc(1.5em + .75rem + 2px); /* Выровняем высоту с кнопками */
}
.quantity-selector .btn {
    padding: 0.375rem 0.75rem; /* Стандартный padding Bootstrap */
}
/* Убираем стрелки у input[type=number] */
.quantity-selector input[type=number]::-webkit-inner-spin-button,
.quantity-selector input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.quantity-selector input[type=number] {
  -moz-appearance: textfield; /* Firefox */
}


/* --- Секция характеристик --- */
.characteristics-section {
    margin-top: 2rem;
    border-top: 1px solid #dee2e6; /* Линия сверху */
    padding-top: 1.5rem;
}
.characteristics-section h2 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    font-weight: 600;
}
.characteristics-list dl {
    margin-bottom: 0.5rem;
}

.characteristic-pair { /* Новый стиль для обертки */
    display: flex;
    gap: 0.5rem; /* Отступ между dt и dd */
    margin-bottom: 0.5rem; /* Отступ между парами характеристик */
    align-items: baseline; /* Выравниваем по базовой линии */
}

.characteristics-list dt {
    font-weight: 500;
    color: #6c757d;
    flex-shrink: 0; /* Не сжимать название характеристики */
    flex-basis: 40%; /* Задаем базовую ширину для названия */
}

.characteristics-list dd {
    font-weight: 400;
    color: #212529;
    margin-left: 0; /* Сбрасываем отступ по умолчанию */
}


/* --- Секция Похожие товары --- */
.similar-products-section {
    margin-top: 3rem; /* Отступ сверху от характеристик */
    padding-top: 1.5rem;
    border-top: 1px solid #dee2e6; /* Линия сверху */
    padding-bottom: 1rem; /* Небольшой отступ снизу, чтобы скроллбар не прилипал */
}

.similar-products-section h2 {
    font-size: 1.5rem;
    margin-bottom: 1.5rem; /* Отступ под заголовком */
    font-weight: 600;
}

.similar-products-scroll-container {
    display: flex; /* Используем flexbox для горизонтального расположения */
    overflow-x: auto; /* Включаем горизонтальную прокрутку */
    padding-bottom: 1rem; /* Добавляем отступ снизу для скроллбара */
    gap: 1rem; /* Отступы между карточками */
}

/* Заменяем .similar-product-card на .similar-product-wrapper */
.similar-product-wrapper {
    flex: 0 0 auto; /* Карточки не будут растягиваться или сжиматься */
    width: 220px; /* Уменьшим ширину карточки */
}

/* Стили для скроллбара (опционально) */
.similar-products-scroll-container::-webkit-scrollbar {
    height: 8px;
}

.similar-products-scroll-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.similar-products-scroll-container::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}

.similar-products-scroll-container::-webkit-scrollbar-thumb:hover {
    background: #aaa;
}