/* =========================================
   CUSTOM OVERRIDES: HERO & ACCORDION
   ========================================= */

/* 1. ГЛОБАЛЬНЫЕ ШРИФТЫ */
:root {
    --font-body-family: 'PP Neue Montreal', sans-serif !important;
    --font-heading-family: 'PP Neue Montreal', sans-serif !important;
}

body, h1, h2, h3, h4, h5, p, span, a, button, li {
    font-family: 'PP Neue Montreal', sans-serif !important;
}

/* 2. ЛЭЙАУТ HERO (DESKTOP > 1232px) */
@media (min-width: 1233px) {
    .hero-product {
        display: grid !important;
        grid-template-columns: 1fr 500px !important;
        width: 100% !important;
        position: relative !important;
        background: #fff;
    }
    .product__gallery--wrapper {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
        position: sticky !important;
        top: 0 !important;
        height: 100vh !important;
        width: 100% !important;
        z-index: 1 !important;
        overflow: hidden !important;
    }
    .product__info-wrapper {
        grid-column: 2 !important;
        grid-row: 1 !important;
        position: relative !important;
        z-index: 2 !important;
        margin-top: 140px !important;
        margin-right: 40px !important;
        padding-bottom: 100px !important;
        pointer-events: none; 
    }
    .product-scroll-container {
        pointer-events: auto !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
        max-width: 480px !important;
    }
}

/* 3. ОБЩИЕ СТИЛИ КАРТОЧЕК */
.product-info--blocks {
    background: #ffffff !important;
    padding: 40px !important;
    border-radius: 24px !important;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05) !important;
    border: 1px solid rgba(0,0,0,0.05) !important;
}

/* КАРТОЧКА 1: ЗАГОЛОВКИ И ЦЕНА */
.product__info--title h1.global-heading-lg {
    font-size: 52px !important;
    line-height: 1.1 !important;
    font-weight: 400 !important;
    margin-bottom: 15px !important;
    color: #000 !important;
}
.product__info--title p.global-heading-xs {
    font-size: 16px !important;
    line-height: 1.4 !important;
    color: #000 !important;
    margin: 0 0 20px 0 !important;
}
.price-area { margin-bottom: 30px !important; }
.price-item { font-size: 40px !important; color: #121212 !important; }

/* Иконки доставки */
.extra-information {
    display: flex !important;
    gap: 20px !important;
    margin-bottom: 30px !important;
    font-size: 14px !important;
    color: #555 !important;
}
.extra { display: flex !important; align-items: center !important; gap: 8px !important; }

/* Кнопка */
.product-form__submit, .button--primary {
    background-color: #121212 !important;
    color: #ffffff !important;
    border-radius: 50px !important;
    font-size: 18px !important;
    height: 60px !important;
    width: 100% !important;
    cursor: pointer !important;
    border: none !important;
    transition: opacity 0.3s !important;
}
.button--primary:hover { opacity: 0.8 !important; }

/* -----------------------------------------------------
   КАРТОЧКА 2: АККОРДЕОНЫ (Фикс высоты)
   ----------------------------------------------------- */
.product-accordion-card {
    padding: 10px 40px !important;
}

.accordion {
    border-bottom: 1px solid #e0e0e0 !important;
}
.accordion:last-child {
    border-bottom: none !important;
}

/* Стили заголовка (Summary) */
.accordion summary {
    /* Фиксируем высоту заголовка, чтобы все блоки были одинаковыми */
    min-height: 90px !important; 
    padding: 0 !important; /* Убираем паддинг, управляем высотой через flex */
    
    cursor: pointer !important;
    list-style: none !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important; /* Центрируем текст и иконку по вертикали */
    box-sizing: border-box !important;
}

.accordion summary::-webkit-details-marker {
    display: none !important;
}

/* Название раздела */
.accordion__title {
    font-size: 20px !important;
    font-weight: 400 !important;
    margin: 0 !important;
    color: #000 !important;
    line-height: 1 !important;
}

/* Иконка в круге */
.accordion__icon-wrapper {
    width: 32px !important;
    height: 32px !important;
    border: 1px solid #d0d0d0 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    transition: border-color 0.3s ease !important;
}
.accordion details[open] .accordion__icon-wrapper {
    border-color: #000 !important;
}

/* Плюс и минус */
.icon-plus, .icon-minus {
    font-size: 18px !important;
    font-weight: 300 !important;
    line-height: 1 !important;
    color: #121212 !important;
    position: relative;
    top: -1px;
}

/* Контент внутри */
.accordion__content {
    padding-bottom: 30px !important;
    padding-top: 10px !important; /* Небольшой отступ сверху, если открыто */
    font-size: 16px !important;
    line-height: 1.6 !important;
    color: #444 !important;
    text-align: left !important;
}

/* Стили списка режимов */
.mode-item {
    margin-bottom: 15px !important;
}
.mode-item p {
    margin: 0 !important;
    font-size: 15px !important;
    color: #333 !important;
}
.mode-item strong {
    font-weight: 500 !important;
    color: #000 !important;
}

/* 4. ГАЛЕРЕЯ */
.product__gallery img {
    width: 100% !important;
    height: 100vh !important;
    object-fit: cover !important;
}
.product__thumbs {
    position: absolute !important;
    bottom: 40px !important;
    left: 40px !important;
    display: flex !important;
    gap: 10px !important;
    z-index: 5 !important;
}
.product__thumbs .thumb {
    width: 60px !important;
    height: 60px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    cursor: pointer !important;
    border: 2px solid transparent !important;
    transition: border-color 0.3s !important;
}
.product__thumbs .thumb.active {
    border-color: #121212 !important;
}
.product__thumbs img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* 5. MOBILE (< 1232px) */
@media (max-width: 1232px) {
    .hero-product { display: block !important; }
    
    .product__gallery--wrapper {
        position: relative !important;
        height: auto !important;
        top: auto !important;
        z-index: 1 !important; /* Убедимся, что галерея ниже */
    }
    
    .product__gallery img { 
        height: auto !important;          /* Высота подстраивается */
        aspect-ratio: 1 / 1 !important;   /* Пропорция 1 к 1 (квадрат) */
        object-fit: cover !important;     /* Картинка заполняет квадрат */
        object-position: center !important; /* Центрируем продукт */
        max-height: 450px !important;     /* Ограничение для планшетов */
        width: 100% !important;
    }
    
    .product__info-wrapper {
        margin: -40px 20px 40px 20px !important;
        width: auto !important;
        /* FIX: Поднимаем слой с контентом выше картинки */
        position: relative !important;
        z-index: 10 !important;
    }
    
    .product-scroll-container { gap: 15px !important; }
    .product-info--blocks { padding: 25px !important; }
    .product__info--title h1.global-heading-lg { font-size: 32px !important; }
    .product__thumbs { display: none !important; }
    
    /* Уменьшаем высоту аккордеонов на мобильном */
    .accordion summary { min-height: 70px !important; }
    .accordion__title { font-size: 18px !important; }
}

.dp-btn-primary {
    background-color: #000000 !important;
    color: #ffffff !important;
    width: 100% !important;
    display: block !important;
    padding: 16px 20px !important;
    border: none !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    letter-spacing: 1px !important;
    cursor: pointer !important;
    text-align: center !important;
    transition: opacity 0.3s ease !important;
    
    /* Скругленные края */
    border-radius: 30px !important; 
}

.dp-btn-primary:hover {
    opacity: 0.85 !important;
}