/* ==========================================================================
   CUSTOM ADVANCED VISUAL ARCHITECTURE FOR KUANGMI KNOB KNEE BRACE
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. GLOBAL SYSTEM ROOT CONFIGURATION & CSS VARIABLES
   -------------------------------------------------------------------------- */
:root {
    /* Основная цветовая палитра (Красный цвет из основного промпта) */
    --clr-primary: #dc2626;         /* Основной красный */
    --clr-primary-hover: #b91c1c;   /* Темно-красный для hover */
    --clr-primary-light: #fef2f2;   /* Очень светлый красный для фонов */
    --clr-primary-dark: #991b1b;    /* Глубокий красный для акцентов */
    --clr-primary-glow: rgba(220, 38, 38, 0.15);
    
    /* Нейтральная палитра для чистого и современного вида */
    --clr-body-bg: #f9fafb;
    --clr-card-bg: #ffffff;
    --clr-text-main: #111827;
    --clr-text-muted: #6b7280;
    --clr-border-light: #f3f4f6;
    --clr-border-medium: #e5e7eb;
    --clr-border-dark: #d1d5db;
    
    /* Цвета Amazon-style отзывов */
    --clr-amazon-star: #ff9900;
    --clr-amazon-verified: #c45500;
    
    /* Типографика */
    --font-stack-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    
    /* Многоуровневые тени для создания глубины (Layered Shadows) */
    --shadow-level-1: 0 1px 3px rgba(0, 0, 0, 0.05);
    --shadow-level-2: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    --shadow-level-3: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
    --shadow-level-4: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-layered: 0 1px 1px rgba(0,0,0,0.08), 0 2px 2px rgba(0,0,0,0.08), 0 4px 4px rgba(0,0,0,0.08), 0 8px 8px rgba(0,0,0,0.08), 0 16px 16px rgba(0,0,0,0.08);
    --shadow-inner-soft: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
    --shadow-glow: 0 0 20px rgba(220, 38, 38, 0.2);
    
    /* Скругления */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 32px;
    
    /* Анимации и транзиции */
    --time-fast: 150ms;
    --time-normal: 300ms;
    --time-slow: 500ms;
    --transition-curve: cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* --------------------------------------------------------------------------
   2. BODY GENERAL BASICS & INTERFACE POLISH
   -------------------------------------------------------------------------- */
body {
    background-color: var(--clr-body-bg);
    font-family: var(--font-stack-sans);
    color: var(--clr-text-main);
    letter-spacing: -0.01em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
}

/* Улучшение заголовков */
h1, h2, h3, h4 {
    letter-spacing: -0.03em;
}

::selection {
    background-color: var(--clr-primary-light);
    color: var(--clr-primary-dark);
}

/* --------------------------------------------------------------------------
   3. BACKGROUND AMBIENT DECORATIVE GLOW ELEMENTS
   -------------------------------------------------------------------------- */
/* Создаем красивые свечения на фоне для глубины дизайна */
.glow-element {
    position: absolute;
    border-radius: 50%;
    filter: blur(140px);
    z-index: -1;
    pointer-events: none;
    opacity: 0.4;
    animation: floatingGlow 12s infinite alternate ease-in-out;
}

.glow-1 {
    top: -5%;
    left: -10%;
    width: 450px;
    height: 450px;
    background-color: rgba(220, 38, 38, 0.12);
}

.glow-2 {
    top: 25%;
    right: -15%;
    width: 550px;
    height: 550px;
    background-color: rgba(153, 27, 27, 0.08);
    animation-delay: -3s;
}

.glow-3 {
    bottom: 10%;
    left: -20%;
    width: 600px;
    height: 600px;
    background-color: rgba(220, 38, 38, 0.06);
    animation-delay: -6s;
}

@keyframes floatingGlow {
    0% { transform: translateY(0) scale(1); }
    100% { transform: translateY(40px) scale(1.15); }
}

/* --------------------------------------------------------------------------
   4. HEADER STYLING PLATFORM
   -------------------------------------------------------------------------- */
.main-header {
    background-color: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--clr-border-medium);
    transition: all var(--time-normal) var(--transition-curve);
    box-shadow: var(--shadow-level-1);
}

/* Декоративная линия сверху */
.header-inner-line {
    height: 4px;
    width: 100%;
    background: linear-gradient(90deg, var(--clr-primary-dark), var(--clr-primary), var(--clr-primary-dark));
    background-size: 200% auto;
    animation: gradientShift 4s linear infinite;
}

@keyframes gradientShift {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; }
}

.main-logo-text {
    position: relative;
    display: inline-block;
    transition: transform var(--time-fast);
}

/* Анимация подчеркивания логотипа при наведении */
.main-logo-text::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 25%;
    width: 50%;
    height: 2px;
    background-color: var(--clr-primary);
    transform: scaleX(0);
    transition: transform var(--time-normal);
}

.main-header:hover .main-logo-text::after {
    transform: scaleX(1);
}

/* Декоративные бейджи в хедере */
.header-badge-accent {
    position: absolute;
    align-items: center;
    gap: 8px;
    background-color: var(--clr-border-light);
    padding: 6px 14px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--clr-text-muted);
    border: 1px solid var(--clr-border-medium);
}

.left-accent-badge { left: 4%; }
.right-accent-badge { right: 4%; }

.badge-dot {
    width: 6px;
    height: 6px;
    background-color: var(--clr-text-muted);
    border-radius: 50%;
}

.badge-dot.dot-active {
    background-color: var(--clr-primary);
    box-shadow: 0 0 8px var(--clr-primary);
    animation: pulseDot 2s infinite;
}

@keyframes pulseDot {
    0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }
    70% { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0); }
    100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}

/* --------------------------------------------------------------------------
   5. HERO PRODUCT CONTAINER CARD ARCHITECTURE
   -------------------------------------------------------------------------- */
.product-hero-wrapper {
    position: relative;
    z-index: 10;
}

.product-master-card {
    box-shadow: var(--shadow-level-4), var(--shadow-level-1);
    border: 1px solid rgba(255, 255, 255, 0.8);
    background: linear-gradient(135deg, #ffffff 0%, #fdfdfd 100%);
    position: relative;
}

/* Мягкое свечение позади карточки товара */
.product-master-card::before {
    content: '';
    position: absolute;
    -inset: 2px;
    background: linear-gradient(45deg, var(--clr-primary-glow), transparent 60%, var(--clr-primary-glow));
    border-radius: 26px;
    z-index: -1;
    pointer-events: none;
    opacity: 0.7;
}

/* Угловые акценты на карточке */
.corner-accent {
    position: absolute;
    width: 20px;
    height: 20px;
    border: 3px solid var(--clr-primary-dark);
    opacity: 0.1;
    pointer-events: none;
    transition: opacity var(--time-normal);
}

.product-master-card:hover .corner-accent {
    opacity: 0.3;
}

.top-left-corner { top: 24px; left: 24px; border-right: 0; border-bottom: 0; }
.bottom-right-corner { bottom: 24px; right: 24px; border-left: 0; border-top: 0; }

/* --------------------------------------------------------------------------
   6. PURE CSS NO-JAVASCRIPT INTERACTIVE GALLERY ENGINE
   -------------------------------------------------------------------------- */
.gallery-master-container {
    position: relative;
}

.gallery-inner-sticky {
    position: relative;
}

@media (min-width: 1024px) {
    .gallery-inner-sticky {
        position: sticky;
        top: 110px; /* Прилипание галереи при скролле описания */
    }
}

/* Главный фрейм для изображений */
.main-display-viewport-frame {
    border: 1px solid var(--clr-border-medium);
    box-shadow: var(--shadow-inner-soft), var(--shadow-level-2);
    background-color: #ffffff;
    overflow: hidden;
    position: relative;
}

/* Внутренняя тень для фрейма */
.main-display-viewport-frame::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 40px rgba(0,0,0,0.02);
    pointer-events: none;
    z-index: 15;
    border-radius: inherit;
}

/* Элементы изображений */
.gallery-image-render {
    max-height: 85%;
    max-width: 85%;
    filter: drop-shadow(0 15px 20px rgba(0,0,0,0.08));
    transform: scale(0.98);
    transition: transform var(--time-slow) var(--transition-curve);
}

.single-slide-item:hover .gallery-image-render {
    transform: scale(1.02);
}

/* Миниатюры (Thumbnails) */
.thumbnail-card-label {
    border: 2px solid var(--clr-border-medium);
    background-color: #ffffff;
    transition: all var(--time-normal) var(--transition-curve);
    position: relative;
}

.thumbnail-card-label:hover {
    border-color: rgba(220, 38, 38, 0.4);
    transform: translateY(-3px);
    box-shadow: var(--shadow-level-2);
}

/* Оверлей-рамка для активной миниатюры */
.thumb-overlay-border {
    border: 3px solid var(--clr-primary);
    opacity: 0;
    transition: opacity var(--time-fast) ease-in-out;
    z-index: 10;
}

/* ==========================================================================
   THE COMPLEX ENGINE SWITCHING CALCULATIONS MATRIX (CSS-ONLY GALLERY)
   ========================================================================== */

/* Скрываем чекбоксы */
.hidden-gallery-radio {
    display: none;
}

/* КОНТРОЛЛЕР 1 */
#img-ctrl-1:checked ~ .main-display-viewport-frame .viewport-slides-wrapper {
    transform: translateX(0%);
}
#img-ctrl-1:checked ~ .thumbnails-grid-row #thumb-lbl-1 {
    border-color: var(--clr-primary);
    background-color: var(--clr-primary-light);
    transform: scale(1.02) translateY(-2px);
    box-shadow: var(--shadow-level-3);
}
#img-ctrl-1:checked ~ .thumbnails-grid-row #thumb-lbl-1 .thumb-overlay-border { opacity: 1; }
#img-ctrl-1:checked ~ .main-display-viewport-frame .dot-idx-1 { background-color: var(--clr-primary); width: 24px; }

/* КОНТРОЛЛЕР 2 */
#img-ctrl-2:checked ~ .main-display-viewport-frame .viewport-slides-wrapper {
    transform: translateX(-100%);
}
#img-ctrl-2:checked ~ .thumbnails-grid-row #thumb-lbl-2 {
    border-color: var(--clr-primary);
    background-color: var(--clr-primary-light);
    transform: scale(1.02) translateY(-2px);
    box-shadow: var(--shadow-level-3);
}
#img-ctrl-2:checked ~ .thumbnails-grid-row #thumb-lbl-2 .thumb-overlay-border { opacity: 1; }
#img-ctrl-2:checked ~ .main-display-viewport-frame .dot-idx-2 { background-color: var(--clr-primary); width: 24px; }
#img-ctrl-2:checked ~ .main-display-viewport-frame .dot-idx-1 { background-color: var(--clr-border-dark); width: 8px; }

/* КОНТРОЛЛЕР 3 */
#img-ctrl-3:checked ~ .main-display-viewport-frame .viewport-slides-wrapper {
    transform: translateX(-200%);
}
#img-ctrl-3:checked ~ .thumbnails-grid-row #thumb-lbl-3 {
    border-color: var(--clr-primary);
    background-color: var(--clr-primary-light);
    transform: scale(1.02) translateY(-2px);
    box-shadow: var(--shadow-level-3);
}
#img-ctrl-3:checked ~ .thumbnails-grid-row #thumb-lbl-3 .thumb-overlay-border { opacity: 1; }
#img-ctrl-3:checked ~ .main-display-viewport-frame .dot-idx-3 { background-color: var(--clr-primary); width: 24px; }
#img-ctrl-3:checked ~ .main-display-viewport-frame .dot-idx-1 { background-color: var(--clr-border-dark); width: 8px; }

/* КОНТРОЛЛЕР 4 */
#img-ctrl-4:checked ~ .main-display-viewport-frame .viewport-slides-wrapper {
    transform: translateX(-300%);
}
#img-ctrl-4:checked ~ .thumbnails-grid-row #thumb-lbl-4 {
    border-color: var(--clr-primary);
    background-color: var(--clr-primary-light);
    transform: scale(1.02) translateY(-2px);
    box-shadow: var(--shadow-level-3);
}
#img-ctrl-4:checked ~ .thumbnails-grid-row #thumb-lbl-4 .thumb-overlay-border { opacity: 1; }
#img-ctrl-4:checked ~ .main-display-viewport-frame .dot-idx-4 { background-color: var(--clr-primary); width: 24px; }
#img-ctrl-4:checked ~ .main-display-viewport-frame .dot-idx-1 { background-color: var(--clr-border-dark); width: 8px; }

/* --------------------------------------------------------------------------
   7. RIGHT INFO COLUMN: HIGH TYPOGRAPHY POLISH
   -------------------------------------------------------------------------- */
.heading-accent-title {
    position: relative;
    line-height: 1.15;
    font-weight: 800;
}

/* Декоративное подчеркивание заголовка */
.heading-accent-title::after {
    content: '';
    display: block;
    width: 80px;
    height: 6px;
    background: linear-gradient(90deg, var(--clr-primary), transparent);
    margin-top: 16px;
    border-radius: var(--radius-sm);
}

/* Блок с ключевыми словами */
.keyword-promo-box {
    position: relative;
    overflow: hidden;
}

.keyword-promo-box::before {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 50px; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8));
}

.keyword-highlight {
    background-color: rgba(220, 38, 38, 0.1);
    color: var(--clr-primary-dark);
    padding: 2px 6px;
    font-weight: 700;
    border-radius: 4px;
    border-bottom: 2px solid rgba(220, 38, 38, 0.3);
    transition: all var(--time-fast);
}

.keyword-highlight:hover {
    background-color: rgba(220, 38, 38, 0.2);
    border-bottom-color: var(--clr-primary);
}

/* Карточки преимуществ товара */
.feature-item-card {
    background-color: #ffffff;
    border: 1px solid var(--clr-border-light);
    box-shadow: var(--shadow-level-1);
    position: relative;
    overflow: hidden;
    transition: all var(--time-normal) var(--transition-curve);
}

.feature-item-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background-color: transparent;
    transition: background-color var(--time-normal);
}

.feature-item-card:hover {
    transform: translateX(6px);
    background-color: #ffffff;
    box-shadow: var(--shadow-level-2);
    border-color: rgba(220, 38, 38, 0.2);
}

.feature-item-card:hover::before {
    background-color: var(--clr-primary);
}

/* Кастомные галочки списков */
.custom-check-bullet {
    color: var(--clr-primary);
    background-color: var(--clr-primary-light);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: 14px;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(220, 38, 38, 0.15);
}

/* --------------------------------------------------------------------------
   8. PREMIUM HIGH-IMPACT HIGH-VISIBILITY CTA BLOCK
   -------------------------------------------------------------------------- */
.cta-master-container {
    position: relative;
}

.cta-inner-block {
    box-shadow: var(--shadow-layered);
}

/* Пульсирующие декоративные круги на фоне CTA */
.cta-background-shape {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, var(--clr-primary) 0%, transparent 70%);
    opacity: 0.15;
    pointer-events: none;
    z-index: 1;
    filter: blur(20px);
}

.shape-left { width: 350px; height: 350px; left: -120px; top: -60px; }
.shape-right { width: 300px; height: 300px; right: -100px; bottom: -80px; }

/* Главная кнопка действия */
.master-action-cta-button {
    background: linear-gradient(135deg, #e11d48 0%, #dc2626 50%, #b91c1c 100%);
    box-shadow: 0 10px 25px -5px rgba(220, 38, 38, 0.4), 0 8px 10px -6px rgba(220, 38, 38, 0.4);
    letter-spacing: 0.04em;
    overflow: hidden;
    transition: all var(--time-normal) var(--transition-bounce);
}

/* Эффект блика на кнопке (Shine) */
.master-action-cta-button::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transform: skewX(-25deg);
    transition: none;
}

@keyframes shineAnimation {
    0% { left: -100%; }
    20% { left: 200%; }
    100% { left: 200%; }
}

.btn-animation-wrapper:hover .master-action-cta-button::before {
    animation: shineAnimation 2.5s infinite ease-in-out;
}

.btn-animation-wrapper:hover .master-action-cta-button {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 20px 35px -5px rgba(220, 38, 38, 0.5), 0 12px 15px -6px rgba(220, 38, 38, 0.5);
}

.btn-animation-wrapper:active .master-action-cta-button {
    transform: translateY(1px) scale(0.98);
}

/* Пульсация внешней тени кнопки */
@keyframes pulseSlow {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.04); opacity: 0.9; }
}
.animate-pulse-slow {
    animation: pulseSlow 2.5s infinite ease-in-out;
}

/* --------------------------------------------------------------------------
   9. CUSTOM VERTICAL AMAZON FEED REVIEWS GRID SYSTEM
   -------------------------------------------------------------------------- */
.reviews-section-feed {
    background-color: transparent;
}

/* Карточка отдельного отзыва */
.single-review-card {
    background-color: #ffffff;
    box-shadow: var(--shadow-level-1);
    border: 1px solid var(--clr-border-medium);
    transition: all var(--time-normal) var(--transition-curve);
}

.single-review-card:hover {
    border-color: rgba(220, 38, 38, 0.2);
    box-shadow: var(--shadow-level-3);
    transform: translateY(-2px);
}

/* Декоративная боковая линия отзыва */
.review-card-accent-line {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background-color: var(--clr-border-light);
    transition: background-color var(--time-normal);
}

.single-review-card:hover .review-card-accent-line {
    background-color: var(--clr-primary);
}

/* Звезды и бейджи */
.stars-indicator-row {
    color: var(--clr-amazon-star);
    letter-spacing: 0.15em;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.verification-badge {
    color: var(--clr-amazon-verified);
    font-size: 11px;
    position: relative;
    padding-left: 14px;
}

/* Иконка галочки для Verified */
.verification-badge::before {
    content: '✓';
    position: absolute;
    left: 0;
    font-weight: 900;
}

/* Аватарки */
.avatar-circle-frame {
    box-shadow: var(--shadow-inner-soft), var(--shadow-level-1);
    transition: transform var(--time-fast);
    background-color: #f3f4f6;
}

.single-review-card:hover .avatar-circle-frame {
    transform: scale(1.08) rotate(-3deg);
    border-color: var(--clr-primary);
}

/* --------------------------------------------------------------------------
   10. FOOTER SECTION STYLING ARCHITECTURE
   -------------------------------------------------------------------------- */
footer {
    background-color: #0b0f19;
    position: relative;
    overflow: hidden;
}

/* Декоративный градиент сверху футера */
footer::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(220, 38, 38, 0.5), transparent);
}

.footer-policy-link {
    position: relative;
    padding-bottom: 2px;
}

/* Анимация подчеркивания ссылок */
.footer-policy-link::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 100%; height: 1px;
    background-color: var(--clr-primary);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--time-fast) ease;
}

.footer-policy-link:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* --------------------------------------------------------------------------
   11. EXTENSIVE COMPREHENSIVE MOBILE-FIRST RESPONSIVE QUERIES
   -------------------------------------------------------------------------- */

/* Ультра-маленькие экраны (iPhone SE и меньше) */
@media (max-width: 375px) {
    .heading-accent-title {
        font-size: 1.6rem !important;
    }
    .main-logo-text {
        font-size: 1rem !important;
    }
    .master-action-cta-button {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
        font-size: 0.95rem !important;
    }
    .single-review-card {
        padding: 1rem !important;
    }
    .thumbnails-grid-row {
        gap: 6px !important;
    }
}

/* Стандартные смартфоны */
@media (max-width: 480px) {
    .product-master-card {
        border-radius: 16px;
    }
    .review-meta-specs {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    .meta-divider {
        display: none;
    }
    .cta-inner-block {
        padding: 2rem 1.5rem !important;
    }
}

/* Планшеты (Portrait) */
@media (max-width: 768px) {
    .header-badge-accent {
        display: none !important; /* Скрываем бейджи чтобы не ломать верстку на мобильных */
    }
    .detailed-features-layout {
        gap: 12px !important;
    }
    .footer-links-stack {
        align-items: center;
        margin-top: 1rem;
    }
    .gallery-image-render {
        max-width: 95%;
        max-height: 95%;
    }
}

/* Десктопы среднего размера (Laptops) */
@media (min-width: 769px) and (max-width: 1023px) {
    .product-master-card {
        padding: 2rem !important;
    }
    .heading-accent-title {
        font-size: 2.25rem;
    }
}

/* Оптимизация для Retina дисплеев */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .product-master-card {
        border-width: 0.5px;
        border-color: rgba(255,255,255,0.95);
    }
    .single-review-card {
        border-width: 0.5px;
    }
}

/* Поддержка темной темы браузера (опциональная защита) */
@media (prefers-color-scheme: dark) {
    /* Поскольку промпт требует светлый фон, мы жестко форсируем цвета переменных
       даже если у пользователя темная тема, чтобы дизайн не сломался */
    :root {
        --clr-body-bg: #f9fafb;
        --clr-card-bg: #ffffff;
        --clr-text-main: #111827;
    }
}